:root {
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --disp: 'Rajdhani', 'IBM Plex Mono', sans-serif;
  --accent: #ffd24a;
  --fg: rgba(235, 240, 245, 0.92);
  --dim: rgba(235, 240, 245, 0.45);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; font-family: var(--mono); color: var(--fg); user-select: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
#hud { position: fixed; inset: 0; pointer-events: none; }
.dim { color: var(--dim); }
.sep { margin-left: 14px; }

/* Crosshair */
#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transition: opacity 0.12s; }
.ch-line { position: absolute; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,0.9); left: 0; top: 0; will-change: transform; }
#ch-t, #ch-b { width: 2px; height: 9px; }
#ch-l, #ch-r { width: 9px; height: 2px; }
#ch-dot { position: absolute; width: 3px; height: 3px; left: -1.5px; top: -1.5px; background: #fff; border-radius: 50%; box-shadow: 0 0 2px rgba(0,0,0,0.9); }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%) rotate(45deg); opacity: 0; transition: opacity 0.15s; }
#hitmarker::before, #hitmarker::after { content: ''; position: absolute; background: #fff; box-shadow: 0 0 3px #000; }
#hitmarker::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
#hitmarker::after { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }
#hitmarker.kill::before, #hitmarker.kill::after { background: #ff3b3b; }
#hitmarker.head::before, #hitmarker.head::after { background: var(--accent); }
#hitmarker.kill { width: 30px; height: 30px; }
#damage-vignette { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, rgba(255,0,0,0) 45%, rgba(180,0,0,0.75) 100%); transition: opacity 0.1s; }

/* Top-left objective */
#top-left { position: absolute; left: 28px; top: 24px; }
#chapter-tag { font-family: var(--disp); font-weight: 700; letter-spacing: 3px; font-size: 14px; color: var(--accent); }
#objective { margin-top: 8px; border-left: 2px solid var(--accent); padding-left: 10px; }
#obj-label { font-size: 10px; letter-spacing: 3px; color: var(--dim); }
#obj-text { font-family: var(--disp); font-size: 20px; font-weight: 600; letter-spacing: 1px; text-shadow: 0 1px 3px #000; }
#obj-prog { font-size: 12px; color: var(--accent); margin-top: 2px; min-height: 14px; }

/* Compass */
#compass { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); opacity: 0.9; }

/* Kill feed */
#killfeed { position: absolute; right: 28px; top: 24px; list-style: none; margin: 0; padding: 0; text-align: right; font-size: 12px; }
#killfeed li { margin-bottom: 4px; background: rgba(0,0,0,0.35); padding: 3px 8px; border-right: 2px solid #ff3b3b; transition: opacity 0.3s; }
#killfeed li b { color: var(--accent); } #killfeed li i { color: var(--dim); font-style: normal; margin: 0 6px; }

/* Bottom-left health */
#bottom-left { position: absolute; left: 28px; bottom: 28px; }
#hp-bar { width: 220px; height: 6px; background: rgba(255,255,255,0.12); margin-bottom: 6px; }
#hp-fill { height: 100%; width: 100%; background: #fff; transition: width 0.15s; }
#hp-fill.low { background: #ff3b3b; }
#hp-row { font-size: 13px; } #hp-num { font-size: 26px; font-family: var(--disp); font-weight: 700; margin-right: 6px; }

/* Bottom-right ammo */
#bottom-right { position: absolute; right: 28px; bottom: 28px; text-align: right; }
#weapon-name { font-family: var(--disp); font-size: 14px; letter-spacing: 3px; color: var(--dim); }
#ammo { font-family: var(--disp); font-weight: 700; }
#ammo-mag { font-size: 44px; line-height: 1; } .ammo-sep { color: var(--dim); margin: 0 6px; font-size: 22px; } #ammo-res { font-size: 20px; color: var(--dim); }
#low-ammo { color: #ff3b3b; font-size: 11px; letter-spacing: 2px; opacity: 0; transition: opacity 0.2s; height: 14px; }
#slots span { display: inline-block; margin-left: 10px; font-size: 11px; color: var(--dim); padding: 2px 6px; border: 1px solid rgba(255,255,255,0.15); }
#slots span.active { color: #fff; border-color: var(--accent); }
#reload-bar { width: 160px; height: 3px; background: rgba(255,255,255,0.15); margin: 8px 0 0 auto; opacity: 0; transition: opacity 0.1s; }
#reload-fill { height: 100%; width: 0; background: var(--accent); }

