:root {
  --ink: #080b0d;
  --panel: rgba(14, 19, 21, 0.91);
  --panel-2: rgba(21, 28, 30, 0.92);
  --line: rgba(188, 212, 209, 0.18);
  --soft: #90a29f;
  --paper: #e7ece9;
  --acid: #ffc83d;
  --cyan: #5fffe1;
  --mint: #67ff9b;
  --royal: #ffdf74;
  --danger: #ff5a49;
  --font-display: "Impact", "Haettenschweiler", "Franklin Gothic Condensed", sans-serif;
  --font-body: "Avenir Next Condensed", "DIN Condensed", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  user-select: none;
  overscroll-behavior: none;
}

button, input, select { font: inherit; }
button { color: inherit; }
button, select, label { touch-action: manipulation; }

#game-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-width: 860px;
  min-height: 560px;
  overflow: hidden;
  cursor: none;
  background: #0a0e0f;
}

#game-shell::before {
  position: absolute;
  z-index: 4;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 71%, rgba(244,182,61,.025) 71% 71.2%, transparent 71.2%),
    linear-gradient(25deg, transparent 0 31%, rgba(102,228,216,.018) 31% 31.2%, transparent 31.2%),
    radial-gradient(circle at 50% 50%, rgba(95,255,225,.04), transparent 38%);
}

#game-shell.rescued::before { background:radial-gradient(circle at 50% 50%, rgba(255,200,61,.1), transparent 42%), linear-gradient(25deg, transparent 0 31%, rgba(95,255,225,.04) 31% 31.2%, transparent 31.2%); }

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

.scanlines, .vignette, .damage-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scanlines {
  z-index: 5;
  opacity: .2;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.18) 3px 4px);
  mix-blend-mode: multiply;
}

.vignette {
  z-index: 6;
  box-shadow: inset 0 0 170px 25px rgba(0,0,0,.65);
}

.damage-flash {
  z-index: 7;
  opacity: 0;
  background: radial-gradient(circle at center, transparent 32%, rgba(255, 42, 25, .55) 115%);
  transition: opacity .12s ease;
}

.damage-flash.active { opacity: 1; }

.top-hud {
  position: absolute;
  z-index: 20;
  top: 22px;
  left: 28px;
  right: 28px;
  display: grid;
  grid-template-columns: 230px 1fr auto;
  align-items: start;
  pointer-events: none;
}

.brand-chip {
  display: flex;
  gap: 11px;
  align-items: center;
}

.brand-mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--ink);
  background: var(--acid);
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: -1px;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 73% 100%, 0 100%);
}

.brand-chip div { display: grid; line-height: 1; }
.brand-chip strong { font-size: 14px; letter-spacing: 2px; text-shadow:0 0 16px rgba(255,200,61,.22); }
.brand-chip small { margin-top: 7px; color: var(--soft); font-size: 9px; letter-spacing: 1.8px; }

.mission-strip {
  justify-self: center;
  display: flex;
  height: 45px;
  padding: 0 18px;
  background: linear-gradient(90deg, transparent, rgba(8,12,13,.78) 12%, rgba(8,12,13,.78) 88%, transparent);
}

.mission-strip div {
  min-width: 92px;
  padding: 2px 18px 0;
  text-align: center;
  border-right: 1px solid var(--line);
}

.mission-strip div:last-child { border: 0; }
.mission-strip span { display: block; color: var(--soft); font-size: 9px; letter-spacing: 2px; }
.mission-strip strong { display: block; margin-top: 4px; font-size: 19px; letter-spacing: 1px; }
.mission-strip .rescue-stat strong { color:var(--royal); text-shadow:0 0 14px rgba(255,200,61,.42); }
.mission-strip .rescue-stat.complete strong { color:var(--mint); text-shadow:0 0 15px rgba(103,255,155,.55); }

.icon-button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: rgba(10,14,15,.75);
  font-weight: 800;
  cursor: pointer;
  pointer-events: auto;
  transition: .2s ease;
}

.icon-button:hover { border-color: var(--acid); color: var(--acid); transform: translateY(-2px); }

.top-actions { display:flex; align-items:center; gap:8px; pointer-events:auto; }
.perf-badge { height:27px; padding:1px 9px 0; color:var(--cyan); background:rgba(10,14,15,.7); border:1px solid var(--line); font-size:8px; letter-spacing:1px; white-space:nowrap; cursor:pointer; transition:.16s ease; }
.perf-badge:hover, .perf-badge[aria-expanded="true"] { border-color:var(--cyan); background:rgba(102,228,216,.07); }
.perf-badge.degraded { color:var(--acid); border-color:rgba(244,182,61,.45); }

.perf-panel { position:absolute; z-index:35; top:62px; right:28px; width:260px; padding:14px; opacity:0; visibility:hidden; transform:translateY(-8px); color:var(--paper); background:rgba(9,14,15,.95); border:1px solid var(--line); box-shadow:0 18px 55px rgba(0,0,0,.42); backdrop-filter:blur(8px); pointer-events:auto; transition:.18s ease; }
.perf-panel.open { opacity:1; visibility:visible; transform:none; }
.perf-panel::before { position:absolute; top:-1px; left:14px; width:54px; height:2px; content:""; background:var(--cyan); }
.perf-panel-title { display:flex; justify-content:space-between; align-items:center; padding-bottom:10px; border-bottom:1px solid var(--line); }
.perf-panel-title span { font-size:10px; font-weight:800; letter-spacing:1.8px; }
.perf-panel-title button { width:22px; height:22px; padding:0; color:var(--soft); background:none; border:1px solid transparent; cursor:pointer; }
.perf-panel-title button:hover { color:var(--paper); border-color:var(--line); }
.perf-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:10px; background:rgba(188,212,209,.08); }
.perf-grid div { padding:9px 8px; background:#0d1314; }
.perf-grid span { display:block; color:var(--soft); font-size:7px; letter-spacing:1px; }
.perf-grid strong { display:block; margin-top:4px; color:var(--paper); font-size:11px; letter-spacing:.8px; }
.perf-status { display:flex; align-items:center; gap:7px; margin-top:10px; color:var(--soft); font-size:8px; letter-spacing:.8px; }
.perf-status i { width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 7px var(--cyan); }
.perf-status.warn i { background:var(--acid); box-shadow:0 0 7px var(--acid); }
.perf-status b { margin-left:auto; color:#5f706d; font-size:7px; }

.supply-callout { position:absolute; z-index:19; top:75px; left:50%; display:flex; align-items:center; gap:8px; transform:translateX(-50%); color:var(--acid); font-size:8px; letter-spacing:1.5px; pointer-events:none; }
.supply-callout i { width:18px; height:1px; background:var(--acid); box-shadow:0 0 8px rgba(244,182,61,.55); }
.supply-callout small { padding-left:8px; color:#73827f; border-left:1px solid var(--line); font-size:7px; letter-spacing:1px; }

.rescue-objective {
  position:absolute;
  z-index:23;
  top:96px;
  left:50%;
  display:grid;
  grid-template-columns:58px 1fr;
  width:350px;
  min-height:64px;
  padding:7px 12px 7px 8px;
  transform:translateX(-50%);
  color:var(--paper);
  background:linear-gradient(110deg, rgba(8,13,14,.94), rgba(19,22,18,.85));
  border:1px solid rgba(255,200,61,.3);
  box-shadow:0 14px 40px rgba(0,0,0,.35), inset 0 0 30px rgba(255,200,61,.035);
  clip-path:polygon(0 0, 96% 0, 100% 22%, 100% 100%, 4% 100%, 0 78%);
  pointer-events:none;
}
.rescue-objective::after { position:absolute; right:12px; top:7px; content:"10X"; color:rgba(255,200,61,.12); font-family:var(--font-display); font-size:29px; letter-spacing:1px; }
.rescue-portrait { position:relative; display:grid; place-items:center; width:50px; height:50px; overflow:hidden; border:1px solid rgba(255,200,61,.38); background:radial-gradient(circle, rgba(255,200,61,.18), rgba(4,7,8,.95)); }
.rescue-portrait img { width:54px; height:54px; object-fit:contain; filter:grayscale(.85) brightness(.58) drop-shadow(0 0 8px rgba(255,200,61,.45)); transform:translateY(2px); transition:filter .35s ease; }
.rescue-portrait i { position:absolute; inset:0; border:1px solid rgba(95,255,225,.18); animation:signal-scan 2.2s linear infinite; }
.rescue-copy { align-self:center; padding-left:10px; }
.rescue-copy > span { display:block; color:#70817d; font-size:6px; letter-spacing:1.8px; }
.rescue-copy > strong { display:block; margin:4px 0 5px; color:var(--acid); font-size:10px; letter-spacing:1.5px; }
.rescue-copy > small { display:block; margin-top:4px; color:#92a29f; font-size:7px; letter-spacing:1px; }
.mission-progress { width:100%; height:4px; overflow:hidden; background:rgba(255,255,255,.07); transform:skewX(-15deg); }
.mission-progress i { display:block; width:0; height:100%; background:linear-gradient(90deg, #ff8a3d, var(--acid), var(--mint)); box-shadow:0 0 12px var(--acid); transition:width .28s cubic-bezier(.2,.9,.3,1); }
.rescue-objective.rescued { border-color:rgba(103,255,155,.65); box-shadow:0 0 34px rgba(103,255,155,.15), inset 0 0 25px rgba(103,255,155,.07); }
.rescue-objective.rescued .rescue-portrait img { filter:drop-shadow(0 0 9px rgba(255,200,61,.6)); }
.rescue-objective.rescued .rescue-copy > strong { color:var(--mint); }
@keyframes signal-scan { 0% { clip-path:inset(0 0 88% 0); opacity:.2; } 50% { opacity:1; } 100% { clip-path:inset(88% 0 0 0); opacity:.2; } }

.combat-hud {
  position: absolute;
  z-index: 20;
  left: 28px;
  right: 28px;
  bottom: 25px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  pointer-events: none;
}

.panel-corner {
  position: relative;
  background: linear-gradient(135deg, rgba(14,19,21,.92), rgba(8,12,13,.78));
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
}

.panel-corner::before, .panel-corner::after {
  position: absolute;
  content: "";
  width: 14px;
  height: 14px;
  border-color: var(--acid);
}

.panel-corner::before { top: -1px; left: -1px; border-top: 2px solid var(--acid); border-left: 2px solid var(--acid); }
.panel-corner::after { right: -1px; bottom: -1px; border-right: 2px solid var(--acid); border-bottom: 2px solid var(--acid); }

.vitals-panel { width: 330px; padding: 12px 16px 11px; }
.operator-line { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 1.4px; }
.operator-line b { margin-left: auto; color: var(--cyan); font-size: 9px; letter-spacing: 1px; }
.evolution-line { margin:7px 0 0 14px; color:#879894; font-size:8px; letter-spacing:1.6px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.health-row { display: grid; grid-template-columns: 36px 1fr 34px; gap: 9px; align-items: center; margin-top: 12px; color: var(--soft); font-size: 10px; letter-spacing: 1px; }
.health-row strong { color: var(--paper); font-size: 19px; text-align: right; }
.health-track { height: 7px; overflow: hidden; background: rgba(255,255,255,.08); transform: skewX(-18deg); }
.health-track i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--cyan), #b5f3d5); transition: width .15s, background .2s; }
.stat-pair { display: flex; gap: 18px; margin: 9px 0 0 45px; color: var(--soft); font-size: 9px; letter-spacing: 1.2px; }
.stat-pair b { color: var(--paper); font-size: 12px; margin-left: 5px; }

.ammo-panel { min-width: 245px; padding: 13px 16px 14px; text-align: right; }
.weapon-name { display: flex; align-items: baseline; justify-content: flex-end; gap: 9px; }
.weapon-name span { color: var(--acid); font-size: 10px; }
.weapon-name strong { font-size: 18px; letter-spacing: 2px; }
.ammo-readout { line-height: .9; margin: 6px 0 9px; }
.ammo-readout strong { font-family: var(--font-display); font-weight: 500; font-size: 54px; letter-spacing: 1px; }
.ammo-readout span { color: var(--soft); font-size: 16px; }
.ammo-panel small { color: var(--soft); font-size: 9px; letter-spacing: 1.6px; }
.reload-track { height: 2px; background: rgba(255,255,255,.08); }
.reload-track i { display: block; width: 0; height: 100%; background: var(--acid); box-shadow: 0 0 8px var(--acid); }

.armory {
  position: absolute;
  z-index: 18;
  right: 28px;
  top: 92px;
  width: 360px;
  opacity: .62;
  transition: opacity .2s;
}

.armory:hover { opacity: 1; }
.armory-title { display: flex; justify-content: space-between; align-items: end; margin-bottom: 6px; }
.armory-title span { color: var(--acid); font-size: 9px; letter-spacing: 1.5px; }
.armory-title small { color: var(--soft); font-size: 7px; }
.weapon-list { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:3px; }
.weapon-slot {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  min-height: 31px;
  padding: 4px 8px;
  border: 1px solid rgba(188,212,209,.09);
  background: rgba(8,12,13,.68);
  color: var(--soft);
  cursor: pointer;
  pointer-events: auto;
  transition: .14s ease;
}

.weapon-slot:hover { color: var(--paper); border-color: rgba(244,182,61,.5); transform: translateX(-3px); }
.weapon-slot.active { color: var(--ink); background: var(--weapon-color, var(--acid)); border-color: var(--weapon-color, var(--acid)); box-shadow:-8px 0 22px color-mix(in srgb, var(--weapon-color, var(--acid)) 24%, transparent); }
.weapon-slot.heavy { border-left:2px solid color-mix(in srgb, var(--weapon-color) 68%, transparent); }
.weapon-slot.heavy small { color:var(--weapon-color); font-weight:900; opacity:1; }
.weapon-slot.heavy.active small { color:var(--ink); }
.weapon-slot.prototype { border-left:2px solid color-mix(in srgb, var(--weapon-color) 76%, transparent); }
.weapon-slot.prototype small { color:var(--weapon-color); font-weight:900; }
.weapon-slot.locked { position:relative; color:#5e6a68; border-color:rgba(188,212,209,.07); background:repeating-linear-gradient(135deg, rgba(7,10,11,.84) 0 7px, rgba(18,25,26,.84) 7px 9px); }
.weapon-slot.locked::after { content:"LOCK"; position:absolute; right:7px; top:4px; color:var(--weapon-color); font-size:6px; letter-spacing:1px; opacity:.62; }
.weapon-slot.locked:hover { color:#788582; border-color:color-mix(in srgb, var(--weapon-color) 35%, transparent); transform:none; }
.weapon-slot:not(.heavy) small { color:var(--weapon-color); }
.weapon-slot:not(.heavy).active small { color:var(--ink); }
.weapon-slot b { font-size: 9px; }
.weapon-slot strong { font-size: 10px; letter-spacing: 1px; }
.weapon-slot small { font-size: 7px; letter-spacing: .5px; opacity: .75; }

.ability-tray { position:absolute; z-index:20; left:28px; bottom:154px; display:grid; gap:5px; opacity:0; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease; pointer-events:none; }
.ability-tray.active { opacity:1; transform:none; }
.ability-chip { display:none; grid-template-columns:26px 1fr auto; align-items:center; width:260px; min-height:42px; padding:6px 9px; color:var(--paper); background:linear-gradient(90deg, rgba(11,17,18,.96), rgba(11,17,18,.78)); border:1px solid var(--line); border-left:2px solid var(--buff-color); box-shadow:0 9px 24px rgba(0,0,0,.24); }
.ability-chip.active { display:grid; animation:ability-in .22s ease both; }
.ability-chip.overdrive { --buff-color:var(--cyan); }
.ability-chip.power { --buff-color:#ff7848; }
.ability-chip.clone { --buff-color:#d884ff; }
.ability-chip.barrier { --buff-color:#5ac8ff; }
.ability-chip > b { display:grid; width:21px; height:21px; place-items:center; color:var(--ink); background:var(--buff-color); font-size:10px; }
.ability-chip span { font-size:9px; font-weight:900; letter-spacing:1.2px; }
.ability-chip span small { display:block; margin-top:3px; color:var(--soft); font-size:7px; font-weight:500; letter-spacing:.6px; }
.ability-chip > strong { color:var(--buff-color); font-family:var(--font-display); font-size:15px; font-weight:500; letter-spacing:1px; }
@keyframes ability-in { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:none; } }

.crosshair {
  position: absolute;
  z-index: 25;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(102,228,216,.45));
}

.crosshair i { position: absolute; display: block; background: var(--cyan); }
.crosshair i:nth-child(1), .crosshair i:nth-child(2) { left: 16px; width: 1px; height: 9px; }
.crosshair i:nth-child(1) { top: 0; }
.crosshair i:nth-child(2) { bottom: 0; }
.crosshair i:nth-child(3), .crosshair i:nth-child(4) { top: 16px; width: 9px; height: 1px; }
.crosshair i:nth-child(3) { left: 0; }
.crosshair i:nth-child(4) { right: 0; }
.crosshair b { position: absolute; left: 15px; top: 15px; width: 3px; height: 3px; border: 1px solid var(--cyan); border-radius: 50%; }
.crosshair.firing { transform: translate(-50%, -50%) scale(1.22); }
.crosshair.enemy i, .crosshair.enemy b { background: var(--danger); border-color: var(--danger); }

.toast-region { position: absolute; z-index: 40; left: 50%; bottom: 120px; transform: translateX(-50%); display: grid; gap: 6px; pointer-events: none; }
.toast { padding: 9px 16px; color: var(--paper); background: rgba(8,12,13,.92); border-left: 2px solid var(--cyan); font-size: 10px; letter-spacing: 1.2px; animation: toast-in 2.6s ease both; }
.toast.warn { border-color: var(--acid); }
.toast.error { border-color: var(--danger); }
.toast.royal { color:#fff8d8; border-color:var(--mint); background:linear-gradient(90deg, rgba(8,12,13,.96), rgba(67,48,8,.92)); box-shadow:0 0 28px rgba(255,200,61,.26); font-weight:900; }
@keyframes toast-in { 0% { opacity:0; transform:translateY(8px); } 12%, 78% { opacity:1; transform:none; } 100% { opacity:0; transform:translateY(-8px); } }

.wave-banner { position: absolute; z-index: 22; left: 50%; top: 29%; transform: translate(-50%,-50%); text-align: center; pointer-events: none; opacity: 0; }
.wave-banner.show { animation: wave-pop 2.5s ease both; }
.wave-banner span { display: block; color: var(--acid); font-size: 10px; letter-spacing: 5px; }
.wave-banner strong { display: block; font-family: var(--font-display); font-size: 64px; font-weight: 500; letter-spacing: 4px; text-shadow: 0 4px 35px #000; }
@keyframes wave-pop { 0% { opacity:0; transform:translate(-50%,-40%) scale(.94); } 16%, 72% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-58%) scale(1.04); } }

.rescue-celebration { position:absolute; z-index:90; inset:0; display:grid; place-items:center; overflow:hidden; opacity:0; visibility:hidden; pointer-events:none; background:radial-gradient(circle at center, rgba(255,210,73,.2), rgba(3,7,8,.84) 55%, rgba(3,5,6,.96)); }
.rescue-celebration.show { visibility:visible; animation:rescue-stage 6.2s ease both; }
.rescue-rays { position:absolute; width:120vmax; height:120vmax; background:repeating-conic-gradient(from 0deg, rgba(255,220,95,.16) 0 5deg, transparent 5deg 14deg); animation:royal-spin 14s linear infinite; mask-image:radial-gradient(circle, #000 0 36%, transparent 68%); }
.rescue-card { position:relative; display:grid; justify-items:center; width:min(650px, 86vw); padding:24px 40px 34px; text-align:center; border-top:1px solid rgba(255,223,116,.7); border-bottom:1px solid rgba(95,255,225,.4); background:linear-gradient(90deg, transparent, rgba(5,11,11,.85) 12% 88%, transparent); filter:drop-shadow(0 25px 70px #000); }
.rescue-card::before, .rescue-card::after { position:absolute; top:50%; width:120px; height:1px; content:""; background:linear-gradient(90deg, transparent, var(--acid)); box-shadow:0 0 10px var(--acid); }
.rescue-card::before { right:100%; } .rescue-card::after { left:100%; transform:scaleX(-1); }
.rescue-card img { width:clamp(190px, 28vh, 280px); aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 0 34px rgba(255,200,61,.75)); animation:pet-arrival 6.2s cubic-bezier(.15,.85,.2,1) both; }
.rescue-kicker { color:var(--mint); font-size:9px; letter-spacing:4px; }
.rescue-card p { margin:-16px 0 2px; color:var(--royal); font-size:15px; font-weight:800; letter-spacing:5px; text-shadow:0 0 20px rgba(255,200,61,.55); }
.rescue-card h2 { margin:0; color:#fff8dc; font-family:var(--font-display); font-size:clamp(48px, 8vw, 88px); font-weight:500; letter-spacing:5px; line-height:.95; text-shadow:0 0 18px rgba(255,200,61,.45), 7px 7px 0 rgba(95,255,225,.08); }
.reward-line { display:flex; gap:14px; align-items:center; margin-top:17px; padding:8px 14px; border:1px solid rgba(255,223,116,.24); background:rgba(255,200,61,.06); font-size:9px; letter-spacing:1px; }
.reward-line span { color:var(--ink); background:var(--acid); padding:4px 6px; font-weight:900; }
.reward-line strong { color:#cfe9df; font-weight:500; }
@keyframes rescue-stage { 0% { opacity:0; } 7%, 78% { opacity:1; } 100% { opacity:0; visibility:hidden; } }
@keyframes royal-spin { to { transform:rotate(360deg); } }
@keyframes pet-arrival { 0% { opacity:0; transform:translateY(80px) scale(.2) rotate(-14deg); } 14% { opacity:1; transform:translateY(-12px) scale(1.12) rotate(3deg); } 23%, 76% { transform:translateY(0) scale(1) rotate(0); } 100% { opacity:0; transform:translateY(-30px) scale(1.05); } }
.rescue-celebration.rescue-variant-2 .rescue-rays { animation-duration:8s; background:repeating-conic-gradient(from 18deg, rgba(103,255,155,.18) 0 6deg, transparent 6deg 15deg); }
.rescue-celebration.rescue-variant-2 .rescue-card img { filter:drop-shadow(0 0 38px rgba(103,255,155,.82)) hue-rotate(12deg); animation-name:pet-arrival-flip; }
.rescue-celebration.rescue-variant-3 .rescue-rays { animation-direction:reverse; background:repeating-conic-gradient(from -12deg, rgba(95,255,225,.18) 0 4deg, transparent 4deg 12deg); }
.rescue-celebration.rescue-variant-3 .rescue-card img { filter:drop-shadow(0 0 42px rgba(95,255,225,.8)) saturate(1.22); animation-name:pet-arrival-spin; }
@keyframes pet-arrival-flip { 0% { opacity:0; transform:translateX(-80px) scale(.28) rotate(-18deg); } 16% { opacity:1; transform:translateX(10px) scale(1.13) rotate(5deg); } 25%, 76% { transform:none; } 100% { opacity:0; transform:translateX(45px) scale(1.06); } }
@keyframes pet-arrival-spin { 0% { opacity:0; transform:translateY(55px) scale(.2) rotate(-90deg); } 17% { opacity:1; transform:translateY(-8px) scale(1.16) rotate(7deg); } 27%, 76% { transform:none; } 100% { opacity:0; transform:translateY(-38px) scale(1.08) rotate(5deg); } }

.mobile-controls, .mobile-controls-card { display:none; }
.mobile-controls {
  position:absolute;
  z-index:62;
  inset:auto 0 max(8px, env(safe-area-inset-bottom));
  align-items:end;
  justify-content:space-between;
  padding:0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  pointer-events:none;
  touch-action:none;
}
.touch-stick { display:grid; justify-items:center; gap:4px; color:rgba(231,236,233,.62); font-size:7px; font-weight:900; letter-spacing:2px; pointer-events:auto; touch-action:none; }
.stick-ring { position:relative; width:104px; height:104px; border:1px solid rgba(95,255,225,.34); border-radius:50%; background:radial-gradient(circle, rgba(95,255,225,.07) 0 34%, rgba(7,12,13,.48) 35% 62%, rgba(95,255,225,.08) 63% 65%, rgba(7,12,13,.35) 66%); box-shadow:inset 0 0 22px rgba(95,255,225,.08), 0 0 25px rgba(0,0,0,.25); }
.stick-ring::before, .stick-ring::after { position:absolute; left:50%; top:50%; content:""; background:rgba(95,255,225,.17); transform:translate(-50%,-50%); pointer-events:none; }
.stick-ring::before { width:72%; height:1px; }
.stick-ring::after { width:1px; height:72%; }
.stick-ring i { position:absolute; z-index:2; left:50%; top:50%; width:43px; height:43px; margin:-21.5px; border:1px solid rgba(255,223,116,.8); border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), rgba(255,200,61,.22) 35%, rgba(6,11,12,.88) 72%); box-shadow:0 0 18px rgba(255,200,61,.22), inset 0 0 10px rgba(255,255,255,.06); will-change:transform; }
.aim-stick .stick-ring { border-color:rgba(255,200,61,.45); background:radial-gradient(circle, rgba(255,200,61,.08) 0 34%, rgba(7,12,13,.48) 35% 62%, rgba(255,200,61,.08) 63% 65%, rgba(7,12,13,.35) 66%); }
.aim-stick .stick-ring::before, .aim-stick .stick-ring::after { background:rgba(255,200,61,.2); }
.mobile-action-bar { align-self:end; display:flex; gap:6px; margin-bottom:5px; pointer-events:auto; }
.mobile-action-bar button { display:grid; place-items:center; width:45px; height:45px; padding:3px 0 1px; border:1px solid rgba(188,212,209,.24); color:var(--paper); background:rgba(7,12,13,.76); font-family:var(--font-display); font-size:21px; line-height:1; clip-path:polygon(0 0, 100% 0, 100% 82%, 84% 100%, 0 100%); box-shadow:0 8px 24px rgba(0,0,0,.28); touch-action:manipulation; }
.mobile-action-bar button:active { color:var(--ink); background:var(--acid); border-color:var(--acid); transform:scale(.94); }
.mobile-action-bar small { display:block; font-family:var(--font-body); font-size:6px; font-weight:800; letter-spacing:.5px; }

.overlay {
  position: absolute;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 5vh 5vw;
  opacity: 0;
  visibility: hidden;
  cursor: default;
  background:
    linear-gradient(105deg, rgba(7,10,11,.98) 0 48%, rgba(7,10,11,.76) 68%, rgba(7,10,11,.92)),
    repeating-linear-gradient(90deg, transparent 0 89px, rgba(255,255,255,.025) 90px),
    #080b0d;
  transition: opacity .25s ease, visibility .25s;
}

.overlay::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .35;
  background:
    linear-gradient(135deg, transparent 0 64%, rgba(244,182,61,.08) 64% 64.5%, transparent 64.5%),
    radial-gradient(circle at 74% 46%, rgba(102,228,216,.09), transparent 27%);
  pointer-events: none;
}

.overlay::after { position:absolute; right:4vw; bottom:2vh; content:"SAVE NIPING // TARGET 10"; color:rgba(244,182,61,.055); font-family:var(--font-display); font-size:clamp(42px, 7vw, 110px); letter-spacing:5px; pointer-events:none; }

.overlay.open { opacity: 1; visibility: visible; }

.menu-grid {
  position: relative;
  width: min(1180px, 92vw);
  display: grid;
  grid-template-columns: 1.05fr .82fr;
  grid-template-rows: auto auto;
  gap: 25px 70px;
  align-items: center;
}

.hero-copy { position:relative; align-self: end; }
.hero-mascot { position:absolute; z-index:-1; right:-8px; top:-52px; width:230px; height:230px; opacity:.32; filter:drop-shadow(0 0 30px rgba(255,200,61,.48)); transform:rotate(5deg); }
.hero-mascot::after { position:absolute; inset:18%; content:""; border:1px solid rgba(95,255,225,.28); border-radius:50%; box-shadow:0 0 50px rgba(95,255,225,.18); animation:mascot-orbit 6s linear infinite; }
.hero-mascot img { width:100%; height:100%; object-fit:contain; }
@keyframes mascot-orbit { to { transform:rotate(360deg); } }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--soft); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; }
.eyebrow span { width: 28px; height: 2px; background: var(--acid); }
.hero-copy h1 { position:relative; z-index:1; margin: 12px 0 14px; font-family: var(--font-display); font-weight: 500; font-size: clamp(82px, 10vw, 150px); line-height: .72; letter-spacing: -4px; text-transform: uppercase; }
.hero-copy h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 2px var(--acid); text-shadow: 12px 12px 0 rgba(244,182,61,.07); }
.lede { width: min(530px, 100%); margin: 30px 0 22px; color: #aab6b2; line-height: 1.8; font-size: 14px; letter-spacing: .6px; }
.feature-tape { display: flex; flex-wrap: wrap; gap: 8px; }
.feature-tape span { padding: 6px 10px; border: 1px solid var(--line); color: var(--soft); font-size: 9px; letter-spacing: 1.2px; }

.setup-card, .pause-card {
  position: relative;
  padding: 27px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(23,30,31,.95), rgba(10,14,15,.96));
  box-shadow: 24px 24px 80px rgba(0,0,0,.4);
}

.setup-card::before, .pause-card::before { position:absolute; top:-1px; left:25px; width:88px; height:3px; content:""; background:var(--acid); }
.card-heading { display:flex; justify-content:space-between; padding-bottom:18px; margin-bottom:19px; border-bottom:1px solid var(--line); }
.card-heading span { font-weight:800; font-size:13px; letter-spacing:2px; }
.card-heading small { color:var(--soft); font-size:8px; letter-spacing:.8px; }
.field-label { display:block; margin-bottom:6px; color:var(--soft); font-size:9px; letter-spacing:1.4px; }
.text-input, select { width:100%; height:40px; padding:0 11px; color:var(--paper); background:#0a0e0f; border:1px solid var(--line); outline:none; letter-spacing:1px; cursor:pointer; }
.text-input { margin-bottom:14px; cursor:text; }
.text-input:focus, select:focus { border-color:var(--acid); box-shadow:0 0 0 1px rgba(244,182,61,.15); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.operator-field { display:grid; grid-template-columns:88px 1fr; align-items:center; gap:0 10px; margin:-3px 0 14px; }
.operator-field .field-label { margin:0; }
.operator-field select { height:36px; }
.operator-field small { grid-column:2; margin-top:5px; color:var(--operator-color, var(--cyan)); font-size:8px; letter-spacing:.8px; }
.secondary-fields { margin-top:12px; }
.toggle-row { display:flex; gap:15px; flex-wrap:wrap; margin:19px 0; }
.switch-label { display:flex; align-items:center; gap:7px; color:var(--soft); font-size:9px; cursor:pointer; }
.switch-label input { display:none; }
.switch-label i { position:relative; width:28px; height:14px; background:#080b0d; border:1px solid var(--line); }
.switch-label i::after { position:absolute; top:2px; left:2px; width:8px; height:8px; content:""; background:var(--soft); transition:.18s; }
.switch-label input:checked + i { border-color:rgba(102,228,216,.55); }
.switch-label input:checked + i::after { left:16px; background:var(--cyan); box-shadow:0 0 6px var(--cyan); }

.primary-button, .secondary-button, .checkpoint-actions button {
  width:100%;
  border:0;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:1.4px;
}

button:disabled { opacity: .36; cursor: not-allowed; }

.primary-button { display:flex; justify-content:space-between; align-items:center; height:50px; padding:0 17px; color:var(--ink); background:var(--acid); font-weight:900; transition:.18s ease; clip-path:polygon(0 0, 100% 0, 100% 72%, 96% 100%, 0 100%); }
.primary-button:hover { background:#ffd06e; transform:translateY(-2px); }
.primary-button b { font-size:9px; opacity:.65; }
.checkpoint-actions { display:flex; justify-content:space-between; align-items:center; margin-top:15px; }
.checkpoint-links { display:flex; align-items:center; gap:13px; }
.checkpoint-links button + button { padding-left:13px; border-left:1px solid var(--line-bright); }
.checkpoint-actions button { width:auto; padding:0; color:var(--cyan); background:none; font-size:8px; }
.checkpoint-actions button:hover { text-decoration:underline; }
.checkpoint-actions span { color:var(--soft); font-size:8px; }

.controls-card { grid-column:1 / -1; display:grid; grid-template-columns:120px 1fr; align-items:center; padding-top:17px; border-top:1px solid var(--line); }
.controls-card p { color:var(--acid); font-size:9px; letter-spacing:2px; }
.controls-card dl { display:flex; justify-content:space-between; margin:0; }
.controls-card dl div { padding:0 20px; border-left:1px solid var(--line); }
.controls-card dt { font-weight:800; font-size:10px; letter-spacing:1px; }
.controls-card dd { margin:4px 0 0; color:var(--soft); font-size:8px; }

#pause-screen { background:rgba(5,8,9,.78); backdrop-filter:blur(9px); }
.pause-card { width:min(440px, 90vw); text-align:center; }
.pause-card h2 { margin:6px 0 3px; font-family:var(--font-display); font-size:48px; font-weight:500; letter-spacing:2px; }
.pause-card > p:not(.eyebrow) { margin:0 0 22px; color:var(--soft); font-size:10px; letter-spacing:1px; }
.pause-card .eyebrow { justify-content:center; }
.pause-actions { display:grid; gap:7px; }
.checkpoint-transfer-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.secondary-button { height:37px; color:var(--soft); background:rgba(255,255,255,.035); border:1px solid var(--line); font-size:9px; transition:.16s; }
.secondary-button:hover { color:var(--paper); border-color:var(--acid); background:rgba(244,182,61,.06); }
.secondary-button.danger:hover { color:var(--danger); border-color:var(--danger); background:rgba(255,90,73,.06); }
.pause-card > small { display:block; margin-top:16px; color:#687572; font-size:8px; line-height:1.5; }

.respawn-screen { position:absolute; z-index:50; inset:0; display:grid; place-content:center; text-align:center; pointer-events:none; opacity:0; background:rgba(35,5,3,.42); transition:opacity .2s; }
.respawn-screen.show { opacity:1; }
.respawn-screen span { color:var(--danger); font-size:11px; letter-spacing:6px; }
.respawn-screen strong { margin-top:8px; font-family:var(--font-display); font-size:45px; font-weight:500; letter-spacing:2px; }
.respawn-screen b { color:var(--acid); }

@media (max-height: 720px) {
  .menu-grid { transform:scale(.88); }
  .armory { top:78px; transform:scale(.9); transform-origin:top right; }
  .top-hud { top:14px; }
  .combat-hud { bottom:15px; }
  .ability-tray { bottom:136px; transform:scale(.9); transform-origin:bottom left; }
  .rescue-objective { top:76px; transform:translateX(-50%) scale(.86); }
  .rescue-card img { width:180px; }
}

@media (max-width: 980px) {
  .menu-grid { gap:18px 35px; }
  .hero-copy h1 { font-size:90px; }
  .controls-card { display:none; }
  .mission-strip div { min-width:74px; padding-inline:10px; }
  .mission-strip .rescue-stat { display:block; }
  .hero-mascot { opacity:.2; right:0; }
}

@media (pointer: coarse), (max-width: 980px) {
  html, body, #game-shell, #game-canvas { touch-action:none; }
  #game-shell { min-width:0; min-height:0; cursor:auto; height:100dvh; }
  .scanlines { opacity:.12; }
  .vignette { box-shadow:inset 0 0 80px 12px rgba(0,0,0,.54); }
  .crosshair, .armory, .supply-callout, .perf-badge { display:none !important; }
  #game-shell.playing:not(.paused) .mobile-controls { display:flex; }

  .top-hud {
    top:max(7px, env(safe-area-inset-top));
    left:max(9px, env(safe-area-inset-left));
    right:max(9px, env(safe-area-inset-right));
    grid-template-columns:108px 1fr auto;
    gap:5px;
  }
  .brand-chip { gap:6px; }
  .brand-mark { width:28px; height:28px; font-size:15px; }
  .brand-chip strong { font-size:8px; letter-spacing:.7px; white-space:nowrap; }
  .brand-chip small { display:none; }
  .mission-strip { justify-self:end; height:31px; padding:0 3px; background:rgba(8,12,13,.7); }
  .mission-strip div { min-width:45px; padding:1px 5px 0; }
  .mission-strip div:nth-child(2), .mission-strip div:nth-child(4), .mission-strip div:nth-child(6) { display:none; }
  .mission-strip span { font-size:6px; letter-spacing:.8px; }
  .mission-strip strong { margin-top:2px; font-size:12px; }
  .top-actions .icon-button { display:none; }

  .rescue-objective { top:max(45px, calc(env(safe-area-inset-top) + 41px)); width:260px; min-height:45px; grid-template-columns:39px 1fr; padding:4px 9px 4px 5px; }
  .rescue-objective::after { right:8px; top:3px; font-size:20px; }
  .rescue-portrait { width:35px; height:35px; }
  .rescue-portrait img { width:39px; height:39px; }
  .rescue-copy { padding-left:7px; }
  .rescue-copy > span { display:none; }
  .rescue-copy > strong { margin:0 0 3px; font-size:8px; }
  .rescue-copy > small { margin-top:2px; font-size:6px; }
  .mission-progress { height:3px; }

  .combat-hud { left:max(9px, env(safe-area-inset-left)); right:max(9px, env(safe-area-inset-right)); bottom:126px; }
  .vitals-panel { width:185px; padding:7px 9px 6px; }
  .operator-line { gap:5px; font-size:7px; letter-spacing:.7px; }
  .operator-line b { font-size:6px; }
  .evolution-line { margin:4px 0 0 10px; font-size:6px; letter-spacing:.5px; white-space:nowrap; }
  .health-row { grid-template-columns:24px 1fr 25px; gap:5px; margin-top:6px; font-size:7px; }
  .health-row strong { font-size:12px; }
  .stat-pair { gap:8px; margin:4px 0 0 28px; font-size:6px; }
  .stat-pair b { font-size:8px; margin-left:2px; }
  .ammo-panel { min-width:120px; padding:7px 9px 7px; }
  .weapon-name { gap:4px; }
  .weapon-name strong { max-width:100px; overflow:hidden; text-overflow:ellipsis; font-size:10px; letter-spacing:.8px; white-space:nowrap; }
  .weapon-name span, .ammo-panel small { font-size:6px; }
  .ammo-readout { margin:3px 0 4px; }
  .ammo-readout strong { font-size:30px; }
  .ammo-readout span { font-size:10px; }

  .ability-tray { left:max(9px, env(safe-area-inset-left)); bottom:198px; gap:3px; }
  .ability-chip { width:175px; min-height:29px; grid-template-columns:20px 1fr auto; padding:4px 6px; }
  .ability-chip > b { width:16px; height:16px; font-size:7px; }
  .ability-chip span { font-size:7px; }
  .ability-chip span small { display:none; }
  .ability-chip > strong { font-size:11px; }
  .toast-region { bottom:235px; max-width:70vw; }
  .toast { padding:7px 10px; font-size:8px; }
  .wave-banner { top:33%; }
  .wave-banner strong { font-size:42px; }

  .rescue-card { width:min(520px, 92vw); padding:12px 20px 20px; }
  .rescue-card img { width:clamp(120px, 34vh, 190px); }
  .rescue-card p { margin:-8px 0 2px; font-size:10px; letter-spacing:3px; }
  .rescue-card h2 { font-size:clamp(38px, 9vw, 64px); }
  .reward-line { margin-top:10px; padding:6px 8px; font-size:7px; }
  .rescue-kicker { font-size:7px; letter-spacing:2px; }

  .overlay { display:block; overflow-y:auto; padding:max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); touch-action:pan-y; -webkit-overflow-scrolling:touch; }
  .overlay::after { display:none; }
  .menu-grid { width:100%; max-width:560px; min-height:100%; margin:auto; display:grid; grid-template-columns:1fr; grid-template-rows:auto; gap:16px; align-content:start; transform:none !important; }
  .hero-copy { padding:2px 2px 0; }
  .hero-copy h1 { margin:7px 0 5px; font-size:clamp(48px, 18vw, 78px); line-height:.78; letter-spacing:-2px; }
  .hero-mascot { right:4px; top:0; width:125px; height:125px; opacity:.2; }
  .lede { margin:14px 0 10px; font-size:11px; line-height:1.55; }
  .feature-tape { gap:5px; }
  .feature-tape span { padding:4px 6px; font-size:7px; }
  .setup-card { padding:18px; }
  .card-heading { padding-bottom:11px; margin-bottom:12px; }
  .text-input { margin-bottom:10px; }
  .toggle-row { margin:13px 0; gap:10px; }
  .controls-card { display:none; }
  .mobile-controls-card { display:grid; gap:5px; padding:12px 15px; border:1px solid rgba(95,255,225,.2); background:rgba(95,255,225,.035); }
  .mobile-controls-card p { margin:0; color:var(--acid); font-size:8px; letter-spacing:1.4px; }
  .mobile-controls-card span { color:var(--soft); font-size:8px; line-height:1.5; }
  #pause-screen { display:grid; place-items:center; padding:12px; }
  .pause-card { width:min(420px, 94vw); max-height:calc(100dvh - 24px); overflow-y:auto; padding:18px; touch-action:pan-y; }
  .pause-card h2 { font-size:36px; }
  .pause-card > p:not(.eyebrow) { margin-bottom:12px; }
  .pause-actions { gap:5px; }
  .secondary-button { height:33px; }
  .pause-card > small { margin-top:9px; }
}

@media (pointer: coarse) and (orientation: portrait), (max-width: 540px) and (orientation: portrait) {
  .mobile-controls { padding-inline:max(8px, env(safe-area-inset-left)); }
  .stick-ring { width:92px; height:92px; }
  .mobile-action-bar { position:absolute; left:50%; bottom:101px; transform:translateX(-50%); }
  .mobile-action-bar button { width:40px; height:40px; }
  .combat-hud { bottom:114px; }
  .vitals-panel { width:166px; }
  .ammo-panel { min-width:105px; }
  .ability-tray { bottom:188px; }
  .toast-region { bottom:225px; }
}

@media (pointer: coarse) and (max-height: 430px), (max-width: 980px) and (max-height: 430px) {
  .stick-ring { width:86px; height:86px; }
  .mobile-controls { bottom:max(3px, env(safe-area-inset-bottom)); }
  .mobile-action-bar button { width:39px; height:39px; }
  .combat-hud { bottom:101px; }
  .ability-tray { top:103px; bottom:auto; }
  .toast-region { bottom:154px; }
  .rescue-objective { width:235px; }
}