/* テストプレイ版の土台。
   方針（ADR-3c）: 暗色の世界観は既存トークン（--bg / --panel / --bone / --gold …）を
   そのまま受け継ぎ、ボタン・フォーム・メニューといった「触る部品」だけを
   面で塗ったフラットで高コントラストな現代UIにする。

   このファイルの中身はすべて body.tp の下だけで効く。Render版には影響しない。 */

body.tp {
  /* 面 */
  --tp-surface:     #16112a;
  --tp-surface-2:   #1e1838;
  --tp-surface-3:   #2a2247;
  --tp-surface-lit: #342a56;

  /* 文字 */
  --tp-text:      #f2ecdd;
  --tp-text-dim:  #a9a08d;
  --tp-text-mute: #766e60;

  /* 線 */
  --tp-line:      #302748;
  --tp-line-lit:  #4b3d75;

  /* アクセント（既存の金と紫を踏襲） */
  --tp-accent:      #d8b25a;
  --tp-accent-deep: #8a6b25;
  --tp-accent-ink:  #1a1204;
  --tp-focus:       #b18cff;

  /* 状態 */
  --tp-ok:      #9fe86c;
  --tp-warn:    #e8c46c;
  --tp-danger:  #e0475f;

  /* 余白（4の倍数） */
  --tp-1: 4px;  --tp-2: 8px;  --tp-3: 12px; --tp-4: 16px;
  --tp-5: 20px; --tp-6: 24px; --tp-8: 32px; --tp-10: 40px;

  /* 角丸 */
  --tp-r-sm: 8px;
  --tp-r:    12px;
  --tp-r-lg: 18px;
  --tp-r-pill: 999px;

  /* 影 */
  --tp-shadow:    0 6px 20px rgba(0, 0, 0, .45);
  --tp-shadow-lg: 0 14px 40px rgba(0, 0, 0, .55);

  /* 重なり順（数字の直書きをやめて事故を防ぐ） */
  --tp-z-screen: 40;
  --tp-z-header: 50;
  --tp-z-sheet:  60;
  --tp-z-modal:  70;
  --tp-z-toast:  80;
  /* 対局にかぶせて開く画面（nav.openOverlay）。ここだけは style.css 側の重なり順と
     隣り合うので、両方を見て決める必要がある。
     #pregame（墓場選び・96）より前、引き継いだモーダル（.modal・100）より後ろ。 */
  --tp-z-overlay: 98;

  /* セーフエリア */
  --tp-safe-t: env(safe-area-inset-top, 0px);
  --tp-safe-b: env(safe-area-inset-bottom, 0px);
  --tp-safe-l: env(safe-area-inset-left, 0px);
  --tp-safe-r: env(safe-area-inset-right, 0px);

  /* タップ領域の最小サイズ */
  --tp-tap: 44px;

  /* 一覧の行の高さ。読み込み中の場所取り（.tp-skel-row）が同じ高さを名指しできるよう
     トークンにしておく。数値を2か所に書くと、片方だけ変えたときに読み込み後で
     高さがずれて画面が跳ねる。 */
  --tp-row-h: 60px;
}

/* ── 非スクロール（CLAUDE.md「ページ本体はスクロールさせない」）──────────
   既存の #app は overflow-y:auto でページごと動いてしまうため、テストプレイ版では止める。
   スクロールしてよいのは .tp-scroll を付けた領域だけ。 */
body.tp #app {
  overflow: hidden;
  height: 100dvh;
}

body.tp .tp-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0; /* grid/flex の子でスクロールを効かせるのに必要 */
  /* スクロールバーぶんの幅を最初から空けておく。中身が伸び縮みしてバーが出入りするたびに
     本文の幅が変わり、行が折り返し直されて画面全体が横に飛んで見えるのを止める
     （常時バー表示のPC・Androidで顕著）。 */
  scrollbar-gutter: stable;
}

/* ── 画面の骨格 ───────────────────────────────
   本体（伸び縮みする）＋ 任意のフッター（固定）の2段。
   ヘッダーは画面の外（#tp-root 直下に fixed）で共通化しているのでここには含めない。 */
body.tp .tp-screen {
  position: fixed;
  inset: 0;
  z-index: var(--tp-z-screen);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  color: var(--tp-text);
  font-family: var(--f-body);
}

