/* ==== Romance Tarot add-on styles (black theme) ==== */

/* ヘッダー固定は /style.css に依存。ここでは中身の配置のみ調整 */
.romance-app{ margin-top: var(--header-h); color:#fff; }

/* ===== Top Banner Video ===== */
.about-hero{
  margin-top: var(--header-h);
  position: relative;
  height: 500px; background: #000; overflow:hidden;
}
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; display:block; }
.hero-video--pc{ display:block; } .hero-video--sp{ display:none; }
@media (max-width: 768px){
  .about-hero{ height: 200px; }
  .hero-video--pc{ display:none; } .hero-video--sp{ display:block; }
}

/* ===== ヒーロー（タイトル・説明・フォーム） ===== */
.hero-intro{
  background:#000;
  padding: clamp(24px,5vw,40px) 6vw;
  border-bottom:1px solid rgba(255,255,255,.06);
  max-width: 820px; margin: 0 auto;
}
.hero-intro h1{ margin:0 0 6px; font-weight:900; font-size: clamp(20px, 5vw, 34px); }
.hero-intro p{ color:var(--fg-soft); margin:6px 0 16px; line-height:1.8; }

.q-form{ max-width: 820px; margin: 0 auto; }
.q-form textarea{
  width:100%; background:#0d0d0d; color:#fff; border:1px solid rgba(255,255,255,.18);
  border-radius:14px; padding:12px 14px; outline:none;
}
.q-form textarea:focus{ border-color: rgba(255,255,255,.34); }
.q-form .row{ display:flex; gap:10px; align-items:center; margin:10px 0; justify-content:center; }

.btn-primary{
  padding:10px 18px; border-radius:999px; font-weight:800; background:#fff; color:#000; border:0; cursor:pointer;
  transition: opacity .2s ease, transform .12s ease;
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-primary:disabled{ opacity:.4; cursor:not-allowed; transform:none; filter: grayscale(.25); }

.btn-ghost{
  padding:10px 18px; border-radius:999px; font-weight:800;
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); cursor:pointer;
}

.hint{ color:var(--fg-soft); font-size:12px; text-align:center; }
.count{ color:rgba(255,255,255,.55); text-align:right; max-width:820px; margin: 0 auto; }

/* ===== スタート直下の進捗（ピンク点滅） ===== */
.progress-inline{ text-align:center; min-height:1.2em; margin-top:8px; }
.progress--blink{ color:#ff8ac1; font-weight:800; animation: blinkPink .9s linear infinite; }
@keyframes blinkPink{ 0%{opacity:1} 50%{opacity:.25} 100%{opacity:1} }

/* ===== カードボード（全体） ===== */
.board{ padding: 22px 6vw 28px; max-width: 820px; margin: 0 auto; }
.board h2{ font-size: clamp(18px,4vw,22px); margin: 14px 0 10px; font-weight:800; text-align:center; }

/* ===== カードBOX（濃いグレー + センタリング） ===== */
.card-box{
  background:#1b1b1b; border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding: 16px 14px 18px; max-width: 820px; margin: 18px auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* ===== グリッド：90×160px、中央寄せ ===== */
.row-cards{
  display:grid; grid-template-columns: repeat(5, 90px); gap: 18px 18px; justify-content: center;
}
.row-cards[data-deck="lenormand"]{ grid-template-columns: repeat(2, 90px); }
@media (max-width:720px){ .row-cards{ grid-template-columns: repeat(3, 90px); } }

/* ===== 非アクティブ（質問未入力時） ===== */
.row-cards.disabled{ opacity:.5; pointer-events:none; filter: grayscale(.25); }

/* ===== カード本体（位置ズレ防止＋“めくる”演出） ===== */
/* ★ポイント：
   - 各スロットを flex 縦積み＆中央寄せ => ラベルも下に配置
   - frame は position:relative で固定座標の基準
   - flip は center 基点で回転（左寄り出現を防止）
*/
.card-slot{
  width:90px; display:flex; flex-direction:column; align-items:center;
}
.card-frame{
  width:90px; height:160px; border-radius:12px; position:relative; background:#0b0b0b;
  margin:0 auto;
  perspective: 1100px;
  box-shadow: 0 10px 24px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
}
.flip{
  position:absolute; inset:0; border-radius:12px; transform-style: preserve-3d;
  transition: transform .78s cubic-bezier(.22,.61,.2,1), box-shadow .28s ease;
  transform-origin: center center; /* ← “左に寄る”のを防ぐため center 基点に */
  will-change: transform;
}
.card-frame.is-open .flip{ transform: rotateY(180deg); }

/* ハイライト（めくり時の光） */
.flip::before{
  content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none;
  background: linear-gradient(120deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 40%);
  opacity:0; transition: opacity .4s ease;
}
.card-frame.is-open .flip::before{ opacity:.35; }

.back, .face{
  position:absolute; left:0; top:0; width:100%; height:100%; display:block; border-radius:12px;
  object-fit: contain; /* 全体を見せる */
  background:#000;
  backface-visibility: hidden;
}
.back{ transform: rotateY(0deg); }
.face{ transform: rotateY(180deg); }

/* ラベル（下に配置） */
.card-slot .label{
  margin-top:6px; font-size:11px; line-height:1.4; text-align:center; color:#fff;
  background: rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.16);
  border-radius:10px; padding:5px 7px;
  display:none;
}
.card-slot .label.show{ display:block; }

/* ===== 下部進捗・結果 ===== */
.progress{ color:var(--fg-soft); margin: 12px auto 0; font-size:13px; min-height:1.2em; text-align:center; }

.result{ padding: 8px 6vw 32px; max-width: 820px; margin: 0 auto; }
.answer{
  white-space: pre-wrap; line-height: 1.9; background:#0b0b0b;
  border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:14px;
}
.answer h3, .answer h4{ margin: 1em 0 .4em; font-weight:800; }
.answer p{ margin: .6em 0; color: rgba(255,255,255,.9); }
.answer ul, .answer ol{ margin: .6em 0 .6em 1.4em; }
.answer code{ background:#111; padding:.2em .35em; border-radius:6px; border:1px solid rgba(255,255,255,.12); }

/* 結果ボタン */
.answer-actions{ display:flex; gap:10px; margin-top:10px; }
.answer-actions .btn-ghost{ border-color: rgba(255,255,255,.45); }

/* ===== ヘッダー配置 ===== */
.site-header{ display:flex; align-items:center; gap:8px; position:fixed; inset:0 0 auto 0; z-index:50; }
.brand{ order:1; } .lang-switch{ order:2; margin-left:auto; } .hamburger{ order:3; margin-left:8px; z-index:70; }
.menu-panel[hidden]{ display:none !important; }
@media (max-width: 560px){ .site-header{ padding-right: 10px; } }