/* Shared terminal/CRT shell for i1 and its games. */

:root {
  --bg: #050a05;
  --green: #33ff66;
  --green-dim: #1f8f3c;
  --green-faint: #1a6e2e;
  --glow: 0 0 4px rgba(51, 255, 102, .55), 0 0 12px rgba(51, 255, 102, .25);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
}

body {
  padding: clamp(1rem, 4vw, 3rem);
  font-family: "SF Mono", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
  font-size: clamp(14px, 1.05vw + 11px, 18px);
  line-height: 1.6;
  color: var(--green);
  text-shadow: var(--glow);
  -webkit-font-smoothing: antialiased;
}

/* CRT overlays: scanlines, vignette, faint flicker */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

body::before {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, .28) 3px,
    rgba(0, 0, 0, .28) 4px
  );
}

body::after {
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  animation: flicker 5.5s infinite steps(1);
}

@keyframes flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: .82; }
  95% { opacity: 1; }
  96% { opacity: .9; }
}

main {
  position: relative;
  z-index: 1;
  max-width: 70ch;
}

.line { white-space: pre-wrap; }

.prompt { color: var(--green-dim); }
.prompt .host { color: var(--green); }

.comment { color: var(--green-faint); }

a {
  color: inherit;
  text-decoration: none;
  outline: none;
}

a:hover,
a:focus-visible {
  background: var(--green);
  color: var(--bg);
  text-shadow: none;
}

/* Block cursor on a trailing prompt */
.cursor {
  display: inline-block;
  width: .6em;
  height: 1.05em;
  margin-left: .1em;
  vertical-align: text-bottom;
  background: var(--green);
  box-shadow: var(--glow);
  animation: blink 1.1s steps(1) infinite;
}

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

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  body::after,
  .cursor { animation: none; }
}