/* [hidden] は display 指定に負けるので、テストプレイ版の部品では必ず勝たせる。
   ヘッダーの戻る/ホームがホーム画面でも出てしまう事故がここで起きた。 */
body.tp [hidden] { display: none !important; }

body.tp .tp-body {
  min-height: 0;
  padding: var(--tp-4);
  padding-left: max(var(--tp-4), var(--tp-safe-l));
  padding-right: max(var(--tp-4), var(--tp-safe-r));
}

body.tp .tp-foot {
  padding: var(--tp-3) var(--tp-4);
  padding-bottom: max(var(--tp-3), var(--tp-safe-b));
}

/* ── 文字 ─────────────────────────────────── */
body.tp .tp-h1 { font-family: var(--f-display); font-size: 22px; font-weight: 700; letter-spacing: .04em; }
body.tp .tp-h2 { font-family: var(--f-display); font-size: 18px; font-weight: 700; letter-spacing: .03em; }
body.tp .tp-h3 { font-size: 15px; font-weight: 700; letter-spacing: .02em; }
body.tp .tp-p  { font-size: 14px; line-height: 1.75; color: var(--tp-text); }
body.tp .tp-sub{ font-size: 12.5px; line-height: 1.6; color: var(--tp-text-dim); }
body.tp .tp-note { font-size: 12px; line-height: 1.6; color: var(--tp-text-mute); }

/* 本文中の強調。「太字・マーカー」で読み流せるようにする（要件F2） */
body.tp .tp-p b, body.tp .tp-p strong { color: var(--tp-accent); font-weight: 700; }
body.tp .tp-mark {
  background: linear-gradient(transparent 58%, rgba(216, 178, 90, .28) 58%);
  font-weight: 700;
}

/* ── アイコン ───────────────────────────────── */
body.tp .tp-ico {
  width: 1.25em; height: 1.25em;
  flex: none;
  display: inline-block;
  vertical-align: -.22em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.tp .tp-ico.filled { fill: currentColor; stroke: none; }

/* ── ボタン（フラット・高コントラスト）──────────────── */
body.tp .tp-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--tp-2);
  min-height: var(--tp-tap);
  padding: 0 var(--tp-5);
  border: 1px solid var(--tp-line-lit);
  border-radius: var(--tp-r);
  background: var(--tp-surface-2);
  color: var(--tp-text);
  font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: .02em;
  cursor: pointer;
  transition: background .14s ease, transform .08s ease, border-color .14s ease;
}
body.tp .tp-btn:active { transform: translateY(1px); }
body.tp .tp-btn:disabled { opacity: .38; cursor: default; transform: none; }
body.tp .tp-btn:focus-visible { outline: 2px solid var(--tp-focus); outline-offset: 2px; }

body.tp .tp-btn.primary {
  background: var(--tp-accent);
  border-color: var(--tp-accent);
  color: var(--tp-accent-ink);
}
body.tp .tp-btn.primary:not(:disabled):hover { background: #e5c476; }

body.tp .tp-btn.ghost { background: transparent; }
body.tp .tp-btn.ghost:not(:disabled):hover { background: var(--tp-surface-2); }

body.tp .tp-btn.danger { border-color: var(--tp-danger); color: var(--tp-danger); background: transparent; }

body.tp .tp-btn.block { width: 100%; }

/* 2つ以上から1つを選ぶ切り替え（カード / 眷属 など）。
   ネイティブのタブ部品は持たず、tp のボタンを等分に並べて「選ばれている方を主ボタンにする」
   だけにする。選択の見せ方をこの画面だけの色で作らない。 */
body.tp .tp-seg { display: flex; gap: var(--tp-2); }
body.tp .tp-seg .tp-btn { flex: 1; padding: 0 var(--tp-3); }

/* アイコンだけの丸ボタン */
body.tp .tp-icon-btn {
  -webkit-appearance: none; appearance: none;
  width: var(--tp-tap); height: var(--tp-tap);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--tp-r-pill);
  background: transparent; color: var(--tp-text);
  cursor: pointer;
  transition: background .14s ease;
}
body.tp .tp-icon-btn:hover { background: rgba(255, 255, 255, .07); }
body.tp .tp-icon-btn:active { background: rgba(255, 255, 255, .12); }
body.tp .tp-icon-btn:focus-visible { outline: 2px solid var(--tp-focus); outline-offset: -2px; }
body.tp .tp-icon-btn .tp-ico { width: 22px; height: 22px; }

