/* バックギャモン固有の見た目（共通は ../common/base.css） */
#board { user-select: none; -webkit-user-select: none; touch-action: manipulation; display: block; width: 100%; height: auto; }
.board-wrap { max-width: 640px; margin: 0 auto; position: relative; }
#board.rot { max-width: 460px; margin: 0 auto; }

/* 盤の上の名札: 2人の名前・残りのピップ数・点。番の人を濃く */
.scoreboard { display: flex; align-items: stretch; gap: 8px; max-width: 640px; margin: 0 auto 8px; }
.scoreboard .tag { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 4px 10px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.scoreboard .tag.on { border-color: var(--accent); background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }
.scoreboard .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scoreboard .pip { color: var(--ink-sub); font-size: 14px; font-variant-numeric: tabular-nums; }
.scoreboard .pts { margin-left: auto; font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.scoreboard .match { align-self: center; color: var(--ink-sub); font-size: 14px; text-align: center; white-space: nowrap; }
.piece-dot { width: 20px; height: 20px; border-radius: 50%; flex: none; border: 2px solid var(--ink-sub); display: inline-block; vertical-align: -4px; margin-right: 6px; }
.piece-dot.c0 { background: #ECE5D5; }
.piece-dot.c1 { background: #2B2C31; }
.scoreboard .piece-dot { margin-right: 0; }

/* ポイント（三角）: 赤茶と生成りを交互に */
.tri.odd { fill: #8E3B2B; opacity: .9; }
.tri.even { fill: #F4E8CC; opacity: .92; }
.tray-bg { fill: rgba(30, 18, 8, .42); }
.pnum { font: 600 10.5px var(--font); fill: rgba(255, 244, 225, .85); }

/* 駒 */
.ck { pointer-events: none; }
.ck.up { filter: drop-shadow(0 6px 4px rgba(0,0,0,.3)); }
.ck-count { font: 800 19px var(--font); pointer-events: none; }
.ck.c0 .ck-count { fill: #1F2328; }
.ck.c1 .ck-count { fill: #F4EFE4; }
.slab { stroke-width: 1.5; }
.slab.c0 { fill: #EFE8D8; stroke: #7C7262; }
.slab.c1 { fill: #2E2F35; stroke: #0E0F12; }

/* サイコロとキューブ */
.die { cursor: pointer; filter: drop-shadow(0 1.5px 1px rgba(0,0,0,.28)); }
.die.used { opacity: .32; }
.die-hit { fill: transparent; }
.cube-body { fill: #FBF8F0; stroke: #5B4A35; stroke-width: 2; }
.cube-num { font: 800 17px var(--font); fill: #1F2328; }
.cube { filter: drop-shadow(0 1.5px 1px rgba(0,0,0,.3)); }
.cube.off { opacity: .45; }

/* 手番の人の色を盤のふちに */
.turn-frame { fill: none; stroke-width: 4; opacity: 0; pointer-events: none; transition: opacity var(--dur); }
.turn-frame.c0 { stroke: #FBF8F0; opacity: .95; }
.turn-frame.c1 { stroke: #1F2328; opacity: .9; }
.status .piece-dot { width: 22px; height: 22px; vertical-align: -5px; }

/* 印: 動かせる駒・選んだ駒・行き先・ヒント・直前の手・CPUの駒・キーボードの枠 */
.mark { pointer-events: none; }
.mark.src { fill: none; stroke: #5FA8FF; stroke-width: 4; }
.mark.sel { fill: none; stroke: #FFF8EA; stroke-width: 6; }
.mark.cpu { fill: rgba(255, 248, 234, .35); stroke: #FFF8EA; stroke-width: 5; }
.mark.dest-tri { fill: rgba(47, 93, 138, .30); stroke: #2F5D8A; stroke-width: 2.5; stroke-dasharray: 6 4; }
.mark.dest-area { fill: rgba(47, 93, 138, .35); stroke: #9CC4F0; stroke-width: 3; stroke-dasharray: 6 4; }
.mark.dest circle { fill: #2F5D8A; stroke: #FFF8EA; stroke-width: 2.5; }
.mark.dest.multi circle { fill: #4A78A6; }
.mark.dest.hit circle { fill: #C8453B; }
.mark.dest text { font: 800 15px var(--font); fill: #fff; }
.arrow { fill: none; stroke-width: 4; stroke-linecap: round; pointer-events: none; }
.arrow.hint { stroke: #3B82D6; stroke-dasharray: 8 6; }
.arrow-head.hint { fill: #3B82D6; }
.arrow.lastmove { stroke: rgba(255, 236, 190, .9); stroke-dasharray: 2 7; }
.arrow-head.lastmove { fill: rgba(255, 236, 190, .9); }
.arrow-num circle { fill: #3B82D6; }
.arrow-num.lastmove circle { fill: rgba(90, 60, 30, .85); }
.arrow-num text { font: 800 13px var(--font); fill: #fff; }
.arrow-head, .arrow-num { pointer-events: none; }
.cursor { fill: none; stroke: #FFD24A; stroke-width: 4; stroke-dasharray: 7 5; pointer-events: none; }
.hit { fill: transparent; cursor: pointer; }
#fx, #over, #marks { pointer-events: none; }

/* ボタン */
.main-actions #roll, .main-actions #done { min-width: 150px; }
.main-actions { justify-content: center; }
#play .controls + .controls { margin-top: 8px; }

.board-wrap .callout { padding: 6px 18px; font-size: clamp(16px, 3.8vw, 22px); top: 50%; }
.stage { padding: 12px; }
@media (max-width: 560px) {
  .stage { margin-left: -8px; margin-right: -8px; } /* 盤だけ左右に広げる（ページの余白は共通の16px。D1） */
  .stage { padding: 6px; }
  .scoreboard { gap: 4px; }
  .scoreboard .tag { padding: 2px 6px; gap: 0 6px; font-size: 14px; }
  .scoreboard .pts { font-size: 1rem; }
  .pnum { font-size: 17px; } /* ポイント番号をスマホ幅で約11px（元は約7px。ふちの幅20に2けたが収まる最大。D9） */
  .scoreboard .match { font-size: 14px; white-space: normal; max-width: 2.2em; line-height: 1.2; } /* 「3点／先取」の2行（D9: 14px以上） */
  :root:lang(en) .scoreboard .match { max-width: 3.6em; } /* 英語は「Match／to 3」の2行 */
  .main-actions .btn { flex: 1 1 auto; }
  .main-actions #roll, .main-actions #done { min-width: 0; }
}

.result-box .score { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; }
.result-box { inset: 16% 6% auto; padding: 16px 20px; z-index: 5; }
.result-box h2 { font-size: 1.35rem; margin-bottom: 6px; }
.offer-box { inset: 22% 6% auto; }
@media (max-width: 520px) { .result-box { inset: 10% 0 auto; } .result-box .controls .btn { padding: 0 12px; } }

.howto img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.howto figcaption { text-align: center; }
/* 上のバーの高さを一定に（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: 1; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */