@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Rajdhani:wght@500;600;700&display=swap');
:root{font-family:Rajdhani,Arial,sans-serif;color:#effaff;background:#060c18}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}button{font-family:inherit;cursor:pointer}button:focus-visible{outline:2px solid #9ffff2;outline-offset:3px}
#stage,#stage canvas,#vignette{position:absolute;inset:0;width:100%;height:100%}#stage canvas{display:block}#vignette{pointer-events:none;z-index:2;background:radial-gradient(ellipse at 50% 44%,transparent 25%,#0108178f 95%),linear-gradient(0deg,#020714ad,transparent 22%)}
#hud{position:absolute;z-index:5;inset:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:15px 20px;background:linear-gradient(180deg,#071020e8,transparent)}.brand{display:flex;align-items:center;gap:10px;min-width:180px}.logo{display:grid;place-items:center;width:38px;height:38px;background:#9bfff0;color:#071321;font:900 28px 'Barlow Condensed';clip-path:polygon(12% 0,100% 0,100% 82%,82% 100%,0 100%,0 12%)}.brand>div{display:flex;flex-direction:column}.brand small,.stats small,.results small{font:800 10px 'Barlow Condensed';letter-spacing:.16em;color:#8ba3bf}.brand b{font:900 21px 'Barlow Condensed';white-space:nowrap}.brand em{font:700 11px 'Barlow Condensed';font-style:normal;color:#b3a1ff;letter-spacing:.09em}.stats{display:flex;gap:14px;margin-left:auto}.stats>div{text-align:center;padding:0 13px;border-left:1px solid #8bcce83d}.stats small{display:block}.stats b{font:900 26px/1.1 'Barlow Condensed'}#pauseBtn{width:38px;height:38px;background:#091a32cf;color:#ebffff;border:1px solid #6aa9ba8f;border-radius:7px;font:800 21px 'Barlow Condensed'}
#objective{position:absolute;z-index:5;top:76px;left:50%;transform:translateX(-50%);font:800 12px 'Barlow Condensed';letter-spacing:.16em;color:#b6ffec;text-shadow:0 2px 16px #000;white-space:nowrap}#objective span{color:#f3c3fa;margin-left:15px}#notification{position:absolute;z-index:8;left:50%;top:22%;transform:translateX(-50%) scale(.93);text-align:center;width:90%;font:900 clamp(19px,3vw,35px) 'Barlow Condensed';letter-spacing:.09em;color:#baffeb;opacity:0;transition:opacity .16s,transform .16s;text-shadow:0 4px 20px #000,0 0 19px #53f6ef}#notification.show{opacity:1;transform:translateX(-50%) scale(1)}
#bottom{position:absolute;bottom:17px;left:20px;right:20px;z-index:5;display:flex;align-items:end;gap:14px;pointer-events:none}.meter{width:min(178px,20vw)}.meter small{display:block;font:800 11px 'Barlow Condensed';letter-spacing:.09em;margin-bottom:4px}.track{height:8px;background:#1b2a45;border:1px solid #69889a88;border-radius:3px;overflow:hidden}.track>div{height:100%;width:100%;background:linear-gradient(90deg,#64e8b8,#afffea);transition:width .08s}.meter:nth-child(2) .track>div{background:linear-gradient(90deg,#5c81ff,#b1a9ff)}.meter:nth-child(3) .track>div{background:linear-gradient(90deg,#f5a66a,#fceca0)}#record{margin-left:auto;font:800 12px 'Barlow Condensed';letter-spacing:.12em;color:#9cb2ca}
.overlay{position:absolute;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(100deg,#040d21f0,#0a1838c0 72%,#03091ae8);backdrop-filter:blur(7px)}.overlay.hidden{display:none}.intro{width:min(670px,100%);position:relative;z-index:2;margin-right:auto;margin-left:clamp(14px,7vw,140px)}.eyebrow{font:800 12px 'Barlow Condensed';letter-spacing:.23em;color:#99ffe9}.intro h1{font:900 clamp(77px,12vw,164px)/.79 'Barlow Condensed';letter-spacing:-.045em;margin:21px 0 16px}.intro h1 span{display:block;color:#9affeb}.subtitle{font:900 clamp(18px,2vw,26px) 'Barlow Condensed';letter-spacing:.11em;color:#c3b7ff}.subtitle b{color:#7affcf}.intro p,.modal p{max-width:530px;color:#bfcde0;font:600 20px/1.36 Rajdhani;margin:22px 0}.primary{display:inline-flex;justify-content:space-between;align-items:center;gap:28px;padding:14px 25px;border:0;border-radius:4px;background:linear-gradient(95deg,#b9ffee,#52eedc);color:#071d2d;font:900 18px 'Barlow Condensed';letter-spacing:.08em;box-shadow:0 10px 40px #1ad4ba35}.primary:hover{filter:brightness(1.08)}.hints{display:flex;flex-wrap:wrap;gap:10px 17px;margin-top:22px;font:700 12px 'Barlow Condensed';letter-spacing:.06em;color:#a0bacb}.hints b{color:#defffa}.mini{font:700 10px 'Barlow Condensed';letter-spacing:.2em;color:#79c4bb;margin-top:20px}.coverEmblem{position:absolute;right:9%;top:26%;width:28vw;height:28vw;max-width:390px;max-height:390px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid #8c92f244;border-radius:50%;box-shadow:0 0 130px #6f64fd25,inset 0 0 80px #66d7f326;transform:rotate(-9deg)}.coverEmblem>span{font-size:min(23vw,280px);line-height:1;color:#9bfff4;text-shadow:0 0 85px #73e9ff}.coverEmblem small{font:800 15px 'Barlow Condensed';letter-spacing:.22em;color:#bbcaf9;text-align:center}
.modal{width:min(730px,100%);padding:32px 35px;background:#081527ef;border:1px solid #88ddf466;box-shadow:0 12px 100px #02060dba}.modal h2{font:900 clamp(38px,6vw,71px)/1 'Barlow Condensed';margin:12px 0}.modal h2 em{font-style:normal;color:#96fff0}.modal p{font-size:18px}.secondary{margin-top:14px;margin-left:12px;padding:12px 22px;background:#1b2d4c;color:#cdeaf8;border:1px solid #88cbd788;font:800 17px 'Barlow Condensed'}.results{display:flex;gap:35px;margin:25px 0}.results small{display:block}.results b{font:900 34px 'Barlow Condensed'}
#upgradeCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:28px 0 4px}.upgrade{min-height:152px;text-align:left;padding:16px;border:1px solid #6cbbce8c;background:linear-gradient(160deg,#1a3260,#0b1e38);color:#e8fcff;transition:transform .15s,border-color .15s}.upgrade:hover{transform:translateY(-4px);border-color:#b4fff5}.upgrade .symbol{display:block;font:900 30px 'Barlow Condensed';color:#a4fff0}.upgrade b{display:block;margin:11px 0 6px;font:900 21px 'Barlow Condensed';letter-spacing:.03em}.upgrade small{font:600 13px/1.2 Rajdhani;color:#bdd1e0}
#touch{display:none;position:absolute;z-index:7;left:14px;right:14px;bottom:74px;justify-content:space-between;align-items:end;pointer-events:none}#joystick{width:122px;height:122px;border-radius:50%;pointer-events:auto;touch-action:none}#joyBase{position:relative;width:112px;height:112px;border:2px solid #adf4eb8a;background:#1534536b;border-radius:50%;display:grid;place-items:center}#joyKnob{display:block;width:53px;height:53px;background:#b5ffeb99;border:1px solid #dbfff4;border-radius:50%;box-shadow:0 0 35px #68e7ef40}#touchActions{display:flex;gap:7px;pointer-events:auto}#touchActions button{min-width:74px;min-height:75px;color:#f6ffff;border:1px solid #d3bbffb8;background:#5234b9d9;border-radius:12px;font:900 18px 'Barlow Condensed'}#touchActions button:last-child{background:#af5e25dd;border-color:#ffd5a3bb}
@media(pointer:coarse){#touch{display:flex}}@media(max-width:700px){#hud{padding:10px 10px}.brand{min-width:0}.brand small{font-size:8px}.brand b{font-size:16px}.brand em{display:none}.logo{width:31px;height:31px;font-size:22px}.stats{gap:2px}.stats>div{padding:0 6px}.stats small{font-size:8px}.stats b{font-size:19px}#pauseBtn{width:32px;height:32px}#objective{top:57px;font-size:10px}#bottom{bottom:12px;left:12px;right:12px;gap:8px}.meter{width:30%}.meter small{font-size:9px}#record{display:none}.intro{margin-left:0}.intro h1{font-size:clamp(66px,16vw,112px)}.intro p{font-size:17px}.coverEmblem{opacity:.2;right:-7%;top:20%;width:70vw;height:70vw}.overlay{padding:16px}.modal{padding:22px 16px}#upgradeCards{gap:5px}.upgrade{min-height:128px;padding:9px}.upgrade b{font-size:15px}.upgrade small{font-size:11px}.upgrade .symbol{font-size:25px}}
#startOverlay{background:linear-gradient(95deg,#020817fa 0%,#051125e9 27%,#07132896 52%,#08122950 100%),url('./hero_art.jpg') center right/cover no-repeat;backdrop-filter:none}
#startOverlay .coverEmblem{display:none}
#startOverlay .intro{margin-left:clamp(12px,4vw,80px)}
#startOverlay .intro h1{filter:drop-shadow(0 4px 20px #02061b)}
#startOverlay .intro p{max-width:400px;color:#d9eff1;text-shadow:0 1px 10px #020b23}
@media(max-width:700px){#startOverlay{background-position:67% center;background-image:linear-gradient(110deg,#030a1aeb,#050c1bb8 68%,#030a19b0),url('./hero_art.jpg')}}

#muteBtn{width:37px;height:38px;background:#091a32cf;color:#c7ffef;border:1px solid #6aa9ba8f;border-radius:7px;font:900 19px 'Barlow Condensed';margin-right:2px}
@media(max-width:700px){#muteBtn{width:31px;height:32px;font-size:15px;margin-right:1px}}

#overdriveMeter .track>div{background:linear-gradient(90deg,#ffc173,#fff09f)}
#overdriveMeter small{color:#fff0bb}
#combo{position:absolute;z-index:6;top:19%;right:7%;font:900 clamp(19px,3vw,35px) 'Barlow Condensed';color:#fff2a6;text-shadow:0 2px 17px #fca85080;transform:rotate(-6deg)}
#combo[hidden],#bossHealth[hidden]{display:none}
#bossHealth{position:absolute;z-index:6;top:108px;left:50%;transform:translateX(-50%);width:min(430px,80vw)}
#bossHealth small{display:block;text-align:center;color:#ffd4a9;font:900 12px 'Barlow Condensed';letter-spacing:.23em;margin-bottom:4px}
#bossHealth>div{background:#381b2bdd;border:1px solid #ffb9867c;height:10px;overflow:hidden}
#bossBar{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff5582,#ffd08f);box-shadow:0 0 12px #ff9d87}
#overdriveTouch{background:#2c6c62!important;border-color:#94ffe3!important;color:#c5ffe6!important}
#stage.overdrive{filter:saturate(1.65) brightness(1.18)}
@media(max-width:700px){
 #touchActions{gap:5px}
 #touchActions button{min-width:55px;min-height:62px;font-size:13px;padding:0 4px}
 #bottom{bottom:8px;gap:5px}
 #bottom .meter{width:25%}
 #bottom .meter small{font-size:8px}
 #bossHealth{top:83px}
 #combo{top:12%;right:5%;font-size:20px}
}

.classes{width:min(470px,90%);display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:15px 0 13px}
.class-option{display:flex;gap:4px;align-items:center;justify-content:center;flex-direction:column;min-height:55px;background:#0d2342dc;border:1px solid #54798a;color:#bcd9e5;border-radius:5px;padding:6px 3px;transition:border-color .2s,background .2s}
.class-option span{font-size:15px;color:#b1f9ef;line-height:1}
.class-option b{font:900 12px 'Barlow Condensed';letter-spacing:.09em}
.class-option small{font:700 10px 'Barlow Condensed';letter-spacing:.04em;color:#99afc6}
.class-option.selected{background:#1b4859eb;border:1px solid #b7fff1;box-shadow:0 0 20px #45f9dd1b}
#waveDirective{color:#ffdbb0;font-weight:900}
@media(max-width:700px){.classes{width:100%;margin:10px 0}.class-option{min-height:47px}.class-option small{font-size:9px}#waveDirective{display:none}}
@media(max-height:580px) and (min-width:701px){.intro h1{font-size:clamp(64px,10vw,115px);margin:9px 0}.intro p{margin:10px 0;font-size:16px}.classes{margin:8px 0;}.class-option{min-height:41px}.hints,.mini{margin-top:7px}}

#hitFlash{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;
 background:radial-gradient(ellipse at center,transparent 15%,#fb5d7d80 100%);
 mix-blend-mode:screen;transition:opacity .07s linear}