:root {
  color-scheme: dark;
  --green: #9eff47;
  --toxic: #39f781;
  --orange: #ff9e2b;
  --red: #ff3b32;
  --blue: #21d8ff;
  --panel: rgba(4, 15, 29, .88);
  --line: rgba(119, 210, 255, .28);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #020711;
}

button {
  font: inherit;
}

.game-shell {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(15, 77, 112, .32), transparent 54%),
    #020711;
}

.game {
  position: relative;
  width: min(100vw, 177.7778vh);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: #07182b;
  box-shadow: 0 0 7vmin #000;
}

.battlefield,
.night-vignette,
.world {
  position: absolute;
  inset: 0;
}

.battlefield {
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: opacity .35s ease, filter .7s ease;
}

.night-vignette {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 7, 24, .22), transparent 18%, transparent 70%, rgba(0, 5, 14, .52)),
    radial-gradient(ellipse at center, transparent 48%, rgba(0, 4, 13, .58) 108%);
}

.top-hud {
  position: absolute;
  z-index: 100;
  inset: 0 0 auto;
  height: 12%;
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  align-items: start;
  gap: 1%;
  padding: 1.1% 1.25%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(1, 8, 20, .94), rgba(1, 8, 20, .58) 62%, transparent);
}

.brand-lockup {
  align-self: start;
  line-height: .78;
  filter: drop-shadow(0 .24rem 0 rgba(0, 0, 0, .7));
}

.brand-kicker {
  display: block;
  margin: 0 0 .2em .18em;
  color: var(--orange);
  font-size: clamp(.48rem, .75vw, .88rem);
  letter-spacing: .28em;
}

.brand-lockup h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.3rem, 2.8vw, 3.15rem);
  line-height: .82;
  letter-spacing: -.05em;
  transform: skew(-7deg);
  text-shadow: .05em .05em 0 #061423, .09em .09em 0 var(--red);
}

.brand-lockup b {
  color: var(--green);
  font-weight: inherit;
}

.squad-badge {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin: .55em 0 0 .18em;
  padding: .3em .58em;
  color: #d7e9f0;
  font-size: clamp(.34rem, .47vw, .56rem);
  line-height: 1;
  letter-spacing: .13em;
  border: 1px solid rgba(107, 225, 255, .28);
  border-radius: 999px;
  background: rgba(5, 20, 33, .78);
}

.squad-badge i,
.player-tag i,
.crew-card i {
  width: .62em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--toxic);
  box-shadow: 0 0 .48em var(--toxic);
}

.zone-jump {
  position: relative;
  display: block;
  margin: .45em 0 0 .18em;
  padding: .38em .72em .34em;
  cursor: pointer;
  pointer-events: auto;
  color: #fff3b8;
  font-size: clamp(.38rem, .55vw, .66rem);
  letter-spacing: .12em;
  border: 1px solid rgba(255, 185, 58, .52);
  border-radius: .24rem;
  background: linear-gradient(180deg, rgba(112, 50, 16, .88), rgba(30, 14, 13, .9));
  box-shadow: inset 0 0 .45rem rgba(255, 177, 53, .1), 0 .18rem .45rem rgba(0, 0, 0, .48);
}

.zone-jump:hover {
  color: #fff;
  border-color: #ffd261;
  filter: brightness(1.18);
}

.zone-jump:disabled {
  cursor: wait;
  opacity: .45;
}

.game.scene-carnival {
  --blue: #ff7957;
  --orange: #ffd267;
  --red: #ff315a;
  --panel: rgba(35, 8, 29, .9);
  --line: rgba(255, 126, 89, .32);
  background: #351127;
}

.game.scene-carnival .night-vignette {
  background:
    linear-gradient(180deg, rgba(50, 7, 43, .18), rgba(124, 22, 54, .07) 35%, transparent 62%, rgba(23, 4, 24, .48)),
    radial-gradient(circle at 14% 42%, rgba(255, 132, 42, .12), transparent 29%),
    radial-gradient(circle at 86% 34%, rgba(255, 44, 78, .13), transparent 32%),
    radial-gradient(ellipse at center, transparent 52%, rgba(42, 4, 35, .48) 108%);
}

.game.scene-carnival .top-hud {
  background: linear-gradient(180deg, rgba(35, 5, 32, .94), rgba(45, 8, 35, .48) 62%, transparent);
}

.game.scene-carnival .fog-a {
  background: radial-gradient(ellipse, rgba(255, 48, 115, .38), rgba(151, 19, 101, .13) 48%, transparent 74%);
}

.game.scene-carnival .fog-b {
  background: radial-gradient(ellipse, rgba(155, 255, 46, .35), rgba(90, 151, 20, .12) 48%, transparent 74%);
}

.game.scene-carnival .warning-line {
  border-color: rgba(255, 159, 58, .86);
  filter: drop-shadow(0 0 .3rem #ff5b37);
}

.mission-card {
  width: 75%;
  justify-self: center;
  padding: .5% 3% 1.1%;
  border: 1px solid rgba(108, 226, 255, .32);
  border-top: 2px solid var(--blue);
  border-radius: 0 0 .55rem .55rem;
  background: linear-gradient(180deg, rgba(9, 31, 53, .94), rgba(3, 14, 28, .86));
  box-shadow: 0 .3rem 1rem rgba(0, 0, 0, .42), inset 0 0 .7rem rgba(33, 216, 255, .07);
}

.mission-label {
  display: block;
  color: #78dfff;
  font-size: clamp(.38rem, .57vw, .7rem);
  letter-spacing: .25em;
}

.mission-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4%;
}

