@import url('https://fonts.googleapis.com/css2?family=Doto:wght@400;700&display=swap');

:root {
  --crt-color: #ffcc66;
}


body {
  background: black;
  color: var(--crt-color);
  font-family: 'Courier New', Courier, monospace;
  padding: 2rem;
  font-size: 1.1rem;
  line-height: 1.4;
}

.hidden {
  display: none;
}

.boot-screen {
  text-transform: uppercase;
  white-space: pre-line;
  animation: flicker 2s infinite;
}

.dim {
  opacity: 0.5;
}

.terminal h1 {
  text-transform: uppercase;
  margin-bottom: 1rem;
}

ul.list {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 1rem;
}

ul.list li {
  cursor: pointer;
  padding: 0.2rem 0;
}

ul.list li.active {
  background: rgba(255, 204, 102, 0.1);
  padding-left: 0.5rem;
}

.info {
  border-top: 1px solid var(--crt-color);
  margin-top: 1rem;
  padding-top: 1rem;
  font-size: 1rem;
  opacity: 0.8;
  line-height:23px;
}

.controls {
  margin-top: 1rem;
}

button {
  background: transparent;
  color: #ffcc66;
  border: 1px solid var(--crt-color);
  padding: 0.5rem 1rem;
  cursor: pointer;
  text-transform: uppercase;
  font-family: inherit;
  font-size: 0.9rem;
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}


body {
  background: black;
  color: var(--crt-color);
  font-family: 'Doto', monospace;
  padding: 2rem;
  font-size: 1rem;
  line-height: 1.2;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}




@keyframes crtFlicker {
  0%, 100% {
    opacity: 0.98;
    box-shadow: 0 0 4px var(--crt-color), 0 0 10px var(--crt-color) inset;
  }
  25% {
    opacity: 1;
    box-shadow: 0 0 6px var(--crt-color), 0 0 12px var(--crt-color) inset;
  }
  50% {
    opacity: 0.97;
    box-shadow: 0 0 3px var(--crt-color), 0 0 8px var(--crt-color) inset;
  }
  75% {
    opacity: 0.99;
    box-shadow: 0 0 5px var(--crt-color), 0 0 10px var(--crt-color) inset;
  }
}

.crt-shell {
  position: relative;
  width: 70%;
  max-width: 960px;
  aspect-ratio: 4 / 3;
  margin: 3rem auto;
  border-radius: 16px;
  overflow: hidden;
  background: black;
  box-shadow: 0 0 12px #ffb34788, 0 0 40px #000 inset;
  transform: perspective(1000px) translateZ(0);
  display: flex;
  flex-direction: column;
}

.monitor-frame {
  position: relative;
  flex: 1;
  padding: 2rem;
  background-color: black;
  color: var(--crt-color);
  font-family: 'Doto', monospace;
  animation: crtFlicker 3s infinite ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
}

.monitor-frame::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: radial-gradient(ellipse at center, rgba(255, 186, 92, 0.1) 0%, transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
}

.crt-shell::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 1;
}


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


.signal-lock {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--crt-color);
  background: rgba(0, 0, 0, 0.6);
  padding: 0.5rem 0.5rem;
  border: 1px solid var(--crt-color); /* subtle border */
  border-radius: 0.2rem;
  pointer-events: none;
  z-index: 10;
  line-height: 1;
  box-shadow: 0 0 3px var(--crt-color); /* subtle glow effect */
}

.fade-in {
  animation: blink-fade 1.2s steps(1) 2;
  opacity: 1;
}

.fade-out {
  opacity: 0;
}

@keyframes blink-fade {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

.terminal * {
  opacity: 0;
  transition: opacity 0.2s ease-in;
}

#station-list {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 0.3rem; /* Adjust to your taste */
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  font-size: 1.2rem;
}

#station-list li {
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: background 0.3s;
}

#station-list li.active {
  background: rgba(255, 204, 102, 0.15);
  color: var(--crt-color);
  text-shadow: 0 0 2px var(--crt-color);
}

