.sound-toggle{background:var(--btn,#00000040);width:36px;min-width:36px;height:36px;color:var(--ink,#fff);cursor:pointer;border:0;border-radius:50%;place-items:center;padding:0;display:inline-grid}.sound-toggle svg{width:20px;height:20px}.sound-toggle[aria-pressed=true]{opacity:.7}.sound-toggle:focus-visible{outline:3px solid var(--focus,#ffd54a);outline-offset:2px}:root{--ink:#f4f1ea;--btn:#ffffff1f;--focus:#ffd54a;--dialog:#fdfdfb;--dialog-ink:#16181a;--red:#e53935;--green:#2e9d4f;--yellow:#f2b90f;--blue:#1e6fd9;--board:#f7ecd2;--line:#7a5a36;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--dialog:#1f2622;--dialog-ink:#eef2ec}}:root[data-theme=dark]{--dialog:#1f2622;--dialog-ink:#eef2ec}*{box-sizing:border-box}html,body{height:100%;margin:0}body{color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:radial-gradient(70% 55% at 50% 42%,#fff4d624,#0000 70%),radial-gradient(120% 95% at 50% 45%,#0000 55%,#0000008c),linear-gradient(#3a2a1d,#1c140d);font:14px/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#app.ludo{grid-template-rows:auto auto 1fr auto;justify-items:center;gap:6px;height:100dvh;padding:8px 10px 10px;display:grid}.ludo-bar{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.ludo-bar .group{flex-wrap:wrap;gap:3px;display:flex}.btn{font:inherit;color:var(--ink);background:var(--btn);cursor:pointer;border:0;border-radius:9px;min-height:34px;padding:7px 12px;box-shadow:inset 0 1px #ffffff1f,0 2px 6px #0000004d}.btn:focus-visible,.pawn:focus-visible,.ludo-dice:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.btn.primary{color:#fff;background:#1d6b3c;font-weight:700}.sound-toggle{width:34px;height:34px}.ludo-status{text-align:center;text-shadow:0 1px 2px #0009;min-height:1.3em;margin:0;font-weight:700}.ludo-msg{opacity:.9;text-align:left;flex:1;min-height:1.3em;margin:0;font-size:13px}.ludo-stage{place-items:center;width:100%;min-height:0;display:grid;container-type:size}.ludo-board{--size:min(100cqw, 100cqh, 620px);width:var(--size);height:var(--size);--cell:calc(var(--size) / 11.6);padding:calc(var(--cell) * .3);background:radial-gradient(ellipse 70% 60% at 45% 35%, #ffffff59, transparent 70%), repeating-linear-gradient(95deg, #78501e0d 0 2px, transparent 2px 12px), var(--board);box-shadow:0 0 0 calc(var(--cell) * .16) #8a5a2b, 0 0 0 calc(var(--cell) * .22) #4a2c14, 0 22px 44px #0009;border-radius:16px;grid-template-rows:repeat(11,1fr);grid-template-columns:repeat(11,1fr);display:grid}.cell{place-items:center;display:grid;position:relative}.cell.track:before,.cell.goal:before,.cell.yard:before,.cell.hub:before{content:"";border:2px solid var(--line);background:#fffaf0;border-radius:50%;position:absolute;inset:10%;box-shadow:inset 0 2px 4px #0000002e}.cell.red{--c:var(--red)}.cell.green{--c:var(--green)}.cell.yellow{--c:var(--yellow)}.cell.blue{--c:var(--blue)}.cell.start:before{background:radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--c), #fff 35%), var(--c));border-color:color-mix(in srgb, var(--c), #000 35%)}.cell.goal:before{background:color-mix(in srgb, var(--c), #fff 55%);border-color:color-mix(in srgb, var(--c), #000 25%)}.cell.yard:before{background:color-mix(in srgb, var(--c), #fff 45%);border-color:color-mix(in srgb, var(--c), #000 30%);inset:6%}.cell.hub:before{background:conic-gradient(var(--red) 0 25%, var(--blue) 0 50%, var(--yellow) 0 75%, var(--green) 0);opacity:.9;border:0;border-radius:12%;inset:4%}.pawn{z-index:1;cursor:default;filter:drop-shadow(0 3px 2px #00000073);background:0 0;border:0;width:64%;height:82%;padding:0;position:relative}.pawn:before{content:"";background:radial-gradient(ellipse at 35% 30%, color-mix(in srgb, var(--p), #fff 45%), var(--p) 55%, color-mix(in srgb, var(--p), #000 40%));border-radius:50% 50% 22% 22%/60% 60% 18% 18%;height:58%;position:absolute;bottom:0;left:12%;right:12%}.pawn:after{content:"";aspect-ratio:1;background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--p), #fff 60%), var(--p) 55%, color-mix(in srgb, var(--p), #000 35%));border-radius:50%;position:absolute;top:2%;left:26%;right:26%}.pawn.red{--p:var(--red)}.pawn.green{--p:var(--green)}.pawn.yellow{--p:var(--yellow)}.pawn.blue{--p:var(--blue)}.pawn.movable{cursor:pointer;filter:drop-shadow(0 0 6px #fff)drop-shadow(0 3px 2px #00000073);animation:.7s ease-in-out infinite alternate ludo-hop}@keyframes ludo-hop{to{transform:translateY(-12%)}}.cell>.pawn+.pawn{position:absolute;transform:translate(18%,-10%)}.ludo-footer{align-items:center;gap:14px;width:min(100%,620px);display:flex}.ludo-dice{--d:62px;width:var(--d);height:var(--d);cursor:pointer;background:linear-gradient(145deg,#fff,#e8e2d6);border:0;border-radius:14px;flex:none;padding:8px;box-shadow:inset 0 -4px #0000001f,0 6px #b8ae9c,0 10px 18px #00000073}.ludo-dice:disabled{cursor:default;filter:saturate(.6)brightness(.85)}.ludo-dice.ready{animation:.9s ease-in-out infinite alternate ludo-glow}@keyframes ludo-glow{to{box-shadow:inset 0 -4px #0000001f,0 6px #b8ae9c,0 0 0 4px #ffd54acc,0 0 22px #ffd54ab3}}.ludo-dice.rolling{animation:.33s linear infinite ludo-roll}@keyframes ludo-roll{50%{transform:rotate(18deg)translateY(-6px)}}.ludo-dice .face{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);width:100%;height:100%;display:grid}.ludo-dice .face i{aspect-ratio:1;border-radius:50%;place-self:center;width:70%}.ludo-dice .face i.on{background:radial-gradient(circle at 35% 30%,#555,#111)}.ludo-dice.red .face i.on{background:radial-gradient(circle at 35% 30%,#ff7b6b,#b71c1c)}.overlay{z-index:20;background:#00000073;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.overlay[hidden]{display:none}.overlay.later{animation:1.1s step-end both ludo-later}@keyframes ludo-later{0%{visibility:hidden}}.dialog{background:var(--dialog);color:var(--dialog-ink);text-align:center;border-radius:14px;flex-direction:column;gap:12px;max-width:340px;padding:20px 24px;display:flex;box-shadow:0 10px 40px #00000073}.dialog h2{margin:0;font-size:20px}@media (max-height:480px){#app.ludo{grid-template:"bar stage foot""status stage foot"1fr/1fr auto 1fr;align-items:start;gap:4px 8px;padding:6px 8px}.ludo-bar{flex-direction:column;grid-area:bar;align-items:flex-start;max-width:100px}.ludo-status{text-align:left;grid-area:status;justify-self:start;font-size:12px}.ludo-stage{grid-area:stage;width:min(100dvh - 12px,100vw - 196px);height:100%}.ludo-footer{flex-direction:column;grid-area:foot;align-self:end;align-items:center;width:auto}.ludo-msg{text-align:center;font-size:11px}.btn{min-height:28px;padding:4px 9px}.ludo-dice{--d:52px}}@media (prefers-reduced-motion:reduce){.pawn.movable,.ludo-dice.ready,.ludo-dice.rolling,.overlay.later{animation:none}}