:root {
  --bg-0: #000000;
  --bg-1: #05030a;
  --panel: rgba(4, 3, 8, 0.92);
  --text: #efe6ff;
  --text-soft: #cbb9ff;
  --line: #5d17aa;
  --neon: #b300ff;
  --neon-soft: #db64ff;
  --neon-hot: #7a00e6;
  --shadow-neon: 0 0 28px rgba(179, 0, 255, 0.7);
  --bg-accent-a: rgba(179, 0, 255, 0.24);
  --bg-accent-b: rgba(155, 0, 255, 0.18);
  --title-glow-a: rgba(177, 112, 255, 0.72);
  --title-glow-b: rgba(124, 44, 255, 0.58);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Rajdhani", sans-serif;
  background:
    radial-gradient(circle at 10% 15%, var(--bg-accent-a), transparent 42%),
    radial-gradient(circle at 90% 90%, var(--bg-accent-b), transparent 36%),
    linear-gradient(145deg, var(--bg-0), var(--bg-1));
  overflow-x: hidden;
}

.laser-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle, rgba(236, 174, 255, 0.68) 0 1px, transparent 1.8px) 0 0 / 170px 170px,
    radial-gradient(circle, rgba(198, 84, 255, 0.56) 0 1px, transparent 1.8px) 72px 36px / 230px 230px,
    radial-gradient(circle, rgba(250, 205, 255, 0.48) 0 1.2px, transparent 2px) 140px 88px / 280px 280px;
  animation:
    starfield-far 55s linear infinite,
    starfield-hue 12s linear infinite;
}

.laser-bg::before,
.laser-bg::after {
  content: "";
  position: absolute;
  inset: 0;
}

.laser-bg::before {
  background:
    radial-gradient(circle at 7% 12%, rgba(243, 223, 255, 0.78) 0 1.6px, transparent 2.3px),
    radial-gradient(circle at 14% 31%, rgba(196, 134, 255, 0.58) 0 1.3px, transparent 2px),
    radial-gradient(circle at 19% 62%, rgba(243, 223, 255, 0.74) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 24% 18%, rgba(172, 102, 255, 0.56) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 31% 47%, rgba(243, 223, 255, 0.72) 0 1.4px, transparent 2.1px),
    radial-gradient(circle at 38% 71%, rgba(190, 126, 255, 0.55) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 42% 26%, rgba(243, 223, 255, 0.76) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 49% 59%, rgba(168, 96, 255, 0.54) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 56% 14%, rgba(243, 223, 255, 0.75) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 61% 43%, rgba(194, 132, 255, 0.56) 0 1.3px, transparent 2px),
    radial-gradient(circle at 67% 68%, rgba(243, 223, 255, 0.73) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 73% 24%, rgba(173, 102, 255, 0.56) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 79% 52%, rgba(243, 223, 255, 0.74) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 84% 34%, rgba(188, 124, 255, 0.56) 0 1.3px, transparent 2px),
    radial-gradient(circle at 89% 73%, rgba(243, 223, 255, 0.76) 0 1.6px, transparent 2.3px),
    radial-gradient(circle at 94% 19%, rgba(167, 95, 255, 0.54) 0 1.2px, transparent 1.9px);
  animation: starfield-near 32s linear infinite;
}

.laser-bg::after {
  background:
    linear-gradient(35deg, rgba(255, 255, 255, 0) 0%, rgba(186, 102, 255, 0.05) 52%, rgba(243, 214, 255, 0.95) 100%) -240px 12% / 170px 2px no-repeat,
    radial-gradient(circle, rgba(255, 246, 255, 0.98) 0 1.3px, rgba(255, 255, 255, 0) 2px) -72px 15% / 7px 7px no-repeat,
    linear-gradient(145deg, rgba(255, 255, 255, 0) 0%, rgba(190, 106, 255, 0.06) 52%, rgba(242, 208, 255, 0.93) 100%) calc(100% + 240px) 22% / 150px 2px no-repeat,
    radial-gradient(circle, rgba(255, 242, 255, 0.98) 0 1.2px, rgba(255, 255, 255, 0) 2px) calc(100% + 72px) 24% / 7px 7px no-repeat,
    linear-gradient(322deg, rgba(255, 255, 255, 0) 0%, rgba(184, 98, 255, 0.05) 52%, rgba(244, 212, 255, 0.93) 100%) -220px 84% / 165px 2px no-repeat,
    radial-gradient(circle, rgba(255, 246, 255, 0.98) 0 1.3px, rgba(255, 255, 255, 0) 2px) -68px 80% / 7px 7px no-repeat,
    linear-gradient(214deg, rgba(255, 255, 255, 0) 0%, rgba(180, 94, 255, 0.05) 52%, rgba(241, 204, 255, 0.92) 100%) calc(100% + 220px) 78% / 155px 2px no-repeat,
    radial-gradient(circle, rgba(255, 239, 255, 0.98) 0 1.2px, rgba(255, 255, 255, 0) 2px) calc(100% + 64px) 74% / 7px 7px no-repeat;
  opacity: 0.9;
  animation:
    shooting-stars 10.5s linear infinite,
    comet-flicker-b 2.1s ease-in-out infinite;
}

.container {
  max-width: 1260px;
  margin: 0 auto;
  padding: 30px 18px 42px;
}

.hero {
  text-align: center;
  margin-bottom: 26px;
}

.hero-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.hero-title-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

h1,
h2 {
  margin: 0;
  font-family: "Orbitron", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

h1 {
  font-size: clamp(2rem, 6vw, 3.2rem);
  color: #f4ecff;
  text-shadow:
    0 0 14px var(--title-glow-a),
    0 0 36px var(--title-glow-b);
}

.hero p {
  margin: 8px 0 0;
  font-size: 1.18rem;
  color: #d9c7ff;
}


.game-grid {
  display: grid;
  gap: 18px;
}

.home-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-grid .game-card {
  min-height: 285px;
}

.game-page {
  max-width: 680px;
  position: relative;
  overflow: hidden;
}

.game-page::before,
.game-page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.game-page::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(199, 126, 255, 0.2), transparent 32%),
    radial-gradient(circle at 84% 76%, rgba(170, 84, 255, 0.16), transparent 34%);
  animation: game-ambience-drift 7.5s ease-in-out infinite;
}

.game-page::after {
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.03) 0 1px,
      rgba(255, 255, 255, 0) 1px 6px
    );
  mix-blend-mode: screen;
  opacity: 0.34;
  animation: game-scanline-flow 3.2s linear infinite;
}

.game-card {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow:
    0 0 0 1px rgba(201, 106, 255, 0.5) inset,
    0 14px 34px rgba(0, 0, 0, 0.84),
    var(--shadow-neon);
  backdrop-filter: blur(2px);
  animation: rise 0.45s ease both;
}

.game-card.game-single {
  position: relative;
  overflow: hidden;
  animation:
    rise 0.45s ease both,
    game-card-throb 3.2s ease-in-out infinite;
}

.game-card.game-single::before {
  content: "";
  position: absolute;
  inset: -35%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0) 0deg,
    rgba(220, 169, 255, 0.22) 76deg,
    rgba(255, 255, 255, 0) 130deg,
    rgba(178, 94, 255, 0.18) 210deg,
    rgba(255, 255, 255, 0) 280deg
  );
  pointer-events: none;
  filter: blur(14px);
  animation: game-border-sweep 5.6s linear infinite;
}

.game-card.game-single > * {
  position: relative;
  z-index: 1;
}

.card-top p {
  margin: 8px 0 0;
  color: #d6c1ff;
  font-size: 1.02rem;
}

.card-top h2 {
  text-shadow:
    0 0 10px var(--title-glow-a),
    0 0 22px var(--title-glow-b);
}

.game-thumb {
  width: 100%;
  height: 102px;
  border: 2px solid #6a25be;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(216, 150, 255, 0.36),
    0 0 18px rgba(179, 0, 255, 0.48);
}

.game-thumb span {
  position: absolute;
}

.snake-thumb {
  background: linear-gradient(135deg, #11091e, #23113c);
}

.snake-segment {
  height: 10px;
  background: #7f39df;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(185, 120, 255, 0.8);
}

.snake-segment.seg-a {
  width: 56%;
  left: 12%;
  top: 52%;
  animation: snake-crawl 1.25s ease-in-out infinite;
}

.snake-segment.seg-b {
  width: 34%;
  left: 12%;
  top: 38%;
  animation: snake-crawl 1.25s ease-in-out infinite 0.12s;
}

.snake-segment.seg-c {
  width: 14%;
  left: 42%;
  top: 38%;
  animation: snake-crawl 1.25s ease-in-out infinite 0.24s;
}

.snake-food-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e8d6ff;
  right: 16%;
  top: 38%;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  animation: snake-food-hop 0.95s ease-in-out infinite;
}

