@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --ink: #071019;
  --panel: rgba(7, 16, 25, 0.9);
  --cyan: #43f4d0;
  --orange: #ff8b3d;
  --white: #eef8f7;
  --muted: #9bb0b2;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--white);
  background: var(--ink);
  font-family: Inter, system-ui, sans-serif;
}

button, kbd { font: inherit; }

#game, #game canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hidden { display: none !important; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  background:
    linear-gradient(90deg, rgba(3, 9, 14, 0.88), rgba(3, 9, 14, 0.38)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 4px);
  backdrop-filter: blur(5px);
}

.panel {
  position: relative;
  width: min(620px, 100%);
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid rgba(67, 244, 208, 0.3);
  border-left: 3px solid var(--cyan);
  background: linear-gradient(135deg, rgba(9, 22, 31, 0.97), rgba(6, 13, 21, 0.92));
  box-shadow: 0 28px 80px rgba(0,0,0,.5), inset 0 0 60px rgba(67,244,208,.025);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}

.panel::before {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.035);
  background: linear-gradient(135deg, rgba(67,244,208,.035), transparent 24%, transparent 76%, rgba(255,139,61,.035));
  clip-path: inherit;
}

.panel::after {
  content: "07 // ACCESS GRANTED";
  position: absolute;
  top: 17px;
  right: 35px;
  color: rgba(67, 244, 208, .42);
  font: 600 10px/1 Inter, sans-serif;
  letter-spacing: .18em;
}

