/* =============================================================
   SEC-T 2026 — LYRICS, shown on an IBM 5250 green screen.
   Same two faces as the outro, served locally (CSP: font-src 'self').
   ============================================================= */
@font-face {
  font-family: 'Press Start 2P';
  src: url('assets/fonts/pressstart-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'VT323';
  src: url('assets/fonts/vt323-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;
  --bg:     #04140a;   /* the black around the tube */
  --screen: #061a0d;   /* phosphor ground */
  --green:  #2bff66;   /* 5250 green, the colour greetz.js prints in */
  --dim:    #17a544;
  --amber:  #ffe066;
  --head: 'Press Start 2P', monospace;
  --body: 'VT323', 'Courier New', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--green);
  font-family: var(--body);
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  line-height: 1.6;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  display: grid;
  place-items: start center;
  min-height: 100vh;
}
a { color: var(--amber); text-decoration: none; }
a:hover, a:focus-visible { color: #000; background: var(--amber); outline: none; }

.crt {
  width: min(860px, 100%);
  background: var(--screen);
  border: 1px solid rgba(43, 255, 102, 0.3);
  box-shadow: 0 0 60px rgba(43, 255, 102, 0.12), inset 0 0 90px rgba(43, 255, 102, 0.05);
  padding: clamp(1rem, 4vw, 2.6rem);
  position: relative;
  overflow: hidden;
  text-shadow: 0 0 6px rgba(43, 255, 102, 0.45);
}
.crt::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.22) 3px);
}
.crt > * { position: relative; z-index: 1; }

/* the 5250 status line, the way DSPMBR would head the screen */
.dspmbr {
  border-bottom: 1px solid rgba(43, 255, 102, 0.3);
  padding-bottom: 0.7em;
  margin-bottom: 1.6em;
  font-size: 0.85em;
  color: var(--dim);
  white-space: pre-wrap;
}
.dspmbr b { color: var(--green); font-weight: normal; }

h1 {
  font-family: var(--head);
  font-size: clamp(0.95rem, 4vw, 1.5rem);
  line-height: 1.5;
  color: var(--green);
  margin-bottom: 0.55em;
  letter-spacing: 0.03em;
}
.sub { color: var(--dim); margin-bottom: 1.5em; font-size: 0.95em; }
.sub span::after { content: '   ·   '; }
.sub span:last-child::after { content: ''; }

.actions { display: flex; flex-wrap: wrap; gap: 0.7em; margin-bottom: 2.4em; }
.btn {
  font-family: var(--head);
  font-size: clamp(0.58rem, 1.7vw, 0.68rem);
  line-height: 1.6;
  color: var(--green);
  border: 1px solid rgba(43, 255, 102, 0.5);
  padding: 0.85em 1.05em;
  letter-spacing: 0.05em;
}
.btn:hover, .btn:focus-visible { color: #000; background: var(--green); border-color: var(--green); }
.hint { color: var(--dim); font-size: 0.9em; margin: -1.7em 0 2.4em; }

.lyrics section { margin-bottom: 2.1em; }
.lyrics h2 {
  font-family: var(--head);
  font-size: clamp(0.6rem, 1.9vw, 0.7rem);
  line-height: 1.8;
  color: var(--amber);
  margin-bottom: 0.75em;
  text-shadow: 0 0 8px rgba(255, 224, 102, 0.5);
}
.lyrics h2::before { content: '['; }
.lyrics h2::after  { content: ']'; }
.lyrics p { white-space: pre-line; margin-bottom: 1em; }
.lyrics p:last-child { margin-bottom: 0; }
.lyrics section.chorus p { color: #9dffbb; }
.lyrics section.breakdown p { letter-spacing: 0.08em; }

footer {
  margin-top: 2.6em;
  padding-top: 1.3em;
  border-top: 1px solid rgba(43, 255, 102, 0.3);
  color: var(--dim);
  font-size: 0.92em;
}
footer a { text-decoration: underline; }
.cursor {
  display: inline-block; width: 0.55em; height: 1em;
  background: var(--green); vertical-align: -0.12em; margin-left: 0.15em;
  animation: blink 0.9s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cursor { animation: none; }
}