/* ANAMNESIS — 1983 monochrome CRT terminal.
   One phosphor color, one bitmap font, a character grid. No paper, no
   rounded corners, no drop shadows — this is a text-mode screen, not a GUI. */

@font-face {
  font-family: "VT323";
  src: url("../assets/fonts/VT323-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg:       #030805;   /* unlit P1 phosphor screen */
  --phos:     #37f052;   /* P1 green, primary — ~11:1 on --bg */
  --phos-hi:  #9dffb0;   /* bright: headings, emphasis (was "alert") */
  --phos-dim: #2fbf49;   /* dim but AA (~7:1) — carries status, HIT/MISS */
  --glow:     rgba(55, 240, 82, 0.35);
  --scan:     rgba(0, 0, 0, 0.22);
}

* { box-sizing: border-box; }

html { background: #000; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--phos);
  font-family: "VT323", "Courier New", monospace;
  font-size: 24px;
  line-height: 1.15;
  min-height: 100vh;
  text-shadow: 0 0 4px var(--glow);      /* phosphor bloom */
  -webkit-font-smoothing: none;
  font-smooth: never;
  overflow-x: hidden;
}

/* The screen is its own scroll box. itch (and any embed with scrolling="no") freezes the
   viewport of the iframe; an inner overflow container still scrolls, so play is never pinned. */
.screen {
  position: fixed; inset: 0; z-index: 4;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#app {
  max-width: min(68ch, 100%);
  margin: 0 auto;
  padding: 3.2rem 1.2rem 4rem;           /* top clears the status bar */
}

h1 {
  font-size: 2.1rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--phos-hi);
  text-shadow: 0 0 8px var(--glow);
  margin: 0 0 1rem;
}
h2 { font-size: 1.4rem; font-weight: 400; letter-spacing: .08em; }
p { margin: .6rem 0; }

/* ── Persistent status line: reverse-video bar, like a real terminal ── */
.statusbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  background: var(--phos); color: var(--bg);
  text-shadow: none;
  font-size: .9rem; letter-spacing: .05em;
  padding: .15rem 1rem;
  display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap;
  white-space: nowrap;
}
.statusbar .sep { opacity: .55; }

/* ── CRT screen treatment ── */
/* scanlines */
.crt::after {
  content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent 0 2px, var(--scan) 2px 4px);
}
/* vignette + edge glow — the curve of the glass */
.crt::before {
  content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(120% 120% at 50% 50%,
      transparent 55%, rgba(0,0,0,.55) 100%);
  box-shadow: inset 0 0 120px 24px rgba(0,0,0,.6);
}

/* slow flicker — ~0.5 Hz, well under the 3 Hz flash ceiling */
@keyframes flicker { 0%,100% { opacity: 1; } 50% { opacity: .94; } }
.flicker #app { animation: flicker 2.4s steps(2, end) infinite; }

/* blinking block cursor */
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.cursor::after {
  content: "\2588"; margin-left: .1em; color: var(--phos-hi);
  animation: blink 1.1s steps(1) infinite;
}

/* CRT power-on: bright collapse then bloom out */
@keyframes powon {
  0%   { transform: scaleY(.004); opacity: 1; filter: brightness(3); }
  55%  { transform: scaleY(.004); opacity: 1; filter: brightness(3); }
  70%  { transform: scaleY(1); opacity: 1; filter: brightness(2.2); }
  100% { transform: scaleY(1); opacity: 0; filter: brightness(1); }
}
.powon {
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
  background: var(--phos-hi);
  transform-origin: center;
  animation: powon 900ms ease-out forwards;
}

/* ── Boot / POST sequence ── */
.boot {
  padding: 3.6rem 1.2rem; max-width: min(68ch, 100%); margin: 0 auto;
  white-space: pre-wrap; font-size: 1.05rem;
}
.boot .ok { color: var(--phos-hi); }

