/* 戦争（トランプ）固有の見た目（共通は ../common/base.css） */
#table { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#table text, #table .over, #table .fx, #table .center { 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, .center .card, .over .card { filter: var(--shadow-piece); }
.hand-pile.tap { cursor: pointer; }
.pile-label { fill: #F2EEE3; }
.pile-ring { fill: none; stroke: #FFD35C; stroke-width: 5; }
.pulse { animation: pulse 1.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 { 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; }
.bar-frame { fill: rgba(0, 0, 0, .25); stroke: rgba(255, 255, 255, .35); stroke-width: 1.2; }
.bar-mid { stroke: #FFF8EA; stroke-width: 2; stroke-dasharray: 3 2; }
.bar-num { fill: #FFF8EA; stroke: rgba(0, 0, 0, .55); stroke-width: 3; paint-order: stroke; }

/* 勝負の札 */
.center .card.tied .face > rect:first-child { stroke: #D9A21B; stroke-width: 4; }
.center .card.lose { opacity: .72; }
.win-ring { fill: none; stroke: #FFD35C; stroke-width: 5; }

/* 吹き出し */
.bubble rect { fill: #FFFFFF; stroke: #1F2328; stroke-width: 2.5; }
.bubble text { fill: #1F2328; }
.bubble.warn rect { fill: #FBF0DC; stroke: #9A6415; }
.bubble.warn text { fill: #6E470F; }

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

/* 操作バー・結果 */
#timer { font-variant-numeric: tabular-nums; margin-left: auto; font-weight: 700; color: var(--ink-sub); white-space: nowrap; }
.play-main { justify-content: center; }
.play-main #flip { min-width: 9em; }
.btn[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.result-box { inset: 14% 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; } }
@media (hover: none) { #table .keycap { display: none; } }
@media (max-width: 480px) {
  .result-box { inset: 4% 3% auto; padding: 14px 12px; }
  .result-box h2 { font-size: 1.3rem; margin-bottom: 8px; }
  .result-box li { font-size: 15px; }
}
/* 上のバーの高さを一定に（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: 2; --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: 1; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */