:root {
  --bg: #080812;
  --panel: rgba(17, 18, 38, 0.92);
  --panel-soft: rgba(255, 255, 255, 0.08);
  --text: #f7f3ff;
  --muted: #b9b4d6;
  --cyan: #4dfcff;
  --pink: #ff4fd8;
  --purple: #8b5cf6;
  --gold: #f7c873;
  --dark: #0d0d1a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(255, 79, 216, 0.24), transparent 34%),
    radial-gradient(circle at bottom right, rgba(77, 252, 255, 0.18), transparent 36%),
    var(--bg);
  overflow-x: hidden;
}

.game-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.6;
  animation: gridDrift 20s linear infinite;
}

.bg-scan {
  position: absolute;
  inset: -10%;
  background:
    linear-gradient(
      115deg,
      transparent 38%,
      rgba(77, 252, 255, 0.08) 48%,
      rgba(255, 79, 216, 0.06) 54%,
      transparent 66%
    );
  animation: scanSweep 9s ease-in-out infinite;
  mix-blend-mode: screen;
}

.bg-monitor-wall {
  position: absolute;
  inset: 5% 0 0;
  opacity: 0.22;
}

.monitor {
  position: absolute;
  width: 140px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  border: 1px solid rgba(77, 252, 255, 0.18);
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.04) 0 2px,
      transparent 2px 5px
    ),
    radial-gradient(circle at center, rgba(77, 252, 255, 0.18), transparent 55%),
    linear-gradient(135deg, rgba(10, 20, 35, 0.92), rgba(4, 8, 18, 0.95));
  box-shadow:
    0 0 20px rgba(77, 252, 255, 0.08),
    0 0 34px rgba(77, 252, 255, 0.06);
  animation: monitorFlicker 5s steps(2) infinite;
}

.monitor::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 8px;
  background:
    radial-gradient(circle at center, rgba(180, 240, 255, 0.45), transparent 65%);
  opacity: 0.55;
}

.m1 { top: 7%; left: 8%; transform: rotate(-8deg); animation-delay: -1s; }
.m2 { top: 10%; left: 24%; transform: rotate(6deg); animation-delay: -2s; }
.m3 { top: 18%; right: 16%; transform: rotate(-10deg); animation-delay: -3s; }
.m4 { top: 28%; left: 12%; transform: rotate(10deg); animation-delay: -1.5s; }
.m5 { top: 35%; right: 8%; transform: rotate(-6deg); animation-delay: -2.4s; }
.m6 { top: 52%; left: 20%; transform: rotate(-7deg); animation-delay: -3.2s; }
.m7 { top: 58%; right: 22%; transform: rotate(8deg); animation-delay: -1.8s; }
.m8 { top: 70%; left: 6%; transform: rotate(5deg); animation-delay: -2.8s; }

.bg-alert-stack {
  position: absolute;
  inset: 0;
  opacity: 0.18;
}

.alert-box {
  position: absolute;
  padding: 12px 18px;
  border: 2px solid rgba(255, 79, 216, 0.8);
  color: rgba(255, 79, 216, 0.92);
  background: rgba(15, 5, 20, 0.72);
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(255, 79, 216, 0.12);
  animation: alertFloat 14s linear infinite;
}

.a1 { top: 12%; left: -2%; animation-delay: -2s; }
.a2 { top: 22%; right: -4%; animation-delay: -6s; }
.a3 { top: 48%; left: 8%; animation-delay: -9s; }
.a4 {
  top: 33%;
  left: 24%;
  color: rgba(255, 79, 216, 1);
  border-width: 3px;
  font-size: clamp(1rem, 2vw, 1.8rem);
  animation-delay: -4s;
}
.a5 {
  bottom: 15%;
  right: 12%;
  color: rgba(77, 252, 255, 0.95);
  border-color: rgba(77, 252, 255, 0.75);
  animation-delay: -10s;
}

.bg-moon {
  position: absolute;
  right: -120px;
  top: 120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 40%, rgba(225, 200, 255, 0.9), rgba(158, 94, 255, 0.45) 45%, rgba(90, 30, 140, 0.08) 72%, transparent 75%);
  filter: blur(2px);
  opacity: 0.32;
  box-shadow:
    0 0 90px rgba(180, 110, 255, 0.24),
    0 0 160px rgba(255, 79, 216, 0.08);
  animation: moonPulse 8s ease-in-out infinite;
}

.bg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, transparent 52%, rgba(0,0,0,0.28) 80%, rgba(0,0,0,0.66) 100%);
}

@keyframes gridDrift {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(44px);
  }
}

@keyframes scanSweep {
  0%, 100% {
    transform: translateX(-22%) translateY(0);
    opacity: 0.15;
  }
  50% {
    transform: translateX(18%) translateY(2%);
    opacity: 0.42;
  }
}

@keyframes monitorFlicker {
  0%, 100% {
    opacity: 0.8;
    transform: translateY(0);
  }
  25% {
    opacity: 0.95;
  }
  50% {
    opacity: 0.55;
  }
  75% {
    opacity: 0.9;
    transform: translateY(-3px);
  }
}

@keyframes alertFloat {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 0.95;
  }
  100% {
    transform: translateX(60px);
    opacity: 0;
  }
}

@keyframes moonPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.28;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.38;
  }
}

.game-header {
  padding: 32px 7vw 18px;
}

.back-link {
  display: inline-block;
  margin-bottom: 22px;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan);
}

.back-link:hover {
  color: var(--pink);
  border-bottom-color: var(--pink);
}

.eyebrow {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.82rem;
}

.game-header h1 {
  margin: 0;
  font-size: clamp(2.8rem, 7vw, 5.2rem);
  color: var(--cyan);
  text-shadow:
    0 0 18px rgba(77, 252, 255, 0.45),
    0 0 38px rgba(255, 79, 216, 0.18);
}

.subtitle {
  max-width: 760px;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 14px;
}

.game-stage {
  padding: 10px 7vw 110px;
}

.tv-section {
  width: min(1100px, 100%);
  margin: 0 auto;
  text-align: center;
}

.tv-shell {
  position: relative;
  width: min(760px, 100%);
  margin: 0 auto;
  cursor: pointer;
  filter: drop-shadow(0 0 28px rgba(77, 252, 255, 0.14));
}

.tv-antenna {
  position: absolute;
  top: -92px;
  width: 5px;
  height: 122px;
  background:
    linear-gradient(
      to bottom,
      rgba(57, 255, 20, 0.95),
      rgba(77, 252, 255, 0.85) 35%,
      rgba(255, 79, 216, 0.55) 72%,
      rgba(28, 34, 50, 0.95)
    );
  transform-origin: bottom center;
  border-radius: 999px;
  box-shadow:
    0 0 12px rgba(57, 255, 20, 0.45),
    0 0 24px rgba(77, 252, 255, 0.28),
    0 0 38px rgba(255, 79, 216, 0.16);
  z-index: 0;
}

.tv-antenna::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #39ff14;
  box-shadow:
    0 0 10px rgba(57, 255, 20, 0.9),
    0 0 22px rgba(77, 252, 255, 0.45),
    0 0 34px rgba(255, 79, 216, 0.25);
}

.tv-antenna::after {
  content: "";
  position: absolute;
  inset: 12px -7px auto;
  height: 46px;
  border-radius: 999px;
  background:
    linear-gradient(
      to bottom,
      rgba(77, 252, 255, 0.15),
      transparent
    );
  filter: blur(7px);
}

.antenna-left {
  left: 34%;
  transform: rotate(-24deg);
}

.antenna-right {
  right: 34%;
  transform: rotate(24deg);
}

.tv-frame {
  z-index: 2;
}

.tv-shell::before,
.tv-shell::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 44px;
  height: 16px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(8, 8, 18, 0.95), rgba(77, 252, 255, 0.18));
  border: 1px solid rgba(77, 252, 255, 0.45);
  box-shadow:
    0 0 14px rgba(77, 252, 255, 0.22),
    inset 0 0 10px rgba(255, 79, 216, 0.08);
  z-index: 1;
}

