/* おいちょかぶ固有の見た目（共通は ../common/base.css） */
#table { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
#table text { pointer-events: none; }

/* 場札の枠 */
.field-box { fill: rgba(0, 0, 0, .10); stroke: rgba(255, 255, 255, .28); stroke-width: 1.5; stroke-dasharray: 6 5; transition: stroke var(--dur), fill var(--dur); }
.field-tag circle { fill: #FFF8EA; stroke: #1F2328; stroke-width: 1.5; }
.field-tag text { fill: #1F2328; }
.field.pickable { cursor: pointer; }
.field.pickable .field-box { stroke: #FFF8EA; stroke-width: 3; stroke-dasharray: none; fill: rgba(255, 255, 255, .10); }
.field.pickable .field-tag circle { fill: var(--accent); stroke: #FFF8EA; }
.field.pickable .field-tag text { fill: #FFFFFF; }
.field.focus .field-box { stroke: #FFF8EA; stroke-width: 4; stroke-dasharray: none; fill: rgba(255, 255, 255, .14); }
.field.dim { opacity: .45; }
.field { transition: opacity var(--dur); }

/* 点の札 */
.pts rect { fill: #FFF8EA; stroke: #1F2328; stroke-width: 1.5; }
.pts text { fill: #1F2328; }
.pts.strong rect { fill: #1F2328; stroke: #FFF8EA; }
.pts.strong text { fill: #FFF8EA; }

/* 親の場所の札 */
.dealer-tag.on rect { fill: #1F2328; stroke: #FFF8EA; stroke-width: 2; }
.dealer-tag.on text { fill: #FFF8EA; }

/* 席 */
.seat-box { fill: #FFF8EA; stroke: rgba(0, 0, 0, .3); stroke-width: 1.5; }
.seat.on .seat-box { stroke: #1F2328; stroke-width: 4; }
.seat-name, .seat-score { fill: #1F2328; }
.seat-sub { fill: #5B616B; }
.delta { font: 800 22px var(--font); text-anchor: middle; paint-order: stroke; stroke: #FFFFFF; stroke-width: 4px; }

/* 札のめくり・持ち上げ */
.card .flip { transform-box: fill-box; transform-origin: center; }
.card.lift .piece { filter: var(--shadow-lift); }

/* 操作 */
#actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; min-height: var(--tap); align-items: center; }
#actions .btn.bet { min-width: 76px; padding: 0 12px; }
#actions .btn.bet[data-n="0"] { background: transparent; color: var(--accent); }
#actions .note { color: var(--ink-sub); font-size: 14px; }

.howto img[src*="draw"], .howto img[src*="yaku"] { max-width: 560px; }

/* 花札の絵のクレジット */
.site-footer .credit { margin: 0 0 8px; font-size: 14px; }

/* 花札のときの畳の上でも卓の文字が読めるよう縁取り */
.deck-hanafuda #table text[fill="#F2EEE3"], .deck-hanafuda #table text[fill="#E3DDCF"] { paint-order: stroke; stroke: rgba(0, 0, 0, .35); stroke-width: 3px; }
/* 上のバーの高さを一定に（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; } }
/* 上のバーの高さ ここまで */