/* Star Ludo stage: board art + SVG field (15×15 units) + dice dock. Colours come from the
   theme (--sb-* and the seat colours passed in by ludo.js). */
.lu-board{position:absolute;inset:0;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.lu-board-art{position:absolute;inset:0;width:100%;height:100%}
.lu-inner{position:absolute}
.lu-field{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lu-cell{stroke:var(--sb-cell-line,rgba(0,0,0,.25));stroke-width:.05}
.lu-start,.lu-lane{stroke:rgba(255,255,255,.7);stroke-width:.06}
.lu-lane{opacity:.88}
.lu-home{stroke:rgba(255,255,255,.75);stroke-width:.06;stroke-linejoin:round}
.lu-star{pointer-events:none;opacity:.95}
.lu-yard{pointer-events:none}
.lu-socket{pointer-events:none}

.lu-token{cursor:default;outline:none}
.lu-token image{pointer-events:none}
.lu-shadow{fill:rgba(0,0,0,.35)}
.lu-ring{fill:none;stroke-width:.12;opacity:0}
.lu-token.legal{cursor:pointer}
.lu-token.legal .lu-ring{opacity:1;fill:rgba(255,255,255,.25);stroke:var(--sb-glow,#fff2a8);animation:lu-glow .9s ease-in-out infinite}
.lu-token.legal .lu-token-art{animation:lu-bob .9s ease-in-out infinite}
.lu-token:focus-visible .lu-ring{opacity:1;stroke:#fff;stroke-width:.18}
.lu-token.stacked .lu-token-art{transform:scale(.86);transform-box:fill-box;transform-origin:50% 90%}
@keyframes lu-glow{50%{stroke-width:.2;opacity:.65}}
@keyframes lu-bob{50%{transform:translateY(-.18px)}}

/* dock */
.lu-dice-wrap{width:74px;height:74px;display:grid;place-items:center;border-radius:20px;background:radial-gradient(circle,rgba(255,255,255,.22),rgba(0,0,0,0) 70%)}
.lu-dice{--lu-owner:#fff;width:58px;height:58px;padding:8px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);place-items:center;border-radius:14px;
  background:linear-gradient(145deg,#fff,#ece6dc);border:3px solid var(--lu-owner);box-shadow:0 4px 0 rgba(0,0,0,.3),inset 0 -4px 0 rgba(0,0,0,.08);transition:opacity .2s}
.lu-pip{width:10px;height:10px;border-radius:50%;background:transparent}
.lu-pip.on{background:radial-gradient(circle at 35% 35%,#555,#1b1b1b)}
.lu-dice.idle{opacity:.55}
.lu-dice.spent{opacity:.75}
.lu-dice.tumble{animation:lu-tumble .65s cubic-bezier(.3,.6,.4,1)}
.lu-dice.tumble .lu-pip{animation:lu-flicker .65s steps(6)}
@keyframes lu-tumble{0%{transform:rotate(0) scale(1)}25%{transform:rotate(200deg) scale(1.15) translateY(-10px)}60%{transform:rotate(330deg) scale(.95)}100%{transform:rotate(360deg) scale(1)}}
@keyframes lu-flicker{0%,100%{opacity:1}50%{opacity:.2}}
.lu-roll{width:150px;height:56px;background:var(--sb-art-actionButton) center/100% 100% no-repeat;color:var(--sb-paper,#fff);font:900 19px/1 var(--sb-font-display);text-shadow:0 2px 2px rgba(0,0,0,.6);filter:drop-shadow(0 3px 2px rgba(0,0,0,.35));transition:transform .12s,filter .2s}
.lu-roll:disabled{filter:grayscale(.85) brightness(.75);opacity:.75}
.lu-roll.ready{animation:lu-ready 1.1s ease-in-out infinite}
.lu-roll:active:not(:disabled){transform:scale(.94)}
@keyframes lu-ready{50%{transform:scale(1.06)}}