:root {
  --bg: #0a0700;
  --fg: #ffb000;
  --fg-dim: #8a5c00;
  --fg-bright: #ffd680;
  --fg-warn: #ff4d3d;
  --fg-accent: #5fffe0;
  --glow: 0 0 6px rgba(255, 176, 0, 0.35);
}

body[data-theme='green'] {
  --fg: #33ff66; --fg-dim: #1a8033; --fg-bright: #baffcc; --fg-warn: #ff4d3d; --fg-accent: #ffd166;
  --glow: 0 0 6px rgba(51, 255, 102, 0.35);
}
body[data-theme='white'] {
  --fg: #e8e8e8; --fg-dim: #7a7a7a; --fg-bright: #ffffff; --fg-warn: #ff6b5b; --fg-accent: #6bd0ff;
  --glow: 0 0 4px rgba(232, 232, 232, 0.25);
}
body.plain-mode {
  --fg: #f2f2f2; --fg-dim: #999; --fg-bright: #ffffff; --fg-warn: #ff8a80; --fg-accent: #80d8ff;
  --glow: none;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: var(--bg); overflow: hidden;
  font-family: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
}

#stage {
  height: 100%; width: 100%;
  display: flex; align-items: center; justify-content: center;
}

#crtwrap {
  position: relative;
  transform-origin: center center;
  filter: drop-shadow(var(--glow));
}

#screen {
  white-space: pre;
  font-size: 16px;
  line-height: 1.32;
  letter-spacing: 0;
  color: var(--fg);
  background: var(--bg);
  padding: 14px 16px;
  user-select: text;
}

#screen .row { white-space: pre; }

.row span.dim, span.dim { color: var(--fg-dim); }
.row span.bright, span.bright { color: var(--fg-bright); text-shadow: var(--glow); }
.row span.warn, span.warn { color: var(--fg-warn); }
.row span.accent, span.accent { color: var(--fg-accent); text-shadow: var(--glow); }
.row span.cursor, span.cursor { color: var(--bg); background: var(--fg-accent); }

#scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0, 0, 0, 0.18) 0px, rgba(0, 0, 0, 0.18) 1px, transparent 2px, transparent 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.5;
}
body.plain-mode #scanlines { display: none; }
body.reduced-motion #scanlines { opacity: 0.15; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

#overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72);
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
}
#overlay[hidden] { display: none; }
#overlay-box {
  width: min(760px, 92vw);
  max-height: 82vh;
  background: var(--bg);
  border: 1px solid var(--fg-dim);
  box-shadow: 0 0 0 1px #000, 0 20px 60px rgba(0,0,0,0.6), var(--glow);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
  font-family: inherit;
}
#overlay-title {
  color: var(--fg-bright); font-weight: 700; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--fg-dim); padding-bottom: 8px;
}
#overlay-pre, #overlay-textarea {
  color: var(--fg); background: #000;
  border: 1px solid var(--fg-dim);
  padding: 10px 12px;
  font-family: inherit; font-size: 13px; line-height: 1.5;
  overflow: auto; white-space: pre; max-height: 50vh;
}
#overlay-textarea { resize: vertical; min-height: 160px; }
#overlay-actions { display: flex; gap: 10px; }
#overlay-actions button {
  font-family: inherit; background: transparent; color: var(--fg);
  border: 1px solid var(--fg-dim); padding: 6px 14px; cursor: pointer;
}
#overlay-actions button:hover { border-color: var(--fg); color: var(--fg-bright); }
#overlay-hint { color: var(--fg-dim); font-size: 12px; }