.tv-shell::before {
  left: 31%;
  transform: rotate(-8deg);
}

.tv-shell::after {
  right: 31%;
  transform: rotate(8deg);
}
.tv-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 24px;
  overflow: hidden;
  border: 3px solid rgba(0, 0, 0, 0.72);
  background:
    radial-gradient(circle at center, rgba(57, 255, 20, 0.03), transparent 45%),
    linear-gradient(135deg, #030405, #060815 45%, #0a0715);
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.95),
    inset 0 0 80px rgba(77, 252, 255, 0.06),
    inset 0 0 30px rgba(57, 255, 20, 0.04),
    0 0 24px rgba(77, 252, 255, 0.14);
}
.tv-screen .screen-overlay::before,
.tv-screen .screen-overlay::after {
  content: "";
  position: absolute;
  width: 42px;
  height: 42px;
  border-top: 2px solid rgba(57, 255, 20, 0.55);
  border-left: 2px solid rgba(57, 255, 20, 0.55);
  z-index: 7;
}

.tv-screen .screen-overlay::before {
  top: 14px;
  left: 14px;
}

.tv-screen .screen-overlay::after {
  bottom: 14px;
  right: 14px;
  transform: rotate(180deg);
}
.screen-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), transparent 25%, transparent 70%, rgba(255,255,255,0.05));
  pointer-events: none;
  z-index: 6;
}

.tv-static,
.tv-content {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 34px;
  text-align: center;
}

.tv-static {
  opacity: 0;
  pointer-events: none;
}

.tv-static.active {
  opacity: 1;
  pointer-events: auto;
}

.noise {
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(circle at 18% 22%, rgba(77, 252, 255, 0.18) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 72% 38%, rgba(255, 79, 216, 0.16) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 42% 80%, rgba(57, 255, 20, 0.16) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, #05070e, #0e0b1a 35%, #07161d 68%, #10081c);
  mix-blend-mode: screen;
  opacity: 0.9;
  animation: staticShift 0.15s steps(2) infinite, cyberStaticPulse 2.8s ease-in-out infinite;
}

.scanlines {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.06) 0 2px,
      transparent 2px 5px
    );
  opacity: 0.35;
  z-index: 2;
  pointer-events: none;
}

.signal-text {
  position: relative;
  z-index: 3;
  color: #39ff14;
  font-family: "Orbitron", Arial, sans-serif;
  text-shadow:
    0 0 8px rgba(57, 255, 20, 0.85),
    0 0 16px rgba(57, 255, 20, 0.65),
    0 0 28px rgba(57, 255, 20, 0.35);
}

.signal-text span {
  display: block;
  color: #8dff7a;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 12px;
  opacity: 0.95;
}

.signal-text strong {
  display: block;
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  letter-spacing: 2px;
}

.tv-content {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 4;
}

.tv-content.active {
  opacity: 1;
  transform: scale(1);
}

.tv-label {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.78rem;
}

.tv-content h2 {
  margin: 10px 0;
  color: var(--cyan);
  font-size: clamp(2rem, 5vw, 3.5rem);
  text-shadow:
    0 0 14px rgba(77, 252, 255, 0.45),
    0 0 25px rgba(255, 79, 216, 0.18);
}

.tv-content p {
  max-width: 600px;
  color: var(--muted);
  line-height: 1.75;
}

.tv-mini-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

.tv-mini-tags span {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(77, 252, 255, 0.08);
  border: 1px solid rgba(77, 252, 255, 0.18);
  color: var(--text);
  font-size: 0.84rem;
}

.tv-controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  margin-top: 20px;
}

.dial {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #a5a9b8, #373b48 55%, #1a1d26);
  border: 2px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 0 10px rgba(255,255,255,0.08),
    0 0 10px rgba(77, 252, 255, 0.06);
}

.speaker {
  min-height: 64px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(135deg, rgba(10, 12, 25, 0.92), rgba(20, 24, 40, 0.88)),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.04) 0 2px,
      transparent 2px 5px
    );
  box-shadow:
    inset 0 0 18px rgba(77, 252, 255, 0.04),
    0 0 18px rgba(0,0,0,0.22);
}

.tv-instruction {
  margin-top: 18px;
  color: var(--muted);
}

.video-archive {
  width: min(1100px, 100%);
  margin: 48px auto 0;
  padding: 28px;
  border-radius: 30px;
  border: 1px solid rgba(77, 252, 255, 0.2);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.05), rgba(77,252,255,0.025)),
    rgba(8, 8, 18, 0.68);
  box-shadow:
    0 0 42px rgba(77, 252, 255, 0.1),
    inset 0 0 30px rgba(255, 79, 216, 0.03);
  opacity: 1;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hidden-archive {
  opacity: 0;
  transform: translateY(28px);
  pointer-events: none;
}

.archive-heading h2 {
  color: var(--cyan);
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 8px 0;
}

.archive-heading p {
  color: var(--muted);
  line-height: 1.7;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.video-card {
  background: rgba(12, 12, 28, 0.86);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 22px;
  padding: 16px;
  box-shadow:
    inset 0 0 24px rgba(77, 252, 255, 0.03),
    0 0 22px rgba(0, 0, 0, 0.24);
  transition: 0.3s ease;
}

.video-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 79, 216, 0.45);
  box-shadow:
    0 0 28px rgba(255, 79, 216, 0.12),
    inset 0 0 24px rgba(77, 252, 255, 0.04);
}

.video-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  background: #050510;
  border: 1px solid rgba(77, 252, 255, 0.18);
  margin-bottom: 14px;
}

.video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-card h3 {
  color: var(--gold);
  margin-bottom: 8px;
}

.video-card p {
  color: var(--muted);
  line-height: 1.6;
}

.game-floating-menu {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 999px;
  background: rgba(8, 8, 18, 0.86);
  border: 1px solid rgba(77, 252, 255, 0.28);
  backdrop-filter: blur(14px);
  z-index: 80;
  box-shadow:
    0 0 28px rgba(77, 252, 255, 0.14),
    0 0 45px rgba(255, 79, 216, 0.08);
}

.game-floating-menu button {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease;
}

.game-floating-menu button:hover {
  color: #050511;
  background: var(--cyan);
  box-shadow: 0 0 20px rgba(77, 252, 255, 0.45);
}

@keyframes staticShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(2px, 2px); }
  100% { transform: translate(-1px, -2px); }
}
@keyframes cyberStaticPulse {
  0%, 100% {
    filter: hue-rotate(0deg) saturate(1);
  }
  50% {
    filter: hue-rotate(18deg) saturate(1.35);
  }
}
@media (max-width: 980px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 850px) {
  .tv-controls {
    grid-template-columns: repeat(2, 1fr);
  }

  .hud-power {
    grid-column: span 2;
  }

  .hud-status {
    display: none;
  }
}

@media (max-width: 650px) {
  .game-header,
  .game-stage {
    padding-left: 20px;
    padding-right: 20px;
  }

  .tv-frame {
    padding: 18px;
  }

  .channel-overlay {
    left: 12px;
    bottom: 12px;
    padding: 12px;
  }

  .channel-overlay p {
    display: none;
  }

  .recording-indicator {
    top: 12px;
    right: 12px;
  }

  .game-floating-menu {
    width: calc(100% - 24px);
    overflow-x: auto;
    justify-content: flex-start;
    border-radius: 18px;
  }

  .game-floating-menu button {
    white-space: nowrap;
  }

  .bg-moon {
    width: 280px;
    height: 280px;
    right: -80px;
    top: 160px;
  }

  .alert-box {
    font-size: 0.72rem;
    padding: 8px 12px;
  }

  .monitor {
    width: 90px;
  }
}
/* ===============================
   CHANNEL TV + STRONG VHS GLITCH
================================ */

.tv-video-content {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 4;
  background: #050510;
}

.tv-video-content.active {
  opacity: 1;
  transform: scale(1);
}

.main-tv-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Makes the video feel like it is inside old CRT glass */
.tv-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 52%, rgba(0, 0, 0, 0.45) 100%),
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.045) 0 2px,
      rgba(0, 0, 0, 0.12) 2px 5px
    );
  mix-blend-mode: screen;
  opacity: 0.55;
}

.channel-overlay {
  position: absolute;
  left: 18px;
  bottom: 18px;
  max-width: min(520px, calc(100% - 36px));
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(5, 5, 18, 0.72);
  border: 1px solid rgba(77, 252, 255, 0.22);
  backdrop-filter: blur(10px);
  text-align: left;
  z-index: 8;
  box-shadow:
    0 0 18px rgba(77, 252, 255, 0.12),
    0 0 30px rgba(255, 79, 216, 0.06);
}

.channel-overlay span {
  display: block;
  color: var(--gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.76rem;
  margin-bottom: 5px;
}

.channel-overlay strong {
  display: block;
  color: var(--cyan);
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.channel-overlay p {
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
  font-size: 0.9rem;
}

.recording-indicator {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--pink);
  font-weight: bold;
  letter-spacing: 1px;
  z-index: 8;
  text-shadow: 0 0 12px rgba(255, 79, 216, 0.6);
}

.recording-indicator span {
  width: 11px;
  height: 11px;
  background: var(--pink);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(255, 79, 216, 0.9);
  animation: recBlink 1s steps(2) infinite;
}

@keyframes recBlink {
  0%, 50% {
    opacity: 1;
  }

  51%, 100% {
    opacity: 0.25;
  }
}

/* Channel buttons */
.channel-btn,
.power-btn {
  border: 1px solid rgba(77, 252, 255, 0.35);
  background:
    linear-gradient(135deg, rgba(8, 8, 18, 0.94), rgba(20, 18, 35, 0.9));
  color: var(--text);
  border-radius: 16px;
  padding: 12px 15px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease;
  box-shadow:
    inset 0 0 10px rgba(77, 252, 255, 0.03),
    0 0 12px rgba(77, 252, 255, 0.08);
}

.channel-btn::before,
.power-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(77, 252, 255, 0.08) 45%,
      transparent 65%
    );
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.channel-btn:hover::before,
.power-btn:hover::before {
  transform: translateX(100%);
}

.power-btn {
  border-color: rgba(247, 200, 115, 0.48);
  box-shadow:
    0 0 16px rgba(247, 200, 115, 0.08),
    inset 0 0 16px rgba(255, 79, 216, 0.03);
}

.channel-btn:hover,
.power-btn:hover {
  color: #050511;
  background: linear-gradient(135deg, var(--cyan), #8dff7a);
  box-shadow:
    0 0 20px rgba(77, 252, 255, 0.42),
    0 0 28px rgba(57, 255, 20, 0.18);
}
}
.hud-kicker {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 6px;
}

.hud-btn strong,
.hud-status strong {
  font-size: 0.95rem;
  font-weight: 700;
}

.hud-status {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 14px;
  color: var(--text);
}

.hud-power .hud-kicker {
  color: var(--pink);
}
/* Replace old video boxes with channel cards */
.video-card {
  cursor: pointer;
}

.video-card.active-channel {
  border-color: rgba(77, 252, 255, 0.65);
  box-shadow:
    0 0 28px rgba(77, 252, 255, 0.18),
    0 0 40px rgba(255, 79, 216, 0.1);
}

.video-thumb {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border-radius: 18px;
  margin-bottom: 14px;
  background:
    radial-gradient(circle at center, rgba(77, 252, 255, 0.12), transparent 55%),
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.05) 0 2px,
      transparent 2px 5px
    ),
    linear-gradient(135deg, rgba(255, 79, 216, 0.2), rgba(77, 252, 255, 0.08));
  border: 1px solid rgba(77, 252, 255, 0.2);
}

