/* HOPE THIS HELPS — the tube.
 *
 * This is deliberately NOT a theme. Themes are the thing being displayed; this
 * is the monitor displaying them. It never changes, which is the same reason the
 * layout never changes — it gives the eleven worlds one physical place to happen
 * in, and makes them read as broadcasts rather than as redesigns.
 *
 * Curvature note: nothing here geometrically warps the content, and that is on
 * purpose. Real barrel distortion needs an SVG displacement filter, which does
 * not move hit-testing with it — clicks would land somewhere other than where
 * the pixels appear. In a game about clicking small things that is a fairness
 * bug, not a visual flourish. Curvature is implied instead, by rounding the
 * screen corners and doing the edge falloff a curved tube actually produces.
 *
 * Everything is pointer-events: none except the toggle on the bezel.
 */

:root {
  --crt-scanline: 0.20;   /* darkness of the scan lines */
  --crt-grille: 0.05;     /* aperture-grille RGB shimmer */
  --crt-vignette: 0.50;   /* edge falloff = implied curvature */
}

#crt,
#bezel {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* the glass sits above everything, including the glitch — you are looking
   through the tube at the damage, not at damage painted over the tube */
#crt { z-index: 300; overflow: hidden; }
#bezel { z-index: 320; }

[data-crt="off"] #crt,
[data-crt="off"] #bezel { display: none; }

/* ---------- scan lines ---------- */

.crt-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, var(--crt-scanline)) 0 1px,
    transparent 1px 3px
  );
}

/* ---------- aperture grille ---------- */

.crt-grille {
  position: absolute;
  inset: 0;
  opacity: var(--crt-grille);
  mix-blend-mode: overlay;
  background: repeating-linear-gradient(
    90deg,
    #ff2d2d 0 1px,
    #2dff64 1px 2px,
    #2d6bff 2px 3px
  );
}

/* ---------- glass: bloom top-left, falloff at the edges ---------- */

.crt-glass {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 42% at 24% 12%, rgba(255, 255, 255, 0.07), transparent 62%),
    radial-gradient(125% 95% at 50% 46%, transparent 52%, rgba(0, 0, 0, 0.5) 100%);
}

/* ---------- VHS: the slow roll and the occasional tracking fault ---------- */

.crt-roll {
  position: absolute;
  left: -5%;
  right: -5%;
  height: 20%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, 0.045) 45%,
    rgba(255, 255, 255, 0.02) 55%,
    transparent
  );
  animation: crt-roll 7.5s linear infinite;
}

@keyframes crt-roll {
  0%   { top: -22%; }
  100% { top: 104%; }
}

.crt-track {
  position: absolute;
  left: -6%;
  right: -6%;
  height: 2.5%;
  background: rgba(255, 255, 255, 0.09);
  opacity: 0;
  animation: crt-track 11s ease-in infinite;
}
.crt-track:nth-of-type(2) { animation-delay: 4.7s; animation-duration: 17s; }

@keyframes crt-track {
  0%, 88%   { opacity: 0; top: 34%; transform: translateX(0); }
  89%       { opacity: 1; top: 34%; transform: translateX(-1.6%); }
  91%       { opacity: 1; top: 52%; transform: translateX(1.1%); }
  92%, 100% { opacity: 0; top: 52%; transform: translateX(0); }
}

/* the very slight instability of a tube that has been on for thirty years */
.crt-flicker {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.055);
  animation: crt-flicker 3.4s steps(1, end) infinite;
}

@keyframes crt-flicker {
  0%, 100% { opacity: 0; }
  4%       { opacity: 1; }
  6%       { opacity: 0; }
  52%      { opacity: 0.6; }
  54%      { opacity: 0; }
}

/* ---------- bezel: rounds the screen corners, implies the curve ---------- */

#bezel {
  border-radius: 30px;
  box-shadow:
    /* fills everything outside the rounded rect — this is what actually
       produces curved screen corners without clipping any content */
    0 0 0 100vmax #07070a,
    inset 0 0 70px 16px rgba(0, 0, 0, var(--crt-vignette)),
    inset 0 0 210px 64px rgba(0, 0, 0, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ---------- the switch on the bezel ----------
   Lives on the monitor rather than in the menus, because act I has no menu bar
   and the tube has to be switchable from level 1. Heavy scanlines cost
   legibility, and in this game legibility is a fairness concern. */

#crt-toggle,
#snd-toggle {
  position: fixed;
  right: 14px;
  bottom: 8px;
  z-index: 340;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.3);
  opacity: 0.5;
}
#snd-toggle { right: 74px; }
#crt-toggle:hover,
#snd-toggle:hover { opacity: 1; }
#crt-toggle::before,
#snd-toggle::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2dff9b;
  box-shadow: 0 0 6px rgba(45, 255, 155, 0.8);
}
[data-crt="off"] #crt-toggle::before,
[data-snd="off"] #snd-toggle::before {
  background: #444;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .crt-roll,
  .crt-track,
  .crt-flicker { animation: none; opacity: 0; }
}