/* ダウト固有の見た目（共通は ../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; }
@media (max-width: 480px) { .stage { padding: 6px; margin-left: -4px; margin-right: -4px; } } /* 盤だけ左右に広げる（ページの余白は共通の16px。D1） */

/* 札 */
.card .piece { filter: var(--shadow-piece); }
.card.lift .piece, .card.picked .piece { filter: var(--shadow-lift); }
.hand .card { cursor: pointer; }
.hand-area { fill: rgba(0, 0, 0, .14); stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; }

/* 手札の列（数字ごと） */
.col-hit { fill: transparent; cursor: pointer; }
.col-box { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 1.2; stroke-dasharray: 4 4; }
.col-label { fill: #F2EEE3; }
.col.empty .col-label { fill: rgba(242, 238, 227, .45); }
.col.cur .col-box { stroke: #FFE7A3; stroke-width: 3; stroke-dasharray: none; fill: rgba(255, 231, 163, .10); }
.col.cur .col-label { fill: #FFE7A3; }
.col.focus .col-box { stroke: #FFFFFF; stroke-width: 3; stroke-dasharray: 7 4; }
.col-count { fill: #1F2328; }
.col-count-bg { fill: #FFE7A3; stroke: #1F2328; stroke-width: 1.5; }

/* 光る枠 */
.ring { fill: none; stroke-width: 4; pointer-events: none; }
.ring.pick { stroke: #FFE7A3; stroke-width: 4.5; }
.ring.ok { stroke: #7FD49A; stroke-width: 5; }
.ring.ng { stroke: #FF7A6E; stroke-width: 5; }
.ring.new { stroke: #9CC8FF; stroke-width: 3.5; stroke-dasharray: 6 4; }
.mark-ok { fill: #2E7D4F; }
.mark-ng { fill: #B23A3A; }

/* 席 */
.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 .seat-box { fill: #EDE8DC; }
.seat-name, .seat-count { fill: #1F2328; }
.seat-sub { fill: #5B616B; }
.badge rect { fill: #FFFFFF; stroke: #1F2328; stroke-width: 1.5; }
.badge text { fill: #1F2328; }
.badge.out rect { fill: #2E7D4F; stroke: #2E7D4F; }
.badge.out text { fill: #FFFFFF; }

/* 数字の列 */
.chip rect { fill: rgba(255, 248, 234, .88); stroke: rgba(0, 0, 0, .25); stroke-width: 1; }
.chip text { fill: #1F2328; }
.chip.cur text { fill: #FFFFFF; }
.pile-box { fill: rgba(0, 0, 0, .12); stroke: rgba(255, 255, 255, .28); stroke-width: 1.5; stroke-dasharray: 5 4; }
.pile-label, .play-label { fill: #F2EEE3; }
.claim-bg { fill: #FFF8EA; stroke-width: 3; }
.claim-text { fill: #1F2328; }

/* 操作の列 */
#play .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; min-height: 52px; }
#play .actions .btn { min-height: 50px; font-size: 18px; }
#doubt { position: relative; overflow: hidden; background: #B23A3A; border-color: #B23A3A; color: #FFFFFF; min-width: 150px; font-weight: 800; font-size: 20px !important; }
#doubt .timer { position: absolute; left: 0; bottom: 0; height: 6px; background: #FFE7A3; width: 100%; }
#doubt:disabled { opacity: .45; }
#put { min-width: 150px; }
.wait-note { color: var(--ink-sub); font-size: 15px; }
#play .subs { display: flex; flex-wrap: wrap; gap: 8px; }

.rule-list .field { margin-bottom: 12px; }
.result-box { inset: 8% 6% auto; max-height: 86%; overflow: auto; }
.result-box li { font-size: 17px; }
@media (max-width: 480px) {
  .result-box { inset: 3% 4% auto; padding: 14px 12px; max-height: 94%; }
  .result-box h2 { font-size: 1.35rem; margin-bottom: 6px; }
  .result-box li { font-size: 15px; padding: 0; }
  .result-box .note { font-size: 14px; margin: 4px 0 10px; }
  .article th, .article td { padding: 6px; font-size: 14px; }
  #play .actions .btn { flex: 1 1 auto; padding: 0 12px; }
  #play .subs { gap: 6px; }
  #play .subs .btn.icon { padding: 0 8px; font-size: 14px; flex: 1 1 auto; }
}
/* 上のバーの高さを一定に（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: 2; --tb-st-lines: 2; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */