/* ハーツ固有の見た目（共通は ../common/base.css） */
#table { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#table text { pointer-events: none; }
.stage { padding: 10px; }

/* 席 */
.seat-box { fill: #FFF8EA; stroke: rgba(0, 0, 0, .3); stroke-width: 1.5; transition: stroke var(--dur); }
.seat.on .seat-box { stroke: #1F2328; stroke-width: 4; }
.seat-name, .seat-count { fill: #1F2328; }
.seat-sub { fill: #5B616B; }
.seat-sub.strong { fill: #8E2A2A; }
.qchip rect { fill: #FFFFFF; stroke: #1F2328; stroke-width: 1.5; }
.badge rect { fill: #5B616B; stroke: #FFFFFF; stroke-width: 1.5; }
.badge text { fill: #FFFFFF; }
.badge.out rect { fill: #2E7D4F; }

/* 場 */
.in-trick .piece { filter: var(--shadow-piece); }
.in-trick.win .face > rect:first-child { stroke: var(--p-yellow); stroke-width: 5; }
.lead-tag rect { fill: #2F5D8A; stroke: #FFFFFF; stroke-width: 1.5; }
.lead-tag text { fill: #FFFFFF; }
.chip rect { fill: rgba(255, 248, 234, .94); stroke: rgba(0, 0, 0, .25); stroke-width: 1.2; }
.chip text { fill: #1F2328; }
.chip.on rect { fill: #B23A3A; stroke: #FFFFFF; }
.chip.on text { fill: #FFFFFF; }
.pass-bg { fill: rgba(0, 0, 0, .18); stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; }
.pass-line { stroke: #FFF8EA; stroke-width: 10; stroke-linecap: round; }
.pass-head { fill: #FFF8EA; }
.pass-text { fill: #FFF8EA; }

/* 手札 */
.card .flip { transform-box: fill-box; transform-origin: center; }
.card.lift .piece { filter: var(--shadow-lift); }
.in-hand .piece { filter: var(--shadow-piece); }
.in-hand.pickable { cursor: pointer; }
.dim-cover { fill: rgba(31, 35, 40, .42); pointer-events: none; }
.in-hand.sel .piece { filter: var(--shadow-lift); }
.in-hand.sel .face > rect:first-child { stroke: var(--p-yellow); stroke-width: 4; }
.in-hand.fresh .face > rect:first-child { stroke: #2F6DB5; stroke-width: 3; }
.in-hand.fresh.sel .face > rect:first-child { stroke: var(--p-yellow); stroke-width: 4; }
.focus-ring { fill: none; stroke: #FFF8EA; stroke-width: 3; stroke-dasharray: 5 3; }

/* 操作 */
#actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; min-height: var(--tap); align-items: center; }
#actions .note { color: var(--ink-sub); font-size: 14px; }
.rule-list .field { margin-bottom: 12px; }

/* 結果・点数表 */
.result-box { inset: 4% 4% auto; max-height: 92%; overflow: auto; padding: 16px; }
.result-box li { font-size: 16px; }
#result-table { margin-top: 12px; }
.hand-line { margin: 0 0 8px; font-weight: 700; }
table.scores { border-collapse: collapse; margin: 0 auto 10px; font-size: 15px; font-variant-numeric: tabular-nums; }
table.scores th, table.scores td { border: 1px solid var(--line); padding: 4px 8px; text-align: center; min-width: 44px; }
table.scores th .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); margin-right: 3px; vertical-align: 0; }
table.scores td small { display: block; font-size: 14px; color: var(--ink-sub); line-height: 1.1; }
table.scores tr.last td { background: rgba(217, 162, 27, .16); font-weight: 700; }
table.scores tfoot th { font-size: 16px; }
table.scores th.lo { color: var(--ok); }
.howto img { max-width: 640px; }
@media (max-width: 480px) {
  .article th, .article td { padding: 6px; font-size: 14px; }
  table.scores { font-size: 14px; }
  table.scores th, table.scores td { padding: 3px 4px; min-width: 0; }
}
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; --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: 3; --tb-st-lines: 2; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 3; --tb-st-lines: 2; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */