/* ポーカー固有の見た目（共通は ../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; } }

/* 札 */
.card .piece { filter: var(--shadow-piece); }
.card.lift .piece, .card.picked .piece { filter: var(--shadow-lift); }
.card.dim { opacity: .55; }
.card .flip { transform-box: fill-box; transform-origin: center; }
.myhand.can-pick .hit, .myhand.can-pick .card { cursor: pointer; }
.hit { fill: transparent; }
.stock-slot { fill: rgba(0, 0, 0, .14); stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; }
.pile .card .piece { filter: none; }
.pile-label { fill: #F2EEE3; }
.pot-label { fill: #FFF8EA; }
.pot-sub { fill: #E7E0CF; }
.key-num { fill: #F2EEE3; }
.key-num.keep { fill: #A8E6BC; }
.key-num.swap { fill: #FFD3CC; }
.hint-ring { fill: none; pointer-events: none; }
.hint-ring.keep { stroke: #7FD49A; stroke-width: 4; }
.hint-ring.swap { stroke: #FFE7A3; stroke-width: 2.5; stroke-dasharray: 6 5; }

/* 点のしるし */
.tk { fill: #2F5D8A; stroke: #FFFFFF; stroke-width: 2; filter: var(--shadow-piece); }
.tk-ring { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; stroke-dasharray: 4 3; }
.tk-empty { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.fly-amount { fill: #FFFFFF; }

/* 席 */
.seat-frame { fill: rgba(0, 0, 0, .10); stroke: rgba(255, 255, 255, .16); stroke-width: 1.2; }
.seat.on .seat-frame { fill: rgba(255, 231, 163, .12); stroke: #FFE7A3; stroke-width: 3; stroke-dasharray: 8 5; }
.seat-frame.win { stroke: #7FD49A; stroke-width: 4; stroke-dasharray: none; fill: rgba(127, 212, 154, .14); }
.seat.folded .card, .seat.out .card { opacity: .5; }
.seat-info { fill: #FFF8EA; }
.nametag rect { fill: #FFF8EA; stroke: rgba(0, 0, 0, .35); stroke-width: 1.5; }
.nametag text { fill: #1F2328; }
.nametag .mk { fill: #FFFFFF; }
.nametag.on rect { stroke: #1F2328; stroke-width: 3; }

/* 吹き出し */
.bubble rect { fill: #FFF8EA; stroke: rgba(0, 0, 0, .35); stroke-width: 1.5; }
.bubble text { fill: #1F2328; }
.bubble.think rect { fill: #E9E4D8; }
.bubble.bet rect, .bubble.raise rect { fill: #DCE8F5; stroke: #2F5D8A; stroke-width: 2; }
.bubble.fold rect { fill: #E9E4D8; stroke-dasharray: 4 3; }
.bubble.fold text { fill: #5B616B; }
.bubble.win rect { fill: #2E7D4F; stroke: #FFFFFF; stroke-width: 2; }
.bubble.win text { fill: #FFFFFF; }
.bubble.lose rect { fill: #5B616B; stroke: #FFFFFF; stroke-width: 1.5; }
.bubble.lose text { fill: #FFFFFF; }
.bubble.swap rect { fill: #B23A3A; stroke: #FFFFFF; stroke-width: 2; }
.bubble.swap text { fill: #FFFFFF; }
.bubble.hand-label rect { fill: #FFF8EA; stroke: #1F2328; stroke-width: 2; }
.bubble.hand-label.big rect { fill: #FFE7A3; stroke: #B7791F; stroke-width: 3; }
.bubble.hand-label.win rect { fill: #2E7D4F; stroke: #FFFFFF; }
.bubble.hand-label.win text { fill: #FFFFFF; }
.bubble.hand-label.lose rect { fill: #E9E4D8; }

/* 下の帯 */
.bottom-bg { fill: rgba(0, 0, 0, .28); stroke: rgba(255, 255, 255, .25); stroke-width: 1; }
.b-main, .b-round { fill: #FFF8EA; }

/* 操作 */
#actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; min-height: 52px; align-items: center; }
#actions .btn { min-height: 50px; font-size: 18px; }
#actions .note { color: var(--ng); font-size: 15px; font-weight: 700; }
#actions .btn.draw { min-width: 170px; }
#actions .btn .k { font-size: 14px; padding: 0 4px; margin-left: 4px; opacity: .8; border-radius: 4px; border: 1px solid currentColor; background: transparent; color: inherit; font-family: inherit; }
@media (hover: none) { #actions .btn .k { display: none; } }
.subs { margin-top: 8px; }

/* ヒント */
#hint { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; background: var(--bg); }
#hint p { margin: 0 0 8px; }
#hint .note { font-size: 14px; color: var(--ink-sub); }
#hint .opts { list-style: none; padding: 0; margin: 0 0 8px; }
#hint .opts li { padding: 6px 8px; border-radius: 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
#hint .opts li.best { background: var(--accent-soft); font-weight: 700; }
#hint .o-odds { color: var(--ink-sub); font-size: 15px; }
#hint .controls { margin-top: 4px; }

/* 役の一覧 */
.yaku { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.yaku-title { font-size: 1.05rem; margin: 0 0 6px; }
.yaku-sub { font-size: 14px; font-weight: 400; color: var(--ink-sub); margin-left: 6px; }
.yaku-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.yaku-list li { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 4px 6px; border-radius: 6px; border: 2px solid transparent; }
.yaku-list .y-name { font-weight: 700; font-size: 15px; grid-column: 1; grid-row: 1; }
.yaku-list .mini { grid-column: 2; grid-row: 1 / span 2; width: 112px; height: auto; }
.yaku-list .y-note { font-size: 14px; color: var(--ink-sub); grid-column: 1; grid-row: 2; }
.yaku-list .y-pts { display: none; }
.yaku.practice .yaku-list .y-pts { display: inline; font-size: 14px; font-weight: 700; color: var(--accent); grid-column: 1; grid-row: 1; justify-self: end; }
.yaku-list li.now { border-color: var(--accent); background: var(--accent-soft); }
.yaku-list .card.dim { opacity: .4; }
@media (max-width: 600px) { .yaku-list { grid-template-columns: 1fr; } }

.result-box { inset: 12% 8% auto; max-height: 80%; overflow: auto; }
.result-box ol li.me { font-weight: 700; }
.result-box ol li.best, .result-box li.best { color: var(--ok); font-weight: 700; }
.field.off { opacity: .5; }
.howto img { max-width: 640px; }
/* 上のバーの高さを一定に（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: 3; --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: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */