/* ドミノ固有の見た目（共通は ../common/base.css） */
.stage { padding: 10px; }
.board-wrap { position: relative; max-width: 600px; margin: 0 auto; border-radius: 8px; overflow: hidden;
  background: #5b3a22 url(assets/wood_dark.webp) center / 360px auto; }
#table { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#table text { pointer-events: none; font-family: var(--font); }

/* 牌 */
.t-face { fill: #FBF8EF; stroke: #6F6758; stroke-width: 0.9; }
.t-shine { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 0.8; }
.t-bar { stroke: #7A7162; stroke-width: 1.6; stroke-linecap: round; }
.t-pin { fill: #C9A45C; stroke: #8C6F33; stroke-width: 0.4; }
.t-back { fill: #2D5563; stroke: #173038; stroke-width: 0.9; }
.t-back-in { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 0.8; }
.t-back-mark { fill: rgba(255, 255, 255, .45); }
.tile.piece { filter: var(--shadow-piece); }
.tile.lifted { filter: var(--shadow-lift); }
.tile.mini { filter: none; }
.tile.just .t-face { stroke: #D9A21B; stroke-width: 2.2; }

/* 場 */
.line-area { fill: rgba(0, 0, 0, .18); stroke: rgba(255, 248, 234, .18); stroke-width: 1; }
.line-hint { fill: rgba(255, 248, 234, .75); font-size: 13px; }
.end-ghost rect { fill: rgba(255, 248, 234, .06); stroke: rgba(255, 248, 234, .45); stroke-width: 1.2; stroke-dasharray: 4 3; }
.target { cursor: pointer; }
.target-box { fill: rgba(255, 231, 163, .35); stroke: #FFE7A3; stroke-width: 2.5; stroke-dasharray: 5 3; }
.target-num { fill: var(--p-blue); stroke: #FFFFFF; stroke-width: 1.5; }
.target-txt { fill: #FFFFFF; font-size: 13px; font-weight: 700; }
.target .target-box { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .target .target-box { animation: none; } }

/* 席 */
.seat-box { fill: #FFF8EA; stroke: rgba(0, 0, 0, .3); stroke-width: 1.2; }
.seat-turn { fill: none; stroke: #FFE7A3; stroke-width: 3.5; }
.seat-name { fill: #1F2328; font-size: 15px; font-weight: 700; }
.seat.me .seat-name, .seat.me .seat-sub { fill: #FFF8EA; }
.seat.me.on .seat-name { fill: #FFE7A3; }
.seat-score { fill: #1F2328; font-size: 14px; font-weight: 700; }
.seat-sub { fill: #5B616B; font-size: 13px; }

/* 山 */
.bone-box { fill: rgba(255, 248, 234, .9); stroke: rgba(0, 0, 0, .3); stroke-width: 1.2; }
.bone-txt { fill: #1F2328; font-size: 14px; font-weight: 700; }
.bone.ready { cursor: pointer; }
.bone.ready .bone-box { stroke: #FFE7A3; stroke-width: 3.5; animation: pulse 1.1s ease-in-out infinite; }
.bone.block .bone-box { fill: rgba(255, 248, 234, .55); }
@media (prefers-reduced-motion: reduce) { .bone.ready .bone-box { animation: none; } }

/* 手札 */
.hand-slot { cursor: default; }
.hand-hit { fill: transparent; }
.tile.hand { transition: opacity var(--dur), filter var(--dur); }
.tile.hand.playable { filter: var(--shadow-lift); }
.tile.hand.playable .t-face { stroke: #FFE7A3; stroke-width: 2.4; }
.hand-slot:has(.playable) { cursor: pointer; }
.tile.hand.selected .t-face { stroke: var(--p-yellow); stroke-width: 3.2; }
.tile.hand.dim { opacity: .5; }
.tile.hand.new .t-face { fill: #FFF3CF; }

/* ボタンの列 */
#endbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#endbtns:empty { display: none; }
.lvl { color: var(--ink-sub); font-size: 14px; }
.status .ends { margin-left: auto; font-weight: 400; font-size: 15px; color: var(--ink-sub); }
.status .ends b { display: inline-block; min-width: 1.4em; text-align: center; color: var(--ink); background: var(--accent-soft); border-radius: 4px; margin: 0 2px; }

/* 設定 */
.sub-field { margin: 4px 0 12px; }
.sub-field > .label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 15px; }
.check.off { opacity: .45; }

/* 結果 */
.result-box { inset: 4% 3% auto; max-height: 92%; overflow: auto; padding: 16px; }
.result-box h2 { font-size: 1.35rem; margin-bottom: 8px; }
.result-scroll { overflow-x: auto; }
#result-table { width: 100%; margin: 0 0 8px; font-size: 15px; }
#result-table th, #result-table td { padding: 4px 6px; vertical-align: middle; border-color: var(--line); }
#result-table tbody th { white-space: nowrap; text-align: left; font-weight: 700; background: none; }
#result-table thead th { font-size: 14px; color: var(--ink-sub); }
#result-table td.num { text-align: right; white-space: nowrap; }
#result-table tr.won { background: var(--accent-soft); }
#result-table .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); margin-right: 6px; vertical-align: -1px; }
.mini-hand { display: block; max-width: 100%; height: auto; }
.none { color: var(--ink-sub); font-size: 14px; }
@media (max-width: 480px) {
  #result-table { font-size: 14px; }
  #result-table th, #result-table td { padding: 3px 4px; }
  .status .ends { font-size: 14px; }
}
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --tb-st-lines: 2; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
@media (min-width: 641px) { .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
:root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */