.crt-monitor {
  position: relative;
  width: 94vw;
  height: 92vh;
  max-width: 1200px;
  max-height: 880px;
  margin: auto;
  border-radius: 28px / 26px;
  overflow: visible;

  /* Thick layered bezel */
  background: linear-gradient(145deg, #2a2a42, #1a1a2e, #111122);
  box-shadow:
    /* Inner screen depression */
    inset 0 0 30px rgba(0, 0, 0, 0.6),
    /* Bezel layers */
    0 0 0 4px #0d0d1a,
    0 0 0 8px #2a2a42,
    0 0 0 10px #3d3d5c,
    0 0 0 12px #1a1a2e,
    0 0 0 16px #0d0d1a,
    /* Outer ambient glow */
    0 0 40px rgba(0, 0, 0, 0.9),
    0 0 100px rgba(0, 229, 255, 0.03);

  z-index: 1;
}

/* Bezel rim highlight (simulates light hitting the bezel edge) */
.crt-monitor::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 30px / 28px;
  background: linear-gradient(155deg,
      rgba(255, 255, 255, 0.04) 0%,
      transparent 25%,
      transparent 75%,
      rgba(255, 255, 255, 0.02) 100%);
  pointer-events: none;
  z-index: 9999;
}

/* ---- INNER SCREEN AREA ----
 * The actual "glass" of the CRT — slightly convex, bulging outward.
 * The outward curve is achieved via:
 *   1. A rounder border-radius (more pronounced at corners)
 *   2. perspective() scale making center appear closer
 *   3. The .crt-lens-bubble element for the glass dome highlight
 */
.crt-screen {
  position: absolute;
  inset: 10px;
  /* Rounder corners = more curved glass feel */
  border-radius: 32px / 28px;
  overflow: hidden;
  background: #0a0e1a;
  /* Real barrel bulge via SVG filter + mild perspective lift */
  transform: perspective(900px) scale(1.012);
  transform-origin: center;
  filter: url(#crt-bulge-filter);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6);
}

/* Glass dome bubble highlight
 * A bright radial spot in the upper-center (like light bouncing off
 * the convex glass dome of an old CRT) + strong corner darkening.
 */
.crt-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 30px / 28px;
  background:
    /* Primary glass dome shine — upper center bright spot */
    radial-gradient(ellipse 55% 35% at 50% 22%,
      rgba(255, 255, 255, 0.035) 0%,
      rgba(255, 255, 255, 0.012) 40%,
      transparent 70%),
    /* Secondary soft glow bottom-left */
    radial-gradient(ellipse 40% 25% at 18% 80%,
      rgba(200, 230, 255, 0.012) 0%,
      transparent 70%),
    /* Corner darkening — outward-curved screens are dark at corners */
    radial-gradient(ellipse 78% 72% at 50% 50%,
      transparent 50%,
      rgba(0, 0, 0, 0.20) 75%,
      rgba(0, 0, 0, 0.38) 100%);
  pointer-events: none;
  z-index: 9990;
}

/* Screen edge curvature shadow
 * Thin dark border inside the bezel that reinforces the
 * curved-glass inset feeling.
 */
.crt-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 30px / 28px;
  box-shadow:
    inset 0 0 35px rgba(0, 0, 0, 0.5),
    inset 0 0 8px rgba(0, 0, 0, 0.7),
    /* Subtle edge highlight (light catching the lip of the screen) */
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02);
  pointer-events: none;
  z-index: 9989;
}


/* ---- SCANLINES ----
 * Alternating bright and dark horizontal lines.
 */
.crt-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.035) 0px,
      rgba(255, 255, 255, 0.035) 1px,
      rgba(0, 0, 0, 0.18) 2px,
      rgba(0, 0, 0, 0.18) 4px
  );
  pointer-events: none;
  z-index: 9000;
  animation: scanlineScroll 12s linear infinite;
}

/* ---- VIGNETTE ----
 * Soft corner darkening.
 */
.crt-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8999;
  background: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.48) 100%);
}

/* ============================================================
   CRT LENS DISTORTION WAVES
   Three independent periodic distortions that give the screen
   a living, imperfect old-TV character.

   Wave 1 — HORIZONTAL SWEEP (4.8s cycle)
     A thin luminescent band drifts slowly downward,
     mimicking a signal refresh artifact.

   Wave 2 — ROLL BAR (8.2s cycle)
     A wider dark band rolls upward at a different rate,
     like a vertical sync issue on an old tuned-in TV.

   Wave 3 — SYNC JITTER (12.5s cycle)
     The whole screen briefly skews horizontally for a frame,
     like the horizontal-hold knob slipping on an old CRT.

   All three run at prime-ish intervals so they rarely align,
   keeping the effect feeling organic and not repetitive.
   ============================================================ */

/* WAVE layers — disabled */


/* ---- CHROMATIC ABERRATION ----
 * Subtle RGB color separation at screen edges.
 * Red shifts left, blue shifts right.
 */
.crt-chromatic {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9001;
  overflow: hidden;
}

/* Red channel — shifts left (visible but subtle) */
.crt-chromatic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(255, 30, 30, 0.016) 0%,
      transparent 5%,
      transparent 95%,
      rgba(255, 30, 30, 0.016) 100%);
  transform: translateX(-0.8px);
}

/* Blue channel — shifts right (visible but subtle) */
.crt-chromatic::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(30, 80, 255, 0.016) 0%,
      transparent 5%,
      transparent 95%,
      rgba(30, 80, 255, 0.016) 100%);
  transform: translateX(0.8px);
}

/* ---- PHOSPHOR GLOW ----
 * Subtle warm glow from the phosphor coating.
 */
.crt-phosphor {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%,
      rgba(100, 255, 180, 0.008) 0%,
      transparent 60%);
  pointer-events: none;
  z-index: 8998;
  mix-blend-mode: screen;
}

/* ---- NOISE / GRAIN OVERLAY ----
 * Very subtle animated static grain.
 */
.crt-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8997;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  animation: noiseShift 0.3s steps(5) infinite;
}

/* ---- SCREEN BLOOM ----
 * Overall slight glow around bright content.
 */
.crt-bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8996;
  box-shadow: inset 0 0 80px rgba(0, 229, 255, 0.015);
}

/* ---- FLICKER (ambient) ----
 * Occasional brightness flutter. Driven by JS adding .flash class.
 */
.crt-flicker {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8995;
  opacity: 0;
  background: rgba(255, 255, 255, 0.015);
  transition: opacity 0.05s;
}

.crt-flicker.flash {
  opacity: 1;
}

/* ---- BOOT OVERLAY ----
 * Covers the screen during the CRT power-on sequence.
 * JS toggles phase classes to step through the boot.
 */
.crt-boot-overlay {
  position: absolute;
  inset: 0;
  z-index: 9800;
  background: #000;
  pointer-events: none;
}

/* Phase: Black */
.crt-boot-overlay.phase-black {
  background: #000;
}

/* Phase: White flicker (CRT ignition) */
.crt-boot-overlay.phase-flicker {
  animation: bootFlicker 0.15s steps(3) forwards;
}

@keyframes bootFlicker {
  0% {
    background: #000;
  }

  30% {
    background: rgba(200, 255, 200, 0.08);
  }

  50% {
    background: #000;
  }

  70% {
    background: rgba(200, 255, 200, 0.04);
  }

  100% {
    background: rgba(255, 255, 255, 0.02);
  }
}

/* Phase: Horizontal scanline expanding from center */
.crt-boot-overlay.phase-scanline {
  background: #000;
}

.crt-boot-scanline {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(200, 255, 200, 0.7);
  box-shadow: 0 0 15px rgba(200, 255, 200, 0.5), 0 0 40px rgba(200, 255, 200, 0.2);
  transform: scaleY(1);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s;
  z-index: 1;
}

.crt-boot-scanline.expanding {
  height: 100vh;
  transform: scaleY(1);
  top: 0;
  opacity: 0;
}

/* Phase: Static noise burst */
.crt-boot-overlay.phase-static {
  animation: bootStatic 0.3s steps(4) infinite;
}

@keyframes bootStatic {
  0% {
    background: rgba(200, 200, 200, 0.05);
  }

  25% {
    background: rgba(100, 100, 100, 0.08);
  }

  50% {
    background: rgba(200, 200, 200, 0.03);
  }

  75% {
    background: rgba(150, 150, 150, 0.06);
  }

  100% {
    background: rgba(200, 200, 200, 0.04);
  }
}

/* Phase: Fade to content */
.crt-boot-overlay.phase-fadein {
  animation: bootFadeIn 0.8s ease-out forwards;
}

@keyframes bootFadeIn {
  0% {
    opacity: 1;
    background: rgba(0, 0, 0, 0.6);
  }

  100% {
    opacity: 0;
    background: transparent;
  }
}

/* ---- GLITCH TRANSITION OVERLAY ----
 * Brief CRT distortion between screens.
 * JS toggles .active class.
 */
.crt-glitch-overlay {
  position: absolute;
  inset: 0;
  z-index: 9700;
  pointer-events: none;
  opacity: 0;
}

.crt-glitch-overlay.active {
  animation: glitchFlash 0.6s steps(4) forwards;
}

@keyframes glitchFlash {
  0% {
    opacity: 1;
    background: rgba(0, 0, 0, 0.9);
  }

  15% {
    opacity: 1;
    background: rgba(200, 255, 200, 0.06);
    transform: translateX(3px);
  }

  30% {
    opacity: 1;
    background: rgba(0, 0, 0, 0.7);
    transform: translateX(-2px) skewX(1deg);
  }

  45% {
    opacity: 1;
    background: rgba(255, 200, 200, 0.04);
    transform: translateX(1px);
  }

  60% {
    opacity: 1;
    background: rgba(0, 0, 0, 0.5);
    transform: none;
  }

  80% {
    opacity: 0.5;
    background: rgba(0, 0, 0, 0.2);
  }

  100% {
    opacity: 0;
    transform: none;
  }
}

/* ---- POWER LED (removed) ---- */
.crt-power-led,
.crt-brand {
  display: none;
}

/* ============================================================
   GLOBAL BACKGROUND THEME ELEMENTS
   These sit behind the CRT screens to provide a continuous theme.
   ============================================================ */

/* ---- GLOBAL THEME BACKGROUND ----
 * Hidden by default; fades in when CRT boot completes.
 */
.global-theme-bg {
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

/* ---- SCENE ELEMENTS (trees, water, ground) ---- */
.menu-trees {
  position: absolute;
  bottom: 26%;
  left: 0;
  right: 0;
  height: 20%;
  z-index: 1;
  overflow: hidden;
}

.menu-trees::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -5%;
  right: -5%;
  height: 100%;
  background:
    radial-gradient(ellipse 12% 100% at 5% 100%, #1a2a4a 0%, #1a2a4a 60%, transparent 61%),
    radial-gradient(ellipse 10% 90% at 12% 100%, #122040 0%, #122040 60%, transparent 61%),
    radial-gradient(ellipse 14% 100% at 22% 100%, #1a2a4a 0%, #1a2a4a 60%, transparent 61%),
    radial-gradient(ellipse 12% 95% at 32% 100%, #1e3050 0%, #1e3050 60%, transparent 61%),
    radial-gradient(ellipse 16% 100% at 48% 100%, #1a2a4a 0%, #1a2a4a 60%, transparent 61%),
    radial-gradient(ellipse 12% 90% at 58% 100%, #122040 0%, #122040 60%, transparent 61%),
    radial-gradient(ellipse 14% 95% at 70% 100%, #1e3050 0%, #1e3050 60%, transparent 61%),
    radial-gradient(ellipse 12% 100% at 82% 100%, #1a2a4a 0%, #1a2a4a 60%, transparent 61%),
    radial-gradient(ellipse 10% 85% at 92% 100%, #122040 0%, #122040 60%, transparent 61%);
}

.menu-ground {
  position: absolute;
  bottom: 24%;
  left: 0;
  right: 0;
  height: 4%;
  background: linear-gradient(180deg, #c04a3a, #2a4a6a);
  box-shadow: 0 -2px 20px rgba(192, 74, 58, 0.3), 0 2px 20px rgba(42, 74, 106, 0.3);
  z-index: 2;
}

.menu-water {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 26%;
  background: linear-gradient(180deg, #1a3a5a 0%, #1a2a4a 40%, #0d2038 100%);
  z-index: 2;
  overflow: hidden;
}

.menu-water::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0, 229, 255, 0.05) 3px, rgba(0, 229, 255, 0.05) 5px);
  animation: waterRipple 3s ease-in-out infinite;
}

.menu-water::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent 0%, rgba(0, 229, 255, 0.08) 20%, transparent 40%,
      rgba(255, 215, 0, 0.05) 60%, transparent 80%, rgba(224, 64, 251, 0.06) 100%);
  animation: waterShimmer 5s ease-in-out infinite alternate;
}

/* ---- STARS (inside global background) ---- */
.menu-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.menu-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  animation: twinkle var(--tw-dur, 2s) ease-in-out infinite var(--tw-del, 0s);
}

@keyframes twinkle {

  0%,
  100% {
    opacity: var(--tw-a, 0.7);
  }

  50% {
    opacity: 0.1;
  }
}

/* Glowing horizon line — arcade sunset */
.global-theme-bg::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 74%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 215, 0, 0.6) 20%,
    rgba(224, 64, 251, 0.8) 50%,
    rgba(0, 229, 255, 0.6) 80%,
    transparent 100%);
  box-shadow:
    0 0 15px rgba(255, 215, 0, 0.4),
    0 0 40px rgba(224, 64, 251, 0.3),
    0 0 60px rgba(0, 229, 255, 0.15);
  z-index: 4;
  pointer-events: none;
  animation: horizonPulse 4s ease-in-out infinite;
}

@keyframes horizonPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Neon grid overlay for arcade feel */
.bg-neon-grid {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.12;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 39px,
      rgba(0, 229, 255, 0.5) 40px,
      transparent 41px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 39px,
      rgba(255, 215, 0, 0.3) 40px,
      transparent 41px
    );
}

@keyframes waterShimmer {
  0% { transform: translateX(-10%); opacity: 0.5; }
  100% { transform: translateX(10%); opacity: 1; }
}

/* ============================================================
   CRT BOOT STATE — scoped by body classes added in app.js
   ============================================================ */

/* Hide content layers during boot animation */
body.crt-booting .global-theme-bg,
body.crt-booting .start-screen,
body.crt-booting .menu-screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Reveal when CRT boot completes */
body.crt-ready .global-theme-bg {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease, visibility 0s linear 0s;
}