:root{--leaf:#3ea85a;--leaf-deep:#22693a;--blue:#3c86e8;--blue-deep:#2153a8;--orange:#f0703c;--sun:#ffc83a;--sun-deep:#c98a10;--coral:#ff8b7a;--panel:#122c1ebd;--ink:#fffaf0;--btn:46px;color:var(--ink);font-family:Fredoka,Trebuchet MS,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0}body{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;background:#2d6b3a;overflow:hidden}#scene{touch-action:none;outline:none;width:100%;height:100%;display:block;position:fixed;top:0;bottom:0;left:0;right:0}.hud{pointer-events:none;padding:calc(env(safe-area-inset-top,0px) + 10px) calc(env(safe-area-inset-right,0px) + 12px) calc(env(safe-area-inset-bottom,0px) + 12px) calc(env(safe-area-inset-left,0px) + 12px);flex-direction:column;justify-content:space-between;transition:opacity .35s;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}body.in-menu .hud,body.in-menu .toast{opacity:0}body.in-menu .hud *{pointer-events:none!important}.hud-bottom{flex-direction:column;display:flex}.topbar{grid-template-columns:auto 1fr auto;align-items:center;gap:8px;display:grid}.tools{gap:8px;display:flex}.ibtn{pointer-events:auto;width:var(--btn);height:var(--btn);cursor:pointer;background:var(--leaf);color:#fff;box-shadow:0 4px 0 var(--leaf-deep), 0 8px 16px #00000038;border:0;border-radius:15px;place-items:center;transition:transform 80ms,background .2s,box-shadow 80ms;display:grid}.ibtn svg{width:24px;height:24px}.ibtn:active{box-shadow:0 1px 0 var(--leaf-deep);transform:translateY(3px)}.ibtn[aria-pressed=true]{box-shadow:0 1px 0 var(--leaf-deep), inset 0 0 0 3px #ffffff73;background:#2b8a47;transform:translateY(3px)}.ibtn .cross,.ibtn.muted .waves{display:none}.ibtn.muted .cross{display:inline}.turn{background:var(--panel);-webkit-backdrop-filter:blur(6px);letter-spacing:.01em;white-space:nowrap;text-overflow:ellipsis;border-radius:999px;justify-self:center;max-width:100%;padding:8px 16px;font-size:18px;font-weight:600;transition:opacity .3s;overflow:hidden}.turn:empty{opacity:0}.track{background:var(--panel);border-radius:999px;width:min(640px,100%);height:14px;margin:10px auto 0;position:relative;box-shadow:inset 0 0 0 2px #ffffff1f}.track .dots,.track .reach{position:absolute;top:0;bottom:0;left:0;right:0}.track .reach{background:#ffe06659;border-radius:999px;width:0;transition:left .3s,width .3s;left:0}.track i{border-radius:50%;width:8px;height:8px;margin:-4px 0 0 -4px;transition:left .6s;position:absolute;top:50%}.track i.snake{background:#ff5a4d;box-shadow:0 0 0 2px #5a1410}.track i.up{background:var(--sun);box-shadow:0 0 0 2px #6c4706}.track i.shield{background:#7ad7ff;box-shadow:0 0 0 2px #1d5a8a}.track i.sand{background:#c99a5c;border-radius:2px;box-shadow:0 0 0 2px #4a3218}.track i.river{background:#4fb4dd;border-radius:2px;box-shadow:0 0 0 2px #0f4a5a}.track i.mango{background:#ff9a10;width:6px;height:6px;margin:-3px 0 0 -3px;box-shadow:0 0 0 2px #fff3c4}.track .marker{border:3px solid #fff;border-radius:50%;width:18px;height:18px;margin:-9px 0 0 -9px;transition:left .25s ease-out;position:absolute;top:50%;box-shadow:0 2px 6px #00000059}.marker.p0,.chip.p0{background:var(--blue)}.marker.p1,.chip.p1{background:var(--orange)}.bottombar{grid-template-columns:1fr auto 1fr;align-items:end;gap:10px;display:grid}.card{background:var(--panel);-webkit-backdrop-filter:blur(6px);opacity:.82;border:3px solid #0000;border-radius:999px;justify-self:start;align-items:center;gap:9px;min-width:0;padding:8px 14px 8px 8px;transition:transform .25s,border-color .25s,opacity .25s;display:flex}.card.right{text-align:right;flex-direction:row-reverse;justify-self:end;padding:8px 8px 8px 14px}.card.active{border-color:var(--sun);opacity:1;transform:translateY(-4px)scale(1.03)}.chip{border:3px solid #ffffffd9;border-radius:50%;flex:none;width:30px;height:30px}.avatar{object-fit:contain;filter:drop-shadow(0 2px 3px #00000059);flex:none;width:44px;height:44px;transition:transform .25s}.card.active .avatar{animation:1.2s ease-in-out infinite hop}@keyframes hop{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-4px)rotate(-4deg)}}.role{letter-spacing:.08em;vertical-align:3px;background:#ffffff2e;border-radius:6px;padding:2px 6px;font-size:10px;font-weight:700}#card0 .role{background:#3c9cf08c}#card1 .role{background:#f0943c99}.card{overflow:hidden}.card>div{min-width:0}.card .name{white-space:nowrap;text-overflow:ellipsis;font-size:18px;font-weight:700;line-height:1.05;overflow:hidden}.card .where{opacity:.85;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.badge{min-width:0;font-size:16px;line-height:1}.badge:empty{display:none}.roll{pointer-events:auto;cursor:pointer;background:var(--sun);width:88px;height:88px;box-shadow:0 7px 0 var(--sun-deep), 0 14px 26px #00000059;border:0;border-radius:26px;place-items:center;transition:transform 80ms,box-shadow 80ms,filter .2s;display:grid;transform:rotate(-5deg)}.roll svg{width:56px;height:56px}.roll:not(:disabled):active{box-shadow:0 1px 0 var(--sun-deep);transform:translateY(6px)rotate(-5deg)}.roll:disabled{cursor:default;filter:saturate(.35)brightness(.8)}.roll.ready{animation:1.6s ease-in-out infinite nudge}@keyframes nudge{0%,to{transform:rotate(-5deg)}50%{transform:rotate(-5deg)translateY(-6px)}}.hint{opacity:.75;text-shadow:0 1px 4px #0009;align-self:center;margin-top:6px;font-size:12px;font-weight:600}@media (hover:none){.hint{display:none}}.toast{left:50%;top:calc(env(safe-area-inset-top,0px) + 92px);text-align:center;text-shadow:0 3px #173018,0 6px 16px #00000080;pointer-events:none;opacity:0;max-width:calc(100vw - 24px);padding:0 6px;font-size:clamp(20px,5vw,30px);font-weight:700;line-height:1.15;position:fixed;transform:translate(-50%)}.toast.good{color:var(--sun)}.toast.bad{color:var(--coral)}.toast.show{animation:2.4s forwards toast}@keyframes toast{0%{opacity:0;transform:translate(-50%)translateY(10px)scale(.85)}12%{opacity:1;transform:translate(-50%)scale(1.06)}22%{transform:translate(-50%)scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%)translateY(-8px)}}.bignum{pointer-events:none;opacity:0;color:#fff;-webkit-text-stroke:3px var(--sun);text-shadow:0 6px 0 var(--sun-deep), 0 12px 0 #6c4706, 0 20px 30px #0006;font-size:clamp(90px,22vw,150px);font-weight:700;position:fixed;top:40%;left:50%;transform:translate(-50%,-50%)}.bignum.show{animation:.95s cubic-bezier(.2,1.4,.4,1) forwards big}@keyframes big{0%{opacity:0;transform:translate(-50%,-50%)scale(.3)rotate(-20deg)}25%{opacity:1;transform:translate(-50%,-50%)scale(1.1)rotate(4deg)}45%{transform:translate(-50%,-50%)scale(1)rotate(0)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-70%)scale(.9)}}.overlay{padding:calc(env(safe-area-inset-top,0px) + 20px) 18px calc(env(safe-area-inset-bottom,0px) + 20px);background:radial-gradient(120% 80% at 50% 45%,#081e100d,#06160c8c);place-items:center;transition:opacity .4s;display:grid;position:fixed;top:0;bottom:0;left:0;right:0;overflow-y:auto}.overlay.hidden{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .4s,visibility 0s .4s}.panel{text-align:center;width:min(460px,100%)}.panel.wide{background:var(--panel);-webkit-backdrop-filter:blur(8px);border-radius:26px;width:min(560px,100%);padding:22px 20px}.title{color:var(--sun);text-shadow:0 4px #e7a51c,0 8px #b97a0c,0 12px #2f6a2c,0 20px 30px #00000073;margin:0;font-size:clamp(54px,15vw,96px);font-weight:700;line-height:.86;transform:rotate(-3deg)}.title span{color:#8ee07a;text-shadow:0 4px #49a24a,0 8px #2d7a34,0 12px #1b4d21,0 20px 30px #00000073;display:block}.subtitle{color:var(--sun);margin:0 0 12px;font-size:34px}.heroes{justify-content:center;align-items:center;gap:4px;display:flex}.hero{filter:drop-shadow(0 10px 14px #00000059);width:clamp(70px,20vw,128px);height:auto}.hero.aqua{transform-origin:50% 90%;animation:2.4s ease-in-out infinite bob}.hero.leorus{transform-origin:50% 90%;animation:2.4s ease-in-out -1.2s infinite bob}@keyframes bob{0%,to{transform:translateY(0)rotate(-4deg)}50%{transform:translateY(-10px)rotate(4deg)}}.n-aqua{color:#7fd0ff}.n-leorus{color:#ffc46a}.credit{color:var(--ink);text-align:left;-webkit-backdrop-filter:blur(6px);background:#0a1e3273;border-radius:16px;align-items:center;gap:10px;margin-top:18px;padding:8px 16px 8px 10px;font-size:14px;line-height:1.15;text-decoration:none;display:inline-flex;box-shadow:inset 0 0 0 1px #ffffff26}.credit img{width:40px;height:40px}.credit b{color:#7fd0ff}.credit em{letter-spacing:.04em;opacity:.85;font-style:normal;font-weight:600}.credit:hover{background:#0a1e3299}.win-avatar{object-fit:contain;filter:drop-shadow(0 10px 14px #0006);width:120px;height:120px;margin:0 auto 6px;animation:1.6s ease-in-out infinite bob;display:block}.stat b img{vertical-align:-6px;object-fit:contain;width:26px;height:26px;margin-right:6px}.lede{text-shadow:0 2px 10px #0000008c;max-width:34ch;margin:24px auto 22px;font-size:17px;font-weight:500;line-height:1.45}.btns{flex-direction:column;align-items:center;gap:13px;display:flex}.btn{font:inherit;cursor:pointer;color:#fff;background:var(--leaf);min-width:250px;box-shadow:0 6px 0 var(--leaf-deep), 0 12px 22px #0000004d;border:0;border-radius:18px;padding:13px 24px;font-size:22px;font-weight:600;transition:transform 80ms,box-shadow 80ms}.btn.blue{background:var(--blue);box-shadow:0 6px 0 var(--blue-deep), 0 12px 22px #0000004d}.btn.sun{background:var(--sun);color:#3b2600;box-shadow:0 6px 0 var(--sun-deep), 0 12px 22px #0000004d}.btn.ghost{background:#ffffff29;font-size:19px;box-shadow:0 6px #00000040}.btn:active{transform:translateY(5px);box-shadow:0 1px #00000059}.btn[hidden]{display:none}.fine{opacity:.8;text-shadow:0 2px 8px #0009;max-width:36ch;margin:22px auto 0;font-size:14px;line-height:1.5}button:focus-visible{outline-offset:3px;outline:4px solid #fff}.legend{text-align:left;gap:10px;margin:0 0 18px;padding:0;font-size:16px;line-height:1.35;list-style:none;display:grid}.legend li{align-items:flex-start;gap:12px;display:flex}.legend b{color:var(--sun);font-weight:600}.ic{border-radius:8px;flex:none;width:26px;height:26px;margin-top:1px}.ic.up{background:var(--sun)}.ic.snake{background:#ff5a4d;border-radius:50%}.ic.mango{background:#ff9a10;border-radius:50% 50% 45% 45%}.ic.shield{background:#7ad7ff;border-radius:6px 6px 50% 50%}.ic.sand{background:#c99a5c}.ic.river{background:#4fb4dd}.ic.six{background:#fff;position:relative}.ic.six:after{content:"6";color:#1b2a29;place-items:center;font-weight:700;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.wintitle{color:var(--sun);text-shadow:0 4px #b97a0c,0 8px #6c4706,0 16px 26px #00000073;margin:0;font-size:clamp(46px,12vw,78px);line-height:.95}.wintitle.small{font-size:40px}.stats{grid-template-columns:1fr 1fr;gap:12px;margin:0 0 24px;display:grid}.stat{background:var(--panel);border-top:5px solid var(--c);text-align:left;border-radius:18px;padding:12px 14px}.stat b{margin-bottom:4px;font-size:20px;display:block}.stat span{opacity:.92;font-size:14px;font-weight:500;line-height:1.55;display:block}@media (max-width:560px){:root{--btn:40px}.ibtn{border-radius:13px}.ibtn svg{width:21px;height:21px}.tools{gap:6px}.topbar{grid-template-columns:auto 1fr;grid-template-areas:"menu tools""turn turn";row-gap:8px}#menuBtn{grid-area:menu}.tools{grid-area:tools;justify-self:end}.turn{grid-area:turn;padding:6px 14px;font-size:16px}.track{margin-top:8px}.toast{top:calc(env(safe-area-inset-top,0px) + 128px)}.card{gap:6px;padding:6px 10px 6px 6px}.card.right{padding:6px 6px 6px 10px}.chip{width:22px;height:22px}.avatar{width:32px;height:32px}.role{display:none}.credit{margin-top:12px;font-size:13px}.card .name{font-size:15px}.card .where{font-size:12px}.roll{border-radius:22px;width:74px;height:74px}.roll svg{width:46px;height:46px}.bottombar{gap:6px}.btn{min-width:220px;font-size:20px}.stats{grid-template-columns:1fr}}@media (max-width:360px){.card .where{font-size:10.5px}.card .name{font-size:14px}.roll{border-radius:18px;width:62px;height:62px}.roll svg{width:40px;height:40px}.card,.card.right{gap:4px;padding:5px 7px}.bottombar{gap:5px}.chip{display:none}.avatar{width:26px;height:26px}}@media (max-height:500px) and (orientation:landscape){.lede{margin:12px auto}.title{font-size:52px}.btns{gap:9px}.btn{padding:9px 20px;font-size:19px}.fine{display:none}.hero{width:64px}.credit{margin-top:8px;padding:4px 10px 4px 6px}.credit img{width:28px;height:28px}.track{margin-top:6px}.roll{width:70px;height:70px}}@media (prefers-reduced-motion:reduce){.roll.ready,.hero,.win-avatar,.card.active .avatar{animation:none}}