@font-face {
  font-family: "VT323";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/vt323-latin.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --room: #0a0a0a;
  --bezel: #1c1c1c;
  --screen: #041405;
  --phosphor: #39ff6a;
  --phosphor-dim: #1b9e3d;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(ellipse at 50% 30%, #1a1a1a 0%, var(--room) 70%);
  font-family: "VT323", "Courier New", ui-monospace, monospace;
}

/* Bezeln - det yttre "höljet" runt själva bildröret */
.crt {
  position: relative;
  width: min(640px, 100%);
  padding: 2.5rem 2rem;
  background: var(--bezel);
  border-radius: 38px;
  box-shadow:
    0 0 0 2px #050505,
    0 25px 60px rgba(0, 0, 0, 0.7),
    inset 0 0 0 10px #111;
}

/* Själva skärmen - mörkgrön botten, kraftigt rundade hörn för glaskänsla */
.crt main {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: var(--screen);
  padding: 3rem 2rem;
  text-align: center;
  box-shadow:
    inset 0 0 60px 10px rgba(0, 0, 0, 0.85),
    inset 0 0 12px 2px rgba(57, 255, 106, 0.15);
  animation: flicker 6.5s infinite;
}

/* Scanlines */
.crt main::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0.35) 2px,
    rgba(0, 0, 0, 0.35) 3px
  );
}

/* Vinjettering - simulerar rörets krökning, mörkare mot kanterna */
.crt main::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, 0.55) 100%
  );
  border-radius: 26px;
}

h1 {
  position: relative;
  color: var(--phosphor);
  text-shadow: 0 0 4px var(--phosphor), 0 0 12px rgba(57, 255, 106, 0.5);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

p {
  position: relative;
  color: var(--phosphor-dim);
  font-size: 1.4rem;
  margin: 0.3rem 0;
}

.terminal-pulse {
  color: var(--phosphor);
  text-shadow: 0 0 6px rgba(57, 255, 106, 0.8);
  animation: terminal-pulse 1.6s ease-in-out infinite;
}

.prompt {
  margin-top: 1.5rem;
  font-size: 1.4rem;
  color: var(--phosphor);
  text-shadow: 0 0 4px rgba(57, 255, 106, 0.7);
}

.cursor {
  animation: blink 1s steps(1) infinite;
}

@keyframes terminal-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

@keyframes blink {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes flicker {
  0%, 96%, 100% { filter: brightness(1); }
  97%            { filter: brightness(0.85); }
  98%            { filter: brightness(1.05); }
  99%            { filter: brightness(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .terminal-pulse,
  .cursor,
  .crt main {
    animation: none;
  }
}