@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Orbitron:wght@700;900&display=swap');
:root{
  --blue:#0a3d9c; --blue2:#1560ff; --cyan:#3fd0ff; --red:#e3262f; --green:#21d07a; --gold:#ffd23f;
  --glass:rgba(8,24,66,.72); --line:rgba(120,200,255,.8);
  --u:min(1vh,0.5625vw); /* 1/100 of 16:9 height */
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#05102a;color:#fff;font-family:'Fredoka','Segoe UI',Arial,sans-serif;user-select:none;cursor:default}
#gl,#fx{position:fixed;inset:0;width:100%;height:100%;display:block}
#fx{pointer-events:none;z-index:5}
#hud{position:fixed;inset:0;z-index:10;pointer-events:none}
.hide{opacity:0!important;pointer-events:none!important;transform:scale(.92)}
#hud>*{transition:opacity .35s, transform .35s}

/* logo */
#logo{position:absolute;left:calc(3*var(--u));top:calc(2.5*var(--u));line-height:.86;transform:rotate(-4deg);filter:drop-shadow(0 calc(.6*var(--u)) 0 rgba(0,0,0,.35))}
#logo div{font-weight:700;letter-spacing:-.02em}
#logo .l1{font-size:calc(6*var(--u));color:#fff;-webkit-text-stroke:calc(.5*var(--u)) var(--blue);paint-order:stroke fill;margin-left:calc(4*var(--u))}
#logo .l2{font-size:calc(8*var(--u));color:var(--red);-webkit-text-stroke:calc(.7*var(--u)) #fff;paint-order:stroke fill}
#logo .l3{display:inline-block;font-size:calc(4.6*var(--u));background:linear-gradient(#2a6dff,#0a3d9c);border:calc(.5*var(--u)) solid #fff;border-radius:calc(4*var(--u));padding:calc(.3*var(--u)) calc(2.4*var(--u)) calc(.8*var(--u));margin-left:calc(5*var(--u));margin-top:calc(.6*var(--u))}
#logo .lnoz{position:absolute;right:calc(-9*var(--u));top:calc(2*var(--u));width:calc(10*var(--u));transform:rotate(12deg)}

/* stats */
#stats{position:absolute;top:calc(3*var(--u));right:calc(3*var(--u));display:flex;gap:calc(1.6*var(--u))}
.pill{display:flex;align-items:center;gap:calc(1.2*var(--u));padding:calc(1*var(--u)) calc(2.4*var(--u)) calc(1*var(--u)) calc(1.6*var(--u));background:var(--glass);border:calc(.35*var(--u)) solid var(--line);border-radius:calc(5*var(--u));box-shadow:0 0 calc(2*var(--u)) rgba(63,208,255,.55), inset 0 0 calc(2*var(--u)) rgba(63,208,255,.25);backdrop-filter:blur(6px);min-width:calc(21*var(--u))}
.pill svg{width:calc(5*var(--u));height:calc(5*var(--u));color:#cfe9ff;flex:none}
.pill small{display:block;font-size:calc(1.9*var(--u));font-weight:600;color:#cfe9ff;letter-spacing:.06em}
.pill b{display:block;font-family:'Orbitron',monospace;font-size:calc(3.9*var(--u));line-height:1.05;font-variant-numeric:tabular-nums}
.pill.gold{border-color:#ffd23f;box-shadow:0 0 calc(2*var(--u)) rgba(255,210,63,.5)}
.pill.gold svg,.pill.gold b{color:var(--gold)}
#pTime.urgent{border-color:#ff4d4d;box-shadow:0 0 calc(3*var(--u)) rgba(255,60,60,.9);animation:pulse .5s infinite alternate}
#pTime.urgent b{color:#ff6b6b}
@keyframes pulse{to{transform:scale(1.06)}}
#pOrder b{color:#8ff0ff}

/* player banner */
#player{position:absolute;left:calc(3*var(--u));bottom:calc(3*var(--u));display:flex;align-items:center;gap:calc(1.5*var(--u));background:var(--glass);border:calc(.3*var(--u)) solid var(--line);border-radius:calc(5*var(--u));padding:calc(1*var(--u)) calc(3*var(--u)) calc(1*var(--u)) calc(1*var(--u))}
.avatar{width:calc(7*var(--u));height:calc(7*var(--u));border-radius:50%;display:grid;place-items:center;font-size:calc(3.6*var(--u));font-weight:700;background:linear-gradient(135deg,var(--red),#ff8a3d);border:calc(.4*var(--u)) solid #fff}
#pName{font-size:calc(3.4*var(--u));font-weight:700}
#pRound{font-size:calc(2*var(--u));color:#bfe0ff}

/* gauge */
#gauge{position:absolute;right:calc(4*var(--u));top:calc(16*var(--u));bottom:calc(8*var(--u));width:calc(13*var(--u));background:var(--glass);border:calc(.4*var(--u)) solid var(--line);border-radius:calc(3*var(--u));box-shadow:0 0 calc(3*var(--u)) rgba(63,208,255,.6);display:flex;flex-direction:column;align-items:center;padding:calc(1.5*var(--u)) 0}
.gtitle svg{width:calc(5*var(--u));height:calc(5*var(--u));color:#fff}
.tube{position:relative;flex:1;width:calc(6.5*var(--u));margin:calc(1*var(--u)) 0 calc(1*var(--u)) calc(2*var(--u));border-radius:calc(1.5*var(--u));background:rgba(0,0,0,.45);border:calc(.3*var(--u)) solid rgba(255,255,255,.5);overflow:visible}
.ticks{position:absolute;inset:0;pointer-events:none;z-index:3}
.ticks i{position:absolute;left:0;width:30%;border-top:1px solid rgba(255,255,255,.55)}
.ticks i.major{width:55%;border-top:2px solid rgba(255,255,255,.85)}
.ticks i span{position:absolute;left:calc(-4.3*var(--u));top:calc(-1.1*var(--u));font-size:calc(1.7*var(--u));font-weight:600;color:#cfe9ff;width:calc(3.5*var(--u));text-align:right}
.liquid{position:absolute;left:0;right:0;bottom:0;height:0%;border-radius:0 0 calc(1.2*var(--u)) calc(1.2*var(--u));background:linear-gradient(to top,#18c964 0%,#a6e22e 55%,#ffe14d 100%);background-size:100% var(--gh,100%);background-position:bottom;box-shadow:0 0 calc(2*var(--u)) rgba(120,255,120,.6);transition:height .08s linear;overflow:hidden}
.liquid.over{background:linear-gradient(to top,#ff3b3b,#ff8a3d)}
.wave{position:absolute;left:-50%;top:calc(-1*var(--u));width:200%;height:calc(2*var(--u));background:radial-gradient(ellipse at center,rgba(255,255,255,.55) 0 40%,transparent 41%) 0 0/calc(4*var(--u)) calc(2*var(--u)) repeat-x;animation:wave 1s linear infinite}
@keyframes wave{to{transform:translateX(calc(4*var(--u)))}}
.zone{position:absolute;left:-10%;right:-10%;background:rgba(63,255,160,.22);border:1px dashed rgba(120,255,190,.9);z-index:2}
.target{position:absolute;left:-30%;right:-30%;height:0;border-top:calc(.45*var(--u)) solid #ff3df0;z-index:4;box-shadow:0 0 calc(1.5*var(--u)) #ff3df0}
.target span{position:absolute;right:calc(-7.8*var(--u));top:calc(-1.9*var(--u));background:#ff3df0;color:#fff;font-family:'Orbitron';font-size:calc(1.9*var(--u));padding:calc(.4*var(--u)) calc(.8*var(--u));border-radius:calc(.8*var(--u));white-space:nowrap}
.target span:before{content:'';position:absolute;left:calc(-1*var(--u));top:50%;margin-top:calc(-1*var(--u));border:calc(1*var(--u)) solid transparent;border-left:0;border-right-color:#ff3df0}
.gval{font-family:'Orbitron';font-size:calc(3.2*var(--u));font-variant-numeric:tabular-nums}
.gval small{font-size:.5em;margin-left:.2em}
.gval.hit{color:var(--green);text-shadow:0 0 calc(1.5*var(--u)) var(--green)}

/* ticket */
#ticket{position:absolute;left:calc(3*var(--u));top:calc(28*var(--u));width:calc(30*var(--u));background:#fff;color:#0b1d4a;border-radius:calc(1.6*var(--u)) calc(1.6*var(--u)) 0 0;padding:calc(1.6*var(--u)) calc(2.4*var(--u)) calc(3*var(--u));box-shadow:0 calc(1*var(--u)) calc(3*var(--u)) rgba(0,0,0,.4);
  -webkit-mask:radial-gradient(circle at 50% 100%,transparent calc(1*var(--u)),#000 calc(1.05*var(--u))) 0 0/calc(2.6*var(--u)) 100% repeat-x;transform-origin:top left}
#ticket .th{font-size:calc(1.9*var(--u));font-weight:700;letter-spacing:.12em;color:var(--red)}
#ticket .tv{font-family:'Orbitron';font-size:calc(7*var(--u));font-weight:900;line-height:1.1}
#ticket .tv small{font-family:'Fredoka';font-size:calc(2.4*var(--u))}
#ticket .tf{display:inline-block;background:var(--blue);color:#fff;font-weight:700;font-size:calc(2*var(--u));padding:calc(.3*var(--u)) calc(1.4*var(--u));border-radius:calc(2*var(--u))}
#ticket.pop{animation:tpop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes tpop{from{transform:scale(.3) rotate(-10deg);opacity:0}}

/* proximity */
#prox{position:absolute;left:50%;bottom:calc(5*var(--u));transform:translateX(-50%);width:calc(60*var(--u));text-align:center}
#prox.hide{transform:translateX(-50%) scale(.92)}
.plabel{font-size:calc(3*var(--u));font-weight:700;text-shadow:0 2px 6px #000;margin-bottom:calc(1*var(--u))}
.pbar{height:calc(2.2*var(--u));border-radius:calc(2*var(--u));background:rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.6);overflow:hidden}
#proxFill{height:100%;width:0;background:linear-gradient(90deg,#ff4d4d,#ffd23f,#21d07a);transition:width .1s}
#prox.lock .plabel{color:var(--green);animation:pulse .35s infinite alternate}

/* banner */
#banner{position:absolute;left:0;right:0;top:15%;text-align:center}
#bannerTxt{display:inline-block;font-size:calc(10*var(--u));font-weight:700;color:#fff;-webkit-text-stroke:calc(.6*var(--u)) var(--blue);paint-order:stroke fill;text-shadow:0 calc(1*var(--u)) 0 rgba(0,0,0,.4)}
#bannerSub{font-size:calc(3.4*var(--u));font-weight:600;text-shadow:0 2px 8px #000;margin-top:calc(1*var(--u))}
#banner.show #bannerTxt{animation:bpop .55s cubic-bezier(.2,1.8,.4,1)}
@keyframes bpop{from{transform:scale(2.4);opacity:0}}

/* result */
#result,#final{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:linear-gradient(160deg,rgba(14,40,110,.95),rgba(5,16,50,.95));border:calc(.5*var(--u)) solid var(--cyan);border-radius:calc(3*var(--u));box-shadow:0 0 calc(5*var(--u)) rgba(63,208,255,.7);padding:calc(3*var(--u)) calc(5*var(--u));min-width:calc(56*var(--u))}
#result.hide,#final.hide{transform:translate(-50%,-50%) scale(.8)}
.rgrade{text-align:center;font-size:calc(7.5*var(--u));font-weight:700;margin-bottom:calc(1.5*var(--u));-webkit-text-stroke:calc(.4*var(--u)) #000;paint-order:stroke fill}
.rgrade.perfect{color:var(--gold);text-shadow:0 0 calc(3*var(--u)) #ffb700}
.rgrade.great{color:var(--green)}.rgrade.good{color:var(--cyan)}.rgrade.meh{color:#ffa94d}.rgrade.miss{color:#ff5b5b}
.rrow{display:flex;justify-content:space-between;font-size:calc(3*var(--u));padding:calc(.4*var(--u)) 0}
.rrow b{font-family:'Orbitron';font-size:.95em}
.rsep{border-top:2px dashed rgba(255,255,255,.3);margin:calc(1*var(--u)) 0}
.rtotal{display:flex;justify-content:space-between;align-items:center;margin-top:calc(1.4*var(--u));padding:calc(1.2*var(--u)) calc(2*var(--u));border-radius:calc(2*var(--u));background:rgba(255,210,63,.15);border:2px solid var(--gold)}
.rtotal span{font-size:calc(3*var(--u));font-weight:700}
.rtotal b{font-family:'Orbitron';font-size:calc(5.5*var(--u));color:var(--gold)}
#final{text-align:center;padding:calc(4*var(--u)) calc(8*var(--u))}
.fhead{font-size:calc(3*var(--u));letter-spacing:.2em;color:var(--cyan);font-weight:700}
.fname{font-size:calc(5*var(--u));font-weight:700}
.fscore{font-family:'Orbitron';font-size:calc(14*var(--u));font-weight:900;color:var(--gold);text-shadow:0 0 calc(4*var(--u)) #ffb700;line-height:1.1}
.frank{display:inline-block;font-size:calc(3.6*var(--u));font-weight:700;background:var(--red);border-radius:calc(3*var(--u));padding:calc(.6*var(--u)) calc(3*var(--u))}

/* lobby */
#lobby{position:absolute;right:calc(3*var(--u));top:calc(3*var(--u));bottom:calc(3*var(--u));display:flex;gap:calc(2.5*var(--u));align-items:stretch}
#lobby.hide{transform:translateX(10%)}
.lcard{background:var(--glass);border:calc(.4*var(--u)) solid var(--line);border-radius:calc(3*var(--u));box-shadow:0 0 calc(3*var(--u)) rgba(63,208,255,.5);backdrop-filter:blur(8px);padding:calc(2.5*var(--u));display:flex;flex-direction:column}
.lcard.qr{width:calc(42*var(--u));align-items:center;text-align:center}
.lh{font-size:calc(3.2*var(--u));font-weight:700;letter-spacing:.05em;margin-bottom:calc(1.5*var(--u))}
.lh.small{font-size:calc(2.4*var(--u));margin:calc(2*var(--u)) 0 calc(1*var(--u));color:var(--cyan)}
#qr{width:calc(34*var(--u));height:calc(34*var(--u));background:#fff;border-radius:calc(2*var(--u));padding:calc(1.2*var(--u));box-shadow:0 0 0 calc(.6*var(--u)) var(--red),0 0 calc(4*var(--u)) rgba(255,255,255,.4);animation:qrglow 2s ease-in-out infinite alternate}
@keyframes qrglow{to{box-shadow:0 0 0 calc(.6*var(--u)) var(--blue2),0 0 calc(6*var(--u)) rgba(63,208,255,.9)}}
.lurl{font-family:monospace;font-size:calc(2*var(--u));color:#bfe0ff;margin:calc(1.2*var(--u)) 0}
.steps{text-align:left;font-size:calc(2.3*var(--u));line-height:1.55;margin:calc(.5*var(--u)) 0 0;padding-left:calc(3.5*var(--u));color:#e3f2ff}
.lcard.board{width:calc(46*var(--u))}
#board{list-style:none;margin:0;padding:0;counter-reset:r}
#board li{display:flex;align-items:center;gap:calc(1.4*var(--u));font-size:calc(2.7*var(--u));padding:calc(.7*var(--u)) calc(1.2*var(--u));border-radius:calc(1.5*var(--u));margin-bottom:calc(.6*var(--u));background:rgba(255,255,255,.06)}
#board li:before{counter-increment:r;content:counter(r);width:calc(4*var(--u));height:calc(4*var(--u));border-radius:50%;display:grid;place-items:center;background:#24407e;font-weight:700;font-size:.85em;flex:none}
#board li:nth-child(1):before{background:linear-gradient(#ffe066,#e0a800);color:#4a3500}
#board li:nth-child(2):before{background:linear-gradient(#f1f3f5,#adb5bd);color:#333}
#board li:nth-child(3):before{background:linear-gradient(#ffb37a,#c0692d)}
#board li:nth-child(1){background:rgba(255,210,63,.18)}
#board li .n{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#board li .s{font-family:'Orbitron';color:var(--gold)}
#board li.new{animation:flash 1s 3}
@keyframes flash{50%{background:rgba(63,208,255,.5)}}
#board .empty{opacity:.6;font-size:calc(2.3*var(--u))}
#board .empty:before{display:none}
.queue{font-size:calc(2.4*var(--u));line-height:1.6;color:#e3f2ff}
.queue span{display:inline-block;background:rgba(63,208,255,.2);border:1px solid var(--line);border-radius:calc(2*var(--u));padding:0 calc(1.2*var(--u));margin:0 calc(.6*var(--u)) calc(.6*var(--u)) 0}
.queue span.now{background:var(--red);border-color:#fff}

#loading{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#1a4fb0,#061537 60%,#030a1c);z-index:50;transition:opacity .8s}
#loading.done{opacity:0;pointer-events:none}
.lbox{text-align:center;width:min(92vw,calc(70*var(--u)))}
.llogo{display:flex;flex-direction:column;align-items:center;line-height:.9;margin-bottom:calc(3*var(--u));transform:rotate(-3deg);animation:lfloat 2.4s ease-in-out infinite}
@keyframes lfloat{50%{transform:rotate(-3deg) translateY(calc(-1*var(--u)))}}
.llogo .a{font-size:calc(5*var(--u));font-weight:700;color:#fff;-webkit-text-stroke:calc(.4*var(--u)) var(--blue);paint-order:stroke fill}
.llogo .b{font-size:calc(8*var(--u));font-weight:700;color:var(--red);-webkit-text-stroke:calc(.6*var(--u)) #fff;paint-order:stroke fill}
.llogo .c{font-size:calc(3.6*var(--u));font-weight:700;background:linear-gradient(#2a6dff,#0a3d9c);border:calc(.4*var(--u)) solid #fff;border-radius:calc(3*var(--u));padding:calc(.2*var(--u)) calc(2*var(--u)) calc(.6*var(--u));margin-top:calc(.6*var(--u))}
.ltitle{font-size:calc(3.4*var(--u));font-weight:700}
.lsub{font-size:calc(1.9*var(--u));color:#9fc3ff;margin:calc(.6*var(--u)) 0 calc(2*var(--u))}
.lbar{height:calc(2.4*var(--u));border-radius:calc(2*var(--u));background:rgba(255,255,255,.12);overflow:hidden;border:2px solid var(--line);box-shadow:0 0 calc(2*var(--u)) rgba(63,208,255,.35)}
#lprog{height:100%;width:0;background:linear-gradient(90deg,var(--red),#ff8a3d,var(--gold));transition:width .25s;position:relative;overflow:hidden}
#lprog:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-100%);animation:shine 1.2s infinite}
@keyframes shine{to{transform:translateX(100%)}}
#ltext{margin-top:calc(1*var(--u));font-size:calc(2.1*var(--u));color:#dbe9ff;font-variant-numeric:tabular-nums}
#litems{list-style:none;margin:calc(2.2*var(--u)) auto 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:calc(.8*var(--u)) calc(2*var(--u));width:100%;text-align:left}
#litems li{display:flex;align-items:center;gap:calc(1*var(--u));font-size:calc(1.9*var(--u));color:#bcd3ff;background:rgba(255,255,255,.05);border-radius:calc(1.2*var(--u));padding:calc(.6*var(--u)) calc(1.2*var(--u))}
#litems li b{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#litems li em{font-style:normal;opacity:.75;font-size:.9em}
#litems li span{width:calc(1.8*var(--u));height:calc(1.8*var(--u));border-radius:50%;border:2px solid rgba(255,255,255,.3);flex:none}
#litems li.busy span{border-color:rgba(255,255,255,.2);border-top-color:var(--cyan);animation:spin .8s linear infinite}
#litems li.ok{color:#fff}#litems li.ok span{background:var(--green);border-color:var(--green)}
#litems li.err{color:#ff8a8a}#litems li.err span{background:#ff4d4d;border-color:#ff4d4d}
@keyframes spin{to{transform:rotate(360deg)}}
.ltip{margin-top:calc(2.4*var(--u));font-size:calc(2*var(--u));color:var(--gold);min-height:1.3em}
.lroomw{font-size:calc(2.2*var(--u));letter-spacing:.12em;color:#bfe0ff;margin-top:calc(1*var(--u));display:flex;align-items:center;gap:calc(1*var(--u))}
.lroomw b{font-family:'Orbitron';font-size:1.3em;color:#fff;letter-spacing:.2em}
#lnet{display:inline-block;width:calc(1.4*var(--u));height:calc(1.4*var(--u));border-radius:50%;background:#ff4d4d;box-shadow:0 0 8px #ff4d4d}
#lnet.on{background:var(--green);box-shadow:0 0 8px var(--green)}
#clickToStart{position:fixed;left:50%;bottom:calc(2*var(--u));transform:translateX(-50%);z-index:40;background:var(--red);padding:calc(1*var(--u)) calc(3*var(--u));border-radius:calc(3*var(--u));font-size:calc(2.4*var(--u));font-weight:600;animation:pulse .8s infinite alternate}
#toast{position:absolute;left:50%;top:calc(15*var(--u));transform:translateX(-50%);display:flex;flex-direction:column;gap:calc(1*var(--u));align-items:center}
#toast div{background:rgba(33,208,122,.92);padding:calc(.8*var(--u)) calc(2.5*var(--u));border-radius:calc(3*var(--u));font-size:calc(2.6*var(--u));font-weight:600;animation:toast 3.2s forwards}
@keyframes toast{0%{opacity:0;transform:translateY(-20px)}10%,80%{opacity:1;transform:none}100%{opacity:0}}
#keys{position:absolute;left:50%;bottom:calc(.6*var(--u));transform:translateX(-50%);font-size:calc(1.4*var(--u));opacity:.35}
.shake{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-12px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.lsec{font-size:calc(1.7*var(--u));color:#ffd23f;margin:calc(-.6*var(--u)) 0 calc(1*var(--u));line-height:1.3}