/* ===== Moinaki — Tarot One Card (layout: left deck | right text+button) ===== */

.moinaki-tarot-onecard{ max-width:1040px; margin:0 auto; padding:0 8px 24px; }

/* grid: left deck, right content */
.mt-table{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:28px;
  align-items:center;
  margin:14px 0 8px;
}
@media (max-width:900px){
  .mt-table{ grid-template-columns:1fr; }
}

/* deck (left) */
.mt-deck{
  width:260px;
  max-width:100%;
  aspect-ratio: 360/570;
  perspective:1000px;
}
.mt-deck .mt-back{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  transition: transform .6s ease;
  transform-style:preserve-3d;
}
/* shuffle animation */
.mt-deck.shuffling .mt-back{ animation: shuffle 950ms ease-in-out infinite; }
@keyframes shuffle{
  0%{transform:rotate(0deg)} 25%{transform:rotate(2.5deg) translateY(-2px)}
  50%{transform:rotate(-2.5deg) translateY(1px)} 75%{transform:rotate(1.5deg) translateY(-1px)}
  100%{transform:rotate(0deg)}
}
@media (prefers-reduced-motion: reduce){
  .mt-deck.shuffling .mt-back{ animation:none; }
}

/* controls (right) */
.mt-controls .mt-h{
  margin:0 0 10px; font-size:clamp(1.6rem,2.4vw,2.2rem); line-height:1.2;
}
.mt-controls .mt-p{ margin:0 0 14px; opacity:.9; }
.mt-btn{
  display:inline-block;
  padding:12px 22px;
  border-radius:999px;
  border:2px solid #b458ff;
  background:linear-gradient(180deg,#ba4bff 0%, #8b44ff 100%);
  color:#fff; font-weight:700;
  box-shadow:0 8px 24px rgba(138,68,255,.28);
  cursor:pointer;
  transition:transform .08s ease, filter .18s ease, box-shadow .18s ease;
}
.mt-btn:hover{ filter:brightness(1.07); box-shadow:0 10px 28px rgba(138,68,255,.36); }
.mt-btn:active{ transform:translateY(1px); }
.mt-btn:disabled{ opacity:.65; cursor:default; box-shadow:none; }

/* result area pushed down */
.mt-result{ margin-top:40px; }

/* result layout: left drawn card, right text */
.mt-output{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap:24px; align-items:start;
  animation:fadeInUp .28s ease both;
}
@media (max-width:900px){
  .mt-output{ grid-template-columns:1fr; }
}
@keyframes fadeInUp{
  from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}
}

.mt-card{ margin:0; text-align:center; }
.mt-card img{
  width:100%; height:auto; display:block;
  border-radius:10px; box-shadow:0 12px 36px rgba(0,0,0,.55);
  transition:transform .25s ease;
}
.mt-card.is-reversed img{ transform:rotate(180deg); }
.mt-card figcaption{ margin-top:8px; font-size:.98rem; opacity:.9; }
.mt-orient{ opacity:.7; font-style:italic; }

.mt-text p{ margin:0 0 10px; }
.mt-kws em{ opacity:.95; }
.mt-adv{ margin:6px 0 0; padding-left:18px; }
.mt-adv li{ margin:2px 0; }
.mt-more{ margin-top:10px; }
.mt-more a{ text-decoration:underline; font-weight:600; }

/* focus states */
.mt-btn:focus-visible, .mt-more a:focus-visible{
  outline:3px solid #ffc266; outline-offset:2px; border-radius:6px;
}
.mt-title{
  margin: 0 0 8px;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  line-height: 1.2;
}
.mt-title .mt-orient{ font-size: .9em; opacity: .7; }

/* Yes/No badge */
.mt-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:8px;
  font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.mt-strong_yes{ background:#1f8b4c; color:#fff; }
.mt-yes{        background:#2aa352; color:#fff; }
.mt-maybe{      background:#ffcc4d; color:#000; }
.mt-no{         background:#e76464; color:#fff; }
.mt-strong_no{  background:#cc3d3d; color:#fff; }

.mt-btn.mt-btn-secondary{
  background:transparent;
  border-color:#b458ff;
  color:#fff;
}
.mt-btn.mt-btn-secondary:hover{
  filter:none;
  box-shadow:0 8px 24px rgba(138,68,255,.28);
}
/* Spacing & typography for Yes/No */
.mt-result:focus { outline: none; }
.mt-output {
  animation: fadeInUp .28s ease both, flashGlow 1.2s ease 1;
}
@keyframes flashGlow {
  0% { box-shadow: 0 0 0 rgba(255,255,255,0); }
  30% { box-shadow: 0 0 0 rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
}

.mt-yn-group { margin-bottom: 14px; }
.mt-yn-lead { margin: 10px 0 8px; line-height: 1.6; }
.mt-yn-next { margin: 8px 0 10px; }
.mt-yn-next ul { margin: 6px 0 0; padding-left: 18px; }
.mt-yn-next li { margin: 2px 0; }
.mt-yn-why { margin: 10px 0 0; opacity: .9; }
.mt-more { margin-top: 16px; }