/* ルドー固有の見た目（共通は ../common/base.css） */
.board-wrap { position: relative; max-width: 640px; margin: 0 auto; }
.pc { cursor: default; }
.pc .pick-ring { fill: none; stroke: none; }
.pc .badge { display: none; }
.pc.movable { cursor: pointer; }
.pc.movable .pick-ring { stroke: var(--accent); stroke-width: 3; fill: rgba(47, 93, 138, .15); }
.pc.movable .piece { filter: var(--shadow-lift); transform: translateY(-3px); }
.pc.movable .badge { display: inline; }
.pc .badge circle { fill: var(--accent); stroke: #fff; stroke-width: 1.5; }
.pc .badge text { fill: #fff; font: 700 10px var(--font); text-anchor: middle; }

.dicebox { display: flex; align-items: center; gap: 12px; }
#dice { width: 60px; height: 60px; cursor: pointer; }
#dice.rolling { animation: wobble .12s linear infinite; }
@keyframes wobble { 0% { transform: rotate(-8deg) translateY(-2px); } 50% { transform: rotate(8deg) translateY(1px); } 100% { transform: rotate(-8deg) translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { #dice.rolling { animation: none; } }
#movebtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#movebtns:empty { display: none; }



/* 盤の中央のサイコロ */
#board-dice .dice-ring { fill: rgba(255, 248, 234, .85); stroke: rgba(40, 30, 20, .35); stroke-width: 1.5; }
#board-dice.ready { cursor: pointer; }
#board-dice.ready .dice-ring { stroke: var(--accent); stroke-width: 4; }
#board-dice.rolling image { animation: wobble .12s linear infinite; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { #board-dice.rolling image { animation: none; } }


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

#dice { transition: transform 40ms linear; }

.howto img[src*="enter"], .howto img[src*="capture"], .howto img[src*="star"] { max-width: 440px; }
/* 上のバーの高さを一定に（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: 3; --tb-st-lines: 1; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 3; --tb-st-lines: 1; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */