/* ============ VELOCITY APEX — style.css ============ */
:root{
  --bg:#03060a; --bg2:#050d10;
  --acc:#00ff9c; --acc2:#00e5ff; --warn:#ff2d55; --gold:#ffd166;
  --txt:#d6ffe8; --dim:#5c8f7a;
  --glass:rgba(0,255,156,.05); --border:rgba(0,255,156,.22);
  --panel:rgba(3,10,8,.86);
  --r:8px; --f1:'Orbitron',sans-serif; --f2:'Share Tech Mono',monospace;
  --grid:rgba(0,255,156,.06);
  --sky:#03060a; --fog:#04121a; --road:#14181e; --line:#00ff9c; --ground:#061014;
}
html[data-theme="neon"]{
  --bg:#06060e; --bg2:#0a0a20; --acc:#00e5ff; --acc2:#ff2d75; --warn:#ff2d55; --gold:#ffd700;
  --txt:#e8e8ff; --dim:#8a8ab5; --glass:rgba(255,255,255,.05); --border:rgba(0,229,255,.25);
  --panel:rgba(10,10,26,.86); --grid:rgba(0,229,255,.07); --f2:'Rajdhani',sans-serif;
  --sky:#06060e; --fog:#0d0d2a; --road:#16162a; --line:#00e5ff; --ground:#0a0a1c;
}
html[data-theme="synth"]{
  --bg:#12021f; --bg2:#22043a; --acc:#ff56d0; --acc2:#7c4dff; --warn:#ff3b6b; --gold:#ffcf5c;
  --txt:#ffe6fb; --dim:#a878c4; --glass:rgba(255,86,208,.06); --border:rgba(255,86,208,.28);
  --panel:rgba(20,3,34,.88); --grid:rgba(255,86,208,.08); --f2:'Rajdhani',sans-serif;
  --sky:#12021f; --fog:#2a0748; --road:#20112f; --line:#ff56d0; --ground:#180330;
}
html[data-theme="ember"]{
  --bg:#160805; --bg2:#2a0f06; --acc:#ff7a18; --acc2:#ffd166; --warn:#ff2d20; --gold:#ffd166;
  --txt:#ffe9d6; --dim:#b08363; --glass:rgba(255,122,24,.06); --border:rgba(255,122,24,.28);
  --panel:rgba(22,8,5,.88); --grid:rgba(255,122,24,.08); --f2:'Rajdhani',sans-serif;
  --sky:#160805; --fog:#3a1408; --road:#231512; --line:#ff9d3c; --ground:#1c0c07;
}
html[data-theme="ice"]{
  --bg:#04121c; --bg2:#072536; --acc:#7fe6ff; --acc2:#c9f4ff; --warn:#ff5d73; --gold:#ffe9a8;
  --txt:#e6faff; --dim:#79a6bd; --glass:rgba(127,230,255,.06); --border:rgba(127,230,255,.26);
  --panel:rgba(4,18,28,.88); --grid:rgba(127,230,255,.08); --f2:'Rajdhani',sans-serif;
  --sky:#04121c; --fog:#0d3348; --road:#1b2d38; --line:#c9f4ff; --ground:#0a2130;
}
html[data-theme="void"]{
  --bg:#05060a; --bg2:#0d1020; --acc:#8b9dff; --acc2:#c9a7ff; --warn:#ff4d6d; --gold:#e8d7a0;
  --txt:#e6e9ff; --dim:#7d84a8; --glass:rgba(139,157,255,.06); --border:rgba(139,157,255,.24);
  --panel:rgba(8,10,20,.9); --grid:rgba(139,157,255,.07); --f2:'Rajdhani',sans-serif;
  --sky:#05060a; --fog:#0e1128; --road:#171a26; --line:#8b9dff; --ground:#090b14;
}
html[data-theme="toxic"]{
  --bg:#060c04; --bg2:#0d1b06; --acc:#9dff00; --acc2:#00ffb2; --warn:#ff3b30; --gold:#f2ff6b;
  --txt:#e8ffd6; --dim:#7f9c5e; --glass:rgba(157,255,0,.06); --border:rgba(157,255,0,.24);
  --panel:rgba(6,14,4,.9); --grid:rgba(157,255,0,.07); --f2:'Rajdhani',sans-serif;
  --sky:#060c04; --fog:#112006; --road:#161d14; --line:#9dff00; --ground:#0b1408;
}
html[data-theme="crimson"]{
  --bg:#100205; --bg2:#26060e; --acc:#ff2d55; --acc2:#ff9f68; --warn:#ffd166; --gold:#ffb703;
  --txt:#ffe3e9; --dim:#b0707f; --glass:rgba(255,45,85,.07); --border:rgba(255,45,85,.26);
  --panel:rgba(16,2,5,.9); --grid:rgba(255,45,85,.07); --f2:'Rajdhani',sans-serif;
  --sky:#100205; --fog:#2d0710; --road:#231017; --line:#ff2d55; --ground:#180409;
}
html[data-theme="light"]{
  --bg:#eef2f6; --bg2:#ffffff; --acc:#0a7d5a; --acc2:#0f6fd1; --warn:#c0392b; --gold:#b8860b;
  --txt:#12202b; --dim:#5d6f7d; --glass:rgba(10,125,90,.06); --border:rgba(18,32,43,.16);
  --panel:rgba(255,255,255,.92); --grid:rgba(18,32,43,.05); --f2:'Rajdhani',sans-serif;
  --sky:#bcd6e8; --fog:#cfe2ef; --road:#4c5560; --line:#ffffff; --ground:#8fb08c;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{background:var(--bg);color:var(--txt);font-family:var(--f2);user-select:none;-webkit-tap-highlight-color:transparent}
canvas#game-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.hidden{display:none!important}
b,strong{font-weight:700}

#scanlines{position:fixed;inset:0;z-index:400;pointer-events:none;opacity:.28;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}
#vignette{position:fixed;inset:0;z-index:390;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.55) 100%)}
html[data-theme="light"] #scanlines{display:none}

/* ---------- loading ---------- */
#loading-screen{position:fixed;inset:0;z-index:9999;background:radial-gradient(circle at 50% 40%,var(--bg2),var(--bg) 70%);display:flex;align-items:center;justify-content:center}
.loader-content{text-align:center}
.loader-logo{font-family:var(--f1);font-size:clamp(1.8rem,5.5vw,3.6rem);font-weight:900;color:var(--acc);letter-spacing:8px;text-shadow:0 0 30px color-mix(in srgb,var(--acc) 50%,transparent)}
.loader-logo .accent{color:var(--acc2)}
.loader-subtitle{color:var(--dim);font-size:.8rem;letter-spacing:5px;margin-top:14px}
.loader-bar-container{width:min(320px,70vw);height:4px;background:var(--glass);border:1px solid var(--border);margin:24px auto 10px;overflow:hidden}
.loader-bar{height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .2s}
.loader-percent{color:var(--dim);font-size:.75rem;letter-spacing:3px}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:scale(.995)}to{opacity:1;transform:none}}
.overlay{position:absolute;inset:0;background:
  linear-gradient(0deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 80%,transparent) 100%),
  repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 44px),
  repeating-linear-gradient(0deg,var(--grid) 0 1px,transparent 1px 44px);backdrop-filter:blur(8px)}
.overlay.dark{background:rgba(0,0,0,.72);backdrop-filter:blur(10px)}
.screen-inner{position:relative;z-index:1;width:min(560px,92vw);max-height:92vh;overflow-y:auto;padding:26px;text-align:center;scrollbar-width:thin}
.screen-inner.wide{width:min(1080px,94vw)}
.screen-inner::-webkit-scrollbar{width:5px}
.screen-inner::-webkit-scrollbar-thumb{background:var(--border)}

.game-title{font-family:var(--f1);font-weight:900;font-size:clamp(2rem,7vw,4.4rem);letter-spacing:6px;color:var(--acc);text-shadow:0 0 40px color-mix(in srgb,var(--acc) 45%,transparent)}
.game-title .accent{color:var(--acc2)}
.tagline{color:var(--dim);letter-spacing:6px;margin:6px 0 20px;font-size:.8rem}
.chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.chip{border:1px solid var(--border);background:var(--glass);padding:7px 14px;border-radius:var(--r);font-size:.8rem;letter-spacing:2px;color:var(--txt)}
.chip.inline{display:inline-block;margin-left:10px;font-size:.75rem}
.chip b{color:var(--acc)}
.menu-btns{display:flex;flex-direction:column;gap:11px;max-width:340px;margin:0 auto}
.foot{margin-top:22px;color:var(--dim);font-size:.68rem;letter-spacing:2px;line-height:1.7}
.hintline{color:var(--dim);font-size:.75rem;margin:14px 0 4px;letter-spacing:1px}
.hintline .warn{color:var(--warn)}

.btn{font-family:var(--f1);font-weight:700;letter-spacing:3px;font-size:.82rem;padding:13px 18px;border-radius:var(--r);
  border:1px solid var(--border);background:var(--glass);color:var(--txt);cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.2),background .18s,box-shadow .18s,border-color .18s}
.btn:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--acc) 12%,transparent);border-color:var(--acc);box-shadow:0 8px 30px -10px var(--acc)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-primary{background:linear-gradient(100deg,color-mix(in srgb,var(--acc) 26%,transparent),color-mix(in srgb,var(--acc2) 22%,transparent));border-color:var(--acc)}
.btn-danger{border-color:var(--warn);color:var(--warn)}
.btn-danger:hover{background:color-mix(in srgb,var(--warn) 16%,transparent);box-shadow:0 8px 30px -10px var(--warn)}
.btn[disabled]{opacity:.4;pointer-events:none}
.row-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.stitle{font-family:var(--f1);font-size:clamp(1.2rem,3.4vw,2rem);letter-spacing:5px;margin-bottom:18px}
.stitle .accent{color:var(--acc)}
.stitle-sm{font-family:var(--f1);font-size:.85rem;letter-spacing:4px;margin:20px 0 10px;color:var(--dim)}

/* ---------- maps ---------- */
.map-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.mapcard{position:relative;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;cursor:pointer;background:var(--panel);
  transition:transform .18s,box-shadow .18s,border-color .18s}
.mapcard:hover{transform:translateY(-3px);box-shadow:0 14px 40px -18px var(--acc)}
.mapcard.selected{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 14px 40px -18px var(--acc)}
.mapcard canvas{display:block;width:100%;height:118px;background:var(--bg2)}
.mapinfo{padding:10px 12px;text-align:left}
.mapinfo .mname{font-family:var(--f1);font-size:.82rem;letter-spacing:2px}
.mapinfo .mdesc{color:var(--dim);font-size:.7rem;margin-top:4px}
.mtag{position:absolute;top:8px;right:8px;background:var(--panel);border:1px solid var(--border);color:var(--acc);font-size:.62rem;letter-spacing:2px;padding:3px 7px;border-radius:4px}

.diff-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}

/* ---------- race modes ---------- */
.mode-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;text-align:left}
.mcard{position:relative;border:1px solid var(--border);background:var(--panel);border-radius:var(--r);padding:14px 15px;cursor:pointer;overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.2),border-color .18s,box-shadow .18s}
.mcard::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,color-mix(in srgb,var(--acc) 18%,transparent) 50%,transparent 60%);
  transform:translateX(-120%);transition:transform .6s}
.mcard:hover::after{transform:translateX(120%)}
.mcard:hover{transform:translateY(-3px);border-color:var(--acc);box-shadow:0 16px 42px -20px var(--acc)}
.mcard.selected{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent);box-shadow:0 0 0 1px var(--acc)}
.micon{font-size:1.25rem;color:var(--acc);line-height:1}
.mname2{font-family:var(--f1);letter-spacing:4px;font-size:.86rem;margin:8px 0 6px}
.mdesc2{color:var(--dim);font-size:.7rem;line-height:1.55}
.mmeta{margin-top:8px;color:var(--gold);font-size:.63rem;letter-spacing:2px}

.dcard{border:1px solid var(--border);background:var(--glass);border-radius:var(--r);padding:12px;cursor:pointer;transition:.16s}
.dcard:hover{transform:translateY(-2px);border-color:var(--acc)}
.dcard.selected{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent)}
.dname{font-family:var(--f1);letter-spacing:3px;font-size:.8rem}
.ddesc{color:var(--dim);font-size:.68rem;margin:5px 0}
.dreward{color:var(--gold);font-size:.72rem}

/* ---------- grids / cards ---------- */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.card{border:1px solid var(--border);background:var(--panel);border-radius:var(--r);padding:14px;text-align:left}
.card h4{font-family:var(--f1);font-size:.82rem;letter-spacing:2px;margin-bottom:6px}
.card p{color:var(--dim);font-size:.72rem;line-height:1.5}
.card .price{color:var(--gold);font-size:.8rem;margin:8px 0}
.card .btn{width:100%;margin-top:8px;padding:9px}
.owned{color:var(--acc);font-size:.72rem;letter-spacing:2px}

.tabs{display:flex;gap:8px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}
.tab{font-family:var(--f1);letter-spacing:3px;font-size:.72rem;padding:9px 16px;border-radius:var(--r);border:1px solid var(--border);background:transparent;color:var(--dim);cursor:pointer;transition:.16s}
.tab.active{color:var(--acc);border-color:var(--acc);background:var(--glass)}

.garage-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:14px;text-align:left}
@media(max-width:760px){.garage-wrap{grid-template-columns:1fr}}
.car-list{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow-y:auto;padding-right:4px}
.crow{border:1px solid var(--border);border-radius:var(--r);padding:11px 13px;cursor:pointer;background:var(--glass);transition:.16s;display:flex;justify-content:space-between;align-items:center;gap:8px}
.crow:hover{transform:translateX(3px);border-color:var(--acc)}
.crow.sel{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent)}
.crow .cn{font-family:var(--f1);font-size:.76rem;letter-spacing:2px}
.dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 10px currentColor}
.car-detail{border:1px solid var(--border);border-radius:var(--r);background:var(--panel);padding:16px}
.stat{margin:9px 0}
.stat .sl{display:flex;justify-content:space-between;font-size:.7rem;color:var(--dim);letter-spacing:2px}
.sbar{height:6px;background:var(--glass);border:1px solid var(--border);border-radius:3px;overflow:hidden;margin-top:4px}
.sfill{height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .5s cubic-bezier(.2,.9,.3,1)}

/* ---------- customise ---------- */
.custom-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;text-align:left}
.cpanel{border:1px solid var(--border);background:var(--panel);border-radius:var(--r);padding:14px}
.cpanel label{display:block;font-family:var(--f1);font-size:.7rem;letter-spacing:3px;color:var(--dim);margin:10px 0 8px}
.cpanel label:first-child{margin-top:0}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw{width:28px;height:28px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:transform .15s}
.sw:hover{transform:scale(1.14)}
.sw.sel{border-color:var(--txt);box-shadow:0 0 12px currentColor}
.cpick{margin-top:10px;width:100%;height:34px;background:transparent;border:1px solid var(--border);border-radius:var(--r);cursor:pointer}

/* ---------- settings ---------- */
.settings{display:flex;flex-direction:column;gap:14px;text-align:left}
.srow{border:1px solid var(--border);background:var(--panel);border-radius:var(--r);padding:13px 15px}
.srow label{display:block;font-family:var(--f1);font-size:.7rem;letter-spacing:3px;color:var(--dim);margin-bottom:9px}
.seg{display:flex;gap:6px}
.seg.wrap{flex-wrap:wrap}
.seg.grid-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px}
.seg button{flex:1;min-width:0;width:100%;font-family:var(--f1);font-size:.64rem;letter-spacing:2px;padding:10px 6px;border-radius:6px;
  border:1px solid var(--border);background:transparent;color:var(--dim);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:transform .16s,background .16s,color .16s,border-color .16s}
.seg button:hover{color:var(--txt);border-color:var(--acc);transform:translateY(-1px)}
.seg button.on{color:var(--bg);background:var(--acc);border-color:var(--acc);font-weight:700;box-shadow:0 6px 20px -10px var(--acc)}
.range{width:100%;-webkit-appearance:none;height:4px;border-radius:2px;background:var(--glass);border:1px solid var(--border);outline:none}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--acc);cursor:pointer;box-shadow:0 0 12px var(--acc)}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:60;pointer-events:none;font-family:var(--f1)}
.hud-top{position:absolute;top:14px;left:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hud-box{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:7px 12px;min-width:78px;backdrop-filter:blur(6px)}
.hud-box .lbl{display:block;font-size:.55rem;letter-spacing:3px;color:var(--dim)}
.hud-box .val{display:block;font-size:.98rem;font-weight:700;color:var(--acc);letter-spacing:1px}
.hud-btn{pointer-events:auto;background:var(--panel);border:1px solid var(--border);color:var(--acc);border-radius:var(--r);padding:10px 14px;cursor:pointer;font-size:.85rem;transition:.16s}
.hud-btn:hover{background:color-mix(in srgb,var(--acc) 16%,transparent);transform:scale(1.05)}

.hud-right{position:absolute;right:16px;bottom:16px;display:flex;flex-direction:column;align-items:center;gap:9px}
.speedo{position:relative;width:clamp(110px,17vw,168px);aspect-ratio:1}
.speedo svg{width:100%;height:100%;transform:rotate(135deg)}
.sp-bg,.sp-fg{fill:none;stroke-width:9;stroke-linecap:round}
.sp-bg{stroke:var(--glass);stroke-dasharray:396 528}
.sp-fg{stroke:var(--acc);stroke-dasharray:0 528;transition:stroke-dasharray .07s linear,stroke .3s;filter:drop-shadow(0 0 8px var(--acc))}
.sp-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.sp-num b{font-size:clamp(1.4rem,3.6vw,2.4rem);color:var(--txt);line-height:1}
.sp-num i{font-style:normal;font-size:.55rem;letter-spacing:3px;color:var(--dim)}
.nitro-wrap{position:relative;width:clamp(110px,17vw,168px);height:16px;background:var(--panel);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.nitro-bar{height:100%;width:100%;background:linear-gradient(90deg,var(--acc2),var(--acc));transition:width .08s linear}
.nitro-wrap span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.55rem;letter-spacing:3px;color:var(--bg);font-weight:700;mix-blend-mode:difference}
.nitro-wrap.cooling .nitro-bar{background:linear-gradient(90deg,var(--warn),var(--gold))}
.gearbox{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:5px 14px;font-size:.7rem;letter-spacing:3px;color:var(--dim)}
.gearbox b{color:var(--acc);font-size:.95rem}

.minimap{position:absolute;left:14px;bottom:14px;width:clamp(110px,15vw,164px);aspect-ratio:1;background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:7px}
.minimap svg{width:100%;height:100%}
#mini-path{fill:none;stroke:var(--dim);stroke-width:7;stroke-linejoin:round;opacity:.6}

#race-msg{position:absolute;top:22%;left:50%;transform:translateX(-50%);font-size:clamp(1rem,3vw,1.8rem);letter-spacing:6px;color:var(--acc);text-shadow:0 0 24px var(--acc);opacity:0;transition:opacity .25s;text-align:center}
#race-msg.show{opacity:1}
#countdown-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;pointer-events:none}
#lights{display:flex;gap:12px;opacity:0;transition:opacity .3s}
#lights.on{opacity:1}
#lights i{width:clamp(20px,3.2vw,34px);height:clamp(20px,3.2vw,34px);border-radius:50%;background:rgba(255,255,255,.07);
  border:2px solid var(--border);transition:background .12s,box-shadow .12s}
#lights i.lit{background:var(--warn);border-color:var(--warn);box-shadow:0 0 26px var(--warn)}
#lights i.go{background:var(--acc);border-color:var(--acc);box-shadow:0 0 32px var(--acc)}
#countdown{font-family:var(--f1);font-size:clamp(3.4rem,15vw,11rem);font-weight:900;color:var(--acc);text-shadow:0 0 60px var(--acc);opacity:0;line-height:1}
#countdown.pop{animation:cpop .9s cubic-bezier(.2,.9,.3,1) forwards}
#countdown-sub{font-family:var(--f1);font-size:.7rem;letter-spacing:5px;color:var(--txt);opacity:0;transition:opacity .3s;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:8px 16px;backdrop-filter:blur(6px)}
#countdown-sub.on{opacity:1}
@keyframes cpop{0%{opacity:0;transform:scale(2.1) rotate(-6deg)}20%{opacity:1;transform:scale(1) rotate(0)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.62)}}

#speedlines{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .25s;
  background:radial-gradient(ellipse at center,transparent 32%,color-mix(in srgb,var(--acc2) 26%,transparent) 130%);
  mix-blend-mode:screen}
#crash-flash{position:absolute;inset:0;background:radial-gradient(circle,transparent 40%,var(--warn) 160%);opacity:0;transition:opacity .25s}
#crash-flash.on{opacity:.55;transition:opacity .05s}

.gearbox b{display:inline-block;transition:transform .12s}
.gearbox.shift b{animation:gshift .28s ease}
@keyframes gshift{0%{transform:translateY(-10px) scale(1.3);color:var(--acc2)}100%{transform:none}}
.hud-box{transition:border-color .2s,box-shadow .2s}
.hud-box.alert{border-color:var(--warn);box-shadow:0 0 22px -6px var(--warn)}

.touch{display:none}
@media (hover:none) and (pointer:coarse){
  .touch{display:block}
  .tbtn{pointer-events:auto;position:absolute;bottom:22px;width:66px;height:66px;border-radius:50%;background:var(--panel);border:1px solid var(--border);color:var(--acc);font-size:1.2rem;backdrop-filter:blur(6px)}
  .tbtn[data-k="left"]{left:16px;bottom:96px}
  .tbtn[data-k="right"]{left:96px;bottom:96px}
  .tright{position:absolute;right:16px;bottom:210px;display:flex;flex-direction:column;gap:10px;align-items:center}
  .tright .tbtn{position:relative;bottom:auto}
  .tbtn.big{width:84px;height:84px;font-size:1.5rem}
  .minimap{bottom:auto;top:86px}
}

/* ---------- results ---------- */
.board{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;text-align:left}
.brow{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;border:1px solid var(--border);background:var(--glass);border-radius:var(--r);padding:10px 13px;font-size:.78rem}
.brow.me{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent)}
.brow .p{font-family:var(--f1);color:var(--gold);font-weight:700}
.reward{color:var(--gold);letter-spacing:3px;font-size:.85rem;margin-bottom:6px}
.failed{color:var(--warn)!important;text-shadow:0 0 26px var(--warn)}
/* =====================================================================
   VELOCITY APEX v3 — advanced UI, motion, mobile pads, post FX
   ===================================================================== */
html{ scroll-behavior:smooth; }
:root{ --ui-scale:1; }
body{ font-size:calc(1rem * var(--ui-scale)); }
body.large-text{ --ui-scale:1.18; }
body.hi-contrast .screen-inner{ background:#000 !important; border-color:#fff !important; }
body.hi-contrast .btn{ border-color:#fff !important; color:#fff !important; }
body.no-anim *{ animation:none !important; transition:none !important; }
html[data-cb="protan"] #game-canvas{ filter:saturate(.85) hue-rotate(-12deg); }
html[data-cb="deutan"] #game-canvas{ filter:saturate(.9) hue-rotate(12deg); }
html[data-cb="tritan"] #game-canvas{ filter:saturate(.95) hue-rotate(35deg); }

/* ---- smooth scrolling everywhere ---- */
.scroller{
  overflow-y:auto; overscroll-behavior:contain; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  scrollbar-color:var(--acc) transparent;
}
.scroller::-webkit-scrollbar{ width:8px; }
.scroller::-webkit-scrollbar-thumb{ background:linear-gradient(var(--acc),var(--acc2)); border-radius:99px; }
.scroller::-webkit-scrollbar-track{ background:transparent; }
.screen-inner{ max-height:92vh; overflow-y:auto; }

/* ---- screen transitions ---- */
.screen.entering .screen-inner{ animation:screenIn .38s cubic-bezier(.16,.84,.32,1) both; }
.screen.leaving .screen-inner{ animation:screenOut .22s ease-in both; }
@keyframes screenIn{ from{opacity:0; transform:translateY(22px) scale(.985); filter:blur(6px);} to{opacity:1;transform:none;filter:blur(0);} }
@keyframes screenOut{ to{opacity:0; transform:translateY(-14px) scale(.99); filter:blur(4px);} }
.fade-up{ animation:fadeUp .45s cubic-bezier(.16,.84,.32,1) both; }
@keyframes fadeUp{ from{opacity:0;transform:translateY(18px);} to{opacity:1;transform:none;} }

/* ---- buttons: glow, hover, ripple ---- */
.btn, .m-btn, .cbind, .seg button, .advcard{
  position:relative; overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.3), box-shadow .25s, background .25s, color .2s, border-color .2s;
}
.btn:hover, .advcard:hover{ transform:translateY(-2px); box-shadow:0 8px 26px -8px var(--acc); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn:focus-visible, .cbind:focus-visible, .advcard:focus-visible{ outline:2px solid var(--acc2); outline-offset:2px; }
.btn-ghost{ border-style:dashed; }
.ripple{
  position:absolute; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
  background:var(--acc); opacity:.55; pointer-events:none; animation:rip .6s ease-out forwards;
}
@keyframes rip{ to{ transform:scale(34); opacity:0; } }

/* ---- advanced hub ---- */
.adv-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin:14px 0; }
.advcard{
  text-align:left; padding:16px 16px 14px; border:1px solid var(--border); border-radius:var(--r);
  background:linear-gradient(160deg,var(--glass),transparent); color:var(--txt); cursor:pointer;
  display:flex; flex-direction:column; gap:6px;
}
.advcard .ai{ font-size:1.5rem; color:var(--acc); line-height:1; }
.advcard b{ font-family:var(--f1); letter-spacing:2px; font-size:.82rem; }
.advcard i{ font-style:normal; color:var(--dim); font-size:.68rem; line-height:1.45; }
.advcard:hover{ border-color:var(--acc); background:linear-gradient(160deg,var(--glass),var(--glass)); }

/* ---- controls screen ---- */
.pad-status{
  display:flex; align-items:center; gap:8px; font-family:var(--f2); font-size:.7rem;
  color:var(--dim); border:1px solid var(--border); border-radius:var(--r); padding:8px 12px; margin-bottom:10px;
}
.dotled{ width:9px;height:9px;border-radius:50%;background:var(--warn); box-shadow:0 0 10px var(--warn); }
.dotled.on{ background:var(--acc); box-shadow:0 0 12px var(--acc); animation:pulseled 1.6s infinite; }
@keyframes pulseled{ 50%{ opacity:.45; } }
.chead,.crow2{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:8px; align-items:center; }
.chead{ font-family:var(--f1); font-size:.6rem; letter-spacing:2px; color:var(--dim); padding:0 4px 6px; }
.controls-body{ max-height:52vh; padding-right:6px; }
.crow2{ padding:5px 4px; border-bottom:1px solid var(--border); }
.crow2 .ca{ font-family:var(--f2); font-size:.74rem; color:var(--txt); }
.cbind{
  font-family:var(--f2); font-size:.72rem; padding:7px 10px; border-radius:6px; cursor:pointer;
  background:var(--glass); border:1px solid var(--border); color:var(--acc);
}
.cbind:hover{ border-color:var(--acc); background:rgba(255,255,255,.05); }
.cbind.capturing{ color:var(--gold); border-color:var(--gold); animation:capblink .8s infinite; }
@keyframes capblink{ 50%{ background:rgba(255,209,102,.14); } }

/* ---- settings extras ---- */
.meterbox{ display:flex; flex-wrap:wrap; gap:6px; }
.meterbox span{
  font-family:var(--f2); font-size:.64rem; color:var(--acc);
  border:1px solid var(--border); border-radius:99px; padding:3px 9px; background:var(--glass);
}
.cpick{ width:64px; height:30px; background:none; border:1px solid var(--border); border-radius:6px; }
.seg button.on{ background:var(--acc); color:#001; }
.range{ transition:filter .2s; } .range:hover{ filter:brightness(1.25); }

/* ---- map cards with rendered previews ---- */
.mapshot{ width:100%; height:150px; object-fit:cover; display:block; border-bottom:1px solid var(--border); }
.mapcard{ transition:transform .28s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s, border-color .25s; }
.mapcard:hover{ transform:translateY(-6px) scale(1.015); box-shadow:0 18px 40px -18px var(--acc); }
.mapcard.selected{ box-shadow:0 0 0 2px var(--acc), 0 18px 40px -20px var(--acc); }
.mmeta{ display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.mmeta span{ font-family:var(--f2); font-size:.58rem; color:var(--dim); border:1px solid var(--border); border-radius:99px; padding:2px 7px; }

/* ---- modal + toast ---- */
#modal-layer{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:80;
  background:rgba(0,0,0,.65); backdrop-filter:blur(10px);
}
#modal-layer.on{ display:flex; animation:fadeIn .2s ease both; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.modal-card{
  background:var(--panel); border:1px solid var(--acc); border-radius:calc(var(--r)*1.4);
  padding:24px 26px; max-width:440px; text-align:center;
  box-shadow:0 30px 80px -30px var(--acc); animation:screenIn .3s cubic-bezier(.16,.84,.32,1) both;
}
.modal-card h3{ font-family:var(--f1); letter-spacing:3px; color:var(--acc); margin-bottom:8px; }
.modal-card p{ font-family:var(--f2); font-size:.76rem; color:var(--dim); line-height:1.6; }
.modal-btns{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:16px; }
#toast{
  position:fixed; left:50%; bottom:38px; transform:translate(-50%,26px); z-index:90;
  background:var(--panel); border:1px solid var(--acc); color:var(--acc);
  font-family:var(--f2); font-size:.72rem; letter-spacing:1px; padding:9px 18px; border-radius:99px;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .3s cubic-bezier(.2,.9,.3,1.4);
}
#toast.on{ opacity:1; transform:translate(-50%,0); }

/* ---- post processing overlays ---- */
#post-fx{
  position:fixed; inset:0; pointer-events:none; z-index:2; transition:opacity .4s;
  background:radial-gradient(circle at 50% 45%, transparent 45%, rgba(0,0,0,.42) 100%);
}
#post-fx.bloom{ mix-blend-mode:screen; box-shadow:inset 0 0 220px -60px var(--acc); }
#post-fx.grain::after{
  content:''; position:absolute; inset:0; opacity:.05;
  background-image:radial-gradient(#fff 1px, transparent 1px); background-size:3px 3px;
}
#motion-blur{
  position:fixed; inset:0; pointer-events:none; z-index:3; opacity:0; transition:opacity .2s;
  background:radial-gradient(ellipse at center, transparent 32%, rgba(0,0,0,.55) 100%);
  backdrop-filter:blur(2.5px);
}
#fps-meter{
  position:fixed; top:6px; left:8px; z-index:60; font-family:var(--f2); font-size:.6rem;
  color:var(--dim); pointer-events:none; opacity:.8;
}

/* ---- mobile controls ---- */
#mobile-pad{ position:fixed; inset:0; z-index:40; pointer-events:none; opacity:var(--m-op,.75); }
#mobile-pad .m-steer{ position:absolute; left:18px; bottom:22px; pointer-events:auto; }
#mobile-pad.side-left .m-steer{ left:auto; right:18px; }
#mobile-pad .m-right{
  position:absolute; right:18px; bottom:22px; display:grid; gap:10px;
  grid-template-columns:repeat(2,auto); pointer-events:auto;
}
#mobile-pad.side-left .m-right{ right:auto; left:18px; }
.m-btn{
  width:calc(64px * var(--m-size,1)); height:calc(64px * var(--m-size,1));
  border-radius:50%; border:1px solid var(--border); background:var(--glass);
  color:var(--acc); font-family:var(--f1); font-size:1rem; backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; touch-action:none; user-select:none;
}
.m-btn.press{ background:var(--acc); color:#001; transform:scale(.94); box-shadow:0 0 22px -4px var(--acc); }
.m-gas{ width:calc(78px * var(--m-size,1)); height:calc(78px * var(--m-size,1)); }
.m-wheel{
  width:calc(150px * var(--m-size,1)); height:calc(150px * var(--m-size,1)); border-radius:50%;
  border:3px solid var(--border); display:flex; align-items:center; justify-content:center;
  transition:transform .08s linear; touch-action:none; backdrop-filter:blur(4px);
}
.m-wheel-in{ width:60%; height:60%; border-radius:50%; border:2px dashed var(--acc); opacity:.6; }
.m-slider{
  width:calc(230px * var(--m-size,1)); height:44px; border-radius:99px; border:1px solid var(--border);
  background:var(--glass); position:relative; touch-action:none;
}
.m-knob{
  position:absolute; top:50%; left:50%; width:44px; height:44px; margin:-22px 0 0 -22px;
  border-radius:50%; background:var(--acc); box-shadow:0 0 20px -4px var(--acc);
}
.m-arrows{ display:flex; gap:12px; }
.m-half{ position:absolute; left:0; top:0; width:100%; height:100%; }
#mobile-pad .m-wheel,#mobile-pad .m-slider,#mobile-pad .m-arrows,#mobile-pad .m-half{ display:none; }
#mobile-pad.mstyle-wheel .m-wheel{ display:flex; }
#mobile-pad.mstyle-slider .m-slider{ display:block; }
#mobile-pad.mstyle-buttons .m-arrows{ display:flex; }
#mobile-pad.mstyle-half .m-half{ display:block; pointer-events:auto; }
#mobile-pad.mstyle-tilt .m-steer{ display:none; }

@media (max-width:720px){
  .adv-grid{ grid-template-columns:1fr; }
  .chead,.crow2{ grid-template-columns:1fr 1fr; }
  .chead span:first-child,.crow2 .ca{ grid-column:1 / -1; }
  .mapshot{ height:120px; }
}

/* ---- auto performance tuner badge ---- */
#tune-badge{
  position:fixed; top:6px; left:8px; margin-top:14px; z-index:60;
  font-family:var(--f2); font-size:.55rem; letter-spacing:.08em;
  color:var(--acc); opacity:.75; pointer-events:none;
}
#tune-badge.hidden{ display:none; }

