:root {
  --ink: #f3f4f1;
  --dim: rgba(243, 244, 241, .58);
  --panel: rgba(9, 12, 15, .62);
  --line: rgba(255, 255, 255, .14);
  --acc: #37e0c4;
  --warm: #ffb02e;
  --bad: #ff5d4f;
  --sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0a0d10; }
body {
  color: var(--ink);
  font-family: var(--sans);
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
}
button { font: inherit; color: inherit; }
#stage { position: fixed; inset: 0; overflow: hidden; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }

/* ---------------------------------------------------------------- HUD */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 4; }

#wanted {
  position: absolute; top: calc(56px + var(--safe-t)); right: calc(12px + var(--safe-r));
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  padding: 8px 12px 10px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(8, 11, 14, .74), rgba(8, 11, 14, .4));
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
#wanted .lbl { font: 600 9px/1 var(--mono); letter-spacing: .26em; color: var(--dim); }
#stars { display: flex; gap: 3px; }
#stars i {
  width: 17px; height: 17px; display: block;
  background: rgba(255, 255, 255, .16);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 93%, 50% 71%, 21% 93%, 32% 57%, 2% 35%, 39% 35%);
  transition: background .18s, transform .18s;
}
#stars i.on { background: var(--warm); transform: scale(1.08); }
#stars i.hot { background: var(--bad); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .45; } }

#vitals {
  position: absolute; left: calc(14px + var(--safe-l)); bottom: calc(14px + var(--safe-b));
  width: min(280px, 40vw); display: flex; flex-direction: column; gap: 8px;
}
.vrow { display: flex; align-items: center; gap: 8px; }
.vrow b {
  font: 600 9px/1 var(--mono); letter-spacing: .2em; color: var(--dim); min-width: 46px;
}
.vrow .bar {
  flex: 1; height: 8px; border-radius: 5px; overflow: hidden;
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
}
.vrow .bar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #29d3a7, #7bf0b4);
  transition: width .22s ease, background .22s;
}
.vrow .bar i.low { background: linear-gradient(90deg, #ff4d3d, #ff9b45); }
.vrow em { font: 600 11px/1 var(--mono); font-style: normal; min-width: 24px; text-align: right; }
.vrow.cash { align-items: baseline; gap: 7px; }
.vrow.cash b { color: var(--acc); }
.vrow.cash span { font: 600 12px/1 var(--sans); letter-spacing: .04em; color: var(--ink); text-transform: uppercase; }

#radar {
  position: absolute; left: calc(14px + var(--safe-l));
  bottom: calc(76px + var(--safe-b));
  width: clamp(108px, 16vw, 156px); height: clamp(108px, 16vw, 156px);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 10px 28px rgba(0, 0, 0, .4);
}

#weaponHud {
  position: absolute; right: calc(16px + var(--safe-r)); bottom: calc(16px + var(--safe-b));
  text-align: right; padding: 8px 14px 9px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(8px);
}
#weaponHud .wname { font: 600 9px/1.2 var(--mono); letter-spacing: .22em; color: var(--dim); }
#weaponHud .ammo b { font: 700 30px/1 var(--mono); letter-spacing: -.04em; }
#weaponHud .ammo small { font: 600 12px/1 var(--mono); color: var(--dim); margin-left: 4px; }

#speedo {
  position: absolute; right: calc(18px + var(--safe-r)); bottom: calc(96px + var(--safe-b));
  display: none; align-items: baseline; gap: 5px; padding: 4px 10px;
  border-radius: 10px; background: var(--panel); border: 1px solid var(--line);
}
#speedo.on { display: flex; }
#speedo b { font: 700 32px/1 var(--mono); letter-spacing: -.05em; }
#speedo small { font: 600 9px/1 var(--mono); color: var(--dim); letter-spacing: .16em; }

#prompt {
  position: absolute; left: 50%; bottom: calc(92px + var(--safe-b)); transform: translateX(-50%);
  padding: 8px 14px; border-radius: 999px; background: var(--panel);
  border: 1px solid var(--line); font: 600 12px/1 var(--sans); letter-spacing: .02em;
  white-space: nowrap; opacity: 0; transition: opacity .15s;
}
#prompt.on { opacity: 1; }
kbd {
  display: inline-block; margin: 0 3px; padding: 2px 6px; border-radius: 5px;
  background: rgba(255, 255, 255, .92); color: #0b0d10;
  font: 700 10px/1.2 var(--mono); vertical-align: 1px;
}

#toast {
  position: absolute; left: 50%; top: calc(64px + var(--safe-t)); transform: translateX(-50%);
  padding: 9px 16px; border-radius: 10px; background: rgba(9, 12, 15, .82);
  border: 1px solid var(--line); font: 600 12px/1.25 var(--sans); text-align: center;
  opacity: 0; transition: opacity .2s; max-width: min(76vw, 430px);
}
#toast.on { opacity: 1; }
#toast b { color: var(--acc); }