.pong-thumb {
  background: linear-gradient(145deg, #0e0818, #201034);
}

.pong-midline {
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 2px;
  transform: translateX(-50%);
  border-left: 2px dashed rgba(190, 150, 255, 0.45);
}

.pong-ball {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f1e5ff;
  left: 58%;
  top: 36%;
  box-shadow: 0 0 12px rgba(241, 229, 255, 0.9);
  animation: pong-bounce 1.7s ease-in-out infinite;
}

.pong-paddle {
  width: 74%;
  height: 8px;
  background: #7f39df;
  left: 12%;
  bottom: 14px;
  box-shadow: 0 0 10px rgba(178, 109, 255, 0.8);
}

.mole-thumb {
  background:
    radial-gradient(circle at 50% 70%, rgba(179, 112, 255, 0.3), transparent 45%),
    #140a24;
}

.mole-hole {
  width: 24%;
  height: 24%;
  border-radius: 7px;
  background: rgba(63, 36, 102, 0.7);
}

.mole-hole.h1 { left: 6%; top: 8%; }
.mole-hole.h2 { left: 38%; top: 8%; }
.mole-hole.h3 { left: 70%; top: 8%; }
.mole-hole.h4 { left: 6%; top: 38%; }
.mole-hole.h5 { left: 38%; top: 38%; }
.mole-hole.h6 { left: 70%; top: 38%; }
.mole-hole.h7 { left: 6%; top: 68%; }
.mole-hole.h8 { left: 38%; top: 68%; }
.mole-hole.h9 { left: 70%; top: 68%; }

.mole-pop {
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background: #b274ff;
  left: 40%;
  top: 42%;
  box-shadow: 0 0 15px rgba(178, 116, 255, 0.9);
  animation: mole-pop 1.35s ease-in-out infinite;
}

.dodge-thumb {
  background: linear-gradient(165deg, #120922, #241240);
}

.dodge-laser {
  height: 12px;
  background: rgba(157, 84, 255, 0.68);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(157, 84, 255, 0.6);
}

.dodge-laser.dl1 { width: 24%; left: 10%; top: 18%; }
.dodge-laser.dl2 { width: 34%; left: 52%; top: 34%; }
.dodge-laser.dl3 { width: 20%; left: 30%; top: 55%; }

.dodge-laser.dl1 { animation: dodge-drop 1.9s linear infinite; }
.dodge-laser.dl2 { animation: dodge-drop 1.9s linear infinite 0.4s; }
.dodge-laser.dl3 { animation: dodge-drop 1.9s linear infinite 0.8s; }

.dodge-player {
  width: 42px;
  height: 12px;
  background: #eddfff;
  left: calc(50% - 21px);
  bottom: 12px;
  box-shadow: 0 0 10px rgba(237, 223, 255, 0.85);
}

.pulse-thumb {
  background: radial-gradient(circle at 50% 50%, rgba(171, 108, 255, 0.34), #100818 58%);
}

.pulse-ring {
  border: 2px solid rgba(207, 166, 255, 0.62);
  border-radius: 50%;
}

.pulse-ring.pr1 {
  width: 74px;
  height: 74px;
  left: calc(50% - 37px);
  top: calc(50% - 37px);
  animation: pulse-ring-expand 1.8s ease-out infinite;
}

.pulse-ring.pr2 {
  width: 52px;
  height: 52px;
  left: calc(50% - 26px);
  top: calc(50% - 26px);
  border-color: rgba(215, 182, 255, 0.45);
  animation: pulse-ring-expand 1.8s ease-out infinite 0.4s;
}

.pulse-orb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  left: calc(50% - 18px);
  top: calc(50% - 18px);
  background: #be8cff;
  box-shadow:
    0 0 18px rgba(190, 140, 255, 0.88),
    0 0 34px rgba(115, 43, 255, 0.5);
  animation: glow-pulse 1.1s ease-in-out infinite;
}

.void-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 50%, #251039 0%, #170925 50%, #10071a 100%);
  position: relative;
}

.void-thumb-explosion {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle, #f0d8ff 0%, #cb91ff 35%, #8836e6 70%, rgba(136, 54, 230, 0) 100%);
  box-shadow:
    0 0 22px rgba(186, 120, 255, 0.9),
    0 0 52px rgba(126, 47, 222, 0.55);
  animation: void-thumb-boom-core 1.1s ease-in-out infinite;
}

.void-thumb-explosion::before,
.void-thumb-explosion::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.void-thumb-explosion::before {
  border: 2px solid rgba(214, 171, 255, 0.75);
  animation: void-thumb-boom-ring 1.1s ease-out infinite;
}

.void-thumb-explosion::after {
  background: conic-gradient(
    from 0deg,
    rgba(218, 176, 255, 0) 0deg,
    rgba(218, 176, 255, 0.95) 28deg,
    rgba(218, 176, 255, 0) 48deg,
    rgba(178, 108, 255, 0.85) 94deg,
    rgba(218, 176, 255, 0) 122deg,
    rgba(218, 176, 255, 0.95) 170deg,
    rgba(218, 176, 255, 0) 196deg,
    rgba(178, 108, 255, 0.85) 246deg,
    rgba(218, 176, 255, 0) 278deg,
    rgba(218, 176, 255, 0.95) 325deg,
    rgba(218, 176, 255, 0) 360deg
  );
  filter: blur(1px);
  animation: void-thumb-boom-spark 0.9s linear infinite;
}

.stack-thumb {
  background: linear-gradient(155deg, #120724, #2a1450);
}

.stack-col {
  width: 18%;
  bottom: 10px;
  border-radius: 5px 5px 2px 2px;
  background: rgba(198, 142, 255, 0.85);
  box-shadow: 0 0 12px rgba(183, 122, 255, 0.8);
}

.stack-col.c1 {
  left: 14%;
  height: 28px;
}

.stack-col.c2 {
  left: 38%;
  height: 48px;
}

.stack-col.c3 {
  left: 62%;
  height: 20px;
}

.stack-piece {
  width: 34%;
  height: 14px;
  left: 49%;
  top: 20%;
  transform: translateX(-50%);
  border-radius: 4px;
  background: #f2dfff;
  box-shadow:
    0 0 14px rgba(242, 223, 255, 0.95),
    0 0 26px rgba(178, 102, 255, 0.6);
  animation: stack-drop 1.5s ease-in-out infinite;
}

.brick-thumb {
  background: linear-gradient(160deg, #130924, #2b1548);
}

.brick-row {
  height: 11px;
  left: 10%;
  width: 80%;
  border-radius: 4px;
}

.brick-row.br1 {
  top: 14%;
  background: #c08bff;
  box-shadow: 0 0 10px rgba(192, 139, 255, 0.7);
}

.brick-row.br2 {
  top: 30%;
  background: #aa6fff;
  box-shadow: 0 0 10px rgba(170, 111, 255, 0.68);
}

.brick-row.br3 {
  top: 46%;
  background: #9259f3;
  box-shadow: 0 0 10px rgba(146, 89, 243, 0.62);
}

.brick-ball {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #f2e5ff;
  left: 58%;
  top: 62%;
  box-shadow: 0 0 12px rgba(242, 229, 255, 0.9);
  animation: brick-ball-bounce 1.4s ease-in-out infinite;
}

.brick-paddle {
  width: 34%;
  height: 8px;
  background: #d8b5ff;
  border-radius: 999px;
  left: 33%;
  bottom: 12px;
  box-shadow: 0 0 10px rgba(216, 181, 255, 0.72);
}

.drift-thumb {
  background: radial-gradient(circle at 30% 20%, rgba(173, 104, 255, 0.25), #120723 60%);
}

.drift-rock {
  border-radius: 50%;
  background: rgba(177, 129, 240, 0.55);
  border: 1px solid rgba(214, 180, 255, 0.5);
  box-shadow: 0 0 10px rgba(177, 129, 240, 0.5);
}

.drift-rock.r1 {
  width: 20px;
  height: 20px;
  left: 18%;
  top: 22%;
  animation: drift-float 2.6s ease-in-out infinite;
}

.drift-rock.r2 {
  width: 14px;
  height: 14px;
  left: 64%;
  top: 30%;
  animation: drift-float 2.1s ease-in-out infinite 0.3s;
}

.drift-rock.r3 {
  width: 10px;
  height: 10px;
  left: 46%;
  top: 64%;
  animation: drift-float 1.8s ease-in-out infinite 0.55s;
}

.drift-ship {
  width: 0;
  height: 0;
  left: 44%;
  top: 52%;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 18px solid #f2e6ff;
  transform: rotate(18deg);
  filter: drop-shadow(0 0 10px rgba(242, 230, 255, 0.9));
  animation: drift-tilt 1.3s ease-in-out infinite;
}

.drift-shot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  left: 57%;
  top: 46%;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.95);
  animation: drift-shot 1.1s linear infinite;
}

.siege-thumb {
  background: radial-gradient(circle at 50% 20%, rgba(177, 105, 255, 0.28), #11071f 62%);
}

.siege-invader {
  width: 20px;
  height: 14px;
  border-radius: 5px 5px 3px 3px;
  background: #8d43e2;
  box-shadow:
    0 0 10px rgba(181, 119, 255, 0.82),
    inset 0 -2px 0 rgba(88, 33, 153, 0.75);
  animation: siege-invader-drift 1.8s ease-in-out infinite;
}

.siege-invader::before,
.siege-invader::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 6px;
  bottom: -5px;
  border-radius: 2px;
  background: #cfa0ff;
}

.siege-invader::before {
  left: 3px;
}

.siege-invader::after {
  right: 3px;
}

.siege-invader.inv-a {
  left: 22%;
  top: 20%;
}

.siege-invader.inv-b {
  left: 46%;
  top: 16%;
  animation-delay: 0.25s;
}

.siege-invader.inv-c {
  left: 70%;
  top: 22%;
  animation-delay: 0.5s;
}

.siege-cannon {
  width: 44px;
  height: 10px;
  border-radius: 999px;
  left: calc(50% - 22px);
  bottom: 12px;
  background: #f0deff;
  box-shadow:
    0 0 14px rgba(240, 222, 255, 0.9),
    0 0 26px rgba(157, 85, 255, 0.48);
  animation: siege-cannon-slide 2.1s ease-in-out infinite;
}

.siege-shot {
  width: 3px;
  height: 18px;
  left: calc(50% - 1px);
  bottom: 24px;
  border-radius: 999px;
  background: linear-gradient(to top, rgba(211, 170, 255, 0), #efe3ff 36%, #ffffff 100%);
  box-shadow: 0 0 12px rgba(237, 220, 255, 0.95);
  animation: siege-shot-rise 1.05s linear infinite;
}

.racer-thumb {
  background:
    linear-gradient(180deg, rgba(33, 17, 53, 0.72), rgba(12, 7, 20, 0.95)),
    linear-gradient(90deg, #1e1233 0%, #130a21 50%, #1e1233 100%);
}

.racer-lane {
  width: 3px;
  top: -12px;
  bottom: -12px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(216, 177, 255, 0.88) 0,
    rgba(216, 177, 255, 0.88) 9px,
    rgba(216, 177, 255, 0) 9px,
    rgba(216, 177, 255, 0) 20px
  );
  animation: racer-lane-flow 0.75s linear infinite;
}

.racer-lane.rl1 {
  left: 34%;
}

.racer-lane.rl2 {
  left: 66%;
}

.racer-traffic {
  width: 16px;
  height: 22px;
  left: 38%;
  top: 20%;
  border-radius: 5px;
  background: #8e45e2;
  box-shadow: 0 0 12px rgba(183, 122, 255, 0.72);
  animation: racer-traffic-drop 1.2s linear infinite;
}

.racer-car {
  width: 18px;
  height: 24px;
  left: 56%;
  bottom: 10px;
  border-radius: 5px;
  background: #f2e3ff;
  box-shadow:
    0 0 14px rgba(242, 227, 255, 0.92),
    0 0 24px rgba(158, 82, 255, 0.48);
}

.racer-flare {
  width: 8px;
  height: 12px;
  left: calc(56% + 5px);
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.92), rgba(255, 170, 255, 0));
  animation: racer-flare-flicker 0.35s ease-in-out infinite;
}

.runner-thumb {
  background:
    linear-gradient(180deg, rgba(43, 20, 66, 0.75), rgba(13, 7, 22, 0.95)),
    linear-gradient(90deg, #1a0d2c 0%, #12091f 100%);
}

.runner-horizon {
  left: 0;
  right: 0;
  bottom: 22px;
  height: 2px;
  background: rgba(198, 146, 255, 0.62);
  box-shadow: 0 0 12px rgba(198, 146, 255, 0.6);
}

.runner-obstacle {
  width: 14px;
  height: 22px;
  left: 66%;
  bottom: 22px;
  border-radius: 4px;
  background: #9850e8;
  box-shadow: 0 0 12px rgba(187, 133, 255, 0.72);
  animation: runner-obstacle-move 1.2s linear infinite;
}

.runner-player {
  width: 16px;
  height: 24px;
  left: 26%;
  bottom: 22px;
  border-radius: 4px;
  background: #f1e3ff;
  box-shadow:
    0 0 14px rgba(241, 227, 255, 0.92),
    0 0 26px rgba(156, 84, 255, 0.52);
  animation: runner-hop 1.2s ease-in-out infinite;
}

.runner-trail {
  width: 28px;
  height: 6px;
  left: calc(26% - 24px);
  bottom: 24px;
  border-radius: 999px;
  background: linear-gradient(to right, rgba(208, 158, 255, 0), rgba(208, 158, 255, 0.9));
  animation: runner-trail-fade 0.65s ease-in-out infinite;
}

.skyline-thumb {
  background:
    linear-gradient(180deg, rgba(34, 15, 56, 0.75), rgba(9, 5, 16, 0.95)),
    linear-gradient(90deg, #1d0d33 0%, #10071d 100%);
}

.skyline-city {
  left: 8%;
  right: 8%;
  bottom: 10px;
  height: 20px;
  border-radius: 4px;
  background:
    linear-gradient(to right, rgba(220, 181, 255, 0.3) 0 10%, transparent 10% 16%, rgba(220, 181, 255, 0.25) 16% 24%, transparent 24% 30%, rgba(220, 181, 255, 0.3) 30% 38%, transparent 38% 44%, rgba(220, 181, 255, 0.25) 44% 52%, transparent 52% 58%, rgba(220, 181, 255, 0.3) 58% 66%, transparent 66% 72%, rgba(220, 181, 255, 0.25) 72% 80%, transparent 80% 86%, rgba(220, 181, 255, 0.3) 86% 100%),
    #7d33d7;
  box-shadow: 0 0 14px rgba(161, 70, 255, 0.5);
}

.skyline-missile {
  width: 2px;
  height: 48px;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(248, 228, 255, 0.92), rgba(174, 92, 255, 0));
}

.skyline-missile.sm1 {
  --rot: 20deg;
  left: 24%;
  top: 12%;
  animation: skyline-missile-drop 1.4s linear infinite;
}

.skyline-missile.sm2 {
  --rot: -24deg;
  left: 70%;
  top: 8%;
  animation: skyline-missile-drop 1.4s linear infinite 0.5s;
}

.skyline-burst {
  width: 24px;
  height: 24px;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 238, 255, 0.95) 0%, rgba(211, 132, 255, 0.85) 35%, rgba(137, 50, 243, 0) 72%);
  box-shadow:
    0 0 14px rgba(230, 178, 255, 0.8),
    0 0 28px rgba(137, 50, 243, 0.52);
  animation: skyline-burst-pulse 1.25s ease-out infinite;
}

.shield-thumb {
  background:
    radial-gradient(circle at 50% 44%, rgba(176, 92, 255, 0.3), rgba(14, 7, 24, 0) 56%),
    linear-gradient(160deg, #190a2b, #0d0617);
}

.shield-ring {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  left: 56%;
  top: 28%;
  border: 4px solid #b970ff;
  border-bottom-color: rgba(185, 112, 255, 0.2);
  box-shadow: 0 0 14px rgba(185, 112, 255, 0.74);
  animation: shield-ring-spin 1.8s linear infinite;
}

.shield-gap {
  width: 24px;
  height: 6px;
  left: 66%;
  top: 42%;
  transform-origin: -12px 3px;
  border-radius: 999px;
  background: rgba(14, 7, 24, 0.95);
  animation: shield-ring-spin 1.8s linear infinite;
}

.shield-core {
  width: 16px;
  height: 16px;
  left: 64%;
  top: 38%;
  border-radius: 50%;
  background: #f2e2ff;
  box-shadow: 0 0 12px rgba(242, 226, 255, 0.85);
}

.shield-player {
  width: 18px;
  height: 18px;
  left: 24%;
  bottom: 22px;
  border-radius: 4px;
  background: #c46cff;
  box-shadow:
    0 0 12px rgba(196, 108, 255, 0.82),
    0 0 24px rgba(122, 0, 230, 0.5);
}

.shield-shot {
  width: 32px;
  height: 2px;
  left: 33%;
  top: 62%;
  transform: rotate(-18deg);
  transform-origin: left center;
  background: linear-gradient(to right, rgba(240, 216, 255, 0.95), rgba(168, 82, 255, 0));
  box-shadow: 0 0 10px rgba(240, 216, 255, 0.85);
  animation: shield-shot-pulse 1.1s ease-in-out infinite;
}

.pinball-thumb {
  background:
    radial-gradient(circle at 50% 30%, rgba(187, 102, 255, 0.28), rgba(16, 9, 27, 0) 58%),
    linear-gradient(165deg, #1a0a2d, #0d0718);
}

.pinball-bumper {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #cf8aff;
  box-shadow:
    0 0 12px rgba(207, 138, 255, 0.82),
    0 0 22px rgba(122, 0, 230, 0.5);
  animation: pinball-bumper-pulse 1.2s ease-in-out infinite;
}

.pinball-bumper.pb1 { left: 24%; top: 18%; }
.pinball-bumper.pb2 { left: 52%; top: 24%; animation-delay: 0.2s; }
.pinball-bumper.pb3 { left: 40%; top: 44%; animation-delay: 0.4s; }

.pinball-flipper {
  width: 34px;
  height: 8px;
  border-radius: 999px;
  background: #f2e1ff;
  box-shadow: 0 0 10px rgba(242, 225, 255, 0.85);
}

.pinball-flipper.pf1 {
  left: 28%;
  bottom: 16px;
  transform: rotate(18deg);
}

.pinball-flipper.pf2 {
  right: 28%;
  bottom: 16px;
  transform: rotate(-18deg);
}

.pinball-ball {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  left: 74%;
  top: 20%;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.95);
  animation: pinball-ball-bounce 1.3s ease-in-out infinite;
}

.bomber-thumb {
  background:
    linear-gradient(145deg, #140824, #0a050f),
    radial-gradient(circle at 64% 44%, rgba(177, 101, 255, 0.24), rgba(14, 6, 24, 0) 58%);
}

.zombie-thumb {
  background:
    radial-gradient(circle at 50% 28%, rgba(191, 120, 255, 0.18), rgba(16, 9, 28, 0) 48%),
    linear-gradient(180deg, #10071a 0%, #1a0d2a 52%, #0a050f 100%);
}

.warp-thumb {
  position: relative;
  background:
    radial-gradient(circle at 54% 46%, rgba(220, 164, 255, 0.28), rgba(20, 10, 32, 0) 52%),
    linear-gradient(160deg, #190a27, #09050f 66%);
  box-shadow:
    inset 0 0 0 1px rgba(228, 180, 255, 0.46),
    0 0 20px rgba(186, 86, 255, 0.52);
}

.warp-thumb::before {
  content: "";
  position: absolute;
  left: calc(50% - 48px);
  top: calc(50% - 48px);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid rgba(224, 180, 255, 0.55);
  box-shadow: 0 0 20px rgba(198, 120, 255, 0.42);
  animation: warp-thumb-ring 1.6s ease-out infinite;
}

.warp-thumb::after {
  content: "";
  position: absolute;
  right: 16%;
  top: 18%;
  width: 12px;
  height: 12px;
  background: linear-gradient(145deg, #ffffff, #cb95ff);
  box-shadow: 0 0 12px rgba(219, 171, 255, 0.92);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation: warp-thumb-shard 1.1s ease-in-out infinite;
}

.warp-thumb-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter:
    drop-shadow(0 0 8px rgba(196, 112, 255, 0.65))
    drop-shadow(0 0 14px rgba(151, 56, 235, 0.45));
}

.warp-svg-grid line {
  stroke: rgba(218, 166, 255, 0.3);
  stroke-width: 0.9;
  animation: warp-thumb-grid 2.6s linear infinite;
}

.warp-svg-ring {
  fill: none;
  stroke: rgba(222, 176, 255, 0.84);
  stroke-width: 1.5;
  transform-origin: 60px 35px;
}

.warp-svg-ring.ring-a {
  animation: warp-thumb-ring-svg 1.4s ease-out infinite;
}

.warp-svg-ring.ring-b {
  animation: warp-thumb-ring-svg 1.4s ease-out infinite 0.6s;
}

.warp-svg-player {
  fill: #f4e8ff;
  filter: drop-shadow(0 0 5px rgba(244, 232, 255, 0.95));
}

.warp-svg-enemy {
  fill: #ce6dff;
  filter: drop-shadow(0 0 5px rgba(206, 109, 255, 0.95));
}

.warp-svg-enemy.enemy-a {
  animation: warp-thumb-enemy-svg-a 1.9s ease-in-out infinite;
}

.warp-svg-enemy.enemy-b {
  animation: warp-thumb-enemy-svg-b 2.1s ease-in-out infinite;
}

.warp-svg-shard {
  fill: #f7eeff;
  filter: drop-shadow(0 0 6px rgba(219, 171, 255, 0.95));
  transform-origin: 90px 19px;
  animation: warp-thumb-shard-svg 1.1s ease-in-out infinite;
}

.warp-grid {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(rgba(218, 166, 255, 0.18) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(218, 166, 255, 0.18) 1px, transparent 1px) 0 0 / 18px 18px;
  animation: warp-thumb-grid 2.6s linear infinite;
  z-index: 1;
}

.warp-ring {
  border: 2px solid rgba(206, 154, 255, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(198, 126, 255, 0.45);
}

.warp-ring.wr1 {
  width: 32px;
  height: 32px;
  left: calc(50% - 16px);
  top: calc(50% - 16px);
  animation: warp-thumb-ring 1.3s ease-out infinite;
  z-index: 2;
}

.warp-ring.wr2 {
  width: 28px;
  height: 28px;
  left: calc(50% - 14px);
  top: calc(50% - 14px);
  animation: warp-thumb-ring 1.3s ease-out infinite 0.55s;
  z-index: 2;
}

.warp-player {
  width: 14px;
  height: 14px;
  left: calc(50% - 7px);
  top: calc(50% - 7px);
  border-radius: 50%;
  background: #f4e8ff;
  box-shadow: 0 0 16px rgba(244, 232, 255, 0.95);
  z-index: 3;
}

.warp-enemy {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ce6dff;
  box-shadow: 0 0 10px rgba(206, 109, 255, 0.9);
}

.warp-enemy.we1 {
  left: 10%;
  top: 18%;
  animation: warp-thumb-enemy1 1.9s ease-in-out infinite;
  z-index: 3;
}

.warp-enemy.we2 {
  right: 9%;
  bottom: 16%;
  animation: warp-thumb-enemy2 2.1s ease-in-out infinite;
  z-index: 3;
}

.warp-shard {
  width: 12px;
  height: 12px;
  left: 74%;
  top: 26%;
  background: linear-gradient(145deg, #ffffff, #cb95ff);
  box-shadow: 0 0 12px rgba(219, 171, 255, 0.92);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation: warp-thumb-shard 1.1s ease-in-out infinite;
  z-index: 3;
}

.hook-thumb {
  position: relative;
  background:
    radial-gradient(circle at 50% 26%, rgba(173, 102, 255, 0.32), rgba(10, 5, 18, 0) 52%),
    linear-gradient(160deg, #170a28, #09050f 72%);
  box-shadow:
    inset 0 0 0 1px rgba(214, 158, 255, 0.36),
    0 0 18px rgba(178, 88, 255, 0.5);
}

.hook-thumb-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter:
    drop-shadow(0 0 8px rgba(188, 110, 255, 0.6))
    drop-shadow(0 0 14px rgba(146, 58, 231, 0.4));
}

.hook-svg-grid line {
  animation: hook-grid-flow 1.7s linear infinite;
}

.hook-svg-anchor {
  filter: drop-shadow(0 0 7px rgba(242, 220, 255, 0.95));
}

.hook-svg-line {
  transform-origin: 78px 16px;
  animation: hook-line-swing-svg 1.8s ease-in-out infinite;
}

.hook-svg-player {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95));
  animation: hook-player-swing-svg 1.8s ease-in-out infinite;
}

.hook-svg-orb {
  filter: drop-shadow(0 0 8px rgba(216, 166, 255, 0.95));
  animation: hook-orb-pulse-svg 1.05s ease-in-out infinite;
}

.hook-svg-spikes {
  filter: drop-shadow(0 0 8px rgba(184, 99, 255, 0.9));
}

.golf-thumb {
  position: relative;
  background:
    radial-gradient(circle at 50% 34%, rgba(181, 111, 255, 0.28), rgba(13, 7, 24, 0) 58%),
    linear-gradient(160deg, #160a24, #09050f 74%);
  box-shadow:
    inset 0 0 0 1px rgba(205, 145, 255, 0.34),
    0 0 18px rgba(174, 85, 255, 0.44);
}

.golf-thumb-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter:
    drop-shadow(0 0 8px rgba(189, 115, 255, 0.62))
    drop-shadow(0 0 14px rgba(143, 57, 230, 0.44));
}

.golf-svg-field {
  fill: rgba(14, 8, 24, 0.68);
}

.golf-svg-well {
  fill: rgba(120, 46, 212, 0.36);
  stroke: rgba(212, 168, 255, 0.74);
  stroke-width: 1.5;
  animation: golf-well-pulse 1.3s ease-in-out infinite;
}

.golf-svg-ball {
  fill: #ffffff;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.92));
  animation: golf-ball-orbit 2.1s ease-in-out infinite;
}

.golf-svg-arc {
  fill: none;
  stroke: rgba(231, 190, 255, 0.9);
  stroke-width: 1.6;
  stroke-dasharray: 2 3;
  animation: golf-arc-flow 0.9s linear infinite;
}

.golf-svg-hole {
  fill: #1d0a31;
  stroke: rgba(210, 154, 255, 0.84);
  stroke-width: 1.3;
}

.golf-svg-flagpole {
  stroke: rgba(241, 222, 255, 0.94);
  stroke-width: 1.4;
}

.golf-svg-flag {
  fill: rgba(216, 145, 255, 0.92);
  animation: golf-flag-wave 1s ease-in-out infinite;
  transform-origin: 101px 11px;
}

.heist-thumb {
  position: relative;
  background:
    radial-gradient(circle at 70% 28%, rgba(173, 108, 255, 0.28), rgba(12, 7, 20, 0) 54%),
    linear-gradient(165deg, #150a25, #09050f 74%);
  box-shadow:
    inset 0 0 0 1px rgba(203, 147, 255, 0.34),
    0 0 18px rgba(173, 86, 255, 0.45);
}

.heist-thumb-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter:
    drop-shadow(0 0 8px rgba(188, 114, 255, 0.62))
    drop-shadow(0 0 14px rgba(144, 57, 230, 0.44));
}

.heist-wall {
  fill: rgba(123, 60, 203, 0.82);
}

.heist-drone {
  fill: #f1ddff;
  animation: heist-drone-float 1.6s ease-in-out infinite;
}

.heist-cone {
  fill: rgba(222, 170, 255, 0.22);
  animation: heist-cone-sweep 1.8s ease-in-out infinite;
  transform-origin: 88px 20px;
}

.heist-keycard {
  fill: rgba(214, 142, 255, 0.94);
  animation: heist-key-blink 1.1s ease-in-out infinite;
}

.heist-player {
  fill: #ffffff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.92));
  animation: heist-player-bob 1.25s ease-in-out infinite;
}

.heist-exit {
  fill: rgba(120, 42, 201, 0.94);
  stroke: rgba(232, 200, 255, 0.86);
  stroke-width: 1;
}

.hook-bg-grid {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(rgba(211, 167, 255, 0.14) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(211, 167, 255, 0.14) 1px, transparent 1px) 0 0 / 20px 20px;
  animation: hook-grid-flow 1.7s linear infinite;
}

.hook-anchor {
  width: 12px;
  height: 12px;
  top: 16%;
  left: 66%;
  border-radius: 50%;
  background: #f2dcff;
  box-shadow: 0 0 14px rgba(242, 220, 255, 0.95);
}

.hook-line {
  width: 2px;
  height: 52px;
  left: 67%;
  top: 22%;
  background: linear-gradient(to bottom, rgba(241, 217, 255, 0.98), rgba(165, 88, 255, 0.15));
  transform-origin: top center;
  animation: hook-line-swing 1.8s ease-in-out infinite;
}

.hook-player {
  width: 12px;
  height: 12px;
  left: 62%;
  top: 58%;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.95);
  animation: hook-player-swing 1.8s ease-in-out infinite;
}

.hook-orb {
  width: 10px;
  height: 10px;
  left: 28%;
  top: 56%;
  border-radius: 50%;
  background: #d8a6ff;
  box-shadow: 0 0 13px rgba(214, 147, 255, 0.95);
  animation: hook-orb-pulse 1.05s ease-in-out infinite;
}

.hook-spikes {
  left: 8%;
  right: 8%;
  bottom: 10px;
  height: 12px;
  background:
    linear-gradient(135deg, transparent 50%, rgba(186, 114, 255, 0.95) 50%) 0 0 / 10px 12px,
    linear-gradient(225deg, transparent 50%, rgba(140, 62, 230, 0.9) 50%) 0 0 / 10px 12px;
  opacity: 0.9;
}

.zf-crosshair {
  left: calc(50% - 13px);
  top: calc(50% - 13px);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(241, 221, 255, 0.7);
  box-shadow: 0 0 10px rgba(241, 221, 255, 0.5);
}

.zf-crosshair::before,
.zf-crosshair::after {
  content: "";
  position: absolute;
  background: rgba(241, 221, 255, 0.8);
}

.zf-crosshair::before {
  left: 11px;
  top: -5px;
  width: 2px;
  height: 36px;
}

.zf-crosshair::after {
  left: -5px;
  top: 11px;
  width: 36px;
  height: 2px;
}

.zf-zombie {
  width: 16px;
  height: 24px;
  border-radius: 4px 4px 6px 6px;
  background: linear-gradient(180deg, #cca6ff 0%, #8a4ee0 65%, #6532b1 100%);
  box-shadow: 0 0 10px rgba(176, 110, 255, 0.7);
  animation: zf-shamble 1.5s ease-in-out infinite;
}

.zf-zombie.zz1 {
  left: 24%;
  bottom: 14px;
}

.zf-zombie.zz2 {
  left: 68%;
  bottom: 20px;
  animation-delay: 0.3s;
}

.zf-flash {
  width: 20px;
  height: 20px;
  left: 52%;
  top: 44%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 241, 255, 0.94) 0%, rgba(189, 99, 255, 0) 72%);
  animation: zf-flash 1.1s ease-out infinite;
}

.bomber-grid {
  inset: 10px;
  border-radius: 8px;
  background:
    linear-gradient(rgba(198, 138, 255, 0.12) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(198, 138, 255, 0.12) 1px, transparent 1px) 0 0 / 18px 18px;
}

.bomber-crate {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(135deg, #9c59ea, #6d2fbc);
  box-shadow:
    0 0 10px rgba(180, 114, 255, 0.66),
    inset 0 0 0 1px rgba(236, 204, 255, 0.3);
}

.bomber-crate.bc1 {
  left: 28%;
  top: 30%;
}

.bomber-crate.bc2 {
  left: 56%;
  top: 54%;
}

.bomber-enemy {
  width: 14px;
  height: 14px;
  left: 64%;
  top: 24%;
  border-radius: 4px;
  background: #f0ddff;
  box-shadow: 0 0 12px rgba(240, 221, 255, 0.9);
  animation: bomber-enemy-drift 1.6s ease-in-out infinite;
}

.bomber-bomb {
  width: 12px;
  height: 12px;
  left: 44%;
  top: 46%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f2e5ff 0%, #b560ff 42%, #6a2db8 100%);
  box-shadow: 0 0 12px rgba(200, 132, 255, 0.88);
  animation: bomber-bomb-pulse 0.8s ease-in-out infinite;
}

.bomber-bomb::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 8px;
  left: 6px;
  top: -6px;
  border-radius: 999px;
  background: linear-gradient(to top, #f3e6ff, rgba(243, 230, 255, 0));
}

.bomber-blast {
  width: 34px;
  height: 34px;
  left: calc(44% - 11px);
  top: calc(46% - 11px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 222, 255, 0.94) 0%, rgba(182, 99, 255, 0.74) 38%, rgba(119, 40, 210, 0) 74%);
  animation: bomber-blast-pop 1.1s ease-out infinite;
}

.threed-thumb {
  background:
    radial-gradient(circle at 50% 30%, rgba(177, 101, 255, 0.22), rgba(14, 6, 24, 0) 55%),
    linear-gradient(150deg, #12081e, #07040e);
}

.td-grid {
  left: 10%;
  right: 10%;
  bottom: 10px;
  height: 58%;
  transform-origin: center bottom;
  transform: perspective(80px) rotateX(62deg);
  background:
    linear-gradient(rgba(199, 142, 255, 0.26) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, rgba(199, 142, 255, 0.26) 1px, transparent 1px) 0 0 / 14px 14px;
  animation: td-grid-flow 1.4s linear infinite;
}

.td-horizon {
  left: 24%;
  right: 24%;
  top: 30%;
  height: 2px;
  background: rgba(220, 182, 255, 0.84);
  box-shadow: 0 0 12px rgba(220, 182, 255, 0.82);
}

.td-runner {
  width: 12px;
  height: 12px;
  left: calc(50% - 6px);
  bottom: 16px;
  border-radius: 3px;
  background: #f4e7ff;
  box-shadow: 0 0 12px rgba(244, 231, 255, 0.9);
}

.td-road {
  left: 38%;
  right: 38%;
  top: 8px;
  bottom: 8px;
  background: linear-gradient(180deg, rgba(195, 129, 255, 0.16), rgba(195, 129, 255, 0.45));
}

.td-car {
  width: 14px;
  height: 20px;
  left: 48%;
  bottom: 10px;
  border-radius: 4px;
  background: #f4e4ff;
  box-shadow: 0 0 12px rgba(244, 228, 255, 0.88);
}

.td-traffic {
  left: 42%;
  top: 18px;
  bottom: auto;
  background: #aa62f3;
  animation: td-traffic-move 1.2s linear infinite;
}

.td-ring {
  width: 44px;
  height: 44px;
  left: 18%;
  top: 20%;
  border-radius: 50%;
  border: 3px solid #c680ff;
  box-shadow: 0 0 14px rgba(198, 128, 255, 0.76);
}

.td-core {
  width: 14px;
  height: 14px;
  left: 32%;
  top: 34%;
  border-radius: 50%;
  background: #f5e8ff;
  box-shadow: 0 0 12px rgba(245, 232, 255, 0.92);
}

.td-bolt {
  width: 34px;
  height: 3px;
  left: 42%;
  top: 40%;
  transform: rotate(-22deg);
  background: linear-gradient(to right, rgba(244, 228, 255, 0.9), rgba(155, 70, 239, 0));
  box-shadow: 0 0 12px rgba(244, 228, 255, 0.7);
}

.td-cube {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(145deg, #bd78ff, #7a35ca);
  box-shadow: 0 0 12px rgba(189, 120, 255, 0.72);
}

.td-cube.c1 {
  left: 24%;
  top: 24%;
}

.td-cube.c2 {
  left: 50%;
  top: 38%;
}

.td-cube.c3 {
  left: 36%;
  top: 56%;
}

.td-flash {
  width: 26px;
  height: 26px;
  left: 58%;
  top: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 232, 255, 0.95), rgba(173, 89, 255, 0) 70%);
  animation: td-flash-pop 1.1s ease-out infinite;
}

.td-planet {
  width: 34px;
  height: 34px;
  left: 56%;
  top: 26%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f1dcff, #944be0 62%);
  box-shadow: 0 0 14px rgba(176, 96, 255, 0.82);
}

.td-orbit {
  width: 60px;
  height: 34px;
  left: 47%;
  top: 27%;
  transform: translateX(-50%) rotate(-12deg);
  border-radius: 50%;
  border: 2px solid rgba(213, 165, 255, 0.52);
}

.td-ball {
  width: 8px;
  height: 8px;
  left: 68%;
  top: 22%;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.95);
  animation: td-orbit-ball 1.7s linear infinite;
}

.td-wing {
  width: 22px;
  height: 12px;
  left: 32%;
  top: 52%;
  transform: rotate(-18deg);
  border-radius: 999px 2px 999px 2px;
  background: #f2e3ff;
  box-shadow: 0 0 12px rgba(242, 227, 255, 0.88);
}

.td-gate {
  width: 32px;
  height: 32px;
  left: 64%;
  top: 28%;
  border-radius: 50%;
  border: 3px solid #b56cff;
  box-shadow: 0 0 14px rgba(181, 108, 255, 0.78);
}

.td-trail {
  width: 36px;
  height: 3px;
  left: 22%;
  top: 58%;
  transform: rotate(-16deg);
  background: linear-gradient(to right, rgba(197, 133, 255, 0), rgba(197, 133, 255, 0.92));
}

.td-shaft {
  inset: 12px 22px;
  border-radius: 8px;
  border: 2px solid rgba(180, 111, 255, 0.5);
  box-shadow: inset 0 0 18px rgba(150, 75, 240, 0.34);
}

.td-gate-bar {
  left: 26%;
  right: 26%;
  top: 36%;
  height: 5px;
  border-radius: 999px;
  background: #daacff;
  box-shadow: 0 0 12px rgba(218, 172, 255, 0.88);
  animation: td-gate-sweep 1.1s ease-in-out infinite;
}

.td-pod {
  width: 12px;
  height: 12px;
  left: 48%;
  bottom: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.92);
}

