:root {
  color-scheme: dark;
  --ink: #132d35;
  --paper: #f6f0d9;
  --acid: #9cec4b;
  --acid-deep: #4ea52e;
  --orange: #ff8b45;
  --red: #ed4f49;
  --sky: #a9d8d5;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  display: grid;
  place-items: center;
  background: #081a20;
  color: var(--paper);
  font-family: "Arial Narrow", "Roboto Condensed", Impact, system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; }

.game-shell {
  width: min(100vw, calc(100dvh * 1.684), 1280px);
  height: min(100dvh, calc(100vw / 1.684), 760px);
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr);
  background: var(--ink);
  box-shadow: 0 0 70px #000b;
}

.hud {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: auto auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 3vw, 38px);
  padding: 6px 14px;
  background: #102a32;
  border-bottom: 2px solid #35515a;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.brand { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.brand-kicker { color: var(--orange); font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.brand h1 { margin: 0; color: var(--paper); font-size: clamp(18px, 2vw, 25px); line-height: 1; letter-spacing: .04em; }

.score-block { display: flex; flex-direction: column; }
.hud small { color: #91acb1; font-size: 8px; font-weight: 800; }
.score-block strong { color: var(--acid); font-size: 17px; font-variant-numeric: tabular-nums; line-height: 1.05; }

.threat-meters { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 2vw, 20px); }
.meter-block { min-width: 0; }
.meter-head { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.meter-head span { overflow: hidden; color: #9fb4b8; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.meter-track { height: 7px; overflow: hidden; border: 1px solid #79909666; background: #07171b; transform: skewX(-12deg); }
.meter-track span { display: block; width: 0; height: 100%; transition: width .2s; }
.suspicion-track span { background: linear-gradient(90deg, var(--acid), #ffd447 60%, var(--red)); }
.takeover-track span { background: linear-gradient(90deg, #65d9d1, #a5e84d 54%, #d54cba 82%, var(--red)); }
.takeover-track.danger { border-color: #e451b8; box-shadow: 0 0 8px #e451b877; }

.sound-button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #79909666;
  background: transparent;
  color: #a9bec1;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  cursor: pointer;
}

.game-viewport {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--sky);
  cursor: crosshair;
  touch-action: none;
}

.world {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: 50% 50%;
  will-change: transform;
  transition: transform 150ms cubic-bezier(.2,.8,.2,1);
}

.world.scoped { transition-duration: 110ms; }
.environment { position: absolute; pointer-events: none; -webkit-user-drag: none; }
.background { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fence { z-index: 8; left: 0; bottom: -1%; width: 100%; height: 22%; object-fit: cover; }
.hedge { z-index: 9; left: -1%; bottom: -2%; width: 102%; height: 17%; object-fit: cover; }

.lane { position: absolute; left: 0; width: 100%; height: 2px; opacity: .25; }
.lane-far { top: 52%; border-top: 2px dashed #425e5d; }
.lane-near { top: 73%; border-top: 2px dashed #425e5d; }
.entities, .effects { position: absolute; inset: 0; pointer-events: none; }
.entities { z-index: 4; }
.effects { z-index: 11; }

.pedestrian {
  position: absolute;
  width: 8.6%;
  aspect-ratio: 100 / 180;
  transform-origin: 50% 100%;
  will-change: left;
  filter: drop-shadow(0 5px 2px #23454a35);
}
.pedestrian.far { width: 7.3%; opacity: .96; }
.pedestrian img { display: block; width: 100%; height: 100%; pointer-events: none; }
.pedestrian.walking img { animation: pedestrian-bob .48s ease-in-out infinite alternate; }
.pedestrian.reverse img { transform: scaleX(-1); }
.pedestrian.reverse.walking img { animation-name: pedestrian-bob-reverse; }
.pedestrian.reacting { animation: person-flinch .32s ease-out 2; }
.pedestrian.saved { animation: person-confused .6s ease-in-out 2; }

.alien {
  position: absolute;
  width: 4.3%;
  aspect-ratio: 64 / 55;
  z-index: 7;
  transform-origin: 50% 80%;
  filter: drop-shadow(0 2px 1px #15321b88);
  will-change: left, top, transform;
}
.alien img { display: block; width: 100%; height: 100%; animation: alien-wobble .45s ease-in-out infinite alternate; }
.alien.hopper img { animation-duration: .3s; }
.alien.armored { filter: drop-shadow(0 2px 1px #111b2088) drop-shadow(0 0 2px #b9d1d4); }
.alien.armored img { animation-duration: .85s; }
.alien.airborne { z-index: 12; }
.alien.airborne img { animation: airborne-spin .48s linear infinite; }
.alien.charging { filter: drop-shadow(0 0 7px #ff3b34) drop-shadow(0 0 13px #ffdf53); }
.alien.charging::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 55%;
  width: 1600%;
  height: 2px;
  background: linear-gradient(90deg, #ff493f, transparent 78%);
  transform: rotate(24deg);
  transform-origin: left;
  animation: beam-flicker .13s infinite alternate;
}

.animal { position: absolute; z-index: 10; will-change: left, top; filter: drop-shadow(0 3px 1px #19343b55); }
.animal img { display: block; width: 100%; height: 100%; }
.animal.cat { width: 8.2%; }
.animal.pigeon { width: 5.3%; }
.animal.pigeon img { animation: bird-flap .34s ease-in-out infinite alternate; }

.speech {
  position: absolute;
  z-index: 15;
  max-width: 130px;
  padding: 6px 9px;
  border: 2px solid var(--ink);
  border-radius: 12px 12px 12px 2px;
  background: var(--paper);
  color: var(--ink);
  font-size: clamp(7px, .9vw, 11px);
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 2px 3px 0 #132d3555;
  animation: speech-pop .18s ease-out;
}

.splat { position: absolute; width: 1.1%; aspect-ratio: 1; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 2px #448a29; animation: splat-out .55s ease-out forwards; }
.armor-spark { position: absolute; width: 8px; height: 2px; background: #fff0a1; box-shadow: 0 0 5px #fff; animation: armor-spark .36s ease-out forwards; }
.score-pop { position: absolute; z-index: 20; color: #fff; font-size: clamp(12px, 2vw, 24px); font-weight: 900; text-shadow: 0 2px 0 #17371f, 0 0 7px #17371f; animation: score-rise .8s ease-out forwards; white-space: nowrap; }
.pellet { position: absolute; z-index: 30; width: 7px; height: 7px; margin: -3px; border: 2px solid #172a30; border-radius: 50%; background: #f8e8a9; box-shadow: 0 0 7px #fff; pointer-events: none; }
.tracer { position: absolute; z-index: 29; height: 2px; transform-origin: 0 50%; background: linear-gradient(90deg, transparent, #fff6a5dd); pointer-events: none; }

.scope-shade {
  position: absolute;
  z-index: 40;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle 25vmin at var(--aim-x, 50%) var(--aim-y, 50%), transparent 0 82%, #071015b8 84% 98%, #020709ed 100%);
  transition: opacity .12s;
}
.scope-shade.active { opacity: 1; }
.crosshair {
  position: absolute;
  z-index: 42;
  left: 50%;
  top: 50%;
  width: clamp(104px, 22vmin, 210px);
  height: clamp(104px, 22vmin, 210px);
  transform: translate(-50%, -50%) scale(.76);
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s, transform .15s ease-out;
  filter: drop-shadow(0 1px 1px #fff4);
}
.crosshair.active { opacity: .94; transform: translate(-50%, -50%) scale(1); }

.muzzle { position: absolute; z-index: 35; left: 50%; bottom: -2px; width: 44px; height: 66px; transform: translateX(-50%); pointer-events: none; }
.muzzle::before { content: ""; position: absolute; left: 16px; bottom: 0; width: 12px; height: 60px; border-radius: 8px 8px 0 0; background: linear-gradient(90deg, #25383c, #819197 50%, #25383c); box-shadow: 0 0 0 3px #0b1d22; }
.muzzle span { position: absolute; left: 15px; top: 0; width: 14px; height: 14px; border: 4px solid #0b1d22; border-radius: 50%; background: #071015; }
.muzzle.kick { animation: muzzle-kick .18s ease-out; }

.callout { position: absolute; z-index: 50; top: 13%; left: 50%; min-width: 180px; padding: 8px 14px; transform: translate(-50%, -8px) rotate(-1deg); opacity: 0; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 #132d3566; text-align: center; font-size: clamp(11px, 1.8vw, 19px); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
.callout.show { animation: callout .85s ease-out; }
.shooter-alert { position: absolute; z-index: 50; top: 14px; left: 50%; padding: 7px 13px; transform: translateX(-50%); opacity: 0; border: 2px solid #ff6a4c; background: #431d1bed; color: #ffd36d; font-size: clamp(9px, 1.4vw, 14px); font-weight: 900; letter-spacing: .12em; pointer-events: none; }
.shooter-alert.active { opacity: 1; animation: warning-pulse .45s infinite alternate; }
.hold-hint { position: absolute; z-index: 25; left: 50%; bottom: 13%; transform: translateX(-50%); padding: 7px 11px; border: 1px solid #fff5; background: #102a32d9; color: #d5e1df; font-size: clamp(8px, 1vw, 11px); letter-spacing: .08em; white-space: nowrap; pointer-events: none; transition: opacity .3s; }
.hold-hint b { color: var(--acid); }

.overlay { position: absolute; z-index: 80; inset: 0; display: grid; place-items: center; padding: 18px; background: #08161cdc; backdrop-filter: blur(4px); }
.overlay[hidden] { display: none; }
.card { width: min(470px, 100%); min-width: 0; max-height: 94%; overflow: auto; padding: clamp(18px, 4vw, 35px); border: 2px solid var(--paper); background: #102a32f2; box-shadow: 9px 10px 0 #07111699; text-align: center; }
.classified { color: var(--orange); font-size: 9px; font-weight: 900; letter-spacing: .2em; }
.card h2 { margin: 7px 0 9px; color: var(--paper); font-size: clamp(40px, 8vw, 76px); line-height: .9; text-transform: uppercase; letter-spacing: -.03em; }
.lead { margin: 0; color: #d4e2df; font-size: clamp(15px, 2.6vw, 23px); line-height: 1.25; }
.lead em { color: var(--acid); font-style: normal; }
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 22px 0; }
.rules span { min-width: 0; padding: 9px 5px; border: 1px solid #78909866; color: #cad8d6; font-size: 9px; text-transform: uppercase; }
.rules b { display: block; margin-bottom: 3px; color: var(--orange); font-size: 14px; }
.warning { margin: 0 0 18px; color: #ffb583; font-size: 12px; font-weight: 900; line-height: 1.45; text-transform: uppercase; }
.card button { width: 100%; min-height: 48px; border: 0; background: var(--acid); color: #173223; box-shadow: 4px 5px 0 #397427; font-size: 12px; font-weight: 900; letter-spacing: .1em; cursor: pointer; }
.card button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.card button:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 #397427; }
.card > small { display: block; margin-top: 12px; color: #718b90; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.stamp { display: inline-block; padding: 4px 9px; border: 3px solid var(--red); color: var(--red); font-size: 18px; font-weight: 900; letter-spacing: .15em; transform: rotate(-4deg); }
.gameover-card h2 { font-size: clamp(30px, 6vw, 55px); margin-top: 15px; }
.reason { margin: 0 auto 17px; max-width: 360px; min-height: 34px; color: #ffb583; font-size: clamp(12px, 2vw, 17px); font-weight: 900; text-transform: uppercase; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 0 16px; background: #5d747933; text-align: left; }
.stats div { display: flex; justify-content: space-between; padding: 7px 9px; background: #0d242b; }
.stats dt { color: #91a8ac; font-size: 9px; text-transform: uppercase; }
.stats dd { margin: 0; color: var(--paper); font-size: 12px; font-weight: 900; }
.stats .score-stat { grid-column: 1 / -1; background: #183b3b; }
.stats .score-stat dd { color: var(--acid); }
.rotate-note { display: none; }

@keyframes pedestrian-bob { to { transform: translateY(-3px) rotate(.5deg); } }
@keyframes pedestrian-bob-reverse { to { transform: scaleX(-1) translateY(-3px) rotate(.5deg); } }
@keyframes person-flinch { 50% { transform: rotate(-7deg) translateY(-5px); } }
@keyframes person-confused { 30% { transform: rotate(-3deg); } 70% { transform: rotate(3deg); } }
@keyframes alien-wobble { from { transform: rotate(-5deg) scaleY(.95); } to { transform: rotate(5deg) scale(1.03,.97); } }
@keyframes airborne-spin { to { transform: rotate(360deg) scale(1.1,.9); } }
@keyframes bird-flap { to { transform: scaleY(.78) rotate(-3deg); } }
@keyframes beam-flicker { to { opacity: .35; transform: rotate(20deg); } }
@keyframes speech-pop { from { transform: scale(.2) rotate(-5deg); opacity: 0; } }
@keyframes splat-out { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
@keyframes armor-spark { to { transform: translate(var(--dx), var(--dy)) rotate(var(--spin)); opacity: 0; } }
@keyframes score-rise { to { transform: translateY(-55px) rotate(-3deg); opacity: 0; } }
@keyframes muzzle-kick { 30% { transform: translateX(-50%) translateY(9px) rotate(2deg); } }
@keyframes callout { 0% { opacity: 0; transform: translate(-50%, -8px) scale(.8) rotate(-1deg); } 15%, 75% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(-1deg); } 100% { opacity: 0; transform: translate(-50%, -12px) scale(1.06) rotate(-1deg); } }
@keyframes warning-pulse { to { filter: brightness(1.5); transform: translateX(-50%) scale(1.04); } }

@media (max-width: 720px) {
  .game-shell { grid-template-rows: 45px minmax(0, 1fr); }
  .hud { grid-template-columns: auto auto 1fr; gap: 9px; padding-inline: 8px; }
  .brand-kicker { display: none; }
  .sound-button { position: absolute; right: 5px; bottom: -32px; z-index: 60; width: 31px; min-height: 27px; padding: 0; overflow: hidden; color: transparent; }
  .sound-button::after { content: "♪"; position: absolute; inset: 0; display: grid; place-items: center; color: #d1dcda; font-size: 14px; }
  .sound-button[aria-pressed="true"]::after { content: "×"; color: #ff8b7d; }
  .threat-meters { gap: 6px; }
  .meter-head span { display: none; }
  .meter-head small { font-size: 6px; }
  .pedestrian { width: 10%; }
  .pedestrian.far { width: 8.5%; }
  .alien { width: 5.2%; }
  .animal.cat { width: 10%; }
  .animal.pigeon { width: 6.5%; }
}

@media (orientation: portrait) and (max-width: 600px) {
  .overlay { position: fixed; }
  .card { max-height: calc(100dvh - 36px); }
  .rotate-note { display: block; position: fixed; left: 50%; top: calc(50% + min(30vw, 200px) + 18px); width: 80%; transform: translateX(-50%); color: #729097; text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
}

@media (max-height: 520px) {
  .game-shell { height: 100dvh; grid-template-rows: 40px minmax(0, 1fr); }
  .hud { padding-block: 3px; }
  .card { padding: 14px 22px; }
  .card h2 { font-size: 40px; }
  .lead { font-size: 14px; }
  .rules { margin: 10px 0; }
  .warning { margin-bottom: 10px; }
  .card button { min-height: 39px; }
  .stats div { padding-block: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}