@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/jakarta.woff2) format("woff2");font-weight:400 800;font-display:swap}
:root{--k:1;--grape:#5426B2;--pink:#FF4A98;--mint:#58E9BF;--cream:#FFF8EC;--navy:#27194A;--lav:#D2C2F6;--line:rgba(255,248,236,.14);--mute:#BFB2E6;--trophy:#58E9BF;--wm:#FFF8EC;--face:#27194A;--card:rgba(255,255,255,.055);--card2:rgba(255,255,255,.09);
--f:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
html[data-theme=light]{--line:rgba(39,25,74,.16);--mute:#5B4F80;--trophy:#5426B2;--face:#FFF8EC;--wm:#27194A;--card:#fff;--card2:#F3ECFF}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--f);color:var(--cream);background:#160C33 radial-gradient(120% 70% at 50% -10%,#3A1F86 0%,#1E1046 45%,#120a2b 100%) fixed;overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-size:calc(var(--k)*16px)}
html[data-theme=light] body{color:var(--navy);background:#FFF8EC}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit}
#app{max-width:calc(var(--k)*1180px);margin:0 auto;padding:0 calc(var(--k)*20px);height:100%;display:flex;flex-direction:column}
.htop{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--k)*10px) 0 calc(var(--k)*4px);flex:0 0 auto}
.logo{display:block;width:calc(var(--k)*124px)}
.zl{display:block;width:100%;height:auto;overflow:visible}
.hr{display:flex;align-items:center;gap:calc(var(--k)*8px)}
.allg{font-size:calc(var(--k)*14px);font-weight:700;color:var(--mute);padding:0 calc(var(--k)*6px);min-height:calc(var(--k)*56px);display:flex;align-items:center}
.allg:hover{color:var(--cream)}
html[data-theme=light] .allg:hover{color:var(--navy)}
.tgl{flex:0 0 calc(var(--k)*44px);width:calc(var(--k)*44px);height:calc(var(--k)*44px);border-radius:50%;display:grid;place-items:center;border:calc(var(--k)*2.5px) solid var(--line);background:rgba(255,255,255,.04);color:var(--cream);cursor:pointer;transition:transform .15s,border-color .2s}
.tgl:hover{border-color:var(--mint)}
.tgl svg{width:calc(var(--k)*20px);height:calc(var(--k)*20px);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}
#tgl .sun{color:var(--mint)}#tgl .sun circle{fill:var(--mint)}#tgl .moon{display:none;fill:var(--grape);stroke:var(--grape)}
html[data-theme=light] .tgl{background:#fff;color:var(--navy)}
html[data-theme=light] #tgl .sun{display:none}html[data-theme=light] #tgl .moon{display:block}
#snd .soff{display:none}#snd.off .son{display:none}#snd.off .soff{display:block}#snd .son path:first-child,#snd .soff path:first-child{fill:currentColor}
.tgl:focus-visible,.ib:focus-visible,.cb:focus-visible,.btn:focus-visible,.mode:focus-visible,.lv:focus-visible,.allg:focus-visible{outline:calc(var(--k)*3px) solid var(--mint);outline-offset:calc(var(--k)*3px)}
main{flex:1 1 auto;min-height:0;position:relative}
.screen{display:none;height:100%}
.screen.on{display:flex;flex-direction:column}
#home,#levels{overflow-y:auto;padding-bottom:calc(var(--k)*24px)}
.hero{text-align:center;padding:calc(var(--k)*14px) 0 calc(var(--k)*18px)}
.kick{font-size:calc(var(--k)*12px);font-weight:800;letter-spacing:.16em;color:var(--mint)}
html[data-theme=light] .kick{color:var(--grape)}
h1{font-size:calc(var(--k)*44px);line-height:1.05;font-weight:800;letter-spacing:-.02em;margin-top:calc(var(--k)*6px)}
.sub{color:var(--mute);font-size:calc(var(--k)*16px);margin-top:calc(var(--k)*8px)}
.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--k)*18px)}
@media (max-width:1180px){.modes{grid-template-columns:repeat(2,1fr)}}
.narrow .modes{grid-template-columns:1fr;gap:calc(var(--k)*14px)}
.mode{display:flex;flex-direction:column;text-align:left;border:calc(var(--k)*2px) solid var(--line);background:var(--card);border-radius:calc(var(--k)*22px);overflow:hidden;cursor:pointer;transition:transform .15s,border-color .2s;padding:0}
.mode:hover{transform:translateY(-3px);border-color:var(--mint)}
.mode canvas{display:block;width:100%;aspect-ratio:16/10;background:#120a2b}
.narrow .mode{flex-direction:row;align-items:stretch}
.narrow .mode canvas{width:40%;aspect-ratio:auto;min-height:calc(var(--k)*130px)}
.mb{padding:calc(var(--k)*14px) calc(var(--k)*16px) calc(var(--k)*16px);display:flex;flex-direction:column;gap:calc(var(--k)*4px);flex:1}
.mb .cat{font-size:calc(var(--k)*11px);font-weight:800;letter-spacing:.14em;color:var(--mint)}
html[data-theme=light] .mb .cat{color:var(--grape)}
.mb h3{font-size:calc(var(--k)*22px);font-weight:800}
.mb .tag{font-size:calc(var(--k)*14px);font-weight:700}
.mb .d{font-size:calc(var(--k)*13px);color:var(--mute);line-height:1.4}
.mb .pg{margin-top:auto;padding-top:calc(var(--k)*8px);font-size:calc(var(--k)*13px);font-weight:800;color:var(--pink)}
.foot{text-align:center;color:var(--mute);font-size:calc(var(--k)*13px);margin-top:calc(var(--k)*18px)}
.bar{display:flex;align-items:center;gap:calc(var(--k)*10px);padding:calc(var(--k)*6px) 0 calc(var(--k)*8px);flex:0 0 auto}
.bt{flex:1;min-width:0}
.bt h2{font-size:calc(var(--k)*22px);font-weight:800;line-height:1.15}
.bt p{font-size:calc(var(--k)*13px);color:var(--mute);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib{flex:0 0 calc(var(--k)*56px);width:calc(var(--k)*56px);height:calc(var(--k)*56px);border-radius:calc(var(--k)*16px);border:calc(var(--k)*2px) solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer}
.ib svg{width:calc(var(--k)*24px);height:calc(var(--k)*24px);fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ib:hover{border-color:var(--mint)}
.ib:disabled{opacity:.35;cursor:default}
.pr{display:flex;gap:calc(var(--k)*8px)}
.how{color:var(--mute);font-size:calc(var(--k)*14px);margin:0 0 calc(var(--k)*12px)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--k)*76px),1fr));gap:calc(var(--k)*10px)}
.lv{height:calc(var(--k)*76px);border-radius:calc(var(--k)*16px);border:calc(var(--k)*2px) solid var(--line);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--k)*2px);cursor:pointer;font-weight:800;font-size:calc(var(--k)*22px)}
.lv:hover{border-color:var(--mint)}
.lv .s{display:flex;gap:calc(var(--k)*2px)}
.lv .s svg{width:calc(var(--k)*13px);height:calc(var(--k)*13px)}
.lv.done{background:var(--card2)}
.lv.lock{opacity:.4;cursor:default}
.lv.lock:hover{border-color:var(--line)}
.lv .lk{width:calc(var(--k)*18px);height:calc(var(--k)*18px);fill:none;stroke:currentColor;stroke-width:2.2}
.stage{flex:1 1 auto;min-height:0;position:relative;touch-action:none;user-select:none;-webkit-user-select:none}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.toast{position:absolute;left:50%;top:calc(var(--k)*12px);transform:translateX(-50%);background:rgba(18,10,43,.88);color:#FFF8EC;padding:calc(var(--k)*10px) calc(var(--k)*16px);border-radius:calc(var(--k)*14px);font-weight:700;font-size:calc(var(--k)*14px);opacity:0;transition:opacity .25s;pointer-events:none;max-width:90%;text-align:center}
.toast.on{opacity:1}
.ctl{flex:0 0 auto;padding:calc(var(--k)*8px) 0 calc(calc(var(--k)*10px) + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:calc(var(--k)*8px)}
.hint{font-size:calc(var(--k)*13px);color:var(--mute);font-weight:600;text-align:center}
.cbtns{display:flex;gap:calc(var(--k)*12px);justify-content:center}
.cb{min-width:calc(var(--k)*72px);height:calc(var(--k)*60px);border-radius:calc(var(--k)*18px);border:calc(var(--k)*2px) solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer;font-weight:800;font-size:calc(var(--k)*15px);padding:0 calc(var(--k)*16px)}
.cb svg{width:calc(var(--k)*28px);height:calc(var(--k)*28px);fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cb:hover{border-color:var(--mint)}
.cb:active{transform:scale(.96)}
.cb.hide{display:none}
.tiltb.act{background:var(--mint);color:var(--navy);border-color:var(--mint)}
.dlg{position:fixed;inset:0;background:rgba(10,5,25,.55);display:grid;place-items:center;z-index:20;padding:calc(var(--k)*20px)}
.dlg[hidden]{display:none}
.dcard{background:#24164f;border:calc(var(--k)*2px) solid rgba(255,255,255,.12);color:#FFF8EC;border-radius:calc(var(--k)*24px);padding:calc(var(--k)*22px) calc(var(--k)*22px) calc(var(--k)*18px);width:100%;max-width:calc(var(--k)*380px);text-align:center;box-shadow:0 calc(var(--k)*20px) calc(var(--k)*60px) rgba(0,0,0,.45);animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
html[data-theme=light] .dcard{background:#fff;color:var(--navy);border-color:rgba(39,25,74,.12)}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
.dstars{display:flex;justify-content:center;gap:calc(var(--k)*8px);margin-bottom:calc(var(--k)*6px)}
.dstars svg{width:calc(var(--k)*46px);height:calc(var(--k)*46px)}
.dstars svg.on{animation:pop .4s backwards}
.dcard h3{font-size:calc(var(--k)*24px);font-weight:800}
.dcard p{color:var(--mute);font-size:calc(var(--k)*15px);margin-top:calc(var(--k)*6px);line-height:1.4}
.dbtns{display:flex;flex-direction:column;gap:calc(var(--k)*8px);margin-top:calc(var(--k)*16px)}
.btn{height:calc(var(--k)*56px);border-radius:calc(var(--k)*16px);border:0;background:var(--pink);color:#fff;font-weight:800;font-size:calc(var(--k)*17px);cursor:pointer}
.btn.ghost{background:transparent;border:calc(var(--k)*2px) solid rgba(255,255,255,.22);color:inherit;font-size:calc(var(--k)*15px)}
html[data-theme=light] .btn.ghost{border-color:rgba(39,25,74,.25)}
.dbtns .row{display:flex;gap:calc(var(--k)*8px)}.dbtns .row .btn{flex:1}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}
.narrow #app{padding:0 calc(var(--k)*12px)}
.narrow h1{font-size:calc(var(--k)*34px)}
.narrow .hero{padding:calc(var(--k)*8px) 0 calc(var(--k)*12px)}
.narrow .logo{width:calc(var(--k)*104px)}
.narrow .bt h2{font-size:calc(var(--k)*19px)}
.short .hero .sub{display:none}

.gorow{display:flex;align-items:center;gap:calc(var(--k)*12px);flex-wrap:wrap;margin:0 0 calc(var(--k)*14px)}
.gorow.hide,.ask.hide,.mnote.hide{display:none}
.golink{display:inline-flex;align-items:center;justify-content:center;min-height:calc(var(--k)*56px);padding:0 calc(var(--k)*22px);border-radius:calc(var(--k)*16px);background:var(--pink);color:#fff;font-weight:800;font-size:calc(var(--k)*17px);text-decoration:none;flex:0 0 auto}
.golink:active{transform:scale(.97)}
.gonote{color:var(--mute);font-size:calc(var(--k)*13px);font-weight:600;flex:1 1 calc(var(--k)*160px)}
a.cb{text-decoration:none;color:inherit}
.cb.tiltgo{background:var(--pink);border-color:var(--pink);color:#fff;white-space:nowrap}
.cb.recb{border-color:var(--mint)}
.golink:focus-visible,.cb.tiltgo:focus-visible{outline:calc(var(--k)*3px) solid var(--mint);outline-offset:calc(var(--k)*3px)}
.ask{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,5,25,.5);z-index:5;padding:calc(var(--k)*20px)}
.askc{display:flex;flex-direction:column;align-items:center;gap:calc(var(--k)*12px);max-width:calc(var(--k)*340px);text-align:center;background:rgba(28,16,64,.94);border:calc(var(--k)*2px) solid rgba(255,255,255,.12);border-radius:calc(var(--k)*24px);padding:calc(var(--k)*22px)}
html[data-theme=light] .askc{background:#fff;color:var(--navy);border-color:rgba(39,25,74,.12)}
.btn.askb{height:calc(var(--k)*72px);font-size:calc(var(--k)*20px);padding:0 calc(var(--k)*26px);width:100%}
.askp{font-size:calc(var(--k)*14px);font-weight:600;color:var(--mute);margin:0}
.btn.askno{height:calc(var(--k)*48px);padding:0 calc(var(--k)*20px)}
.mnote{font-size:calc(var(--k)*13px);font-weight:700;color:var(--pink);text-align:center;margin:0;max-width:calc(var(--k)*360px)}

/* v3: Globe Maze canvas + tilt-step arrow */
#gl{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.stage.gl{background:radial-gradient(ellipse at 50% 42%,#3a2483 0%,#1c1040 55%,#0e0826 100%);border-radius:calc(var(--k)*22px)}
[data-theme=light] .stage.gl{background:radial-gradient(ellipse at 50% 42%,#5a3ab8 0%,#2b1a66 60%,#1a0f44 100%)}
.stage.gl #gl{display:block}
.stage.gl #cv{cursor:grab}
.tarrow{position:absolute;left:50%;top:calc(var(--k)*10px);width:calc(var(--k)*58px);height:calc(var(--k)*58px);margin-left:calc(var(--k)*-29px);border-radius:50%;background:rgba(39,25,74,.72);border:calc(var(--k)*2px) solid var(--mint);display:grid;place-items:center;opacity:0;transition:opacity .15s;pointer-events:none;z-index:3}
.tarrow svg{width:62%;height:62%;fill:none;stroke:#58E9BF;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .12s}
.tarrow.on{opacity:.6}
.tarrow.dD svg{transform:rotate(90deg)}.tarrow.dL svg{transform:rotate(180deg)}.tarrow.dU svg{transform:rotate(-90deg)}
.tarrow.go{border-color:#FF4A98}.tarrow.go svg{stroke:#FF4A98}
.tarrow.wait{border-style:dashed}

/* v3: short landscape phones: board left, controls right, no site header while playing */
@media (orientation:landscape){
 .short.playing .htop{display:none}
 .short #play.on{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;column-gap:calc(var(--k)*10px)}
 .short #play .pbar{grid-column:1/3;grid-row:1}
 .short #play .stage{grid-column:1;grid-row:2;min-height:0}
 .short #play .ctl{grid-column:2;grid-row:2;justify-content:center;max-width:calc(var(--k)*200px)}
 .short #play .cbtns{flex-wrap:wrap;max-width:calc(var(--k)*200px)}
}

/* ---- Don't Spill ---- */
.herobtns{display:flex;justify-content:center;margin-top:calc(var(--k)*16px)}
.btn.bigplay{height:calc(var(--k)*64px);padding:0 calc(var(--k)*34px);font-size:calc(var(--k)*20px);box-shadow:0 calc(var(--k)*6px) 0 #b8306c}
.btn.bigplay:active{transform:translateY(2px)}
.place{margin:calc(var(--k)*18px) 0 0}
.place h3{display:flex;align-items:center;gap:calc(var(--k)*10px);font-size:calc(var(--k)*20px);font-weight:800;margin-bottom:calc(var(--k)*10px)}
.place h3 .pe{width:calc(var(--k)*40px);height:calc(var(--k)*40px);border-radius:calc(var(--k)*12px);display:grid;place-items:center;background:var(--card2);font-size:calc(var(--k)*22px)}
.place h3 small{font-size:calc(var(--k)*13px);color:var(--mute);font-weight:700;margin-left:auto}
.place .pd{color:var(--mute);font-size:calc(var(--k)*13px);margin:-4px 0 calc(var(--k)*10px)}
.lv .ic{font-size:calc(var(--k)*12px);font-weight:700;letter-spacing:.02em;line-height:1}
#places .grid{grid-template-columns:repeat(5,1fr)}
.stage{border-radius:calc(var(--k)*22px);overflow:hidden;background:#1b1036}
#gl{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
.hud{position:absolute;left:calc(var(--k)*10px);right:calc(var(--k)*10px);top:calc(var(--k)*10px);pointer-events:none;display:flex;flex-direction:column;gap:calc(var(--k)*8px);z-index:2}
.prog{position:relative;height:calc(var(--k)*12px);border-radius:99px;background:rgba(18,10,43,.55);border:calc(var(--k)*1.5px) solid rgba(255,255,255,.25);margin:0 calc(var(--k)*22px) 0 calc(var(--k)*6px)}
.pfill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;background:linear-gradient(90deg,#58E9BF,#FF4A98)}
.pdot{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);font-size:calc(var(--k)*18px);filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.pend{position:absolute;right:calc(var(--k)*-24px);top:50%;transform:translateY(-50%);font-size:calc(var(--k)*18px)}
.chips{display:flex;flex-wrap:wrap;gap:calc(var(--k)*6px)}
.chip{display:flex;align-items:center;gap:calc(var(--k)*6px);background:rgba(18,10,43,.72);color:#FFF8EC;border-radius:99px;padding:calc(var(--k)*4px) calc(var(--k)*10px) calc(var(--k)*4px) calc(var(--k)*6px);font-size:calc(var(--k)*13px);font-weight:800;border:calc(var(--k)*1.5px) solid rgba(255,255,255,.18)}
.chip .e{font-size:calc(var(--k)*16px)}
.chip .bar2{width:calc(var(--k)*34px);height:calc(var(--k)*7px);border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}
.chip .bar2 i{display:block;height:100%;background:#58E9BF;border-radius:99px;transition:width .15s}
.chip.warn{border-color:#FF4A98}.chip.warn .bar2 i{background:#FF4A98}
.chip.bad{background:rgba(255,74,152,.85)}
.tiltmeter{position:absolute;left:50%;bottom:calc(var(--k)*12px);width:calc(var(--k)*120px);height:calc(var(--k)*10px);margin-left:calc(var(--k)*-60px);border-radius:99px;background:rgba(18,10,43,.55);border:calc(var(--k)*1.5px) solid rgba(255,255,255,.25);z-index:2;pointer-events:none}
.tmb{position:absolute;top:50%;left:50%;width:calc(var(--k)*16px);height:calc(var(--k)*16px);margin:calc(var(--k)*-8px) 0 0 calc(var(--k)*-8px);border-radius:50%;background:#58E9BF;box-shadow:0 0 0 2px rgba(18,10,43,.6)}
.ovl{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,5,25,.45);z-index:5;padding:calc(var(--k)*14px);overflow:auto}
.ovl.hide{display:none}
.ocard{display:flex;flex-direction:column;align-items:stretch;gap:calc(var(--k)*10px);width:100%;max-width:calc(var(--k)*360px);text-align:center;background:rgba(28,16,64,.95);color:#FFF8EC;border:calc(var(--k)*2px) solid rgba(255,255,255,.12);border-radius:calc(var(--k)*24px);padding:calc(var(--k)*18px)}
html[data-theme=light] .ocard{background:#fff;color:var(--navy);border-color:rgba(39,25,74,.12)}
.okick{font-size:calc(var(--k)*12px);font-weight:800;letter-spacing:.14em;color:var(--mint)}
html[data-theme=light] .okick{color:var(--grape)}
.ocard h3{font-size:calc(var(--k)*22px);font-weight:800}
.icarry{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--k)*6px)}
.icarry span{background:var(--card2);border-radius:99px;padding:calc(var(--k)*5px) calc(var(--k)*11px);font-weight:800;font-size:calc(var(--k)*14px)}
html[data-theme=light] .icarry span{background:#F3ECFF}
.itip{font-size:calc(var(--k)*14px);color:var(--mute);font-weight:600}
.ocard .golink{width:100%}
.golink.hide,.btn.hide,.askp.hide{display:none}
.dres{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--k)*6px);margin-top:calc(var(--k)*10px)}
.dres span{background:rgba(255,255,255,.08);border-radius:99px;padding:calc(var(--k)*5px) calc(var(--k)*10px);font-weight:800;font-size:calc(var(--k)*14px)}
html[data-theme=light] .dres span{background:#F3ECFF}
.ctl{padding:calc(var(--k)*6px) 0 calc(calc(var(--k)*8px) + env(safe-area-inset-bottom,0px))}
.cbtns:empty{display:none}
.short .ctl .hint{display:none}
.short .htop{padding:calc(var(--k)*4px) 0 0}
.short .pbar{padding:calc(var(--k)*2px) 0 calc(var(--k)*6px)}
.short .ocard{padding:calc(var(--k)*12px);gap:calc(var(--k)*7px)}
.short .itip{display:none}
.short .ocard h3{font-size:calc(var(--k)*18px)}
@media (orientation:landscape){
 .short.playing .htop{display:none}
 .short #play.on{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;column-gap:calc(var(--k)*10px)}
 .short #play .pbar{grid-column:1/3;grid-row:1}
 .short #play .stage{grid-column:1;grid-row:2;min-height:0}
 .short #play .ctl{grid-column:2;grid-row:2;justify-content:center;max-width:calc(var(--k)*170px)}
 .short #play .cbtns{flex-direction:column}
}
@media (max-width:420px){#places .grid{gap:calc(var(--k)*8px)}.lv{height:calc(var(--k)*66px);font-size:calc(var(--k)*20px)}}

.stage .toast{top:auto;bottom:calc(var(--k)*34px)}