/* スマホ（767px 以下）の見出し・対局まわり。画布の「手机 v4」三枚どおり（2026-11-13 站長「按 v4 改」）。
   骨組みは どの段階も「頭部・盤・下の操作区」で同じ。盤の上下だけ段階で替える：
     開局前 … 主词の H1 ＋ 強さの石 5 つ ＋ 手番の二択・ふたりで ＋「AI と対戦する」（点数は出さない）
     対局中 … 点数板（手番に朱の下線）＋ 状態行 ＋ 待った・ヒント・メニュー
     終局   … 点数板（勝ったほうを薄朱）＋ 結果一行 ＋「もう一局」と次の一手
   スマホの対局レイアウトはこのファイルだけに書く。PC は触らない。 */
@media (max-width: 767px) {
  /* ── 見出し：盤の上は主词の H1 と小さな注記を 1 行に（2026-11-13 站長「这个地方放回主词」）── */
  .hero { position: static; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 6px 6px 12px; }
  .hero h1 { margin: 0; font-size: 28px; line-height: 1.1; }
  .hero-note { font: 700 12px var(--font); color: var(--muted); letter-spacing: 0; }
  .hero-art { display: none; }
  body[data-phase="playing"] .hero,
  body[data-phase="result"] .hero { display: none; }

  /* ── 骨組み：一列に流し、手番の二択と「ふたりで」だけ同じ行に並べる ── */
  .stage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .side-left, .side-right, .play-tools, .setup-tools, .setup-actions { display: contents; }
  .stage > *, .side-left > *, .side-right > *, .play-tools > *, .setup-tools > *, .setup-actions > * {
    flex: 0 0 100%; min-width: 0;
  }
  .board-col { order: 1; display: flex; flex-direction: column; align-items: center; }
  .only-pc { display: none; }
  .only-mobile { display: flex; }

  /* ── 開局前 ── */
  .setup-tools [data-lbl], .setup-tools .switches,
  .overlay.setup .flight, .overlay.setup .overlay-title, .overlay.setup .lead { display: none; }
  /* 強さの石は JS が作る。読み込み前から高さを取っておき、下の釦が跳ねないように */
  .levels { order: 2; gap: 2px; min-height: 59px; }
  .lvl { flex: 1; min-width: 0; gap: 4px; padding: 6px 0 5px; border-radius: 14px; }
  .lvl b { width: 28px; height: 28px; }
  .lvl[aria-pressed="true"] { background: var(--card); box-shadow: var(--shadow-chip); }
  .lvl[aria-pressed="true"] b { outline-offset: 2px; }
  .colors { order: 3; flex: 1 1 0; gap: 4px; padding: 3px; border-radius: 13px; background: var(--seg); }
  .colors .chip { height: 38px; border: 0; border-radius: 10px; }
  .row-2 { order: 3; flex: 0 0 auto; display: flex; }
  .row-2 .big.ghost {
    width: auto; height: 44px; padding: 0 6px; border: 0; background: transparent;
    font: 700 13px var(--font); text-decoration: underline; text-underline-offset: 4px;
  }
  .setup-actions .big.primary { order: 4; height: 54px; font-size: 18px; letter-spacing: .08em; }
  .record-setup { order: 5; margin-top: 18px; }

  /* ── 点数板（対局中・終局）：1 枚のカードに あなた VS AI ── */
  body[data-phase="playing"] .seats-card,
  body[data-phase="result"] .seats-card { order: 0; padding: 0; background: transparent; box-shadow: none; }
  body[data-phase="setup"] .seats-card,
  .seats-card .lbl { display: none; }
  .seats {
    position: relative; flex-direction: row; height: 60px; overflow: hidden;
    background: var(--card); border-radius: 18px; box-shadow: var(--shadow-chip);
  }
  .seats::after {
    content: 'VS'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    font: 700 11px var(--num); color: var(--faint);
  }
  body[data-phase] .seat { position: relative; flex: 1; min-width: 0; gap: 10px; padding: 0 14px; border-radius: 0; }
  body[data-phase] .seat:nth-child(2) { flex-direction: row-reverse; }
  body[data-phase] .seat:nth-child(2) .who { align-items: flex-end; text-align: right; }
  body[data-phase] .seat .stone { width: 26px; height: 26px; }
  body[data-phase] .name { font-size: 13px; white-space: nowrap; }
  .sub { font-size: 11px; white-space: nowrap; }
  body[data-phase] .seat .num { font-size: 26px; margin-left: auto; }
  body[data-phase] .seat:nth-child(2) .num { margin-left: 0; margin-right: auto; }
  body[data-phase] .seat.on { background: transparent; box-shadow: none; }
  .seat.on::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px;
    border-radius: 3px; background: var(--accent);
  }

  /* ── 対局中：状態行と下の道具 3 つ（最初から・投了はメニューの中） ── */
  .eval-card, .legend, .switch[data-switch="eval"] { display: none; }
  body[data-phase="playing"] .tap-hint {
    display: block; margin: 14px 0 0; text-align: center; font: 700 13px var(--font); color: var(--note);
  }
  body[data-phase="playing"] .wrap { min-height: 100vh; padding-bottom: 96px; }
  .actions {
    position: fixed; left: 10px; right: 10px; bottom: calc(14px + var(--safe-bottom, 0px)); z-index: 4;
    display: flex; gap: 8px;
  }
  .actions .act {
    flex: 1; height: 58px; flex-direction: column; gap: 3px; border: 0; border-radius: 16px;
    background: var(--card); color: var(--ink); box-shadow: var(--shadow-chip); font-size: 12px;
  }
  .actions .act[data-act="hint"] { background: var(--ink); color: var(--white); box-shadow: none; }
  .actions .act[data-act="restart"] { display: none; }
  .actions .act .ico { display: flex; }
  body[data-phase="playing"] .settings { display: none; }
  body[data-phase="playing"].menu-open .settings {
    display: flex; position: fixed; z-index: 5; left: 10px; right: 10px;
    bottom: calc(84px + var(--safe-bottom, 0px));
  }

  /* ── 終局：盤はそのまま、下に結果一行と次の一手 ── */
  body[data-phase="result"] .board-col { gap: 10px; }
  body[data-phase="result"] .overlay.result {
    position: static; transform: none; width: 100%; padding: 0; gap: 10px;
    background: transparent; box-shadow: none;
  }
  body[data-phase="result"] .result-copy { flex-direction: row; justify-content: center; gap: 12px; }
  body[data-phase="result"] .end-kicker { display: none; }
  body[data-phase="result"] .overlay.result .overlay-title { font-size: 17px; }
  body[data-phase="result"] .scoreline { gap: 6px; font-size: 17px; }
  body[data-phase="result"] .scoreline .stone { width: 14px; height: 14px; }
  body[data-phase="result"] .result-actions { align-items: stretch; gap: 8px; }
  body[data-phase="result"] .overlay.result .big { height: 54px; margin: 0; font-size: 18px; }
  body[data-phase="result"] .overlay.result .big.ghost {
    height: 44px; border: 0; background: var(--card); box-shadow: var(--shadow-chip); font-size: 13px;
  }
  body[data-phase="result"] .result-side { order: 2; margin-top: 18px; }
  body[data-phase="result"] .record-result { order: 3; }
  .share-card .big { height: 48px; }
  .row-2 .short, .share-card .long, .back .long { display: none; }
  .row-2 .long, .share-card .short, .back .short { display: inline; }
  .rv { gap: 10px; padding: 9px 0; font: 700 12px/1.6 var(--font); }
  .rv b { width: 40px; font-size: 12px; }
}