/* style.css — 麻雀トレーナーの見た目（牌は CSS で描画。スマホ幅でも読めるサイズ） */
:root {
  --bg: #1d2a24;
  --felt: #1f6a4a;
  --felt-dark: #17543a;
  --panel: #fbfaf6;
  --ink: #222;
  --muted: #666;
  --accent: #e0a100;
  --man: #c0392b;
  --pin: #1f5fbf;
  --sou: #1e8a4a;
  --tile-face: #fffdf6;
  --tile-edge: #d9cfb3;
  --rw: 26px;   /* 河の牌の幅 */
  --hw: 46px;   /* 手牌の牌の幅 */
  --safe: #2e9e5b;
  --nearsafe: #8bbf3a;
  --caution: #e6a700;
  --danger: #d6332a;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  min-height: 100vh;
}
button, select { font: inherit; }

/* ---------- ヘッダー ---------- */
.topbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 16px; background: #10201a; color: #f3f3f3;
}
.topbar h1 { font-size: 18px; margin: 0; letter-spacing: .05em; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ctl { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.controls select, .controls button, .controls a {
  background: #2c4a3d; color: #fff; border: 1px solid #4d7a65; border-radius: 6px; padding: 5px 9px; cursor: pointer;
}
.controls button:hover, .controls a:hover { background: #3a5f4f; }
.controls a { text-decoration: none; }

/* ---------- レイアウト ---------- */
.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 12px; padding: 12px 16px; align-items: start;
}
.board-col { min-width: 0; display: flex; flex-direction: column; gap: 10px; }

/* ---------- 卓 ---------- */
.table {
  background: radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-dark) 100%);
  border-radius: 14px; padding: 10px; color: #fff;
  display: grid; gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    ".     top    ."
    "left  center right"
    ".     bottom .";
  align-items: center; justify-items: center;
}
.seat { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.seat-top { grid-area: top; }
.seat-left { grid-area: left; }
.seat-right { grid-area: right; }
.seat-bottom { grid-area: bottom; }
.seat-info {
  display: flex; gap: 6px; align-items: center; font-size: 13px; background: rgba(0,0,0,.28);
  border-radius: 8px; padding: 2px 8px; white-space: nowrap;
}
.seat-info .wind { font-weight: 700; color: #ffe58a; }
.seat-info .wind.dealer::after { content: "親"; margin-left: 3px; font-size: 10px; background: #c0392b; color: #fff; border-radius: 3px; padding: 0 3px; }
.seat-info.current { outline: 2px solid var(--accent); }
.riichi-stick {
  display: inline-block; width: 38px; height: 7px; background: #fff; border-radius: 4px; position: relative;
}
.riichi-stick::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #d6332a; }
.river {
  display: grid; grid-template-columns: repeat(6, var(--rw)); gap: 2px;
  min-height: calc(var(--rw) * 1.36); align-content: start;
}
.center {
  grid-area: center; background: rgba(0,0,0,.3); border-radius: 10px; padding: 8px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; min-width: 120px;
}
.center .round { font-weight: 700; font-size: 15px; }
.center .dora-row { display: flex; align-items: center; gap: 4px; }
.center .small { font-size: 11px; opacity: .85; }

/* ---------- 牌 ---------- */
.tile {
  --w: var(--rw);
  width: var(--w); height: calc(var(--w) * 1.36);
  background: var(--tile-face); border-radius: calc(var(--w) * .14);
  border: 1px solid #b9b09a; box-shadow: 0 2px 0 var(--tile-edge);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1; position: relative; user-select: none; -webkit-user-select: none; color: #333;
}
.tile .n { font-size: calc(var(--w) * .52); font-weight: 700; }
.tile .s { font-size: calc(var(--w) * .34); margin-top: calc(var(--w) * .05); }
.tile.m .n, .tile.m .s { color: var(--man); }
.tile.p .n, .tile.p .s { color: var(--pin); }
.tile.s .n, .tile.s .s { color: var(--sou); }
.tile.z .h { font-size: calc(var(--w) * .62); font-weight: 900; color: #1b1b1b; }
.tile.z.hatsu .h { color: var(--sou); }
.tile.z.chun .h { color: var(--man); }
.tile.z.haku .frame { width: 58%; height: 62%; border: 2px solid #6b8fd0; border-radius: 3px; }
.tile.back { background: linear-gradient(135deg, #e8a33a, #c9781b); border-color: #9c5c12; }
/* 赤5（赤ドラ）: 数字・字を明るい赤、薄い赤の地色、右上に赤い点。萬子の赤とも区別できるように地色と枠で示す */
.tile.aka { background: #ffe4df; border-color: #d6332a; }
.tile.aka .n, .tile.aka .s { color: #e8160c; }
.tile.aka:not(.called)::after {
  content: ''; position: absolute; top: calc(var(--w) * .07); right: calc(var(--w) * .08);
  width: calc(var(--w) * .16); height: calc(var(--w) * .16); min-width: 4px; min-height: 4px;
  border-radius: 50%; background: #e8160c;
}
.tile.dim { opacity: .58; }
.tile.riichi-tile { transform: rotate(90deg); margin: 0 calc(var(--w) * .18); }
.tile.last { outline: 2px solid var(--accent); outline-offset: 1px; }
.tile.win { outline: 3px solid #d6332a; outline-offset: 1px; }
.river .tile.riichi-tile { margin: 0 calc(var(--w) * .18); }

/* ---------- 手牌 ---------- */
.hand {
  display: flex; align-items: flex-end; justify-content: center; gap: 3px; flex-wrap: nowrap;
  padding: 18px 6px 8px; background: #2a3a33; border-radius: 12px; min-height: calc(var(--hw) * 1.36 + 30px);
}
.hand .tile { --w: var(--hw); cursor: pointer; transition: transform .08s; }
.hand .tile.clickable:hover { transform: translateY(-6px); }
.hand .tile.disabled { filter: grayscale(.6) brightness(.8); cursor: not-allowed; }
.hand .gap { width: calc(var(--hw) * .35); flex: none; }
.hand .tile .dot {
  position: absolute; bottom: 3px; right: 3px; width: calc(var(--hw) * .2); height: calc(var(--hw) * .2);
  border-radius: 50%; border: 1px solid rgba(0,0,0,.25);
}
.lv-安全 { background: var(--safe); }
.lv-ほぼ安全 { background: var(--nearsafe); }
.lv-注意 { background: var(--caution); }
.lv-危険 { background: var(--danger); }
.hand .tile .rec {
  position: absolute; top: calc(var(--hw) * -0.42); left: 50%; transform: translateX(-50%);
  font-size: calc(var(--hw) * .34); color: var(--accent); text-shadow: 0 1px 2px #000;
}
.hand .tile.recommended { box-shadow: 0 2px 0 var(--tile-edge), 0 0 0 3px var(--accent); }
.hand .note { color: #ddd; font-size: 13px; }

/* ---------- 操作ボタン ---------- */
.action-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 40px; align-items: center; }
.action-bar button {
  font-size: 16px; font-weight: 700; padding: 8px 20px; border-radius: 8px; border: none; cursor: pointer; color: #fff;
}
.btn-riichi { background: #d35400; }
.btn-riichi.active { background: #8e3600; outline: 3px solid #ffd27a; }
.btn-tsumo { background: #c0392b; }
.btn-ron { background: #c0392b; }
.btn-pass { background: #607d8b; }
.action-bar .msg { color: #eee; font-size: 14px; }

/* ---------- 解説パネル ---------- */
.commentary {
  background: var(--panel); border-radius: 12px; padding: 12px 14px; position: sticky; top: 10px;
  max-height: calc(100vh - 80px); overflow: auto; font-size: 14px; line-height: 1.6;
}
.commentary .stats { font-size: 12px; color: var(--muted); border-bottom: 1px solid #e3e0d6; padding-bottom: 6px; margin-bottom: 8px; }
.commentary .headline { font-size: 20px; font-weight: 800; line-height: 1.4; margin: 4px 0 8px; }
.commentary details { border: 1px solid #e3e0d6; border-radius: 8px; margin: 6px 0; padding: 4px 10px; background: #fff; }
.commentary summary { font-weight: 700; cursor: pointer; }
.commentary ul { margin: 4px 0 4px; padding-left: 1.2em; }
.commentary details.lv-warn { border-color: var(--caution); background: #fff8e6; }
.commentary details.lv-danger, .commentary details.sec-defense { border: 2px solid var(--danger); background: #fff0ee; }
.commentary .verdict { border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; font-weight: 700; }
.verdict.ok { background: #e3f6e9; color: #17643a; }
.verdict.near { background: #eef6e0; color: #4a6b12; }
.verdict.ng { background: #fdecea; color: #a22a20; }
.commentary .thinking { font-size: 18px; font-weight: 700; padding: 10px; background: #eef3ff; border-radius: 10px; }
.commentary .muted { color: var(--muted); }
.commentary h3 { font-size: 13px; color: var(--muted); margin: 12px 0 2px; }

/* ---------- ツールチップ ---------- */
.tooltip {
  position: fixed; z-index: 50; max-width: 260px; background: #111d; color: #fff; padding: 8px 10px;
  border-radius: 8px; font-size: 13px; line-height: 1.5; pointer-events: none; backdrop-filter: blur(2px);
}
.tooltip b { color: #ffe58a; }

/* ---------- モーダル ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 12px; }
.modal[hidden] { display: none; }
.modal-box { background: var(--panel); border-radius: 14px; max-width: 760px; width: 100%; max-height: 92vh; overflow: auto; padding: 16px 18px; }
.modal-box h2 { margin: 0 0 8px; font-size: 20px; }
.modal-box .tiles { display: flex; flex-wrap: wrap; gap: 2px; align-items: flex-end; }
.modal-box .tiles .tile { --w: 30px; }
.modal-box table { border-collapse: collapse; width: 100%; font-size: 14px; }
.modal-box td, .modal-box th { border-bottom: 1px solid #e3e0d6; padding: 4px 6px; text-align: left; vertical-align: middle; }
.modal-box .big { font-size: 22px; font-weight: 800; }
.modal-box .retro { background: #eef3ff; border-radius: 8px; padding: 6px 10px; margin: 8px 0; }
.modal-box .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.modal-box .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.modal-box .actions button { padding: 8px 18px; font-weight: 700; border-radius: 8px; border: none; background: #1f6a4a; color: #fff; cursor: pointer; }
.plus { color: #17643a; font-weight: 700; }
.minus { color: #a22a20; font-weight: 700; }
.yaku-ref .tile { --w: 20px !important; }

/* ---------- スマホ ---------- */
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .commentary { position: static; max-height: none; }
}
@media (max-width: 600px) {
  :root { --rw: 17px; --hw: min(44px, calc((100vw - 52px) / 15)); }
  .table { padding: 6px; gap: 4px; }
  .seat-info { font-size: 11px; padding: 1px 5px; gap: 3px; }
  .center { min-width: 0; padding: 4px 6px; font-size: 11px; }
  .center .round { font-size: 12px; }
  .riichi-stick { width: 26px; }
  .hand { gap: 2px; padding: 16px 4px 6px; }
  .topbar h1 { font-size: 15px; }
  .action-bar button { padding: 7px 14px; font-size: 15px; }
}

/* 鳴き */
/* 副露: 取った牌は横向き（回転しても場所を取りすぎないよう負マージンで高さを詰め、下揃え） */
.melds { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-end; justify-content: center; max-width: calc(var(--rw) * 9); }
.meld { display: inline-flex; align-items: flex-end; gap: 1px; }
.meld .tile.sideways { transform: rotate(90deg); margin: calc(var(--w) * -.18) calc(var(--w) * .18); }
.meld .kakan-stack { display: inline-flex; flex-direction: column; align-items: center; }
.hand .melds { max-width: none; flex-wrap: nowrap; gap: 3px; }
.hand .melds .tile { --w: calc(var(--hw) * .72); cursor: default; }
.hand .meld-gap { width: calc(var(--hw) * .3); flex: none; }
.modal-box .melds { justify-content: flex-start; max-width: none; }
.modal-box .melds .tile { --w: 24px; }
.modal-box .hand-with-melds { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.modal-box .chankan-note { font-weight: 700; color: #a22a20; }
/* 河: 鳴かれた牌は薄く＋小さな矢印 */
.river .tile.called { opacity: .32; }
.river .tile.called::after {
  content: "↗"; position: absolute; top: -2px; right: -1px; font-size: calc(var(--w) * .42);
  color: #ffe58a; text-shadow: 0 0 2px #000; font-weight: 900;
}
/* 手牌: 喰い替えで切れない牌 */
.hand .tile.kuikae { filter: grayscale(.8) brightness(.65); outline: 2px dashed #e06a5a; outline-offset: -2px; }
/* 鳴きボタン */
.btn-call { background: #1f6fa8; }
.btn-kan { background: #6a3fa0; }
.action-bar button.btn-chi { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; }
.btn-tiles { display: inline-flex; gap: 1px; }
.btn-tiles .tile { --w: 20px; }
.btn-tiles .tile.called-in { outline: 2px solid var(--accent); }
.action-bar button.recommended { outline: 3px solid #ffd27a; }
.action-bar button .star { color: #ffd27a; margin-right: 4px; }
@media (max-width: 600px) {
  .hand .melds .tile { --w: calc(var(--hw) * .62); }
  .hand .melds { gap: 2px; }
  .btn-tiles .tile { --w: 16px; }
  .action-bar button.btn-chi { padding: 4px 8px; }
}

/* アドバイスの段階・AI評価 */
.cpu-note { font-size: 11px; color: #ffe58a; margin-left: 4px; }
.cpu-note[hidden] { display: none; }
.credit { text-align: center; font-size: 11px; color: #cfd8d3; padding: 6px 12px 12px; }
.commentary .small { font-size: 11px; }
.commentary .simple-note { font-size: 15px; font-weight: 700; color: #a22a20; margin: 2px 0 6px; }
.commentary .big-mistake { background: #fff0ee; border-left: 4px solid var(--danger); padding: 6px 10px; border-radius: 6px; margin: 6px 0; font-weight: 700; color: #8a1f17; }
.commentary .levelup { background: #eef3ff; border-radius: 8px; padding: 6px 10px; margin: 0 0 8px; font-size: 13px; }
.commentary details.more { background: #f6f4ee; }
.commentary details.more > details { margin: 4px 0; }
.commentary details.sec-ai { border-color: #6a5acd; background: #f3f1ff; }
.ai-table { margin: 8px 0; overflow-x: auto; }
.ai-table .ai-title { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.ai-table table { border-collapse: collapse; width: 100%; font-size: 13px; background: #fff; }
.ai-table th, .ai-table td { border-bottom: 1px solid #e3e0d6; padding: 3px 5px; text-align: left; white-space: nowrap; }
.ai-table tr.ai-chosen td { background: #f3f1ff; font-weight: 700; }
.ai-table tr.ai-yours td:first-child { text-decoration: underline; }
.ai-table td.ai-val { position: relative; min-width: 80px; }
.ai-table .ai-bar { position: absolute; left: 0; top: 4px; bottom: 4px; background: #c9c2f5; border-radius: 3px; }
.ai-table .ai-num { position: relative; }
.ai-table td.bad { color: #a22a20; font-weight: 700; }
.ai-table td.dubious { color: #9a6a00; font-weight: 700; }

/* ---------- 終局（最終ポイント） ---------- */
.final-table th { font-size: 12px; color: var(--muted); font-weight: 600; text-align: left; padding-right: 8px; }
.final-table td { padding-right: 8px; }
.final-table .final-pt { font-weight: 800; font-size: 1.1em; }
.final-table tr.me td { background: #fff4cf; }
.final-table th, .final-table td:first-child, .final-table .final-pt { white-space: nowrap; }
@media (max-width: 480px) { .final-table th, .final-table td { padding-right: 4px; font-size: 13px; } }

/* ---------- 2026-11-07 スマホで1画面に収める（docs/fable/05 高1〜5） ---------- */
/* 設定ボタン（スマホ幅だけ表示。PC 幅は従来どおり controls を並べる） */
.btn-settings { display: none; background: #2c4a3d; color: #fff; border: 1px solid #4d7a65; border-radius: 6px; padding: 5px 10px; cursor: pointer; }
/* ステータス帯: 手牌の直上。1行目 = 一言／考え中、2行目 = 前回の ○△×。高さを固定して手牌が動かないように */
.status-strip {
  background: #10201a; color: #f3f3f3; border-radius: 10px; padding: 4px 10px; font-size: 14px; line-height: 1.45;
  display: flex; flex-direction: column; gap: 1px; min-height: 48px; justify-content: center;
}
.status-strip:empty { display: none; }
.st-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.st-msg { font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-msg.st-think { color: #9fc3ff; font-variant-numeric: tabular-nums; }
.st-riichi { flex: none; background: var(--danger); color: #fff; border-radius: 5px; padding: 0 6px; font-size: 12px; font-weight: 700; }
.st-result { font-size: 13px; min-height: 1.45em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #cfd8d3; }
.st-result.ok { color: #7fe0a0; font-weight: 700; }
.st-result.near { color: #c8e07f; font-weight: 700; }
.st-result.ng { color: #ff9a8f; font-weight: 700; }
.st-threats { font-size: 12px; font-weight: 700; color: #ffb4a8; line-height: 1.35; }
.st-timer { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: #ffe08a; border: 1px solid #ffe08a66; border-radius: 5px; padding: 0 5px; font-size: 12px; }
.st-timer.low { color: #fff; background: var(--danger); border-color: var(--danger); }
.st-timer.over { color: #ff9a8f; }
.st-check { font-size: 12px; color: #9fc3ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 振り返り（終局・局の終わり） */
.game-review { margin-top: 10px; border-top: 1px solid #ffffff22; padding-top: 6px; }
.game-review h4 { margin: 10px 0 4px; font-size: 14px; }
.rv-scenes { width: 100%; border-collapse: collapse; font-size: 13px; }
.rv-scenes th, .rv-scenes td { text-align: left; padding: 2px 4px; border-bottom: 1px solid #ffffff14; }
.rv-scenes td.num { white-space: nowrap; }
.rv-scenes tr.weak td:first-child { color: #c0392b; font-weight: 700; }
.rv-extra { display: block; font-size: 11px; font-weight: 400; opacity: .8; }
.rv-focus { margin: 8px 0; padding: 6px 8px; border-left: 3px solid #9fc3ff; background: #9fc3ff14; font-size: 13px; }
.review-mistake { margin: 4px 0; font-size: 13px; }
.review-mistake summary { cursor: pointer; }
.rv-body { padding: 4px 0 4px 10px; }
.rv-line { margin-bottom: 4px; }
.rv-hand .tiles { flex-wrap: wrap; }
.rv-hand .gap { width: 6px; flex: none; }
.rv-hand .tile.rv-rec { outline: 2px solid #7fe0a0; outline-offset: -1px; }
.rv-hand .tile.rv-you { outline: 2px solid #ff9a8f; outline-offset: -1px; }
.rv-river { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.rv-who { flex: none; font-size: 12px; min-width: 5em; }
.rv-tiles { display: flex; flex-wrap: wrap; gap: 1px; }
.rv-tiles .tile { --w: 18px; }
/* 2026-11-08 第3回 束B'（07 G7）: 振り返りの河の鳴かれた牌は薄く＋矢印、場面別の ×・ミスの一覧、前巡の★ */
.rv-tiles .tile.called { opacity: .35; }
.rv-tiles .tile.called::after {
  content: "↗"; position: absolute; top: -2px; right: -1px; font-size: 9px;
  color: #ffe58a; text-shadow: 0 0 2px #000; font-weight: 900;
}
.rv-scene { margin: 4px 0; font-size: 13px; }
.rv-scene > summary { cursor: pointer; font-weight: 700; }
.rv-scene > .review-mistake { margin-left: 12px; }
.rv-prev { margin-bottom: 2px; }
.rv-weak { margin: 0; padding-left: 18px; font-size: 13px; }
/* 2タップ打牌: 選んだ牌を浮かせる */
.hand .tile.selected { transform: translateY(-10px); box-shadow: 0 2px 0 var(--tile-edge), 0 0 0 3px #4fa3ff; }
/* 手牌のタップ範囲を見た目より上下に広げる（牌の絵は変えない） */
.hand .tile.clickable::before { content: ''; position: absolute; inset: -10px -1px -8px; }
/* リーチ表示: 赤いバッジ＋河の地色を薄赤（ドリル画面と同じ作り） */
.riichi-badge { background: var(--danger); color: #fff; border-radius: 4px; padding: 0 4px; font-size: 11px; font-weight: 700; }
.seat.riichi .river { background: rgba(214, 51, 42, .22); border-radius: 4px; box-shadow: 0 0 0 2px rgba(214, 51, 42, .22); }
/* 河の最後の牌を少し浮かせる（低-3） */
.river .tile.last:not(.riichi-tile) { transform: translateY(-2px); outline-width: 3px; }
/* 局終了モーダル: 次の局へボタンを常に見える位置に（中-4） */
.modal-box .actions { position: sticky; bottom: -16px; background: var(--panel); padding: 8px 0; margin-bottom: -16px; }

@media (max-width: 600px) {
  /* ヘッダーを1行に。設定は ⚙ で開くパネル（卓の上に重ねるのでレイアウトは動かない） */
  .topbar { position: relative; flex-wrap: nowrap; padding: 6px 10px; }
  .btn-settings { display: inline-block; }
  .topbar .controls {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 35;
    background: #10201a; padding: 10px 12px 14px; box-shadow: 0 8px 18px rgba(0,0,0,.5);
    flex-direction: column; align-items: stretch; gap: 8px;
  }
  .topbar.settings-open .controls { display: flex; }
  .topbar .controls .ctl { justify-content: space-between; font-size: 14px; flex-wrap: wrap; }
  .topbar .controls select { min-height: 36px; max-width: 70%; }
  .topbar .controls a, .topbar .controls button { min-height: 38px; text-align: center; padding: 8px 9px; }
  .layout { padding: 6px 4px; gap: 8px; }
  .board-col { gap: 6px; }
  .action-bar { min-height: 36px; gap: 6px; }
  .action-bar .msg { font-size: 13px; }
  .status-strip { font-size: 13px; padding: 3px 8px; min-height: 44px; }
  .st-result { font-size: 12px; }
  .hand { gap: 1px; padding: 16px 2px 6px; flex-wrap: wrap; row-gap: 6px; }
  /* 危険度ドットと★を読める大きさに（中-3） */
  .hand .tile .dot { width: 8px; height: 8px; bottom: 2px; right: 2px; }
  .hand .tile .rec { font-size: 13px; top: -15px; }
  /* リーチ: 棒の代わりにバッジ。左右の家の名札は折り返して中央の箱に重ならないように */
  .riichi-stick { display: none; }
  .seat-info { flex-wrap: wrap; white-space: normal; justify-content: center; max-width: 100%; row-gap: 0; }
  .seat-left .seat-info .seat-name, .seat-right .seat-info .seat-name { display: none; }
  /* 役一覧: 「例」を条件の下の行に出し、牌は横一列（高-4） */
  .yaku-ref tr:first-child { display: none; }
  .yaku-ref tr { display: flex; flex-wrap: wrap; border-bottom: 1px solid #e3e0d6; padding: 4px 0; }
  .yaku-ref td { border-bottom: none; }
  .yaku-ref td:nth-child(1) { font-weight: 700; }
  .yaku-ref td:nth-child(3) { flex: 1 1 60%; }
  .yaku-ref td:last-child { flex-basis: 100%; overflow-x: auto; }
  .yaku-ref .tiles { flex-wrap: nowrap; }
  /* 局終了モーダル: 全員の手牌を縦積み（中-4） */
  .modal-box table:not(.yaku-ref):not(.final-table) tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; border-bottom: 1px solid #e3e0d6; padding: 3px 0; }
  .modal-box table:not(.yaku-ref):not(.final-table) td { border-bottom: none; }
  .modal-box .hand-with-melds .tiles .tile { --w: 22px; }
}

/* ---------- 2026-11-08 束B（docs/fable/06 F9・F10・F14） ---------- */
/* リーチ者全員に通る牌（危険度ドットの色は合算のまま。小さな「通」印だけ足す） */
.hand .tile .safe-mark {
  position: absolute; bottom: 2px; left: 2px; font-size: calc(var(--hw) * .26); line-height: 1; font-weight: 700;
  color: #fff; background: var(--safe); border-radius: 3px; padding: 0 1px; pointer-events: none;
}
/* 鳴きの脅威（2副露以上など。リーチの ⚠ より控えめ） */
.st-threat { flex: none; background: #b8732a; color: #fff; border-radius: 5px; padding: 0 5px; font-size: 11px; font-weight: 700; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Lv1 の順位条件（見出しの下に小さく） */
.rank-line { font-size: 12px; color: #9fc3ff; margin: 2px 0 4px; }
/* 卓の席の順位と自分との差 */
.seat-info .seat-rank { font-weight: 700; color: #ffe58a; }
.seat-info .seat-diff { font-size: 11px; opacity: .8; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .seat-info .seat-diff { font-size: 10px; }
  .st-threat { font-size: 10px; padding: 0 4px; }
}