/* ── Memos: green text in a double-line frame, reverse-video title ── */
.memo {
  border: 4px double var(--phos);
  padding: 0 1.4rem 1.4rem;
  margin: 1.6rem 0;
  white-space: pre-wrap;
  background: rgba(55, 240, 82, 0.03);
}
.memo h2 {
  background: var(--phos); color: var(--bg); text-shadow: none;
  margin: 0 -1.4rem 1.2rem; padding: .2rem 1.4rem;
  font-size: 1.05rem; letter-spacing: .12em;
}

.redacted {
  background: var(--phos-dim); color: var(--phos-dim);
  user-select: none; padding: 0 .3em; text-shadow: none;
}
.redacted.revealed { background: transparent; color: inherit; text-shadow: 0 0 4px var(--glow); }

/* ── Buttons: menu rows that reverse-video on select ── */
.terminal-btn {
  display: inline-block;
  background: transparent; color: var(--phos);
  border: 2px solid var(--phos);
  padding: .35rem 1.2rem; margin: .3rem .4rem .3rem 0;
  font: inherit; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; text-shadow: inherit;
}
.terminal-btn::before { content: "\2003"; }          /* space held for the cursor */
.terminal-btn:hover, .terminal-btn:focus-visible {
  background: var(--phos); color: var(--bg); text-shadow: none;
  outline: none;
}
.terminal-btn:hover::before, .terminal-btn:focus-visible::before { content: "\25B8"; } /* ▸ */
.terminal-btn:disabled { opacity: .4; cursor: default; }
.terminal-btn:disabled:hover { background: transparent; color: var(--phos); }
.terminal-btn:disabled:hover::before { content: "\2003"; }

input[type=text], textarea {
  background: #061206; color: var(--phos);
  border: 2px solid var(--phos-dim);
  font: inherit; padding: .5rem; width: 100%; text-shadow: inherit;
}
input, textarea, button { font-family: inherit; }
a { color: var(--phos-hi); text-underline-offset: .2em; }

.dim { color: var(--phos-dim); }
.alert { color: var(--phos-hi); text-shadow: 0 0 8px var(--glow); }

/* ── Session roster ── */
.session-list { list-style: none; padding: 0; }
.session-list li {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--phos-dim);
}

/* breath pacer: a square reticle that opens/closes over one surf cycle */
.breather {
  width: 132px; height: 132px; margin: 1.5rem auto .5rem;
  border: 2px solid var(--phos);
  box-shadow: 0 0 12px var(--glow), inset 0 0 12px var(--glow);
  transform: scale(.6); opacity: .5;
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(.6);  opacity: .5; }
  50%      { transform: scale(1);   opacity: 1; }
}
.breathe-cue { text-align: center; margin-top: 0; }

.audio-prompt { min-height: 4.5rem; font-size: 1.35rem; }
.audio-controls { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 2rem; }
.audio-controls input[type=range] { width: 160px; accent-color: var(--phos); }

/* ── Trial ── */
.sketch { border: 2px solid var(--phos-dim); touch-action: none; display: block; margin: 1rem 0; max-width: 100%; }
.sketch-thumb { width: 160px; border: 2px solid var(--phos-dim); display: block; }
.judge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.judge-cell { background: none; border: 2px solid var(--phos-dim); padding: .4rem; cursor: pointer; }
.judge-cell:hover, .judge-cell:focus-visible { border-color: var(--phos-hi); outline: 2px solid var(--phos-hi); }
.judge-cell img { max-width: 100%; display: block; filter: grayscale(1) brightness(1.05) contrast(1.1); }
.doc-candidate { margin: 0; font-size: .9rem; text-align: left; }
.reveal-img { max-width: 100%; filter: grayscale(1) brightness(1.05) contrast(1.1); }
.redact-overlay { border: 4px double var(--phos-dim); padding: 3rem 1rem; text-align: center; }

/* ── Finale playback ── */
.playback { opacity: 0; animation: fadein 1s forwards; }
@keyframes fadein { to { opacity: 1; } }

/* ── Motion off: kill flicker, blink, power-on, fades, boot animation ── */
@media (prefers-reduced-motion: reduce) {
  .flicker #app { animation: none; }
  .cursor::after { animation: none; }
  .powon { display: none; }
  .playback { opacity: 1; animation: none; }
  .breather { animation: none; transform: scale(.82); opacity: .8; }
}