.stage-clock {
  display: flex;
  align-items: baseline;
  gap: .65em;
  white-space: nowrap;
}

.stage-clock b {
  color: #8eaabb;
  font-size: clamp(.34rem, .46vw, .54rem);
  font-weight: inherit;
  letter-spacing: .15em;
}

.stage-clock strong {
  color: #fff05b;
  font-size: clamp(.58rem, .82vw, .96rem);
  line-height: 1;
  letter-spacing: .08em;
  text-shadow: 0 0 .45rem rgba(255, 216, 58, .42);
}

.game.boss-window .stage-clock b,
.game.boss-window .stage-clock strong {
  color: #ffad3c;
}

.game.evac-window .stage-clock b,
.game.evac-window .stage-clock strong {
  color: #ff6e67;
  animation: stageClockPulse .58s ease-in-out infinite alternate;
}

.mission-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2%;
  margin: .3% 0 1.2%;
}

.mission-icon {
  color: var(--toxic);
  font-family: system-ui, sans-serif;
  font-size: clamp(.85rem, 1.4vw, 1.6rem);
  filter: drop-shadow(0 0 .35rem rgba(57, 247, 129, .7));
}

.mission-copy {
  overflow: hidden;
  color: #f2f8ff;
  font-family: "Arial Black", system-ui, sans-serif;
  font-size: clamp(.5rem, .74vw, .9rem);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mission-row strong {
  color: var(--orange);
  font-size: clamp(.65rem, .96vw, 1.08rem);
}

.mission-track {
  height: clamp(3px, .35vw, 6px);
  overflow: hidden;
  border-radius: 999px;
  background: rgba(125, 174, 198, .2);
}

.mission-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #29d86a, #c6ff4a);
  box-shadow: 0 0 .5rem var(--toxic);
  transition: width .3s ease;
}

.status-stack {
  display: flex;
  justify-content: flex-end;
  gap: 1.6%;
}

.status-pill {
  min-width: 29.5%;
  padding: 2.2% 4%;
  text-align: right;
  border: 1px solid rgba(255, 190, 61, .36);
  border-radius: .35rem;
  background: linear-gradient(180deg, rgba(13, 29, 44, .94), rgba(3, 12, 24, .94));
  box-shadow: inset 0 0 .7rem rgba(255, 150, 34, .08), 0 .2rem .7rem rgba(0, 0, 0, .48);
}

.status-pill span,
.status-pill strong {
  display: block;
}

.status-pill span {
  color: #8eaabb;
  font-size: clamp(.38rem, .53vw, .62rem);
  letter-spacing: .13em;
}

.status-pill strong {
  color: #ffe75c;
  font-size: clamp(.7rem, 1.15vw, 1.3rem);
  letter-spacing: .04em;
  text-shadow: 0 0 .5rem rgba(255, 197, 48, .35);
}

.status-pill.integrity strong {
  color: var(--toxic);
}

.status-pill.kills strong {
  color: #70e8ff;
}

.world {
  z-index: 5;
  overflow: hidden;
}

.zombie-layer,
.foreground-wall,
.projectile-layer,
.effect-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.zombie-layer {
  z-index: 20;
  pointer-events: auto;
}

.foreground-wall {
  z-index: 50;
  top: 33%;
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  filter: drop-shadow(0 -.45rem .55rem rgba(0, 0, 0, .48));
}

.projectile-layer {
  z-index: 70;
}

.effect-layer {
  z-index: 80;
}

.spawn-fog {
  position: absolute;
  z-index: 4;
  top: 7%;
  width: 28%;
  height: 22%;
  opacity: .38;
  filter: blur(1.3rem);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(44, 255, 116, .42), rgba(23, 136, 91, .14) 48%, transparent 74%);
  animation: fogDrift 7s ease-in-out infinite alternate;
}

.fog-a { left: 24%; }
.fog-b { right: 20%; animation-delay: -3s; }

.warning-line {
  position: absolute;
  z-index: 15;
  left: 16%;
  right: 16%;
  top: 70%;
  height: 2px;
  opacity: .5;
  border-top: 1px dashed rgba(255, 70, 55, .8);
  filter: drop-shadow(0 0 .25rem var(--red));
  pointer-events: none;
}

.warning-line span {
  position: absolute;
  left: 50%;
  top: -.75em;
  padding: .12em .6em;
  color: #ff8b77;
  font-size: clamp(.38rem, .48vw, .6rem);
  letter-spacing: .2em;
  background: rgba(13, 13, 19, .75);
  transform: translateX(-50%);
}

.zombie {
  --scale: .5;
  --shadow-scale: .7;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  aspect-ratio: .72 / 1;
  cursor: crosshair;
  pointer-events: auto;
  appearance: none;
  padding: 0;
  border: 0;
  outline: 0;
  color: inherit;
  background: transparent;
  transform: translate(-50%, -50%) scale(var(--scale));
  transform-origin: 50% 84%;
  filter: drop-shadow(0 .8rem .5rem rgba(0, 0, 0, .58));
  transition: filter .12s ease, opacity .2s ease;
  will-change: top, left, transform;
}

.zombie::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 3%;
  width: 52%;
  height: 8%;
  border-radius: 50%;
  background: rgba(0, 0, 0, .58);
  filter: blur(.25rem);
  transform: translateX(-50%) scaleX(var(--shadow-scale));
}

.zombie img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform-origin: 50% 90%;
  animation: zombieWalk .68s ease-in-out infinite alternate;
}

.zombie.ufo-boss {
  aspect-ratio: 1.82 / 1;
  transform-origin: 50% 55%;
  filter:
    drop-shadow(0 .8rem .65rem rgba(0, 0, 0, .62))
    drop-shadow(0 0 1rem rgba(83, 255, 96, .28));
}

.zombie.ufo-boss::after {
  left: 50%;
  bottom: -7%;
  width: 52%;
  height: 22%;
  background: radial-gradient(ellipse, rgba(80, 255, 91, .58), rgba(24, 151, 78, .15) 48%, transparent 72%);
  filter: blur(.55rem);
}

.zombie.ufo-boss img {
  animation: ufoHover .9s ease-in-out infinite alternate;
}

.zombie.ufo-boss .health-bar {
  top: -4%;
  left: 12%;
  right: 12%;
  height: 3.2%;
  opacity: 1;
  border-color: rgba(255, 210, 65, .9);
}

.zombie.ufo-boss .multiplier {
  bottom: -7%;
  color: #161100;
  border-color: #fff173;
  background: linear-gradient(180deg, #fff56d, #ff9d21);
  box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .65), 0 0 .7rem rgba(255, 185, 45, .35);
}

.zombie.ufo-boss.targeted::before {
  top: 54%;
  width: 27%;
}

.zombie.ufo-boss.dead {
  transform: translate(-50%, -50%) scale(calc(var(--scale) * 1.35)) rotate(13deg);
}

.zombie.clown-boss {
  aspect-ratio: 1;
  overflow: visible;
  transform-origin: 50% 50%;
  filter:
    drop-shadow(0 1rem .75rem rgba(21, 4, 28, .65))
    drop-shadow(0 0 1rem rgba(255, 103, 52, .24));
}

.zombie.clown-boss::after {
  left: 50%;
  bottom: 9%;
  width: 58%;
  height: 17%;
  background: radial-gradient(ellipse, rgba(255, 75, 147, .38), rgba(124, 43, 163, .16) 50%, transparent 73%);
  filter: blur(.65rem);
}

.clown-boss .clown-core {
  position: absolute;
  z-index: 3;
  left: 19%;
  top: 10%;
  width: 62%;
  height: 66%;
  object-fit: contain;
  transform-origin: 50% 56%;
  animation: clownCoreFloat .85s ease-in-out infinite alternate;
}

.clown-boss .boss-hand {
  position: absolute;
  z-index: 4;
  top: 34%;
  width: 31%;
  aspect-ratio: 1;
  pointer-events: none;
  transform-origin: 50% 88%;
  filter: drop-shadow(0 .45rem .4rem rgba(23, 4, 27, .62));
  transition: opacity .32s ease, filter .15s ease;
}

.clown-boss .left-hand {
  left: -2%;
  animation: clownHandLeft 1.18s ease-in-out infinite alternate;
}

.clown-boss .right-hand {
  right: -2%;
  animation: clownHandRight 1.08s ease-in-out infinite alternate-reverse;
}

.clown-boss .boss-hand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: none;
}

.clown-boss .right-hand img {
  transform: scaleX(-1);
}

.clown-boss .hand-health {
  position: absolute;
  z-index: 3;
  left: 18%;
  right: 18%;
  top: -4%;
  height: 4%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: rgba(19, 8, 27, .8);
  box-shadow: 0 0 .35rem rgba(255, 125, 43, .35);
}

.clown-boss .hand-health i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ff4f6d, #ffca42, #8dff69);
  transition: width .15s ease;
}

.clown-boss .boss-hand.hand-hit {
  filter: brightness(2.2) saturate(.25) drop-shadow(0 0 .75rem #fff);
}

.clown-boss .boss-hand.broken {
  opacity: 0;
  animation: none !important;
  transform: translateY(45%) scale(.35) rotate(32deg) !important;
}

.clown-boss.shield-left .left-hand {
  z-index: 7;
  animation: clownShieldLeft 2.2s ease-in-out both;
}

.clown-boss.shield-right .right-hand {
  z-index: 7;
  animation: clownShieldRight 2.2s ease-in-out both;
}

.clown-boss.slam-left .left-hand {
  z-index: 7;
  animation: clownSlamLeft 1.32s cubic-bezier(.22, .72, .2, 1) both;
}

.clown-boss.slam-right .right-hand {
  z-index: 7;
  animation: clownSlamRight 1.32s cubic-bezier(.22, .72, .2, 1) both;
}

.clown-boss.head-rush .clown-core {
  z-index: 7;
  animation: clownHeadRush 1.32s cubic-bezier(.22, .72, .2, 1) both;
}

.clown-boss.enraged .clown-core {
  filter: saturate(1.25) drop-shadow(0 0 .8rem rgba(255, 45, 72, .75));
  animation-duration: .34s;
}

.clown-boss .health-bar {
  z-index: 9;
  top: 9%;
  left: 22%;
  right: 22%;
  height: 2.8%;
  opacity: 1;
  border-color: rgba(255, 205, 70, .9);
}

.clown-boss .multiplier {
  z-index: 9;
  bottom: 12%;
  color: #1d0c27;
  border-color: #ffe276;
  background: linear-gradient(180deg, #fff07a, #ff8e35);
  box-shadow: 0 .2rem .55rem rgba(0, 0, 0, .65), 0 0 .8rem rgba(255, 80, 126, .42);
}

.zombie.clown-boss.targeted::before {
  z-index: 8;
  top: 43%;
  width: 29%;
}

.zombie.clown-boss.dead {
  transform: translate(-50%, -50%) scale(calc(var(--scale) * 1.26)) rotate(-9deg);
}

.zombie.variant-cold img { filter: hue-rotate(34deg) saturate(.9); }
.zombie.variant-sick img { filter: hue-rotate(-24deg) saturate(1.16); }

.zombie .multiplier {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -4%;
  min-width: 28%;
  padding: 1.6% 8%;
  text-align: center;
  color: #fff;
  font-size: clamp(.55rem, 1vw, 1.15rem);
  line-height: 1;
  border: 1px solid rgba(154, 255, 95, .55);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(18, 56, 33, .95), rgba(5, 22, 15, .95));
  box-shadow: 0 .16rem .4rem rgba(0, 0, 0, .6), inset 0 0 .35rem rgba(94, 255, 79, .24);
  transform: translateX(-50%);
}

.zombie.gas .multiplier {
  color: #201000;
  border-color: #ffca4e;
  background: linear-gradient(#ffe34e, #ff861f);
}

.zombie.brute .multiplier {
  border-color: #ff8c57;
  background: linear-gradient(#d93626, #6c100f);
}

.health-bar {
  position: absolute;
  z-index: 4;
  left: 18%;
  right: 18%;
  top: -1.8%;
  height: 2.1%;
  overflow: hidden;
  opacity: 0;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 99px;
  background: rgba(6, 10, 14, .75);
  transition: opacity .2s ease;
}

.health-bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ff4034, #ffba31, #8dff4a);
  transition: width .15s ease;
}

.zombie:hover .health-bar,
.zombie.targeted .health-bar {
  opacity: 1;
}

.zombie.targeted {
  filter:
    drop-shadow(0 0 .22rem #fff)
    drop-shadow(0 0 .65rem var(--red))
    drop-shadow(0 .8rem .5rem rgba(0, 0, 0, .58));
}

.zombie.targeted::before {
  content: "+";
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 48%;
  width: 45%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .92);
  font-family: system-ui, sans-serif;
  font-size: clamp(1rem, 2.2vw, 2.6rem);
  line-height: 1;
  border: clamp(1px, .13vw, 3px) solid var(--red);
  border-radius: 50%;
  box-shadow: 0 0 0 .25rem rgba(255, 44, 39, .16), inset 0 0 .8rem rgba(255, 44, 39, .18);
  transform: translate(-50%, -50%);
  animation: targetPulse .75s ease-in-out infinite alternate;
}

.zombie.hit img {
  filter: brightness(2.2) saturate(.2);
}

.zombie.dead {
  pointer-events: none;
  opacity: 0;
  filter: brightness(1.8) drop-shadow(0 0 1rem var(--toxic));
  transform: translate(-50%, -50%) scale(calc(var(--scale) * 1.45)) rotate(10deg);
  transition: transform .36s cubic-bezier(.2, .9, .3, 1), opacity .36s ease, filter .2s ease;
}

.tracer {
  position: absolute;
  height: clamp(2px, .16vw, 4px);
  border-radius: 99px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #fff 0 8%, #ffed62 18%, #ff7b20 70%, transparent);
  box-shadow: 0 0 .4rem #ff7b20, 0 0 .85rem rgba(255, 100, 20, .7);
  animation: tracerFlash .13s ease-out forwards;
}

.impact {
  position: absolute;
  width: 2.3%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, white 0 8%, #fff06b 9% 22%, #ff6b27 28% 42%, transparent 67%);
  filter: drop-shadow(0 0 .4rem #ff6425);
  transform: translate(-50%, -50%);
  animation: impactBurst .28s ease-out forwards;
}

.explosion {
  position: absolute;
  width: 14%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 5%, #fff55a 8% 17%, #ff8a22 26% 42%, #e6351f 50%, transparent 68%);
  box-shadow: 0 0 2rem #ff6b20, 0 0 5rem rgba(77, 255, 90, .3);
  transform: translate(-50%, -50%) scale(.15);
  animation: explode .62s cubic-bezier(.17, .84, .34, 1) forwards;
}

.reward-float {
  position: absolute;
  z-index: 4;
  color: #fff64c;
  font-size: clamp(.85rem, 1.7vw, 2rem);
  letter-spacing: .02em;
  white-space: nowrap;
  text-shadow: .06em .06em 0 #542300, 0 0 .7rem #ff8f1f;
  transform: translate(-50%, -50%);
  animation: rewardRise 1s ease-out forwards;
}

.turret-wrap {
  position: absolute;
  z-index: 60;
  left: 50%;
  bottom: 8.2%;
  width: 10.5%;
  aspect-ratio: 1;
  pointer-events: none;
  transform: translateX(-50%);
  transform-origin: 50% 80%;
  filter: drop-shadow(0 .8rem .7rem rgba(0, 0, 0, .75));
}

.turret {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 66%;
  transition: transform .12s ease-out;
}

.turret-wrap.firing .turret {
  animation: turretRecoil .12s ease-out;
}

.muzzle {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 6%;
  width: 34%;
  aspect-ratio: 1;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 7%, #fff74c 15%, #ff8b21 36%, transparent 68%);
  filter: drop-shadow(0 0 .7rem #ff932a);
  transform: translate(-50%, -50%);
}

.turret-wrap.firing .muzzle {
  animation: muzzleFlash .14s ease-out;
}

.player-tag {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 4%;
  display: flex;
  align-items: center;
  gap: .48em;
  padding: 3% 9%;
  color: #061421;
  font-size: clamp(.38rem, .53vw, .64rem);
  letter-spacing: .12em;
  border-radius: 99px;
  background: var(--blue);
  box-shadow: 0 0 .5rem rgba(33, 216, 255, .65);
  transform: translateX(-50%);
}

.crew-seat {
  --crew-accent: #8cff58;
  position: absolute;
  z-index: 58;
  bottom: 7.2%;
  width: 8.4%;
  aspect-ratio: 1;
  pointer-events: none;
  filter: drop-shadow(0 .65rem .55rem rgba(0, 0, 0, .74));
}

.crew-left {
  left: 20%;
  --crew-accent: #35dcff;
  transform: rotate(7deg);
}

.crew-right {
  right: 20%;
  --crew-accent: #ff8d40;
  transform: rotate(-7deg);
}

.crew-turret {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 68%;
}

.crew-seat.firing .crew-turret {
  animation: turretRecoil .13s ease-out;
}

.crew-muzzle {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 7%;
  width: 31%;
  aspect-ratio: 1;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 7%, var(--crew-accent) 18%, #ff7b20 40%, transparent 69%);
  filter: drop-shadow(0 0 .7rem var(--crew-accent));
  transform: translate(-50%, -50%);
}

.crew-seat.firing .crew-muzzle {
  animation: muzzleFlash .15s ease-out;
}

.crew-card {
  position: absolute;
  left: 50%;
  bottom: -9%;
  min-width: 145%;
  padding: 5% 9% 6%;
  color: #d6e7ef;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--crew-accent) 45%, transparent);
  border-radius: .35rem;
  background: linear-gradient(180deg, rgba(9, 29, 43, .92), rgba(3, 13, 24, .94));
  box-shadow: inset 0 0 .5rem color-mix(in srgb, var(--crew-accent) 8%, transparent), 0 .2rem .55rem rgba(0, 0, 0, .5);
  transform: translateX(-50%) rotate(-7deg);
}

.crew-right .crew-card {
  transform: translateX(-50%) rotate(7deg);
}

.crew-card span,
.crew-card strong,
.crew-card small {
  display: block;
  white-space: nowrap;
}

.crew-card span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42em;
  color: #fff;
  font-size: clamp(.38rem, .55vw, .66rem);
  letter-spacing: .08em;
}

.crew-card i {
  flex: 0 0 auto;
  background: var(--crew-accent);
  box-shadow: 0 0 .48em var(--crew-accent);
}

.crew-card strong {
  margin-top: .2em;
  color: var(--crew-accent);
  font-size: clamp(.42rem, .62vw, .74rem);
  letter-spacing: .06em;
}

.crew-card small {
  margin-top: .15em;
  color: #758e9c;
  font-family: system-ui, sans-serif;
  font-size: clamp(.28rem, .36vw, .43rem);
  letter-spacing: .1em;
}

.tracer.crew-shot-left {
  background: linear-gradient(90deg, #fff 0 8%, #77efff 18%, #20bfe9 70%, transparent);
  box-shadow: 0 0 .4rem #39dfff, 0 0 .85rem rgba(38, 194, 255, .7);
}

.tracer.crew-shot-right {
  background: linear-gradient(90deg, #fff 0 8%, #ffd27d 18%, #ff692f 70%, transparent);
  box-shadow: 0 0 .4rem #ff852d, 0 0 .85rem rgba(255, 91, 34, .7);
}

.special-banner {
  position: absolute;
  z-index: 130;
  left: 50%;
  top: 14%;
  min-width: 29%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  border: 1px solid rgba(255, 189, 69, .6);
  border-radius: .28rem;
  background: linear-gradient(180deg, rgba(110, 22, 16, .96), rgba(26, 8, 10, .94));
  box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .6), 0 0 1.2rem rgba(255, 72, 35, .25);
  transform: translate(-50%, -180%);
  pointer-events: none;
}

.special-banner.show {
  animation: specialBanner 2.6s ease-in-out forwards;
}

.warning-stripes {
  width: 13%;
  background: repeating-linear-gradient(135deg, #151515 0 12%, #ffad22 13% 24%);
}

.warning-stripes.reverse {
  transform: scaleX(-1);
}

.special-banner div {
  min-width: 74%;
  padding: 2% 6%;
  text-align: center;
}

.special-banner small,
.special-banner strong {
  display: block;
}

.special-banner small {
  color: #ffbf58;
  font-size: clamp(.4rem, .55vw, .65rem);
  letter-spacing: .2em;
}

.special-banner strong {
  color: #fff;
  font-size: clamp(.75rem, 1.25vw, 1.45rem);
  letter-spacing: .04em;
  text-shadow: 0 0 .5rem #ff592f;
}

.target-panel {
  position: absolute;
  z-index: 105;
  left: 1.2%;
  bottom: 9.6%;
  width: 13.2%;
  min-height: 8.8%;
  padding: .65% .8%;
  pointer-events: none;
  border: 1px solid rgba(80, 224, 255, .35);
  border-radius: .55rem;
  background: linear-gradient(145deg, rgba(8, 28, 47, .92), rgba(2, 12, 25, .92));
  box-shadow: inset 0 0 1rem rgba(33, 216, 255, .08), 0 .3rem .8rem rgba(0, 0, 0, .5);
}

.target-label {
  display: block;
  color: #6ddfff;
  font-size: clamp(.35rem, .48vw, .55rem);
  letter-spacing: .2em;
}

.target-empty {
  margin-top: 7%;
  color: #7f97a7;
  font-family: system-ui, sans-serif;
  font-size: clamp(.48rem, .62vw, .72rem);
}

.target-info {
  display: grid;
  grid-template-columns: 34% 1fr;
  align-items: center;
  gap: 5%;
  height: 100%;
}

.target-info img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 .2rem .25rem rgba(0, 0, 0, .8));
}

.target-info strong,
.target-info span {
  display: block;
}

.target-info strong {
  overflow: hidden;
  color: #fff;
  font-size: clamp(.47rem, .68vw, .82rem);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.target-info span {
  color: var(--orange);
  font-size: clamp(.75rem, 1.25vw, 1.45rem);
}

.control-deck {
  position: absolute;
  z-index: 120;
  inset: 0;
  pointer-events: none;
}

.control-button,
.bet-control {
  position: absolute;
  pointer-events: auto;
  border: 1px solid rgba(120, 198, 229, .32);
  border-radius: .65rem;
  background: linear-gradient(180deg, rgba(17, 48, 67, .82), rgba(4, 18, 31, .9));
  box-shadow: inset 0 0 .5rem rgba(72, 197, 244, .08), 0 .22rem .6rem rgba(0, 0, 0, .55);
  backdrop-filter: blur(.35rem);
}

.control-button {
  cursor: pointer;
  color: #9db2bf;
  bottom: 1.35%;
  height: 6.2%;
  font-size: clamp(.43rem, .62vw, .75rem);
  letter-spacing: .06em;
}

.icon-button {
  left: 1.25%;
  width: 4.2%;
  border-radius: 50%;
}

.control-button:active,
.bet-control button:active {
  transform: translateY(2px);
}

.control-button.active {
  color: #efffdc;
  border-color: rgba(144, 255, 70, .75);
  background: linear-gradient(180deg, rgba(46, 104, 39, .95), rgba(8, 34, 21, .98));
  box-shadow: inset 0 0 .7rem rgba(83, 255, 79, .13), 0 0 .75rem rgba(83, 255, 79, .16);
}

.indicator {
  display: inline-block;
  width: .55em;
  aspect-ratio: 1;
  margin-right: .4em;
  border-radius: 50%;
  background: #53636c;
  box-shadow: inset 0 0 .15em #000;
}

.active .indicator {
  background: var(--green);
  box-shadow: 0 0 .5em var(--green);
}

.bet-control {
  left: 50%;
  bottom: .9%;
  width: 19.5%;
  height: 8.2%;
  display: grid;
  grid-template-columns: .7fr 1.8fr .7fr;
  align-items: stretch;
  overflow: hidden;
  transform: translateX(-50%);
}

.bet-control button {
  cursor: pointer;
  border: 0;
  color: #fff;
  font-size: clamp(1rem, 2vw, 2.3rem);
  line-height: 1;
  background: linear-gradient(180deg, #287095, #0b2e49);
  text-shadow: 0 .1em .15em rgba(0, 0, 0, .6);
}

.bet-control button:first-child { border-right: 1px solid rgba(99, 194, 233, .3); }
.bet-control button:last-child { border-left: 1px solid rgba(99, 194, 233, .3); }

.bet-control div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bet-control span {
  color: #718f9f;
  font-size: clamp(.35rem, .48vw, .56rem);
  letter-spacing: .16em;
}

.bet-control strong {
  color: #fff05c;
  font-size: clamp(.9rem, 1.55vw, 1.8rem);
  line-height: 1;
  text-shadow: 0 0 .5rem rgba(255, 222, 55, .4);
}

.bet-control small {
  margin-top: .18em;
  color: #64dfff;
  font-family: system-ui, sans-serif;
  font-size: clamp(.28rem, .36vw, .43rem);
  font-weight: 800;
  letter-spacing: .12em;
}

.action-rail {
  position: absolute;
  right: 1.2%;
  top: 36%;
  width: 5.4%;
  display: grid;
  gap: .48rem;
  pointer-events: auto;
}

.action-rail .control-button {
  position: relative;
  bottom: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .12em;
  padding: 0;
  color: #9db2bf;
  border-width: 2px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(57, 115, 146, .35), transparent 43%),
    linear-gradient(180deg, rgba(12, 40, 58, .96), rgba(3, 14, 27, .98));
  box-shadow:
    inset 0 0 0 .24rem rgba(3, 12, 22, .68),
    inset 0 0 .8rem rgba(72, 197, 244, .11),
    0 .28rem .65rem rgba(0, 0, 0, .6);
}

.action-rail .control-button b,
.action-rail .control-button small {
  display: block;
}

.action-rail .control-button b {
  color: #edf8ff;
  font-size: clamp(.48rem, .72vw, .84rem);
  letter-spacing: .05em;
}

.action-rail .control-button small {
  color: #708895;
  font-family: system-ui, sans-serif;
  font-size: clamp(.26rem, .34vw, .4rem);
  font-weight: 900;
  letter-spacing: .12em;
}

.action-rail .control-button.active {
  border-color: rgba(144, 255, 70, .82);
  background:
    radial-gradient(circle at 50% 38%, rgba(120, 255, 75, .35), transparent 43%),
    linear-gradient(180deg, rgba(43, 98, 38, .98), rgba(7, 31, 20, .98));
}

.action-rail .control-button.active b,
.action-rail .control-button.active small {
  color: #efffdc;
}

.action-rail .skill-button {
  border-color: rgba(255, 174, 55, .62);
}

.action-rail .skill-button b {
  color: #ffd45f;
}

.action-rail .skill-button.charging {
  cursor: wait;
  opacity: .58;
  filter: saturate(.55);
}

.action-rail .skill-button.overdrive {
  border-color: #fff260;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 226, 73, .48), transparent 43%),
    linear-gradient(180deg, rgba(126, 66, 14, .98), rgba(41, 17, 7, .98));
  box-shadow: inset 0 0 0 .24rem rgba(36, 17, 3, .68), 0 0 1rem rgba(255, 191, 44, .48);
  animation: stageClockPulse .42s ease-in-out infinite alternate;
}

.toast-stack {
  position: absolute;
  z-index: 160;
  left: 1.2%;
  bottom: 8.8%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  pointer-events: none;
}

.toast {
  padding: .45em .8em;
  color: #eefaff;
  font-family: "Arial Black", system-ui, sans-serif;
  font-size: clamp(.45rem, .65vw, .78rem);
  border-left: .25rem solid var(--toxic);
  border-radius: .15rem .35rem .35rem .15rem;
  background: rgba(4, 17, 29, .9);
  box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .5);
  animation: toastIn 2.4s ease forwards;
}

.red-alert {
  position: absolute;
  z-index: 180;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  color: #fff;
  background: radial-gradient(circle, rgba(255, 33, 20, .18), rgba(86, 0, 0, .45));
}

.red-alert.show {
  animation: redAlert 2.4s ease-in-out forwards;
}

.red-alert small {
  color: #ffbf45;
  font-size: clamp(.55rem, 1vw, 1.2rem);
  letter-spacing: .45em;
}

.red-alert strong {
  font-size: clamp(2.3rem, 6.5vw, 7.5rem);
  line-height: .95;
  letter-spacing: -.03em;
  text-shadow: .04em .05em 0 #4c0805, 0 0 1.2rem red;
  transform: skew(-8deg);
}

.red-alert span {
  font-family: "Arial Black", system-ui, sans-serif;
  font-size: clamp(.6rem, .9vw, 1.05rem);
  letter-spacing: .15em;
}

.scene-transition {
  position: absolute;
  z-index: 500;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.scene-transition.closing,
.scene-transition.closed,
.scene-transition.opening {
  visibility: visible;
  pointer-events: auto;
}

.gate-half {
  position: absolute;
  z-index: 1;
  left: 0;
  width: 100%;
  height: 50.15%;
  background-image: url("assets/images/transitions/biohazard-blast-gate.png");
  background-repeat: no-repeat;
  background-size: 100% 200%;
  filter: drop-shadow(0 0 1.4rem rgba(0, 0, 0, .9));
  transition: transform 1.05s cubic-bezier(.72, .02, .2, 1);
  will-change: transform;
}

.gate-top {
  top: 0;
  background-position: center top;
  transform: translateY(-101%);
}

.gate-bottom {
  bottom: 0;
  background-position: center bottom;
  transform: translateY(101%);
}

.scene-transition.closing .gate-top,
.scene-transition.closed .gate-top {
  transform: translateY(0);
}

.scene-transition.closing .gate-bottom,
.scene-transition.closed .gate-bottom {
  transform: translateY(0);
}

.scene-transition.opening .gate-top {
  transform: translateY(-101%);
}

.scene-transition.opening .gate-bottom {
  transform: translateY(101%);
}

.gate-seam {
  position: absolute;
  z-index: 2;
  left: 8%;
  right: 8%;
  top: 50%;
  height: clamp(2px, .32vw, 6px);
  opacity: 0;
  background: linear-gradient(90deg, transparent, #ff2b1e 15% 85%, transparent);
  box-shadow: 0 0 .5rem #ff3b20, 0 0 2rem rgba(255, 33, 19, .9);
  transform: translateY(-50%);
  transition: opacity .18s ease;
}

.scene-transition.closed .gate-seam {
  opacity: 1;
  animation: gateAlarm .58s ease-in-out infinite alternate;
}

.scene-card {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: min(62%, 60rem);
  padding: 1.4% 3% 1.55%;
  text-align: center;
  opacity: 0;
  color: #fff;
  border-block: 1px solid rgba(255, 175, 52, .62);
  background: linear-gradient(90deg, transparent, rgba(5, 10, 15, .88) 14% 86%, transparent);
  text-shadow: 0 .15em .1em #000;
  transform: translate(-50%, -50%) scale(.78);
  transition: opacity .32s ease, transform .42s cubic-bezier(.2, .9, .25, 1.12);
}

.scene-transition.closed.reveal .scene-card {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.scene-card span,
.scene-card strong,
.scene-card small {
  display: block;
}

.scene-card span {
  color: #ffb633;
  font-size: clamp(.5rem, .82vw, .98rem);
  letter-spacing: .42em;
}

.scene-card strong {
  margin: .08em 0 .12em;
  font-size: clamp(1.65rem, 4.5vw, 5.2rem);
  line-height: .92;
  letter-spacing: -.035em;
  text-shadow: .045em .06em 0 #161d23, 0 0 1rem rgba(255, 65, 33, .42);
  transform: skew(-5deg);
}

.scene-card small {
  color: #9bdbec;
  font-size: clamp(.42rem, .68vw, .82rem);
  letter-spacing: .22em;
}

.game.scene-changing .zombie,
.game.scene-changing .tracer,
.game.scene-changing .impact {
  pointer-events: none;
}

@keyframes fogDrift {
  from { transform: translateX(-6%) scale(.9); opacity: .25; }
  to { transform: translateX(8%) scale(1.15); opacity: .5; }
}

@keyframes gateAlarm {
  from { opacity: .45; filter: brightness(.75); }
  to { opacity: 1; filter: brightness(1.5); }
}

@keyframes stageClockPulse {
  from { opacity: .68; filter: brightness(.85); }
  to { opacity: 1; filter: brightness(1.35); }
}

@keyframes zombieWalk {
  from { transform: translateY(0) rotate(-1.6deg); }
  to { transform: translateY(-2.5%) rotate(1.6deg); }
}

@keyframes ufoHover {
  from { transform: translateY(-1.5%) rotate(-.7deg); }
  to { transform: translateY(1.5%) rotate(.7deg); }
}

@keyframes clownCoreFloat {
  from { transform: translateY(-1.8%) rotate(-1deg); }
  to { transform: translateY(1.8%) rotate(1deg); }
}

@keyframes clownHandLeft {
  from { transform: translate(-3%, -4%) rotate(-12deg); }
  to { transform: translate(5%, 5%) rotate(5deg); }
}

@keyframes clownHandRight {
  from { transform: translate(3%, -5%) rotate(12deg); }
  to { transform: translate(-5%, 4%) rotate(-5deg); }
}

@keyframes clownShieldLeft {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(-12deg); }
  20%, 82% { transform: translate(112%, -7%) scale(1.2) rotate(8deg); }
}

@keyframes clownShieldRight {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(12deg); }
  20%, 82% { transform: translate(-112%, -7%) scale(1.2) rotate(-8deg); }
}

@keyframes clownSlamLeft {
  0% { transform: translate(0, 0) scale(1) rotate(-12deg); }
  34% { transform: translate(-25%, -35%) scale(1.12) rotate(-28deg); }
  62% { transform: translate(30%, 235%) scale(1.25) rotate(18deg); }
  100% { transform: translate(4%, 12%) scale(1) rotate(-8deg); }
}

@keyframes clownSlamRight {
  0% { transform: translate(0, 0) scale(1) rotate(12deg); }
  34% { transform: translate(25%, -35%) scale(1.12) rotate(28deg); }
  62% { transform: translate(-30%, 235%) scale(1.25) rotate(-18deg); }
  100% { transform: translate(-4%, 12%) scale(1) rotate(8deg); }
}

@keyframes clownHeadRush {
  0% { transform: translateY(0) scale(1); }
  34% { transform: translateY(-15%) scale(1.08); }
  62% { transform: translateY(120%) scale(1.16); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes targetPulse {
  from { transform: translate(-50%, -50%) scale(.92) rotate(0); opacity: .7; }
  to { transform: translate(-50%, -50%) scale(1.08) rotate(14deg); opacity: 1; }
}

@keyframes tracerFlash {
  0% { opacity: 1; transform: rotate(var(--angle)) scaleX(.08); }
  100% { opacity: 0; transform: rotate(var(--angle)) scaleX(1); }
}

@keyframes impactBurst {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.2); }
  65% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
}

@keyframes explode {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.1); }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
}

@keyframes rewardRise {
  0% { opacity: 0; transform: translate(-50%, -10%) scale(.5); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  100% { opacity: 0; transform: translate(-50%, -180%) scale(.9); }
}

@keyframes turretRecoil {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(4%) scale(.98); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes muzzleFlash {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.3); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

@keyframes specialBanner {
  0% { opacity: 0; transform: translate(-50%, -180%); }
  12%, 76% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -180%); }
}

@keyframes toastIn {
  0% { opacity: 0; transform: translateX(-25%); }
  10%, 78% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-10%); }
}

@keyframes redAlert {
  0% { opacity: 0; }
  12%, 55% { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-aspect-ratio: 1 / 1) {
  .game-shell::before {
    content: "請將裝置轉為橫向";
    position: fixed;
    z-index: 999;
    inset: 0;
    display: grid;
    place-items: center;
    color: #eafcff;
    font-family: system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: .12em;
    background: #03101e;
  }
}

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