:root {
  --hazard: #ff6a00;
  --phosphor: #5dff7a;
  --alert: #ff2a2a;
  --caution: #ffd23f;
  --ink: #07090c;
  --panel: rgba(6, 10, 12, 0.82);
  --dim: #8aa0a6;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; color: #e8f0f2; font-family: "Rajdhani", sans-serif; }
#app, #view { position: absolute; inset: 0; }
#view { display: block; width: 100%; height: 100%; cursor: crosshair; }
.hidden { display: none !important; }

.screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 20;
  pointer-events: auto;
}
button { pointer-events: auto; }
body { user-select: none; }

#screen-title { overflow: hidden; }
#screen-title .bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.1) contrast(1.05);
}
.vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.72) 100%),
    linear-gradient(to top, rgba(0,0,0,.75), transparent 40%);
  pointer-events: none;
}
.scan {
  position: absolute; inset: 0; pointer-events: none; opacity: .12;
  background: repeating-linear-gradient(to bottom, #000 0 1px, transparent 1px 3px);
}
.title-block {
  position: relative; z-index: 2; padding: 4vh 6vw; max-width: 920px;
}
.file-stamp {
  font-family: "Share Tech Mono", monospace;
  letter-spacing: .35em; font-size: 12px; color: var(--phosphor);
  text-shadow: 0 0 8px #5dff7a;
  margin-bottom: 16px;
}
h1.logo {
  font-family: "Orbitron", sans-serif;
  font-weight: 800; font-size: clamp(64px, 12vw, 148px);
  letter-spacing: .28em; line-height: .85;
  color: #fff;
  text-shadow: 0 0 24px rgba(255,106,0,.55), 4px 0 0 rgba(255,42,42,.4);
}
.expand {
  font-family: "Orbitron", sans-serif;
  letter-spacing: .22em; font-size: clamp(11px, 1.5vw, 18px);
  color: var(--hazard); margin: 10px 0 8px;
}
.tag {
  font-size: 18px; color: var(--dim); max-width: 540px; margin-bottom: 28px;
}
.menu { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
button.menu-btn, .panel-btn {
  font-family: "Share Tech Mono", monospace;
  background: transparent; color: #e8f0f2; border: 1px solid #3a4a50;
  padding: 10px 18px; letter-spacing: .2em; font-size: 14px; cursor: pointer;
  transition: .15s background, .15s border, .15s color;
}
button.menu-btn:hover, .panel-btn:hover, button.menu-btn:focus {
  border-color: var(--hazard); color: var(--hazard); background: rgba(255,106,0,.08);
}

.card {
  position: relative; z-index: 2;
  background: var(--panel); border: 1px solid #2a3a40;
  padding: 28px 32px; max-width: 720px; width: min(92vw, 720px);
  box-shadow: 0 0 0 1px rgba(93,255,122,.08), 0 30px 80px #000;
}
.card h2 {
  font-family: "Orbitron", sans-serif; letter-spacing: .2em; font-size: 18px;
  color: var(--phosphor); margin-bottom: 14px;
}
.card p, .card li { line-height: 1.45; color: #c5d4d8; }
.card ul { padding-left: 18px; margin: 8px 0 16px; }
.card kbd {
  font-family: "Share Tech Mono", monospace;
  background: #12181c; border: 1px solid #334; padding: 0 6px; color: var(--caution);
}
.row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

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

#boot {
  position: absolute; inset: 0; z-index: 5;
  background: #05070a;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: "Orbitron", sans-serif;
}
.boot-mark {
  letter-spacing: .42em; font-size: clamp(48px, 8vw, 92px); color: #fff;
  text-shadow: 0 0 24px rgba(255,106,0,.55);
}
.boot-sub {
  margin-top: 14px; letter-spacing: .28em; font-size: 12px; color: var(--hazard);
  font-family: "Share Tech Mono", monospace;
}
.objective {
  position: absolute; top: 34px; left: 50%; transform: translateX(-50%);
  font-family: "Share Tech Mono", monospace;
  letter-spacing: .16em; font-size: 10px; color: var(--phosphor);
  text-shadow: 0 0 8px #5dff7a;
  white-space: nowrap; opacity: .85;
}

.topbar {
  position: absolute; top: 18px; left: 22px; right: 22px;
  display: flex; justify-content: space-between; align-items: flex-start;
  font-family: "Share Tech Mono", monospace; font-size: 12px; letter-spacing: .18em;
}
.zone-name { color: var(--phosphor); text-shadow: 0 0 8px #5dff7a; }
.clock { color: var(--dim); }

.alert-banner {
  position: absolute; top: 66px; left: 50%; transform: translateX(-50%);
  font-family: "Orbitron", sans-serif; letter-spacing: .5em; font-size: 22px;
  padding: 6px 18px; border: 1px solid transparent; opacity: 0;
  transition: opacity .15s;
}
.alert-banner.caution { opacity: 1; color: var(--caution); border-color: var(--caution); }
.alert-banner.alert {
  opacity: 1; color: var(--alert); border-color: var(--alert);
  animation: pulse 0.5s infinite alternate;
  background: rgba(255,42,42,.12);
}
.alert-banner.evasion { opacity: 1; color: #7ab8ff; border-color: #7ab8ff; }
@keyframes pulse { from { opacity: .7; } to { opacity: 1; } }

#radar {
  position: absolute; left: 22px; bottom: 22px;
  width: 168px; height: 168px;
  border: 1px solid rgba(93,255,122,.35);
  background: rgba(0, 20, 8, .55);
  box-shadow: 0 0 18px rgba(93,255,122,.12) inset;
}
.bars {
  position: absolute; left: 200px; bottom: 28px; width: 220px;
  font-family: "Share Tech Mono", monospace; font-size: 11px; letter-spacing: .16em;
}
.bar {
  height: 8px; background: #111; border: 1px solid #334; margin: 4px 0 10px; position: relative;
}
.bar > span { display: block; height: 100%; background: var(--hazard); width: 100%; }
.bar.stealth > span { background: var(--phosphor); }
.gadget-strip {
  position: absolute; right: 22px; bottom: 28px; text-align: right;
  font-family: "Share Tech Mono", monospace; font-size: 12px; letter-spacing: .14em;
}
.gadget-strip .g {
  opacity: .45; margin-top: 4px;
}
.gadget-strip .g.on { opacity: 1; color: var(--caution); }

.prompt {
  position: absolute; left: 50%; bottom: 26%; transform: translateX(-50%);
  font-family: "Share Tech Mono", monospace; letter-spacing: .22em; font-size: 13px;
  color: #fff; text-shadow: 0 0 8px #000; background: rgba(0,0,0,.35); padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.15);
}

.sniper {
  position: absolute; inset: 0; display: none;
}
.sniper.on { display: block; }
.sniper .ring {
  position: absolute; left: 50%; top: 50%;
  width: 46vh; height: 46vh; transform: translate(-50%,-50%);
  border: 2px solid rgba(255,180,80,.55); border-radius: 50%;
  box-shadow: 0 0 0 200vmax rgba(0,0,0,.55);
}
.sniper .cross {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%,-50%);
  border: 1px solid var(--hazard);
}
.sniper .meta {
  position: absolute; right: 18%; top: 22%;
  font-family: "Share Tech Mono", monospace; color: var(--hazard); letter-spacing: .2em;
  text-shadow: 0 0 6px #000;
}
.sniper .statue {
  position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%);
  font-family: "Share Tech Mono", monospace; letter-spacing: .3em; font-size: 11px; color: var(--caution);
}

.codec {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(0, 8, 4, .88);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
}
.codec-row { display: flex; gap: 28px; align-items: center; }
.codec-face {
  width: 210px; height: 210px; object-fit: cover;
  border: 2px solid var(--phosphor);
  box-shadow: 0 0 24px rgba(93,255,122,.25);
  filter: contrast(1.05) saturate(.85);
  image-rendering: auto;
}
.codec-face.dim { opacity: 0.32; filter: grayscale(.5) contrast(1); }
.codec-text {
  width: min(640px, 80vw);
  min-height: 120px;
  font-family: "Share Tech Mono", monospace; font-size: 15px; line-height: 1.55;
  color: var(--phosphor); border-top: 1px solid rgba(93,255,122,.3);
  padding-top: 12px;
}
.codec-who { font-family: "Orbitron", sans-serif; letter-spacing: .3em; font-size: 12px; color: var(--hazard); }
.codec-hint { font-family: "Share Tech Mono", monospace; font-size: 11px; color: #6a8; letter-spacing: .2em; }

#screen-pause, #screen-dead, #screen-rank, #screen-controls, #screen-about {
  background: rgba(0,0,0,.72);
}

.rank-stamp {
  font-family: "Orbitron", sans-serif; font-size: 64px; letter-spacing: .2em;
  color: var(--hazard); text-shadow: 0 0 18px rgba(255,106,0,.5);
}
.stats { font-family: "Share Tech Mono", monospace; font-size: 14px; color: #bcd; line-height: 1.8; margin: 12px 0; }

.hurt {
  position: absolute; inset: 0; pointer-events: none; z-index: 9;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(160,0,0,.45) 100%);
  opacity: 0; transition: opacity .2s;
}

.drop-hint {
  position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
  font-family: "Share Tech Mono", monospace; letter-spacing: .28em; z-index: 12;
  color: #fff; text-shadow: 0 2px 10px #000;
}

.debug-note {
  position: absolute; top: 70px; left: 22px;
  font-family: "Share Tech Mono", monospace; font-size: 11px; color: #8f8; z-index: 12;
}
.legend {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  font-family: "Share Tech Mono", monospace; font-size: 10px; letter-spacing: .12em;
  color: #9bb8b4; background: rgba(0,0,0,.32); padding: 4px 10px; border: 1px solid rgba(93,255,122,.18);
  white-space: nowrap; opacity: .7;
}
.crosshair {
  position: absolute; left: 50%; top: 52%; width: 16px; height: 16px;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 11;
  border: 2px solid rgba(255, 196, 80, .95);
  box-shadow: 0 0 10px rgba(255, 140, 0, .55);
}
.crosshair.hit {
  border-color: #ff2a2a;
  background: rgba(255, 40, 40, .35);
  box-shadow: 0 0 16px #ff2a2a;
}
.radio-bar {
  position: absolute; left: 50%; top: 52px; transform: translateX(-50%);
  width: min(560px, 62vw); background: rgba(0, 12, 6, .62);
  border: 1px solid rgba(93,255,122,.28); padding: 6px 12px;
  font-family: "Share Tech Mono", monospace; color: var(--phosphor); line-height: 1.35;
  font-size: 12px;
}