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

/* 山・台札 */
.stock-slot { fill: rgba(0, 0, 0, .14); stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; }
.slot-empty { fill: rgba(0, 0, 0, .10); stroke: rgba(255, 255, 255, .25); stroke-width: 1.5; stroke-dasharray: 5 4; }
.stock .card, .pile .card, .field .card, .over .card { filter: var(--shadow-piece); }
.pile-label { fill: #F2EEE3; }
.pile .under { opacity: .95; }
.pile-hit { fill: transparent; cursor: pointer; }
.pile-ring { fill: none; stroke: #FFD35C; stroke-width: 5; }
.pulse { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.keycap rect { fill: rgba(255, 248, 234, .9); stroke: rgba(0, 0, 0, .35); stroke-width: 1.2; }
.keycap text, .keycap path { fill: #1F2328; }

/* 名前 */
.name-tag rect { fill: rgba(255, 248, 234, .94); stroke: rgba(0, 0, 0, .3); stroke-width: 1.2; }
.name-tag text { fill: #1F2328; }

/* あなたの場札 */
.field .card.mine { cursor: pointer; }
.field .card.sel .piece { filter: var(--shadow-lift); }
.field .card.sel .face > rect:first-child { stroke: #FFD35C; stroke-width: 5; }
.ok-mark circle { fill: #2E7D4F; stroke: #FFFFFF; stroke-width: 2; }
.ok-mark path { fill: none; stroke: #FFFFFF; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.choose-ring { fill: none; stroke: #FFD35C; stroke-width: 4; stroke-dasharray: 7 4; }
.shake { animation: shake .28s ease-in-out; }
@keyframes shake { 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-4px); } }
.cpu-reach .piece { filter: var(--shadow-lift); }

/* 吹き出し（CPUの「おそかった」など） */
.bubble rect { fill: #FFFFFF; stroke: #1F2328; stroke-width: 2.5; }
.bubble text { fill: #1F2328; }
.bubble.warn rect { fill: #FBE3E0; stroke: #B23A3A; }
.bubble.warn text { fill: #8E2A2A; }
.bubble.good rect { fill: #E4F3E8; stroke: #2E7D4F; }
.bubble.good text { fill: #1F5A38; }
.slap-hand { fill: #FFF8EA; stroke: #1F2328; stroke-width: 2.5; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) { .pulse, .shake { animation: none; } }

/* 操作バー・結果 */
#timer { font-variant-numeric: tabular-nums; margin-left: auto; font-weight: 700; color: var(--ink-sub); }
.score-chip { display: inline-block; padding: 0 10px; border-radius: 999px; background: var(--accent-soft); font-size: 15px; margin-left: 6px; }
.result-box { inset: 12% 6% auto; }
.result-box li { font-size: 16px; }
.rule-list .field { margin-bottom: 12px; }
.howto img { max-width: 640px; }
@media (max-width: 480px) { .article th, .article td { padding: 6px; 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: 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; } }
/* 上のバーの高さ ここまで */