/* Dialogue + toasts + title */
#dialogue { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); max-width: 760px; text-align: center; font-size: 15px; background: rgba(0,0,0,0.45); padding: 10px 18px; border-bottom: 1px solid var(--accent); opacity: 0; transition: opacity 0.4s; min-height: 1.4em; }
#journal-toast { position: absolute; left: 50%; top: 80px; transform: translateX(-50%); font-size: 12px; letter-spacing: 2px; color: var(--accent); background: rgba(0,0,0,0.5); padding: 6px 14px; opacity: 0; transition: opacity 0.4s; }
#journal-toast.show { opacity: 1; }
#title-card { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); text-align: center; opacity: 0; transition: opacity 0.8s; }
#title-card.show { opacity: 1; }
#title-id { font-size: 16px; letter-spacing: 8px; color: var(--accent); }
#title-name { font-family: var(--disp); font-size: 72px; font-weight: 700; letter-spacing: 10px; line-height: 1; text-shadow: 0 2px 20px rgba(0,0,0,0.8); }
#title-sub { font-size: 13px; letter-spacing: 4px; color: var(--dim); margin-top: 6px; }

/* Debug */
#f3 { position: absolute; left: 28px; top: 110px; font-size: 12px; line-height: 1.5; background: rgba(0,0,0,0.6); padding: 8px 10px; display: none; white-space: pre; }
#f3.show { display: block; }
#fps-mini { position: absolute; right: 28px; top: 90px; font-size: 12px; color: var(--dim); display: none; }

/* Panels + overlays */
.overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.overlay.show { display: flex; }
#death { background: rgba(60,0,0,0.55); pointer-events: none; }
#death .big { font-family: var(--disp); font-size: 64px; letter-spacing: 12px; font-weight: 700; color: #ff3b3b; }
#prompt { pointer-events: none; font-size: 14px; letter-spacing: 4px; }
#menu { background: radial-gradient(ellipse at center, rgba(0,0,0,0.35), rgba(0,0,0,0.8)); pointer-events: none; }
#menu-title { font-family: var(--disp); font-size: 96px; font-weight: 700; letter-spacing: 16px; line-height: 1; }
#menu-sub { color: var(--dim); margin: 8px 0 30px; letter-spacing: 2px; }
#menu-cta { font-size: 16px; letter-spacing: 6px; color: var(--accent); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.hint { font-size: 11px; color: var(--dim); margin-top: 16px; letter-spacing: 1px; }
.panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 520px; max-height: 84vh; overflow: auto; background: rgba(8,10,14,0.92); border: 1px solid rgba(255,255,255,0.15); padding: 22px 26px; display: none; pointer-events: auto; }
.panel.show { display: block; }
.panel h3 { margin: 0 0 14px; font-family: var(--disp); letter-spacing: 6px; font-size: 20px; color: var(--accent); }
#journal-list { list-style: none; padding: 0; margin: 0; }
#journal-list li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
#journal-list h4 { margin: 0 0 4px; font-family: var(--disp); letter-spacing: 2px; font-size: 16px; }
#journal-list p { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(235,240,245,0.75); }
.opt-row { display: grid; grid-template-columns: 1fr 180px 50px; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.opt-row input[type=range] { width: 100%; accent-color: var(--accent); }
.opt-row select, .opt-toggle, #opt-buttons button { background: #14181f; color: var(--fg); border: 1px solid rgba(255,255,255,0.2); font-family: var(--mono); font-size: 12px; padding: 4px 8px; cursor: pointer; }
.opt-toggle.on { border-color: var(--accent); color: var(--accent); }
.opt-val { text-align: right; color: var(--dim); }
#opt-buttons { margin-top: 14px; display: flex; gap: 8px; }
#opt-buttons button { padding: 8px 14px; letter-spacing: 2px; }
#opt-resume { border-color: var(--accent) !important; color: var(--accent) !important; }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; }