/* ウルのゲーム固有の見た目（共通は ../common/base.css） */
.board-wrap { position: relative; max-width: 640px; margin: 0 auto; }
#board { width: 100%; height: auto; display: block; touch-action: manipulation; }
.choice .mini { width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; }

/* 置き場（スタート・ゴール） */
.tray .tray-bg { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.tray.on .tray-bg { stroke: var(--accent); stroke-width: 2.5; }
.tray .tray-label { font: 700 13px var(--font); fill: var(--ink-sub); }
.tray.on .tray-label { fill: var(--ink); }

/* 道順 */
.route { fill: none; stroke-width: 3.5; stroke-dasharray: 2 8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; pointer-events: none; }
.route-light { stroke: #FFFFFF; }
.route-dark { stroke: #1A130D; }
.route-head { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

/* 駒 */
.pc { cursor: default; }
.pc .body { filter: var(--shadow-piece); }
.pc .pick-ring { fill: none; stroke: none; }
.pc .badge { display: none; }
.pc.movable { cursor: pointer; }
.pc.movable .pick-ring { stroke: var(--accent); stroke-width: 4; fill: rgba(127, 168, 209, .25); }
.pc.movable .body { filter: var(--shadow-lift); }
.pc.movable .badge { display: inline; }
.pc .badge circle, .dest .dest-num-bg { fill: var(--btn); stroke: #FFFFFF; stroke-width: 1.5; }
.pc .badge text, .dest .dest-num { fill: #FFFFFF; font: 700 13px var(--font); text-anchor: middle; }
.danger circle { fill: #B23A3A; stroke: #FFFFFF; stroke-width: 1.5; }
.danger text { fill: #FFFFFF; font: 700 12px var(--font); text-anchor: middle; }

/* 行き先（明るい輪と番号） */
.dest { cursor: pointer; }
.dest .dest-ring { fill: rgba(255, 255, 255, .55); stroke: var(--accent); stroke-width: 3.5; stroke-dasharray: 6 4; }
.dest.cap .dest-ring { stroke: #B23A3A; }
.dest:hover .dest-ring { fill: rgba(255, 255, 255, .8); }

/* サイコロ */
.dicebox { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.dice-tray { display: flex; align-items: center; gap: 4px; height: 64px; padding: 4px 10px 4px 4px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: default; }
.dice-tray.ready { border: 2px solid var(--accent); cursor: pointer; }
.dice-tray svg { width: 200px; height: 100%; display: block; filter: var(--shadow-piece); }
.dice-value { font: 700 32px var(--font); min-width: 1.1em; text-align: center; }
#movebtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; justify-content: center; }
#movebtns:empty { display: none; }

@media (max-width: 480px) {
  .dicebox { gap: 8px; }
  .dice-tray { height: 52px; padding-right: 6px; }
  .dice-tray svg { width: 150px; }
  .dice-value { font-size: 26px; }
  .dicebox #roll { padding-left: 12px; padding-right: 12px; }
}
.howto img[src*="enter"], .howto img[src*="capture"], .howto img[src*="off"] { max-width: 420px; }
.howto img[src*="dice"] { max-width: 520px; }

/* Reserve the measured longest JA/EN message at 360/390px. */
.turnbar { --tb-msg-lines: 3; }
@media (min-width: 375px) { :root:lang(ja) .turnbar { --tb-msg-lines: 2; } }
/* First-player rolls can tie 50 times. Keep the board still; scroll the log. */
.turnbar .message { height: calc(var(--tb-msg-lines) * 1lh); overflow-y: auto; }