/* ── 一覧の行（メニュー項目・デッキ一覧など）──────────── */
body.tp .tp-list { display: flex; flex-direction: column; gap: var(--tp-2); }

body.tp .tp-row {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tp-3);
  min-height: var(--tp-row-h);
  padding: var(--tp-3) var(--tp-4);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r);
  background: var(--tp-surface);
  color: var(--tp-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
body.tp .tp-row:hover { background: var(--tp-surface-2); border-color: var(--tp-line-lit); }
body.tp .tp-row:active { background: var(--tp-surface-3); }
body.tp .tp-row:focus-visible { outline: 2px solid var(--tp-focus); outline-offset: 2px; }
body.tp .tp-row[aria-disabled="true"] { opacity: .45; cursor: default; }

body.tp .tp-row-ico {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--tp-r-sm);
  background: var(--tp-surface-3);
  color: var(--tp-accent);
}
body.tp .tp-row-ico .tp-ico { width: 20px; height: 20px; }
body.tp .tp-row-main { min-width: 0; }
/* span で組む行があるので display を明示する。無いと題が短いとき副題が同じ行に並ぶ。 */
body.tp .tp-row-title { display: block; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
body.tp .tp-row-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px; line-height: 1.45; color: var(--tp-text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.tp .tp-row-end { color: var(--tp-text-mute); display: flex; align-items: center; gap: var(--tp-2); }
body.tp .tp-row-end .tp-ico { width: 18px; height: 18px; }
body.tp .tp-row.done .tp-row-end { color: var(--tp-ok); }

/* ── カード状のまとまり ────────────────────────── */
body.tp .tp-card {
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r);
  background: var(--tp-surface);
  padding: var(--tp-4);
}

/* ── 汎用 ─────────────────────────────────── */
body.tp .tp-stack   { display: flex; flex-direction: column; gap: var(--tp-3); }
body.tp .tp-stack-2 { display: flex; flex-direction: column; gap: var(--tp-2); }
body.tp .tp-hstack  { display: flex; align-items: center; gap: var(--tp-2); }
body.tp .tp-spacer  { flex: 1 1 auto; }
body.tp .tp-hidden  { display: none !important; }
body.tp .tp-center  { text-align: center; }

body.tp .tp-sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 「動きを減らす」設定のときは、テストプレイ版が足した画面の動きを止める。
   animation-iteration-count を 1 に戻すのが必須。これが無いと infinite 指定のアニメーション
   （背景の魂・チュートリアルの脈動など）が 0.01ms 周期で回り続け、止まるどころか毎フレーム
   別位置へ飛んで高速に明滅する（「粒子が速すぎる」「画面がガタつく」の正体）。

   対象は「テストプレイ版が作った画面」だけに絞る。
   ＝ #tp-root（ホーム・ルール・デッキ・チュートリアル…）と、
     body 直下に出す2つの部品（.tp-dropdown＝プルダウン、.tp-wait＝オンライン待機）。

   対局中の演出（#card-flash・#order-flash・#turn-banner・#sleep-fx・#sleep-draw・
   .reaper-sweep・盤の駒…）は body 直下にあり、Render 版と共有の style.css の持ち場。
   そちらは「止めてよい動きだけ」を名指しで止めている（.bat-fx・王手の脈動など）。
   ここで body.tp * と一括に巻き込むと、一回きりの演出まで 0.01ms で終わる。しかも
   これらは animation-fill-mode: both/forwards を持ち、最終キーフレームが opacity: 0
   （出て→消えるまでが1本のアニメーション）なので、消えた姿で固まる＝演出が出ない。
   実際に「相手のカード使用が出ない」（cf-pop）「先攻後攻のシャッフルが動かない」
   （of-swap-a/b＋.of-card の transition）がこれで起きていた。 */
@media (prefers-reduced-motion: reduce) {
  body.tp #tp-root, body.tp #tp-root *,
  body.tp .tp-dropdown, body.tp .tp-dropdown *,
  body.tp .tp-wait, body.tp .tp-wait * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* 背景の魂は純粋な飾り。動きを減らす設定では出さない。 */
  body.tp .souls { display: none; }
}