:root{
  --size: 2;
  --color: #9aff9a;
  --color-glow: 154,255,154;
  --glow: 1;
  --scanline-opacity: 0.16;
  --vignette: 0.28;
  --vh: 1vh; /* app.js updates this for mobile 100vh bugs */
}

/* Base */
html, body {
  margin: 0;
  height: 100%;
  background: #000;
  font-family: 'VT323', monospace;
  -webkit-tap-highlight-color: transparent;
}

/* Full-height container that matches the visible viewport on mobile */
#app {
  height: calc(var(--vh, 1vh) * 100);
  height: 100dvh;                 /* modern browsers */
  display: block;
  overflow: hidden;                /* keep CRT vibe; scrolling happens inside terminal */
  touch-action: manipulation;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
  position: relative;
}

/* The terminal itself scrolls and wraps */
#app .terminal {
  height: 100%;
  overflow: auto;                  /* internal scroll */
  overscroll-behavior: contain;    /* no page bounce on iOS */
  -webkit-overflow-scrolling: touch;
  padding: 12px;                   /* room from edges */
  box-sizing: border-box;
}

/* Text styling */
.terminal {
  color: var(--color);
  background: transparent !important;
  text-shadow:
    0 0 5px rgba(var(--color-glow), .6),
    0 0 12px rgba(var(--color-glow), .4),
    0 0 24px rgba(var(--color-glow), .2);
  animation: crt-text-flicker 2.6s steps(50) infinite alternate;

  /* Desktop/default size */
  font-size: 16px;
  line-height: 1.35;
}

/* Make long content wrap instead of running off-screen */
.terminal,
.terminal * {
  /* Be generous so ascii art mostly survives but long links/words wrap */
  white-space: pre-wrap;
  overflow-wrap: anywhere;   /* modern */
  word-break: break-word;    /* fallback */
}

/* Cursor glow */
.terminal .cursor.blink {
  background: var(--color);
  box-shadow: 0 0 8px var(--color), 0 0 16px var(--color);
}

/* Mobile & tablets: scale down a bit more and tighten line-height */
@media (max-width: 768px), (pointer: coarse) {
  #app .terminal { padding: 10px; }
  .terminal {
    font-size: clamp(12px, 3.4vw, 15px);
    line-height: 1.28;
  }
}

/* Extra-small phones */
@media (max-width: 380px) {
  .terminal {
    font-size: clamp(11px, 3.6vw, 14px);
    line-height: 1.26;
  }
}

/* CRT scanline / vignette overlay */
.scanline-overlay {
  pointer-events: none;
  position: fixed; inset: 0;
  background:
    radial-gradient(90% 75% at 50% 50%,
      rgba(0,0,0,0) 60%,
      rgba(0,0,0,var(--vignette)) 100%);
  z-index: 9;
}
.scanline-overlay::before,
.scanline-overlay::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.scanline-overlay::before {
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,var(--scanline-opacity)) 0px,
      rgba(0,0,0,var(--scanline-opacity)) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 4px
    );
  mix-blend-mode: multiply;
  animation: scan-flicker 7.5s linear infinite,
             scan-jitter 6s ease-in-out infinite;
}
.scanline-overlay::after {
  background:
    radial-gradient(140% 100% at 50% 40%, rgba(var(--color-glow),.06), rgba(0,0,0,0) 60%);
  mix-blend-mode: screen;
  animation: mask-breathe 9s ease-in-out infinite;
  opacity: .12;
}

/* Animations */
@keyframes crt-text-flicker { 0%{filter:brightness(.98)} 100%{filter:brightness(1.02)} }
@keyframes scan-flicker { 0%,100%{opacity:.9} 50%{opacity:.95} }
@keyframes scan-jitter  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(.4px)} }
@keyframes mask-breathe { 0%,100%{opacity:.10} 50%{opacity:.18} }