:root{
  --accent:#00eaff; --accent2:#ff2a8a; --ink:#eef4ff; --dim:#8d97b5;
  --panel:rgba(8,10,22,.58); --line:rgba(255,255,255,.12);
  --cut:14px;
  --f-head:'Unbounded',system-ui,sans-serif;
  --f-ui:'Chakra Petch',system-ui,sans-serif;
  --f-num:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#030208;color:var(--ink);font-family:var(--f-ui);user-select:none;-webkit-user-select:none}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
#ui{position:fixed;inset:0;pointer-events:none}
kbd{font-family:var(--f-num);font-size:.78em;font-weight:800;display:inline-block;padding:.12em .5em;margin:0 .12em;border:1px solid rgba(255,255,255,.35);border-bottom-width:3px;border-radius:5px;background:rgba(255,255,255,.07);color:#fff;line-height:1.3}
b{font-weight:700}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s;pointer-events:none}
.screen.show{opacity:1;visibility:visible;transition:opacity .45s ease;pointer-events:auto}
.panel{background:var(--panel);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border:1px solid var(--line);clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));position:relative}
.panel::before{content:"";position:absolute;left:0;top:0;width:60px;height:2px;background:var(--accent);box-shadow:0 0 12px var(--accent)}

/* ---------- loading ---------- */
#loading{display:grid;place-items:center;background:radial-gradient(ellipse at center,#12072a 0%,#030208 70%)}
.load-core{display:flex;flex-direction:column;align-items:center;gap:26px}
.load-ring{width:84px;height:84px;border-radius:50%;border:3px solid transparent;border-top-color:var(--accent);border-right-color:var(--accent2);animation:spin 0.9s linear infinite;filter:drop-shadow(0 0 12px var(--accent))}
.load-txt{letter-spacing:.35em;font-size:13px;color:var(--dim)}
.load-txt b{color:#fff}
.load-bar{width:280px;height:3px;background:rgba(255,255,255,.1)}
.load-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent2),var(--accent));box-shadow:0 0 12px var(--accent);transition:width .3s}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- logo ---------- */
.logo{display:flex;flex-direction:column;align-items:center;line-height:.86;transform:skewX(-9deg);filter:drop-shadow(0 12px 30px rgba(0,0,0,.6))}
.logo>div{font-family:var(--f-head);font-weight:900;text-transform:uppercase;white-space:nowrap}
.logo-super,.logo-mega{background:linear-gradient(180deg,#ffffff 0%,#dfe8ff 30%,#7f8db8 48%,#1b1f36 50%,#5d6a9c 62%,#e8f0ff 82%,#ffffff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative}
.logo-super::after,.logo-mega::after{content:attr(data-t);position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.95) 45%,transparent 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%{background-position:150% 0}60%,100%{background-position:-60% 0}}
.logo-ultra{background:linear-gradient(90deg,#ff2a8a,#ff7a18 30%,#ffe600 50%,#00ffa2 70%,#00c8ff 85%,#b04bff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hue 5s linear infinite;letter-spacing:.06em}
@keyframes hue{to{background-position:200% 0}}
.logo.big .logo-super{font-size:clamp(46px,7.6vw,128px);letter-spacing:.02em}
.logo.big .logo-mega{font-size:clamp(78px,15vw,250px);letter-spacing:-.01em;margin-top:-.02em}
.logo.big .logo-ultra{font-size:clamp(20px,3.1vw,54px);margin-top:.35em;filter:drop-shadow(0 0 14px rgba(255,60,160,.55))}
.logo.small{align-items:flex-start}
.logo.small .logo-super{font-size:38px}
.logo.small .logo-mega{font-size:74px}
.logo.small .logo-ultra{font-size:17px;margin-top:.45em}

/* ---------- title ---------- */
#title{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5vh;background:radial-gradient(ellipse 60% 45% at 50% 47%,rgba(3,2,10,.62) 0%,rgba(3,2,10,.25) 60%,rgba(3,2,8,.55) 100%)}
#title .logo{animation:logoIn 1.4s cubic-bezier(.2,1.4,.3,1) both}
@keyframes logoIn{0%{opacity:0;transform:skewX(-9deg) scale(1.6);filter:blur(20px) drop-shadow(0 0 0 #000)}100%{opacity:1}}
.press{font-size:clamp(14px,1.4vw,20px);letter-spacing:.4em;font-weight:700;animation:pulse 1.6s ease-in-out infinite;text-shadow:0 0 18px var(--accent)}
@keyframes pulse{50%{opacity:.35}}
.title-foot{position:absolute;bottom:4vh;font-size:12px;letter-spacing:.45em;color:#c7cde6;white-space:nowrap;text-shadow:0 1px 4px #000}

/* ---------- menu ---------- */
#menu{display:flex;justify-content:space-between;align-items:center;padding:0 7vw;background:linear-gradient(90deg,rgba(3,2,10,.82) 0%,rgba(3,2,10,.35) 45%,rgba(0,0,0,0) 70%)}
.menu-left{display:flex;flex-direction:column;gap:6vh}
.navlist{display:flex;flex-direction:column;gap:12px}
.navlist.row{flex-direction:row;flex-wrap:wrap}
button.nav{all:unset;cursor:pointer;pointer-events:auto;position:relative}
.nav.btn-main{display:flex;flex-direction:column;min-width:340px;padding:14px 26px 12px;transform:skewX(-12deg);background:rgba(255,255,255,.04);border-left:3px solid rgba(255,255,255,.25);transition:all .18s ease}
.btn-main span{font-family:var(--f-head);font-weight:800;font-size:26px;letter-spacing:.04em;transform:skewX(12deg);transform-origin:left}
.btn-main em{max-width:310px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:normal;font-size:13px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;transform:skewX(12deg);transform-origin:left}
.btn-main:hover,.btn-main.focus{background:linear-gradient(90deg,var(--accent2),transparent 95%);border-left-color:#fff;padding-left:38px;box-shadow:-8px 0 30px -6px var(--accent2)}
.btn-main.focus em,.btn-main:hover em{color:#fff}
.nav.btn-small{padding:10px 22px;font-weight:700;letter-spacing:.25em;font-size:14px;background:rgba(255,255,255,.06);border:1px solid var(--line);transform:skewX(-12deg)}
.btn-small:hover,.btn-small.focus{background:linear-gradient(90deg,color-mix(in srgb,var(--accent2) 55%,#0a0c18),color-mix(in srgb,var(--accent2) 25%,#0a0c18));border-color:#fff;box-shadow:0 0 24px var(--accent2);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.btn-main.locked{opacity:.35}
.profile{width:330px;padding:26px 28px}
.profile h3,.panel h3{font-family:var(--f-head);font-size:13px;letter-spacing:.3em;color:var(--dim);margin:4px 0 14px;font-weight:600}
.stat-row{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:15px;letter-spacing:.12em}
.stat-row b{font-family:var(--f-num);font-size:20px}
.stat-row .gold{color:#ffd23f;text-shadow:0 0 14px rgba(255,210,63,.6)}

/* ---------- common screen chrome ---------- */
.scr-head{position:absolute;top:6vh;left:6vw;right:6vw;display:flex;align-items:baseline;gap:28px}
.scr-head h1{font-family:var(--f-head);font-weight:900;font-size:clamp(28px,3.4vw,54px);font-style:italic;letter-spacing:.02em;text-shadow:0 0 30px rgba(0,0,0,.6)}
.build-tag{margin-left:auto;font-family:var(--f-num);font-size:11px;letter-spacing:.2em;color:var(--dim);opacity:.75}
.scr-sub{letter-spacing:.3em;font-size:13px;color:var(--dim);white-space:nowrap}
.scr-foot{position:absolute;bottom:5vh;left:6vw;right:6vw;display:flex;align-items:center;gap:28px}
.hint{font-size:13px;letter-spacing:.2em;color:var(--dim)}
#levels,#howto,#settings{background:linear-gradient(180deg,rgba(3,2,10,.78),rgba(3,2,10,.45) 40%,rgba(3,2,10,.85))}
#garage{background:linear-gradient(90deg,rgba(3,2,10,.7) 0%,rgba(3,2,10,.15) 32%,rgba(3,2,10,0) 45%,rgba(3,2,10,0) 55%,rgba(3,2,10,.15) 68%,rgba(3,2,10,.7) 100%)}

/* ---------- levels ---------- */
.level-grid{position:absolute;top:17vh;left:6vw;width:58vw;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.lvl{pointer-events:auto;cursor:pointer;aspect-ratio:3/4;position:relative;overflow:hidden;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:transform .18s ease,filter .18s}
.lvl .bg{position:absolute;inset:0}
.lvl .bg::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px),linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85))}
.lvl .sun{position:absolute;left:50%;top:34%;width:44%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;filter:blur(1px)}
.lvl .ground{position:absolute;left:-20%;right:-20%;bottom:0;height:46%;transform:perspective(120px) rotateX(55deg);transform-origin:bottom;background-image:linear-gradient(var(--c) 1px,transparent 1px),linear-gradient(90deg,var(--c) 1px,transparent 1px);background-size:18px 18px;opacity:.55}
.lvl .num{position:absolute;top:8px;left:12px;font-family:var(--f-head);font-weight:900;font-size:30px;font-style:italic;opacity:.9;text-shadow:0 0 16px rgba(0,0,0,.6)}
.lvl .nm{position:absolute;bottom:30px;left:10px;right:8px;font-family:var(--f-head);font-weight:800;font-size:clamp(10px,.95vw,13px);letter-spacing:-.01em;line-height:1.15}
.lvl .st{position:absolute;bottom:9px;left:10px;font-size:14px;letter-spacing:.1em;color:#555}
.lvl .st .on{color:#ffd23f;text-shadow:0 0 10px #ffb400}
.lvl.locked{filter:grayscale(1) brightness(.4)}
.lvl.locked::after{content:"\1F512";position:absolute;inset:0;display:grid;place-items:center;font-size:34px}
.lvl.focus{transform:translateY(-6px) scale(1.04);filter:drop-shadow(0 0 18px var(--accent))}
.lvl.focus::before{content:"";position:absolute;inset:0;border:2px solid #fff;z-index:3;clip-path:inherit}
.level-detail{position:absolute;top:17vh;right:6vw;width:28vw;min-width:300px;padding:28px}
.level-detail h2{font-family:var(--f-head);font-weight:900;font-size:30px;font-style:italic;line-height:1.05;margin-bottom:6px}
.level-detail .tag{letter-spacing:.3em;font-size:12px;color:var(--accent);margin-bottom:20px}
.level-detail .obj{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:15px;letter-spacing:.06em}
.level-detail .obj .s{font-size:20px;color:#444}
.level-detail .obj .s.on{color:#ffd23f;text-shadow:0 0 12px #ffb400}
.level-detail .meta{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:12px;letter-spacing:.2em;color:var(--dim)}
.level-detail .meta b{display:block;color:#fff;font-family:var(--f-num);font-size:18px;letter-spacing:0;margin-top:3px}
.level-detail .go{margin-top:22px;font-size:13px;letter-spacing:.3em;color:#fff;animation:pulse 1.6s infinite}

/* ---------- garage ---------- */
.garage-left{position:absolute;top:17vh;left:6vw;width:340px;padding:24px}
.car-list{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.car-item{pointer-events:auto;cursor:pointer;padding:10px 16px;background:rgba(255,255,255,.04);border-left:3px solid transparent;display:flex;justify-content:space-between;align-items:center;font-family:var(--f-head);font-weight:800;font-size:17px;letter-spacing:.06em;transition:all .15s}
.car-item small{font-family:var(--f-ui);font-weight:600;font-size:11px;letter-spacing:.2em;color:var(--dim)}
.car-item.sel{background:linear-gradient(90deg,rgba(255,255,255,.14),transparent);border-left-color:var(--accent)}
.car-item.locked{opacity:.4}
.livery-list{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.liv{pointer-events:auto;cursor:pointer;aspect-ratio:1;border-radius:50%;position:relative;border:2px solid rgba(255,255,255,.2);transition:transform .15s}
.liv.sel{border-color:#fff;transform:scale(1.12);box-shadow:0 0 18px var(--accent)}
.liv.locked{filter:grayscale(.9) brightness(.45)}
.liv.locked::after{content:attr(data-req);position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-num);font-size:11px;font-weight:800;color:#fff}
.garage-right{position:absolute;top:17vh;right:6vw;width:340px;padding:24px}
.garage-right h2{font-family:var(--f-head);font-weight:900;font-size:38px;font-style:italic}
.garage-right .cls{letter-spacing:.3em;font-size:12px;color:var(--accent);margin-bottom:10px}
.garage-right p{font-size:14px;color:#c9d0e6;line-height:1.5;margin-bottom:18px}
.bar{margin:10px 0}
.bar label{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.25em;color:var(--dim);margin-bottom:5px}
.bar .track{height:8px;background:rgba(255,255,255,.08);transform:skewX(-20deg);overflow:hidden}
.bar .track i{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));box-shadow:0 0 12px var(--accent);transition:width .35s cubic-bezier(.2,1,.3,1)}
.lockmsg{margin-top:16px;color:#ffd23f;letter-spacing:.2em;font-size:13px}

/* ---------- how-to ---------- */
.howto-grid{position:absolute;top:17vh;left:6vw;right:6vw;bottom:14vh;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.howto-grid .panel{padding:24px;overflow:auto}
.keys li,.arsenal li{list-style:none;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:15px;line-height:1.5}
.arsenal li{display:flex;gap:12px;align-items:flex-start}
.arsenal .ic{flex:0 0 34px;height:34px}
.arsenal b{display:block;font-family:var(--f-head);font-size:13px;letter-spacing:.08em}
.arsenal small{color:var(--dim);font-size:13px}
p.small{font-size:14px;line-height:1.55;color:#c9d0e6}

/* ---------- settings ---------- */
.settings-panel{position:absolute;top:17vh;left:6vw;width:600px;padding:26px 30px}
.set-row{pointer-events:auto;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-left:3px solid transparent;cursor:pointer}
.set-row.focus{background:rgba(255,255,255,.06);border-left-color:var(--accent)}
.set-row label{letter-spacing:.2em;font-weight:700;font-size:15px}
.set-row .val{font-family:var(--f-num);font-weight:800;font-size:16px;display:flex;align-items:center;gap:14px}
.set-row .val .meter{width:180px;height:6px;background:rgba(255,255,255,.1)}
.set-row .val .meter i{display:block;height:100%;background:var(--accent)}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;opacity:0;transition:opacity .4s}
#hud.show{opacity:1}
#hud .hide{opacity:0}
.hud-tl{position:absolute;top:26px;left:34px;display:flex;flex-direction:column;gap:6px;transform:skewX(-8deg)}
.pos{display:flex;align-items:flex-start;line-height:.8;filter:drop-shadow(0 4px 12px rgba(0,0,0,.6))}
.pos b{font-family:var(--f-head);font-weight:900;font-size:108px;font-style:italic;background:linear-gradient(180deg,#fff 20%,#aab8e0 50%,#3a4266 52%,#dfe7ff 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pos i{font-family:var(--f-head);font-weight:800;font-style:italic;font-size:34px;margin-top:10px;color:var(--accent)}
.pos s{text-decoration:none;font-family:var(--f-head);font-weight:600;font-size:22px;margin-top:62px;margin-left:-40px;color:var(--dim)}
.pos.bump b{animation:bump .35s ease}
@keyframes bump{40%{transform:scale(1.25)}}
.lapbox{display:flex;align-items:baseline;gap:10px;margin-top:8px}
.lapbox span{font-size:13px;letter-spacing:.35em;color:var(--dim)}
.lapbox b{font-family:var(--f-head);font-weight:900;font-size:30px;font-style:italic}
.timebox b{font-family:var(--f-num);font-size:22px;font-weight:800;letter-spacing:.02em}
.timebox span{display:block;font-family:var(--f-num);font-size:13px;color:var(--dim);white-space:pre;margin-top:4px}
.hud-tr{position:absolute;top:22px;right:26px}
#minimap{width:220px;height:220px;filter:drop-shadow(0 0 10px rgba(0,0,0,.6))}
.hud-bl{position:absolute;bottom:30px;left:34px;display:flex;flex-direction:column;gap:14px;transform:skewX(-8deg)}
.weapon{display:grid;grid-template-columns:78px auto;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:10px 18px 10px 10px;background:linear-gradient(90deg,rgba(8,10,22,.88),rgba(8,10,22,.45));border-left:3px solid var(--accent);min-width:270px}
.w-icon{grid-row:1/3;width:78px;height:78px;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.w-icon svg{width:56px;height:56px;filter:drop-shadow(0 0 8px var(--accent))}
.w-name{font-family:var(--f-head);font-weight:800;font-size:18px;letter-spacing:.05em}
.w-ammo{font-family:var(--f-num);font-size:15px;color:var(--accent);letter-spacing:.2em}
.weapon.empty{opacity:.8;border-left-color:#555}.weapon.empty .w-name,.weapon.empty .w-ammo{color:#c8cfe6}
.weapon.new{animation:wnew .5s ease}
@keyframes wnew{0%{transform:scale(1.3);filter:brightness(3)}}
.hull{display:flex;align-items:center;gap:12px}
.hull span{font-size:12px;letter-spacing:.35em;color:var(--dim)}
.hull-bar{width:230px;height:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15)}
.hull-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#27ff9b,#b6ff3b);box-shadow:0 0 12px #27ff9b;transition:width .15s}
.hull-bar i.warn{background:linear-gradient(90deg,#ff9a1f,#ffd23f);box-shadow:0 0 12px #ff9a1f}
.hull-bar i.crit{background:linear-gradient(90deg,#ff1e3c,#ff5a5a);box-shadow:0 0 16px #ff1e3c;animation:pulse .5s infinite}
.hud-br{position:absolute;bottom:26px;right:34px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;transform:skewX(-8deg)}
.speed{display:flex;align-items:baseline;gap:10px}
.speed b{font-family:var(--f-head);font-weight:900;font-style:italic;font-size:96px;line-height:.9;min-width:3ch;text-align:right;background:linear-gradient(180deg,#fff 30%,#b9c6ee 55%,#6c7aa8);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.speed span{font-size:15px;letter-spacing:.3em;color:var(--dim)}
.boost{display:flex;align-items:center;gap:12px}
.boost span{font-size:12px;letter-spacing:.35em;color:var(--dim)}
.boost-bar{width:300px;height:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);position:relative;overflow:hidden}
.boost-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent2),#ffb800,#fff);box-shadow:0 0 18px var(--accent2)}
.boost-bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 28px,rgba(3,2,8,.9) 28px 30px)}
.boost-bar.full{box-shadow:0 0 22px #ffb800;border-color:#ffd23f}
.boost-bar.active i{animation:boostflash .12s linear infinite}
@keyframes boostflash{50%{filter:brightness(1.6)}}
.drift-charge{display:flex;gap:6px;height:8px}
.drift-charge i{width:40px;height:6px;background:rgba(255,255,255,.1);transform:skewX(-20deg)}
.drift-charge.l1 i:nth-child(1){background:#3cc8ff;box-shadow:0 0 10px #3cc8ff}
.drift-charge.l2 i:nth-child(-n+2){background:#ff9a1f;box-shadow:0 0 10px #ff9a1f}
.drift-charge.l3 i{background:#d04bff;box-shadow:0 0 10px #d04bff}

#tags{position:absolute;inset:0}
#tags .tag{position:absolute;transform:translate(-50%,-100%);text-align:center;font-weight:700;font-size:12px;letter-spacing:.14em;white-space:nowrap;text-shadow:0 0 6px #000,0 0 2px #000}
#tags .tag .hb{width:54px;height:4px;margin:3px auto 0;background:rgba(0,0,0,.5)}
#tags .tag .hb i{display:block;height:100%;background:#27ff9b}
#tags .tag.near{font-size:13px}
#reticle{position:absolute;width:76px;height:76px;margin:-38px 0 0 -38px;border:2px solid #ff1e3c;opacity:0;transition:opacity .15s;transform:rotate(45deg);box-shadow:0 0 14px #ff1e3c,inset 0 0 14px #ff1e3c}
#reticle.on{opacity:1;animation:ret .8s linear infinite}
@keyframes ret{50%{width:64px;height:64px;margin:-32px 0 0 -32px}}
.ret-label{position:absolute;left:50%;top:100%;transform:rotate(-45deg) translate(-10%,40%);font-weight:800;color:#ff1e3c;font-size:11px;letter-spacing:.3em}
#callout{position:absolute;left:0;right:0;top:24%;text-align:center;pointer-events:none}
.co{font-family:var(--f-head);font-weight:900;font-style:italic;font-size:clamp(40px,6vw,96px);letter-spacing:.02em;animation:coIn 1.6s cubic-bezier(.15,1.5,.3,1) forwards;background:linear-gradient(180deg,#fff 20%,var(--c1,#ffe600) 55%,var(--c2,#ff2a8a));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px var(--c2,#ff2a8a)) drop-shadow(0 6px 0 rgba(0,0,0,.4));transform:skewX(-10deg)}
.co small{display:block;font-size:.26em;letter-spacing:.35em;margin-top:.2em;font-style:normal}
@keyframes coIn{0%{opacity:0;transform:skewX(-10deg) scale(2.6)}12%{opacity:1;transform:skewX(-10deg) scale(.94)}20%{transform:skewX(-10deg) scale(1.02)}80%{opacity:1;transform:skewX(-10deg) scale(1)}100%{opacity:0;transform:skewX(-10deg) scale(1.05) translateY(-20px)}}
#combo{position:absolute;right:34px;top:48%;text-align:right;font-family:var(--f-head);font-weight:900;font-style:italic}
#combo .cv{font-size:46px;background:linear-gradient(180deg,#fff,#ffd23f);-webkit-background-clip:text;background-clip:text;color:transparent}
#combo .cl{font-size:12px;letter-spacing:.3em;color:#ffd23f}
#combo .ct{height:3px;background:#ffd23f;margin-top:6px;margin-left:auto;box-shadow:0 0 10px #ffd23f}
#countdown{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.cd{font-family:var(--f-head);font-weight:900;font-style:italic;font-size:min(34vw,300px);animation:cd 1s cubic-bezier(.1,1.4,.3,1) forwards;background:linear-gradient(180deg,#fff 30%,var(--accent) 70%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 40px var(--accent))}
.cd.go{background:linear-gradient(180deg,#fff 20%,#ffe600 55%,#ff2a8a);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 50px #ff2a8a)}
@keyframes cd{0%{opacity:0;transform:scale(3)}15%{opacity:1;transform:scale(1)}70%{opacity:1}100%{opacity:0;transform:scale(.7)}}
#wrongway{position:absolute;left:50%;top:38%;transform:translateX(-50%);font-family:var(--f-head);font-weight:900;font-size:48px;color:#ff1e3c;text-shadow:0 0 24px #ff1e3c;opacity:0;letter-spacing:.1em}
#wrongway.on{animation:pulse .6s infinite;opacity:1}
#feed{position:absolute;right:30px;top:268px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.fe{white-space:nowrap;padding:6px 14px;background:linear-gradient(270deg,rgba(6,8,18,.92),rgba(6,8,18,.55) 70%,rgba(6,8,18,0));text-shadow:0 1px 2px #000;font-size:14px;letter-spacing:.1em;font-weight:700;animation:feIn .3s ease both}
.fe .k{color:var(--accent)}
.fe .v{color:#ff5a7a}
.fe .me{color:#ffe600}
@keyframes feIn{from{opacity:0;transform:translateX(30px)}}
#lvlcard{position:absolute;left:7vw;bottom:18vh;opacity:0;transition:opacity .6s}
#lvlcard.on{opacity:1}
.lc-num{font-family:var(--f-num);font-weight:800;letter-spacing:.4em;color:var(--accent);font-size:15px}
.lc-name{font-family:var(--f-head);font-weight:900;font-style:italic;font-size:clamp(40px,6vw,92px);line-height:1;text-shadow:0 0 40px rgba(0,0,0,.6);transform:skewX(-8deg)}
.lc-tag{letter-spacing:.5em;font-size:14px;color:#dfe6ff;margin-top:10px}
#skiphint{position:absolute;right:4vw;bottom:5vh;font-size:12px;letter-spacing:.3em;color:var(--dim);opacity:0}
#skiphint.on{opacity:1}

/* ---------- pause ---------- */
#pause{display:grid;place-items:center;background:rgba(3,2,10,.55);backdrop-filter:blur(6px)}
.pause-box{padding:40px 50px}
.pause-box h1{font-family:var(--f-head);font-weight:900;font-style:italic;font-size:54px;margin-bottom:26px}

/* ---------- results ---------- */
#results{background:linear-gradient(90deg,rgba(3,2,10,.88),rgba(3,2,10,.5) 60%,rgba(3,2,10,.7))}
.res-wrap{position:absolute;inset:8vh 6vw;display:flex;gap:4vw;align-items:flex-start}
.res-left{flex:1;display:flex;flex-direction:column;gap:18px}
.res-place{font-family:var(--f-head);font-weight:900;font-style:italic;font-size:clamp(80px,11vw,180px);line-height:.85;background:linear-gradient(180deg,#fff 20%,var(--c1,#ffe600) 60%,var(--c2,#ff2a8a));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px var(--c2,#ff2a8a));animation:logoIn 1s cubic-bezier(.2,1.4,.3,1) both;transform:skewX(-9deg)}
.res-place small{font-size:.35em}
.res-level{letter-spacing:.4em;color:var(--dim);font-size:14px}
.res-stars{display:flex;gap:16px}
.res-stars .rs{display:flex;flex-direction:column;align-items:center;gap:6px;width:120px;opacity:0;animation:starIn .5s cubic-bezier(.2,1.6,.3,1) forwards}
.res-stars .rs i{font-style:normal;font-size:60px;color:#2a2d3a;line-height:1}
.res-stars .rs.on i{color:#ffd23f;text-shadow:0 0 22px #ffb400,0 0 60px #ff7a00}
.res-stars .rs span{font-size:11px;letter-spacing:.2em;color:var(--dim);text-align:center}
.res-stars .rs.on span{color:#fff}
@keyframes starIn{from{opacity:0;transform:scale(2.5) rotate(-40deg)}to{opacity:1;transform:none}}
.res-score{padding:18px 24px;max-width:560px}
.sc-row{white-space:nowrap;gap:20px;display:flex;justify-content:space-between;padding:6px 0;font-size:15px;letter-spacing:.14em;opacity:0;animation:feIn .35s ease forwards}
.sc-row b{font-family:var(--f-num)}
.sc-row.total{border-top:1px solid rgba(255,255,255,.2);margin-top:6px;padding-top:12px;font-size:20px}
.sc-row.total b{color:#ffd23f;font-size:26px}
.sc-row.unlock{color:#27ff9b}
.res-table{width:520px;padding:22px 24px}
.rt-row{display:grid;grid-template-columns:44px 1fr 110px 70px;gap:10px;align-items:center;padding:9px 6px;border-bottom:1px solid rgba(255,255,255,.06);font-size:15px;opacity:0;animation:feIn .35s ease forwards}
.rt-row .p{font-family:var(--f-head);font-weight:900;font-style:italic;font-size:22px}
.rt-row .n{font-weight:700;letter-spacing:.1em;display:flex;align-items:center;gap:10px}
.rt-row .n i{width:10px;height:10px;border-radius:2px;transform:rotate(45deg)}
.rt-row .t{font-family:var(--f-num);text-align:right}
.rt-row .kd{font-family:var(--f-num);text-align:right;color:#ff5a7a}
.rt-row.me{background:linear-gradient(90deg,rgba(255,230,0,.18),transparent)}
.rt-head{font-size:11px;letter-spacing:.3em;color:var(--dim);opacity:1;animation:none}

#toast{position:absolute;top:30px;left:50%;transform:translateX(-50%);padding:12px 26px;background:var(--panel);border:1px solid var(--accent);letter-spacing:.2em;font-weight:700;opacity:0;transition:opacity .3s}
#toast.on{opacity:1}
#fade{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .5s;pointer-events:none}
#fade.on{opacity:1}

@media (max-width:1100px){
  .level-grid{width:88vw;grid-template-columns:repeat(5,1fr)}
  .level-detail{display:none}
  .howto-grid{grid-template-columns:1fr 1fr}
  .btn-main{min-width:260px}
  .pos b{font-size:80px}
  .speed b{font-size:70px}
  #minimap{width:160px;height:160px}
}
.hud-tl,.hud-tr,.hud-bl,.hud-br{transition:opacity .6s}
#hud.intro .hud-tl,#hud.intro .hud-tr,#hud.intro .hud-bl,#hud.intro .hud-br,#hud.intro #tags{opacity:0}
/* dev capture mode: hidden pages don't tick CSS animations, so render final states */
html.dev *{transition:none !important}
html.dev .co,html.dev .cd,html.dev .res-place,html.dev .rs,html.dev .sc-row,html.dev .rt-row,html.dev .fe,html.dev #title .logo{animation:none !important;opacity:1 !important}
#pops{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:4px;pointer-events:none}
.pop{font-family:var(--f-head);font-weight:800;font-style:italic;font-size:22px;letter-spacing:.06em;color:var(--pc,#fff);text-shadow:0 0 14px var(--pc,#fff),0 2px 0 rgba(0,0,0,.5);animation:popIn 1.3s cubic-bezier(.2,1.5,.3,1) forwards;white-space:nowrap}
.pop b{color:#fff;margin-left:8px;font-size:.8em}
@keyframes popIn{0%{opacity:0;transform:translateY(20px) scale(1.5)}15%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}
#hint{position:absolute;left:50%;top:15%;transform:translateX(-50%);padding:10px 22px;background:rgba(8,10,22,.7);border:1px solid rgba(255,255,255,.18);border-left:3px solid var(--accent);font-weight:700;letter-spacing:.14em;font-size:15px;opacity:0;transition:opacity .4s;white-space:nowrap}
#hint.on{opacity:1}
html.dev .pop{animation:none !important}

#threat{position:absolute;left:50%;bottom:30%;transform:translateX(-50%);font-family:var(--f-head);font-weight:800;font-size:18px;letter-spacing:.12em;color:#ff3b3b;text-shadow:0 0 16px #ff1e3c,0 2px 0 #000;opacity:0;white-space:nowrap;text-align:center}
#threat small{display:block;font-size:11px;letter-spacing:.4em;margin-top:4px;color:#ffb0b0}
#threat.on{opacity:1}
#threat.lock{animation:pulse .6s infinite}
#threat.incoming{animation:pulse .25s infinite;font-size:20px}

/* HUD legibility: soft scrims behind each corner cluster + shadowed labels */
#hud::before{content:"";position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(ellipse 34% 30% at 0% 0%,rgba(0,0,0,.5),transparent 70%),
 radial-gradient(ellipse 30% 30% at 0% 100%,rgba(0,0,0,.5),transparent 70%),
 radial-gradient(ellipse 34% 30% at 100% 100%,rgba(0,0,0,.5),transparent 70%),
 radial-gradient(ellipse 22% 34% at 100% 0%,rgba(0,0,0,.35),transparent 70%)}
.lapbox span,.hull span,.boost span,.speed span,.w-ammo,.w-name,.timebox span{text-shadow:0 1px 3px #000,0 0 8px rgba(0,0,0,.6)}
.lapbox span,.hull span,.boost span,.speed span{color:#c7cde6}
.w-ammo{color:#dfe8ff}
.scr-foot .nav{white-space:nowrap}
#tags .tag.pip .nm{display:none}
#tags .tag.pip .hb{width:26px}
#slamcue{position:absolute;left:50%;top:58%;transform:translateX(-50%);display:flex;gap:260px;pointer-events:none;font-family:var(--f-head);font-weight:900;font-size:26px;color:#ff2a8a;text-shadow:0 0 14px #ff2a8a}
#slamcue span{opacity:0;transition:opacity .12s}
#slamcue span.on{opacity:1;animation:pulse .5s infinite}
.sc-row.best{color:#9dff00}

#lockBadge{position:absolute;left:50%;bottom:17vh;transform:translateX(-50%);font-size:40px;text-align:center;opacity:0;transition:opacity .3s;filter:drop-shadow(0 0 12px #000)}
#lockBadge small{display:block;font-size:12px;letter-spacing:.3em;color:#ffd23f;margin-top:6px;white-space:nowrap}
#lockBadge.on{opacity:1}

.lvl .shot{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .6s}
.lvl.has-shot .shot{opacity:1}
.lvl.has-shot .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,transparent 50%,rgba(0,0,0,.88))}
.lvl .num,.lvl .nm,.lvl .st{z-index:2}
.lvl.locked::after{z-index:3}

#cups{background:linear-gradient(180deg,rgba(3,2,10,.78),rgba(3,2,10,.45) 40%,rgba(3,2,10,.85))}
.cup-grid{position:absolute;top:19vh;left:6vw;right:6vw;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cup{pointer-events:auto;cursor:pointer;padding:26px;min-height:46vh;display:flex;flex-direction:column;gap:14px;transition:transform .18s}
.cup h2{font-family:var(--f-head);font-weight:900;font-style:italic;font-size:32px;color:var(--cc)}
.cup .ct{letter-spacing:.3em;font-size:12px;color:var(--dim)}
.cup ol{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:6px}
.cup li{display:flex;gap:12px;align-items:center;font-weight:700;letter-spacing:.08em;font-size:14px;padding:6px 10px;background:rgba(255,255,255,.04)}
.cup li i{font-style:normal;font-family:var(--f-num);color:var(--cc)}
.cup .trophy{margin-top:auto;font-size:44px;text-align:center;filter:drop-shadow(0 0 14px var(--tc,#000))}
.cup .trophy small{display:block;font-size:12px;letter-spacing:.3em;color:#c7cde6;margin-top:4px}
.cup.focus{transform:translateY(-6px);box-shadow:0 0 0 2px #fff,0 0 30px var(--cc)}
.cup.locked{filter:grayscale(1) brightness(.45)}
.rt-row .pts{font-family:var(--f-num);text-align:right;color:#ffd23f}
.rt-row.cuprow{grid-template-columns:44px 1fr 70px 70px}

*{scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}
.howto-grid .panel{overflow:hidden}
.keys li,.arsenal li{padding:6px 0;font-size:14px}

/* HYPERCHROME HUD: a thin prismatic band sweeps across the chrome numerals */
.pos b,.speed b{background-image:linear-gradient(100deg,transparent 42%,rgba(255,60,160,.9) 46%,rgba(255,230,0,.9) 48.5%,rgba(0,255,170,.9) 51%,rgba(0,200,255,.9) 53.5%,rgba(170,80,255,.9) 56%,transparent 60%),linear-gradient(180deg,#fff 20%,#b9c6ee 52%,#4a5480 54%,#e8eeff 90%);background-size:300% 100%,100% 100%;background-repeat:no-repeat;animation:prism 4.5s linear infinite}
@keyframes prism{0%{background-position:160% 0,0 0}60%,100%{background-position:-60% 0,0 0}}
.boost-bar.full i{background:linear-gradient(90deg,#ff2a8a,#ffe600,#00ffa2,#00c8ff,#b04bff,#ff2a8a);background-size:200% 100%;animation:hue 1.2s linear infinite}
.co{filter:drop-shadow(0 0 22px var(--c2,#ff2a8a)) drop-shadow(0 6px 0 rgba(0,0,0,.4)) drop-shadow(3px 0 0 rgba(0,234,255,.45)) drop-shadow(-3px 0 0 rgba(255,42,138,.45))}
html.dev .pos b,html.dev .speed b{animation:none}

.cup-classes{position:absolute;top:14.5vh;left:6vw;display:flex;gap:10px}
.cls-tab{pointer-events:auto;cursor:pointer;padding:8px 18px;transform:skewX(-12deg);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.cls-tab b{display:block;font-family:var(--f-head);font-weight:900;font-style:italic;letter-spacing:.06em;transform:skewX(12deg)}
.cls-tab small{display:block;font-size:10px;letter-spacing:.2em;color:var(--dim);transform:skewX(12deg);white-space:nowrap}
.cls-tab.on{background:linear-gradient(90deg,var(--accent2),rgba(0,0,0,0));border-color:#fff}
.cls-tab.locked{opacity:.45}
.cup-grid{top:24vh}
.cup{min-height:42vh}
.cup.focus{transform:translateY(-8px) scale(1.02);box-shadow:0 0 0 3px #fff,0 0 44px var(--cc),inset 0 0 60px rgba(255,255,255,.04)}
.cup.focus h2{text-shadow:0 0 24px var(--cc)}
#slamcue span.warn{color:#ff3b3b;text-shadow:0 0 16px #ff1e3c;opacity:1;animation:pulse .18s infinite}

#hGhost{display:block;font-style:normal;font-family:var(--f-num);font-size:14px;font-weight:800;letter-spacing:.05em;margin-top:2px;text-shadow:0 1px 3px #000}
#hGhost.ahead{color:#27ff9b}
#hGhost.behind{color:#ff6a8a}

#ctxlost{position:fixed;inset:0;display:grid;place-items:center;background:rgba(3,2,10,.92);z-index:99;pointer-events:auto}
#ctxlost div{text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
#ctxlost b{font-family:var(--f-head);font-size:32px;font-style:italic}
#ctxlost small{letter-spacing:.3em;color:var(--dim)}
#ctxlost button{all:unset;cursor:pointer;padding:12px 30px;background:var(--accent2);font-weight:800;letter-spacing:.3em;transform:skewX(-12deg)}

#shareCode{margin:14px 0 4px;padding:12px 16px;font-family:var(--f-num);font-size:14px;letter-spacing:.06em;color:#fff;background:rgba(10,14,30,.8);border:1px solid rgba(0,234,255,.5);border-radius:8px;user-select:all;-webkit-user-select:all;box-shadow:0 0 24px rgba(0,234,255,.18)}
.boot-fail{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px}.boot-fail b{font-family:var(--f-head);font-size:clamp(18px,2.4vw,30px);font-style:italic;color:#fff;line-height:1.3}.boot-fail small{display:block;margin-top:14px;font-family:var(--f-ui);font-size:13px;letter-spacing:.18em;color:var(--dim)}
/* short viewports (720p, laptops): the 7-item menu must fit with its logo */
@media (max-height:820px){
  .menu-left{gap:3vh}
  .logo.small .logo-super{font-size:28px}
  .logo.small .logo-mega{font-size:54px}
  .logo.small .logo-ultra{font-size:14px}
  .navlist{gap:7px}
  .nav.btn-main{padding:8px 24px 6px}
  .btn-main span{font-size:22px}
  .btn-main em{font-size:11px}
  .profile{padding:18px 24px}
  .stat-row{padding:6px 0}
}