/* ダイヤモンドゲーム固有の見た目（共通は ../common/base.css） */
.board-wrap { position: relative; max-width: 560px; margin: 0 auto; }
/* スマホ: 盤を画面の幅いっぱいに（点の間隔を広げてタップしやすく） */
@media (max-width: 520px) { .board-wrap { margin: 0 -29px; } }
#board { display: block; width: 100%; height: auto; touch-action: manipulation; cursor: default; user-select: none; -webkit-user-select: none; }

/* 駒 */
.pc .piece { filter: var(--shadow-piece); transition: transform var(--dur); }
.pc.can { cursor: pointer; }
.pc.can .piece { filter: drop-shadow(0 0 0 transparent) var(--shadow-piece); }
.pc.sel .piece { filter: var(--shadow-lift); transform: translateY(-4px) scale(1.08); }
.pc.moving .piece { filter: var(--shadow-lift); }

/* 動かせる駒の小さな印（色だけに頼らない: 下に輪） */
.marks .dest circle { fill: rgba(47, 93, 138, .18); stroke: var(--accent); stroke-width: 3; }
.marks .dest.swap circle { stroke-dasharray: 4 3; }
.marks .dest text { font: 700 12px var(--font); fill: #FFFFFF; stroke: #1F2328; stroke-width: 3; paint-order: stroke; text-anchor: middle; }
.marks .landing { fill: rgba(255, 248, 234, .75); stroke: var(--accent); stroke-width: 2; }
.marks .trail path { fill: none; stroke-width: 3.5; stroke-dasharray: 1 7; stroke-linecap: round; }
.marks .trail .trail-bg { stroke: rgba(255, 248, 234, .7); stroke-width: 7; stroke-dasharray: none; }
.marks .trail circle { fill: none; stroke-width: 2.5; opacity: .8; }

/* 道すじ（動く前に見せる） */
.path .path-bg, .hover .path-bg { fill: none; stroke: #FFF8EA; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.path .path-line, .hover .path-line { fill: none; stroke: #1F2328; stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; stroke-linejoin: round; }
.path .step circle, .hover .step circle { fill: #1F2328; stroke: #FFF8EA; stroke-width: 2; }
.path .step.last circle, .hover .step.last circle { fill: var(--accent); }
.path .step text, .hover .step text { font: 700 11px var(--font); fill: #FFFFFF; text-anchor: middle; }
.path .over-mark, .hover .over-mark { fill: #FFF8EA; stroke: #1F2328; stroke-width: 1.5; }
.hover { opacity: .8; pointer-events: none; }

/* キーボードの枠 */
.kcursor { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-dasharray: 6 4; pointer-events: none; }

/* 手番の人の陣地を囲む枠と、持ち主の札 */
.turn-frame { opacity: 0; transition: opacity var(--dur); pointer-events: none; }
.turn-frame.on { opacity: 1; }
.seat-tag rect { fill: rgba(255, 248, 234, .94); stroke: rgba(40, 30, 20, .35); stroke-width: 1; }
.seat-tag text { font: 700 15px var(--font); fill: #1F2328; text-anchor: middle; }
.seat-tag.on rect { fill: #1F2328; stroke: #FFF8EA; stroke-width: 2; }
.seat-tag.on text { fill: #FFF8EA; }

#play .controls { margin-top: 8px; }
.howto img[src*="step"], .howto img[src*="king"] { max-width: 480px; }

/* 結果は盤の真ん中に（上がった陣地＝先端の三角形を隠さない） */
.board-wrap .result-box { inset: 31% 8% auto; }
/* 上のバーの高さを一定に（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: 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: 1; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */