/* tarot_draw.css - 無料タロット(1枚/3枚)静的抽選ページ
   2026-08-15 Day 1。サーバ処理なし・JS だけで抽選する無料版の見た目。
   2026-08-15 めくり UI(UX 裁定「修正版 B」)= ラジオ選択 → 伏せ札 →
   タップでめくる → 最後の 1 枚で鑑定文。 */

.tarot-draw {
  width: min(1100px, calc(100% - 24px));
  margin: 0 auto;
}

.tarot-draw__eyebrow {
  letter-spacing: 0.24em;
  font-size: 0.78rem;
  color: #d4af37;
  margin: 0 0 4px;
}

.tarot-draw__lead {
  color: #cbd5e1;
  line-height: 1.9;
}

/* ---- 引き方(ラジオ) ------------------------------------------------- */

.tarot-draw__spreads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 8px;
  padding: 0;
  border: 0;
}

@media (max-width: 720px) {
  .tarot-draw__spreads {
    grid-template-columns: 1fr;
  }
}

/* legend は支援技術にだけ残す(見出しは h2 が担っている) */
.tarot-draw__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tarot-draw__spread {
  position: relative;
}

/* ラジオ本体は隠すが **フォーカス可能なまま**にする(display:none は不可)。
   キーボード操作と読み上げのため。 */
.tarot-draw__radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.tarot-draw__spread-label {
  display: block;
  width: 100%;
  height: 100%;
  text-align: left;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(26, 26, 62, 0.82);
  color: #f5f1e8;
  cursor: pointer;
  font: inherit;
}

.tarot-draw__radio:checked + .tarot-draw__spread-label {
  border-color: #d4af37;
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.28);
}

.tarot-draw__radio:focus-visible + .tarot-draw__spread-label {
  outline: 2px solid #ead58c;
  outline-offset: 3px;
}

.tarot-draw__spread-name {
  display: block;
  font-size: 1.15rem;
  color: #ead58c;
  margin-bottom: 6px;
}

.tarot-draw__spread-note {
  display: block;
  font-size: 0.9rem;
  color: #cbd5e1;
  line-height: 1.7;
}

.tarot-draw__hint {
  margin: 18px 0 0;
  text-align: center;
  color: #ead58c;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.tarot-draw__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 20px 0 8px;
}

.tarot-draw__button {
  padding: 12px 28px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.6);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.24), rgba(212, 175, 55, 0.08));
  color: #ead58c;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  font-size: 1rem;
}

.tarot-draw__button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.tarot-draw__error {
  margin: 20px 0;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(239, 68, 68, 0.6);
  background: rgba(69, 10, 10, 0.6);
  color: #fecaca;
  line-height: 1.8;
}

.tarot-draw__results {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}

.tarot-draw__back {
  text-align: center;
  padding: 12px 0;
}

.tarot-draw__back-image {
  width: min(220px, 60%);
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0 26px rgba(212, 175, 55, 0.22);
}

.tarot-draw__results--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 860px) {
  .tarot-draw__results--three {
    grid-template-columns: 1fr;
  }
}

.tarot-draw__card {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: rgba(26, 26, 62, 0.82);
}

.tarot-draw__position {
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: #d4af37;
  margin: 0 0 10px;
  text-align: center;
}

/* ---- めくり(3D フリップ) -------------------------------------------- */

.tarot-draw__flip {
  display: block;
  width: min(260px, 100%);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 1200px;
  -webkit-tap-highlight-color: transparent;
}

.tarot-draw__card[data-flipped="true"] .tarot-draw__flip {
  cursor: default;
}

.tarot-draw__flip-inner {
  display: block;
  position: relative;
  width: 100%;
  /* 260 : 455 のカード比。中身が絶対配置なので高さを比で確保する */
  aspect-ratio: 260 / 455;
  transform-style: preserve-3d;
  transition: transform 0.62s cubic-bezier(0.2, 0.7, 0.25, 1);
}

.tarot-draw__card[data-flipped="true"] .tarot-draw__flip-inner {
  transform: rotateY(180deg);
}