.terminal {
  padding: 1rem 2rem; /* Adjust to your taste */
}

.instructions {
  font-size: 1rem;
  color: color-mix(in srgb, var(--crt-color) 70%, transparent); /* Fallback blend */
  margin-bottom: 0.5rem;
  font-family: 'Doto', monospace;
}

@keyframes crtFlicker {
  0%, 100% {
    opacity: 0.98;
    box-shadow: 0 0 4px #ffcc66, 0 0 10px #ffcc66 inset;
  }
  25% {
    opacity: 1;
    box-shadow: 0 0 6px #ffcc66, 0 0 12px #ffcc66 inset;
  }
  50% {
    opacity: 0.97;
    box-shadow: 0 0 3px #ffcc66, 0 0 8px #ffcc66 inset;
  }
  75% {
    opacity: 0.99;
    box-shadow: 0 0 5px #ffcc66, 0 0 10px #ffcc66 inset;
  }
}

.monitor-frame {
  animation: crtFlicker 1s infinite alternate;
}

.scanlines-overlay {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 204, 102, 0.05) 50%,
    rgba(0, 0, 0, 0.1) 50%
  );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 2;
}

.line {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.line.visible {
  opacity: 1;
}


/* Mobile tweaks */
@media (max-width: 768px) {

body {
    align-items: flex-start; /* Instead of center, align to top */
  }

  .crt-shell {
    width: 90%;
    aspect-ratio: auto; /* Remove the forced aspect ratio */
    margin: 1rem auto;
  }

  .monitor-frame {
    padding: 1rem;
  }

  #station-list {
    grid-template-columns: 1fr; /* 1 column on mobile */
    gap: 0.5rem;
  }

  .controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
  }

  .instructions {
    text-align: center;
    font-size: 0.8rem;
  }
   .boot-screen {
    padding: 1rem;
  }
  h1 {
    font-size: 0.98rem;
  }

}

/* Hide mobile instructions on desktop, show only on mobile */
.instructions-mobile {
  display: none;
}

@media (max-width: 768px) {
  .instructions {
    display: none;
  }
  .instructions-mobile {
    display: block;
    text-align: center;
    font-size: 1rem;
    color: rgba(255, 204, 102, 0.7);
  }
}



/* === CRT EFFECT ENHANCEMENTS === */

/* Subtle CRT curvature (tweak perspective and rotation angles) */
.monitor-frame {
  transform: perspective(800px) rotateX(1deg) rotateY(1deg);
  transform-style: preserve-3d;
  box-shadow: inset 0 0 20px rgba(255, 204, 102, 0.2); /* inner glow for depth */
  /* You can tweak perspective (e.g., 600px - 1000px) and rotation angles here! */
}

/* Gentle flicker effect (adjust opacity variation and speed) */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.98; } /* tweak opacity change for more/less flicker */
}
.monitor-frame {
  animation: flicker 1s infinite;
  /* Change animation duration (1s) for faster/slower flicker */
}

/* Subtle RGB misalignment for text (adjust shadow offset) */
h1, .instructions, #station-list li, .info, .line, .instructions-mobile {
  text-shadow:
    1px 0 red,
    -1px 0 cyan;
  /* Adjust 1px offset for stronger/weaker chromatic aberration */
}

/* Phosphor glow effect for screen edges (adjust glow intensity and color) */
.monitor-frame {
  box-shadow:
    inset 0 0 10px rgba(255, 204, 102, 0.2),
    0 0 20px rgba(255, 204, 102, 0.1);
  /* Adjust rgba values and spread for brighter/dimmer glow */
}

/* Subtle rolling scanline animation (adjust speed of roll) */
@keyframes roll {
  0% { background-position: 0 0; }
  100% { background-position: 0 4px; }
}
.scanlines-overlay {
  animation: roll 3s linear infinite;
  /* Adjust 4s for faster/slower scanline roll speed */
}

/* === END CRT EFFECT ENHANCEMENTS === */