.video-thumb span {
  color: var(--gold);
  font-size: 1.4rem;
  letter-spacing: 3px;
  font-weight: bold;
  text-shadow:
    0 0 12px rgba(247, 200, 115, 0.5),
    0 0 24px rgba(77, 252, 255, 0.25);
}

/* VHS glitch layer */
.vhs-glitch-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255, 255, 255, 0.12) 12%,
      transparent 16%,
      rgba(77, 252, 255, 0.12) 38%,
      transparent 42%,
      rgba(255, 79, 216, 0.12) 67%,
      transparent 72%
    );
  mix-blend-mode: screen;
}

.vhs-glitch-layer.active {
  animation: vhsBurst 0.55s steps(2) forwards;
}

.tv-screen.glitching {
  animation: screenJitter 0.45s steps(2) forwards;
}

.tv-screen.glitching .main-tv-video {
  animation: videoGlitch 0.45s steps(2) forwards;
}

@keyframes vhsBurst {
  0% {
    opacity: 0;
    transform: translateY(-20px);
    filter: hue-rotate(0deg);
  }

  20% {
    opacity: 1;
    transform: translateY(12px);
    filter: hue-rotate(60deg);
  }

  40% {
    opacity: 0.65;
    transform: translateY(-8px) skewX(4deg);
    filter: hue-rotate(160deg);
  }

  70% {
    opacity: 0.85;
    transform: translateY(18px) skewX(-5deg);
    filter: hue-rotate(260deg);
  }

  100% {
    opacity: 0;
    transform: translateY(0);
    filter: hue-rotate(0deg);
  }
}

@keyframes screenJitter {
  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(-4px, 2px);
  }

  40% {
    transform: translate(3px, -3px);
  }

  60% {
    transform: translate(-2px, 4px);
  }

  80% {
    transform: translate(4px, -1px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes videoGlitch {
  0% {
    filter: contrast(1) saturate(1);
    transform: scale(1);
  }

  25% {
    filter: contrast(1.8) saturate(1.7) hue-rotate(35deg);
    transform: scale(1.04) translateX(-6px);
  }

  50% {
    filter: contrast(0.8) saturate(2) hue-rotate(-35deg);
    transform: scale(1.03) translateX(5px);
  }

  75% {
    filter: contrast(1.5) saturate(1.4) hue-rotate(90deg);
    transform: scale(1.05) translateY(-3px);
  }

  100% {
    filter: contrast(1) saturate(1);
    transform: scale(1);
  }
}

/* CYBERPUNK CUSTOM CURSOR */

body {
  cursor: none;
}

button,
a,
.portal-card,
.unlock-card,
.world-card,
.case-card,
.video-card,
.skill-pill,
.branch-btn,
.tv-shell,
.book-cover {
  cursor: none;
}

.custom-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 12px rgba(77, 252, 255, 0.9),
    0 0 24px rgba(255, 79, 216, 0.35);
  mix-blend-mode: screen;
}

.cursor-trail {
  position: fixed;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(
      circle,
      rgba(77, 252, 255, 0.18),
      rgba(255, 79, 216, 0.12) 45%,
      transparent 70%
    );
  filter: blur(2px);
  mix-blend-mode: screen;
}

.custom-cursor.cursor-hover {
  width: 34px;
  height: 34px;
  border-color: var(--pink);
  box-shadow:
    0 0 14px rgba(255, 79, 216, 0.95),
    0 0 28px rgba(77, 252, 255, 0.4);
}

.cursor-trail.cursor-hover {
  width: 70px;
  height: 70px;
  background:
    radial-gradient(
      circle,
      rgba(255, 79, 216, 0.2),
      rgba(77, 252, 255, 0.13) 45%,
      transparent 72%
    );
}

@media (max-width: 850px) {
  body,
  button,
  a {
    cursor: auto;
  }

  .custom-cursor,
  .cursor-trail {
    display: none;
  }
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  box-shadow: 0 0 18px rgba(247, 200, 115, 0.45);
}