/* 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; }
/* 2026-11-10 アプリの名前（長い）: 広い画面は1行。スマホ幅は「麻雀サイボーグ（ジャンボーグ）」と小さめの「養成アプリ」の2行（⚙ 設定を押し出さない） */
.app-title { min-width: 0; }
.app-title .app-sub { margin-left: .3em; }
.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; }

/* ---------- 卓 ---------- */
/* 2026-11-10 盤面の大きさは画面幅だけで決まり、河や副露が増えても変わらない（横にもはみ出さない）。
   河は左右の家 4枚×6段・対面と自分 6枚×4段（24枚ぶん＋リーチの横向き牌1枚ぶんの幅）を最初から取っておく。
   24枚を超えたら .river.dense（牌を少し小さく・1段1枚多く）で同じ場所に収める。
   行: 対面の副露と名札 / 対面の河 / 中央 / 自分の河 / 自分の名札。左右の家は 2〜4 行目にまたがる。
   副露は卓の上では小さめ（--mw）。対面は副露の場所を2段ぶん、左右の家は河の下に1つずつ（はみ出しても大きさは変えない）。 */
.table {
  --rg: 2px;                                      /* 河の牌の間 */
  --rh: calc(var(--rw) * 1.36);                   /* 河の牌の高さ */
  --mw: calc(var(--rw) * .75);                    /* 卓の副露の牌の幅 */
  --sw: calc(var(--rw) * 4.36 + 3 * var(--rg) + 2px);   /* 左右の家の河の幅（4枚＋横向き牌のはみ出し） */
  --tw: calc(var(--rw) * 6.36 + 5 * var(--rg) + 2px);   /* 対面・自分の河の幅（6枚＋横向き牌のはみ出し） */
  --srh: calc(var(--rh) * 6 + 5 * var(--rg));     /* 左右の家の河の高さ（6段） */
  --trh: calc(var(--rh) * 4 + 3 * var(--rg));     /* 対面・自分の河の高さ（4段） */
  --mz: calc(var(--mw) * 3.3 + 4px);              /* 対面の副露の場所（2段。加槓の重ねた牌のぶん少し高め） */
  --ih: 24px;                                     /* 自分の名札の行 */
  --ch: calc(var(--rh) + 84px);                   /* 中央（局・ドラ表示・残り・供託） */
  --tg: 8px;                                      /* 卓の中の間 */
  --tp: 10px;                                     /* 卓の内側の余白 */
  background: radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-dark) 100%);
  border-radius: 14px; padding: var(--tp); color: #fff;
  display: grid; gap: var(--tg); justify-content: center; align-items: center; justify-items: center;
  grid-template-columns: var(--sw) var(--tw) var(--sw);
  grid-template-rows: var(--mz) var(--trh) var(--ch) var(--trh) var(--ih);
  grid-template-areas:
    "thead  thead  thead"
    "left   triver right"
    "left   center right"
    "left   briver right"
    "bhead  bhead  bhead";
  height: calc(var(--mz) + var(--trh) * 2 + var(--ch) + var(--ih) + var(--tg) * 4 + var(--tp) * 2);
  overflow: hidden;   /* 万一はみ出しても卓の外（ページ）を広げない */
}
.seat { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.seat-top, .seat-bottom { display: contents; }
.seat-top .seat-head { grid-area: thead; display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 100%; min-width: 0; max-width: 100%; }
.seat-top .seat-head .melds { max-width: var(--tw); height: 100%; align-content: flex-end; flex-shrink: 0; }
.seat-top .river { grid-area: triver; }
.seat-bottom .river { grid-area: briver; }
.seat-bottom .seat-info { grid-area: bhead; }
.seat-left { grid-area: left; }
.seat-right { grid-area: right; }
.seat-left, .seat-right { width: var(--sw); }
/* 2026-11-10 左右の家: 河を縦の真ん中に置き、名札は河のすぐ上・副露は河のすぐ下（中央の箱の横に来る。1巡目でも対面の名札の下に寄らない）。
   副露が多くて下の段に収まらないときは、下の段が伸びて河が少し上がる（卓の大きさは変わらない） */
.seat-left, .seat-right { align-self: stretch; height: 100%; display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; gap: 4px; }
.seat-left > .seat-info, .seat-right > .seat-info { align-self: end; }
.seat-left > .melds, .seat-right > .melds { align-self: start; grid-row: 3; }
.seat-left > .river, .seat-right > .river { grid-row: 2; }
.seat-left .seat-info, .seat-right .seat-info { flex-wrap: wrap; white-space: normal; justify-content: center; max-width: 100%; row-gap: 0; }
.seat-top .seat-info { flex-wrap: wrap; white-space: normal; justify-content: center; row-gap: 0; min-width: 0; }
.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; line-height: 1.4;
}
.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: flex; flex-direction: column; gap: var(--rg); flex: none; }
/* 河の場所はうっすら色を付ける（まだ牌が無くても、名札がどの河の物か分かるように） */
.table .river { background: rgba(0,0,0,.08); border-radius: 4px; }
.river-side { width: var(--sw); height: var(--srh); }
.river-tb { width: var(--tw); height: var(--trh); }
.river-row { display: flex; gap: var(--rg); align-items: center; height: var(--rh); flex: none; }
.river.dense .tile { --w: calc(var(--rw) * .78); }
.river.dense .river-row { height: calc(var(--rw) * .78 * 1.36); }
.table .melds .tile { --w: var(--mw); }
.seat-left .melds, .seat-right .melds { max-width: var(--sw); }
.center {
  grid-area: center; background: rgba(0,0,0,.3); border-radius: 10px; padding: 8px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px;
  width: 100%; height: 100%; min-width: 0; overflow: visible;
}
.center .round { font-weight: 700; font-size: 15px; }
.center .dora-row { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 4px; white-space: nowrap; }
.center .dora-row.dora-3 .tile { --w: calc(var(--rw) * .8); }
.center .dora-row.dora-4 { gap: 2px; }
.center .dora-row.dora-4 .tile { --w: calc(var(--rw) * .7); }
.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); flex: none; }

