/* クリベッジ 固有の見た目（共通は ../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） */

/* 札 */
.card .piece { filter: var(--shadow-piece); }
.card.lift .piece, .card.picked .piece { filter: var(--shadow-lift); }
#table.my-turn .hand .pick-able { cursor: pointer; }
#table .hand .card.dim { opacity: .45; }
.card-hit { fill: transparent; }
.pile-box { fill: rgba(0, 0, 0, .12); stroke: rgba(255, 255, 255, .28); stroke-width: 1.5; stroke-dasharray: 5 4; }
.pile-box.owned { stroke-width: 3; stroke-dasharray: none; }
.pile-label { fill: #F2EEE3; }
.count-hint { fill: #F2EEE3; }

/* ペグ */
.peg .piece { filter: var(--shadow-piece); }
.peg.lift .piece { filter: var(--shadow-lift); }

/* 枠・しるし */
.ring { fill: none; stroke-width: 4; pointer-events: none; }
.ring.sel { stroke: #FFE7A3; stroke-width: 5; }
.ring.can { stroke: #FFE7A3; stroke-width: 3; stroke-dasharray: 8 6; }
.ring.focus { stroke: #FFFFFF; stroke-width: 3; stroke-dasharray: 6 4; }
.marks .badge.tag rect { fill: #FFF3C4; stroke: #8A6A12; }
.marks .badge.tag text { fill: #1F2328; }
.marks .badge.pts rect { fill: #2E7D4F; stroke: #1E5A37; }
.marks .badge.pts text { fill: #FFFFFF; }

/* 席 */
.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; }
.cpu-seat .seat-box { fill: rgba(255, 248, 234, .14); stroke: rgba(255, 255, 255, .3); }
.cpu-seat .seat.on .seat-box { stroke: #FFF8EA; stroke-width: 3; }
.cpu-seat .seat-name { fill: #FFF8EA; }
.cpu-seat .seat-sub { fill: #E6E0D2; }
.seat-name { fill: #1F2328; }
.seat-sub { fill: #3D434C; }
.badge rect { fill: #FFFFFF; stroke: #1F2328; stroke-width: 1.5; }
.badge text { fill: #1F2328; }
.badge.dealer rect { fill: #5A3B1F; stroke: #5A3B1F; }
.badge.dealer text { fill: #FFFFFF; }
.badge.go rect { fill: #FFF3C4; stroke: #8A6A12; }

/* 操作ボタン */
#play .acts { justify-content: center; margin-bottom: 8px; }
#play .acts .btn { min-width: 10em; }

/* ショー（数える） */
.show-box { position: absolute; inset: 22% 4% auto; max-height: 76%; overflow: auto; background: var(--surface); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius); padding: 14px 16px; text-align: center; }
.result-box { inset: 22% 6% auto; max-height: 76%; overflow: auto; }
.show-box h2 { font-size: 1.15rem; margin: 0 0 6px; }
.show-cards { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 auto 4px; }
.show-cards .show-svg { width: min(300px, 70%); height: auto; }
.show-cards .st-label { font-size: 14px; color: var(--ink-sub); white-space: nowrap; }
.show-sum { font-weight: 800; margin: 6px 0; }
.show-items { list-style: none; margin: 4px auto 6px; padding: 0; max-width: 460px; text-align: left; }
.show-items li { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
.show-items .k { min-width: 6em; font-weight: 700; }
.show-items .p { margin-left: auto; font-weight: 800; white-space: nowrap; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.chip { display: inline-block; padding: 0 5px; border: 1px solid var(--line-strong); border-radius: 4px; background: #FFFFFF; color: #1F2328; font-weight: 800; font-size: 14px; line-height: 1.5; }
.chip.red { color: #B23A3A; }
.chip.st { border-color: #B8901C; border-width: 2px; }
.show-box .note { font-size: 14px; margin: 4px 0 8px; color: var(--ink); font-weight: 700; }
.claim { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.claim input { width: 4em; font-size: 20px; font-weight: 800; text-align: center; padding: 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink); }
.claim-label { font-weight: 800; }
.show-box .controls, .result-box .controls { justify-content: center; }

/* 結果 */
.result-box .detail { font-weight: 700; margin: 6px 0; }
.result-box table.score { margin: 0 auto 8px; border-collapse: collapse; font-size: 16px; }
.result-box table.score th, .result-box table.score td { padding: 4px 14px; border-bottom: 1px solid var(--line); text-align: right; }
.result-box table.score th { text-align: left; font-weight: 400; }
.rule-list .field { margin-bottom: 12px; }
@media (max-width: 480px) {
  .show-box, .result-box { inset: 20% 2% auto; padding: 10px 8px; max-height: 78%; }
  .show-items li { font-size: 14px; gap: 6px; }
  .show-items .k { min-width: 4.6em; }
  .chip { font-size: 13px; padding: 0 3px; }
  .article th, .article td { padding: 6px; font-size: 14px; }
  #play .controls { gap: 6px; } #play .btn.icon { padding: 0 8px; font-size: 14px; } #play .spacer { display: none; }
}
/* 上のバーの高さを一定に（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: 2; --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; } }
/* 上のバーの高さ ここまで */