/* テストプレイ版だけの上書き ── 対局画面とモーダルを tp のデザインに揃える。
 *
 * テストプレイ版は「新しい画面（public/js/tp/**）」と「Render版から引き継いだ画面
 * （style.css の .modal / .btn-rune など）」が同居している。前者はフラットで角丸・金の主ボタン、
 * 後者は角の立った枠・紫の装飾（◆）・飾り書体で、行き来するたびに別のアプリに見えていた。
 *
 * ここは body.tp のときだけ、引き継いだ部品を tp のトークン（tp-tokens.css）へ寄せる層。
 * style.css そのものは触らないので Render版の見た目は変わらない。
 *
 * 対応の考え方:
 *   .btn-rune  → tp の主ボタン（金・角丸・◆なし）
 *   .btn-ghost → tp のゴースト
 *   赤系の危険操作 → tp の danger（枠と文字だけ赤）
 *   .modal-body / .modal-title → tp の面・見出し
 *
 * この層は暫定で、恒久策は画面そのものを tp のルーターへ移すこと。移った画面のぶんは
 * ここから指定が消える。移し終えたもの: 対局中メニュー・対局をやめる確認・カード眷属一覧
 * （それぞれ public/js/tp/gamemenu.js・tp/library.js）。
 * 残っているのは、まだ引き継いだ器で出している画面が使うぶん:
 *   結果・再戦・自分のデッキ構成・カードの効果・チャレンジ一式・選択ダイアログ・墓場選び。
 */

/* ── ボタン ───────────────────────────────── */
body.tp .btn-rune,
body.tp .btn-ghost {
  width: 100%;
  max-width: none;
  min-height: var(--tp-tap);
  flex-direction: row; gap: var(--tp-2);
  padding: var(--tp-2) var(--tp-5);
  border: 1px solid var(--tp-accent);
  border-radius: var(--tp-r);
  background: var(--tp-accent);
  color: var(--tp-accent-ink);
  box-shadow: none;
  transition: background .14s ease, transform .08s ease, border-color .14s ease;
}
/* ◆ の飾りは tp のボタンには無いので消す（残すと主ボタンだけ装飾が付く） */
body.tp .btn-rune::before,
body.tp .btn-rune::after { content: none; }
body.tp .btn-rune:hover,
body.tp .btn-rune:active {
  background: #e5c476;
  border-color: #e5c476;
  box-shadow: none;
  transform: none;
}
body.tp .btn-rune:active,
body.tp .btn-ghost:active { transform: translateY(1px); }

body.tp .btn-ghost {
  background: transparent;
  border-color: var(--tp-line-lit);
  color: var(--tp-text);
  opacity: 1;
}
body.tp .btn-ghost:hover {
  background: var(--tp-surface-2);
  border-color: var(--tp-line-lit);
  opacity: 1;
}

/* ボタンの中の字。飾り書体・広い字間をやめ、tp の本文と同じ字にする */
body.tp .btn-main {
  font-family: inherit;
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
}
body.tp .btn-sub {
  font-size: 11.5px; letter-spacing: 0;
  color: color-mix(in srgb, var(--tp-accent-ink) 62%, transparent);
}
body.tp .btn-ghost .btn-sub { color: var(--tp-text-dim); }

/* 危険操作（ホームへ・削除）は tp の danger に合わせる。
   引き継いだ側は id / クラスが揃っていないので、実際に赤で塗っていたものだけを名指しする。 */
body.tp #btn-quit,
body.tp #btn-deck-delete,
body.tp .btn-danger {
  background: transparent;
  border-color: var(--tp-danger);
  color: var(--tp-danger);
}
body.tp #btn-quit:hover,
body.tp #btn-deck-delete:hover,
body.tp .btn-danger:hover {
  background: color-mix(in srgb, var(--tp-danger) 12%, transparent);
  border-color: var(--tp-danger);
  color: var(--tp-danger);
}
body.tp #btn-quit .btn-main,
body.tp #btn-deck-delete .btn-main,
body.tp .btn-danger .btn-main { color: var(--tp-danger); }

/* ── モーダル ─────────────────────────────── */
body.tp .modal-veil { background: rgba(8, 5, 18, .88); }
body.tp .modal-body {
  width: min(92vw, 380px);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r-lg);
  background: var(--tp-surface);
  box-shadow: var(--tp-shadow-lg);
  padding: var(--tp-5);
  gap: var(--tp-3);
}
body.tp .modal-title {
  font-family: inherit;
  font-size: 17px; font-weight: 700; letter-spacing: .04em;
  color: var(--tp-text);
}
body.tp .modal-desc {
  font-size: 12.5px; line-height: 1.75;
  color: var(--tp-text-dim);
}

