/* ── reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, p, blockquote, pre, figure { margin: 0; padding: 0; }
input { font: inherit; color: inherit; }
a { color: inherit; }

/* ── tokens ──────────────────────────────────────────────────────────── */
:root {
  --bg: #000;

  --phosphor:      #33ff66;
  --phosphor-dim:  #1c8f3c;
  --phosphor-hot:  #b6ffcf;
  --phosphor-rgb:  51 255 102;

  --glow:
    0 0 2px  rgb(var(--phosphor-rgb) / .85),
    0 0 10px rgb(var(--phosphor-rgb) / .40),
    0 0 28px rgb(var(--phosphor-rgb) / .15);

  --scanline-alpha: .30;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Cascadia Code", Menlo,
          Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;

  --fs: clamp(12px, 1.05vw, 15px);
  --lh: 1.6;

  /* Terminal occupies the right side; the ASCII Goku bleeds off the left. */
  --ascii-w: 52vw;
  --pad: clamp(16px, 3vw, 40px);
}

/* `theme amber` / `theme white` rewrite only these. */
html[data-theme="amber"] {
  --phosphor: #ffb642;  --phosphor-dim: #a06a14;  --phosphor-hot: #ffe2b0;
  --phosphor-rgb: 255 182 66;
}
html[data-theme="white"] {
  --phosphor: #d8f5e2;  --phosphor-dim: #7d8f84;  --phosphor-hot: #ffffff;
  --phosphor-rgb: 216 245 226;
}

/* ── page ────────────────────────────────────────────────────────────── */
html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--phosphor);
  font-family: var(--mono);
  font-size: var(--fs);
  line-height: var(--lh);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#screen {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  border-radius: 14px;
  isolation: isolate;
}

/* ── ascii layer ─────────────────────────────────────────────────────── */
/* Fixed, contained, non-interactive. It can never intercept a click, never
   affect layout, and never steal a text selection from the terminal. */
#ascii-layer {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--ascii-w);
  height: 100vh;
  height: 100dvh;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  contain: strict;
  opacity: 0;
  transition: opacity 1.4s ease-out;
}
#ascii-layer.lit { opacity: 1; }

#ascii-layer pre {
  position: absolute;
  left: 0;
  top: 50%;
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0;
  white-space: pre;
  transform-origin: left center;
  will-change: transform;
}

.ascii-main {
  color: var(--phosphor);
  text-shadow:
    0 0 3px  rgb(var(--phosphor-rgb) / .8),
    0 0 12px rgb(var(--phosphor-rgb) / .35);
}

/* Chromatic aberration — decorative layer only. Never on body text. */
.ascii-aberr { mix-blend-mode: screen; opacity: .38; }
.aberr-r { color: #ff0050; }
.aberr-b { color: #00b4ff; }

/* ── brand ───────────────────────────────────────────────────────────── */
#brand {
  position: absolute;
  top: clamp(14px, 2.4vw, 30px);
  right: clamp(16px, 3vw, 44px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .55em;
  pointer-events: none;
  user-select: none;
}

#brand .feather {
  width: clamp(20px, 2vw, 28px);
  height: auto;
  fill: var(--phosphor);
  filter: drop-shadow(0 0 6px rgb(var(--phosphor-rgb) / .55));
}
#brand .feather .vein { stroke: var(--bg); opacity: .55; }

#brand .wordmark {
  font-family: var(--mono);
  font-size: clamp(15px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--phosphor-hot);
  text-shadow: var(--glow);
}

/* ── utility ─────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.noscript {
  position: relative;
  z-index: 30;
  max-width: 62ch;
  margin: 8vh auto;
  padding: 0 var(--pad);
  color: var(--phosphor);
}
.noscript h1, .noscript h2 { font-size: 1.15em; margin: 1.4em 0 .4em; }
.noscript blockquote { color: var(--phosphor-hot); margin: 1em 0; }
.noscript p { margin: .6em 0; }

/* Green flash used by `kamehameha`. */
.flash {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 30% 50%,
              rgb(var(--phosphor-rgb) / .9), rgb(var(--phosphor-rgb) / .15) 55%, transparent 75%);
}
.flash.fire { animation: flash-out 900ms ease-out forwards; }
@keyframes flash-out {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── mobile: art goes behind the terminal, not beside it ─────────────── */
@media (max-width: 860px) {
  :root { --ascii-w: 100vw; }

  #ascii-layer { opacity: 0; }
  #ascii-layer.lit { opacity: .10; }
  #ascii-layer pre { left: 50%; transform-origin: center center; }

  #brand { top: 12px; right: 14px; }
}