/* 大富豪固有の見た目（共通は ../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; }

/* 場の枠 */
.field-box { fill: rgba(0, 0, 0, .10); stroke: rgba(255, 255, 255, .28); stroke-width: 1.5; stroke-dasharray: 6 5; }

/* 席 */
.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.done { opacity: .72; }
.seat-name, .seat-count { fill: #1F2328; }
.seat-title { fill: #2F5D8A; }
.seat-sub { fill: #5B616B; }
.badge rect { fill: #5B616B; stroke: #FFFFFF; stroke-width: 1.5; }
.badge text { fill: #FFFFFF; }
.badge.out rect { fill: #2E7D4F; }
.badge.foul rect, .badge.miyako rect { fill: #B23A3A; }
.badge.pop { animation: badgepop .25s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes badgepop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 状態の札 */
.chip rect { fill: rgba(0, 0, 0, .35); stroke: rgba(255, 255, 255, .45); stroke-width: 1.2; }
.chip text { fill: #F2EEE3; }
.chip.rev rect { fill: #B23A3A; stroke: #FFFFFF; stroke-width: 2; }
.chip.jback rect { fill: #B7791F; stroke: #FFFFFF; stroke-width: 2; }
.chip.lock rect { fill: #2F5D8A; stroke: #FFFFFF; stroke-width: 2; }
.chip.dir rect { fill: #7A5AA6; stroke: #FFFFFF; stroke-width: 2; }
.chip.rev text, .chip.jback text, .chip.lock text, .chip.dir text { fill: #FFFFFF; }

/* 札 */
.card .flip { transform-box: fill-box; transform-origin: center; }
.card.lift .piece { filter: var(--shadow-lift); }
.in-hand { transition: opacity var(--dur); }
.in-hand.pickable { cursor: pointer; }
.dim-cover { fill: rgba(31, 35, 40, .38); pointer-events: none; }
.in-hand.sel .piece { filter: var(--shadow-lift); }
.in-hand.sel .face > rect:first-child { stroke: var(--accent); stroke-width: 3; }
.in-hand.recv .face > rect:first-child { stroke: #D9A21B; stroke-width: 3; }
.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 { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 640px) { .rule-list { grid-template-columns: 1fr 1fr; } }
.result-box { inset: 8% 6% auto; max-height: 84%; overflow: auto; }
.result-box li { font-size: 16px; }
.howto img[src*="order"], .howto img[src*="exchange"] { max-width: 600px; }
/* 上のバーの高さを一定に（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: 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; } }
/* 上のバーの高さ ここまで */