/* ==========================================================================
   VYRON × HACKERX — PREMIUM BRAND IDENTITY LAYER
   ========================================================================== */
:root{
  --vy-chrome: linear-gradient(180deg,#ffffff 0%,#dfe9f5 26%,#8fa6bd 48%,#e9f3ff 58%,#6d8299 78%,#cfe0f2 100%);
  --vy-neon:   #35f0ff;
  --vy-neon2:  #7a5cff;
  --vy-ink:    #04070c;
}

/* ---------- BOOT ---------- */
#boot-screen{position:fixed;inset:0;z-index:9000;background:radial-gradient(120% 90% at 50% 45%,#0a1119 0%,#03060a 60%,#000 100%);
  display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity 1s ease}
#boot-screen.gone{opacity:0;pointer-events:none}
#boot-particles{position:absolute;inset:0;width:100%;height:100%}
.boot-core{position:relative;text-align:center;z-index:2;transform:scale(.86);animation:bootPush 6.4s cubic-bezier(.16,.8,.24,1) forwards}
@keyframes bootPush{0%{transform:scale(.82)}100%{transform:scale(1.04)}}
.boot-tag{margin-top:14px;font:600 12px/1 'Rajdhani',sans-serif;letter-spacing:.62em;color:#8fb6c9;opacity:0;
  animation:fadeUp .9s 2.5s ease forwards}
.boot-rule{height:1px;width:0;margin:18px auto 16px;background:linear-gradient(90deg,transparent,var(--vy-neon),transparent);
  animation:ruleGrow 1.3s 2.9s cubic-bezier(.16,.8,.24,1) forwards;box-shadow:0 0 18px var(--vy-neon)}
@keyframes ruleGrow{to{width:340px}}
.boot-skip{position:absolute;right:22px;bottom:20px;z-index:5;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);
  color:#9fc4d6;padding:8px 16px;border-radius:999px;font:600 11px/1 'Rajdhani',sans-serif;letter-spacing:.28em;cursor:pointer;
  transition:.25s;opacity:0;animation:fadeUp .6s 1.2s ease forwards}
.boot-skip:hover{color:#fff;border-color:var(--vy-neon);box-shadow:0 0 22px rgba(53,240,255,.35);transform:translateY(-2px)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ---------- VYRON LOGO (3D metallic / glass / sweep / core) ---------- */
.vyron-logo{position:relative;display:inline-block;font-family:'Orbitron',sans-serif;font-weight:900;
  letter-spacing:.16em;line-height:1;isolation:isolate;perspective:900px}
.vyron-logo .vy-text{
  position:relative;display:inline-block;background:var(--vy-chrome);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-stroke:.6px rgba(180,230,255,.35);
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 14px 26px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(53,240,255,.35));
  animation:vyFloat 7s ease-in-out infinite, vyChrome 9s linear infinite}
@keyframes vyChrome{0%{background-position:0 0}100%{background-position:0 260px}}
@keyframes vyFloat{0%,100%{transform:translateY(0) rotateX(0) rotateY(0)}
  25%{transform:translateY(-4px) rotateY(5deg)}50%{transform:translateY(0) rotateX(3deg)}75%{transform:translateY(-3px) rotateY(-5deg)}}
.vyron-logo .vy-sweep{position:absolute;inset:-6% -12%;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 48%,rgba(53,240,255,.55) 52%,transparent 62%);
  mix-blend-mode:screen;transform:translateX(-130%);animation:vySweep 5.2s 1s cubic-bezier(.5,0,.2,1) infinite}
@keyframes vySweep{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
.vyron-logo .vy-glass{position:absolute;inset:-14% -6%;border-radius:26px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 60%);opacity:.5;
  -webkit-mask-image:radial-gradient(75% 120% at 50% 40%,#000 40%,transparent 100%);
  mask-image:radial-gradient(75% 120% at 50% 40%,#000 40%,transparent 100%)}
.vyron-logo .vy-core{position:absolute;left:50%;top:52%;width:min(52vw,520px);height:90px;transform:translate(-50%,-50%);
  pointer-events:none;background:radial-gradient(ellipse at center,rgba(53,240,255,.32),rgba(122,92,255,.16) 45%,transparent 72%);
  filter:blur(10px);animation:vyPulse 3.6s ease-in-out infinite;z-index:-1}
@keyframes vyPulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.94)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.09)}}
.boot-logo{font-size:clamp(44px,11vw,132px)}
.game-title.vyron-logo{font-size:clamp(40px,9vw,104px)}
.loader-logo.vyron-logo{font-size:clamp(30px,7vw,64px)}
.vyron-logo.mini{font-size:26px;letter-spacing:.3em}

/* ---------- HACKERX LOGO ---------- */
.hx-logo{position:relative;display:inline-flex;align-items:center;gap:12px;padding:10px 18px;border-radius:14px;
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.12);
  overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.hx-mark{font:900 26px/1 'Orbitron',sans-serif;background:var(--vy-chrome);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(122,92,255,.6))}