/* ---------- 手牌 ---------- */
.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) {
  /* 河の牌: 17px（320px 幅でも 3列 = 左右の河＋対面の河 が収まる。15.08 = 4.36×2＋6.36） */
  :root { --rw: min(17px, calc((100vw - 56px) / 15.08)); --hw: min(44px, calc((100vw - 52px) / 15)); }
  .table { --tp: 4px; --tg: 4px; --ih: 20px; --ch: calc(var(--rh) + 66px); }
  .seat-info { font-size: 11px; padding: 1px 5px; gap: 3px; }
  .center { padding: 4px 6px; font-size: 11px; gap: 2px; }
  .center .round { font-size: 12px; }
  .riichi-stick { width: 26px; }
  .hand { gap: 2px; padding: 16px 4px 6px; }
  .topbar h1 { font-size: 15px; }
  .app-title { display: flex; flex-direction: column; line-height: 1.15; }
  .app-title .app-name { font-size: min(14px, 4.1vw); letter-spacing: 0; white-space: nowrap; }
  .app-title .app-sub { font-size: 11px; margin-left: 0; font-weight: 600; opacity: .85; letter-spacing: .05em; }
  .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; }
}

/* 牌譜の書き出し（src/export/export_ui.js。重ね画面の枠は feedback.css の .fb-modal / .fb-box を使う） */
.tx-lead div + div { margin-top: 2px; }
.tx-lead { overflow-wrap: anywhere; }
.tx-status { font-size: 13px; color: #1f6a4a; min-height: 1.2em; margin: 6px 0; overflow-wrap: anywhere; }
.tx-text { min-height: 90px; font-size: 12px; font-family: ui-monospace, Menlo, monospace; word-break: break-all; }
.tx-link { display: inline-block; margin: 6px 0; font-weight: 700; color: #1f5fa8; overflow-wrap: anywhere; }
.tx-settings { display: flex; }
.modal-box .actions { flex-wrap: wrap; }
@media (max-width: 600px) {
  .tx-settings { flex-basis: 100%; }
  .tx-settings button { flex: 1 1 auto; }
}
.tx-steps { margin: 8px 0; padding-left: 1.5em; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.tx-steps li { margin: 3px 0; }
.tx-steps li.tx-key { font-weight: 800; background: #fff4cf; border-radius: 6px; padding: 2px 6px; }
.tx-end { display: flex; justify-content: flex-end; margin-top: 12px; }
.tx-end button { padding: 8px 14px; font-weight: 700; border-radius: 8px; border: 1px solid #1f6a4a; background: #fff; color: #1f6a4a; cursor: pointer; max-width: 100%; }
@media (max-width: 600px) { .tx-end button { flex: 1 1 auto; min-height: 40px; } }
@media (max-width: 600px) {
  /* 終局画面などの操作の列: 折り返して横にはみ出さない（ボタンが多いと 320px 幅で画面外に出ていた） */
  .modal-box .actions button { flex: 1 1 auto; padding: 8px 10px; }
}

/* Mortal と比べる（src/review/review_ui.js。枠は feedback.css の .fb-modal / .fb-box。320px 幅で横にはみ出さない） */
.tx-end { flex-wrap: wrap; gap: 8px; }
.tx-end button.mr-open { background: #1f6a4a; color: #fff; }
.mr-box { max-width: 560px; }
.mr-wait { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-weight: 700; }
.mr-spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid #cfe3d8; border-top-color: #1f6a4a; animation: mr-spin .9s linear infinite; flex: none; }
@keyframes mr-spin { to { transform: rotate(360deg); } }
.mr-rate { font-size: 15px; margin: 4px 0 2px; overflow-wrap: anywhere; }
.mr-rate b { font-size: 18px; margin-right: 4px; }
.mr-sub { font-size: 13px; color: #555; margin: 2px 0 8px; }
.mr-error { color: #8a2b16; }
.mr-list { display: flex; flex-direction: column; gap: 10px; }
.mr-item { border: 1px solid #d8d2c2; border-left-width: 5px; border-radius: 8px; padding: 8px 10px; background: #fffdf7; min-width: 0; }
.mr-size-l { border-left-color: #c0392b; }
.mr-size-m { border-left-color: #e0a100; }
.mr-size-s { border-left-color: #9bb8a8; }
.mr-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-weight: 700; }
.mr-size { margin-left: auto; font-size: 13px; padding: 1px 8px; border-radius: 10px; background: #f1ece0; }
.mr-size-l .mr-size { background: #f8d9d4; color: #8a2b16; }
.mr-size-m .mr-size { background: #fbefc8; color: #6b4e00; }
.mr-sit { font-size: 13px; color: #444; margin: 2px 0 6px; overflow-wrap: anywhere; }
.mr-hand { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 8px; }
.mr-tiles { display: flex; flex-wrap: wrap; gap: 1px; align-items: flex-end; }
.mr-tiles .tile { --w: min(20px, calc((100vw - 72px) / 15)); }
.mr-drawn { display: flex; align-items: flex-end; gap: 3px; }
.mr-drawn-label { font-size: 11px; color: #666; }
.mr-meld { padding-left: 2px; border-left: 1px dashed #bbb; }
.mr-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.mr-cmp > div { border-radius: 6px; padding: 4px 6px; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.mr-you { background: #f3f0e8; }
.mr-mortal { background: #e3f1e9; }
.mr-k { display: block; font-size: 11px; color: #666; }
.mr-v { font-weight: 700; }
.mr-top, .mr-note { font-size: 12px; color: #555; margin-top: 4px; overflow-wrap: anywhere; }
.mr-more { margin-top: 10px; width: 100%; padding: 8px; border-radius: 8px; border: 1px solid #1f6a4a; background: #fff; color: #1f6a4a; font-weight: 700; cursor: pointer; }
.mr-credit { margin-top: 12px; }
.mr-credit a { color: #1f5fa8; }

/* 更新のお知らせ（src/ui/whatsnew.js） */
.wn-box { max-width: 480px; }
.wn-ver { font-size: 14px; margin: 10px 0 2px; color: #444; }
.wn-list { margin: 4px 0 8px; padding-left: 1.3em; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.wn-list li { margin: 3px 0; }

/* 2026-11-10 「Mortal と比べる」のその時の盤面（main.js の fillTable で描いた卓を小さめに）。
   牌の幅 --rw は重ね画面の余白（左右 8＋12＋項目 13 px）と卓の固定の幅（15.08 枚＋44px）から計算 → 320px 幅でも横にはみ出さない */
.mr-bd { margin: 4px 0 6px; }
.mr-bd > summary { font-size: 12px; color: #555; cursor: pointer; padding: 2px 0; }
.mr-board { margin-top: 4px; }
.table.mr-table { --rw: min(17px, calc((100vw - 110px) / 15.08)); --tp: 4px; --tg: 4px; --ih: 20px; --ch: calc(var(--rh) + 66px); max-width: 100%; }
.table.mr-table .seat-info { font-size: 11px; padding: 1px 5px; gap: 3px; flex-wrap: wrap; white-space: normal; justify-content: center; max-width: 100%; row-gap: 0; }
.table.mr-table .seat-left .seat-name, .table.mr-table .seat-right .seat-name { display: none; }
.table.mr-table .riichi-stick { display: none; }
.table.mr-table .center { padding: 4px 6px; font-size: 11px; gap: 2px; }
.table.mr-table .center .round { font-size: 12px; }
.mr-noboard { font-size: 12px; color: #8a5a00; margin: 2px 0 6px; }
.mr-key { font-size: 11px; color: #555; margin: 2px 0 2px; }
.mr-key-you { color: #b3261e; font-weight: 700; }
.mr-key-mo { color: #1b7a43; font-weight: 700; }
.mr-tiles .tile.mr-you-t { outline: 3px solid #d0342c; outline-offset: -1px; }
.mr-tiles .tile.mr-mo-t { outline: 3px solid #1f9d55; outline-offset: -1px; }
.mr-star { font-size: 12px; color: #4a3d00; background: #fff6d6; border-radius: 6px; padding: 3px 6px; margin-top: 6px; overflow-wrap: anywhere; }