/* 単語帳対戦ロビー（計画書 159 §12）。
   レイアウトは battle.css を継承し、ここには単語帳固有の差分だけを置く。
   色は必ず design tokens を使う（docs/reference/design_tokens.md）。 */

/* 部屋カードのデッキ語数。曲の代わりに「どれだけの語で戦うか」を出す */
.room-deck-entries {
  margin-left: 0.375rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* 出題の表示モード（通常 / 解説なし / クイズ）バッジ。
   「これから何が起きるか」を告げる予告的な情報なので upcoming 色を使う
   （ranked=warning / IP 制限=success と重ならない色を選んでいる） */
.room-mode-vocab-display,
/* 単語辞書の部屋（計画書 180-2）。出題対象がデッキではなく辞書であること =
   「毎回サーバが抽選した単語が出る」という**出題の性格**の告知なので、
   表示モードと同じ層・同じ色に置く。**新規の配色は作らない**（180 §4.9）*/
.room-mode-vocab-dictionary {
  background: rgba(var(--lh-upcoming-rgb), 0.12);
  color: var(--lh-upcoming);
}

/* 単語先取モード（計画書 162）の部屋バッジ。表示モードのバッジ（予告的な情報）とは違い、
   「進行そのものが別物」を告げるので accent で塗って一段強く見せる。
   alpha は 0.15 ではなく **0.12** —— 薄い accent 背景を重ねるぶん実効コントラストが落ち、
   0.15 だと dark-synthwave 4.38 / light-sakana 4.44 で AA を割る。0.12 なら全 10 テーマで
   4.54 以上（実測: scripts/contrast_calculator.py）。表示モードのバッジと同じ alpha でもある */
.room-mode-vocab-race {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}

/* プレイ画面（.battle-play-page = ダーク固定）の同じバッジ。
   **ここでは accent を使えない** —— accent はテーマの基調色で、light テーマの値
   （#8b1a1a・#1f2937 など）をダーク背景に置くと 1.11〜2.65 で沈む（161 §7 と同じ型）。
   局所上書きでダーク値に固定してあるセマンティック色のうち、
   「注目」の用途を持つ warning を使う（実測 7.03。エンジョイの info=青、
   表示モード・出題順の中立グレーとも色が被らない） */
.vocabulary-battle-race-badge {
  background: rgba(var(--color-warning-rgb), 0.15);
  color: var(--color-warning);
}

/* combo / perfect（計画書 167）の部屋バッジ。「ミスでスコアが 0 に戻る」を告げるので
   warning を使う —— **danger は使えない**（実測: dark-hacker 4.35 / dark-viper 4.45 で
   alpha 0.12 でも AA 割れ）。warning は 10 テーマの最小が 5.67 で、先取の accent とも
   表示モードの upcoming とも色相が分かれる（実測: scripts/contrast_calculator.py） */
.room-mode-vocab-score-reset {
  background: rgba(var(--color-warning-rgb), 0.12);
  color: var(--color-warning);
}

/* プレイ画面（ダーク固定）の同じバッジ。先取バッジが warning を取っているので、
   ここは局所上書きされた danger を使う（body #161618 上 5.25 / card #1f1f24 上 4.73）。
   「ミスで全部飛ぶ」モードの警告色としても意味が合う */
.vocabulary-battle-score-reset-badge {
  background: rgba(var(--color-danger-rgb), 0.15);
  color: var(--color-danger);
}

/* 制限時間のレベルと思い出す時間（計画書 176 §2.6）の部屋バッジ。
   **ここは中立色にする** —— ranked / 先取 / combo・perfect が「勝敗の仕組みが変わる」
   告知なのに対し、制限時間は出題設定（表示モード・出題順と同じ層）で、
   同じ強さで塗ると部屋カードの meta 行が警告色だらけになって優先順位が読めなくなる。
   コントラストは card-bg に bg-secondary を重ねた実効背景で全 10 テーマ 6.15 以上
   （実測: scripts/contrast_calculator.py。最小は dark-hacker） */
.room-mode-vocab-time-limit,
.room-mode-vocab-quiz-think,
/* 辞書対戦の出題時間（180-2）も同じ出題設定の層。デッキの出題ボリュームに当たる */
.room-mode-vocab-dict-duration {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

/* デッキ未選択の部屋は「募集中」を薄く見せ、選択済みと視覚的に区別する */
.room-card .room-song-name .bi-journal-plus {
  color: var(--text-muted);
}

/* ===== 待機画面（計画書 159 §10.3）===== */

/* 選択済みデッキの補足（ピン留めの説明）と出題設定の注記。
   本文より一段落とし、読み飛ばしても支障のない情報であることを示す */
.room-deck-pinned-note,
.room-settings-note,
.room-search-hint {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.room-settings-note span {
  display: block;
}

/* デッキ検索結果。曲と違いサムネイルが無いのでテキスト主体のレイアウトにする */
.room-search-result-row--ineligible {
  opacity: 0.72;
}

/* 対戦に使えないデッキは、押せないボタンではなく理由テキストを出す
   （「なぜ選べないか」が分からないとユーザーは直しようがない。159 §7） */
.room-search-result-ineligible {
  flex-shrink: 0;
  align-self: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}

/* 単語帳はタイトルだけでは中身が分からないため、選択中デッキ・提案・検索結果の
   タイトルからデッキページを開けるようにしている。リンクだが本文の一部なので
   色は周囲のテキストのままにし、ホバーでリンクだと分かるようにする */
a.room-song-title,
.room-proposal-song a,
.room-search-result-title a,
a.room-system-recommend-title {
  color: inherit;
  text-decoration: none;
}

a.room-song-title:hover,
.room-proposal-song a:hover,
.room-search-result-title a:hover,
a.room-system-recommend-title:hover {
  text-decoration: underline;
}

/* 推薦（計画書 160 §4）は歌詞のパネルを流用するが、デッキにサムネイルが無いので
   情報欄だけを並べる。歌詞側の .room-system-recommend-thumb はここでは使わない */
a.room-system-recommend-title {
  display: block;
}

/* 自分のデッキであることのバッジ（検索結果で自分の単語帳を見つけやすくする） */
.room-search-result-badge {
  margin-left: 0.375rem;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  background: rgba(var(--lh-upcoming-rgb), 0.12);
  color: var(--lh-upcoming);
  font-size: 0.68rem;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   プレイ画面（計画書 159 §8 / Phase 4b）

   タイピング部分はソロの vocabulary_play.css をそのまま共有する。ここには
   「対戦ページの中に置いたときだけ必要な調整」と観戦者向けの案内だけを書く。
   配色は .battle-play-page がダーク固定のテーマ変数を局所上書きしているので、
   トークンを参照しているソロ側のスタイルがそのまま乗る。
   -------------------------------------------------------------------------- */

/* .battle-play-main が gap を持っているため、カード側の外側 margin は落とす */
.battle-play-page--vocab .vocabulary-play {
  margin: 0 auto;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
}

/* 観戦者・次ラウンド待機者への案内。単語帳対戦に練習モードは作らないので、
   「入力できないのは不具合ではない」ことを明示する */
.vocabulary-battle-play-watch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  color: var(--text-secondary);
  text-align: center;
}

.vocabulary-battle-play-watch i {
  font-size: 1.6rem;
  color: var(--text-muted);
}

.vocabulary-battle-play-watch p {
  margin: 0;
  font-size: 0.9rem;
}

/* 単語先取モードの状況表示（162 §7.4）。「判定中 → 先取 / 取られた」と入れ替わるので、
   **空のときも同じ高さを占める**ようにして行がずれないようにする（CLS ルール。
   文言の出し入れで問題文の位置が動くと、次の単語を読み始める位置が毎回変わって打ちにくい）。
   高さは 1 行に固定する —— 先取者の名前や、訳語の長いドイツ語などで折り返すと
   そこで初めて高さが変わってしまうため、はみ出す分は省略記号にする。
   色は .battle-play-page がダーク値に固定しているセマンティック変数を使う（161 §7.5） */
.vocabulary-battle-race-status {
  height: 1.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 決着の瞬間に文字が飛び込むと目線が奪われるので、色だけを穏やかに変える */
  transition: color 0.15s ease;
}

/* 再接続で進行中の 1 語を飛ばしたあと、次の単語が始まるまでの待ち（162 D10）。
   ここで問題文を先に見せると早取りで有利になるので、あえて何も出さない時間になる */
.vocabulary-battle-race-status.is-waiting {
  color: var(--text-muted);
  font-weight: 500;
}

/* 自分が打ち切った直後。決着はサーバが受信順で決めるので、まだ先取とは限らない */
.vocabulary-battle-race-status.is-judging {
  color: var(--color-info);
}

.vocabulary-battle-race-status.is-won {
  color: var(--color-success);
}

/* 取られた・時間切れは「自分は取れなかった」という同じ結末なので、
   お手つき（自分の操作が原因）より弱く見せる */
.vocabulary-battle-race-status.is-taken,
.vocabulary-battle-race-status.is-timeout {
  color: var(--text-muted);
  font-weight: 500;
}

.vocabulary-battle-race-status.is-failed {
  color: var(--color-danger);
}

/* 結果オーバーレイ: 単語帳は 6 列目に「クリア / お手つき / 時間切れ」の 3 値を出すため、
   歌詞と共用の 8 列 grid（battle.css）のうち 6 列目だけを広げる（計画書 161 §2.2）。
   .battle-result-table.is-vocabulary を親に付けているので詳細度で勝ち、
   CSS の読み込み順に依存しない */
.battle-result-table.is-vocabulary .battle-result-table-header,
.battle-result-table.is-vocabulary .battle-result-row {
  grid-template-columns: 48px 1fr 60px 72px 56px 144px 48px 56px;
}

/* 3 値のヘッダは言語によって 2 行になる（独語など）。行の高さが伸びるだけで崩れはしない */
.battle-result-table.is-vocabulary .battle-result-table-header {
  line-height: 1.2;
}

/* 数字の並びは折り返させない（"18 / 1 / 1" が 2 行になると行ごとに高さが変わる） */
.battle-result-entry-breakdown {
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* モバイルは 3・7・8 列目が非表示（battle.css の共通ルール）。
     残る 順位 / 名前 / スコア / 速度 / 内訳 のうち、内訳に幅を回す */
  .battle-result-table.is-vocabulary .battle-result-table-header,
  .battle-result-table.is-vocabulary .battle-result-row {
    grid-template-columns: 32px 1fr 56px 40px 72px;
  }
}

/* 結果オーバーレイ: 自分の行の下に出す内訳（出題語数 / 最大コンボ / ミス）。
   歌詞対戦がレート変動を出している位置で、単語帳にはレートが無い（159 §9）。
   お手つき・時間切れは 6 列目へ移した（161 §2.2） */
.battle-result-vocab-detail {
  text-align: center;
  padding: 0.25rem 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* 結果オーバーレイ: 学習記録の並走送信（159 §9.5）の注記。
   ランキング対象外・送信失敗のときだけ文字が入る（空のときは高さを持たない） */
.battle-result-vocab-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--warning-color);
}

.battle-result-vocab-note:not(:empty) {
  padding: 0.25rem 0.5rem 0.4rem;
}