/* ========================================================================
   NEON DRIFT 2077 — UI theme
   ===================================================================== */
:root{
  --neon:#00e5ff;
  --neon2:#ff2d6f;
  --neon3:#b14bff;
  --amber:#ffb000;
  --green:#39ff14;
  --bg:#04060d;
  --panel:rgba(8,14,26,0.86);
  --line:rgba(0,229,255,0.35);
  --txt:#cfe9ff;
  --muted:#5d7791;
  --hp:#ff3b5c;
  --stam:#ffd23b;
  --ram:#42e8ff;
  --font:'Rajdhani','Chakra Petch',Segoe UI,Tahoma,sans-serif;
  --mono:'Share Tech Mono',ui-monospace,Menlo,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--txt);font-family:var(--font);}
body{user-select:none;-webkit-user-select:none;cursor:default;}
canvas#game-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;}

.hidden{display:none !important;}
.accent{color:var(--neon);text-shadow:0 0 8px var(--neon);}
.muted{color:var(--muted);font-size:.8em;}

.screen{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%, rgba(20,8,40,.55), rgba(2,4,10,.96));}
.screen.overlay{background:rgba(2,4,10,.78);backdrop-filter:blur(3px);}

/* ---------- BOOT ---------- */
#boot{flex-direction:column;background:#02040a;z-index:60;}
.boot-inner{text-align:center;}
.boot-logo{font-size:42px;letter-spacing:8px;font-weight:700;color:#dff6ff;text-shadow:0 0 18px var(--neon);}
.boot-logo .accent{color:var(--neon2);text-shadow:0 0 18px var(--neon2);}
.boot-bar{width:340px;height:6px;margin:26px auto 12px;background:rgba(255,255,255,.08);border:1px solid var(--line);}
#boot-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--neon),var(--neon3));box-shadow:0 0 12px var(--neon);transition:width .25s;}
.boot-status{font-family:var(--mono);font-size:13px;color:var(--neon);letter-spacing:3px;}
.boot-error{margin-top:20px;color:var(--neon2);font-family:var(--mono);font-size:13px;max-width:560px;line-height:1.6;}

/* ---------- MAIN MENU ---------- */
.menu-bg-grid{position:absolute;inset:0;background-image:
  linear-gradient(rgba(0,229,255,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,229,255,.07) 1px,transparent 1px);
  background-size:60px 60px;transform:perspective(420px) rotateX(62deg) scale(2.4);transform-origin:50% 100%;
  mask-image:linear-gradient(to top,#000 10%,transparent 70%);opacity:.55;}
.menu-scanlines{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;}
.menu-content{position:relative;text-align:center;z-index:2;}
.title-glitch{font-size:84px;font-weight:700;letter-spacing:10px;color:#eafcff;
  text-shadow:0 0 24px var(--neon),0 0 6px #fff;position:relative;animation:flick 6s infinite;}
.title-glitch::before,.title-glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;}
.title-glitch::before{color:var(--neon2);transform:translate(-3px,0);clip-path:inset(0 0 55% 0);animation:gl1 3.2s infinite linear alternate;}
.title-glitch::after{color:var(--neon3);transform:translate(3px,0);clip-path:inset(55% 0 0 0);animation:gl2 2.7s infinite linear alternate;}
@keyframes gl1{0%{transform:translate(-3px,0)}50%{transform:translate(2px,-1px)}100%{transform:translate(-2px,1px)}}
@keyframes gl2{0%{transform:translate(3px,0)}50%{transform:translate(-2px,1px)}100%{transform:translate(2px,-1px)}}
@keyframes flick{0%,97%,100%{opacity:1}98%{opacity:.7}99%{opacity:.92}}
.title-sub{font-family:var(--mono);letter-spacing:8px;color:var(--neon);margin:6px 0 40px;font-size:15px;}
.menu-nav{display:flex;flex-direction:column;gap:12px;width:300px;margin:0 auto;}

.menu-btn{font-family:var(--font);font-size:19px;font-weight:600;letter-spacing:3px;color:var(--txt);
  background:linear-gradient(90deg,rgba(0,229,255,.10),rgba(0,229,255,0));border:1px solid var(--line);
  padding:13px 20px;cursor:pointer;position:relative;clip-path:polygon(0 0,100% 0,100% 70%,94% 100%,0 100%);
  transition:.14s;text-align:left;}
.menu-btn:hover,.menu-btn.focused{color:#02040a;background:var(--neon);box-shadow:0 0 18px var(--neon);transform:translateX(6px);}
.menu-btn.ghost{opacity:.8;}
.menu-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;background:rgba(255,255,255,.04);color:var(--muted);box-shadow:none;}
.menu-foot{margin-top:38px;font-family:var(--mono);font-size:12px;color:var(--muted);}

/* ---------- PANELS ---------- */
.panel{position:relative;z-index:2;background:var(--panel);border:1px solid var(--line);padding:30px 34px;min-width:420px;max-width:560px;
  box-shadow:0 0 40px rgba(0,229,255,.12),inset 0 0 30px rgba(0,229,255,.04);clip-path:polygon(0 0,100% 0,100% 92%,97% 100%,0 100%);}
.panel.wide{max-width:760px;min-width:620px;}
.panel-title{font-size:26px;letter-spacing:6px;color:var(--neon);text-shadow:0 0 12px var(--neon);margin-bottom:22px;border-bottom:1px solid var(--line);padding-bottom:10px;}

/* character create */
.cc-field{display:block;margin-bottom:20px;}
.cc-field>span{display:block;font-family:var(--mono);font-size:12px;letter-spacing:3px;color:var(--muted);margin-bottom:8px;}
#cc-name{width:100%;background:rgba(0,0,0,.4);border:1px solid var(--line);color:#fff;font-family:var(--mono);font-size:20px;padding:10px 14px;letter-spacing:2px;}
#cc-name:focus{outline:none;border-color:var(--neon);box-shadow:0 0 12px var(--neon);}
.cc-options{display:flex;gap:10px;flex-wrap:wrap;}
.cc-opt{flex:1;min-width:120px;background:rgba(0,0,0,.3);border:1px solid var(--line);color:var(--txt);padding:12px;cursor:pointer;font-family:var(--font);font-weight:600;letter-spacing:2px;display:flex;flex-direction:column;gap:4px;transition:.12s;}
.cc-opt small{color:var(--muted);font-weight:400;letter-spacing:1px;}
.cc-opt.selected{border-color:var(--neon);background:rgba(0,229,255,.14);box-shadow:0 0 14px rgba(0,229,255,.4);color:#fff;}
.cc-swatch{width:44px;height:44px;border:2px solid rgba(255,255,255,.2);background:var(--sw);cursor:pointer;border-radius:3px;box-shadow:0 0 10px var(--sw);}
.cc-swatch.selected{border-color:#fff;transform:scale(1.12);}
.cc-stats{font-family:var(--mono);font-size:13px;color:var(--neon);margin:6px 0 18px;line-height:1.9;border-left:2px solid var(--line);padding-left:12px;}
.cc-buttons{display:flex;gap:12px;justify-content:flex-end;margin-top:8px;}

/* settings */
.setting-row{display:flex;align-items:center;gap:14px;margin-bottom:14px;font-family:var(--mono);font-size:14px;}
.setting-row label{flex:1;color:var(--txt);letter-spacing:1px;}
.setting-row input[type=range]{flex:1.4;accent-color:var(--neon);}
.setting-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--neon);}
.set-val{width:48px;text-align:right;color:var(--neon);}

/* controls table */
.controls-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px 18px;font-family:var(--mono);font-size:13px;max-height:55vh;overflow:auto;}
.controls-grid .ch{color:var(--muted);letter-spacing:2px;border-bottom:1px solid var(--line);padding-bottom:6px;}
.controls-grid .ca{color:var(--txt);}
.controls-grid .ck{color:var(--neon);}
.controls-grid .cp{color:var(--amber);}

.credits-body{line-height:1.9;font-size:15px;}
.credits-body p{margin-bottom:8px;}

/* ========================================================================
   HUD
   ===================================================================== */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;font-family:var(--mono);}
.hud-vitals{position:absolute;top:20px;left:22px;width:280px;}
.vbar{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.vlabel{width:34px;font-size:11px;letter-spacing:2px;color:var(--muted);}
.vtrack{flex:1;height:11px;background:rgba(0,0,0,.55);border:1px solid var(--line);position:relative;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,3% 100%);}
.vfill{height:100%;width:100%;transition:width .18s;}
.hp .vfill{background:linear-gradient(90deg,#ff3b5c,#ff8aa0);box-shadow:0 0 10px var(--hp);}
.stam .vfill{background:linear-gradient(90deg,#ffd23b,#fff1a8);box-shadow:0 0 8px var(--stam);}
.vnum{width:36px;font-size:13px;color:#fff;text-align:right;}
.ram-track{display:flex;gap:3px;padding:2px;}
.ram-cell{flex:1;background:rgba(66,232,255,.18);border:1px solid rgba(66,232,255,.4);transition:.15s;}
.ram-cell.filled{background:var(--ram);box-shadow:0 0 8px var(--ram);}

.hud-stats{position:absolute;top:20px;right:22px;text-align:right;}
.stat-eddies{font-size:26px;color:var(--amber);text-shadow:0 0 10px var(--amber);letter-spacing:1px;}
.stat-eddies .eb{font-size:16px;opacity:.8;}
.stat-line{font-size:12px;color:var(--muted);letter-spacing:2px;margin-top:2px;}
.stat-line span{color:var(--neon);}
.xp-track{width:180px;height:4px;background:rgba(0,0,0,.5);border:1px solid var(--line);margin:6px 0 0 auto;}
#xp-fill{height:100%;width:0%;background:var(--neon3);box-shadow:0 0 8px var(--neon3);transition:width .3s;}

.hud-objective{position:absolute;top:96px;right:22px;max-width:320px;text-align:right;border-right:2px solid var(--neon);padding-right:10px;}
.obj-title{font-size:13px;color:var(--neon);letter-spacing:2px;text-shadow:0 0 8px var(--neon);}
.obj-step{font-size:12px;color:var(--txt);margin-top:3px;line-height:1.4;}
.obj-step .done{color:var(--muted);text-decoration:line-through;}

.hud-weapon{position:absolute;bottom:22px;right:28px;text-align:right;}
.wpn-name{font-size:15px;letter-spacing:3px;color:var(--txt);}
.wpn-ammo{font-size:30px;color:#fff;letter-spacing:1px;text-shadow:0 0 10px var(--neon);}
.wpn-ammo .ammo-sep{color:var(--muted);margin:0 4px;font-size:22px;}
#ammo-reserve{color:var(--muted);font-size:20px;}

.crosshair{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);transition:.1s;}
.crosshair span{position:absolute;background:rgba(0,229,255,.9);box-shadow:0 0 5px var(--neon);}
.crosshair span:nth-child(1){left:50%;top:0;width:2px;height:8px;transform:translateX(-50%);}
.crosshair span:nth-child(2){left:50%;bottom:0;width:2px;height:8px;transform:translateX(-50%);}
.crosshair span:nth-child(3){top:50%;left:0;height:2px;width:8px;transform:translateY(-50%);}
.crosshair span:nth-child(4){top:50%;right:0;height:2px;width:8px;transform:translateY(-50%);}
.crosshair.aim{width:16px;height:16px;}
.crosshair.hidden{opacity:0;}

#minimap{position:absolute;bottom:22px;left:22px;border:1px solid var(--line);background:rgba(2,6,14,.7);border-radius:50%;box-shadow:0 0 22px rgba(0,229,255,.18);}
.minimap-compass{position:absolute;bottom:188px;left:104px;font-size:12px;color:var(--neon);}

.interact-prompt{position:absolute;left:50%;top:58%;transform:translateX(-50%);font-size:16px;color:#fff;background:rgba(2,8,18,.8);border:1px solid var(--neon);padding:8px 16px;letter-spacing:1px;box-shadow:0 0 16px rgba(0,229,255,.35);}
.ikey{display:inline-block;min-width:24px;text-align:center;background:var(--neon);color:#02040a;font-weight:700;padding:2px 6px;border-radius:3px;margin-right:6px;}

.dmg-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 160px rgba(255,30,60,0);transition:box-shadow .25s;}
.dmg-vignette.hit{box-shadow:inset 0 0 200px rgba(255,30,60,.7);}
.hitmarker{position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%) rotate(45deg);opacity:0;}
.hitmarker.show{opacity:1;animation:hm .25s ease-out;}
.hitmarker::before,.hitmarker::after{content:'';position:absolute;background:#fff;}
.hitmarker::before{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%);}
.hitmarker::after{top:50%;left:0;height:2px;width:100%;transform:translateY(-50%);}
@keyframes hm{0%{transform:translate(-50%,-50%) rotate(45deg) scale(1.6);opacity:1}100%{transform:translate(-50%,-50%) rotate(45deg) scale(.9);opacity:0}}

.toasts{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;}
.toast{background:rgba(2,10,22,.85);border-left:3px solid var(--neon);padding:7px 18px;font-size:14px;color:#fff;letter-spacing:1px;animation:toastin .3s ease-out;box-shadow:0 0 14px rgba(0,229,255,.2);}
.toast.gold{border-color:var(--amber);color:var(--amber);}
.toast.warn{border-color:var(--neon2);color:#ffd0dc;}
@keyframes toastin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.status-fx{position:absolute;left:50%;top:78px;transform:translateX(-50%);display:flex;gap:10px;}
.status-chip{font-size:12px;letter-spacing:2px;color:#02040a;background:var(--neon);padding:4px 10px;box-shadow:0 0 14px var(--neon);}
.status-chip.sande{background:var(--neon3);box-shadow:0 0 14px var(--neon3);color:#fff;}
.status-chip.scan{background:var(--green);box-shadow:0 0 14px var(--green);}

.speedlines{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 38%,rgba(177,75,255,.25) 100%);}

/* ========================================================================
   DIALOGUE
   ===================================================================== */
.dialogue{position:fixed;inset:0;z-index:25;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;}
.dlg-box{pointer-events:auto;width:min(760px,90vw);margin-bottom:60px;background:linear-gradient(180deg,rgba(4,10,22,.92),rgba(4,8,16,.96));border:1px solid var(--neon);box-shadow:0 0 40px rgba(0,229,255,.2);padding:22px 26px;clip-path:polygon(0 0,100% 0,100% 90%,98% 100%,0 100%);}
.dlg-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
.dlg-name{font-size:18px;letter-spacing:3px;color:var(--neon2);text-shadow:0 0 8px var(--neon2);}
.dlg-tag{font-family:var(--mono);font-size:12px;color:var(--muted);}
.dlg-text{font-size:17px;line-height:1.55;color:#e6f4ff;min-height:48px;margin-bottom:16px;}
.dlg-choices{display:flex;flex-direction:column;gap:7px;}
.dlg-choice{pointer-events:auto;text-align:left;background:rgba(0,229,255,.06);border:1px solid var(--line);color:var(--txt);padding:10px 14px;cursor:pointer;font-family:var(--font);font-size:15px;letter-spacing:1px;transition:.1s;}
.dlg-choice:hover,.dlg-choice.focused{background:var(--neon);color:#02040a;}
.dlg-choice .gate{color:var(--amber);font-family:var(--mono);font-size:12px;margin-right:6px;}
.dlg-choice.locked{opacity:.45;cursor:not-allowed;}
.dlg-num{color:var(--neon);margin-right:8px;font-family:var(--mono);}

/* ========================================================================
   VENDOR
   ===================================================================== */
.vendor-sub{font-family:var(--mono);color:var(--muted);margin-bottom:14px;}
.vendor-list{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto;padding-right:6px;}
.vendor-item{display:flex;align-items:center;gap:14px;background:rgba(0,0,0,.3);border:1px solid var(--line);padding:11px 14px;}
.vendor-item .vi-name{flex:1;font-weight:600;letter-spacing:1px;}
.vendor-item .vi-desc{flex:2;font-size:12px;color:var(--muted);font-family:var(--mono);}
.vendor-item .vi-price{color:var(--amber);font-family:var(--mono);min-width:80px;text-align:right;}
.vendor-item button{pointer-events:auto;background:var(--neon);color:#02040a;border:none;font-family:var(--font);font-weight:700;padding:7px 14px;cursor:pointer;letter-spacing:1px;}
.vendor-item button:disabled{opacity:.35;cursor:not-allowed;}
.vendor-item.owned{opacity:.55;}

/* ========================================================================
   PAUSE
   ===================================================================== */
.pause-wrap{display:flex;gap:24px;width:min(900px,92vw);height:min(620px,86vh);}
.pause-nav{display:flex;flex-direction:column;gap:8px;width:220px;}
.pause-nav .menu-btn{font-size:15px;padding:10px 16px;}
.pause-body{flex:1;background:var(--panel);border:1px solid var(--line);padding:24px;overflow:auto;clip-path:polygon(0 0,100% 0,100% 96%,98% 100%,0 100%);}
.pause-body h3{color:var(--neon);letter-spacing:3px;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:8px;}
.journal-q{margin-bottom:16px;border-left:2px solid var(--neon2);padding-left:12px;}
.journal-q .jq-title{color:var(--neon2);font-weight:600;letter-spacing:1px;}
.journal-q .jq-desc{font-size:13px;color:var(--muted);margin:3px 0;}
.journal-q .jq-obj{font-family:var(--mono);font-size:13px;color:var(--txt);}
.journal-q .jq-obj.done{color:var(--muted);text-decoration:line-through;}
.inv-grid,.char-block{font-family:var(--mono);font-size:14px;line-height:1.9;}
.inv-row{display:flex;justify-content:space-between;border-bottom:1px solid rgba(0,229,255,.12);padding:6px 0;}
.inv-row .ir-use{pointer-events:auto;background:var(--neon);color:#02040a;border:none;padding:3px 12px;cursor:pointer;font-weight:700;}
.inv-row .ir-eq{pointer-events:auto;background:transparent;color:var(--neon);border:1px solid var(--line);padding:3px 12px;cursor:pointer;}
.char-stat{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(0,229,255,.12);}
.char-stat .cs-up{pointer-events:auto;background:var(--neon);color:#02040a;border:none;width:26px;height:26px;cursor:pointer;font-weight:700;}
.char-stat .cs-up:disabled{opacity:.3;cursor:not-allowed;}
.map-canvas-wrap{display:flex;justify-content:center;}
#pause-map{border:1px solid var(--line);background:rgba(2,6,14,.6);}

/* ========================================================================
   FLATLINE
   ===================================================================== */
#flatline{flex-direction:column;background:rgba(40,0,8,.55);backdrop-filter:grayscale(1) blur(2px);z-index:40;}
.flatline-title{font-size:80px;letter-spacing:14px;color:var(--neon2);text-shadow:0 0 30px var(--neon2);font-weight:700;animation:flline 1.4s infinite;}
.flatline-sub{font-family:var(--mono);color:#ffb8c6;letter-spacing:3px;margin-top:16px;}
@keyframes flline{0%,100%{opacity:1}50%{opacity:.4}}

/* device hint */
.device-hint{position:fixed;bottom:8px;left:50%;transform:translateX(-50%);z-index:22;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:2px;opacity:.6;pointer-events:none;}

/* ========================================================================
   COMPASS BAR
   ===================================================================== */
.compass{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:360px;height:30px;overflow:hidden;pointer-events:none;
  background:rgba(2,8,18,.45);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.compass-strip,.compass-markers{position:absolute;inset:0;}
.compass-tick{position:absolute;top:0;left:0;will-change:transform;}
.compass-tick.major{font-family:var(--mono);font-size:13px;color:var(--neon);text-shadow:0 0 8px var(--neon);top:6px;margin-left:-5px;}
.compass-tick.inter{font-family:var(--mono);font-size:10px;color:var(--muted);top:9px;margin-left:-7px;}
.compass-tick.minor{width:1px;height:6px;background:var(--line);top:0;}
.compass-caret{position:absolute;left:50%;top:0;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--neon);transform:translateX(-50%);filter:drop-shadow(0 0 4px var(--neon));z-index:2;}
.compass-marker{position:absolute;top:18px;width:8px;height:8px;border-radius:50%;margin-left:-4px;will-change:transform;box-shadow:0 0 6px currentColor;}
.compass-marker.obj{top:2px;width:0;height:0;border-radius:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid currentColor;margin-left:-5px;background:none !important;box-shadow:none;}
.compass-marker.edge-left::after{content:'\25C2';position:absolute;left:-10px;top:-4px;color:inherit;}
.compass-marker.edge-right::after{content:'\25B8';position:absolute;right:-10px;top:-4px;color:inherit;}

/* ========================================================================
   OBJECTIVE WORLD MARKER
   ===================================================================== */
.obj-marker{position:absolute;top:0;left:0;will-change:transform;pointer-events:none;z-index:21;display:flex;flex-direction:column;align-items:center;}
.objm-diamond{width:18px;height:18px;border:2px solid var(--neon2);background:rgba(255,45,111,.18);transform:rotate(45deg);box-shadow:0 0 12px var(--neon2);}
.obj-marker.side .objm-diamond{border-color:var(--stam);background:rgba(255,210,59,.16);box-shadow:0 0 12px var(--stam);}
.objm-arrow{display:none;}
.obj-marker.edge .objm-arrow{display:block;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:11px solid var(--neon2);filter:drop-shadow(0 0 5px var(--neon2));}
.obj-marker.edge.side .objm-arrow{border-bottom-color:var(--stam);filter:drop-shadow(0 0 5px var(--stam));}
.obj-marker.edge .objm-diamond{transform:rotate(45deg) scale(.7);}
.objm-dist{font-family:var(--mono);font-size:11px;color:var(--neon2);text-shadow:0 0 6px var(--neon2);text-align:center;margin-top:4px;white-space:nowrap;}
.obj-marker.side .objm-dist{color:var(--stam);text-shadow:0 0 6px var(--stam);}
.obj-meta{font-family:var(--mono);font-size:11px;color:var(--stam);margin-top:3px;letter-spacing:1px;}
.obj-meta #obj-dist{color:var(--neon);}

/* ========================================================================
   DRIVE HUD (speedometer)
   ===================================================================== */
.drive-hud{position:absolute;bottom:22px;right:28px;display:none;align-items:baseline;gap:6px;font-family:var(--mono);color:var(--neon);text-shadow:0 0 10px var(--neon);}
.drive-hud #speedo-val{font-size:34px;}
.speedo-unit{font-size:12px;color:var(--muted);letter-spacing:2px;}
#hud.driving .hud-weapon,#hud.driving #crosshair{display:none;}
#hud.driving #drive-hud{display:flex;}

/* scrollbars */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--line);}
::-webkit-scrollbar-track{background:transparent;}

@media (max-width:680px){
  .title-glitch{font-size:52px;}
  .panel,.panel.wide{min-width:90vw;max-width:94vw;}
  .pause-wrap{flex-direction:column;height:auto;}
}