:root {
  --red: #ff2a2a;
  --red-dim: #c81e1e;
  --ink: #e8ecef;
  --muted: #9aa7b0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #05070a; color: var(--ink); font-family: "Segoe UI", Helvetica, Arial, sans-serif; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: none; }
#view.menu { cursor: default; }

#fx { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
.vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.62) 100%),
    radial-gradient(ellipse at 50% 120%, rgba(255, 50, 8, .22), transparent 52%);
}
#emberglow {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(255, 40, 0, .16) 100%);
  mix-blend-mode: screen;
  animation: ember-pulse 2.8s ease-in-out infinite;
}
@keyframes ember-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
.scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(255,40,40,.035) 2px 3px);
  mix-blend-mode: overlay;
  animation: scan-move 4.5s linear infinite;
}
@keyframes scan-move {
  from { background-position: 0 0; }
  to { background-position: 0 12px; }
}
.grain {
  position: absolute; inset: 0; opacity: .12;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
  animation: grain-shift 0.18s steps(2) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-2%, 1%); }
}
#hitflash {
  position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 30%, rgba(180,0,0,.55));
  opacity: 0; transition: opacity .12s;
}
#hitflash.on { opacity: 1; animation: hurt-shake 0.22s ease-out; }
@keyframes hurt-shake {
  0% { transform: translate(-8px, 3px); }
  25% { transform: translate(7px, -4px); }
  50% { transform: translate(-5px, 2px); }
  100% { transform: none; }
}
#bolt {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(180, 220, 255, .28), transparent 42%);
}
#bolt.on { animation: bolt-flash 0.18s ease-out; }
@keyframes bolt-flash {
  0% { opacity: .9; }
  40% { opacity: .15; }
  70% { opacity: .45; }
  100% { opacity: 0; }
}
#muzzle {
  position: absolute;
  right: 16%;
  bottom: 16%;
  width: 140px;
  height: 140px;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle, #fff6d8 0 12%, #ffb24a 22%, rgba(255, 70, 20, 0.55) 42%, transparent 68%);
  filter: saturate(1.2);
  transform-origin: 50% 50%;
}
#muzzle.on { animation: muzzle-pop 0.1s ease-out; }
@keyframes muzzle-pop {
  0% { opacity: 1; transform: scale(0.55) rotate(-8deg); }
  40% { opacity: 1; transform: scale(1.25) rotate(6deg); }
  100% { opacity: 0; transform: scale(0.7) rotate(0); }
}

#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.hud-top {
  position: absolute; top: 18px; left: 18px; right: 18px;
  display: flex; gap: 12px; justify-content: space-between;
}
.chip {
  min-width: 168px; padding: 10px 14px;
  border: 1px solid rgba(255,42,42,.45);
  background: linear-gradient(180deg, rgba(20,4,4,.72), rgba(8,2,2,.55));
  box-shadow: 0 0 24px rgba(255,30,30,.12);
  backdrop-filter: blur(6px);
  animation: chip-in 0.45s ease-out;
}
.chip.pop { animation: chip-pop 0.35s ease-out; }
.chip-ammo.is-reload strong { animation: ammo-blink 0.45s steps(2) infinite; }
@keyframes chip-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
@keyframes chip-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); box-shadow: 0 0 28px rgba(255,42,42,.45); }
  100% { transform: scale(1); }
}
@keyframes ammo-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.chip small { display: block; letter-spacing: .12em; font-size: 9px; color: var(--red); max-width: 22ch; line-height: 1.3; }
.chip strong { font-size: 18px; font-weight: 800; letter-spacing: .04em; }
.chip-ammo { text-align: right; }

.reticle { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; }
.reticle i { position: absolute; background: var(--red); box-shadow: 0 0 8px var(--red); }
.reticle .r-n, .reticle .r-s { left: 50%; width: 2px; height: 12px; margin-left: -1px; }
.reticle .r-n { top: 0; } .reticle .r-s { bottom: 0; }
.reticle .r-e, .reticle .r-w { top: 50%; height: 2px; width: 12px; margin-top: -1px; }
.reticle .r-e { right: 0; } .reticle .r-w { left: 0; }
.reticle b {
  position: absolute; inset: 16px; border: 1px solid rgba(255,42,42,.35); border-radius: 50%;
  animation: reticle-spin 8s linear infinite;
}
.reticle.lock b { border-color: #fff; box-shadow: 0 0 12px var(--red); animation: reticle-lock 0.6s ease-in-out infinite; }
.reticle.lock i { background: #fff; }
@keyframes reticle-spin {
  to { transform: rotate(360deg); }
}
@keyframes reticle-lock {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.82); opacity: .7; }
}
#radar {
  position: absolute; left: 18px; top: 88px;
  width: 92px; height: 92px;
  border: 1px solid rgba(255,42,42,.5);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(80,0,0,.35), rgba(8,2,2,.7));
  box-shadow: 0 0 0 1px rgba(255,42,42,.15), inset 0 0 18px rgba(255,40,40,.2);
  overflow: hidden;
}
#radar .sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 78%, rgba(255,42,42,.35) 92%, transparent 100%);
  animation: radar-sweep 2.4s linear infinite;
}
@keyframes radar-sweep { to { transform: rotate(360deg); } }
#radar i {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  background: #fff; border-radius: 50%; box-shadow: 0 0 8px #fff;
  z-index: 1;
}
#radar .blip {
  position: absolute; width: 7px; height: 7px; margin: -3px 0 0 -3px;
  background: var(--red); border-radius: 50%; box-shadow: 0 0 8px var(--red);
  animation: blip-pulse 0.9s ease-in-out infinite;
}
@keyframes blip-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.55); opacity: .55; }
}
#hitmark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: #fff; font-size: 28px; font-weight: 900; text-shadow: 0 0 12px var(--red);
}
#hitmark:not([hidden]) { animation: hitmark-pop 0.16s ease-out; }
@keyframes hitmark-pop {
  0% { transform: translate(-50%, -50%) scale(0.4) rotate(-12deg); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.35) rotate(8deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0); }
}
#range {
  position: absolute; left: 50%; top: calc(50% + 36px); transform: translateX(-50%);
  font-size: 11px; letter-spacing: .2em; color: var(--red); font-variant-numeric: tabular-nums;
}
#wave-toast {
  position: absolute; left: 50%; top: 22%; transform: translateX(-50%);
  padding: 10px 22px;
  border: 1px solid rgba(255,42,42,.7);
  background: rgba(8,2,2,.72);
  letter-spacing: .28em; font-weight: 800; font-size: 18px;
  box-shadow: 0 0 40px rgba(255,42,42,.25);
}
#wave-toast:not([hidden]) { animation: wave-toast 1.8s ease-out forwards; }
@keyframes wave-toast {
  0% { opacity: 0; transform: translate(-50%, -16px) scale(0.92); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -8px); }
}

#weapon {
  position: absolute; right: 1%; bottom: -8%;
  width: min(360px, 36vw);
  max-height: 32vh;
  object-fit: contain;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at 62% 78%, #000 38%, transparent 70%);
  filter: contrast(1.08) saturate(1.05);
  transform-origin: 80% 90%;
  z-index: 3;
  animation: weap-idle 2.6s ease-in-out infinite;
}
#weapon.kick { animation: kick 0.14s ease-out; }
#weapon.reload { animation: weap-reload 0.72s ease-in-out; }
#hud.is-run #weapon { animation: weap-run 0.38s ease-in-out infinite; }
#hud.is-run #weapon.kick { animation: kick 0.14s ease-out; }
#hud.is-run #weapon.reload { animation: weap-reload 0.72s ease-in-out; }
@keyframes weap-idle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-8px, 10px) rotate(-0.8deg); }
}
@keyframes weap-run {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-14px, 16px) rotate(-1.4deg); }
}
@keyframes kick {
  0% { transform: translate(22px, 28px) rotate(3.2deg); filter: contrast(1.2) saturate(1.3) brightness(1.15); }
  100% { transform: none; }
}
@keyframes weap-reload {
  0% { transform: none; }
  35% { transform: translate(8px, 72px) rotate(11deg); }
  70% { transform: translate(-6px, 28px) rotate(-4deg); }
  100% { transform: none; }
}

.hud-bot {
  position: absolute; left: 18px; right: 18px; bottom: 16px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.hp { min-width: 240px; }
.hp span { font-size: 10px; letter-spacing: .2em; color: var(--red); }
.hp-bar { height: 10px; margin: 6px 0; background: #1a0a0a; border: 1px solid var(--red-dim); }
.hp-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #7a1010, var(--red)); transition: width 0.18s ease-out; }
.hp em { font-style: normal; font-weight: 800; }
.hint { font-size: 12px; color: var(--muted); text-align: right; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes bg-drift {
  from { transform: scale(1.04) translate(0, 0); }
  to { transform: scale(1.1) translate(-1.5%, 1%); }
}

.panel {
  position: fixed; inset: 0; z-index: 8;
  display: grid; place-items: center; overflow: hidden;
}
.panel[hidden],
#hud[hidden] {
  display: none !important;
}
.panel-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.1) contrast(1.08); transform: scale(1.04);
  animation: bg-drift 18s ease-in-out infinite alternate;
}
.panel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(4,6,8,.88) 0%, rgba(4,6,8,.45) 55%, rgba(4,6,8,.7) 100%);
}
.panel-inner { position: relative; z-index: 1; width: min(680px, 92vw); padding: 28px; animation: panel-in 0.55s ease-out; }
.eyebrow { color: var(--red); letter-spacing: .28em; font-size: 11px; text-transform: uppercase; margin-bottom: 10px; }
h1 { font-size: clamp(48px, 9vw, 92px); line-height: .9; letter-spacing: -.03em; font-weight: 900; }
h1 span { color: var(--red); }
h2 { font-size: 42px; margin-bottom: 12px; }
.lead { margin: 16px 0 22px; color: #d5dce0; font-size: 18px; max-width: 42ch; }
.howto { list-style: none; margin: 0 0 22px; color: var(--muted); display: grid; gap: 8px; }
.howto kbd {
  display: inline-block; padding: 1px 7px; border: 1px solid #445; border-radius: 4px;
  color: #fff; font-size: 12px;
}
.cta {
  appearance: none; border: 0; cursor: pointer;
  background: var(--red); color: #fff; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 16px 22px; font-size: 14px;
  box-shadow: 0 0 32px rgba(255,42,42,.35);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cta:disabled { opacity: .55; cursor: wait; box-shadow: none; }
.cta.subcta {
  display: block;
  margin-top: 12px;
  background: transparent;
  color: #fff;
  box-shadow: none;
  border: 1px solid rgba(255, 42, 42, 0.45);
}
.legal { margin-top: 18px; font-size: 12px; color: #7b868d; max-width: 52ch; }
#end-text { margin: 0 0 22px; color: #d5dce0; font-size: 18px; max-width: 42ch; }
.sub { background: rgba(5,7,10,.72); }
.sub .panel-bg { opacity: .35; }

@media (max-width: 720px) {
  #weapon { width: 120vw; right: -28%; }
  .hud-top { flex-wrap: wrap; }
  .hint { display: none; }
}
:root {
  --red: #ff2a2a;
  --red-dim: #c81e1e;
  --ink: #e8ecef;
  --muted: #9aa7b0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #05070a; color: var(--ink); font-family: "Segoe UI", Helvetica, Arial, sans-serif; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: none; }
#view.menu { cursor: default; }

#fx { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
.vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.62) 100%),
    radial-gradient(ellipse at 50% 120%, rgba(255, 50, 8, .22), transparent 52%);
}
#emberglow {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(255, 40, 0, .16) 100%);
  mix-blend-mode: screen;
  animation: ember-pulse 2.8s ease-in-out infinite;
}
@keyframes ember-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
.scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(255,40,40,.035) 2px 3px);
  mix-blend-mode: overlay;
  animation: scan-move 4.5s linear infinite;
}
@keyframes scan-move {
  from { background-position: 0 0; }
  to { background-position: 0 12px; }
}
.grain {
  position: absolute; inset: 0; opacity: .12;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
  animation: grain-shift 0.18s steps(2) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-2%, 1%); }
}
#hitflash {
  position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 30%, rgba(180,0,0,.55));
  opacity: 0; transition: opacity .12s;
}
#hitflash.on { opacity: 1; animation: hurt-shake 0.22s ease-out; }
@keyframes hurt-shake {
  0% { transform: translate(-8px, 3px); }
  25% { transform: translate(7px, -4px); }
  50% { transform: translate(-5px, 2px); }
  100% { transform: none; }
}
#bolt {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(180, 220, 255, .28), transparent 42%);
}
#bolt.on { animation: bolt-flash 0.18s ease-out; }
@keyframes bolt-flash {
  0% { opacity: .9; }
  40% { opacity: .15; }
  70% { opacity: .45; }
  100% { opacity: 0; }
}
#muzzle {
  position: absolute;
  right: 16%;
  bottom: 16%;
  width: 140px;
  height: 140px;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle, #fff6d8 0 12%, #ffb24a 22%, rgba(255, 70, 20, 0.55) 42%, transparent 68%);
  filter: saturate(1.2);
  transform-origin: 50% 50%;
}
#muzzle.on { animation: muzzle-pop 0.1s ease-out; }
@keyframes muzzle-pop {
  0% { opacity: 1; transform: scale(0.55) rotate(-8deg); }
  40% { opacity: 1; transform: scale(1.25) rotate(6deg); }
  100% { opacity: 0; transform: scale(0.7) rotate(0); }
}

