/* BLOKABOOM — HUD, menus, map and the fallback boot screen (src/game/hud.js builds the DOM into #ui).
   The title screen (src/game/title.js, #vt-title, z-index 28) injects its own stylesheet. */
:root{
  --vt-glass:rgba(12,18,26,.74); --vt-glass2:rgba(20,29,40,.9); --vt-ink:#f3f0e8; --vt-muted:#9db0c2;
  --vt-orange:#f28a2e; --vt-hivis:#e4ec74; --vt-cyan:#46c9d8; --vt-good:#8fe07a; --vt-ok:#f2c14e; --vt-bad:#ff6b57;
  --vt-purple:#c26dff; --vt-blue:#5aa9ff; --vt-armour:#6fb4ff; --vt-sky:#bcd9ee; --vt-sky2:#5f7f9e;
  --vt-st:env(safe-area-inset-top,0px); --vt-sb:env(safe-area-inset-bottom,0px); --vt-sl:env(safe-area-inset-left,0px); --vt-sr:env(safe-area-inset-right,0px);
  box-sizing:border-box;
  /* ---------- Nightline HUD tokens (docs/hud-nightline.md step 0) ---------- */
  --nl-ink:rgba(9,12,17,.64); --nl-ink-strong:rgba(7,9,13,.86); --nl-ink-solid:#0B0F15;
  --nl-line:rgba(255,255,255,.12); --nl-line-strong:rgba(255,255,255,.28); --nl-track:rgba(255,255,255,.14);
  --nl-text:#F3F1EC; --nl-text-dim:#B9BFC8; --nl-text-faint:#8C939E; --nl-label:#E4E7EC;
  --nl-signal:#FFB547; --nl-signal-ink:#1B1206; --nl-cyan:#5AD1F0; --nl-health:#6FE3A0; --nl-danger:#FF5A5F; --nl-police:#5A9BFF;
  --nl-r-panel:12px; --nl-r-chip:8px; --nl-r-key:6px; --nl-r-radar:20px;
  --nl-blur:blur(14px) saturate(1.2);
  --nl-font-display:'Chakra Petch','Segoe UI',system-ui,sans-serif;
  --nl-font-ui:'Chakra Petch','Segoe UI',system-ui,sans-serif;
  --nl-u:clamp(.6667px, calc(100vh / 1080), 2px);
  --nl-safe:calc(56 * var(--nl-u));
  --nl-shadow:0 1px 2px rgba(0,0,0,.55);
  --nl-t-in:180ms; --nl-t-out:140ms;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --vt-sky:#5f7f9e; --vt-sky2:#22364b; } }
:root[data-theme="dark"]{ --vt-sky:#5f7f9e; --vt-sky2:#22364b; }
*,*::before,*::after{box-sizing:inherit}
html,body{margin:0;height:100%;overflow:hidden;background:#05070e;color:var(--vt-ink);
  font-family:'Chakra Petch','Segoe UI',system-ui,sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
#ui{position:fixed;inset:0;z-index:2;pointer-events:none;font-variant-numeric:tabular-nums}
#vt-boot,#vt-pause,#vt-map,.vt-chips{pointer-events:auto}
/* Button reset. It carries no `background`: these selectors contain an id, so a `background` here would outrank
   every .vt-mbtn/.vt-chip/.vt-preset rule below and leave the menus transparent. Each button sets its own. */
#vt-boot button,#vt-hud .vt-chip,#vt-pause button,#vt-map .vt-chip{font:inherit;color:inherit;border:0;border-radius:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#vt-boot button:focus-visible,#vt-hud .vt-chip:focus-visible,#vt-pause button:focus-visible,#vt-map .vt-chip:focus-visible{outline:2px solid var(--vt-hivis);outline-offset:2px}
.vt-ch{clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.vt-glass{background:var(--vt-glass);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vt-desk,.vt-mob{display:none} body:not(.mobile) .vt-desk{display:block} body.mobile .vt-mob{display:block}
.vt-hidden{display:none!important}
/* ---------- Nightline chip look (docs/hud-nightline.md step 0): every HUD chip becomes a Nightline ink chip ---------- */
#vt-hud{font-family:var(--nl-font-ui);color:var(--nl-text)}
#vt-hud .vt-glass{background:var(--nl-ink);backdrop-filter:var(--nl-blur);-webkit-backdrop-filter:var(--nl-blur);border:1px solid var(--nl-line);border-radius:var(--nl-r-chip)}
#vt-hud .vt-ch{clip-path:none}                       /* Nightline uses radii, not chamfers */
#vt-hud.noblur .vt-glass{background:rgba(9,12,17,.82);backdrop-filter:none;-webkit-backdrop-filter:none}
#vt-hud [hidden]{display:none!important}             /* the new flex columns set display on children */
/* keycap: every <b> inside a help chip */
.vt-tl b{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:calc(28 * var(--nl-u));height:calc(28 * var(--nl-u));padding:0 calc(8 * var(--nl-u));margin-right:calc(10 * var(--nl-u));
  border:1.5px solid rgba(243,241,236,.8);border-radius:var(--nl-r-key);font:600 calc(14 * var(--nl-u))/1 var(--nl-font-ui);color:var(--nl-text);vertical-align:middle}
.vt-tl b.p{width:calc(28 * var(--nl-u));padding:0;border-radius:50%}            /* pad face buttons A B X Y */
.vt-tl b.pw{min-width:calc(40 * var(--nl-u));height:calc(24 * var(--nl-u));border-radius:7px}       /* LB RB LT RT View Menu */

/* ---------- boot (fallback only: VT.title is the pre-game screen when it is loaded) ---------- */
#vt-boot{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:linear-gradient(180deg,var(--vt-sky) 0%,var(--vt-sky2) 100%);transition:opacity .45s;padding:calc(var(--vt-st) + 16px) 16px calc(var(--vt-sb) + 16px)}
#vt-boot.gone{opacity:0;pointer-events:none}
.vt-bootcol{width:min(480px,100%);display:flex;flex-direction:column;gap:18px}
.vt-title{font-size:clamp(40px,10vw,76px);font-weight:700;line-height:.9;letter-spacing:-.01em;margin:0;color:#fff;text-shadow:4px 4px 0 rgba(20,31,44,.35)}
.vt-title small{display:block;font-size:17px;font-weight:500;letter-spacing:.02em;margin-top:10px;text-shadow:none;color:rgba(255,255,255,.85)}
.vt-bar{display:grid;grid-template-columns:repeat(24,1fr);gap:3px}
.vt-bar i{aspect-ratio:1;background:rgba(21,31,44,.22)}
.vt-bar i.on{background:var(--vt-orange);box-shadow:inset -3px -3px 0 rgba(0,0,0,.18),inset 3px 3px 0 rgba(255,255,255,.25)}
.vt-status{font-size:15px;color:#fff;min-height:1.3em}
.vt-status.err{color:#ffe1dc;background:rgba(160,40,30,.6);padding:8px 10px;white-space:pre-wrap}
.vt-start{background:var(--vt-orange);color:#1c140c;font-size:20px;font-weight:700;padding:14px 26px;align-self:flex-start;
  box-shadow:inset -4px -4px 0 rgba(0,0,0,.2),inset 4px 4px 0 rgba(255,255,255,.3)}
.vt-start:active{transform:translateY(2px)}
.vt-controls{font-size:14px;line-height:1.55;color:rgba(255,255,255,.92);margin:0;padding:0;list-style:none}
.vt-controls b{font-weight:600;color:#fff}

/* ---------- hud ---------- */
/* z-index 6 puts the whole HUD layer ABOVE the touch overlay that input.js appends to #ui (`.vt-touch`,
   z-index 5). Without it the full-height aim/joystick zones swallow every tap on the Pause / settings
   chips and the mobile menu can never be opened. #vt-hud itself is pointer-events:none, so raising it
   costs the touch zones nothing: only .vt-chips inside it takes pointer events. */
#vt-hud{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .3s;overflow:hidden}
#vt-hud.show{opacity:1}
#vt-hud.hide{opacity:0}
/* objectives (step 4) */
.vt-obj{padding:calc(12 * var(--nl-u)) calc(16 * var(--nl-u));max-width:calc(360 * var(--nl-u));transition:opacity var(--nl-t-in)}
.vt-obj.quiet{opacity:0;transition-duration:var(--nl-t-out)}
.vt-objTitle{font:600 calc(13 * var(--nl-u))/1 var(--nl-font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--nl-text-dim);margin-bottom:calc(8 * var(--nl-u))}
.vt-objList{list-style:none;margin:0;padding:0;font:500 calc(17 * var(--nl-u))/1.6 var(--nl-font-ui)}
.vt-objList li{display:flex;align-items:center;gap:calc(10 * var(--nl-u))}
.vt-obj:not(.open) .vt-objList li:not(.next):not(.live){display:none}
.vt-objList li i{width:calc(12 * var(--nl-u));height:calc(12 * var(--nl-u));flex:none;border:1.5px solid rgba(243,241,236,.8);border-radius:3px}
.vt-objList li span{flex:1}
.vt-objList li em{font-style:normal;font-size:calc(15 * var(--nl-u));color:var(--nl-text-dim)}
.vt-objList li.done{color:var(--nl-text-faint);text-decoration:line-through}
.vt-objList li.done i{background:var(--nl-cyan);border-color:var(--nl-cyan)}
/* toasts: a notification feed, moved into .vt-bl above the radar (step 7) */
.vt-toasts{display:flex;flex-direction:column;align-items:flex-start;gap:calc(8 * var(--nl-u));max-width:calc(320 * var(--nl-u))}
.vt-toast{display:flex;align-items:center;gap:calc(10 * var(--nl-u));padding:calc(10 * var(--nl-u)) calc(12 * var(--nl-u));font:600 calc(15 * var(--nl-u))/1.25 var(--nl-font-ui);opacity:0;transform:translateY(calc(6 * var(--nl-u)));transition:opacity var(--nl-t-out),transform var(--nl-t-out)}
.vt-toast.show{opacity:1;transform:none;transition-duration:var(--nl-t-in)}
@starting-style{.vt-toast.show{opacity:0;transform:translateY(calc(6 * var(--nl-u)))}}
.vt-toast.good::before,.vt-toast.warn::before{content:"";flex:none;width:calc(18 * var(--nl-u));height:calc(18 * var(--nl-u));-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.vt-toast.good::before{background:var(--nl-cyan);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.vt-toast.warn::before{background:var(--nl-danger);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E")}
/* district name toast, bottom right (step 8) */
.vt-place{display:flex;flex-direction:column;align-items:flex-end;gap:calc(8 * var(--nl-u));margin-bottom:calc(8 * var(--nl-u));text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.55);
  opacity:0;transform:translateY(calc(6 * var(--nl-u)));transition:opacity var(--nl-t-out),transform var(--nl-t-out)}
.vt-place.show{opacity:1;transform:none;transition-duration:var(--nl-t-in)}
.vt-place::before{content:"";width:calc(64 * var(--nl-u));height:calc(2 * var(--nl-u));background:var(--nl-signal)}
.vt-placeT{font:700 calc(44 * var(--nl-u))/1 var(--nl-font-display);letter-spacing:.12em;margin-right:-.12em}
.vt-placeS{font:600 calc(15 * var(--nl-u))/1 var(--nl-font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--nl-label)}
#vt-hud.touch .vt-place{display:none}
@media (min-width:641px) and (max-width:955px){#vt-hud:not(.driving) .vt-br{bottom:max(var(--nl-safe), var(--vt-hb-top, 0px))}}
/* top-left help column: prompt, first-play hint, vehicle hint, keys chip, objectives (step 4) */
.vt-tl{position:absolute;left:calc(var(--vt-sl) + var(--nl-safe));top:calc(var(--vt-st) + var(--nl-safe));display:flex;flex-direction:column;align-items:flex-start;gap:calc(12 * var(--nl-u));max-width:calc(560 * var(--nl-u))}
.vt-prompt,.vt-hint,.vt-vhint{padding:calc(12 * var(--nl-u)) calc(16 * var(--nl-u));font:500 calc(17 * var(--nl-u))/calc(34 * var(--nl-u)) var(--nl-font-ui);color:var(--nl-text);text-shadow:none;white-space:normal;opacity:1;transform:none;
  transition:opacity var(--nl-t-in) ease-out,transform var(--nl-t-in) ease-out,display var(--nl-t-out) allow-discrete}
.vt-prompt:not(.show){display:none;opacity:0}
@starting-style{.vt-prompt.show,.vt-hint.show,.vt-vhint.show{opacity:0;transform:translateY(calc(6 * var(--nl-u)))}}
.vt-hint:not(.show),.vt-vhint:not(.show){opacity:0;transition-duration:.6s}
.vt-hint i,.vt-vhint i{font-style:normal;color:var(--nl-text-dim);margin:0 calc(6 * var(--nl-u))}
.vt-keyhint{display:flex;align-items:center;gap:calc(8 * var(--nl-u));padding:calc(6 * var(--nl-u)) calc(12 * var(--nl-u)) calc(6 * var(--nl-u)) calc(6 * var(--nl-u));font:600 calc(14 * var(--nl-u))/1 var(--nl-font-display);letter-spacing:.14em;text-transform:uppercase;transition:opacity .2s ease-out}
.vt-keyhint:not(.show){opacity:0}
.vt-keyhint b{min-width:calc(26 * var(--nl-u));height:calc(24 * var(--nl-u));font-size:calc(12 * var(--nl-u));margin-right:0}
/* crosshair + hit marker */
.vt-cross{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0;transition:opacity .12s}
.vt-cross.show{opacity:1}
/* Nightline ticks (step 9): 2px #F3F1EC from 9 to 18px out, a black under-stroke, centre dot r1.75 on r3 .45 black */
.vt-cross i{position:absolute;left:-1px;top:-1px;width:2px;height:2px;border-radius:1px;background:var(--nl-text);box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.vt-cross i:nth-child(1),.vt-cross i:nth-child(2){height:calc(9 * var(--nl-u));top:calc(-4.5 * var(--nl-u))}
.vt-cross i:nth-child(3),.vt-cross i:nth-child(4){width:calc(9 * var(--nl-u));left:calc(-4.5 * var(--nl-u))}
.vt-cross i:nth-child(5){width:3.5px;height:3.5px;left:-1.75px;top:-1.75px;border-radius:50%;box-shadow:0 0 0 .75px rgba(0,0,0,.45)}
.vt-cross.dot i:not(:nth-child(5)){opacity:0}
.vt-cross.dot i:nth-child(5){width:4px;height:4px;left:-2px;top:-2px;background:rgba(243,241,236,.75);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.vt-hitm{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0}
.vt-hitm.on{opacity:1}
.vt-hitm i{left:-1.1px;top:calc(-25 * var(--nl-u));width:2.25px;height:calc(9 * var(--nl-u));border-radius:1px;background:var(--nl-text);box-shadow:0 0 0 1px rgba(0,0,0,.45);transform-origin:1.1px calc(25 * var(--nl-u));position:absolute}
.vt-hitm i:nth-child(1){transform:rotate(45deg)}.vt-hitm i:nth-child(2){transform:rotate(135deg)}.vt-hitm i:nth-child(3){transform:rotate(225deg)}.vt-hitm i:nth-child(4){transform:rotate(315deg)}
.vt-hitm.kill i{background:var(--nl-danger);height:calc(11 * var(--nl-u));top:calc(-27 * var(--nl-u));transform-origin:1.1px calc(27 * var(--nl-u))}
/* damage / low health overlays (step 9) */
.vt-vig{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse 72% 74% at 50% 50%,rgba(255,90,95,0) 56%,rgba(255,90,95,.32) 100%)}
.vt-dmgdir{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0}
.vt-dmgdir svg{position:absolute;left:calc(-320 * var(--nl-u));top:calc(-320 * var(--nl-u));width:calc(640 * var(--nl-u));height:calc(640 * var(--nl-u));overflow:visible}
.vt-low{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse 72% 74% at 50% 50%,rgba(0,0,0,0) 56%,rgba(22,4,7,.46) 100%);backdrop-filter:none;-webkit-backdrop-filter:none}
/* sniper scope */
.vt-scope{position:absolute;inset:0;display:none;background:radial-gradient(circle at center,rgba(0,0,0,0) 0,rgba(0,0,0,0) 38vmin,rgba(0,0,0,.97) 40vmin)}
.vt-scope.show{display:block}
.vt-scope::before,.vt-scope::after{content:"";position:absolute;left:50%;top:50%;background:rgba(0,0,0,.85)}
.vt-scope::before{width:1px;height:76vmin;transform:translate(-50%,-50%)}
.vt-scope::after{height:1px;width:76vmin;transform:translate(-50%,-50%)}
.vt-scope .mil{position:absolute;left:50%;top:50%;width:0;height:0}
.vt-scope .mil i{position:absolute;background:rgba(0,0,0,.85)}
.vt-scope .zoom{position:absolute;left:50%;top:calc(50% + 34vmin);transform:translateX(-50%);font-size:14px;font-weight:600;color:var(--nl-cyan);letter-spacing:.06em}
/* bottom-left: notification feed, search card, radar, health/armour bars (docs/hud-nightline.md step 1 + 7) */
.vt-bl{position:absolute;left:calc(var(--vt-sl) + var(--nl-safe));bottom:calc(var(--vt-sb) + var(--nl-safe));display:flex;flex-direction:column;align-items:flex-start;gap:calc(10 * var(--nl-u))}
.vt-miniWrap{position:relative;width:calc(240 * var(--nl-u));height:calc(240 * var(--nl-u))}          /* JS writes the exact px, see below */
canvas.vt-mini{width:100%;height:100%;display:block;border-radius:var(--nl-r-radar)}
.vt-wp{position:absolute;left:50%;bottom:calc(8 * var(--nl-u));transform:translateX(-50%);font:600 calc(13 * var(--nl-u))/1 var(--nl-font-display);letter-spacing:.06em;color:var(--nl-signal);text-shadow:var(--nl-shadow);opacity:0}
.vt-wp.show{opacity:1}
.vt-bars{display:flex;flex-direction:row;gap:calc(6 * var(--nl-u));padding:0}
.vt-bar2{position:relative;height:calc(6 * var(--nl-u));border-radius:3px;background:var(--nl-track);overflow:hidden}
.vt-hp{width:calc(150 * var(--nl-u))} .vt-ar{width:calc(84 * var(--nl-u))}
.vt-bar2 i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;transition:width .15s}
.vt-hp i{background:var(--nl-health)} .vt-hp.bad i{background:var(--nl-danger)} .vt-ar i{background:var(--nl-cyan)}
/* heat gauge + police search card (step 2) */
.vt-tr{position:absolute;top:calc(var(--vt-st) + var(--nl-safe));right:calc(var(--vt-sr) + var(--nl-safe));display:flex;flex-direction:column;align-items:flex-end;gap:calc(8 * var(--nl-u))}
.vt-heat{display:flex;align-items:center;gap:calc(4 * var(--nl-u));padding:calc(8 * var(--nl-u)) calc(12 * var(--nl-u));transform-origin:100% 0}
#vt-hud .vt-heat{border-color:rgba(255,90,95,.32)}
.vt-heatL{font:600 calc(14 * var(--nl-u))/1 var(--nl-font-display);letter-spacing:.16em;color:var(--nl-danger);margin-right:calc(6 * var(--nl-u))}
.vt-cube svg{display:block;width:calc(22 * var(--nl-u));height:calc(24 * var(--nl-u))}
.vt-cube path{fill:none;stroke:rgba(243,241,236,.5);stroke-width:1.25;stroke-linejoin:round}
.vt-cube.on path,.vt-cube.siren path{stroke:rgba(9,12,17,.55)}
.vt-cube.on .t{fill:#FF8A8D} .vt-cube.on .l{fill:var(--nl-danger)} .vt-cube.on .r{fill:#C23A3F}
.vt-cube.siren .t{fill:var(--nl-text)} .vt-cube.siren .l{fill:var(--nl-danger)} .vt-cube.siren .r{fill:var(--nl-police)}
.vt-cube.siren .l{animation:nl-siren-l 1s steps(1,end) infinite} .vt-cube.siren .r{animation:nl-siren-r 1s steps(1,end) infinite}
@keyframes nl-siren-l{50%{fill:var(--nl-police)}} @keyframes nl-siren-r{50%{fill:var(--nl-danger)}}
.vt-heat.search .vt-cube.on,.vt-heat.search .vt-cube.siren{animation:nl-search .9s ease-in-out infinite alternate}
@keyframes nl-search{to{opacity:.55}}
.vt-search{display:flex;align-items:center;gap:calc(10 * var(--nl-u));padding:calc(10 * var(--nl-u)) calc(14 * var(--nl-u)) calc(10 * var(--nl-u)) calc(12 * var(--nl-u));margin-bottom:calc(6 * var(--nl-u))}
.vt-search svg{width:calc(20 * var(--nl-u));height:calc(20 * var(--nl-u));flex:none;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vt-search b{display:block;font:600 calc(15 * var(--nl-u))/1.2 var(--nl-font-ui);white-space:nowrap} .vt-search span{display:block;font:500 calc(13 * var(--nl-u))/1.2 var(--nl-font-ui);color:var(--nl-text-dim);white-space:nowrap}
/* weapon panel: top right, under heat (step 3) */
.vt-weapon{display:flex;flex-direction:column;gap:calc(12 * var(--nl-u));width:calc(300 * var(--nl-u));padding:calc(14 * var(--nl-u)) calc(16 * var(--nl-u));transition:opacity var(--nl-t-in) ease-out}
#vt-hud .vt-weapon,#vt-hud .vt-vcard{border-radius:var(--nl-r-panel)}
.vt-weapon.idle{opacity:0;transition-duration:var(--nl-t-out)}
.vt-weapon.bare{display:none}
#vt-hud.driving .vt-weapon{display:none}
.vt-wrow{display:flex;align-items:center;justify-content:space-between;gap:calc(16 * var(--nl-u))}
.vt-wicon{width:64px;height:40px;flex:none;display:grid;place-items:center}
.vt-wicon svg{width:64px;height:40px;image-rendering:pixelated}
/* VT.icons: a square voxel-model render instead of the 16x10 pixel art */
.vt-wicon.vox{width:56px;height:56px}
.vt-wicon canvas{display:block;width:100%;height:100%}
.vt-wtext{display:flex;flex-direction:column;align-items:flex-end;gap:calc(4 * var(--nl-u))}
.vt-wname{font:600 calc(13 * var(--nl-u))/1 var(--nl-font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--nl-label)}
.vt-ammo{font:600 calc(30 * var(--nl-u))/1 var(--nl-font-display);letter-spacing:.02em;white-space:nowrap}
.vt-ammo span{font-size:calc(30 * var(--nl-u));font-weight:600;color:var(--nl-text-dim);margin-left:.25em}
.vt-ammo.warn b,.vt-ammo.empty b{color:var(--nl-danger)}
.vt-wwarn{font:600 calc(12 * var(--nl-u))/1 var(--nl-font-display);letter-spacing:.14em;color:var(--nl-signal);min-height:calc(12 * var(--nl-u))}
.vt-wwarn.empty{color:var(--nl-danger)}
/* collected voxels (VT.collect). Sits above the weapon panel on desktop; on touch it moves under the minimap,
   because the lower-right band is where the FIRE / JUMP / RLD buttons live (see HUD_AMMO in src/game/input.js). */
.vt-bag{position:absolute;right:calc(var(--vt-sr) + 14px);bottom:calc(var(--vt-sb) + 86px);display:flex;align-items:center;gap:9px;padding:6px 12px 6px 8px;min-width:130px}
.vt-bagsw{width:16px;height:16px;flex:none;border-radius:2px;background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.vt-bagsw.vox{width:20px;height:20px;border-radius:0;box-shadow:none}
.vt-bagsw canvas{display:block;width:100%;height:100%}
.vt-bagtext{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:1}
.vt-bagn{font-size:19px;font-weight:700;line-height:1}
.vt-bagname{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--vt-muted);line-height:12px}
.vt-wwarn.empty{color:var(--vt-bad)}
/* depth below the surface while mining (VT.mining.depth); top centre, hidden in a vehicle */
.vt-depth{position:absolute;top:calc(var(--vt-st) + 12px);left:50%;transform:translateX(-50%);display:flex;align-items:baseline;gap:9px;padding:6px 14px 7px;white-space:nowrap}
.vt-depth[hidden]{display:none}
.vt-depth .k{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--vt-muted)}
.vt-depth b{font-size:19px;font-weight:700;line-height:1}
.vt-depth .band{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--nl-cyan)}
.vt-depth .band:empty{display:none}
#vt-hud.driving .vt-depth{display:none}
#vt-hud.deep .vt-debug{top:calc(var(--vt-st) + 58px)}
.vt-rl{display:none;height:calc(3 * var(--nl-u));border-radius:1.5px;background:var(--nl-track);overflow:hidden}
.vt-rl.show{display:block}
.vt-rl i{display:block;height:100%;width:0;border-radius:1.5px;background:var(--nl-text)}
.vt-rl.low i{background:var(--nl-danger)} .vt-rl.reload i{background:var(--nl-signal)}
/* vehicle panel — one panel, five faces (car / bike / boat / plane / heli, hud.js updateDrive), bottom right (step 6) */
.vt-br{position:absolute;right:calc(var(--vt-sr) + var(--nl-safe));bottom:calc(var(--vt-sb) + var(--nl-safe));display:flex;flex-direction:column;align-items:flex-end;gap:calc(10 * var(--nl-u))}
.vt-drive{display:none;flex-direction:column;align-items:flex-end;gap:calc(10 * var(--nl-u))}
#vt-hud.driving .vt-drive{display:flex}
#vt-hud.driving .vt-cross,#vt-hud.driving .vt-hitm{display:none}
.vt-spd{display:flex;align-items:baseline;gap:calc(6 * var(--nl-u));padding:calc(8 * var(--nl-u)) calc(14 * var(--nl-u)) calc(9 * var(--nl-u))}
.vt-speed{font:600 calc(30 * var(--nl-u))/1 var(--nl-font-display);min-width:2.4ch;text-align:right}
.vt-spd .u{font:600 calc(16 * var(--nl-u))/1 var(--nl-font-ui);color:var(--nl-text-dim)}
.vt-gear{margin-left:calc(10 * var(--nl-u));align-self:center;min-width:calc(28 * var(--nl-u));height:calc(28 * var(--nl-u));display:grid;place-items:center;border:1.5px solid rgba(243,241,236,.8);border-radius:var(--nl-r-key);font:600 calc(14 * var(--nl-u))/1 var(--nl-font-display)}
.vt-vcard{display:flex;flex-direction:column;align-items:flex-end;padding:calc(18 * var(--nl-u)) calc(22 * var(--nl-u)) calc(16 * var(--nl-u))}
.vt-vcard .vt-rule{margin-bottom:calc(14 * var(--nl-u))}
.vt-vname{font:700 calc(40 * var(--nl-u))/1 var(--nl-font-display);letter-spacing:.12em;margin-right:-.12em;text-transform:uppercase}
.vt-vclass{margin-top:calc(10 * var(--nl-u));font:600 calc(13 * var(--nl-u))/1 var(--nl-font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--nl-text-dim)}
.vt-inst{align-self:stretch;margin-top:calc(14 * var(--nl-u));padding-top:calc(12 * var(--nl-u));border-top:1px solid var(--nl-line);display:flex;justify-content:flex-end;align-items:center;gap:calc(14 * var(--nl-u));font:500 calc(15 * var(--nl-u))/1.2 var(--nl-font-ui);color:var(--nl-text-dim)}
.vt-vcard.brief .vt-rule,.vt-vcard.brief .vt-vname,.vt-vcard.brief .vt-vclass{display:none}
.vt-vcard.brief .vt-inst{margin-top:0;padding-top:0;border-top:0}
.vt-vhp{position:relative;width:calc(84 * var(--nl-u));height:calc(6 * var(--nl-u));border-radius:3px;background:var(--nl-track);overflow:hidden}
.vt-vhp i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;transition:width .2s;background:var(--nl-health)} .vt-vhp.ok i{background:var(--nl-signal)} .vt-vhp.bad i{background:var(--nl-danger)}
/* instruments only the class that has them shows */
.vt-att,.vt-altbox,.vt-thr{display:none}
.vt-drive.kl-bike .vt-att,.vt-drive.kl-plane .vt-att,.vt-drive.kl-heli .vt-att{display:block}
.vt-drive.kl-plane .vt-altbox,.vt-drive.kl-heli .vt-altbox{display:block}
.vt-drive.kl-plane .vt-thr{display:block}
/* lean / attitude: a clipped disc with a horizon bar that banks and a fixed aircraft mark */
.vt-att{position:relative;width:54px;height:40px;overflow:hidden;border-radius:6px;background:rgba(255,255,255,.07);flex:none}
.vt-att .hz{position:absolute;left:-30%;top:50%;width:160%;height:2px;margin-top:-1px;background:var(--nl-signal);transform-origin:50% 50%}
.vt-att .mk{position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.vt-att .lbl{position:absolute;left:0;right:0;bottom:1px;text-align:center;font-size:10px;font-weight:600;color:var(--nl-text-dim)}
.vt-altbox{text-align:right;min-width:74px}
.vt-altbox .v{font-size:17px;font-weight:700;line-height:1.1}
.vt-altbox .vs{font-size:10px;font-weight:600;color:var(--nl-text-dim);min-height:12px}
.vt-altbox .vs.bad{color:var(--nl-danger)}
.vt-thr{min-width:56px}
.vt-thr .v{font-size:12px;font-weight:600;text-align:right}
.vt-thrbar{width:56px;height:6px;border-radius:3px;background:var(--nl-track);position:relative}
.vt-thrbar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--nl-signal)}
.vt-vflags{display:flex;flex-direction:column;gap:2px;min-width:0}
.vt-vflags i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--nl-text-dim);white-space:nowrap}
.vt-vflags i.bad{color:var(--nl-danger);animation:vt-blinkf .7s steps(2,start) infinite}
.vt-vflags i.good{color:var(--nl-cyan)}
.vt-vflags i[hidden]{display:none}
@keyframes vt-blinkf{to{opacity:.25}}
/* a phone in portrait has ~140 px of clear width between the minimap and the chips: the panel keeps every
   instrument but shrinks to fit rather than dropping the one that matters (a stall warning, the hull bar). */
@media (max-width:560px){
  .vt-drive{gap:8px;padding:6px 10px;max-width:calc(100vw - 20px)}
  .vt-speed{font-size:23px;min-width:2ch}
  .vt-att{width:40px;height:30px}
  .vt-altbox{min-width:56px}.vt-altbox .v{font-size:14px}
  .vt-thr,.vt-thrbar{min-width:40px;width:40px}
  .vt-vhp{width:60px}
  .vt-vflags i{font-size:9px;letter-spacing:.04em}
  .vt-vhint{font-size:11px}
}
/* debug */
.vt-debug{position:absolute;top:calc(var(--vt-st) + 12px);left:50%;transform:translateX(-50%);padding:8px 12px 9px;min-width:250px;font-size:12px}
.vt-debug .fps{font-size:28px;font-weight:700;line-height:1;margin-right:4px}
.vt-debug .fps.good{color:var(--vt-good)}.vt-debug .fps.ok{color:var(--vt-ok)}.vt-debug .fps.bad{color:var(--vt-bad)}
.vt-debug .lines{display:grid;grid-template-columns:auto auto;gap:1px 14px;margin-top:5px}
.vt-debug .lines span{color:var(--vt-muted)} .vt-debug .lines b{font-weight:600;text-align:right;white-space:nowrap}
/* mobile chips. Geometry (top 52, height 44, right 12, width ~124) is mirrored by HUD_CHIPS in
   src/game/input.js, which lays the WPN/MAP touch buttons out underneath them — keep the two in step. */
.vt-chips{position:absolute;top:calc(var(--vt-st) + 52px);right:calc(var(--vt-sr) + 12px);z-index:7;display:none;gap:6px;pointer-events:auto}
body.mobile .vt-chips{display:flex}
.vt-chip{padding:8px 12px;font-size:13px;font-weight:600;background:var(--vt-glass);min-height:44px;min-width:44px;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.vt-chip:active{background:var(--nl-signal);color:var(--nl-signal-ink)}
.vt-gearchip{display:grid;place-items:center;padding:8px}
.vt-gearchip svg{width:22px;height:22px;display:block;fill:currentColor;pointer-events:none}
/* Compact touch HUD. The panel rects below are mirrored by HUD_MINI / HUD_AMMO in src/game/input.js so the
   touch controls can be laid out around them — change one, change both (tools/test-input.js asserts it). */
#vt-hud.touch .vt-tl{left:50%;transform:translateX(-50%);top:calc(var(--vt-st) + 66px);align-items:center;max-width:min(62vw,420px)}
#vt-hud.touch .vt-obj,#vt-hud.touch .vt-hint,#vt-hud.touch .vt-keyhint{display:none}
#vt-hud.touch .vt-hint,#vt-hud.touch .vt-vhint{font-size:11.5px;line-height:1.6;text-align:center}
#vt-hud.touch .vt-tr{top:calc(var(--vt-st) + 12px);right:calc(var(--vt-sr) + 12px)}     /* where the stars were */
#vt-hud.touch .vt-search{display:none}
#vt-hud.touch .vt-bl{left:calc(var(--vt-sl) + 10px);top:calc(var(--vt-st) + 10px);bottom:auto;width:130px}     /* HUD_MINI 130x176 @10 */
#vt-hud.touch .vt-miniWrap,#vt-hud.touch canvas.vt-mini{width:130px;height:130px}
#vt-hud.touch canvas.vt-mini{border-radius:11px}
#vt-hud.touch .vt-bars{width:100%;padding:4px 6px}
#vt-hud.touch .vt-hp,#vt-hud.touch .vt-ar{flex:1;width:auto;min-width:0}
#vt-hud.touch .vt-weapon{position:fixed;top:auto;right:calc(var(--vt-sr) + 14px);bottom:calc(var(--vt-sb) + 14px);width:190px;min-width:0;height:52px;padding:6px 10px 6px 8px;gap:8px;overflow:hidden}  /* HUD_AMMO 190x52 @14 */
#vt-hud.touch .vt-weapon.bare,#vt-hud.touch .vt-weapon.idle{display:flex;opacity:1}
#vt-hud.touch.driving .vt-weapon{display:none}
#vt-hud.touch .vt-wicon,#vt-hud.touch .vt-wicon svg{width:48px;height:30px}
#vt-hud.touch .vt-wicon.vox{width:40px;height:40px}
#vt-hud.touch .vt-wname{font-size:11px;line-height:13px}
#vt-hud.touch .vt-ammo{font-size:20px;line-height:20px}
#vt-hud.touch .vt-wwarn{display:none}
#vt-hud.touch .vt-drive,#vt-hud.touch .vt-br{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--vt-st) + 10px);bottom:auto;right:auto;flex-direction:row;gap:10px;padding:6px 12px}
#vt-hud.touch .vt-vcard>*:not(.vt-inst){display:none}
#vt-hud.touch .vt-speed{font-size:26px}
#vt-hud.touch .vt-att{width:44px;height:32px}
#vt-hud.touch .vt-bag{left:calc(var(--vt-sl) + 10px);top:calc(var(--vt-st) + 194px);right:auto;bottom:auto;min-width:0;width:130px;padding:5px 8px 5px 7px;gap:7px}
#vt-hud.touch .vt-bagn{font-size:16px}
#vt-hud.touch .vt-debug{left:calc(var(--vt-sl) + 10px);top:calc(var(--vt-st) + 246px);transform:none;min-width:0;font-size:11px}
#vt-hud.touch .vt-toasts{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--vt-st) + 246px);align-items:center}

/* ---------- weapon wheel ---------- */
#vt-wheel{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(6,10,16,.35);pointer-events:none}
#vt-wheel[hidden]{display:none}
#vt-wheel svg{width:min(78vmin,460px);height:min(78vmin,460px);overflow:visible}
#vt-wheel .seg{fill:rgba(12,18,26,.78);stroke:rgba(255,255,255,.14);stroke-width:1.5;transition:fill .08s}
#vt-wheel .seg.sel{fill:rgba(242,138,46,.9)}
#vt-wheel .seg.off{fill:rgba(12,18,26,.45)}
#vt-wheel .lbl{fill:#f3f0e8;font:600 11px 'Chakra Petch',system-ui;text-anchor:middle;pointer-events:none;letter-spacing:.04em}
/* 17-20 segments (the v3 explosives): the sector is 18 deg, so the ammo line shrinks with the icon */
#vt-wheel svg.micro .ammo{font-size:8.5px}
#vt-wheel svg.micro .seg{stroke-width:1}
#vt-wheel .lbl.dim,#vt-wheel .ammo.dim{fill:rgba(243,240,232,.4)}
#vt-wheel .ammo{fill:#9db0c2;font:600 10px 'Chakra Petch',system-ui;text-anchor:middle;pointer-events:none}
#vt-wheel .sel ~ .lbl{fill:#1c140c}
#vt-wheel .centre{fill:#f3f0e8;font:700 15px 'Chakra Petch',system-ui;text-anchor:middle;letter-spacing:.06em}
#vt-wheel .centre2{fill:#9db0c2;font:600 11px 'Chakra Petch',system-ui;text-anchor:middle}
#vt-wheel .ico{pointer-events:none}
/* VT.icons over the wheel: the same 460-unit box as the SVG, stacked in its grid cell */
#vt-wheel>*{grid-area:1/1}
#vt-wheel .vt-wico{position:relative;width:min(78vmin,460px);height:min(78vmin,460px);pointer-events:none}
#vt-wheel .vt-wico canvas{position:absolute;display:block}
#vt-wheel .vt-wico canvas.off{opacity:.35}

/* ---------- modal panels (pause, map, end) ---------- */
.vt-modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:rgba(6,10,16,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:calc(var(--vt-st) + 12px) calc(var(--vt-sr) + 12px) calc(var(--vt-sb) + 12px) calc(var(--vt-sl) + 12px)}
.vt-modal[hidden]{display:none}
.vt-panel{background:var(--vt-glass2);box-shadow:0 12px 40px rgba(0,0,0,.4);display:flex;width:min(820px,100%);max-height:100%;overflow:hidden}
.vt-pleft{display:flex;flex-direction:column;gap:6px;padding:22px 20px;min-width:220px;background:rgba(0,0,0,.18)}
.vt-pleft h2{margin:0 0 12px;font-size:30px;font-weight:700;letter-spacing:.02em;color:#fff}
.vt-mbtn{text-align:left;padding:10px 14px;font-size:16px;font-weight:600;background:rgba(255,255,255,.04);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.vt-mbtn:hover,.vt-mbtn.sel{background:var(--vt-orange);color:#1c140c}
.vt-mbtn.primary{background:var(--vt-orange);color:#1c140c}
.vt-mbtn.primary:hover{filter:brightness(1.1)}
.vt-pinfo{margin-top:auto;padding-top:14px;font-size:12px;color:var(--vt-muted);line-height:1.5;white-space:pre-line}
#vt-pause .vt-mbtn[hidden]{display:none}
/* opened from the title's Settings button: Back instead of Resume, no in-game entries, no game info */
#vt-pause:not(.from-title) .vt-mbtn.back{display:none}
#vt-pause.from-title .vt-mbtn.game,#vt-pause.from-title .vt-pinfo{display:none}
.vt-pright{flex:1;padding:22px 22px;overflow:auto;min-width:0}
.vt-pright h3{margin:0 0 14px;font-size:18px;font-weight:600;color:var(--vt-hivis);letter-spacing:.04em}
.vt-page[hidden]{display:none}
.vt-row{display:flex;align-items:center;gap:12px;font-size:14px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.vt-row>label{width:150px;color:var(--vt-muted);flex:none}
.vt-row input[type=range]{flex:1;accent-color:var(--vt-orange);min-width:80px}
.vt-row output{width:58px;text-align:right;flex:none}
.vt-row select,.vt-row input[type=number],.vt-row input[type=text]{font:inherit;background:#26344a;color:var(--vt-ink);border:0;padding:6px 8px;min-width:0}
.vt-row input[type=number]{width:140px}
.vt-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--vt-orange)}
.vt-row .vt-sbtn{padding:6px 10px;font-size:13px;font-weight:600;line-height:1.2;width:auto;height:auto;border-radius:0;background:#26344a;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.vt-row .vt-sbtn:hover{background:var(--vt-orange);color:#1c140c}
.vt-note{font-size:12px;color:var(--vt-muted);line-height:1.5;margin:10px 0 0}
/* settings tabs */
.vt-tabs{display:flex;gap:6px;margin:0 0 12px;flex-wrap:wrap}
.vt-tabbtn{padding:9px 16px;min-height:40px;font-size:14px;font-weight:600;letter-spacing:.03em;background:rgba(255,255,255,.05);color:var(--vt-muted)}
.vt-tabbtn:hover{background:rgba(255,255,255,.1);color:var(--vt-ink)}
.vt-tabbtn.sel{background:var(--vt-orange);color:#1c140c}
.vt-tab[hidden]{display:none}
/* presets */
.vt-presets{margin:0 0 12px;padding:10px 12px 11px;background:rgba(255,255,255,.04)}
.vt-plabel{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--vt-muted);margin-bottom:7px}
.vt-prow{display:flex;gap:6px;flex-wrap:wrap}
.vt-preset{flex:1 1 92px;min-height:44px;padding:10px 12px;font-size:14px;font-weight:600;text-align:center;background:#26344a}
.vt-preset:hover{background:rgba(242,138,46,.75);color:#1c140c}
.vt-preset.sel{background:var(--vt-orange);color:#1c140c}
.vt-pdesc{margin-top:8px;font-size:12px;line-height:1.45;color:var(--vt-muted);min-height:2.9em}
/* per-row cost line: what this control costs the frame */
.vt-row{flex-wrap:wrap}
.vt-cost{flex:1 0 100%;font-size:11.5px;line-height:1.45;color:var(--vt-muted);opacity:.85;margin:2px 0 3px}
/* live performance panel */
.vt-perf{margin-top:14px;padding:12px;background:rgba(0,0,0,.24)}
.vt-perfhead{display:flex;align-items:baseline;gap:6px;margin-bottom:8px}
.vt-perfhead .big{font-size:30px;font-weight:700;line-height:1}
.vt-perfhead .big.good{color:var(--vt-good)}.vt-perfhead .big.ok{color:var(--vt-ok)}.vt-perfhead .big.bad{color:var(--vt-bad)}
.vt-perfhead .u{font-size:12px;color:var(--vt-muted)}
.vt-perfhead .ms{margin-left:auto;font-size:13px;font-weight:600;color:var(--vt-muted)}
canvas.vt-spark{display:block;width:100%;height:56px;background:rgba(0,0,0,.3)}
.vt-perfgrid{display:grid;grid-template-columns:auto auto;gap:1px 14px;margin-top:9px;font-size:12px}
.vt-perfgrid span{color:var(--vt-muted)} .vt-perfgrid b{font-weight:600;text-align:right;white-space:nowrap}
.vt-perfhint{margin-top:10px;padding:7px 10px;font-size:12.5px;font-weight:600;line-height:1.4;color:var(--vt-hivis);background:rgba(228,236,116,.1)}
.vt-keys{display:grid;grid-template-columns:1fr auto;gap:4px 16px;font-size:14px}
.vt-keys span{color:var(--vt-muted);padding:4px 0}
.vt-keys b{font-weight:600;text-align:right;padding:4px 0}
.vt-keys3{grid-template-columns:minmax(120px,1fr) minmax(110px,auto) minmax(100px,auto);align-items:center}
.vt-kh{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--vt-muted)}
.vt-bind{font:inherit;color:inherit;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:4px 8px;text-align:left;cursor:pointer;min-height:30px}
.vt-bind:hover,.vt-bind:focus-visible{background:rgba(255,255,255,.14)}
.vt-bind em{font-style:normal;color:var(--vt-muted);font-size:12px}
.vt-keys kbd{display:inline-block;font:600 12px 'Chakra Petch',system-ui;border:1.5px solid rgba(255,255,255,.55);padding:1px 6px;margin-left:4px;min-width:24px;text-align:center}

/* ---------- GLB vehicle importer (hud.js openVehicleImport) ----------
   Above the pause menu (30) and the designer (40), below the boot screen (50); it lives in #ui, never inside
   #vt-hud (§12). Same panel language as the character designer: preview left, controls right, glass chrome. */
#vt-vimp{position:fixed;inset:0;z-index:42;display:grid;place-items:center;pointer-events:auto;background:rgba(6,10,16,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:calc(var(--vt-st) + 10px) calc(var(--vt-sr) + 10px) calc(var(--vt-sb) + 10px) calc(var(--vt-sl) + 10px)}
#vt-vimp[hidden]{display:none}
.vi-panel{width:min(1180px,100%);height:min(840px,100%);display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--vt-glass2);box-shadow:0 24px 70px rgba(0,0,0,.55);overflow:hidden}
.vi-head{display:flex;align-items:center;gap:14px;padding:14px 18px 11px;border-bottom:1px solid rgba(255,255,255,.08)}
.vi-head h2{margin:0;font-size:20px;font-weight:700;letter-spacing:.03em;color:#fff}
.vi-sub{font-size:12px;color:var(--vt-muted);flex:1;min-width:0}
.vi-x{padding:9px 14px;min-height:44px;font-size:13px;font-weight:600;background:rgba(255,255,255,.06);color:var(--vt-ink);border:0;cursor:pointer;font-family:inherit}
.vi-x:hover{background:var(--vt-orange);color:#1c140c}
.vi-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,38%);min-height:0}
.vi-view{position:relative;min-height:0;background:#1b2531;border-right:1px solid rgba(255,255,255,.08);overflow:hidden}
.vi-cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair;image-rendering:pixelated}
.vi-empty{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:var(--vt-muted);pointer-events:none}
.vi-empty[hidden]{display:none}
.vi-modes{position:absolute;left:12px;top:12px;display:flex;gap:6px;align-items:center}
.vi-zoom{display:flex;gap:6px;margin-left:8px}
.vi-mbtn{min-width:44px;min-height:44px;padding:8px 14px;font:inherit;font-size:13px;font-weight:600;color:var(--vt-ink);background:rgba(10,14,20,.6);border:1px solid rgba(255,255,255,.14);cursor:pointer;touch-action:manipulation}
.vi-mbtn:hover{background:rgba(255,255,255,.14)}
.vi-mbtn.sel{background:var(--vt-orange);color:#1c140c;border-color:var(--vt-orange)}
.vi-vhint{position:absolute;left:12px;right:12px;bottom:10px;font-size:11.5px;color:var(--vt-muted);text-align:center;pointer-events:none}
.vi-side{display:flex;flex-direction:column;gap:2px;padding:14px 16px 18px;overflow:auto;min-height:0}
.vi-sec{padding:0 0 12px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:10px}
.vi-sec:last-child{border-bottom:0}
.vi-k{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--vt-hivis);margin-bottom:8px}
.vi-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0}
.vi-row>label{font-size:13px;color:var(--vt-muted);min-width:96px}
.vi-row input[type=range]{flex:1;accent-color:var(--vt-orange);min-width:90px}
.vi-row input[type=text],.vi-row input[type=file]{flex:1;min-width:0;font:inherit;font-size:13px;background:#26344a;color:var(--vt-ink);border:0;padding:9px 8px}
.vi-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--vt-orange)}
.vi-row output{font-size:12px;color:var(--vt-ink);min-width:58px;text-align:right}
.vi-btn{min-height:44px;padding:9px 14px;font:inherit;font-size:13px;font-weight:600;color:var(--vt-ink);background:#26344a;border:0;cursor:pointer;touch-action:manipulation}
.vi-btn:hover{background:var(--vt-orange);color:#1c140c}
.vi-btn.primary{background:var(--vt-orange);color:#1c140c}
.vi-btn.small{min-height:36px;padding:7px 10px;font-size:12px}
.vi-btn.danger:hover{background:var(--vt-bad);color:#fff}
.vi-btn:disabled{opacity:.4;cursor:default}
.vi-btn:disabled:hover{background:#26344a;color:var(--vt-ink)}
.vi-status{font-size:12px;line-height:1.45;color:var(--vt-muted);min-height:1.4em;margin-top:4px}
.vi-status.bad{color:#ffd6cf}
.vi-roles{display:flex;flex-wrap:wrap;gap:6px}
.vi-role{min-height:44px;padding:9px 12px;font:inherit;font-size:13px;font-weight:600;color:var(--vt-ink);background:rgba(255,255,255,.05);
  border:2px solid rgba(255,255,255,.2);cursor:pointer;touch-action:manipulation}
.vi-role:hover{background:rgba(255,255,255,.12)}
.vi-role.sel{background:var(--vt-orange);color:#1c140c}
.vi-cost{font-size:11.5px;line-height:1.45;color:var(--vt-muted);opacity:.9;margin:6px 0 2px}
.vi-counts,.vi-guess{display:grid;grid-template-columns:auto auto;gap:2px 14px;font-size:12.5px}
.vi-counts span,.vi-guess span{color:var(--vt-muted)} .vi-counts b,.vi-guess b{font-weight:600;text-align:right;white-space:nowrap}
.vi-guess{margin-top:6px}
.vi-list{display:flex;flex-direction:column;gap:6px}
.vi-item{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vi-iname{flex:1 1 120px;min-width:0;font:inherit;font-size:13px;background:#26344a;color:var(--vt-ink);border:0;padding:9px 8px}
.vi-meta{font-size:11px;color:var(--vt-muted);white-space:nowrap}
@media (max-width:820px){
  .vi-main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(180px,42%) minmax(0,1fr)}
  .vi-view{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .vi-panel{height:100%}
}
@media (max-width:560px){
  #vt-vimp{padding:calc(var(--vt-st) + 6px) calc(var(--vt-sr) + 6px) calc(var(--vt-sb) + 6px) calc(var(--vt-sl) + 6px)}
  .vi-head{padding:10px 12px 8px}.vi-head h2{font-size:17px}.vi-sub{display:none}
  .vi-side{padding:10px 12px 14px}
  .vi-row>label{min-width:0;flex:1 0 100%}
  .vi-row input[type=text],.vi-row input[type=file]{min-height:44px}
  .vi-role,.vi-btn,.vi-mbtn{flex:1 1 40%}
}
/* end screens: knocked out / arrested cards, never WASTED/BUSTED, never a star rating (step 5) */
#vt-end{position:fixed;inset:0;z-index:35;opacity:0;pointer-events:none;transition:opacity var(--nl-t-in) ease-out;
  backdrop-filter:blur(6px) brightness(.55) saturate(.8);-webkit-backdrop-filter:blur(6px) brightness(.55) saturate(.8);
  background:radial-gradient(ellipse 73% 83% at 0% 100%,rgba(5,6,9,.55) 0%,rgba(5,6,9,.24) 45%,rgba(5,6,9,0) 75%)}
#vt-end.show{opacity:1}
#vt-end[hidden]{display:none}
#vt-end.noblur{backdrop-filter:brightness(.55) saturate(.8);-webkit-backdrop-filter:brightness(.55) saturate(.8)}   /* showEnd copies #vt-hud.noblur */
.vt-endcard{position:absolute;left:calc(120 * var(--nl-u));bottom:calc(224 * var(--nl-u));width:calc(600 * var(--nl-u));box-sizing:border-box;padding:calc(34 * var(--nl-u)) calc(40 * var(--nl-u)) calc(40 * var(--nl-u));display:flex;flex-direction:column;
  background:var(--nl-ink);backdrop-filter:var(--nl-blur);border:1px solid var(--nl-line);border-radius:var(--nl-r-panel);font-family:var(--nl-font-ui);color:var(--nl-text)}
.vt-rule{display:block;width:calc(64 * var(--nl-u));height:calc(2 * var(--nl-u));background:var(--nl-signal)}
#vt-end.arrest .vt-rule{background:var(--nl-police)}
#vt-end .word{margin-top:calc(18 * var(--nl-u));font:700 calc(44 * var(--nl-u))/1 var(--nl-font-display);letter-spacing:.12em}
#vt-end .place{margin:calc(14 * var(--nl-u)) 0 0;font:500 calc(22 * var(--nl-u))/1.25 var(--nl-font-ui)} #vt-end .place b{font-weight:600}
#vt-end .sub{margin:calc(6 * var(--nl-u)) 0 0;font:500 calc(17 * var(--nl-u))/1.25 var(--nl-font-ui);color:var(--nl-text-dim)}
.vt-endbar{margin-top:calc(22 * var(--nl-u));height:calc(3 * var(--nl-u));border-radius:2px;background:rgba(243,241,236,.18);overflow:hidden}
.vt-endbar i{display:block;height:100%;background:var(--nl-signal);transform:scaleX(0);transform-origin:0 50%}
#vt-end.run .vt-endbar i{transform:scaleX(1);transition:transform 1.6s linear}
@starting-style{#vt-end.show{opacity:0} #vt-end.run .vt-endbar i{transform:scaleX(0)}}
.vt-endfade{position:absolute;inset:0;box-sizing:border-box;padding:0 0 calc(264 * var(--nl-u)) calc(160 * var(--nl-u));display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:calc(12 * var(--nl-u));
  background:var(--nl-ink-solid);opacity:0;transition:opacity .35s ease-out}
#vt-end.leave .vt-endfade{opacity:1}
.vt-endfade .t{font:700 calc(40 * var(--nl-u))/1.1 var(--nl-font-display);letter-spacing:.12em}
.vt-endfade .s{font:600 calc(15 * var(--nl-u))/1 var(--nl-font-ui);letter-spacing:.16em;color:var(--nl-text-dim)}
@media (max-width:640px){.vt-endcard{left:16px;right:16px;width:auto;bottom:calc(var(--vt-sb) + 96px)}.vt-endfade{padding:0 16px 30vh}}

/* ---------- full-screen map ---------- */
#vt-map{position:fixed;inset:0;z-index:25;background:#0d1620;cursor:grab;touch-action:none}
#vt-map[hidden]{display:none}
#vt-map.drag{cursor:grabbing}
#vt-map canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.vt-mapbar{position:absolute;top:calc(var(--vt-st) + 12px);left:calc(var(--vt-sl) + 12px);right:calc(var(--vt-sr) + 12px);display:flex;align-items:center;gap:8px;pointer-events:none}
.vt-mapbar>*{pointer-events:auto}
.vt-mapbar .t{font-size:18px;font-weight:700;letter-spacing:.06em;padding:8px 14px;margin-right:auto}
.vt-mapbar .vt-chip{padding:8px 12px;font-size:13px;font-weight:600}
.vt-mapbar .vt-chip.on{background:rgba(242,138,46,.9);color:#1c140c}
.vt-coord{position:absolute;left:calc(var(--vt-sl) + 12px);bottom:calc(var(--vt-sb) + 12px);padding:6px 12px;font-size:13px;font-weight:600;pointer-events:none}
.vt-maphelp{position:absolute;right:calc(var(--vt-sr) + 12px);bottom:calc(var(--vt-sb) + 12px);padding:6px 12px;font-size:12px;color:var(--vt-muted);pointer-events:none}
.vt-legend{position:absolute;right:calc(var(--vt-sr) + 12px);top:calc(var(--vt-st) + 60px);padding:10px 14px;font-size:12px;display:none;flex-direction:column;gap:5px;pointer-events:none}
.vt-legend.show{display:flex}
.vt-legend div{display:flex;align-items:center;gap:8px}
.vt-legend i{width:12px;height:12px;flex:none;box-shadow:inset -2px -2px 0 rgba(0,0,0,.25)}
.vt-legend i.line{height:4px}
/* touch: the map owns every gesture inside itself (drag pan, two-finger pinch — hud.js), the keyboard-only
   help line goes away, and the bar wraps instead of pushing the Close chip off a phone screen */
body.mobile .vt-maphelp{display:none}
body.mobile .vt-mapbar{flex-wrap:wrap;gap:6px}
body.mobile .vt-mapbar .vt-chip{min-height:44px}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .vt-panel{flex-direction:column}
  .vt-pleft{flex-direction:row;flex-wrap:wrap;padding:14px;min-width:0;gap:6px}
  .vt-pleft h2{width:100%;margin:0 0 4px;font-size:22px}
  .vt-mbtn{font-size:14px;padding:10px 12px;min-height:44px;flex:1 1 auto;text-align:center}
  .vt-pinfo{display:none}
  .vt-pright{padding:14px}
  .vt-row>label{width:110px}
}
/* phone: one column, 44 px touch targets, the panel itself scrolls */
@media (max-width:560px){
  .vt-modal{padding:calc(var(--vt-st) + 8px) calc(var(--vt-sr) + 8px) calc(var(--vt-sb) + 8px) calc(var(--vt-sl) + 8px)}
  .vt-panel{width:100%;height:100%;max-height:100%}
  .vt-pright{padding:12px;-webkit-overflow-scrolling:touch}
  .vt-pright h3{margin-bottom:10px}
  .vt-tabbtn{flex:1 1 auto;min-height:44px;padding:10px 8px}
  .vt-row{padding:9px 0;gap:8px}
  .vt-row>label{width:100%;flex:1 0 100%;color:var(--vt-ink);font-weight:600}
  .vt-row select,.vt-row input[type=number],.vt-row input[type=text]{flex:1 1 auto;width:100%;min-height:44px;padding:10px}
  .vt-row input[type=range]{flex:1 1 60%;height:34px}
  .vt-row output{width:52px}
  .vt-row input[type=checkbox]{width:26px;height:26px;margin-left:auto}
  .vt-row .vt-sbtn{min-height:44px;padding:10px 14px}
  .vt-preset{flex:1 1 44%;min-height:48px}
  .vt-pdesc{min-height:0}
  .vt-keys{grid-template-columns:1fr auto;font-size:13px}
  canvas.vt-spark{height:48px}
  .vt-perfgrid{font-size:11.5px;gap:1px 8px}
}
@media (max-width:640px){
  .vt-tl{left:50%;transform:translateX(-50%);top:calc(var(--vt-st) + 66px);align-items:center;max-width:min(62vw,420px)}
  .vt-obj,.vt-keyhint{display:none}
  .vt-hint,.vt-vhint{font-size:11.5px;line-height:1.6;text-align:center}
  .vt-tr{top:calc(var(--vt-st) + 12px);right:calc(var(--vt-sr) + 12px)}
  .vt-search,.vt-place{display:none}
  .vt-bl{width:130px;left:calc(var(--vt-sl) + 10px);bottom:auto;top:calc(var(--vt-st) + 10px)}
  .vt-miniWrap,canvas.vt-mini{width:130px;height:130px}
  canvas.vt-mini{border-radius:11px}
  .vt-bars{width:100%;padding:4px 6px}
  .vt-hp,.vt-ar{flex:1;width:auto;min-width:0}
  .vt-weapon{min-width:150px;padding:6px 10px 6px 8px}
  .vt-bag{bottom:calc(var(--vt-sb) + 162px);min-width:120px}   /* clears the weapon panel, which moves up on a narrow screen */
  .vt-wicon,.vt-wicon svg{width:48px;height:30px}
  .vt-wicon.vox{width:44px;height:44px}
  .vt-ammo{font-size:20px}
  .vt-drive,.vt-br{position:fixed;bottom:auto;top:calc(var(--vt-st) + 10px);left:50%;right:auto;transform:translateX(-50%);flex-direction:row;padding:6px 12px}
  .vt-vcard>*:not(.vt-inst){display:none}
  .vt-speed{font-size:24px}
  .vt-debug{min-width:0;font-size:11px;top:calc(var(--vt-st) + 140px)}
  .vt-toasts{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--vt-st) + 140px);align-items:center}
  .vt-legend{top:calc(var(--vt-st) + 56px)}
  .vt-maphelp{display:none}
  .vt-mapbar .t{font-size:15px;padding:6px 10px}
}
@media (prefers-reduced-motion: reduce){
  #vt-boot,#vt-hud,.vt-toast,.vt-hint,.vt-vhint,.vt-prompt,.vt-obj,.vt-weapon,.vt-place,#vt-end{transition:none;animation:none}
  .vt-cube.siren .l,.vt-cube.siren .r,.vt-heat.search .vt-cube.on,.vt-heat.search .vt-cube.siren{animation:none}
}