/* 入力部品とプルダウン。ネイティブ <select> は使わない（CLAUDE.md のUI規約）。 */

body.tp .tp-field { margin: var(--tp-4) 0 var(--tp-2); }

body.tp .tp-label {
  display: block;
  margin-bottom: var(--tp-2);
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--tp-text-dim);
}

body.tp .tp-input,
body.tp .tp-textarea {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  padding: 0 var(--tp-4);
  min-height: var(--tp-tap);
  border: 1px solid var(--tp-line-lit);
  border-radius: var(--tp-r);
  background: var(--tp-surface);
  color: var(--tp-text);
  font-family: inherit; font-size: 16px; /* 16px 未満だと iOS が勝手に拡大する */
  user-select: text; -webkit-user-select: text;
}
body.tp .tp-textarea {
  min-height: 96px;
  padding: var(--tp-3) var(--tp-4);
  line-height: 1.65;
  resize: none;
}
body.tp .tp-input::placeholder,
body.tp .tp-textarea::placeholder { color: var(--tp-text-mute); }
body.tp .tp-input:focus,
body.tp .tp-textarea:focus { outline: 2px solid var(--tp-focus); outline-offset: 1px; border-color: transparent; }

body.tp .tp-error {
  min-height: 18px;
  margin: var(--tp-2) 0;
  font-size: 12.5px; line-height: 1.5;
  color: var(--tp-danger);
}

/* ── 自前プルダウン ────────────────────────────
   <select> と同じ用途だが、見た目をアプリに揃えるため button + リストで作る。 */
body.tp .tp-select { position: relative; }

body.tp .tp-select-btn {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  min-height: var(--tp-tap);
  padding: var(--tp-2) var(--tp-3) var(--tp-2) var(--tp-4);
  display: flex; align-items: center; gap: var(--tp-2);
  border: 1px solid var(--tp-line-lit);
  border-radius: var(--tp-r);
  background: var(--tp-surface);
  color: var(--tp-text);
  font-family: inherit; font-size: 15px; font-weight: 700;
  text-align: left;
  cursor: pointer;
}
body.tp .tp-select-btn:focus-visible { outline: 2px solid var(--tp-focus); outline-offset: 2px; }
body.tp .tp-select-btn[aria-expanded="true"] { border-color: var(--tp-accent-deep); }
body.tp .tp-select-cur { flex: 1 1 auto; min-width: 0; }
body.tp .tp-select-main { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.tp .tp-select-sub {
  display: block; margin-top: 1px;
  font-size: 11.5px; font-weight: 500; line-height: 1.35; color: var(--tp-text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 副題を持つ選択肢があるプルダウンだけ、1行ぶんの高さを常に空けておく。
   選んだ選択肢に副題があるか否かでボタンの高さが変わると、下の欄ごと画面が動く。
   副題がまったく無いプルダウン（難易度など）では余白を作らないよう、
   ui-select.js が has-sub を付け外しする。 */
body.tp .tp-select.has-sub .tp-select-sub { min-height: 1.35em; }
body.tp .tp-select-btn .tp-ico { width: 18px; height: 18px; color: var(--tp-text-dim); transition: transform .13s ease; }
/* 開いている間は矢印を反転させる（今どちらの状態かが一目で分かる） */
body.tp .tp-select-btn[aria-expanded="true"] .tp-ico { transform: rotate(180deg); }

/* 選択肢は「押したボタンの真下」に開くドロップダウンで見せる。
   位置（top / left / width / max-height）は ui-select.js がボタンの実測から毎回入れる。
   欄の中に置くと .tp-scroll / .tp-body の overflow に切り取られるので body 直下に出す。 */
body.tp .tp-dropdown {
  position: fixed; inset: 0;
  z-index: var(--tp-z-sheet);
  /* 外側タップを拾うためだけの層。暗い覆いは敷かない（覆うと「別画面が開いた」ように見える） */
  background: transparent;
}
body.tp .tp-dropdown-menu {
  position: fixed;
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: var(--tp-1);
  border: 1px solid var(--tp-line-lit);
  border-radius: var(--tp-r);
  background: var(--tp-surface-2);
  box-shadow: var(--tp-shadow-lg);
  animation: tp-dd-in .13s ease-out;
}
/* フォーカスは一覧（role="listbox"）が持つ。選択位置は .tp-opt.is-active で示す */
body.tp .tp-dropdown-list:focus { outline: none; }
/* 下に入らず上向きに開いたときは、伸びてくる向きも上下ひっくり返す */
body.tp .tp-dropdown-menu.up { animation-name: tp-dd-in-up; }
@keyframes tp-dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes tp-dd-in-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

body.tp .tp-dropdown-list {
  flex: 1 1 auto;
  position: relative; /* 候補の offsetTop の基準（キーボード移動の自前スクロール用） */
}

body.tp .tp-opt {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  min-height: 48px;
  padding: var(--tp-2) var(--tp-3);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--tp-2);
  border: 0; border-radius: var(--tp-r-sm);
  background: transparent;
  color: var(--tp-text);
  font-family: inherit; text-align: left;
  cursor: pointer;
}
body.tp .tp-opt:hover { background: rgba(255, 255, 255, .05); }
body.tp .tp-opt[aria-selected="true"] { background: rgba(216, 178, 90, .12); }
/* キーボードで今どこにいるか。選択済みの色より手前に置く（両方付くことがある） */
body.tp .tp-opt.is-active { background: var(--tp-surface-lit); }
body.tp .tp-opt[aria-disabled="true"] { opacity: .4; cursor: default; }
body.tp .tp-opt-main { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.tp .tp-opt-sub { margin-top: 2px; font-size: 12px; color: var(--tp-text-dim); }
body.tp .tp-opt-check { color: var(--tp-accent); opacity: 0; }
body.tp .tp-opt[aria-selected="true"] .tp-opt-check { opacity: 1; }

/* ── 記事レイアウト（アプリについて等）─────────────── */
body.tp .tp-article { max-width: 620px; margin: 0 auto; }
body.tp .tp-article-sec + .tp-article-sec { margin-top: var(--tp-6); }
body.tp .tp-article-sec .tp-h2 {
  margin-bottom: var(--tp-2);
  padding-left: var(--tp-3);
  border-left: 3px solid var(--tp-accent);
  color: var(--tp-text);
}
body.tp .tp-article-sec .tp-p + .tp-p { margin-top: var(--tp-2); }

body.tp .tp-menu-lead { margin-bottom: var(--tp-3); }

/* ── 対戦準備 ─────────────────────────────── */
body.tp .tp-setup { margin-top: var(--tp-4); }
body.tp .tp-setup .tp-field { margin: 0 0 var(--tp-4); }

body.tp .tp-linkbtn {
  -webkit-appearance: none; appearance: none;
  margin-top: var(--tp-2);
  padding: 0;
  border: 0; background: none;
  color: var(--tp-accent);
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}

/* ── アカウント画面 ───────────────────────────── */
body.tp .tp-acc-badge {
  display: flex; align-items: center; gap: var(--tp-2);
  margin-bottom: var(--tp-4);
  padding: var(--tp-3) var(--tp-4);
  border: 1px solid var(--tp-accent-deep);
  border-radius: var(--tp-r);
  background: rgba(216, 178, 90, .08);
  font-size: 17px; font-weight: 700;
  color: var(--tp-accent);
}
body.tp .tp-acc-guestnote { margin-top: var(--tp-4); }
body.tp .tp-acc-signed > .tp-btn { margin-top: var(--tp-4); }

/* ── マイページ ───────────────────────────────
   ホームのタイルと同じ「面で塗った四角を積む」作りにそろえる。 */
body.tp .tp-my-sec + .tp-my-sec { margin-top: var(--tp-6); }
body.tp .tp-my-head {
  margin-bottom: var(--tp-2);
  padding-left: var(--tp-3);
  border-left: 3px solid var(--tp-accent);
  color: var(--tp-text);
}
/* 読み込み中の場所取り。行と同じ高さの、動かない・光らない箱。
   スケルトンを点滅させると「まだ何か起きている」と目が奪われて、かえって落ち着かない。 */
body.tp .tp-skel-row {
  min-height: var(--tp-row-h);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r);
  background: var(--tp-surface);
  opacity: .45;
}

/* 対戦成績の枠。集計カード1枚ぶんの高さを、記録の有無にかかわらず確保する。
   112px は .tp-my-tally（上下パディング + 数字の行 + 補足の行）の実測に合わせた値。 */
body.tp .tp-my-statbox {
  display: grid;
  align-content: center;
  min-height: 112px;
}

body.tp .tp-my-sublabel { margin: var(--tp-4) 0 var(--tp-2); }
body.tp .tp-my-decks-empty,
body.tp .tp-my-stats-empty { margin-top: var(--tp-2); }
body.tp .tp-my-fb-guest { margin-top: var(--tp-3); }

/* 通算の勝敗。数字を大きく、言葉は小さく下に置く（JP/EN どちらでも幅が破綻しない） */
body.tp .tp-my-tally { padding: var(--tp-4) var(--tp-3) var(--tp-3); }
body.tp .tp-my-tally-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.tp .tp-my-tally-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11.5px; letter-spacing: .04em; color: var(--tp-text-dim);
  text-align: center;
}
body.tp .tp-my-tally-cell + .tp-my-tally-cell { border-left: 1px solid var(--tp-line); }
body.tp .tp-my-tally-cell b {
  font-family: var(--f-num), var(--f-display);
  font-size: 26px; line-height: 1.1; font-weight: 700;
  color: var(--tp-text);
}
body.tp .tp-my-tally-sub { margin-top: var(--tp-3); text-align: center; }

/* デッキ別の内訳。押せない行なので .tp-row とは分ける（触れそうに見せない） */
body.tp .tp-my-statlist { display: flex; flex-direction: column; gap: var(--tp-1); }
body.tp .tp-my-statrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: var(--tp-3);
  padding: var(--tp-2) var(--tp-3);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r-sm);
  background: var(--tp-surface);
}
body.tp .tp-my-statname {
  font-size: 13.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.tp .tp-my-statrec {
  font-family: var(--f-num), var(--f-body);
  font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
  color: var(--tp-accent);
}

/* 送ったフィードバックの中身 */
body.tp .tp-my-qa { display: flex; flex-direction: column; gap: var(--tp-3); }
body.tp .tp-my-qa-item {
  padding: var(--tp-3) var(--tp-4);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r);
  background: var(--tp-surface);
}
body.tp .tp-my-qa-label { margin-bottom: var(--tp-1); }
body.tp .tp-my-qa-value { white-space: pre-wrap; }
body.tp .tp-fbitem-when { margin-bottom: var(--tp-4); }

