/* Design tokens, reset, typography, and shared widgets (buttons, panels). */

:root {
  /* Palette: saturated early-'90s adventure game colors. */
  --ink: #140f26;          /* darkest: borders, shadows */
  --night: #241a48;        /* page background */
  --night-2: #33276a;      /* raised surfaces on night */
  --hud-bg: #1b1438;
  --paper: #fff6e0;        /* lesson panel */
  --paper-2: #f3e6c4;
  --paper-ink: #2b2240;    /* text on paper */
  --muted-ink: #6b5f86;
  --text-light: #f6f1ff;   /* text on night */
  --yellow: #ffd23f;
  --teal: #2ec4b6;
  --magenta: #ff4f9a;
  --red: #ff5a5f;
  --green: #5bd16b;
  --sky: #59b8ff;
  --editor-bg: #1e1a2e;
  --console-bg: #0f0c1c;

  /* Type */
  --font-pixel: "Pixelify Sans", "Courier New", monospace;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
  --font-code: "JetBrains Mono", Consolas, "Courier New", monospace;
  --text-size: 1.25rem;    /* 20px lesson text: big on purpose */
  --code-size: 1.125rem;   /* 18px */

  /* Chunky pixel borders */
  --px: 4px;
  --border: var(--px) solid var(--ink);
  --shadow: var(--px) var(--px) 0 var(--ink);

  --hud-height: 56px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--night);
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: var(--text-size);
  line-height: 1.5;
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: var(--font-pixel);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: 0.02em;
}

p { margin: 0 0 0.75em; }

code, pre, kbd { font-family: var(--font-code); font-size: 0.95em; }

a { color: var(--sky); }

[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

/* Crisp scaling for all pixel art. */
.pixel-art, canvas.pixel-art {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-pixel);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--yellow);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 0.45em 1em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 60ms ease, box-shadow 60ms ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active {
  transform: translate(var(--px), var(--px));
  box-shadow: 0 0 0 var(--ink);
}
.btn:disabled {
  cursor: not-allowed;
  filter: grayscale(0.7) brightness(0.8);
  transform: none;
  box-shadow: var(--shadow);
}
.btn--go     { background: var(--green); }
.btn--stop   { background: var(--red); color: #fff; }
.btn--quiet  { background: var(--night-2); color: var(--text-light); }
.btn--small  { font-size: 0.95rem; padding: 0.3em 0.7em; }

/* ---------- Panels ---------- */

.panel {
  background: var(--paper);
  color: var(--paper-ink);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 1rem 1.25rem;
}
.panel--dark {
  background: var(--night-2);
  color: var(--text-light);
}

.boot-message {
  font-family: var(--font-pixel);
  font-size: 1.5rem;
  text-align: center;
  padding: 3rem 1rem;
}

.error-box {
  max-width: 40rem;
  margin: 3rem auto;
}
.error-box h2 { color: var(--red); }