/* 0effort.io — core tokens & reset.
   Each mode swaps tokens via [data-mode="bbs"] etc. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
/* respect the HTML `hidden` attribute even when later author CSS sets display:* */
[hidden] { display: none !important; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: none;
  font-smooth: never;
  user-select: text;
  cursor: var(--cursor, default);
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--fg); text-shadow: 0 0 6px var(--accent); }
button { background: transparent; border: 1px solid var(--accent); color: var(--accent);
         font-family: inherit; font-size: inherit; padding: .25rem .75rem; cursor: pointer; }
button:hover { background: var(--accent); color: var(--bg); }
::selection { background: var(--accent); color: var(--bg); }

/* ---------- DEFAULTS (cold-landing / unset mode) ---------- */
:root {
  --bg:      #0a0e0a;
  --fg:      #00ff41;
  --dim:     #008f17;
  --dimmer:  #003008;
  --accent:  #00ff41;
  --warn:    #ffb000;
  --alert:   #ff3030;
  --paper:   #d2c8a3;
  --font-mono: "VGA", "Courier New", monospace;
  --font-body: "VGA", "Courier New", monospace;
  --scanline-opacity: 0.18;
  --crt-curvature: 0;
}

/* ---------- BBS / cold-landing ---------- */
[data-mode="bbs"], [data-mode="cold"] {
  --bg: #0a0e0a;
  --fg: #00ff41;
  --dim: #008f17;
  --dimmer: #003008;
  --accent: #39ff14;
  --warn: #ffb000;
  --alert: #ff3030;
  --font-body: "VGA", "Courier New", monospace;
  --scanline-opacity: 0.22;
}

/* ---------- DEFCON ---------- */
[data-mode="defcon"] {
  --bg: #0c0f12;
  --fg: #d8e0e8;
  --dim: #6a7480;
  --dimmer: #2a323a;
  --accent: #ffb000;          /* amber CRT */
  --warn: #ffb000;
  --alert: #ff2020;
  --grid-line: #1a2630;
  --font-body: "VGA", "Helvetica Narrow", "Helvetica", sans-serif;
  --scanline-opacity: 0.10;
}

/* ---------- GIBSON ---------- */
[data-mode="gibson"] {
  --bg: #04020c;
  --fg: #ff39c5;              /* magenta */
  --dim: #b71f7f;
  --dimmer: #4d0e36;
  --accent: #00f0ff;          /* cyan */
  --warn: #ffe600;
  --alert: #ff2079;
  --font-body: "VGA", "Courier New", monospace;
  --scanline-opacity: 0.12;
}

/* ---------- GRID (TRON / outrun) ---------- */
[data-mode="grid"] {
  --bg: #0a001a;
  --fg: #ff2bff;              /* hot pink */
  --dim: #a01ec8;
  --dimmer: #390a48;
  --accent: #00f0ff;          /* tron cyan */
  --warn: #ffe600;
  --alert: #ff2079;
  --font-body: "VGA", "Courier New", monospace;
  --scanline-opacity: 0.04;
}

/* ---------- DOOM ---------- */
[data-mode="doom"] {
  --bg: #1a0a06;
  --fg: #ffb05e;
  --dim: #a05030;
  --dimmer: #3c1c10;
  --accent: #ff3010;
  --warn: #ffe000;
  --alert: #ff0000;
  --font-body: "DOOM", "VGA", monospace;
  --scanline-opacity: 0;
  image-rendering: pixelated;
}

/* ---------- shared CRT FX ---------- */
.crt {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  mix-blend-mode: multiply;
}
.crt::before {
  /* scanlines */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,var(--scanline-opacity)) 0,
    rgba(0,0,0,var(--scanline-opacity)) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}
.crt::after {
  /* vignette */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 55%,
    rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* CRT flicker (subtle) */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  3%       { opacity: .88; }
  4%       { opacity: 1; }
  9%       { opacity: .96; }
  10%      { opacity: 1; }
  62%      { opacity: .91; }
  63%      { opacity: 1; }
}
.flicker { animation: flicker 7s infinite; }

/* phosphor glow used heavily in BBS/GIBSON/GRID */
.glow {
  text-shadow:
    0 0 2px var(--fg),
    0 0 6px var(--accent),
    0 0 18px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* blinking cursor */
@keyframes blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.cursor::after {
  content: "▌";
  display: inline-block;
  margin-left: 2px;
  animation: blink 1s steps(2, end) infinite;
  color: var(--accent);
}

/* glitch helper (used on logo splashes) */
@keyframes glitch {
  0%   { clip-path: inset(0 0 70% 0); transform: translate(-2px, -1px); }
  20%  { clip-path: inset(40% 0 30% 0); transform: translate(2px, 1px); }
  40%  { clip-path: inset(60% 0 10% 0); transform: translate(-1px, 2px); }
  60%  { clip-path: inset(20% 0 50% 0); transform: translate(2px, -2px); }
  80%  { clip-path: inset(80% 0 5% 0); transform: translate(-2px, 1px); }
  100% { clip-path: inset(0 0 70% 0); transform: translate(0, 0); }
}
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
}
.glitch::before { color: var(--alert); animation: glitch 0.8s infinite linear alternate-reverse; }
.glitch::after  { color: var(--accent); animation: glitch 1.1s infinite linear; }

/* fonts (declared once; weights via font-feature-settings) */
@font-face {
  font-family: "VGA";
  src: local("Px437 IBM VGA 8x16"),
       local("PxPlus IBM VGA 8x16"),
       url("../assets/fonts/PxPlus_IBM_VGA_8x16.woff2") format("woff2"),
       url("../assets/fonts/PxPlus_IBM_VGA_8x16.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "DOOM";
  src: local("Amazdoom"),
       url("../assets/fonts/AmazDooMLeft.woff2") format("woff2"),
       url("../assets/fonts/AmazDooMLeft.ttf") format("truetype");
  font-display: swap;
}

/* common screen wrapper */
.screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  padding: 1.25rem;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.35;
}

/* modem skip prompt overlay */
.modem-skip {
  position: fixed; bottom: 1rem; right: 1rem;
  font-size: 12px; color: var(--dim);
  border: 1px dashed var(--dim); padding: .25rem .5rem;
  z-index: 9000; opacity: .85;
}

/* hide on small screens — many modes don't make sense without a keyboard */
.desktop-only { display: block; }
@media (max-width: 720px) {
  .desktop-only { display: none; }
}

/* mobile fallback — shown only when small viewport */
.mobile-fallback { display: none; }
@media (max-width: 720px) {
  .mobile-fallback {
    display: flex; flex-direction: column;
    position: fixed; inset: 0;
    padding: 1.5rem; align-items: center; justify-content: center;
    text-align: center; gap: 1rem;
    background: var(--bg); color: var(--fg);
  }
}

/* utility */
.dim   { color: var(--dim); }
.dimmer{ color: var(--dimmer); }
.warn  { color: var(--warn); }
.alert { color: var(--alert); }
.center{ text-align: center; }
.right { text-align: right; }
.muted { opacity: .65; }
hr.ascii {
  border: 0; height: 0; line-height: 1;
  color: var(--dim);
}
hr.ascii::before { content: "──────────────────────────────────────────────────────────────────"; }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}