.td-cave {
  inset: 10px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 24% 36%, rgba(153, 72, 237, 0.5), rgba(12, 6, 20, 0) 40%),
    radial-gradient(circle at 70% 62%, rgba(153, 72, 237, 0.46), rgba(12, 6, 20, 0) 42%),
    #120920;
}

.td-crystal {
  width: 0;
  height: 0;
  left: 52%;
  top: 28%;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 20px solid #dfb4ff;
  filter: drop-shadow(0 0 10px rgba(223, 180, 255, 0.9));
  animation: td-crystal-glint 1.4s ease-in-out infinite;
}

.td-crystal.c-small {
  left: 30%;
  top: 54%;
  border-left-width: 6px;
  border-right-width: 6px;
  border-bottom-width: 14px;
  animation-delay: 0.35s;
}

.arcade-link,
.back-link,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #d13bff;
  color: #f1e8ff;
  text-decoration: none;
  font-family: "Orbitron", sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 18px;
  width: fit-content;
  cursor: pointer;
  background: linear-gradient(140deg, #130223, #470a86 55%, #780fcd);
  box-shadow:
    0 0 18px rgba(179, 0, 255, 0.72),
    0 0 36px rgba(122, 0, 230, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.arcade-link:hover,
.back-link:hover,
button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow:
    0 0 22px rgba(223, 112, 255, 0.88),
    0 0 44px rgba(122, 0, 230, 0.62);
}

button {
  border-width: 0;
}

.mini-link {
  padding: 8px 14px;
  font-size: 0.8rem;
}

.soon-link {
  opacity: 0.72;
  cursor: default;
  pointer-events: none;
  filter: saturate(0.8) brightness(0.92);
}

.back-link {
  margin-bottom: 14px;
}

.controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: #e8dbff;
  font-size: 1.1rem;
}