.hx-mark em{font-style:normal;color:var(--vy-neon);-webkit-text-fill-color:var(--vy-neon);animation:hxFlick 4.5s infinite}
@keyframes hxFlick{0%,92%,100%{opacity:1}94%{opacity:.35}96%{opacity:.9}}
.hx-word{font:600 13px/1 'Rajdhani',sans-serif;letter-spacing:.44em;color:#cfe6f2}
.hx-scan{position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  transform:translateX(-120%);animation:vySweep 4.4s 1.4s ease-in-out infinite;mix-blend-mode:screen}

/* ---------- MADE WITH ❤ BY HACKERX ---------- */
.hx-credit{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 'Rajdhani',sans-serif;letter-spacing:.2em;
  color:#a9c8d8;position:relative;padding-bottom:5px}
.hx-credit .hx-name{background:var(--vy-chrome);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;
  letter-spacing:.26em;animation:vyChrome 7s linear infinite}
.hx-credit .hx-heart{color:#ff4d6d;font-size:14px;display:inline-block;animation:heartBeat 1.9s ease-in-out infinite;
  filter:drop-shadow(0 0 8px rgba(255,77,109,.85))}
@keyframes heartBeat{0%,100%{transform:scale(1)}14%{transform:scale(1.32)}28%{transform:scale(1)}42%{transform:scale(1.2)}}
.hx-credit::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:linear-gradient(90deg,transparent,var(--vy-neon),transparent);opacity:.7;
  transform:scaleX(.2);transform-origin:left;animation:hxLine 4.2s ease-in-out infinite}
@keyframes hxLine{0%,100%{transform:scaleX(.15);opacity:.35}50%{transform:scaleX(1);opacity:.9}}
.hx-credit.floaty{animation:hxFloat 5.5s ease-in-out infinite}
@keyframes hxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hx-credit .hx-ch{display:inline-block;opacity:0;transform:translateY(8px) scale(.8);filter:blur(6px);
  animation:chIn .5s cubic-bezier(.16,.9,.24,1) forwards}
@keyframes chIn{to{opacity:1;transform:none;filter:blur(0)}}
.boot-credit{margin-top:6px;font-size:13px;opacity:0;animation:fadeUp 1s 3.4s ease forwards}

/* ---------- BRAND CORNER + INSTAGRAM ---------- */
.brand-corner{position:absolute;left:22px;bottom:18px;display:flex;align-items:center;gap:14px;z-index:6}
.ig-btn{position:relative;display:inline-flex;align-items:center;gap:9px;color:#dff1fb;text-decoration:none;
  width:38px;height:38px;justify-content:center;border-radius:12px;overflow:hidden;
  background:linear-gradient(140deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.16);
  transition:transform .3s cubic-bezier(.2,1.4,.4,1),box-shadow .3s,border-color .3s}
.ig-btn.wide-ig{width:auto;padding:0 16px;height:42px;font:600 12px/1 'Rajdhani',sans-serif;letter-spacing:.24em}
.ig-btn::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .35s;
  background:conic-gradient(from 210deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75)}
.ig-btn svg,.ig-btn span{position:relative;z-index:2}
.ig-btn:hover{transform:translateY(-3px) scale(1.06);border-color:transparent;box-shadow:0 12px 30px rgba(214,41,118,.45)}
.ig-btn:hover::before{opacity:.9}
.ig-btn:active{transform:scale(.94)}
.ig-btn[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  white-space:nowrap;background:rgba(4,8,12,.94);border:1px solid rgba(53,240,255,.35);color:#cfeefb;
  font:600 10px/1 'Rajdhani',sans-serif;letter-spacing:.2em;padding:7px 11px;border-radius:8px;z-index:9}
.ig-burst{position:fixed;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:9999}

/* ---------- TEXT ANIMATIONS ---------- */
.anim-text{animation:fadeUp .8s .2s cubic-bezier(.16,.9,.24,1) both}
.reveal-ch{display:inline-block;opacity:0;transform:translateY(14px) rotateX(60deg);filter:blur(5px);
  animation:chIn .55s cubic-bezier(.16,.9,.24,1) forwards}
.screen:not(.hidden) .screen-inner{animation:screenIn .55s cubic-bezier(.16,.9,.24,1) both}
@keyframes screenIn{from{opacity:0;transform:translateY(22px) scale(.985);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
.screen:not(.hidden) .btn{animation:btnIn .5s cubic-bezier(.16,.9,.24,1) both}
@keyframes btnIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.btn{position:relative;overflow:hidden;transition:transform .22s cubic-bezier(.2,1.5,.4,1),box-shadow .25s,border-color .25s,background .25s}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn:active{transform:scale(.97)}
.btn .ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.32);
  animation:rip .6s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(2.6);opacity:0}}
.smooth-scroll,.screen-inner{scroll-behavior:smooth;overscroll-behavior:contain}

/* ---------- ABOUT ---------- */
.about-heads{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.about-heads .vyron-logo{font-size:clamp(30px,6vw,58px)}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:22px}
.about-card{padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));backdrop-filter:blur(6px);
  transition:transform .3s cubic-bezier(.2,1.3,.4,1),box-shadow .3s}
.about-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.about-card h4{margin:0 0 6px;font:600 10px/1 'Rajdhani',sans-serif;letter-spacing:.34em;color:var(--vy-neon)}
.about-card p{margin:0;font:700 17px/1.2 'Orbitron',sans-serif;color:#eaf6ff}
.about-card span{font:500 11px/1.4 'Rajdhani',sans-serif;letter-spacing:.12em;color:#8fa9b8}
.credits-roll{display:grid;gap:8px;margin:10px 0 22px}
.credits-roll div{display:flex;justify-content:space-between;gap:14px;padding:9px 14px;border-radius:10px;
  background:rgba(255,255,255,.03);border-left:2px solid rgba(53,240,255,.5);font-family:'Rajdhani',sans-serif;letter-spacing:.1em}
.credits-roll b{color:#cfe6f2;font-weight:600}
.credits-roll span{color:#89a4b3}
.about-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.result-brand{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;opacity:.95}
#result-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.loader-tip{margin-top:10px;font:500 11px/1.4 'Rajdhani',sans-serif;letter-spacing:.16em;color:#7f9aab;min-height:16px}
#loading-screen .hx-credit{margin-top:20px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important}}

/* per-character chrome so the animated HackerX name stays visible */
.hx-credit .hx-name .hx-ch{background:var(--vy-chrome);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 8px rgba(53,240,255,.35))}
.hx-credit .hx-pre .hx-ch{color:#a9c8d8}