/* 四川省（二角取り）固有の見た目（共通は ../common/base.css） */
/* 広い画面では、ゲームの画面だけをヘッダーと同じ幅（960px）まで広げて、牌を大きく見せる */
@media (min-width: 800px) {
  .stage { width: min(960px, calc(100vw - 48px)); margin-left: calc((100% - min(960px, calc(100vw - 48px))) / 2); }
}
.board-wrap { max-width: none; }
#table { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-touch-callout: none; }
/* 広い画面では、盤の高さが画面に収まるように幅をしぼる（--ar＝盤の横÷縦。game.js が入れる）。
   スマホ（幅600px未満）は横いっぱいに描き、縦に長い盤はページごと動かして遊ぶ */
@media (min-width: 600px) {
  #table { width: min(100%, max(360px, calc((100vh - 200px) * var(--ar, 2)))); margin: 0 auto; }
}
#table text { pointer-events: none; }
.aidon, #table.aidon { --aid: 1; }

/* 牌 */
.tile .edge { fill: #2F6B55; }
.tile .face { fill: #FCF9F0; stroke: #A89F88; stroke-width: 1.2; }
.tile .shade { fill: #3A3320; opacity: 0; pointer-events: none; }
.tile .ring { fill: none; stroke: none; stroke-width: 4; pointer-events: none; }
.tile .body { filter: var(--shadow-piece); }
.tile.sel .face { fill: #FFE7A0; }
.tile.sel .ring { stroke: #C98A00; stroke-width: 5; }
.tile.partner .ring { stroke: #2F6DB5; stroke-width: 4.5; animation: glow 1.1s ease-in-out infinite alternate; }
.tile.partner .face { fill: #E4EEFA; }
.tile.hint .ring { stroke: #FFFFFF; stroke-width: 5; stroke-dasharray: 8 4; }
.tile.hint .face { fill: #FFFFFF; }
.tile.kfocus .ring { stroke: #FFFFFF; stroke-width: 4; stroke-dasharray: 3 3; }
.tile.sel.kfocus .ring { stroke: #C98A00; }
.tile.nomatch .ring { stroke: var(--ng); stroke-width: 5; }
.tile.taking .face { fill: #FFE7A0; }
@keyframes glow { from { stroke-opacity: .5; } to { stroke-opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tile.partner .ring { animation: none; } }
.target { fill: none; pointer-events: none; }
.target.kfocus { stroke: #FFFFFF; stroke-width: 3; stroke-dasharray: 3 3; }

/* つなぐ線: 焦げ茶の縁どり＋明るい黄色。折れ点に丸、両端に輪 */
.link { pointer-events: none; }
.link-under { fill: none; stroke: #3A2412; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.link-top { fill: none; stroke: #FFD34D; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.link-bend { fill: #FFD34D; stroke: #3A2412; stroke-width: 2.5; }
.link-end { fill: #FFD34D; stroke: #3A2412; stroke-width: 2; }
/* ヒントの線は白い点線 */
.hint-line .link-under { stroke-width: 8; opacity: .45; }
.hint-line .link-top { stroke: #FFFFFF; stroke-width: 4; stroke-dasharray: 10 7; }
.hint-line .link-bend { fill: #FFFFFF; }
.hint-line .link-end { fill: #FFFFFF; }

/* 操作 */
.main-row .btn { flex: 1 1 auto; }
.status { flex-wrap: wrap; }
.status .head { white-space: nowrap; }
.timer { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 17px; margin-left: auto; white-space: nowrap; }
.status .moves { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; color: var(--ink-sub); white-space: nowrap; margin-left: 8px; }
.num-input { font: inherit; font-size: 18px; width: 9em; min-height: var(--tap); padding: 0 10px; border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.num-input:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }

/* ヒント・記録 */
.think { margin: 10px auto 0; border: 2px solid var(--line); border-radius: var(--radius); padding: 10px 14px; background: var(--surface); }
.think h3 { margin: 0 0 4px; font-size: 16px; }
.think p { margin: 0 0 6px; }
.think p:last-child { margin-bottom: 0; }
.lv { display: inline-block; white-space: nowrap; font-size: 14px; font-weight: 700; padding: 0 8px; border-radius: 999px; border: 1.5px solid currentColor; vertical-align: middle; }
.lv.ok { color: var(--ok); }
.result-box { inset: 10% 6% auto; z-index: 2; max-width: 560px; margin: 0 auto; }
.result-box .big { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
.result-box ul { list-style: none; padding: 0; margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.callout { z-index: 3; }

/* スマホ: 盤を横いっぱいに */
@media (max-width: 480px) {
  .stage { padding: 6px; margin: 0 -10px; }
  .turnbar { margin-bottom: 6px; padding: 4px 10px; }
  .controls { gap: 6px; margin-top: 8px; }
  .controls .btn.icon { padding: 0 9px; }
  .main-row .btn { padding: 0 10px; }
  .result-box { inset: 4% 3% auto; padding: 14px; }
  .result-box h2 { font-size: 1.25rem; }
  .article th, .article td { padding: 6px; font-size: 14px; }
}
.howto img[src*="screen"] { max-width: 640px; }
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 3; --tb-st-lines: 1; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 3; --tb-st-lines: 1; } }
@media (min-width: 641px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
:root:lang(en) .turnbar { --tb-msg-lines: 3; --tb-st-lines: 1; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 3; --tb-st-lines: 1; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 3; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */