/* kanJe — 漢字ボードUI。縦画面のスマホを主対象にする（実行計画_kanJe.md §3-2-1）。
   配色は sozai/title.png に合わせた黄色地・黒文字で統一する。
   ボード（キャンバス）も白地ではなく黄色地・黒線。 */

:root {
  --yellow: #fdce0b;
  --ink: #040300;

  --bg: var(--yellow);
  --text: var(--ink);
  --text-dim: #6b5300;    /* 黄色の上で読める沈んだ茶色 */
  --panel-bg: #f3c000;    /* パネル用に少し沈めた黄色 */
  --board-red: var(--ink); /* 旧・赤枠。黄色地に合わせて黒枠にした（変数名は互換のため据え置き） */
  --accent: var(--ink);
  /* プレイヤー名に使う書体。読み込めなければ既存のゴシックに落ちる */
  --font-name: "Dela Gothic One", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  /* お題の熟語。盤面の字（KanjiVG）は教科書体系の骨格なので、それに近いものを選ぶ */
  --font-word: "Klee One", "Hiragino Mincho ProN", "Yu Mincho", serif;
  /* 小さい文字（20px以下）用。★ここに --font-name を使わないこと。
     Dela Gothic One は線が極端に太い見出し書体で、18px まで落とすと
     漢字の内側の空きが潰れて読めなくなる（ユーザー報告・2026-08-21）。
     Zen Kaku Gothic New は字面が広く、太らせても懐が残るので小さくても読める。
     ★これを使う画面は Google Fonts の link にも足すこと（game.html / announce-test.html）。 */
  --font-ui: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;

  /* ジェンガ表現：未提示画＝塔に残っているブロックの太さ（指示書_出題者ジェンガ表現.md §3-1）。
     試遊しながら詰める値なのでここに集約する。js/config.game.js には置かない（JSが読まないため）。 */
  --block-width: 8;      /* 盤面のブロック */
  --block-width-lg: 9;   /* 拡大画面のブロック */
  --block-opacity: 0.9;  /* 抜く前（塔に残っている状態）の濃さ */
  --stroke-fall-duration: 1.2s; /* 抜く演出の落下時間（§2-3。js/kanji-board.js が
                                    animation-duration を実測して待つので、ここを変えるだけでよい） */
  /* 出題者だけに見える「抜いた画」。色はブロックと同じ --ink にして、透過度だけで
     薄くする（ユーザー要望・2026-08-21：抜く前と同じ色、不透明10%＝透過90%） */
  --stroke-extracted-opacity: 0.1;
  --stroke-selected-color: #ff3d8a; /* 拡大画面で選択中の画（ユーザー要望・2026-08-21） */
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* ★hidden 属性を必ず効かせる。
   ブラウザ既定の [hidden]{display:none} は作者スタイルの display 指定に負けるため、
   #screen-* のように display:flex を持つ要素は hidden を付けても消えない。
   これを書き忘れると「待機画面・対局画面・結果画面が全部重なって表示され、
   何も押せない」という症状になる（2026-08-20 に実際に発生。実行計画 地雷#19）。
   #screen-game はインラインstyleを持っていたので !important が要る。 */
[hidden] {
  display: none !important;
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  overscroll-behavior: none;
  touch-action: manipulation;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
}

/* --- ヘッダー --- */
#header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  /* ★右端を必ず空けておくこと（2026-08-22）。
     BGMのミュートボタン(#bgm-btn)は position:fixed で画面の右上に居るので、
     ここに要素を置くと重なる。実際にタイマーが重なった（375px幅で
     タイマー 335〜363px / ボタン 323〜365px）。
     justify-content:space-between をやめて左詰めにし、右は捨て代にしてある。 */
  padding-right: 62px;
  font-size: 12px;
  color: var(--text-dim);
  flex: none;
}

/* 制限時間。★左端に置くこと（上のコメント参照）。
   数字は --font-ui（Zen Kaku Gothic New）で揃える。--font-name は極太で潰れる（地雷#36）。
   tabular-nums で桁が動かないようにする（60→9 で幅が変わるとガタつく）。 */
#timer {
  flex: none;
  order: -1;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* --- キャラクター行 --- */
#chara-row {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 8px 8px 4px;
  flex: none;
}

.chara {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0.55;
  transition: opacity 0.2s;
}

.chara.is-active {
  opacity: 1;
}

.chara-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
}

.chara.is-active .chara-icon {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--seat-color, var(--ink));
}

.chara-score {
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* --- ボード（黄色地・黒枠） --- */
#board-wrap {
  flex: 0 0 auto;
  padding: 8px 12px;
  display: flex;
}

/* 幅いっぱい・高さは幅の半分。3〜4文字でも1マスがこの高さに収まる。 */
#board {
  flex: 1;
  aspect-ratio: 2 / 1;
  background: var(--yellow);
  border: 6px solid var(--board-red);
  border-radius: 10px;
  display: flex;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* ★マスの区切り線を引かないこと。
   線があると解答者に文字数が分かってしまう（何文字か迷わせるのが狙い）。
   解答者側はマス数も常に固定にしてある（js/game.js の ANSWERER_CELLS）。 */
