.page{--ludo-red: #E1352A;--ludo-green: #2EAD52;--ludo-yellow: #F6C21A;--ludo-blue: #1E5BD6;--ludo-paper: #FFFFFF}.game-title,.ludo-roll,.ludo-log{font-family:var(--font-round)}.disc--light,.disc--dark,.disc--amber,.disc--walnut{border:3px solid var(--ludo-paper);box-shadow:0 0 0 1px #231c1680}.disc--light{background:var(--ludo-yellow)}.disc--dark{background:var(--ludo-blue)}.disc--amber{background:var(--ludo-red)}.disc--walnut{background:var(--ludo-green)}.board-wrap{display:grid;justify-items:center;gap:var(--space-3)}.ludo-dice{display:flex;justify-content:center}.ludo-roll{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:6px 18px 6px 8px;border:2px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);font-weight:600}.ludo-roll:not([disabled]){border-color:var(--color-accent);color:var(--color-accent)}.ludo-roll[disabled]{cursor:default;color:var(--color-text-muted)}.ludo-die{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--color-surface-2);color:var(--color-text);font-size:2.4rem;line-height:1}.ludo-die--empty:before{content:"?";font-family:var(--font-heading);font-size:1.3rem;color:var(--color-text-muted)}.ludo-roll--light .ludo-die{background:var(--ludo-yellow);color:var(--color-text)}.ludo-roll--dark .ludo-die{background:var(--ludo-blue);color:var(--ludo-paper)}.ludo-roll--amber .ludo-die{background:var(--ludo-red);color:var(--ludo-paper)}.ludo-roll--walnut .ludo-die{background:var(--ludo-green);color:var(--color-text)}.ludo{display:grid;grid-template-columns:repeat(15,1fr);grid-auto-rows:minmax(0,1fr);gap:1px;width:100%;max-width:clamp(300px,calc(100vh - 300px),540px);aspect-ratio:1;background:var(--color-border);border:2px solid var(--color-text);border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow:hidden;user-select:none;-webkit-user-select:none}.cell{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;background:var(--ludo-paper)}.cell--track{background:var(--ludo-paper)}.cell--safe:after{content:"";width:40%;height:40%;border-radius:50%;border:2px solid var(--color-text);opacity:.5}.cell--centre{background:var(--color-bg-2)}.cell--centre{background-image:conic-gradient(from 225deg,var(--ludo-yellow) 0 25%,var(--ludo-blue) 25% 50%,var(--ludo-red) 50% 75%,var(--ludo-green) 75%);background-size:300% 300%}.cell--centre:nth-child(97){background-position:0 0}.cell--centre:nth-child(98){background-position:50% 0}.cell--centre:nth-child(99){background-position:100% 0}.cell--centre:nth-child(112){background-position:0 50%}.cell--centre:nth-child(113){background-position:50% 50%}.cell--centre:nth-child(114){background-position:100% 50%}.cell--centre:nth-child(127){background-position:0 100%}.cell--centre:nth-child(128){background-position:50% 100%}.cell--centre:nth-child(129){background-position:100% 100%}.cell--base.cell--light,.cell--column.cell--light,.cell--start.cell--light{background:var(--ludo-yellow)}.cell--base.cell--dark,.cell--column.cell--dark,.cell--start.cell--dark{background:var(--ludo-blue)}.cell--base.cell--amber,.cell--column.cell--amber,.cell--start.cell--amber{background:var(--ludo-red)}.cell--base.cell--walnut,.cell--column.cell--walnut,.cell--start.cell--walnut{background:var(--ludo-green)}.cell--spot:before{content:"";position:absolute;top:12%;right:12%;bottom:12%;left:12%;border-radius:50%;background:var(--ludo-paper)}.cell--idle{opacity:.45}.cell.last{outline:3px solid var(--color-accent);outline-offset:-3px;z-index:1}.token{position:relative;width:92%;height:92%;flex:none;padding:0;border-radius:50%;border:2px solid var(--ludo-paper);box-shadow:0 0 0 1.5px #231c168c,0 2px 4px #231c164d;z-index:2}.token:before{content:"";position:absolute;top:-12px;right:-12px;bottom:-12px;left:-12px;border-radius:50%}.token[disabled]{cursor:default}.token--light{background:var(--ludo-yellow)}.token--dark{background:var(--ludo-blue)}.token--amber{background:var(--ludo-red)}.token--walnut{background:var(--ludo-green)}.token.movable{outline:3px solid var(--color-text);outline-offset:2px;z-index:3}.token:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px;z-index:4}.cell:has(.token+.token) .token{width:60%;height:60%}.token:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%}.token.hop{animation:ludo-hop 90ms var(--ease)}@keyframes ludo-hop{0%{transform:translateY(-35%) scale(1.15)}to{transform:none}}.token.arrived{animation:rh-pop .24s var(--ease)}.token.captured{animation:rh-blink .26s var(--ease) 2}.ludo-die--rolling{animation:ludo-tumble .35s linear}@keyframes ludo-tumble{0%{transform:rotate(0) scale(.9)}50%{transform:rotate(180deg) scale(1.15)}to{transform:rotate(360deg)}}.ludo-die--rolled{animation:rh-pop .22s var(--ease)}.cell--spot .token{width:140%;height:140%}.ludo-log{width:100%;max-width:540px;margin:0;padding:0;list-style:none;display:grid;gap:2px;font-size:.85rem;color:var(--color-text-muted);max-height:7.5em;overflow-y:auto}.ludo-log li{display:flex;align-items:center;gap:8px}.ludo-log .disc{width:12px;height:12px;border-width:2px}@media (max-width: 480px){.token{width:110%;height:110%}}@media (max-width: 420px){.token{border-width:1px}.token.movable{outline-width:2px}.cell.last{outline-width:2px;outline-offset:-2px}}