.controls button {
  animation: game-button-surge 1.9s ease-in-out infinite;
}

.controls span,
.controls strong {
  text-shadow:
    0 0 8px rgba(181, 121, 255, 0.55),
    0 0 14px rgba(126, 57, 255, 0.34);
}

.game-status {
  margin: 2px 0 0;
  min-height: 1.25em;
  color: #d8bcff;
  font-family: "Orbitron", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(169, 103, 255, 0.66);
  animation: status-electric 1.7s ease-in-out infinite;
}

canvas {
  width: 100%;
  max-width: 100%;
  border: 2px solid #6a25be;
  border-radius: 12px;
  background: #05030a;
  box-shadow:
    0 0 0 1px rgba(196, 96, 255, 0.45) inset,
    0 0 24px rgba(179, 0, 255, 0.42);
  animation: canvas-neon-pulse 2.8s ease-in-out infinite;
}

#snake-canvas {
  aspect-ratio: 1 / 0.94;
}

#pong-canvas,
#dodge-canvas,
#pulse-canvas {
  aspect-ratio: 18 / 13;
}

#brick-canvas {
  aspect-ratio: 18 / 13;
}

#drift-canvas {
  aspect-ratio: 18 / 13;
}

#siege-canvas {
  aspect-ratio: 18 / 13;
}

#racer-canvas {
  aspect-ratio: 18 / 13;
}

#runner-canvas {
  aspect-ratio: 18 / 13;
}

#skyline-canvas {
  aspect-ratio: 18 / 13;
}

#shield-canvas {
  aspect-ratio: 18 / 13;
}

#pinball-canvas {
  aspect-ratio: 1 / 1;
}

#bomber-canvas {
  aspect-ratio: 18 / 13;
}

#warp-canvas {
  aspect-ratio: 18 / 13;
}

#hook-canvas {
  aspect-ratio: 18 / 13;
}

#golf-canvas {
  aspect-ratio: 18 / 13;
}

#heist-canvas {
  aspect-ratio: 18 / 13;
}

#zombie-canvas {
  aspect-ratio: 16 / 9;
  height: min(74vh, 860px);
}

#vector-canvas,
#prism-canvas {
  aspect-ratio: 18 / 13;
}

.zombie-fps-page {
  max-width: min(1500px, calc(100vw - 20px));
  padding-top: 10px;
  padding-bottom: 14px;
}

.zombie-fps-card {
  gap: 10px;
}

.zombie-fps-card .card-top p {
  font-size: 0.96rem;
}

#stack-canvas {
  aspect-ratio: 1 / 2;
  width: min(100%, 200px);
  margin: 0 auto;
}

.stack-page {
  padding-top: 14px;
  padding-bottom: 18px;
}

.stack-page .game-card {
  padding: 12px;
  gap: 8px;
}

.mole-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: 8px;
}

.mole-cell {
  border: 2px solid #4b2c74;
  border-radius: 12px;
  background: #130a21;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  padding: 0;
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 -6px 16px rgba(0, 0, 0, 0.55);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.mole-cell::after {
  content: "";
  position: absolute;
  width: 56%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: #b478ff;
  box-shadow:
    0 0 10px rgba(180, 120, 255, 0.82),
    0 0 30px rgba(120, 48, 255, 0.52);
  left: 50%;
  bottom: -110%;
  transform: translateX(-50%);
  transition: bottom 0.15s ease;
}

.mole-cell.active::after {
  bottom: 16%;
}

.mole-cell.active {
  border-color: #b16aff;
  box-shadow:
    inset 0 -6px 16px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(177, 106, 255, 0.62);
}

.mole-cell.hit::after {
  background: #f1e6ff;
}

.void-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
  background: #11081d;
  border: 2px solid #4b2d73;
  border-radius: 12px;
  padding: 8px;
}

.void-cell {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  border: 1px solid #5b378c;
  border-radius: 6px;
  background: #3b235f;
  color: #f3e8ff;
  font-family: "Orbitron", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(203, 160, 255, 0.2);
}

.void-cell.revealed {
  background: #1b1030;
  border-color: #69439b;
}

.void-cell.flagged {
  background: #522a80;
}

.void-cell.mine {
  background: #7d2cbc;
}

.void-cell.exploded {
  animation: board-explode 0.45s ease-out forwards;
}

.void-cell.exploded::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 10px;
  background:
    radial-gradient(circle, rgba(255, 241, 184, 0.95) 0%, rgba(255, 168, 71, 0.9) 25%, rgba(228, 92, 255, 0.68) 58%, rgba(125, 44, 188, 0) 78%);
  pointer-events: none;
  animation: blast-ring 0.55s ease-out forwards;
}

@keyframes laser-pan {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -224px;
  }
}

@keyframes laser-pan-reverse {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 296px;
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.28;
  }
  50% {
    opacity: 0.54;
  }
}

@keyframes starfield-far {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.9;
  }
  50% {
    transform: translate3d(-18px, -28px, 0);
    opacity: 1;
  }
}

@keyframes starfield-near {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-34px, -44px, 0);
  }
}

@keyframes starfield-hue {
  0%,
  100% {
    filter: hue-rotate(0deg) saturate(1.2);
  }
  50% {
    filter: hue-rotate(18deg) saturate(1.45);
  }
}

@keyframes shooting-stars {
  0% {
    background-position:
      -240px 12%,
      -72px 15%,
      calc(100% + 240px) 22%,
      calc(100% + 72px) 24%,
      -220px 84%,
      -68px 80%,
      calc(100% + 220px) 78%,
      calc(100% + 64px) 74%;
  }
  14% {
    background-position:
      24% 38%,
      36% 42%,
      calc(100% + 240px) 22%,
      calc(100% + 72px) 24%,
      -220px 84%,
      -68px 80%,
      calc(100% + 220px) 78%,
      calc(100% + 64px) 74%;
  }
  34% {
    background-position:
      calc(100% + 240px) 48%,
      calc(100% + 72px) 52%,
      62% 56%,
      52% 50%,
      -220px 84%,
      -68px 80%,
      calc(100% + 220px) 78%,
      calc(100% + 64px) 74%;
  }
  56% {
    background-position:
      calc(100% + 240px) 48%,
      calc(100% + 72px) 52%,
      -240px 84%,
      -72px 80%,
      34% 52%,
      46% 46%,
      calc(100% + 220px) 78%,
      calc(100% + 64px) 74%;
  }
  78% {
    background-position:
      calc(100% + 240px) 48%,
      calc(100% + 72px) 52%,
      -240px 84%,
      -72px 80%,
      calc(100% + 220px) 20%,
      calc(100% + 64px) 24%,
      42% 58%,
      38% 54%;
  }
  100% {
    background-position:
      -240px 12%,
      -72px 15%,
      calc(100% + 240px) 22%,
      calc(100% + 72px) 24%,
      -220px 84%,
      -68px 80%,
      calc(100% + 220px) 78%,
      calc(100% + 64px) 74%;
  }
}

@keyframes comet-flicker-b {
  0%,
  100% {
    filter: brightness(1) saturate(1.1);
  }
  50% {
    filter: brightness(1.24) saturate(1.3);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes game-ambience-drift {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.9;
  }
  50% {
    transform: translate(10px, -8px);
    opacity: 1;
  }
}

@keyframes game-scanline-flow {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(6px);
  }
}

@keyframes game-card-throb {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(201, 106, 255, 0.5) inset,
      0 14px 34px rgba(0, 0, 0, 0.84),
      0 0 28px rgba(179, 0, 255, 0.7);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(224, 160, 255, 0.62) inset,
      0 16px 40px rgba(0, 0, 0, 0.86),
      0 0 40px rgba(202, 100, 255, 0.88);
  }
}

@keyframes game-border-sweep {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes game-button-surge {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-1px) scale(1.04);
    filter: brightness(1.18);
  }
}

@keyframes status-electric {
  0%,
  100% {
    opacity: 0.92;
    letter-spacing: 0.04em;
  }
  50% {
    opacity: 1;
    letter-spacing: 0.055em;
  }
}

@keyframes canvas-neon-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(196, 96, 255, 0.45) inset,
      0 0 24px rgba(179, 0, 255, 0.42);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(226, 160, 255, 0.62) inset,
      0 0 36px rgba(206, 108, 255, 0.68);
  }
}

@keyframes glow-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.08);
    filter: brightness(1.15);
  }
}

@keyframes snake-crawl {
  0%,
  100% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(9px) translateY(-2px);
  }
}

@keyframes snake-food-hop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.15);
  }
}

@keyframes pong-bounce {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-16px, -16px);
  }
  50% {
    transform: translate(-28px, 2px);
  }
  75% {
    transform: translate(-8px, 16px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes mole-pop {
  0%,
  100% {
    transform: translateY(8px);
    opacity: 0.25;
  }
  45%,
  70% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes dodge-drop {
  0% {
    transform: translateY(-22px);
    opacity: 0;
  }
  25%,
  75% {
    opacity: 1;
  }
  100% {
    transform: translateY(72px);
    opacity: 0;
  }
}

@keyframes pulse-ring-expand {
  0% {
    transform: scale(0.92);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.12);
    opacity: 0.25;
  }
}

@keyframes flag-blink {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.3);
  }
}

@keyframes mine-glow {
  0%,
  100% {
    box-shadow: inset 0 0 0 0 rgba(255, 242, 255, 0.2);
  }
  50% {
    box-shadow: inset 0 0 10px rgba(255, 242, 255, 0.35);
  }
}

@keyframes mini-bomb-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px);
  }
}

@keyframes fuse-spark {
  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.25);
    opacity: 1;
  }
}

@keyframes void-thumb-boom-core {
  0%,
  100% {
    transform: scale(0.85);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.16);
    filter: brightness(1.2);
  }
}

@keyframes void-thumb-boom-ring {
  0% {
    transform: scale(0.45);
    opacity: 0.95;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

@keyframes void-thumb-boom-spark {
  0% {
    transform: rotate(0deg) scale(1.1);
    opacity: 0.95;
  }
  100% {
    transform: rotate(360deg) scale(1.45);
    opacity: 0.35;
  }
}

@keyframes stack-drop {
  0% {
    top: 14%;
    opacity: 0.95;
  }
  65% {
    top: 56%;
    opacity: 1;
  }
  100% {
    top: 14%;
    opacity: 0.95;
  }
}

@keyframes brick-ball-bounce {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-20px, -24px);
  }
  50% {
    transform: translate(-40px, 0);
  }
  75% {
    transform: translate(-18px, 24px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes drift-float {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(7px, -5px);
  }
}

@keyframes drift-tilt {
  0%,
  100% {
    transform: rotate(18deg);
  }
  50% {
    transform: rotate(-6deg);
  }
}

@keyframes drift-shot {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    transform: translate(52px, -28px);
    opacity: 0;
  }
}

@keyframes siege-invader-drift {
  0%,
  100% {
    transform: translateX(-7px);
  }
  50% {
    transform: translateX(7px);
  }
}

@keyframes siege-cannon-slide {
  0%,
  100% {
    transform: translateX(-18px);
  }
  50% {
    transform: translateX(18px);
  }
}

@keyframes siege-shot-rise {
  0% {
    transform: translateY(12px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(-86px);
    opacity: 0;
  }
}

@keyframes racer-lane-flow {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 20px;
  }
}

@keyframes racer-traffic-drop {
  0% {
    transform: translateY(-26px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(96px);
    opacity: 0;
  }
}

@keyframes racer-flare-flicker {
  0%,
  100% {
    transform: scaleY(0.7);
    opacity: 0.5;
  }
  50% {
    transform: scaleY(1.1);
    opacity: 1;
  }
}

@keyframes runner-obstacle-move {
  0% {
    transform: translateX(52px);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    transform: translateX(-168px);
    opacity: 0;
  }
}

@keyframes runner-hop {
  0%,
  100% {
    transform: translateY(0);
  }
  44% {
    transform: translateY(-22px);
  }
  52% {
    transform: translateY(-24px);
  }
}

@keyframes runner-trail-fade {
  0%,
  100% {
    opacity: 0.3;
    transform: scaleX(0.8);
  }
  50% {
    opacity: 0.95;
    transform: scaleX(1.1);
  }
}

@keyframes skyline-missile-drop {
  0% {
    transform: translateY(-28px) rotate(var(--rot, 0deg));
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(88px) rotate(var(--rot, 0deg));
    opacity: 0;
  }
}

@keyframes skyline-burst-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.7);
    opacity: 0;
  }
}

@keyframes shield-ring-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes shield-shot-pulse {
  0%,
  100% {
    opacity: 0.7;
    transform: rotate(-18deg) scaleX(0.9);
  }
  50% {
    opacity: 1;
    transform: rotate(-18deg) scaleX(1.12);
  }
}

@keyframes pinball-bumper-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1);
    filter: brightness(1.22);
  }
}

@keyframes pinball-ball-bounce {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-18px, 12px);
  }
  50% {
    transform: translate(-34px, -8px);
  }
  75% {
    transform: translate(-14px, -22px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes bomber-bomb-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.12);
    filter: brightness(1.22);
  }
}

@keyframes bomber-blast-pop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  65% {
    transform: scale(1.18);
    opacity: 0.92;
  }
  100% {
    transform: scale(1.48);
    opacity: 0;
  }
}

@keyframes bomber-enemy-drift {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-8px, 8px);
  }
}

@keyframes zf-shamble {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-3px) rotate(2deg);
  }
}

@keyframes zf-flash {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

@keyframes td-grid-flow {
  from {
    background-position:
      0 0,
      0 0;
  }
  to {
    background-position:
      0 14px,
      14px 0;
  }
}

@keyframes td-traffic-move {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(62px);
    opacity: 0;
  }
}