#crosshair {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px;
  transform: translate(-50%, -50%); opacity: .0; transition: opacity .12s;
}
#crosshair.on { opacity: .95; }
#crosshair::before, #crosshair::after {
  content: ''; position: absolute; background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 3px rgba(0, 0, 0, .8);
}
#crosshair::before { left: 50%; top: 2px; width: 2px; height: 18px; transform: translateX(-50%); }
#crosshair::after { top: 50%; left: 2px; height: 2px; width: 18px; transform: translateY(-50%); }

#zoneName {
  position: absolute; right: calc(16px + var(--safe-r)); top: calc(104px + var(--safe-t));
  font: 600 9px/1.3 var(--mono); letter-spacing: .22em; color: rgba(243, 244, 241, .5);
  text-align: right; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}

#menuBtn, #helpBtn {
  position: absolute; top: calc(12px + var(--safe-t)); z-index: 8; cursor: pointer;
  pointer-events: auto; border: 1px solid var(--line);
  background: var(--panel); backdrop-filter: blur(8px);
  border-radius: 9px; font: 600 10px/1 var(--mono); letter-spacing: .14em;
}
#menuBtn { right: calc(16px + var(--safe-r)); padding: 10px 12px; }
#helpBtn { right: calc(78px + var(--safe-r)); width: 34px; height: 34px; font-size: 15px; }
#menuBtn:active, #helpBtn:active { background: rgba(255, 255, 255, .16); }

/* ------------------------------------------------------------ touch */
.touchOnly { display: none; }
body.touch .touchOnly { display: block; }
#touch { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
#stick {
  position: absolute; left: calc(20px + var(--safe-l)); bottom: calc(18px + var(--safe-b));
  width: clamp(92px, 22vw, 132px); height: clamp(92px, 22vw, 132px);
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2);
  background: radial-gradient(circle at 50% 48%, rgba(255,255,255,.08), rgba(0,0,0,.24));
  pointer-events: auto; touch-action: none;
}
#stickKnob {
  position: absolute; left: 50%; top: 50%; width: 42%; height: 42%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(243, 244, 241, .72); box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}
.tbtn {
  position: absolute; pointer-events: auto; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .24); background: rgba(9, 12, 15, .55);
  backdrop-filter: blur(6px); font: 700 11px/1 var(--mono); letter-spacing: .06em;
  touch-action: none;
}
.tbtn:active { background: rgba(255, 255, 255, .22); }
.tbtn.big { right: calc(22px + var(--safe-r)); bottom: calc(98px + var(--safe-b)); width: 58px; height: 58px; font-size: 17px; }
.tbtn.fire { right: calc(92px + var(--safe-r)); bottom: calc(28px + var(--safe-b)); width: 74px; height: 74px; background: rgba(255, 93, 79, .34); border-color: rgba(255, 130, 115, .6); }
.tbtn.small { width: 48px; height: 48px; font-size: 8.5px; }
#tReload { right: calc(180px + var(--safe-r)); bottom: calc(30px + var(--safe-b)); }
#tSprint { right: calc(180px + var(--safe-r)); bottom: calc(90px + var(--safe-b)); }
#tBrake { right: calc(180px + var(--safe-r)); bottom: calc(150px + var(--safe-b)); }
body:not(.driving) #tBrake { display: none; }
body.touch #vitals { bottom: auto; top: calc(14px + var(--safe-t)); left: calc(14px + var(--safe-l)); }
body.touch #radar { bottom: auto; top: calc(116px + var(--safe-t)); width: 96px; height: 96px; }
body.touch #weaponHud { bottom: calc(20px + var(--safe-b)); }
body.touch #speedo { bottom: calc(168px + var(--safe-b)); }
body.touch #zoneName { display: none; }
body.touch #prompt { bottom: calc(214px + var(--safe-b)); }