/* モーダルの中のボタン並び。引き継いだ側は中央寄せの縦積みで幅が固定だったので、
   tp と同じ「幅いっぱい・等間隔」にする。 */
body.tp .modal-actions,
body.tp .choice-buttons,
body.tp .online-actions {
  display: flex; flex-direction: column; gap: var(--tp-2);
  align-items: stretch;
  margin-top: var(--tp-2);
}

/* ただし確認の2択（使用する／やめる など）は横に並べる。3つ以上は縦のまま
   ── 横に3つ並べると1つあたりが細くなり、日本語のラベルが読めなくなる。
   上の一律の縦積みを、ボタンがちょうど2つの時だけ打ち消す。
   幅はラベルの長さから決める（flex-basis: auto）。2つ分が1行に入らなければ
   flex-wrap が縦1列へ戻し、そこでは全幅になるので文字は1行に収まる。 */
body.tp .modal-actions:has(> button:nth-child(2)):not(:has(> button:nth-child(3))),
body.tp .choice-buttons:has(> button:nth-child(2)):not(:has(> button:nth-child(3))),
body.tp .online-actions:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) {
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
/* width: auto は必須。tp のボタンは既定が width:100% なので、これを外さないと
   flex-basis が 100% を測り、2つ分が必ず溢れて常に縦積みへ落ちてしまう。 */
body.tp .modal-actions:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button,
body.tp .choice-buttons:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button,
body.tp .online-actions:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button {
  flex: 1 1 auto; width: auto; min-width: 0;
  justify-content: center;
}

/* 盤面を見る／選択に戻る。tp の面・角丸・字に合わせる */
body.tp .peek-btn {
  align-self: center; width: auto; min-height: 0; padding: var(--tp-1) var(--tp-4);
}
body.tp .peek-btn .btn-main { font-size: 12.5px; letter-spacing: .02em; }
body.tp .peek-back {
  border: 1px solid var(--tp-line-lit);
  border-radius: var(--tp-r);
  background: var(--tp-surface-2);
  color: var(--tp-text);
  box-shadow: var(--tp-shadow-lg);
}

/* 入力欄も tp の形に寄せる（引き継いだモーダルの中にある合言葉・名前の欄） */
body.tp .modal input[type='text'],
body.tp .modal input[type='password'],
body.tp .modal input[type='number'] {
  min-height: var(--tp-tap);
  padding: 0 var(--tp-4);
  border: 1px solid var(--tp-line-lit);
  border-radius: var(--tp-r);
  background: var(--tp-surface-2);
  color: var(--tp-text);
  font-size: 16px; /* 16px 未満だと iOS が勝手に拡大する */
}

/* 「ホームへ」（対局を抜ける）。tp の danger と同じ「枠と字だけ赤」に揃える。
   引き継いだ側は塗り＋角4pxで、隣の tp 風ボタンと形が違って見えていた。 */
body.tp .btn-exit {
  flex-direction: row; gap: var(--tp-2);
  min-height: var(--tp-tap);
  padding: var(--tp-2) var(--tp-5);
  border-radius: var(--tp-r);
  border: 1px solid var(--tp-danger);
  background: transparent;
  color: var(--tp-danger);
  letter-spacing: normal;
}
body.tp .btn-exit:hover {
  background: color-mix(in srgb, var(--tp-danger) 12%, transparent);
  color: var(--tp-danger);
}
body.tp .btn-exit .btn-main { font-size: 15px; color: var(--tp-danger); }

/* 確認モーダルの見出し・説明も本文の字に揃える（チャレンジの記録を消す確認） */
body.tp .confirm-text {
  font-family: inherit;
  font-size: 16px; font-weight: 700; letter-spacing: .04em;
  color: var(--tp-text);
}
body.tp .confirm-sub {
  font-size: 12.5px; letter-spacing: normal; line-height: 1.75;
  color: var(--tp-text-dim);
}

/* ここから下はあえて飾り書体を残す（一貫性より演出を採る場所）:
     .result-kanji（勝利／敗北の大字）・.chal-clear-stage（制覇の見出し）
     .z-name（カード拡大の札名 ＝ 実物のカードの字面に寄せる）
   全部を本文の字に均すと、勝った瞬間の手応えとカードらしさが消えるので触らない。 */

/* ── 対局画面の小さな操作（HUD）─────────────────────────
   捨札・メニュー(☰)・墓場選びの戻る。tp は角丸で揃えているのに、ここだけ角 3〜6px で
   角が立っていた。並びと大きさは対局画面の都合があるので変えず、角と枠だけ寄せる。 */
body.tp #btn-menu,
body.tp .pg-back,
body.tp #my-discard-btn,
body.tp #opp-discard-btn {
  border-radius: var(--tp-r-sm);
  border-color: var(--tp-line-lit);
}
body.tp #btn-menu { min-height: 38px; }