/* 麻雀ソリティア固有の見た目（共通は ../common/base.css） */
#table { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-touch-callout: none; }
/* 拡大: 場を大きく描き、枠の中で上下左右に動かして見る（ページ全体は横にはみ出さない） */
.board-scroll { border-radius: 10px; }
.board-wrap.zoom .board-scroll { overflow: auto; max-height: min(78vh, 720px); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.board-wrap.zoom #table { width: var(--zoomw, 170%); max-width: none; }
#table text { pointer-events: none; }
.board-wrap { max-width: 720px; }
.aidon, #table.aidon { --aid: 1; }

/* 牌 */
.tile .edge { fill: #2F6B55; }
.tile .edge2 { fill: #D9CFB6; }
.tile .face { fill: #FCF9F0; stroke: #A89F88; stroke-width: 1.2; }
.tile .shade { fill: #3A3320; opacity: 0; pointer-events: none; transition: opacity var(--dur); }
.tile .ring { fill: none; stroke: none; stroke-width: 4; pointer-events: none; }
.tile .body { filter: var(--shadow-piece); transition: transform var(--dur); }
.tile.blocked .shade { opacity: .22; }
.tile.sel .body { transform: translate(0, -5px); filter: var(--shadow-lift); }
.tile.sel .ring { stroke: #C98A00; stroke-width: 4.5; transform: translate(0, -5px); }
.tile.sel .face { fill: #FFF3C4; }
.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-dasharray: 3 3; }
.tile.nomatch .ring { stroke: var(--ng); }
@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; }

/* 操作 */
.main-row .btn { flex: 1 1 auto; }

.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; max-width: 720px; 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; }
.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; }
}
/* 上のバーの高さを一定に（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: 4; --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: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */