@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;--navy:#27194A;--lav:#D2C2F6;--cream:#FFF8EC;--trophy:#58E9BF;--wm:#FFF8EC;--face:#27194A;--f:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--u:calc(var(--k)*1px)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#0f0a24}
body{font-family:var(--f);color:var(--cream);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-size:calc(var(--u)*16);user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:none}
button,a{font-family:inherit;color:inherit;text-decoration:none}
button{cursor:pointer;border:0;background:none}
:focus-visible{outline:calc(var(--u)*3) solid var(--mint);outline-offset:calc(var(--u)*2)}
.hide{display:none!important}
#stage{position:fixed;inset:0}
#cv{display:block;width:100%;height:100%}
#shade{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(20,10,50,.82) 0%,rgba(20,10,50,.35) 45%,rgba(20,10,50,.75) 100%);transition:opacity .5s}
html.playing #shade{opacity:0}
.screen{position:fixed;inset:0;display:none}
.screen.on{display:flex}
/* home */
#home{flex-direction:column;align-items:center;padding:calc(var(--u)*8) calc(var(--u)*18) calc(var(--u)*18);padding-top:max(calc(var(--u)*8),env(safe-area-inset-top));overflow-y:auto;touch-action:pan-y;gap:calc(var(--u)*12)}
.htop{width:100%;max-width:calc(var(--u)*900);display:flex;align-items:center}
.logo{display:block;width:calc(var(--u)*112);min-height:44px;display:flex;align-items:center}
.zl{display:block;width:100%;height:auto;overflow:visible}
.hero{text-align:center;max-width:calc(var(--u)*560);margin-top:calc(var(--u)*4)}
.kick{font-size:calc(var(--u)*12);font-weight:800;letter-spacing:.14em;color:var(--mint)}
h1{font-size:calc(var(--u)*46);font-weight:800;line-height:1.02;letter-spacing:-.02em;text-shadow:0 4px 24px rgba(0,0,0,.45)}
h2{font-size:calc(var(--u)*26);font-weight:800;line-height:1.1;color:var(--navy)}
.sub{font-size:calc(var(--u)*15);line-height:1.45;margin-top:calc(var(--u)*8);color:#EDE6FF;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*10);width:100%;max-width:calc(var(--u)*860)}
html.narrow .levels{grid-template-columns:1fr 1fr;gap:calc(var(--u)*8)}
.lv{position:relative;display:flex;align-items:center;gap:calc(var(--u)*12);text-align:left;padding:calc(var(--u)*12);border-radius:calc(var(--u)*18);background:rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:calc(var(--u)*1.5) solid rgba(255,255,255,.22);min-height:calc(var(--u)*76);transition:transform .15s,border-color .2s}
html:not(.narrow) .lv,html.narrow .lv{flex-direction:column;align-items:flex-start}
html.narrow .lv{gap:calc(var(--u)*7);padding:calc(var(--u)*9);min-height:0;border-radius:calc(var(--u)*16)}
html.narrow .lv .th{width:100%;height:calc(var(--u)*50)}
html.narrow .lv b{font-size:calc(var(--u)*15)}
html.narrow .lv small{font-size:calc(var(--u)*11.5)}
html.narrow .lv .lk{right:calc(var(--u)*14);top:calc(var(--u)*14)}
.lv:hover{border-color:var(--mint)}
.lv:active{transform:scale(.98)}
.lv .th{flex:0 0 auto;width:calc(var(--u)*64);height:calc(var(--u)*52);border-radius:calc(var(--u)*12);background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
html:not(.narrow) .lv .th{width:100%;height:calc(var(--u)*62)}
.th1{background:linear-gradient(180deg,#9fd3f5 0 38%,#3f7a3a 38% 48%,#2e7fa3 48% 100%)}
.th2{background:linear-gradient(180deg,#5d6876 0 40%,#7d8b8f 40% 46%,#2c4a5c 46% 100%)}
.th3{background:linear-gradient(180deg,#f2c79a 0 30%,#3d5c2d 30% 55%,#3d8a8f 55% 70%,#e8f4f2 70% 76%,#3d8a8f 76% 100%)}
.th4{background:linear-gradient(180deg,#d9e9ef 0 14%,rgba(0,0,0,0) 14%),linear-gradient(78deg,#2c4a2e 0 16%,#6e6a62 16% 40%,rgba(0,0,0,0) 40%),linear-gradient(-78deg,#2c4a2e 0 16%,#6e6a62 16% 40%,rgba(0,0,0,0) 40%),linear-gradient(90deg,rgba(0,0,0,0) 0 44%,#e9f3f0 44% 47%,rgba(0,0,0,0) 47% 100%) 0 70%/100% 6% no-repeat,linear-gradient(180deg,#3f8c84,#2a6b66)}
.th5{background:radial-gradient(circle at 80% 22%,#f3f0e4 0 5%,rgba(0,0,0,0) 6%),radial-gradient(circle at 18% 44%,#ffe9c8 0 2.5%,rgba(0,0,0,0) 3.5%),radial-gradient(circle at 40% 46%,#dfe9ff 0 2.5%,rgba(0,0,0,0) 3.5%),radial-gradient(circle at 63% 44%,#ffe9c8 0 2.5%,rgba(0,0,0,0) 3.5%),linear-gradient(90deg,rgba(0,0,0,0) 0 17%,rgba(255,233,200,.55) 17% 19.5%,rgba(0,0,0,0) 19.5% 39%,rgba(223,233,255,.5) 39% 41.5%,rgba(0,0,0,0) 41.5% 62%,rgba(255,233,200,.55) 62% 64.5%,rgba(0,0,0,0) 64.5%) 0 100%/100% 46% no-repeat,linear-gradient(180deg,#0a1230 0 34%,#1c2440 34% 40%,#141b30 40% 52%,#0c2638 52% 100%)}
.th6{background:radial-gradient(ellipse at 42% 76%,#f4fbff 0 7%,rgba(0,0,0,0) 8%),radial-gradient(ellipse at 66% 66%,#e6f4fa 0 4%,rgba(0,0,0,0) 5%),linear-gradient(72deg,#f1f6f8 0 9%,#6b7880 9% 26%,rgba(0,0,0,0) 26%),linear-gradient(-72deg,#f1f6f8 0 11%,#5f6d76 11% 28%,rgba(0,0,0,0) 28%),linear-gradient(180deg,#dfe8ee 0 36%,#9cb6c3 36% 42%,#2a6d84 42% 100%)}
.lv b{display:block;font-size:calc(var(--u)*17);font-weight:800}
.lv small{display:block;font-size:calc(var(--u)*12.5);color:#E4DAFF;line-height:1.35;margin-top:calc(var(--u)*2)}
.lv .st{display:flex;gap:calc(var(--u)*2);margin-top:calc(var(--u)*5)}
.lv .st svg{width:calc(var(--u)*16);height:calc(var(--u)*16)}
.lv.lock{opacity:.6}
.lv .lk{position:absolute;right:calc(var(--u)*12);top:calc(var(--u)*12);width:calc(var(--u)*20);height:calc(var(--u)*20);fill:none;stroke:#fff;stroke-width:2.2}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:calc(var(--u)*48);padding:0 calc(var(--u)*22);border-radius:999px;background:var(--pink);color:#fff;font-weight:800;font-size:calc(var(--u)*16);box-shadow:0 6px 20px rgba(255,74,152,.35);transition:transform .12s}
.btn:active{transform:scale(.97)}
.btn.big{min-height:calc(var(--u)*56);font-size:calc(var(--u)*18);padding:0 calc(var(--u)*28)}
.btn.ghost{background:#fff;color:var(--grape);border:calc(var(--u)*2) solid var(--lav);box-shadow:none}
.btn.grape{background:var(--grape);box-shadow:0 6px 20px rgba(84,38,178,.35)}
.how{font-size:calc(var(--u)*13);color:#D8CCFF;text-align:center;max-width:calc(var(--u)*520);line-height:1.45}
/* hud */
#play{pointer-events:none}
#play>*{pointer-events:auto}
.hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:calc(var(--u)*6);padding:calc(var(--u)*8) calc(var(--u)*10);padding-top:max(calc(var(--u)*8),env(safe-area-inset-top));pointer-events:none}
.hud>*{pointer-events:auto}
.ic{width:calc(var(--u)*44);height:calc(var(--u)*44);border-radius:50%;display:grid;place-items:center;background:rgba(20,12,48,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:calc(var(--u)*1.5) solid rgba(255,255,255,.22);flex:0 0 auto}
.ic svg{width:calc(var(--u)*20);height:calc(var(--u)*20);fill:#fff}
.ic svg .st,.ic svg.st{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.ic svg .fl{fill:#fff;stroke:none}
.pill{display:flex;align-items:center;gap:calc(var(--u)*5);height:calc(var(--u)*34);padding:0 calc(var(--u)*11);border-radius:999px;background:rgba(20,12,48,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:calc(var(--u)*1.5) solid rgba(255,255,255,.18);font-size:calc(var(--u)*15);font-variant-numeric:tabular-nums}
.pill svg{width:calc(var(--u)*17);height:calc(var(--u)*17);fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.pill svg.ring{stroke:var(--pink);stroke-width:3.2}
.pill small{font-size:calc(var(--u)*11.5);color:var(--mint);font-weight:700}
#hTime.low{border-color:var(--pink);background:rgba(255,74,152,.35)}
.hearts{gap:calc(var(--u)*2);margin-left:auto}
.hearts svg{width:calc(var(--u)*18);height:calc(var(--u)*18);stroke:none}
.nav{position:absolute;left:50%;top:calc(max(calc(var(--u)*8),env(safe-area-inset-top)) + var(--u)*50);transform:translateX(-50%);display:flex;align-items:center;gap:calc(var(--u)*6);padding:calc(var(--u)*5) calc(var(--u)*12) calc(var(--u)*5) calc(var(--u)*7);border-radius:999px;background:rgba(20,12,48,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:calc(var(--u)*13);font-weight:700;white-space:nowrap;pointer-events:none}
.nav svg{width:calc(var(--u)*22);height:calc(var(--u)*22);fill:var(--mint);transition:transform .1s linear}
.nav.dock svg{fill:var(--pink)}
.wind{position:absolute;right:calc(var(--u)*10);top:calc(max(calc(var(--u)*8),env(safe-area-inset-top)) + var(--u)*50);display:flex;flex-direction:column;align-items:center;gap:0;font-size:calc(var(--u)*10);font-weight:800;letter-spacing:.1em;pointer-events:none}
.wind svg{width:calc(var(--u)*30);height:calc(var(--u)*30);fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.wind.gust svg{stroke:var(--mint)}
.wind.gust span{color:var(--mint)}
.side{position:absolute;right:calc(var(--u)*10);bottom:calc(var(--u)*150 + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:calc(var(--u)*8)}
.dash{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:flex-end;gap:calc(var(--u)*14);padding-bottom:calc(var(--u)*10 + env(safe-area-inset-bottom));pointer-events:none}
.wheelWrap{width:calc(var(--u)*124);height:calc(var(--u)*124);pointer-events:auto;touch-action:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));cursor:grab}
#wheel{width:100%;height:100%;display:block;transition:transform .05s linear}
.thr{pointer-events:auto;touch-action:none;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*3);width:calc(var(--u)*48);padding-bottom:calc(var(--u)*6)}
.thrT{position:relative;width:calc(var(--u)*16);height:calc(var(--u)*86);border-radius:999px;background:rgba(20,12,48,.55);border:calc(var(--u)*1.5) solid rgba(255,255,255,.25);overflow:visible}
.thrT i{position:absolute;left:0;right:0;bottom:0;border-radius:999px;background:linear-gradient(0deg,var(--mint),var(--pink));height:50%}
.thrT b{position:absolute;left:50%;width:calc(var(--u)*30);height:calc(var(--u)*14);margin-left:calc(var(--u)*-15);border-radius:calc(var(--u)*5);background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.4);bottom:50%;transform:translateY(50%)}
.thr span{font-size:calc(var(--u)*17);font-weight:800;font-variant-numeric:tabular-nums;text-shadow:0 1px 4px rgba(0,0,0,.6);line-height:1}
.thr small{font-size:calc(var(--u)*10);font-weight:700;color:#E4DAFF;text-shadow:0 1px 4px rgba(0,0,0,.6)}
html.short .wheelWrap{width:calc(var(--u)*100);height:calc(var(--u)*100)}
html.short .thrT{height:calc(var(--u)*64)}
html.short .side{bottom:calc(var(--u)*12);right:calc(var(--u)*10)}
html.short .side{flex-direction:row}
#toast{position:absolute;left:50%;bottom:calc(var(--u)*150 + env(safe-area-inset-bottom));transform:translate(-50%,10px);opacity:0;transition:.25s;background:rgba(20,12,48,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:calc(var(--u)*9) calc(var(--u)*16);border-radius:999px;font-size:calc(var(--u)*14);font-weight:700;white-space:nowrap;pointer-events:none;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
html.short #toast{bottom:calc(var(--u)*120)}
#toast.on{opacity:1;transform:translate(-50%,0)}
#pop{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.6);opacity:0;font-size:calc(var(--u)*44);font-weight:800;color:#fff;text-shadow:0 4px 0 var(--grape),0 8px 26px rgba(0,0,0,.45);pointer-events:none;white-space:nowrap;text-align:center;line-height:1}
#pop small{display:block;font-size:calc(var(--u)*17);margin-top:calc(var(--u)*8);color:var(--mint);text-shadow:0 2px 8px rgba(0,0,0,.6)}
#pop.on{animation:pop 1.5s ease-out forwards}
#pop.bad{color:#fff;text-shadow:0 4px 0 #b4174f,0 8px 26px rgba(0,0,0,.45)}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) scale(1)}}
#flash{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 calc(var(--u)*90) rgba(255,74,152,0);transition:box-shadow .5s}
#flash.on{box-shadow:inset 0 0 calc(var(--u)*90) rgba(255,74,152,.75);transition:none}
/* overlays */
.ovl{position:fixed;inset:0;display:grid;place-items:center;padding:calc(var(--u)*18);background:rgba(15,8,40,.45);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:20;overflow-y:auto;touch-action:pan-y}
.card{width:100%;max-width:calc(var(--u)*420);background:#fff;color:var(--navy);border-radius:calc(var(--u)*24);padding:calc(var(--u)*22);display:flex;flex-direction:column;align-items:stretch;gap:calc(var(--u)*10);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.card .kick{color:var(--grape)}
.card .tip{font-size:calc(var(--u)*15);line-height:1.45;color:#3d2f66}
.card .how{color:#5B4F80;font-size:calc(var(--u)*13.5)}
.card .note{font-size:calc(var(--u)*13);color:#7b3a5c;line-height:1.4}
.card .btn{width:100%}
.lnk{min-height:44px;font-weight:700;color:var(--grape);font-size:calc(var(--u)*15)}
.row{display:flex;gap:calc(var(--u)*8);flex-wrap:wrap}
.row .btn{flex:1 1 40%;width:auto;padding:0 calc(var(--u)*12)}
.stars{display:flex;justify-content:center;gap:calc(var(--u)*6)}
.stars svg{width:calc(var(--u)*46);height:calc(var(--u)*46)}
.stars svg.on{animation:st .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes st{0%{transform:scale(0) rotate(-40deg)}100%{transform:scale(1)}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*6)}
.stats div{background:#F3ECFF;border-radius:calc(var(--u)*12);padding:calc(var(--u)*8) calc(var(--u)*4)}
.stats b{display:block;font-size:calc(var(--u)*19);font-weight:800;color:var(--grape)}
.stats span{font-size:calc(var(--u)*11.5);color:#5B4F80;font-weight:600}
.phone{height:calc(var(--u)*90);display:grid;place-items:center;perspective:300px}
.ph{width:calc(var(--u)*44);height:calc(var(--u)*78);border-radius:calc(var(--u)*10);border:calc(var(--u)*4) solid var(--navy);background:linear-gradient(180deg,#5fb7e3,#2e7fa3);animation:tilt 2.4s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotateY(0)}25%{transform:rotateY(-28deg)}75%{transform:rotateY(28deg)}}
html:not(.narrow) .dash{justify-content:flex-start;padding-left:calc(var(--u)*22 + env(safe-area-inset-left))}
html:not(.narrow) #toast{bottom:calc(var(--u)*40)}
html.short:not(.narrow) .side{flex-direction:column;bottom:calc(var(--u)*12)}
html.short .sub{display:none}html.short h1{font-size:calc(var(--u)*34)}html.short:not(.narrow) .lv .th{height:calc(var(--u)*46)}html.short #home{gap:calc(var(--u)*8)}