/* セブンブリッジ固有の見た目（共通は ../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; }

/* 山札・捨て札 */
.stock-slot { fill: rgba(0, 0, 0, .14); stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; }
.stock .card, .discard .card { filter: var(--shadow-piece); }
.stock.can, .discard.can { cursor: pointer; }
.stock-ring { fill: none; stroke: var(--p-yellow); stroke-width: 4; }
.stock-ring.claim { stroke: #F2A0D0; }
.pile-label { fill: #F2EEE3; }
.discard .under { opacity: .92; }
.pulse { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* 場の組 */
.meld-row-bg { fill: rgba(0, 0, 0, .12); stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
.meld-empty { fill: rgba(242, 238, 227, .72); }
.bcard-base { fill: #FFFFFF; stroke: #BDB8AC; stroke-width: 1; }
.meld .bcard { filter: var(--shadow-piece); }
.bcard.joker .bcard-base { fill: #F3EEF9; stroke: #7A5AA6; }
.meld.target { cursor: pointer; }
.meld-ring { fill: rgba(255, 231, 163, .25); stroke: var(--p-yellow); stroke-width: 3.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-name, .seat-count { fill: #1F2328; }
.seat-sub { fill: #5B616B; }
.badge rect { fill: #5B616B; stroke: #FFFFFF; stroke-width: 1.5; }
.badge text { fill: #FFFFFF; }
.badge.one rect { fill: #B7791F; }
.badge.next rect { fill: #2F5D8A; }
.next-mark rect { fill: #2F5D8A; }
.next-mark text { fill: #FFFFFF; }
.order-arrow { fill: none; stroke: #FFF8EA; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* 吹き出し */
.bubble-bg { fill: #FFF3C4; stroke: #1F2328; stroke-width: 2.5; }
.bubble-bg.tail { stroke-width: 0; }
.bubble text { fill: #1F2328; }
.bubble.pop { animation: bubblepop .22s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes bubblepop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bubble.pop { animation: none; } }

/* 手札 */
.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; }
.in-hand .glow { fill: none; stroke-width: 5; }
.in-hand.can-meld .glow { stroke: #FFD34D; }
.in-hand.can-lay .glow { stroke: #7FE0A0; stroke-dasharray: 8 4; }
.in-hand.sel .piece { filter: var(--shadow-lift); }
.in-hand.sel .face > rect:first-child { stroke: #2F5D8A; stroke-width: 4; }
.in-hand.fresh .face > rect:first-child { stroke: #2F6DB5; 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; }
#actions .btn.claim { background: #FCE4F1; color: #1F2328; border-color: #B0457E; font-weight: 800; }
#actions .btn.claim:not(.sub) { background: #B0457E; color: #FFFFFF; }
.rule-list .field { margin-bottom: 12px; }
.result-box { inset: 6% 4% auto; max-height: 88%; overflow: auto; }
.result-box ol { display: block; }
.result-box li { font-size: 16px; display: grid; grid-template-columns: 14px auto 1fr; gap: 4px 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--line); }
.result-box li .dot { align-self: center; }
.result-box .who { font-weight: 700; white-space: nowrap; }
.result-box .what { font-size: 15px; }
.rc { display: inline-block; font-weight: 700; margin-right: 2px; }
.rc.red { color: #B23A3A; }
.rc.jk { color: #7A5AA6; }
.howto img { max-width: 640px; }
@media (max-width: 480px) { .article th, .article td { padding: 6px; font-size: 14px; } }
@media (prefers-color-scheme: dark) {
  #actions .btn.claim { background: #4A2238; color: #FCE4F1; border-color: #E07AB0; }
  #actions .btn.claim:not(.sub) { background: #E07AB0; color: #1F2328; }
  .rc.red { color: #E07A70; }
  .rc.jk { color: #C3A6EA; }
}
.result-box h2 { font-size: 1.35rem; }
@media (max-width: 520px) { .result-box h2 { font-size: 1.15rem; } .result-box li { font-size: 15px; } }
.dim-cover { fill: rgba(31, 35, 40, .42); pointer-events: none; }
@media (max-width: 520px) { .result-box { padding: 14px; inset: 3% 3% auto; max-height: 94%; } .result-box li { padding: 2px 0; } .result-box .what { font-size: 14px; } .result-box .note { font-size: 14px; } }
/* 上のバーの高さを一定に（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: 4; --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; } }
/* 上のバーの高さ ここまで */