.tarot { --tarot-w: min(300px, 66vw); --tarot-ratio: 1080 / 1850; }
.tarot-body { max-width: 640px; margin: 0 auto; text-align: center; }
.tarot-head { margin: 0 0 20px; }
.tarot-head h1 { margin: 0; font-family: var(--font-serif); font-weight: 500; letter-spacing: 0.12em; color: var(--gold-light); font-size: clamp(1.6rem, 1.6vw + 1rem, 2.2rem); }
.tarot-head .sub { margin: 6px 0 0; font-size: 0.85rem; letter-spacing: 0.24em; color: var(--gold); }
.tarot-error { color: var(--gold-light); }

.start .lead { margin: 0 0 28px; line-height: 2; color: var(--fg); }
.start .lead > span { display: block; }
.start .lead .seg { display: inline-block; } 
.deck {
  position: relative; display: block; margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer;
  width: var(--tarot-w); aspect-ratio: var(--tarot-ratio); border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}
.deck:disabled { cursor: default; }

.deck img { display: block; width: 100%; height: 100%; border-radius: 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6); transition: box-shadow 0.2s; }
.deck:not(:disabled):hover img { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6), 0 0 32px rgba(212, 175, 55, 0.35); }
.deck:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 6px; }

.deck.is-shuffling img { animation: tarot-shuffle 0.45s ease-in-out; }
@keyframes tarot-shuffle { 0%, 100% { transform: none; } 25% { transform: rotate(-3deg); } 50% { transform: translateY(-8px) rotate(2.5deg) scale(1.03); } 75% { transform: rotate(-1deg); } }

.history { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; }
.history[hidden] { display: none; }
.thumb { display: block; padding: 0; border: 1px solid transparent; border-radius: 6px; background: none; cursor: pointer; opacity: 0.6; transition: opacity 0.2s, border-color 0.2s; }
.thumb img { display: block; width: 44px; height: auto; aspect-ratio: var(--tarot-ratio); border-radius: 5px; }
.thumb:hover { opacity: 0.9; }
.thumb[aria-current="true"] { opacity: 1; border-color: var(--gold-light); }
.is-reversed { transform: rotate(180deg); }

.flip { width: var(--tarot-w); aspect-ratio: var(--tarot-ratio); margin: 0 auto; perspective: 1400px; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.5s ease; }
.flip-inner.is-back { transform: rotateY(180deg); }
.flip-inner.no-anim { transition: none; }
.flip .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip .face.back { transform: rotateY(180deg); }
.flip .face img { display: block; width: 100%; height: 100%; border-radius: 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6); }

.reading { margin: 22px 0 0; }
.reading p { margin: 0; }
.card-name { font-family: var(--font-serif); font-size: 1.35rem; letter-spacing: 0.12em; color: var(--gold-light); }
.card-en { margin-top: 2px !important; font-size: 0.72rem; letter-spacing: 0.28em; color: var(--gold); }
.chara { margin-top: 6px !important; font-size: 0.9rem; }
.chara a { color: var(--fg-muted); text-decoration: none; letter-spacing: 0.06em; }
.chara a:hover { color: var(--fg); }
.chara .go { margin-left: 0.8em; font-size: 0.8rem; color: var(--gold); white-space: nowrap; }
.side { margin-top: 14px !important; display: inline-block; padding: 2px 14px; border: 1px solid var(--card-border); border-radius: 999px; font-size: 0.85rem; letter-spacing: 0.24em; color: var(--gold-light); }
.reading .head { margin: 16px 0 0; font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.6rem, 3.2vw + 0.9rem, 2.3rem); line-height: 1.5; letter-spacing: 0.04em; color: var(--fg); text-wrap: balance; word-break: auto-phrase; }
.switch { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 0.85rem; color: var(--fg-muted); cursor: pointer; }
.switch input { width: 18px; height: 18px; accent-color: var(--gold); margin: 0; }
.reading .body { margin: 14px auto 0; max-width: 32em; text-align: left; line-height: 1.95; color: var(--fg); }
.reading .body[hidden] { display: none; }

.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.actions .btn-gold, .actions .btn-line { min-width: 9em; justify-content: center; font-size: 1rem; }
.btn-gold:disabled { opacity: 0.45; cursor: default; box-shadow: none; transform: none; }
.btn-line {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.85em 1.6em;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(4, 7, 15, 0.35); color: var(--fg); font: inherit; font-weight: 600;
  letter-spacing: 0.06em; text-decoration: none; cursor: pointer; transition: border-color 0.2s;
}
.btn-line:hover { border-color: var(--card-border); }
button.btn-gold { font: inherit; font-weight: 700; cursor: pointer; }

.share { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.share .btn-line { font-size: 0.9rem; padding: 0.65em 1.3em; }
.share-status { flex-basis: 100%; min-height: 1.4em; margin: 0; font-size: 0.85rem; color: var(--gold-light); }

.again { display: none; }
.is-shared .again { display: flex; }
.is-shared .draw-actions, .is-shared .switch, .is-shared .share { display: none; }

.to-quiz { margin-top: 36px; } 
.to-quiz p { margin: 0 0 14px; color: var(--fg); }
.howto { margin: 36px auto 0; max-width: 32em; text-align: left; font-size: 0.88rem; color: var(--fg-muted); }
.howto h2 { margin: 0 0 8px; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; color: var(--gold); }
.howto p { margin: 0 0 0.6em; line-height: 1.9; }

@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; }
  .deck.is-shuffling img { animation: none !important; }
}