#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.hud-top {
  position: absolute; top: 18px; left: 18px; right: 18px;
  display: flex; gap: 12px; justify-content: space-between;
}
.chip {
  min-width: 168px; padding: 10px 14px;
  border: 1px solid rgba(255,42,42,.45);
  background: linear-gradient(180deg, rgba(20,4,4,.72), rgba(8,2,2,.55));
  box-shadow: 0 0 24px rgba(255,30,30,.12);
  backdrop-filter: blur(6px);
  animation: chip-in 0.45s ease-out;
}
.chip.pop { animation: chip-pop 0.35s ease-out; }
.chip-ammo.is-reload strong { animation: ammo-blink 0.45s steps(2) infinite; }
@keyframes chip-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
@keyframes chip-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); box-shadow: 0 0 28px rgba(255,42,42,.45); }
  100% { transform: scale(1); }
}
@keyframes ammo-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.chip small { display: block; letter-spacing: .12em; font-size: 9px; color: var(--red); max-width: 22ch; line-height: 1.3; }
.chip strong { font-size: 18px; font-weight: 800; letter-spacing: .04em; }
.chip-ammo { text-align: right; }

.reticle { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; }
.reticle i { position: absolute; background: var(--red); box-shadow: 0 0 8px var(--red); }
.reticle .r-n, .reticle .r-s { left: 50%; width: 2px; height: 12px; margin-left: -1px; }
.reticle .r-n { top: 0; } .reticle .r-s { bottom: 0; }
.reticle .r-e, .reticle .r-w { top: 50%; height: 2px; width: 12px; margin-top: -1px; }
.reticle .r-e { right: 0; } .reticle .r-w { left: 0; }
.reticle b {
  position: absolute; inset: 16px; border: 1px solid rgba(255,42,42,.35); border-radius: 50%;
  animation: reticle-spin 8s linear infinite;
}
.reticle.lock b { border-color: #fff; box-shadow: 0 0 12px var(--red); animation: reticle-lock 0.6s ease-in-out infinite; }
.reticle.lock i { background: #fff; }
@keyframes reticle-spin {
  to { transform: rotate(360deg); }
}
@keyframes reticle-lock {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.82); opacity: .7; }
}
#radar {
  position: absolute; left: 18px; top: 88px;
  width: 92px; height: 92px;
  border: 1px solid rgba(255,42,42,.5);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(80,0,0,.35), rgba(8,2,2,.7));
  box-shadow: 0 0 0 1px rgba(255,42,42,.15), inset 0 0 18px rgba(255,40,40,.2);
  overflow: hidden;
}
#radar .sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 78%, rgba(255,42,42,.35) 92%, transparent 100%);
  animation: radar-sweep 2.4s linear infinite;
}
@keyframes radar-sweep { to { transform: rotate(360deg); } }
#radar i {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  background: #fff; border-radius: 50%; box-shadow: 0 0 8px #fff;
  z-index: 1;
}
#radar .blip {
  position: absolute; width: 7px; height: 7px; margin: -3px 0 0 -3px;
  background: var(--red); border-radius: 50%; box-shadow: 0 0 8px var(--red);
  animation: blip-pulse 0.9s ease-in-out infinite;
}
@keyframes blip-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.55); opacity: .55; }
}
#hitmark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: #fff; font-size: 28px; font-weight: 900; text-shadow: 0 0 12px var(--red);
}
#hitmark:not([hidden]) { animation: hitmark-pop 0.16s ease-out; }
@keyframes hitmark-pop {
  0% { transform: translate(-50%, -50%) scale(0.4) rotate(-12deg); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.35) rotate(8deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0); }
}
#range {
  position: absolute; left: 50%; top: calc(50% + 36px); transform: translateX(-50%);
  font-size: 11px; letter-spacing: .2em; color: var(--red); font-variant-numeric: tabular-nums;
}
#wave-toast {
  position: absolute; left: 50%; top: 22%; transform: translateX(-50%);
  padding: 10px 22px;
  border: 1px solid rgba(255,42,42,.7);
  background: rgba(8,2,2,.72);
  letter-spacing: .28em; font-weight: 800; font-size: 18px;
  box-shadow: 0 0 40px rgba(255,42,42,.25);
}
#wave-toast:not([hidden]) { animation: wave-toast 1.8s ease-out forwards; }
@keyframes wave-toast {
  0% { opacity: 0; transform: translate(-50%, -16px) scale(0.92); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -8px); }
}