/* ── 初回の登録画面 ─────────────────────────── */
body.tp .tp-welcome { max-width: 480px; margin: 0 auto; }
body.tp .tp-welcome-head { padding: var(--tp-5) 0 var(--tp-4); text-align: center; }
body.tp .tp-welcome-eyebrow {
  font-family: var(--f-num), var(--f-body);
  font-size: 11px; font-weight: 700; letter-spacing: .3em; text-indent: .3em;
  color: var(--tp-accent);
}
body.tp .tp-welcome-head .tp-h1 { margin: var(--tp-2) 0 var(--tp-2); }

body.tp .tp-welcome-list {
  list-style: none;
  margin: 0 0 var(--tp-5);
  padding: var(--tp-4);
  display: flex; flex-direction: column; gap: var(--tp-3);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r);
  background: var(--tp-surface);
}
body.tp .tp-welcome-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: var(--tp-3);
  font-size: 13px; line-height: 1.5;
}
body.tp .tp-welcome-list .tp-ico { width: 19px; height: 19px; color: var(--tp-accent); }

body.tp .tp-welcome-foot { border-top: 1px solid var(--tp-line); }

/* 「新しく登録」と「ログイン」の間の一言。ボタンの説明なので中央・小さく。 */
body.tp .tp-welcome-orNote { margin: var(--tp-3) 0 var(--tp-2); text-align: center; }

