/* セネト固有の見た目（共通は ../common/base.css） */
.board-wrap { position: relative; max-width: 680px; 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); }

/* マスの番号・道順 */
.sq-num { font: 700 10px var(--font); fill: #6B5A45; pointer-events: none; }
.route { fill: none; stroke: #8A6A3E; stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; stroke-linejoin: round; opacity: .75; pointer-events: none; }
.route-head { fill: none; stroke: #8A6A3E; 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.water .dest-ring { stroke: #1F5E8C; fill: rgba(170, 205, 230, .6); }
.dest.back .dest-ring { stroke: #8A6A3E; }
.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: 66px; 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: 150px; 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; }

/* 特別なマスの意味 */
.legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px 14px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-sub); }
.legend li { display: flex; gap: 8px; align-items: center; }
.legend svg { width: 34px; height: 34px; flex: none; border-radius: 4px; }
.legend b { color: var(--ink); }

@media (max-width: 480px) {
  .dicebox { gap: 8px; }
  .dice-tray { height: 54px; padding-right: 6px; }
  .dice-tray svg { width: 120px; }
  .dice-value { font-size: 26px; }
  .dicebox #roll { padding-left: 12px; padding-right: 12px; }
  .legend { font-size: 13px; }
}
.howto img[src*="sticks"] { max-width: 520px; }

/* Reserve the measured longest JA/EN message at 360/390px. */
.turnbar { --tb-msg-lines: 3; }
:root:lang(en) .turnbar { --tb-msg-lines: 4; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 2; } :root:lang(en) .turnbar { --tb-msg-lines: 3; } }