@keyframes td-flash-pop {
  0% {
    transform: scale(0.55);
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

@keyframes td-orbit-ball {
  0% {
    transform: translate(-14px, 8px);
  }
  25% {
    transform: translate(2px, -2px);
  }
  50% {
    transform: translate(16px, 4px);
  }
  75% {
    transform: translate(0, 12px);
  }
  100% {
    transform: translate(-14px, 8px);
  }
}

@keyframes td-gate-sweep {
  0%,
  100% {
    transform: translateY(-6px);
  }
  50% {
    transform: translateY(8px);
  }
}

@keyframes td-crystal-glint {
  0%,
  100% {
    filter: drop-shadow(0 0 8px rgba(223, 180, 255, 0.75));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(244, 221, 255, 0.95));
  }
}

@keyframes board-explode {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes blast-ring {
  0% {
    transform: scale(0.35);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes void-sweep {
  0% {
    left: -36%;
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  70% {
    opacity: 0.9;
  }
  100% {
    left: 112%;
    opacity: 0;
  }
}

@keyframes void-counter-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes void-cell-flicker {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.18);
  }
}

@keyframes warp-thumb-grid {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(18px);
  }
}

@keyframes warp-thumb-ring {
  0% {
    transform: scale(0.35);
    opacity: 0.92;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

@keyframes warp-thumb-enemy1 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(30px, 24px);
  }
}

@keyframes warp-thumb-enemy2 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-34px, -26px);
  }
}

@keyframes warp-thumb-shard {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(45deg) scale(1.15);
  }
}

@keyframes warp-thumb-ring-svg {
  0% {
    transform: scale(0.5);
    opacity: 0.95;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

@keyframes warp-thumb-enemy-svg-a {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(16px, 13px);
  }
}

@keyframes warp-thumb-enemy-svg-b {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-17px, -12px);
  }
}

@keyframes warp-thumb-shard-svg {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(45deg) scale(1.16);
  }
}

@keyframes hook-grid-flow {
  from {
    background-position:
      0 0,
      0 0;
  }
  to {
    background-position:
      0 20px,
      20px 0;
  }
}

@keyframes hook-line-swing {
  0%,
  100% {
    transform: rotate(-14deg);
  }
  50% {
    transform: rotate(12deg);
  }
}

@keyframes hook-player-swing {
  0%,
  100% {
    transform: translate(-8px, -2px);
  }
  50% {
    transform: translate(8px, 2px);
  }
}

@keyframes hook-orb-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.2);
    filter: brightness(1.2);
  }
}

@keyframes hook-line-swing-svg {
  0%,
  100% {
    transform: rotate(-14deg);
  }
  50% {
    transform: rotate(12deg);
  }
}

@keyframes hook-player-swing-svg {
  0%,
  100% {
    transform: translate(-7px, -2px);
  }
  50% {
    transform: translate(8px, 2px);
  }
}

@keyframes hook-orb-pulse-svg {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

@keyframes golf-well-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.18);
    opacity: 1;
  }
}

@keyframes golf-ball-orbit {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(10px, -10px);
  }
}

@keyframes golf-arc-flow {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -10;
  }
}

@keyframes golf-flag-wave {
  0%,
  100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(1.22);
  }
}

@keyframes heist-drone-float {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-6px, 2px);
  }
}

@keyframes heist-cone-sweep {
  0%,
  100% {
    transform: rotate(-14deg);
  }
  50% {
    transform: rotate(12deg);
  }
}

@keyframes heist-key-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

@keyframes heist-player-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

.audio-toggle {
  position: fixed;
  top: 64px;
  right: 14px;
  z-index: 70;
  border: 1px solid rgba(191, 131, 255, 0.7);
  border-radius: 999px;
  background: rgba(18, 10, 30, 0.78);
  color: #efd8ff;
  font-family: "Orbitron", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 7px 12px;
  box-shadow:
    0 0 0 1px rgba(140, 76, 214, 0.35) inset,
    0 0 12px rgba(156, 72, 230, 0.35);
  cursor: pointer;
}

body:not(.shell-on) .audio-toggle {
  top: 14px;
}

.audio-toggle:hover {
  background: rgba(31, 18, 49, 0.9);
  box-shadow:
    0 0 0 1px rgba(183, 105, 255, 0.4) inset,
    0 0 16px rgba(168, 84, 245, 0.5);
}

body.shell-on {
  padding-top: 58px;
}

.arcade-shell {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(7, 3, 12, 0.9);
  border-bottom: 1px solid rgba(167, 88, 245, 0.4);
  box-shadow:
    0 0 0 1px rgba(126, 58, 197, 0.25) inset,
    0 8px 24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(5px);
}

.arcade-shell-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.arcade-shell-home {
  color: #f4e4ff;
  font-family: "Orbitron", sans-serif;
  font-size: 0.9rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(182, 108, 255, 0.75);
}

.arcade-shell-sub {
  color: #bfa1ea;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.arcade-shell-right {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.arcade-shell-pill {
  border: 1px solid rgba(160, 84, 233, 0.52);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.72rem;
  color: #d9c3ff;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(22, 11, 34, 0.72);
}

.arcade-shell-pill strong {
  margin-left: 4px;
  color: #f6eaff;
  font-family: "Orbitron", sans-serif;
}

body.page-enter {
  opacity: 0;
}

body.page-enter.page-enter-active {
  opacity: 1;
  transition: opacity 0.24s ease;
}

body.page-exit {
  opacity: 0;
  transition: opacity 0.18s ease;
}

.pause-menu {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 90;
  background: rgba(5, 2, 10, 0.58);
  backdrop-filter: blur(4px);
}

.pause-menu.open {
  display: flex;
}

.pause-card {
  width: min(92vw, 340px);
  border: 1px solid rgba(173, 102, 245, 0.6);
  border-radius: 14px;
  background: rgba(14, 7, 24, 0.95);
  box-shadow:
    0 0 0 1px rgba(130, 56, 209, 0.36) inset,
    0 0 24px rgba(173, 102, 245, 0.38);
  padding: 14px;
  text-align: center;
}

.pause-card h3 {
  margin: 0 0 6px;
  font-family: "Orbitron", sans-serif;
  text-transform: uppercase;
}

.pause-card p {
  margin: 0 0 10px;
  color: #ceb8ef;
}

.pause-mix {
  margin: 0 0 10px;
  text-align: left;
}

.pause-mix label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: #dbc7f5;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 6px 0 3px;
}

.pause-mix input[type="range"] {
  width: 100%;
  accent-color: #b36dff;
}

.pause-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.pause-actions button {
  border: 1px solid rgba(175, 106, 248, 0.65);
  border-radius: 10px;
  background: rgba(36, 18, 55, 0.85);
  color: #f1e2ff;
  font-family: "Orbitron", sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  padding: 7px 9px;
  cursor: pointer;
}

.onboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 88;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 2, 8, 0.62);
}

.onboard-card {
  width: min(92vw, 420px);
  border: 1px solid rgba(171, 97, 244, 0.65);
  border-radius: 14px;
  background: rgba(12, 6, 22, 0.96);
  padding: 16px;
  box-shadow:
    0 0 0 1px rgba(132, 59, 209, 0.34) inset,
    0 0 24px rgba(171, 97, 244, 0.38);
}

.onboard-card h3 {
  margin: 0 0 8px;
  font-family: "Orbitron", sans-serif;
  text-transform: uppercase;
}

.onboard-card p {
  margin: 0 0 8px;
  color: #d6c2f0;
}

.onboard-card button {
  margin-top: 8px;
  border: 1px solid rgba(176, 105, 248, 0.7);
  border-radius: 10px;
  background: rgba(45, 23, 67, 0.88);
  color: #f3e6ff;
  font-family: "Orbitron", sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  padding: 8px 11px;
  cursor: pointer;
}

.game-card.game-single.score-burst {
  animation:
    rise 0.45s ease both,
    game-card-throb 3.2s ease-in-out infinite,
    shell-score-burst 0.16s ease-out;
}

.game-card.game-single.status-shock {
  animation:
    rise 0.45s ease both,
    game-card-throb 3.2s ease-in-out infinite,
    shell-status-shock 0.22s ease-out;
}

@keyframes shell-score-burst {
  0% { transform: scale(1); }
  50% { transform: scale(1.006); }
  100% { transform: scale(1); }
}

@keyframes shell-status-shock {
  0% {
    filter: brightness(1);
    box-shadow:
      0 0 0 1px rgba(201, 106, 255, 0.5) inset,
      0 14px 34px rgba(0, 0, 0, 0.84),
      var(--shadow-neon);
  }
  35% {
    filter: brightness(1.03);
    box-shadow:
      0 0 0 1px rgba(224, 156, 255, 0.7) inset,
      0 14px 34px rgba(0, 0, 0, 0.84),
      0 0 20px rgba(212, 128, 255, 0.45);
  }
  100% {
    filter: brightness(1);
    box-shadow:
      0 0 0 1px rgba(201, 106, 255, 0.5) inset,
      0 14px 34px rgba(0, 0, 0, 0.84),
      var(--shadow-neon);
  }
}

@media (max-width: 1100px) {
  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .container {
    padding: 20px 14px 32px;
  }

  .home-grid {
    grid-template-columns: 1fr;
  }

  .controls {
    font-size: 1rem;
  }

  .hero-title-row {
    flex-direction: column;
    gap: 8px;
  }

  #zombie-canvas {
    height: 60vh;
  }
}