/* PUMP CITY · HUD. Fixed slots: nothing changes size with its content. No blur over the canvas (it halves the fps). */
/* tokens (--g --red --wh --shadow --panel, the faces): css/tokens.css */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--wh); font-family: var(--font-text); user-select: none; }
canvas#view { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud.off { display: none; }
kbd { display: inline-block; min-width: 20px; padding: 1px 6px; margin-right: 2px; border-radius: 4px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); font: 600 11px/16px var(--font-mono); color: #fff; text-align: center; }

/* crosshair */
.cross { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --s: 8px; opacity: 0; transition: opacity .12s; }
.cross.on { opacity: 1; }
.cross b { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.55); }
.cross i { position: absolute; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45); transition: transform .05s linear; }
.cross .t, .cross .b { width: 2px; height: 8px; left: -1px; }
.cross .l, .cross .r { width: 8px; height: 2px; top: -1px; }
.cross .t { top: -8px; transform: translateY(calc(var(--s) * -1)); } .cross .b { top: 0; transform: translateY(var(--s)); }
.cross .l { left: -8px; transform: translateX(calc(var(--s) * -1)); } .cross .r { left: 0; transform: translateX(var(--s)); }
.cross.dot i { display: none; }
.cross.shotgun i { opacity: 0; }
.cross.shotgun b::after { content: ''; position: absolute; left: 2px; top: 2px; width: calc(var(--s) * 2); height: calc(var(--s) * 2); transform: translate(-50%, -50%); border: 2px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.hitm { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
.hitm i { position: absolute; width: 10px; height: 2px; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.8); }
.hitm i:nth-child(1) { transform: translate(-16px, -12px) rotate(45deg); } .hitm i:nth-child(2) { transform: translate(6px, -12px) rotate(-45deg); }
.hitm i:nth-child(3) { transform: translate(-16px, 10px) rotate(-45deg); } .hitm i:nth-child(4) { transform: translate(6px, 10px) rotate(45deg); }
.hitm.kill i, .hitm.head i { background: var(--red); }
.hitm.on { animation: hit .22s ease-out; }
@keyframes hit { 0% { opacity: 1; transform: scale(1.35); } 100% { opacity: 0; transform: scale(1); } }
.scope { position: absolute; inset: 0; opacity: 0; transition: opacity .08s;
  background: radial-gradient(circle at 50% 50%, transparent 0, transparent 34vh, rgba(0,0,0,.94) calc(34vh + 2px), #000 100%); }
.scope.on { opacity: 1; }
.scope .reticle { position: absolute; left: 50%; top: 50%; width: 68vh; height: 68vh; transform: translate(-50%, -50%); border-radius: 50%;
  background: linear-gradient(#000, #000) center / 1px 100% no-repeat, linear-gradient(90deg, #000, #000) center / 100% 1px no-repeat;
  box-shadow: inset 0 0 40px rgba(0,0,0,.6); }
.scope .reticle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--red); }

/* weapon top right */
.wpn { position: absolute; right: 34px; top: 26px; width: 300px; text-align: right; text-shadow: var(--shadow); }
.wpn-name { font: 600 15px/1 var(--font-display); letter-spacing: .14em; color: rgba(255,255,255,.85); height: 18px; }
.wpn-ammo { font: 600 38px/1.1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.wpn-ammo .slash { opacity: .5; margin: 0 6px; font-weight: 400; }
.wpn-ammo #wRes { font-size: 24px; opacity: .7; }
.wpn.low #wMag { color: var(--red); }
.wpn.none .wpn-ammo { visibility: hidden; }

/* stats top left */
.stats { position: absolute; left: 26px; top: 22px; width: 196px; padding: 10px 14px 12px; background: var(--panel); border-left: 3px solid var(--g); border-radius: 4px; }
.st-title { font: 700 13px/1 var(--font-display); letter-spacing: .22em; color: var(--g); margin-bottom: 8px; }
.st-row { display: flex; justify-content: space-between; font: 600 11px/20px var(--font-text); letter-spacing: .06em; color: rgba(255,255,255,.62); }
.st-row b { color: #fff; font: 700 13px/20px var(--font-mono); }

/* radar */
.radar { position: absolute; left: 26px; bottom: 24px; width: 300px; }
#mini { display: block; width: 300px; height: 190px; border-radius: 6px; background: #1c2128; box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 6px 18px rgba(0,0,0,.35); }
.vitals { display: flex; gap: 4px; margin-top: 5px; }
.bar { height: 7px; background: rgba(0,0,0,.6); border-radius: 1px; overflow: hidden; }
.bar.hp { flex: 2; } .bar.ar { flex: 1; }
.bar i { display: block; height: 100%; width: 100%; transform-origin: left; }
.bar.hp i { background: linear-gradient(#5fd35b, #3a9b37); } .bar.ar i { background: linear-gradient(#5aa6ef, #2f6eb3); }

/* vehicle */
.vname { position: absolute; right: 40px; bottom: 150px; font: italic 700 34px/1 var(--font-display); letter-spacing: .04em; color: #fff; text-shadow: var(--shadow); opacity: 0; transition: opacity .5s; white-space: nowrap; }
.vname.on { opacity: 1; }
.speedo { position: absolute; right: 36px; bottom: 30px; width: 230px; text-align: right; opacity: 0; transition: opacity .25s; text-shadow: var(--shadow); }
.speedo.on { opacity: 1; }
.sp-num span { font: 700 64px/1 var(--font-display); font-variant-numeric: tabular-nums; display: inline-block; min-width: 3ch; }
.sp-num em { font: 600 14px/1 var(--font-display); font-style: normal; letter-spacing: .18em; margin-left: 6px; opacity: .75; }
.sp-bar { height: 6px; margin: 8px 0 6px; background: rgba(0,0,0,.55); border-radius: 3px; overflow: hidden; }
.sp-bar i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--g2), var(--g) 70%, #ffd23a 88%, var(--red)); }
.sp-gear { font: 600 12px/1 var(--font-display); letter-spacing: .2em; opacity: .8; }
.sp-gear b { font-size: 18px; margin-left: 4px; }

.prompt { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); min-width: 260px; height: 38px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--panel); border-radius: 4px; font: 600 14px/1 var(--font-text); letter-spacing: .03em; opacity: 0; transition: opacity .15s; white-space: nowrap; }
.prompt.on { opacity: 1; }
.toast { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); font: 700 22px/1 var(--font-display); letter-spacing: .16em; color: #fff; text-shadow: var(--shadow); opacity: 0; transition: opacity .3s; white-space: nowrap; }
.toast.on { opacity: 1; }
.keys { position: absolute; left: 340px; bottom: 26px; display: flex; gap: 14px; font: 500 11px/1 var(--font-text); color: rgba(255,255,255,.72); text-shadow: var(--shadow); }
.fps { position: absolute; right: 10px; bottom: 6px; font: 500 10px/1 var(--font-mono); color: rgba(255,255,255,.4); }

/* weapon wheel */
.wheel { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; opacity: 0; transform: scale(.94); transition: opacity .12s, transform .12s; }
.wheel.on { opacity: 1; transform: scale(1); }
.wh-ring { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(0,0,0,.0) 0 118px, rgba(6,8,10,.78) 119px 258px, transparent 259px); }
.wh-slot { position: absolute; width: 132px; height: 70px; margin: -35px 0 0 -66px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px;
  font: 600 13px/1.1 var(--font-display); letter-spacing: .1em; color: rgba(255,255,255,.65); transition: background .08s, color .08s; }
.wh-slot svg { width: 84px; height: 30px; margin-bottom: 6px; opacity: .8; }
.wh-slot.sel { background: rgba(109,255,58,.16); color: #fff; box-shadow: inset 0 0 0 2px var(--g); }
.wh-slot.sel svg { opacity: 1; }
.wh-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; font: 700 20px/1.1 var(--font-display); letter-spacing: .1em; text-shadow: var(--shadow); width: 220px; }
.wh-mid small { display: block; font: 500 13px/1.6 var(--font-mono); opacity: .75; }

/* help + tune panels */
.help, .tune { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(8,10,12,.92); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 22px 28px; display: none; pointer-events: auto; }
.help.on, .tune.on { display: block; }
.help h3, .tune h3 { margin: 0 0 14px; font: 700 18px/1 var(--font-display); letter-spacing: .2em; color: var(--g); }
.help .cols { display: flex; gap: 44px; }
.help h4 { margin: 10px 0 6px; font: 600 12px/1 var(--font-display); letter-spacing: .2em; color: rgba(255,255,255,.55); }
.help p { margin: 5px 0; font: 500 13px/1.3 var(--font-text); color: rgba(255,255,255,.85); }
.tune { width: 620px; max-height: 80vh; overflow: auto; }
.tune h3 small { font: 500 11px/1 var(--font-text); letter-spacing: 0; color: rgba(255,255,255,.45); margin-left: 10px; }
.tune-sec { font: 600 11px/1 var(--font-display); letter-spacing: .2em; color: rgba(255,255,255,.5); margin: 14px 0 6px; }
.tune-row { display: grid; grid-template-columns: 170px 1fr 64px; gap: 10px; align-items: center; height: 26px; font: 500 12px/1 var(--font-text); color: rgba(255,255,255,.82); }
.tune-row input[type=range] { width: 100%; accent-color: var(--g); }
.tune-row output { font: 600 12px/1 var(--font-mono); text-align: right; color: #fff; }
.tune-foot { display: flex; gap: 10px; margin-top: 16px; }
.tune-foot button { flex: 1; height: 34px; border: 0; border-radius: 6px; background: rgba(255,255,255,.1); color: #fff; font: 600 13px/1 var(--font-text); cursor: pointer; }
.tune-foot button:hover { background: rgba(109,255,58,.25); }

/* the title: css/ui.css (chat UI) */