/* ---------------------------------------------------------- overlays */
.overlay {
  position: absolute; inset: 0; z-index: 20; display: none;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(4, 6, 8, .62); backdrop-filter: blur(7px);
}
.overlay.on { display: flex; }
.card {
  width: min(640px, 94vw); max-height: 88vh; overflow: auto;
  background: linear-gradient(180deg, rgba(17, 21, 26, .97), rgba(10, 13, 16, .98));
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55); padding: 20px 22px 22px;
}
.cardHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cardHead h2 { margin: 0; font: 800 24px/1.05 var(--sans); letter-spacing: -.02em; }
#modalX {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06); cursor: pointer; font-size: 20px; line-height: 1;
}
.card p { margin: 6px 0 14px; color: var(--dim); font: 500 13px/1.5 var(--sans); }
.card h3 { margin: 18px 0 8px; font: 700 11px/1 var(--mono); letter-spacing: .2em; color: var(--acc); text-transform: uppercase; }
.card .keyGrid { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: baseline; }
.card .keyGrid b { font: 700 11px/1.2 var(--mono); color: var(--ink); white-space: nowrap; }
.card .keyGrid span { font: 500 12.5px/1.4 var(--sans); color: var(--dim); }
.card .btns { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.card button.pbtn {
  padding: 11px 16px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06); cursor: pointer;
  font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.card button.pbtn:hover { background: rgba(255, 255, 255, .13); }
.card button.pbtn.warn { border-color: rgba(255, 93, 79, .45); color: #ff9b92; }
.card button.pbtn.go { background: var(--acc); color: #062420; border-color: transparent; }

#wasted { background: rgba(20, 2, 2, .62); }
.wastedCard { text-align: center; width: min(520px, 92vw); }
.wastedCard h1 {
  margin: 0; font: 800 clamp(54px, 15vw, 110px)/.9 var(--sans); letter-spacing: -.06em;
  color: #ff4438; text-shadow: 0 8px 50px rgba(255, 50, 40, .35);
}
.wastedCard p { margin: 10px 0 18px; color: rgba(255, 255, 255, .72); font: 500 14px/1.5 var(--sans); }
#wastedStats { display: flex; justify-content: center; gap: 22px; margin: 0 0 22px; }
#wastedStats div { display: flex; flex-direction: column; gap: 3px; }
#wastedStats b { font: 700 26px/1 var(--mono); }
#wastedStats small { font: 600 8.5px/1 var(--mono); letter-spacing: .18em; color: rgba(255,255,255,.5); }
#wastedGo {
  padding: 14px 26px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .1); cursor: pointer;
  font: 700 12px/1 var(--mono); letter-spacing: .12em;
}
#wastedGo:hover { background: rgba(255, 255, 255, .2); }

/* ----------------------------------------------------------- loading */
#loading {
  position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #25313c 0%, #12171d 45%, #080a0c 100%);
  transition: opacity .5s ease, visibility .5s;
}
#loading.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.loadInner { width: min(520px, 86vw); text-align: center; }
.brand { font: 800 clamp(34px, 8vw, 62px)/1 var(--sans); letter-spacing: -.045em; }
.brand em { font-style: normal; color: var(--acc); }
.sub { margin-top: 4px; font: 600 10px/1 var(--mono); letter-spacing: .5em; color: var(--dim); }
.loadBar { margin: 34px auto 10px; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.loadBar i { display: block; height: 100%; width: 4%; background: var(--acc); transition: width .28s; }
#loadText { font: 600 10.5px/1 var(--mono); letter-spacing: .18em; color: rgba(243, 244, 241, .75); text-transform: uppercase; }
.loadHint { margin-top: 12px; font: 500 12px/1.5 var(--sans); color: var(--dim); }

#garageTip {
  position: absolute; left: 50%; top: calc(88px + var(--safe-t)); transform: translateX(-50%);
  z-index: 6; text-align: center; padding: 12px 20px 13px; border-radius: 12px;
  background: rgba(8, 11, 14, .6); border: 1px solid var(--line); backdrop-filter: blur(8px);
  transition: opacity .4s; max-width: min(86vw, 440px);
}
#garageTip.gone { opacity: 0; }
.tipKicker { font: 600 8.5px/1 var(--mono); letter-spacing: .3em; color: var(--acc); }
.tipTitle { margin-top: 5px; font: 800 20px/1.05 var(--sans); letter-spacing: -.02em; }
.tipBody { margin-top: 5px; font: 500 12px/1.4 var(--sans); color: var(--dim); }

/* ----------------------------------------------------------- narrow */
@media (max-width: 620px) {
  #wanted { padding: 6px 9px 8px; }
  #stars i { width: 14px; height: 14px; }
  #weaponHud .ammo b { font-size: 24px; }
  #vitals { width: 44vw; }
  #prompt { font-size: 11px; padding: 7px 11px; bottom: calc(196px + var(--safe-b)); }
  body:not(.touch) #prompt { bottom: calc(92px + var(--safe-b)); }
  #zoneName { display: none; }
  .card { padding: 16px 16px 18px; }
}
@media (max-height: 430px) and (orientation: landscape) {
  #garageTip { top: auto; bottom: calc(12px + var(--safe-b)); padding: 9px 16px 10px; }
  .tipBody { display: none; }
  #prompt { bottom: calc(60px + var(--safe-b)); }
  body.touch #prompt { bottom: calc(60px + var(--safe-b)); }
  #radar { width: 92px; height: 92px; bottom: calc(64px + var(--safe-b)); }
  body.touch #radar { top: calc(62px + var(--safe-t)); width: 80px; height: 80px; }
  #tBrake { bottom: calc(128px + var(--safe-b)); }
  #tSprint { bottom: calc(80px + var(--safe-b)); }
  #tReload { bottom: calc(28px + var(--safe-b)); }
}

#damage {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 50% 50%, rgba(255, 40, 30, 0) 42%, rgba(255, 30, 20, .38) 100%);
  transition: opacity .16s;
}
#damage.on { opacity: 1; }

@media (max-width: 620px) and (orientation: portrait) {
  #garageTip { top: calc(224px + var(--safe-t)); max-width: 82vw; padding: 10px 14px 11px; }
}

body.loading #touch, body.loading #menuBtn, body.loading #helpBtn, body.loading #garageTip { display: none !important; }