:root {
  --phosphor: #3dff6e;
  --phosphor-dim: #1c9c43;
  --glow: rgb(61 255 110 / .55);
  --tube: #010603;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: #000;
  color: var(--phosphor);
  font: 22px/1.25 "VT323", ui-monospace, "Cascadia Mono", Consolas, monospace;
  overflow: hidden;
}

/* The tube */
.crt { height: 100%; padding: clamp(6px, 1.6vmin, 18px); background: #050505; }
.screen {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 34px / 28px;
  background: radial-gradient(ellipse at 50% 45%, #07301a 0%, #031a0c 45%, var(--tube) 100%);
  box-shadow:
    inset 0 0 140px rgb(0 0 0 / .95),
    inset 0 0 22px rgb(61 255 110 / .12),
    0 0 0 2px #0b140d,
    0 0 40px rgb(61 255 110 / .06);
  animation: flicker 4s infinite steps(1);
}

/* Scanlines and vignette sit above everything */
.screen::before, .screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.screen::before {
  background: repeating-linear-gradient(to bottom, rgb(0 0 0 / .38) 0 1px, transparent 1px 3px);
}
.screen::after {
  background: radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / .7) 100%);
}

/* A slow bright band rolling down the tube */
.roll {
  position: absolute; left: 0; right: 0; height: 18vh; top: -20vh; z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgb(61 255 110 / .045), transparent);
  animation: roll 7s linear infinite;
}

#skull { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; filter: drop-shadow(0 0 3px rgb(61 255 110 / .65)); }

/* Overlay text */
.hud {
  position: relative; z-index: 3; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(14px, 3vmin, 32px) clamp(18px, 4vmin, 44px);
  text-shadow: 0 0 3px var(--phosphor), 0 0 14px var(--glow);
}
.hud-row { display: flex; justify-content: space-between; gap: 16px; font-size: clamp(16px, 2.2vmin, 22px); color: var(--phosphor-dim); letter-spacing: .06em; }
.hud-row b { color: var(--phosphor); font-weight: 400; }
.rec { color: #ff4040; text-shadow: 0 0 6px #ff4040; animation: blink 1.2s steps(1) infinite; }

main { text-align: center; margin-top: auto; padding-bottom: clamp(8px, 4vh, 48px); }

.logo {
  position: relative; display: inline-block; margin: 0;
  font-weight: 400; font-size: clamp(64px, 15vmin, 170px); line-height: .9; letter-spacing: .08em;
  text-shadow: 0 0 4px var(--phosphor), 0 0 22px var(--glow), 0 0 60px rgb(61 255 110 / .25);
}
/* Occasional horizontal tearing on the logo */
.logo::before, .logo::after {
  content: attr(data-text); position: absolute; inset: 0; opacity: 0;
}
.logo::before { color: #b6ffcb; animation: tear-a 5.3s infinite steps(1); }
.logo::after  { color: #0f7a33; animation: tear-b 5.3s infinite steps(1); }

.tags { margin: 10px 0 0; font-size: clamp(18px, 3vmin, 28px); letter-spacing: .3em; color: var(--phosphor-dim); }

.term {
  margin: clamp(14px, 3vh, 28px) auto 0; min-height: 5em; max-width: 34ch;
  text-align: left; font-size: clamp(18px, 2.7vmin, 26px); white-space: pre-wrap;
}
.cursor { animation: blink 1s steps(1) infinite; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes roll { to { top: 110vh; } }
@keyframes flicker {
  0%, 100% { filter: brightness(1); }
  37% { filter: brightness(.93); }
  38% { filter: brightness(1.04); }
  71% { filter: brightness(.97); }
}
@keyframes tear-a {
  0%, 91%, 100% { opacity: 0; transform: none; }
  92% { opacity: .8; clip-path: inset(20% 0 55% 0); transform: translateX(-6px); }
  94% { opacity: .8; clip-path: inset(62% 0 14% 0); transform: translateX(5px); }
}
@keyframes tear-b {
  0%, 92%, 100% { opacity: 0; transform: none; }
  93% { opacity: .9; clip-path: inset(40% 0 38% 0); transform: translateX(8px); }
  95% { opacity: .9; clip-path: inset(8% 0 80% 0); transform: translateX(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .screen, .roll, .logo::before, .logo::after, .rec, .cursor { animation: none; }
  .roll { display: none; }
}