.board-char-cell {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}

.board-char-cell svg {
  width: 100%;
  height: 100%;
  display: block;
}

.board-char-cell.is-tappable {
  cursor: pointer;
}

/* 解答者にはこれで見せる（実線・席の色）。出題者自身の盤面には使わない —
   出題者だけ .stroke-extracted に分ける（renderBoard の role 分岐）。
   解答者の見え方はこのクラスを変えると即座に変わるので触らないこと。 */
.stroke-solid {
  fill: none;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 出題者の盤面だけに見える「抜いた画」。誰が抜いたかは出題者の判断材料として
   重要ではないため、席の色を使わず --ink 1色にする（ユーザー要望・2026-08-21）。
   解答者側は引き続き .stroke-solid（実線・席の色）のまま変えていない。
   太さは抜く前のブロックと揃え、色も --ink で同じにした上で、透過度だけを
   --stroke-extracted-opacity（10%）まで下げて薄く見せる。 */
.stroke-extracted {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: var(--stroke-extracted-opacity);
  stroke-width: var(--block-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 未提示の画＝塔に残っているブロック（指示書_出題者ジェンガ表現.md §2-1）。
   role === 'answerer' はこのクラスを使わない（renderBoard の role 分岐。§1-4・§5-6）。 */
.stroke-block {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: var(--block-opacity);
  stroke-width: var(--block-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- フッター操作欄 --- */
#footer {
  flex: none;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
}

.btn {
  flex: 1;
  border: none;
  border-radius: 10px;
  padding: 14px 10px;
  font-size: 16px;
  font-weight: bold;
  background: transparent;
  color: var(--ink);
  border: 3px solid var(--ink);
}

.btn.primary {
  background: var(--ink);
  color: var(--yellow);
}

.btn:disabled {
  opacity: 0.35;
}

/* --- 階層ナビ：漢字拡大オーバーレイ --- */
#char-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
}

#char-overlay[hidden] {
  display: none;
}

#char-overlay-header {
  flex: none;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  gap: 10px;
}

#char-overlay-title {
  font-size: 14px;
  color: var(--text-dim);
  flex: 1;
}

/* 拡大表示中はヘッダーが隠れて残り時間が見えなくなるため、ここにも出す。
   これが無いと、時間切れ寸前だと気づかないまま確定して弾かれる（地雷#27）。 */
/* 拡大画面のタイマー。ヘッダーのものと同じ見た目に揃える（2026-08-22） */
#char-overlay-timer {
  flex: none;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

#char-overlay-timer.is-urgent {
  color: #c62233;
}

#char-overlay-stage {
  flex: 1;
  min-height: 0;
  padding: 12px;
  display: flex;
}

#char-overlay-svg-wrap {
  flex: 1;
  background: var(--yellow);
  border-radius: 10px;
  display: flex;
}

#char-overlay-svg-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}

.stroke-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 拡大画面のブロック。盤面の .stroke-block と同じ役割（§2-1）。 */
.stroke-block-lg {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: var(--block-opacity);
  stroke-width: var(--block-width-lg);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 拡大画面は openChar() が role==='questioner' でしか呼ばれないため、
   このクラスは常に出題者しか見ない。太さ・色・透過度とも .stroke-extracted と揃える
   （ユーザー要望・2026-08-21）。 */
.stroke-locked {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: var(--stroke-extracted-opacity);
  stroke-width: var(--block-width-lg);
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* 選択中の画（拡大画面で「この画を抜く」対象）。太さは変えず色だけピンクにする
   （ユーザー要望・2026-08-21）。 */
.stroke-selected {
  fill: none;
  stroke: var(--stroke-selected-color);
  stroke-width: 6.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* 抜く演出：確定した画を下に落として消す（指示書_出題者ジェンガ表現.md §2-3）。
   translateY の 40 は px 表記だが、transform-box の既定値 view-box に従って
   viewBox 単位（109分の1）として効く。字の高さの約37%で、落下としてちょうどよい。
   px のつもりで大きな値にしないこと。 */
@keyframes kanje-stroke-fall {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(40px); opacity: 0; }
}

.stroke-falling {
  animation: kanje-stroke-fall var(--stroke-fall-duration) ease-in forwards;
}

@media (prefers-reduced-motion: reduce) {
  .stroke-falling {
    animation: none;
  }
}

#char-overlay-footer {
  flex: none;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
}

/* --- ステータス演出（§6：解答者が回答を入力しています…） --- */
#status-banner {
  flex: none;
  padding: 6px 12px;
  font-size: 13px;
  text-align: center;
  background: rgba(0, 0, 0, 0.10);
  color: var(--ink);
  font-weight: bold;
}

#status-banner[hidden] {
  display: none;
}

/* --- システムログ欄（chatlog.js 流用。§4-1） --- */
#sys-log {
  flex: none;
  max-height: 64px;
  overflow-y: auto;
  padding: 4px 12px;
  font-size: 11px;
  color: var(--text-dim);
}