.menu-panel {
  width:min(1040px,100%);
  padding:clamp(30px,4vw,48px);
}
.menu-layout { display:grid; grid-template-columns:minmax(285px,.82fr) minmax(440px,1.25fr); gap:clamp(30px,4vw,56px); align-items:start; }
.menu-primary { min-width:0; padding-right:clamp(20px,3vw,42px); border-right:1px solid rgba(67,244,208,.18); }
.menu-primary h1 { font-size:clamp(70px,8vw,96px); }
.menu-primary .intro { margin:25px 0 24px; }
.menu-primary .hint { margin-top:20px; text-align:left; }
.menu-secondary { min-width:0; }
.menu-section-heading { display:flex; align-items:center; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid rgba(67,244,208,.18); color:var(--cyan); font:800 11px "Barlow Condensed",sans-serif; letter-spacing:.18em; }
.menu-section-heading small { color:#5d747d; font-size:8px; }
.menu-panel .controls-grid { margin-top:16px; }
.menu-panel .audio-panel { margin-top:20px; }
.menu-panel .debug-panel { margin-top:17px; }
.restart-button { margin-top:10px; border:1px solid rgba(255,139,61,.5); color:#ffd6bd; background:rgba(255,139,61,.09); }
.restart-button:hover { color:#160b05; background:var(--orange); box-shadow:0 12px 30px rgba(255,139,61,.18); }
.menu-panel #play-button .arrow { font-size:0; }
.menu-panel #play-button .arrow::after { content:"\2192"; font-size:25px; }
.menu-run-info { display:grid; grid-template-columns:68px 1fr; gap:7px 12px; margin-top:22px; padding:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025); }
.menu-run-info span { color:#587176; font:700 8px Inter,sans-serif; letter-spacing:.14em; }
.menu-run-info strong { color:#b9cdcf; font:700 9px Inter,sans-serif; letter-spacing:.1em; }

.eyebrow {
  margin: 0 0 15px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
}

h1, h2 {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(64px, 10vw, 96px);
  font-weight: 800;
  line-height: .76;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

h1 span, h2 span { color: var(--cyan); }

.intro {
  max-width: 390px;
  margin: 28px 0 26px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

button {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border: 0;
  color: #041410;
  background: var(--cyan);
  cursor: pointer;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .08em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

button:hover {
  transform: translateY(-2px);
  background: #75ffe3;
  box-shadow: 0 12px 32px rgba(67,244,208,.2);
}

.arrow { font-size: 25px; }

.controls-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px 22px;
  margin-top: 27px;
}

.controls-grid div { display: flex; align-items: center; gap: 10px; }
.controls-grid span { color: var(--muted); font-size: 11px; }

kbd {
  min-width: 68px;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-bottom-color: rgba(255,255,255,.35);
  color: #dce9e8;
  background: rgba(255,255,255,.05);
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

.hint { margin: 23px 0 0; color: #5e7476; text-align: center; font-size: 10px; }
.hint kbd { min-width: 0; padding: 2px 4px; }
.mobile-hint { display:none; margin:12px 0 0; color:#70baff; text-align:center; font-size:10px; line-height:1.45; }
.mobile-device .mobile-hint { display:block; }

.audio-panel {
  margin-top: 22px;
  padding: 14px;
  border: 1px solid rgba(78,143,255,.28);
  background: linear-gradient(90deg, rgba(78,143,255,.055), rgba(67,244,208,.025));
}

.audio-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; color:#7fb2ff; font:800 11px "Barlow Condensed",sans-serif; letter-spacing:.16em; }
.audio-heading small { color:#617786; font-size:8px; }
.audio-controls { display:grid; grid-template-columns:165px minmax(130px,1fr) 165px; gap:12px; align-items:center; }
.audio-controls button { min-height:40px; padding:0 13px; border:1px solid rgba(78,143,255,.35); color:#dcedff; background:rgba(78,143,255,.09); font-size:12px; clip-path:none; }
.audio-controls button:hover { transform:none; color:#06111c; background:#70baff; box-shadow:0 8px 22px rgba(78,143,255,.15); }
.audio-controls button strong { color:#70baff; }
.audio-controls button b { color:#fff; font-size:12px; }
.audio-controls button[aria-pressed="false"] { border-color:rgba(255,139,61,.42); color:#9a8580; background:rgba(255,139,61,.06); }
.audio-controls button[aria-pressed="false"] strong { color:var(--orange); }
.audio-controls input { width:100%; accent-color:#43f4d0; cursor:pointer; }
.audio-controls input::-webkit-slider-runnable-track { height:5px; border:1px solid rgba(255,255,255,.15); background:linear-gradient(90deg,#2e7dff,#43f4d0); }
.audio-controls input::-webkit-slider-thumb { margin-top:-6px; }
.audio-controls .voice-button { justify-content:center; }

.debug-panel {
  margin-top: 24px;
  padding: 15px;
  border: 1px solid rgba(255, 139, 61, .28);
  background: rgba(255, 139, 61, .035);
}

.debug-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
  color: var(--orange);
  font: 800 11px "Barlow Condensed", sans-serif;
  letter-spacing: .17em;
}

.debug-heading small { color: #6f7f80; font-size: 8px; }
.debug-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.debug-button {
  min-height: 43px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.13);
  color: #d5e1e0;
  background: rgba(255,255,255,.055);
  font-size: 12px;
  clip-path: none;
}

.debug-button:hover { background: rgba(255,255,255,.11); box-shadow: none; }
.debug-button strong { color: var(--orange); font-size: 11px; }
.debug-button.active { border-color: rgba(67,244,208,.5); background: rgba(67,244,208,.13); }
.debug-button.active strong { color: var(--cyan); }
.change-wave { grid-column: 1 / -1; color: #061411; background: var(--orange); border-color: transparent; }
.change-wave:hover { background: #ffa261; box-shadow: 0 10px 25px rgba(255,139,61,.18); }
.change-wave strong { color: #061411; }

.wave-picker {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px 0 13px;
  border: 1px solid rgba(255,255,255,.13);
  color: #d5e1e0;
  background: rgba(255,255,255,.055);
  font: 800 12px "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
}

.wave-picker select {
  padding: 6px 25px 6px 8px;
  border: 1px solid rgba(67,244,208,.32);
  color: var(--cyan);
  background: #0a1a21;
  font: 700 12px Inter, sans-serif;
  cursor: pointer;
}

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

/* First-person helmet shell. It exists inside the gameplay-only HUD. */
.helmet-visor { position:absolute; inset:0; overflow:hidden; perspective:850px; }
.helmet-glass {
  position:absolute;
  inset:18px 28px 22px;
  border:1px solid rgba(137,226,239,.22);
  border-radius:48% / 13%;
  background:
    radial-gradient(ellipse at 50% 46%,transparent 58%,rgba(8,30,39,.045) 78%,rgba(2,10,16,.34) 100%),
    linear-gradient(180deg,rgba(146,239,255,.035),transparent 16% 82%,rgba(76,177,206,.025));
  box-shadow:
    inset 0 0 38px rgba(90,218,239,.12),
    inset 0 0 115px rgba(0,7,12,.7),
    0 0 24px rgba(67,244,208,.08);
  transform:translateZ(-12px) scaleX(1.015);
}
.helmet-glass::before {
  content:"VISOR // SEALED";
  position:absolute;
  top:25px;
  left:50%;
  color:rgba(134,225,235,.28);
  font:700 7px Inter,sans-serif;
  letter-spacing:.32em;
  transform:translateX(-50%) scaleX(1.2);
}
.helmet-glass::after {
  content:"";
  position:absolute;
  inset:7% 4%;
  border-top:1px solid rgba(123,224,239,.09);
  border-bottom:1px solid rgba(123,224,239,.07);
  border-radius:50% / 12%;
  box-shadow:inset 0 20px 35px rgba(95,215,235,.025),inset 0 -22px 38px rgba(28,113,144,.035);
}
.helmet-rim { position:absolute; left:6%; width:88%; background:linear-gradient(180deg,#111e27,#050b11 52%,#172b34); filter:drop-shadow(0 0 10px rgba(0,0,0,.8)); }
.helmet-rim::after { content:""; position:absolute; left:9%; width:82%; height:2px; background:linear-gradient(90deg,transparent,rgba(67,244,208,.5),transparent); box-shadow:0 0 12px rgba(67,244,208,.28); }
.helmet-rim-top { top:-42px; height:78px; border-radius:0 0 50% 50% / 0 0 42% 42%; box-shadow:inset 0 -7px 10px rgba(67,244,208,.06),0 14px 30px rgba(0,0,0,.38); }
.helmet-rim-top::after { bottom:7px; }
.helmet-rim-bottom { bottom:-54px; height:98px; border-radius:50% 50% 0 0 / 38% 38% 0 0; box-shadow:inset 0 8px 12px rgba(255,139,61,.04),0 -14px 32px rgba(0,0,0,.5); }
.helmet-rim-bottom::after { top:8px; background:linear-gradient(90deg,transparent,rgba(255,139,61,.42),transparent); }
.helmet-side { position:absolute; top:7%; bottom:7%; width:64px; background:linear-gradient(90deg,#060d13,#15262f 48%,rgba(16,35,44,.2)); box-shadow:inset -4px 0 0 rgba(67,244,208,.07),8px 0 26px rgba(0,0,0,.32); }
.helmet-side-left { left:-30px; border-radius:0 65% 65% 0 / 0 12% 12% 0; transform:rotateY(12deg); }
.helmet-side-right { right:-30px; border-radius:65% 0 0 65% / 12% 0 0 12%; box-shadow:inset 4px 0 0 rgba(78,143,255,.08),-8px 0 26px rgba(0,0,0,.32); transform:rotateY(-12deg); }
.helmet-side i { position:absolute; width:7px; height:7px; border:1px solid rgba(151,226,231,.25); border-radius:50%; background:#071016; box-shadow:inset 0 0 3px #000; }
.helmet-side i:nth-child(1){top:14%;}.helmet-side i:nth-child(2){top:49%;}.helmet-side i:nth-child(3){bottom:14%;}
.helmet-side-left i{right:13px}.helmet-side-right i{left:13px}
.helmet-reflection { position:absolute; top:8%; right:15%; width:4%; height:36%; opacity:.07; background:linear-gradient(90deg,transparent,rgba(205,249,255,.32),transparent); filter:blur(8px); transform:rotate(-13deg); }

body.play-mode #hud { perspective:520px; transform-style:preserve-3d; }
body.play-mode #hud .brand,
body.play-mode #hud .god-indicator,
body.play-mode #hud .health,
body.play-mode #hud .nano-shield,
body.play-mode #hud .objective,
body.play-mode #hud .ammo,
body.play-mode #hud #status { backface-visibility:hidden; will-change:transform; transition:transform .28s ease-out; }

body.play-mode #hud .brand {
  padding:7px 15px;
  background:linear-gradient(90deg,rgba(5,22,29,.78),rgba(5,22,29,.18),transparent);
  clip-path:polygon(0 0,94% 3%,100% 50%,94% 97%,0 100%);
  transform:rotateY(11deg) translateX(-3px) scaleX(1.07);
  transform-origin:left center;
}
body.play-mode #hud .god-indicator {
  transform:rotateY(12deg) translateX(-3px) scaleX(1.06);
  transform-origin:left center;
}
body.play-mode #hud .health {
  padding:9px 18px 9px 11px;
  background:linear-gradient(90deg,rgba(4,18,25,.82),rgba(5,23,30,.32),transparent);
  clip-path:polygon(0 2%,93% 0,100% 50%,93% 100%,0 98%);
  transform:rotateY(12deg) translate(-4px,2px) scaleX(1.08);
  transform-origin:left bottom;
}

body.play-mode #hud .nano-shield {
  transform:rotateY(12deg) translate(-3px,2px) scaleX(1.07);
  transform-origin:left bottom;
}
body.play-mode #hud .objective {
  clip-path:polygon(6% 3%,100% 0,100% 100%,6% 97%,0 50%);
  transform:rotateY(-11deg) translateX(3px) scaleX(1.07);
  transform-origin:right center;
}
body.play-mode #hud .ammo {
  padding:11px 14px 11px 21px;
  clip-path:polygon(7% 0,100% 2%,100% 98%,7% 100%,0 50%);
  transform:rotateY(-12deg) translate(4px,2px) scaleX(1.08);
  transform-origin:right bottom;
}
body.play-mode #hud #status {
  border-radius:48% / 18%;
  transform:translateX(-50%) rotateX(-7deg) translateY(2px) scaleX(1.12);
  transform-origin:center bottom;
}
body.play-mode #hud #hud-scanlines {
  inset:-8% -6%;
  border-radius:48% / 14%;
  transform:translateZ(-28px) scaleX(1.08);
  mask-image:radial-gradient(ellipse at center,#000 45%,rgba(0,0,0,.88) 72%,transparent 100%);
}
body.play-mode .squad-panel {
  transform:perspective(520px) rotateY(-13deg) rotateX(-2deg) translateX(8px) scaleX(1.09);
  transform-origin:right center;
  clip-path:polygon(8% 1%,100% 0,100% 100%,8% 99%,0 50%);
  border-radius:9% 1% 1% 9% / 48% 4% 4% 48%;
}

#hud-vignette { position:absolute; inset:0; box-shadow:inset 0 0 130px rgba(0,8,14,.64); }
#hud-scanlines { position:absolute; inset:0; opacity:.13; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(150,240,240,.045) 3px 4px); mix-blend-mode:screen; }
.hud-corner { position:absolute; width:48px; height:48px; opacity:.52; }
.hud-corner::before,.hud-corner::after { content:""; position:absolute; background:var(--cyan); box-shadow:0 0 8px rgba(67,244,208,.4); }
.hud-corner::before { width:48px; height:1px; }
.hud-corner::after { width:1px; height:48px; }
.hud-corner.top-left { top:10px; left:10px; }.hud-corner.top-right { top:10px; right:10px; transform:scaleX(-1); }
.hud-corner.bottom-left { bottom:10px; left:10px; transform:scaleY(-1); }.hud-corner.bottom-right { right:10px; bottom:10px; transform:scale(-1); }

.squad-panel {
  position: fixed;
  top: 92px;
  right: 22px;
  z-index: 25;
  width: min(270px, 31vw);
  padding: 12px;
  border: 1px solid rgba(61,155,255,.42);
  border-right: 3px solid #3d9bff;
  color: #eaf6ff;
  background: linear-gradient(145deg, rgba(5,18,34,.91), rgba(5,12,22,.82));
  box-shadow: 0 16px 45px rgba(0,0,0,.35), inset 0 0 32px rgba(61,155,255,.045);
  pointer-events: auto;
  transition:transform .28s ease-out;
}
body:not(.play-mode) .squad-panel { display:none !important; }

.squad-heading { display:flex; align-items:center; justify-content:space-between; color:#70baff; font:800 12px "Barlow Condensed",sans-serif; letter-spacing:.14em; }
.squad-heading strong { color:#fff; }
.squad-modes { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:9px; }
.squad-modes button { min-height:30px; padding:0 9px; justify-content:center; border:1px solid rgba(255,255,255,.12); color:#8fa8b8; background:rgba(255,255,255,.045); font-size:10px; clip-path:none; pointer-events:none; }
.squad-modes button:hover { transform:none; box-shadow:none; background:rgba(61,155,255,.12); }
.squad-modes button.active { color:#06121f; border-color:#70baff; background:#70baff; }
#squad-mode-copy { margin:7px 0 10px; color:#718b9c; font-size:8px; line-height:1.4; letter-spacing:.05em; }
.squad-list { display:grid; gap:7px; }
.squad-card { position:relative; display:grid; grid-template-columns:40px 1fr 26px; gap:8px; align-items:center; padding:7px; border:1px solid rgba(61,155,255,.2); background:rgba(61,155,255,.055); }
.squad-card.stunned { border-color:rgba(255,139,61,.5); background:rgba(255,139,61,.08); }
.squad-portrait { width:40px; height:40px; border:1px solid rgba(112,186,255,.5); background:#07111d; image-rendering:auto; }
.squad-info { min-width:0; }
.squad-name { overflow:hidden; color:#e9f6ff; font:700 11px "Barlow Condensed",sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.squad-state { margin-top:2px; color:#70baff; font-size:7px; letter-spacing:.1em; }
.squad-health { height:4px; margin-top:5px; background:rgba(255,255,255,.1); }
.squad-health i { display:block; height:100%; background:#3d9bff; box-shadow:0 0 7px rgba(61,155,255,.65); transition:width .18s; }
.squad-card.stunned .squad-health i { background:var(--orange); }
.squad-slot { display:grid; place-items:center; width:26px; height:24px; color:#70baff; border:1px solid rgba(112,186,255,.28); background:rgba(61,155,255,.08); font:800 8px "Barlow Condensed",sans-serif; }
.squad-manage { display:block; margin-top:8px; color:#526c7d; text-align:center; font-size:7px; letter-spacing:.12em; }

.brand {
  position: absolute;
  top: 24px;
  left: 28px;
  padding-left: 12px;
  border-left: 2px solid var(--cyan);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .06em;
  text-shadow: 0 0 18px rgba(67,244,208,.22);
}

.brand span { display: block; color: var(--cyan); font-size: 8px; letter-spacing: .2em; }

.god-indicator {
  position: absolute;
  top: 74px;
  left: 28px;
  padding: 7px 11px;
  border: 1px solid rgba(67,244,208,.5);
  color: var(--cyan);
  background: rgba(6, 25, 25, .72);
  box-shadow: 0 0 18px rgba(67,244,208,.14);
  font: 800 10px "Barlow Condensed", sans-serif;
  letter-spacing: .18em;
}

.objective {
  position: absolute;
  top: 24px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 9px 12px;
  border: 1px solid rgba(67,244,208,.22);
  border-top: 2px solid var(--cyan);
  background: linear-gradient(135deg,rgba(8,25,33,.88),rgba(4,12,20,.67));
  box-shadow:0 12px 35px rgba(0,0,0,.22),inset 0 0 25px rgba(67,244,208,.025);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}

.objective-label { color: var(--muted); font-size: 9px; letter-spacing: .14em; }
.objective strong { color: var(--cyan); font: 700 18px "Barlow Condensed", sans-serif; }
.hostiles { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.14); color: var(--orange); font-size: 9px; letter-spacing: .1em; }

.health {
  position: absolute;
  left: 28px;
  bottom: 24px;
  width: min(250px, 34vw);
}

.health::before { content:"PLAYER // BIOMETRIC"; display:block; margin-bottom:6px; color:rgba(67,244,208,.55); font:700 7px Inter,sans-serif; letter-spacing:.16em; }

.health-copy { display: flex; align-items: end; justify-content: space-between; margin-bottom: 7px; }
.health-copy span { color: var(--muted); font-size: 8px; letter-spacing: .16em; }
.health-copy strong { font: 700 22px/1 "Barlow Condensed", sans-serif; }
.health-track { height: 6px; padding: 1px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.3); }
.health-track i { display: block; width: 100%; height: 100%; background: var(--cyan); box-shadow: 0 0 10px rgba(67,244,208,.5); transition: width .2s, background .2s; }
.health-track i.danger { background: var(--orange); box-shadow: 0 0 10px rgba(255,139,61,.55); }
.health.hurt { animation:health-impact .36s ease-out; }
@keyframes health-impact {
  0% { translate:0 0; filter:drop-shadow(0 0 13px rgba(255,39,61,.9)); }
  24% { translate:-3px 1px; }
  48% { translate:3px -1px; }
  72% { translate:-1px 0; }
  100% { translate:0 0; filter:none; }
}
.regen-status { margin-top:6px; color:rgba(105,184,255,.72); font:700 7px Inter,sans-serif; letter-spacing:.14em; text-align:right; }
.regen-status.active { color:#70baff; text-shadow:0 0 8px rgba(61,155,255,.55); }

.nano-shield {
  position:absolute;
  left:28px;
  bottom:112px;
  width:142px;
  height:104px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  padding:18px 22px 15px;
  color:#dff5ff;
  background:linear-gradient(155deg,rgba(9,39,73,.94),rgba(4,15,31,.76));
  clip-path:polygon(50% 0,100% 35%,81% 100%,19% 100%,0 35%);
  filter:drop-shadow(0 0 9px rgba(42,139,255,.38));
}
.nano-shield::before {
  content:"";
  position:absolute;
  inset:3px;
  z-index:-1;
  background:linear-gradient(145deg,rgba(72,170,255,.32),rgba(4,14,31,.92));
  clip-path:inherit;
}
.nano-shield > span { color:#78bdff; font:800 8px Inter,sans-serif; letter-spacing:.14em; }
.nano-shield strong { margin:5px 0 7px; font:800 24px/1 "Barlow Condensed",sans-serif; text-shadow:0 0 9px rgba(61,155,255,.7); }
.nano-shield strong small { margin-left:2px; color:#6492ba; font-size:10px; }
.nano-shield-track { width:88px; height:5px; padding:1px; border:1px solid rgba(115,194,255,.46); background:rgba(0,0,0,.42); }
.nano-shield-track i { display:block; width:100%; height:100%; background:#3d9bff; box-shadow:0 0 11px rgba(61,155,255,.9); transition:width .2s; }
.nano-shield.depleted { filter:drop-shadow(0 0 5px rgba(34,75,110,.25)); opacity:.68; }
.nano-shield.depleted strong { color:#59738a; text-shadow:none; }
.nano-shield-alert {
  position:absolute;
  top:25px;
  right:19px;
  display:none;
  font:900 19px/1 "Barlow Condensed",sans-serif;
  letter-spacing:-.08em;
}
.nano-shield.warning {
  filter:drop-shadow(0 0 9px rgba(255,205,51,.48));
  animation:nano-warning-shake 1.15s linear infinite;
  will-change:translate;
}
.nano-shield.warning::before { background:linear-gradient(145deg,rgba(255,201,50,.3),rgba(31,24,4,.92)); }
.nano-shield.warning > span,.nano-shield.warning strong { color:#ffe16b; text-shadow:0 0 9px rgba(255,196,38,.68); }
.nano-shield.warning .nano-shield-track { border-color:rgba(255,220,92,.6); }
.nano-shield.warning .nano-shield-track i { background:#ffc62f; box-shadow:0 0 11px rgba(255,190,31,.9); }
.nano-shield.warning .nano-shield-alert { display:block; color:#ffe16b; text-shadow:0 0 8px rgba(255,190,31,.9); }
.nano-shield.critical {
  opacity:.96;
  filter:drop-shadow(0 0 11px rgba(255,48,68,.58));
  animation:nano-critical-shake .48s linear infinite;
  will-change:translate;
}
.nano-shield.critical::before { background:linear-gradient(145deg,rgba(255,45,68,.34),rgba(38,3,10,.94)); }
.nano-shield.critical > span,.nano-shield.critical strong { color:#ff6175; text-shadow:0 0 10px rgba(255,34,61,.82); }
.nano-shield.critical strong small { color:#c15a68; }
.nano-shield.critical .nano-shield-track { border-color:rgba(255,82,103,.68); }
.nano-shield.critical .nano-shield-track i { background:#ff304f; box-shadow:0 0 12px rgba(255,34,61,.95); }
.nano-shield.critical .nano-shield-alert { display:block; color:#ff4964; text-shadow:0 0 9px rgba(255,27,56,.95); }

@keyframes nano-warning-shake {
  0%,84%,100% { translate:0 0; }
  88% { translate:-1px 0; }
  92% { translate:1px 0; }
  96% { translate:-.5px 0; }
}
@keyframes nano-critical-shake {
  0%,100% { translate:0 0; }
  20% { translate:-2px 1px; }
  40% { translate:2px -1px; }
  60% { translate:-1.5px -1px; }
  80% { translate:1.5px 1px; }
}

.ammo {
  position: absolute;
  right: 28px;
  bottom: 24px;
  min-width: 126px;
  padding: 10px 14px;
  border-right: 2px solid var(--orange);
  border-top:1px solid rgba(255,139,61,.14);
  background: linear-gradient(90deg, transparent, rgba(6,14,21,.84));
  box-shadow:12px 10px 30px rgba(0,0,0,.24);
  text-align: right;
}

.ammo-label { display: block; color: var(--muted); font-size: 8px; letter-spacing: .16em; }
.ammo strong { font: 700 30px/1 "Barlow Condensed", sans-serif; }
.ammo small { color: #718385; font-size: 15px; }

#crosshair {
  position: absolute;
  top: 50%; left: 50%;
  width: 22px; height: 22px;
  transform: translate(-50%, -50%);
}

#crosshair { border:1px solid rgba(67,244,208,.22); border-radius:50%; box-shadow:0 0 14px rgba(67,244,208,.12); }

#crosshair::before, #crosshair::after {
  content: "";
  position: absolute;
  background: rgba(238,248,247,.85);
  box-shadow: 0 0 5px rgba(67,244,208,.55);
}

#crosshair::before { top: 10px; left: 0; width: 22px; height: 1px; }
#crosshair::after { top: 0; left: 10px; width: 1px; height: 22px; }
#crosshair.firing { transform: translate(-50%, -50%) scale(1.4); }
#crosshair.firing::before, #crosshair.firing::after { background: var(--orange); }

.ammo-warning {
  position:absolute;
  top:58%;
  left:50%;
  min-width:300px;
  padding:9px 24px;
  border:1px solid rgba(255,52,72,.68);
  border-left:3px solid #ff3448;
  border-right:3px solid #ff3448;
  color:#ff5263;
  background:linear-gradient(90deg,transparent,rgba(48,3,10,.88) 18%,rgba(48,3,10,.88) 82%,transparent);
  box-shadow:0 0 24px rgba(255,36,58,.16),inset 0 0 18px rgba(255,36,58,.08);
  font:900 15px "Barlow Condensed",sans-serif;
  letter-spacing:.16em;
  text-align:center;
  text-shadow:0 0 10px rgba(255,45,63,.72);
  transform:translateX(-50%);
  animation:ammo-empty-pulse .75s ease-in-out infinite alternate;
}
.ammo-warning span { display:block; margin-top:3px; color:#ffd9dc; font-size:9px; letter-spacing:.22em; }
@keyframes ammo-empty-pulse { from{opacity:.65;transform:translateX(-50%) scale(.985)} to{opacity:1;transform:translateX(-50%) scale(1.015)} }

#status {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(238,248,247,.65);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  min-width:280px;
  padding:7px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-bottom:2px solid rgba(67,244,208,.36);
  background:linear-gradient(90deg,transparent,rgba(5,18,25,.82) 20%,rgba(5,18,25,.82) 80%,transparent);
  text-align:center;
  text-shadow:0 0 8px rgba(67,244,208,.25);
}

#speed-lines {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle, transparent 35%, rgba(67,244,208,.08) 100%);
  transition: opacity .2s;
}

#speed-lines.active { opacity: 1; }

.mobile-controls,
.rotate-device { display:none; }

.mobile-controls {
  position:fixed;
  inset:0;
  z-index:30;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  touch-action:none;
}

.mobile-look-zone {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:58%;
  pointer-events:auto;
  touch-action:none;
}

.mobile-world-ui { position:absolute; inset:0; pointer-events:none; }
.mobile-world-marker {
  position:absolute;
  display:none;
  align-items:center;
  gap:7px;
  max-width:158px;
  min-width:104px;
  padding:5px 6px;
  border:1px solid rgba(105,190,255,.72);
  border-left:3px solid #70baff;
  border-radius:4px;
  color:#dff7ff;
  background:rgba(3,16,28,.9);
  box-shadow:0 4px 14px rgba(0,0,0,.42),inset 0 0 13px rgba(61,155,255,.08);
  transform:translate(-50%,-115%);
  pointer-events:none;
}
.mobile-world-marker.visible { display:flex; }
.mobile-world-marker > div { min-width:0; flex:1; }
.mobile-world-marker strong,.mobile-world-marker span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mobile-world-marker strong { color:#9bd7ff; font:800 8px/1.15 Inter,sans-serif; letter-spacing:.06em; }
.mobile-world-marker span { margin-top:3px; color:rgba(222,243,249,.7); font:700 6px/1.15 Inter,sans-serif; letter-spacing:.04em; }
.mobile-world-marker.edge::after { content:"▲"; position:absolute; left:50%; bottom:-11px; color:inherit; font-size:9px; transform:translateX(-50%); }
.mobile-world-marker.action { border-color:#35ff82; border-left-color:#35ff82; box-shadow:0 0 13px rgba(53,255,130,.22),inset 0 0 12px rgba(53,255,130,.08); }
.mobile-world-marker.action strong { color:#69ffa1; }
.mobile-machine-marker.processing { border-color:#ffd35c; border-left-color:#ffd35c; }
.mobile-machine-marker.processing strong { color:#ffe38b; }
.mobile-machine-marker.occupied { border-color:#4a9fff; border-left-color:#4a9fff; }
.mobile-trash-marker { border-color:#ff4960; border-left-color:#ff3048; }
.mobile-trash-marker strong { color:#ff7385; }
.mobile-capture-marker { border-color:#ffd35c; border-left-color:#ffd35c; }
.mobile-capture-marker strong { color:#ffe38b; }
.mobile-controls .mobile-machine-remove {
  flex:0 0 42px;
  width:42px;
  height:42px;
  border:1px solid #ff6172 !important;
  border-radius:5px !important;
  color:#fff !important;
  background:linear-gradient(145deg,#d92d43,#74101e) !important;
  box-shadow:0 0 13px rgba(255,48,72,.42) !important;
  font:900 27px/1 Inter,sans-serif !important;
  pointer-events:auto;
  touch-action:manipulation;
}
.mobile-controls .mobile-machine-remove[hidden] { display:none !important; }
.mobile-controls .mobile-machine-remove:active { transform:scale(.9) !important; background:#ff3048 !important; }

.mobile-joystick {
  position:absolute;
  left:max(25px, env(safe-area-inset-left));
  bottom:max(22px, env(safe-area-inset-bottom));
  width:132px;
  height:132px;
  border:1px solid rgba(112,186,255,.25);
  border-radius:50%;
  background:radial-gradient(circle,rgba(61,155,255,.08) 0 36%,rgba(2,13,24,.5) 37% 100%);
  box-shadow:inset 0 0 28px rgba(61,155,255,.1),0 0 20px rgba(0,0,0,.25);
  pointer-events:auto;
  touch-action:none;
}
.mobile-joystick-ring { position:absolute; inset:14px; border:1px dashed rgba(112,186,255,.22); border-radius:50%; }
.mobile-joystick-thumb { position:absolute; top:50%; left:50%; width:54px; height:54px; border:2px solid rgba(117,255,227,.7); border-radius:50%; background:radial-gradient(circle at 35% 30%,rgba(117,255,227,.38),rgba(9,52,60,.82)); box-shadow:0 0 18px rgba(67,244,208,.25); transform:translate(-50%,-50%); }
.mobile-joystick > span { position:absolute; left:50%; bottom:-16px; color:rgba(112,186,255,.7); font:800 8px Inter,sans-serif; letter-spacing:.2em; transform:translateX(-50%); }

.mobile-action-stack {
  position:absolute;
  right:max(24px, env(safe-area-inset-right));
  bottom:max(20px, env(safe-area-inset-bottom));
  width:190px;
  height:142px;
  pointer-events:none;
}
.mobile-controls button { min-height:0; padding:0; justify-content:center; border:1px solid rgba(112,186,255,.44); border-radius:50%; color:#dff7ff; background:rgba(4,22,36,.72); box-shadow:inset 0 0 18px rgba(61,155,255,.1),0 5px 18px rgba(0,0,0,.3); clip-path:none; pointer-events:auto; touch-action:none; }
.mobile-controls button:hover { transform:none; color:#dff7ff; background:rgba(4,22,36,.72); box-shadow:inset 0 0 18px rgba(61,155,255,.1),0 5px 18px rgba(0,0,0,.3); }
.mobile-action { position:absolute; font-size:9px; letter-spacing:.06em; }
.mobile-action-small { width:52px; height:52px; }
#mobile-reload { left:0; bottom:2px; }
#mobile-interact { left:48px; top:0; }
#mobile-jump { right:2px; top:10px; }
.mobile-fire { right:0; bottom:0; width:78px; height:78px; border:2px solid rgba(255,139,61,.75) !important; color:#fff4ea !important; background:radial-gradient(circle,rgba(255,139,61,.28),rgba(55,20,8,.83)) !important; font-size:13px !important; box-shadow:0 0 24px rgba(255,139,61,.22),inset 0 0 18px rgba(255,139,61,.15) !important; }
.mobile-fire.pressed { transform:scale(.9) !important; background:radial-gradient(circle,rgba(255,190,126,.52),rgba(92,28,4,.92)) !important; }

.mobile-squad-actions { position:absolute; left:max(32px, env(safe-area-inset-left)); top:72px; display:flex; gap:7px; pointer-events:auto; }
.mobile-squad-actions button { width:67px; height:27px; border-radius:2px; color:#70baff; font-size:8px; letter-spacing:.07em; }
.mobile-squad-actions button.active { border-color:var(--cyan); color:#041410; background:var(--cyan); box-shadow:0 0 16px rgba(67,244,208,.28); }
.mobile-pause { position:absolute; top:max(12px, env(safe-area-inset-top)); left:50%; width:38px !important; height:30px !important; border-radius:3px !important; font-size:11px !important; transform:translateX(-50%); }
.mobile-pause:hover { transform:translateX(-50%) !important; }

.rotate-device {
  position:fixed;
  inset:0;
  z-index:100;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:13px;
  padding:28px;
  color:#eafafa;
  background:radial-gradient(circle at center,#102c3b,#040a10 70%);
  text-align:center;
}
.rotate-device strong { color:var(--cyan); font:800 22px "Barlow Condensed",sans-serif; letter-spacing:.12em; }
.rotate-device span { color:#829da5; font-size:11px; }
.rotate-phone { width:42px; height:72px; border:2px solid #70baff; border-radius:7px; box-shadow:0 0 22px rgba(61,155,255,.25); transform:rotate(90deg); animation:rotate-phone 1.5s ease-in-out infinite alternate; }
.rotate-phone::after { content:""; position:absolute; left:50%; bottom:4px; width:7px; height:2px; border-radius:2px; background:#70baff; transform:translateX(-50%); }
@keyframes rotate-phone { from { transform:rotate(0deg); } to { transform:rotate(90deg); } }

@media (pointer: coarse) and (orientation: landscape) {
  body.mobile-play .mobile-controls { display:block; }
  body.mobile-play .squad-panel { top:52px; right:12px; width:190px; max-height:44vh; padding:8px; overflow:hidden; opacity:.82; pointer-events:none; }
  body.mobile-play .squad-card { grid-template-columns:28px 1fr 22px; padding:4px; gap:5px; }
  body.mobile-play .squad-portrait { width:28px; height:28px; }
  body.mobile-play #squad-mode-copy,
  body.mobile-play .squad-manage { display:none; }
  body.mobile-play .brand { top:13px; left:16px; font-size:13px; }
  body.mobile-play .objective { top:12px; right:15px; }
  body.mobile-play #hud .nano-shield {
    top:85px;
    left:20px;
    bottom:auto;
    transform:scale(.7);
    transform-origin:left top;
  }
  body.mobile-play #hud .health {
    top:162px;
    left:20px;
    bottom:auto;
    width:150px;
    padding:7px 9px;
    transform:none;
  }
  body.mobile-play #hud .health::before { margin-bottom:4px; font-size:6px; }
  body.mobile-play #hud .health-copy { margin-bottom:5px; }
  body.mobile-play #hud .health-copy strong { font-size:18px; }
  body.mobile-play #hud .regen-status { margin-top:4px; font-size:6px; }
  body.mobile-play .ammo { right:210px; bottom:12px; min-width:94px; }
  body.mobile-play #status { bottom:8px; max-width:35vw; min-width:220px; font-size:8px; }
  body.mobile-play .helmet-side { width:42px; }
}

@media (pointer: coarse) and (orientation: portrait) {
  .rotate-device { display:flex; }
  .mobile-controls { display:none !important; }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .mobile-joystick { width:112px; height:112px; }
  .mobile-action-stack { transform:scale(.88); transform-origin:right bottom; }
  .mobile-squad-actions { top:52px; }
  body.mobile-play .squad-panel { display:none !important; }
}

#damage-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at center, transparent 30%, rgba(255, 30, 54, .28) 72%, rgba(130, 0, 18, .72) 100%),
    linear-gradient(rgba(255, 45, 55, .08), rgba(255, 45, 55, .08));
  mix-blend-mode: screen;
}

#damage-flash.hit { animation: damage-hit .34s ease-out; }
#damage-flash.shield-hit {
  background:
    radial-gradient(circle at center,transparent 28%,rgba(38,145,255,.3) 70%,rgba(0,54,145,.78) 100%),
    linear-gradient(rgba(45,155,255,.1),rgba(45,155,255,.1));
  animation:damage-hit .34s ease-out;
}
#damage-flash.fatal-hit {
  background:radial-gradient(circle at 50% 46%,rgba(100,0,15,.08) 8%,rgba(145,0,22,.58) 62%,rgba(0,0,0,.98) 100%);
  animation:player-fatal-visor 1.7s ease-in forwards;
}
@keyframes player-fatal-visor {
  0% { opacity:.35; }
  38% { opacity:.72; }
  72%,100% { opacity:1; }
}

#nano-shield-impact {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:0;
  overflow:hidden;
  contain:strict;
  will-change:opacity;
}

#nano-shield-impact polygon {
  fill:rgba(40,145,255,.035);
  stroke:rgba(116,207,255,.82);
  stroke-width:1.6;
  vector-effect:non-scaling-stroke;
  shape-rendering:optimizeSpeed;
}

#nano-shield-impact.shield-hit { animation:nano-pentagon-hit .46s ease-out; }

@keyframes nano-pentagon-hit {
  0% { opacity:.88; }
  22% { opacity:.62; }
  52% { opacity:.3; }
  100% { opacity:0; }
}

@keyframes damage-hit {
  0% { opacity: 1; }
  35% { opacity: .72; }
  100% { opacity: 0; }
}

.complete-panel { text-align: center; border-left-color: var(--orange); }
.complete-panel .eyebrow { color: var(--orange); }
.complete-panel h2 { font-size: clamp(56px, 9vw, 84px); }
.complete-panel p:not(.eyebrow) { color: var(--muted); margin: 28px 0; }
.error-panel h2 { font-size: 52px; color: var(--orange); }

@media (max-width: 520px) {
  .controls-grid { grid-template-columns: 1fr; }
  .debug-controls { grid-template-columns: 1fr; }
  .change-wave { grid-column: auto; }
  .panel { padding: 38px 28px 30px; }
  .brand { top: 16px; left: 16px; }
  .god-indicator { top: 64px; left: 16px; }
  .objective { top: 16px; right: 16px; }
  .ammo { right: 16px; bottom: 16px; }
  .health { left: 16px; bottom: 16px; }
  .nano-shield { left:16px; bottom:102px; transform:scale(.88); transform-origin:left bottom; }
  .squad-panel { top:80px; right:10px; width:210px; }
  .audio-controls { grid-template-columns:1fr; }
  .helmet-glass { inset:12px 16px 17px; }
  .helmet-side { width:46px; }
  .helmet-rim { left:3%; width:94%; }
}

@media (max-width: 860px) {
  .menu-panel { width:min(620px,100%); }
  .menu-layout { grid-template-columns:1fr; gap:28px; }
  .menu-primary { padding-right:0; padding-bottom:26px; border-right:0; border-bottom:1px solid rgba(67,244,208,.18); }
  .menu-primary .hint { text-align:center; }
}

@media (max-height: 720px) and (min-width: 861px) {
  .overlay { align-items:start; }
  .menu-panel { margin:auto 0; padding-top:30px; padding-bottom:30px; }
  .menu-primary h1 { font-size:70px; }
  .menu-primary .intro { margin:18px 0; }
  .menu-run-info { margin-top:14px; }
  .menu-panel .controls-grid { gap:9px 18px; }
  .menu-panel .audio-panel { margin-top:14px; }
  .menu-panel .debug-panel { margin-top:12px; }
}