/* ───────────────────────────────────────────────────────────────────────────
 * Retro "phosphor terminal" chrome
 *
 * The product's soul is a green 7-segment LED counter and CRT/terminal stats
 * pages. This layer injects that personality into the app chrome (wordmark, auth
 * flow, onboarding) WITHOUT sacrificing legibility: big pixel display type and
 * monospace UI accents over a clean base, with dark phosphor panels reserved for
 * "display" moments (the hero, the counter preview, empty states).
 *
 * Loaded after Tailwind so these opt-in classes win. Class names are namespaced
 * (retro-*, terminal-*, led-*) so they never collide with Tailwind utilities.
 * ─────────────────────────────────────────────────────────────────────────── */

:root {
  --phosphor: #39ff66;          /* the LED green — the brand/primary action color */
  --phosphor-dim: #2bbf4e;
  --crt-bg: #0c100c;            /* near-black with a green cast */
  --crt-bg-soft: #111611;

  --ink: #17131f;               /* near-black with a faint violet cast */
  --canvas: #faf5ea;            /* warm cream paper, the page background */

  /* Memphis accent palette — used in the decorative confetti + small pops. */
  --mem-pink: #ff5d8f;
  --mem-teal: #14c1b4;
  --mem-yellow: #ffcf2e;
  --mem-blue: #4b7bff;
}

/* Warm paper canvas instead of flat white. */
body { background: var(--canvas); }

/* Memphis confetti — decorative shape layer. The parent is `relative
 * overflow-hidden`; this sits behind content and never eats clicks. */
.memphis { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.memphis > * { position: absolute; }
.mem-pink   { color: var(--mem-pink); }
.mem-teal   { color: var(--mem-teal); }
.mem-yellow { color: var(--mem-yellow); }
.mem-blue   { color: var(--mem-blue); }
.mem-ink    { color: var(--ink); }
@keyframes mem-float { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-8px) rotate(var(--r,0deg)); } }
.mem-bob { animation: mem-float 6s ease-in-out infinite; }

/* Cartridge — SimpleBits' chunky arcade-cabinet display face, self-hosted from
 * public/fonts. This is the retro voice of the chrome: video-game marquee, not
 * LCD pixels. Weights map to Tailwind's font-weight scale so `font-black` etc.
 * pick the right cut. */
@font-face { font-family: "Cartridge"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/cartridge/Cartridge-RegularSoft.woff2") format("woff2"); }
@font-face { font-family: "Cartridge"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/cartridge/Cartridge-SemiboldSoft.woff2") format("woff2"); }
@font-face { font-family: "Cartridge"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/cartridge/Cartridge-BoldSoft.woff2") format("woff2"); }
@font-face { font-family: "Cartridge"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/cartridge/Cartridge-BlackSoft.woff2") format("woff2"); }

/* Type ----------------------------------------------------------------------- */
.font-arcade  { font-family: "Cartridge", ui-sans-serif, system-ui; }
.font-mono-ui { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }

/* Wordmark: Cartridge with a blinking terminal cursor. */
.retro-wordmark {
  font-family: "Cartridge", ui-sans-serif, system-ui;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.retro-wordmark::after {
  content: "_";
  margin-left: 0.08em;
  color: var(--phosphor-dim);
  animation: retro-blink 1.1s step-end infinite;
}

/* Big display heading: Cartridge, set tight like an arcade marquee. */
.retro-display {
  font-family: "Cartridge", ui-sans-serif, system-ui;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0;
}

/* A small monospace "prompt" label, e.g. › create-account.sh */
.retro-prompt {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--phosphor-dim);
}

/* Terminal window frame -------------------------------------------------------
 * A light, legible card dressed as an old terminal/desktop window: a title bar
 * with three "traffic light" dots and a monospace filename. Used to wrap forms. */
.terminal-card {
  border: 1px solid #1c1c1c;
  border-radius: 0.625rem;
  background: #fff;
  box-shadow: 0 1px 0 #000, 0 10px 30px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.terminal-titlebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #161616;
  color: #d8d8d8;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.75rem;
}
.terminal-dot { width: 0.625rem; height: 0.625rem; border-radius: 9999px; display: inline-block; }
.terminal-dot--r { background: #ff5f57; }
.terminal-dot--y { background: #febc2e; }
.terminal-dot--g { background: #28c840; }
.terminal-title { margin-left: 0.25rem; opacity: 0.85; }

/* Dark phosphor panel for "display" surfaces (counter preview, empty state). */
.crt-panel {
  position: relative;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(57, 255, 102, 0.06), transparent 60%),
    var(--crt-bg);
  color: var(--phosphor);
  border: 1px solid rgba(57, 255, 102, 0.22);
  border-radius: 0.625rem;
  overflow: hidden;
}
/* Scanlines + a faint vignette, drawn over the panel without blocking clicks. */
.crt-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.22) 2px 3px);
  mix-blend-mode: multiply;
}
.crt-panel .crt-glow { color: var(--phosphor); text-shadow: 0 0 6px rgba(57, 255, 102, 0.45); }
.crt-muted { color: rgba(57, 255, 102, 0.6); }

/* Chunky arcade button: bright phosphor fill, ink border, hard offset shadow that
 * collapses when pressed — the classic Memphis/arcade "physical button" feel.
 * Used on the light cream canvas. */
.btn-terminal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: "Cartridge", ui-sans-serif, system-ui;
  font-weight: 700;
  color: var(--ink);
  background: var(--phosphor);
  border: 2px solid var(--ink);
  border-radius: 0.5rem;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.05s ease, filter 0.15s ease;
}
.btn-terminal:hover { filter: brightness(1.04); }
.btn-terminal:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

/* Same button for use ON dark CRT panels: a colored hard shadow pops on dark. */
.btn-phosphor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: "Cartridge", ui-sans-serif, system-ui;
  font-weight: 700;
  color: var(--crt-bg);
  background: var(--phosphor);
  border: 2px solid var(--phosphor);
  border-radius: 0.5rem;
  box-shadow: 3px 3px 0 var(--mem-pink);
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.05s ease, filter 0.15s ease;
}
.btn-phosphor:hover { filter: brightness(1.04); }
.btn-phosphor:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--mem-pink); }

/* Numbered step badge — a chunky Cartridge numeral in a colored arcade tile.
 * Set --c per step to cycle the Memphis palette. */
.step-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.6rem;
  font-family: "Cartridge", ui-sans-serif, system-ui;
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--ink);
  background: var(--c, var(--phosphor));
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

@keyframes retro-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }