/* 坊主めくり固有の見た目（共通は ../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 { filter: var(--shadow-lift); }
.stack .card .piece { filter: none; }
.stack .card:last-of-type .piece { filter: var(--shadow-piece); }
.stack-empty { fill: rgba(0, 0, 0, .12); stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; stroke-dasharray: 5 4; }
.deck-stack { cursor: pointer; }
.deck-hit { fill: transparent; }
.deck-ring { fill: none; stroke-width: 4; pointer-events: none; }
.deck-ring.mine { stroke-width: 5; stroke-dasharray: 9 5; animation: ring-dash 1.2s linear infinite; }
@keyframes ring-dash { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) { .deck-ring.mine { animation: none; } }

/* 畳の上の文字（縁取りで読みやすく） */
.on-tatami { fill: #FFF8EA; paint-order: stroke; stroke: rgba(30, 24, 10, .7); stroke-width: 3.5px; stroke-linejoin: round; }
.on-tatami.sub { fill: #F3EAD2; }
.rev-kind { fill: #FFE7A3; }

/* 席 */
.seat-box { fill: #FFF8EA; stroke: rgba(0, 0, 0, .3); stroke-width: 1.5; }
.seat-turn { fill: none; stroke-width: 4; }
.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.win rect { fill: #2E7D4F; stroke: #2E7D4F; }
.badge.win text { fill: #FFFFFF; }
.badge.lose rect { fill: #B23A3A; stroke: #B23A3A; }
.badge.lose text { fill: #FFFFFF; }
.badge.note rect { fill: #FFF3D6; stroke: #B7791F; }
.badge.note text { fill: #7A4E0B; }

#draw { min-width: 132px; }
.rule-list .field { margin-bottom: 12px; }
.result-box { inset: 8% 6% auto; max-height: 86%; overflow: auto; }
.result-box li { font-size: 17px; }
.result-box .cnt { color: var(--ink-sub); font-weight: 700; }
@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 .controls { gap: 6px; }
  #play .btn.icon { padding: 0 8px; font-size: 14px; }
  #draw { flex: 1 0 100%; }
  #play .spacer { display: none; }
  #play .btn.icon { flex: 1 1 0; }
}
/* 札の種類の小さな印（設定「札の種類の印」。英語は初期オン、日本語は初期オフ） */
.kmark { display: none; }
.show-kind .kmark { display: inline; }
.kmark rect { stroke: rgba(255, 255, 255, .85); stroke-width: 1; }
.kmark text { fill: #FFFFFF; }
.kmark.kind-tono rect { fill: #2F6DB5; }
.kmark.kind-bozu rect { fill: #B23A3A; }
.kmark.kind-hime rect { fill: #2E7D4F; }
.kmark.kind-semi rect { fill: #6B4E99; }
/* 英語は知らせが長いので折り返す（日本語は共通のまま1行） */
:root:lang(en) .callout { white-space: normal; width: max-content; max-width: 92%; text-align: center; border-radius: 24px; line-height: 1.3; }
/* 英語はボタンの文字が長いので、スマホ幅で「Sound: off」などが2行にならないよう左右の余白を詰める */
@media (max-width: 480px) { :root:lang(en) #play .controls .btn.icon { white-space: nowrap; padding-left: 8px; padding-right: 8px; } }
/* 上のバーの高さを一定に（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; } }
/* 上のバーの高さ ここまで */