#weapon {
  position: absolute; right: 1%; bottom: -8%;
  width: min(360px, 36vw);
  max-height: 32vh;
  object-fit: contain;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at 62% 78%, #000 38%, transparent 70%);
  filter: contrast(1.08) saturate(1.05);
  transform-origin: 80% 90%;
  z-index: 3;
  animation: weap-idle 2.6s ease-in-out infinite;
}
#weapon.kick { animation: kick 0.14s ease-out; }
#weapon.reload { animation: weap-reload 0.72s ease-in-out; }
#hud.is-run #weapon { animation: weap-run 0.38s ease-in-out infinite; }
#hud.is-run #weapon.kick { animation: kick 0.14s ease-out; }
#hud.is-run #weapon.reload { animation: weap-reload 0.72s ease-in-out; }
@keyframes weap-idle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-8px, 10px) rotate(-0.8deg); }
}
@keyframes weap-run {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-14px, 16px) rotate(-1.4deg); }
}
@keyframes kick {
  0% { transform: translate(22px, 28px) rotate(3.2deg); filter: contrast(1.2) saturate(1.3) brightness(1.15); }
  100% { transform: none; }
}
@keyframes weap-reload {
  0% { transform: none; }
  35% { transform: translate(8px, 72px) rotate(11deg); }
  70% { transform: translate(-6px, 28px) rotate(-4deg); }
  100% { transform: none; }
}

.hud-bot {
  position: absolute; left: 18px; right: 18px; bottom: 16px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.hp { min-width: 240px; }
.hp span { font-size: 10px; letter-spacing: .2em; color: var(--red); }
.hp-bar { height: 10px; margin: 6px 0; background: #1a0a0a; border: 1px solid var(--red-dim); }
.hp-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #7a1010, var(--red)); transition: width 0.18s ease-out; }
.hp em { font-style: normal; font-weight: 800; }
.hint { font-size: 12px; color: var(--muted); text-align: right; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes bg-drift {
  from { transform: scale(1.04) translate(0, 0); }
  to { transform: scale(1.1) translate(-1.5%, 1%); }
}

.panel {
  position: fixed; inset: 0; z-index: 8;
  display: grid; place-items: center; overflow: hidden;
}
.panel[hidden],
#hud[hidden] {
  display: none !important;
}
.panel-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.1) contrast(1.08); transform: scale(1.04);
  animation: bg-drift 18s ease-in-out infinite alternate;
}
.panel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(4,6,8,.88) 0%, rgba(4,6,8,.45) 55%, rgba(4,6,8,.7) 100%);
}
.panel-inner { position: relative; z-index: 1; width: min(680px, 92vw); padding: 28px; animation: panel-in 0.55s ease-out; }
.eyebrow { color: var(--red); letter-spacing: .28em; font-size: 11px; text-transform: uppercase; margin-bottom: 10px; }
h1 { font-size: clamp(48px, 9vw, 92px); line-height: .9; letter-spacing: -.03em; font-weight: 900; }
h1 span { color: var(--red); }
h2 { font-size: 42px; margin-bottom: 12px; }
.lead { margin: 16px 0 22px; color: #d5dce0; font-size: 18px; max-width: 42ch; }
.howto { list-style: none; margin: 0 0 22px; color: var(--muted); display: grid; gap: 8px; }
.howto kbd {
  display: inline-block; padding: 1px 7px; border: 1px solid #445; border-radius: 4px;
  color: #fff; font-size: 12px;
}
.cta {
  appearance: none; border: 0; cursor: pointer;
  background: var(--red); color: #fff; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 16px 22px; font-size: 14px;
  box-shadow: 0 0 32px rgba(255,42,42,.35);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cta:disabled { opacity: .55; cursor: wait; box-shadow: none; }
.cta.subcta {
  display: block;
  margin-top: 12px;
  background: transparent;
  color: #fff;
  box-shadow: none;
  border: 1px solid rgba(255, 42, 42, 0.45);
}
.legal { margin-top: 18px; font-size: 12px; color: #7b868d; max-width: 52ch; }
#end-text { margin: 0 0 22px; color: #d5dce0; font-size: 18px; max-width: 42ch; }
.sub { background: rgba(5,7,10,.72); }
.sub .panel-bg { opacity: .35; }

@media (max-width: 720px) {
  #weapon { width: 120vw; right: -28%; }
  .hud-top { flex-wrap: wrap; }
  .hint { display: none; }
}