/* ── Narrow screens ── */
@media (max-width: 560px) {
  body { font-size: 21px; }
  .judge-grid { grid-template-columns: 1fr; }
  .statusbar { font-size: .8rem; gap: .8rem; }
  .statusbar .sep { display: none; }
  #app { padding-top: 3.6rem; }
}

/* ── Studio bumps: Electric Basement presents / Iridescent games.
   JETSAM's opening, run through this machine: sprite logo at integer scale, square
   tiles, stepped fades, palette-cycle rake, scanlines. Marks keep their own colors. ── */
#splash { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex;
  align-items: center; justify-content: center; overflow: hidden; transition: opacity .3s steps(3, end);
  cursor: pointer; text-shadow: none; --px: 3; }
#splash::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, var(--scan) 2px 4px); }
#splash.gone { opacity: 0; pointer-events: none; }
#splash .bump { position: absolute; text-align: center; opacity: 0; }
#splash .bump1 { animation: bumpFade 3.6s steps(8, end) forwards; }
#splash .bump2 { animation: bumpFade 3.9s steps(8, end) 3.6s forwards; }
@keyframes bumpFade { 0% { opacity: 0; } 16% { opacity: 1; } 76% { opacity: 1; } 100% { opacity: 0; } }
#splash .eb-logo { width: calc(128px * var(--px)); height: auto; display: block; margin: 0 auto;
  image-rendering: pixelated; image-rendering: crisp-edges; }
#splash .pres { font-size: 1rem; letter-spacing: .5em; text-transform: uppercase; color: var(--phos-dim); margin-top: 16px; }
#splash .irid-mark { --iu: calc(11px * var(--px)); display: grid; grid-template-columns: repeat(4, var(--iu));
  grid-auto-rows: var(--iu); gap: calc(5px * var(--px)); margin: 0 auto 26px; }
#splash .iq { animation: iridRake 3.8s steps(1, end) infinite; }
@keyframes iridRake { 0%, 30%, 100% { filter: brightness(.95); } 10% { filter: brightness(1.7); } }
#splash .irid-word { font-size: calc(14px * var(--px)); letter-spacing: .32em; padding-left: .32em; white-space: nowrap; color: var(--phos-hi); }
#splash .skip { position: fixed; bottom: 22px; right: 24px; font-size: .9rem; letter-spacing: .3em; text-transform: uppercase; color: var(--phos-dim); }
@media (max-width: 560px) { #splash { --px: 2; } }
@media (prefers-reduced-motion: reduce) { #splash .iq { animation: none; } }

/* ── Iridescent mark: the one element in the program that is not phosphor green. ── */
.iq0 { background: #4CC9F0; } .iq1 { background: #61ACED; animation-delay: .09s; }
.iq2 { background: #768FEA; animation-delay: .18s; } .iq3 { background: #8B73E7; animation-delay: .27s; }
.iq4 { background: #A25EE3; animation-delay: .36s; } .iq5 { background: #BC63DB; animation-delay: .45s; }
.iq6 { background: #D767D3; animation-delay: .54s; } .iq7 { background: #F26CCB; animation-delay: .63s; }
.iq8 { background: #FF7BBA; animation-delay: .72s; } .iq9 { background: #FF96A0; animation-delay: .81s; }
.iq10 { background: #FFB086; animation-delay: .9s; } .iq11 { background: #FFCA6C; animation-delay: .99s; }
.iq12 { background: #CDD272; animation-delay: 1.08s; } .iq13 { background: #8BD381; animation-delay: 1.17s; }
.iq14 { background: #48D591; animation-delay: 1.26s; } .iq15 { background: #06D6A0; animation-delay: 1.35s; }
.irid-mini { display: inline-grid; grid-template-columns: repeat(4, 6px); grid-auto-rows: 6px; gap: 2px; flex: none; }
.irid-mini .iq { display: block; }
.release { display: flex; align-items: center; gap: .7em; margin-top: 2.4rem; }