.tarot-draw__face {
  position: absolute;
  inset: 0;
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.tarot-draw__face--front {
  transform: rotateY(180deg);
}

.tarot-draw__face .tarot-draw__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* まだめくっていない札だけ、触れると少し持ち上がる */
.tarot-draw__card:not([data-flipped="true"]) .tarot-draw__flip:hover .tarot-draw__flip-inner,
.tarot-draw__card:not([data-flipped="true"]) .tarot-draw__flip:focus-visible .tarot-draw__flip-inner {
  transform: translateY(-6px);
}

.tarot-draw__flip:focus-visible {
  outline: 2px solid #ead58c;
  outline-offset: 6px;
  border-radius: 12px;
}

.tarot-draw__image {
  width: min(260px, 100%);
  height: auto;
  border-radius: 12px;
}

.tarot-draw__image--reversed {
  transform: rotate(180deg);
}

/* ---- めくった後 ------------------------------------------------------ */

.tarot-draw__reveal,
.tarot-draw__reading {
  animation: tarot-draw-appear 0.45s ease-out both;
}

.tarot-draw__reveal {
  text-align: center;
  margin-top: 14px;
}

@keyframes tarot-draw-appear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tarot-draw__name {
  margin: 0 0 2px;
  font-size: 1.25rem;
  color: #ead58c;
}

.tarot-draw__name-en {
  margin: 0 0 10px;
  font-size: 0.86rem;
  color: #94a3b8;
  letter-spacing: 0.08em;
}

.tarot-draw__orientation {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: #ead58c;
  margin-bottom: 12px;
}

.tarot-draw__reading {
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  padding-top: 14px;
}

.tarot-draw__meaning {
  color: #f5f1e8;
  line-height: 1.9;
  margin: 0 0 10px;
}

.tarot-draw__description {
  color: #cbd5e1;
  line-height: 1.85;
  font-size: 0.92rem;
  margin: 0;
}

.tarot-draw__note {
  margin-top: 28px;
  color: #94a3b8;
  font-size: 0.86rem;
  line-height: 1.8;
}

/* 動きを減らす設定では、回転も浮き上がりも出現アニメも止める。
   ★ 表示内容は変えない(止めるのは動きだけ)。 */
@media (prefers-reduced-motion: reduce) {
  .tarot-draw__flip-inner,
  .tarot-draw__reveal,
  .tarot-draw__reading {
    transition: none;
    animation: none;
  }
  .tarot-draw__card:not([data-flipped="true"]) .tarot-draw__flip:hover .tarot-draw__flip-inner,
  .tarot-draw__card:not([data-flipped="true"]) .tarot-draw__flip:focus-visible .tarot-draw__flip-inner {
    transform: none;
  }
}


/* ====================================================================
   シャッフル演出(2026-08-20 YUKARI 要望)
   ★ 既定画面の伏せ札が左に寄っていたのは、Tailwind CDN の preflight が
     img{display:block} にしていて text-align:center が効かないため。
     margin-inline:auto で中央へ寄せる(実測 2026-08-20)。
   ==================================================================== */

.tarot-draw__back-image {
  margin-inline: auto;
}

/* 山札(JS が組み立てる。HTML には無い) */
.tarot-draw__deck {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(300px, 52vw, 430px);
  margin: 28px auto 0;
}

.tarot-draw__deck-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(240px, 58%);
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0 26px rgba(212, 175, 55, 0.22);
  transform: translate(-50%, -50%)
             translate(var(--tdx, 0px), var(--tdy, 0px))
             rotate(var(--trot, 0deg));
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
  will-change: transform;
}

/* ① 山札として重なっている状態 */
.tarot-draw__deck[data-phase="idle"] .tarot-draw__deck-card {
  --tdx: calc(var(--ti) * 3px);
  --tdy: calc(var(--ti) * -3px);
  --trot: calc(var(--ti) * 0.8deg);
}

/* ② 切る(左右へ抜き差しする動き) */
.tarot-draw__deck[data-phase="shuffle"] .tarot-draw__deck-card {
  animation: tarot-draw-shuffle 0.62s ease-in-out 2 both;
  animation-delay: calc(var(--ti) * 0.07s);
}

@keyframes tarot-draw-shuffle {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  25%      { transform: translate(-50%, -50%) translate(-118px, 16px) rotate(-12deg); }
  75%      { transform: translate(-50%, -50%) translate(118px, -16px) rotate(12deg); }
}

/* ③ 展開(--tdx / --tdy は JS が枚数に応じて入れる) */
.tarot-draw__deck[data-phase="spread"] .tarot-draw__deck-card {
  --trot: 0deg;
}

/* 使わない札は展開時に消える */
.tarot-draw__deck[data-phase="spread"] .tarot-draw__deck-card[data-spare="true"] {
  opacity: 0;
}

/* 動きを減らす設定では演出を出さない(表示内容は変えない) */
@media (prefers-reduced-motion: reduce) {
  .tarot-draw__deck-card {
    transition: none;
    animation: none !important;
  }
}

/* ---- 待機中の山札(初期画面。2026-08-20 YUKARI 指摘)------------------
   ★ 押せることが分かるように、常時ゆっくり切り続ける。
   ★ 静止画像 1 枚では「押せる」と分からなかった、というのが指摘の中身。 */

.tarot-draw__deck--idle {
  cursor: pointer;
  border: 0;
  padding: 0;
  background: none;
  width: 100%;
  display: block;
}

.tarot-draw__deck--idle .tarot-draw__deck-card {
  animation: tarot-draw-idle 3.6s ease-in-out infinite;
  animation-delay: calc(var(--ti) * 0.18s);
}

@keyframes tarot-draw-idle {
  0%, 100% { transform: translate(-50%, -50%)
                        translate(var(--tdx, 0px), var(--tdy, 0px))
                        rotate(var(--trot, 0deg)); }
  38%      { transform: translate(-50%, -50%) translate(-58px, 8px) rotate(-7deg); }
  62%      { transform: translate(-50%, -50%) translate(58px, -8px) rotate(7deg); }
}

.tarot-draw__deck--idle:hover .tarot-draw__deck-card,
.tarot-draw__deck--idle:focus-visible .tarot-draw__deck-card {
  animation-duration: 1.6s;
}

.tarot-draw__deck--idle:focus-visible {
  outline: 2px solid #ead58c;
  outline-offset: 6px;
  border-radius: 12px;
}

.tarot-draw__deck-hint {
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.86rem;
  color: #d4af37;
  letter-spacing: 0.06em;
}

@media (prefers-reduced-motion: reduce) {
  .tarot-draw__deck--idle .tarot-draw__deck-card { animation: none; }
}