/* ── 選択肢の少ない画面（ひとりで遊ぶ・遊び方）─────────
   ホームと同じタイルを、画面の縦を使って大きく並べる。 */
body.tp .tp-menu-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* 見出しの有無にかかわらず、タイルの束が縦の中央に来るようにする
   （grid の行に頼ると、説明文が無い画面で上に張り付く） */
body.tp .tp-menu-tiles {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 2.8dvh, 22px);
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  min-height: 0;
}
body.tp .tp-menu-tiles .tp-tile { min-height: clamp(76px, 18.5dvh, 158px); }
body.tp .tp-menu-tiles .tp-tile-title { font-size: 17px; }
body.tp .tp-menu-tiles .tp-tile-sub { font-size: 12px; white-space: normal; }
body.tp .tp-menu-tiles .tp-tile-ico .tp-ico { width: 27px; height: 27px; }
/* 先頭（おすすめの入口）だけ、ホームと同じく金で塗って主役にする */
body.tp .tp-menu-tiles .tp-tile:first-child {
  border-color: var(--tp-accent-deep);
  background: linear-gradient(180deg, rgba(216, 178, 90, .16), rgba(216, 178, 90, .05));
}
body.tp .tp-menu-tiles .tp-tile:first-child .tp-tile-ico { color: var(--tp-accent); }

/* ── 対戦サーバーの起動待ち（合言葉オンライン対戦） ─────────────
   テストプレイ版はページを Cloudflare が返し、対戦サーバー（Render）へは WebSocket だけを
   張る。Render が画面を返す場面が無いので、起動を待つ間の見た目はここが全部決める。
   無料プランは使われていない間スリープするため、初回接続は1分ほどかかる。
   経過秒と見込みを必ず見せて「固まった」と思われないようにする。 */
body.tp .tp-wait {
  position: fixed; inset: 0;
  z-index: var(--tp-z-modal);
  display: grid; place-items: center;
  padding: var(--tp-6);
  background: rgba(8, 5, 18, .92);
  backdrop-filter: blur(2px);
}
body.tp .tp-wait-box {
  width: 100%; max-width: 340px;
  text-align: center;
}
body.tp .tp-wait-gate {
  color: var(--tp-accent);
  opacity: .9;
}
body.tp .tp-wait-gate svg { width: 56px; height: 56px; }
body.tp .tp-wait-title {
  margin: var(--tp-3) 0 0;
  font-size: 16px; font-weight: 700; letter-spacing: .04em;
  color: var(--tp-text);
}
body.tp .tp-wait-bar {
  margin: var(--tp-4) 0 var(--tp-3);
  height: 4px; border-radius: var(--tp-r-pill);
  background: var(--tp-surface-3);
  overflow: hidden;
}
body.tp .tp-wait-fill {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--tp-accent-deep), var(--tp-accent));
  transition: width .9s linear;
}
body.tp .tp-wait-note {
  margin: 0;
  font-size: 12.5px; line-height: 1.75;
  color: var(--tp-text-dim);
}
body.tp .tp-wait-elapsed {
  margin: var(--tp-2) 0 0;
  font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--tp-text-mute);
}
body.tp .tp-wait-cancel { margin-top: var(--tp-5); }

@media (prefers-reduced-motion: reduce) {
  body.tp .tp-wait-fill { transition: none; }
}