/* Palette — 80s arcade cabinet re-skin (ADR-10, ARCHITECTURE.md). Full
   replacement of the earlier Perforce-brand-compliant palette; the brand
   mapping notes that used to live at the top of this file now live in
   ARCHITECTURE.md's "Style history" section for the record.
   Design brief (verbatim from the person who asked for this): "aim for a
   80s arcade style palette. 8 bit text for titles, some nice sprite-y
   visuals." Titles/labels/buttons use the self-hosted "Press Start 2P"
   pixel font (public/fonts/, OFL-licensed — see public/fonts/OFL.txt);
   body copy stays in a monospace system font, since Press Start 2P is
   unreadable at paragraph sizes. Every text/background pairing below has
   been eyeballed for contrast against a near-black arcade-cabinet
   background — flag anything under ~4.5:1 for body text if you add a
   new pairing. */

@font-face {
  font-family: "Press Start 2P";
  src: url("/fonts/press-start-2p.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg: #0d0221;            /* cabinet background — near-black purple */
  --bg-panel: #1a0a2e;      /* card/panel surface, one step up from bg */
  --bg-inset: #150a26;      /* recessed surfaces — chat window, inputs */
  --magenta: #ff2fd0;       /* PRIMARY neon accent — headings, "you" bubble, primary buttons */
  --magenta-dim: #b0189a;   /* derived: darker magenta — hover/active state */
  --cyan: #00fff9;          /* secondary neon — links, secondary buttons, "Solid" band */
  --cyan-dim: #00b3af;      /* derived: darker cyan — hover state on cyan elements */
  --yellow: #ffe600;        /* tertiary neon — high scores, coins, warnings */
  --green: #39ff14;         /* success neon — "Strong" band, positive states */
  --green-dim: #1f8a0b;     /* derived: darker green, text-safe on panel bg */
  --ink: #f4f2ff;           /* body text on dark surfaces (14.8:1 on --bg-panel) */
  --muted: #a897d6;         /* derived: dim lavender-grey — secondary/meta text (5.1:1 on --bg-panel) */
  --line: #4a2f7a;          /* panel borders, muted purple */
  --err: #ff3860;           /* hot pink-red — errors, "Developing" band */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Courier New", ui-monospace, Menlo, Consolas, monospace;
  color: var(--ink);
  background: var(--bg);
  position: relative;
  min-height: 100vh;
}

/* CRT scanline overlay — a static, low-opacity repeating gradient (no
   flicker/strobe animation: real CRT flicker reads as charming for a few
   seconds and as a headache/seizure risk for anyone sensitive to it, so this
   stays purely decorative and static). Sits above content via z-index but
   is pointer-events:none so it never blocks clicks. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.035) 0px,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 3px
  );
}
/* Faint vignette + starfield-ish radial glow behind everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 47, 208, 0.16), transparent 55%),
    radial-gradient(ellipse at 50% 110%, rgba(0, 255, 249, 0.12), transparent 55%);
}

.pixel-font { font-family: "Press Start 2P", "Courier New", monospace; }

header {
  background: var(--bg-panel);
  color: var(--ink);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 4px solid var(--magenta);
  box-shadow: 0 0 18px rgba(255, 47, 208, 0.45);
}
header .logo-sprite { width: 26px; height: 26px; flex-shrink: 0; image-rendering: pixelated; }
header h1 {
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--magenta);
  text-shadow: 0 0 6px var(--magenta), 0 0 14px rgba(255, 47, 208, 0.6);
}
header .tag { color: var(--cyan); font-size: 12px; letter-spacing: 0.5px; }
header .status { margin-left: auto; font-size: 12px; color: var(--cyan); display: flex; align-items: center; gap: 10px; }
header .status button { padding: 5px 10px; font-size: 11px; }

.wrap { max-width: 880px; margin: 22px auto; padding: 0 16px; }

/* "Pixel panel" — a chunky hard-offset shadow instead of a soft drop shadow
   is the single biggest lever for reading as 8-bit UI rather than a
   re-colored modern one; used on every card, button, and bordered box below. */
.card {
  background: var(--bg-panel);
  border: 3px solid var(--line);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 255, 249, 0.08) inset;
  border-radius: 0;
  padding: 20px 22px;
  margin-bottom: 22px;
}

h2 {
  font-family: "Press Start 2P", monospace;
  color: var(--cyan);
  font-size: 13px;
  letter-spacing: 0.5px;
  margin: 0 0 14px;
  text-shadow: 0 0 8px rgba(0, 255, 249, 0.5);
  line-height: 1.6;
}
.muted { color: var(--muted); font-size: 13px; }
label { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--yellow); display: block; margin: 12px 0 5px; }

select, textarea, input {
  width: 100%;
  padding: 10px 11px;
  border: 2px solid var(--line);
  background: var(--bg-inset);
  color: var(--ink);
  border-radius: 0;
  font: inherit;
}
select:focus, textarea:focus, input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(0, 255, 249, 0.3); }

button {
  background: var(--magenta);
  color: #1a0a2e;
  border: 2px solid #1a0a2e;
  padding: 11px 18px;
  border-radius: 0;
  font: inherit;
  font-family: "Press Start 2P", monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.7);
  transition: transform 0.05s linear, box-shadow 0.05s linear;
}
button:hover { background: #ff5cdc; }
/* Arcade "press" feel: the button physically moves into its own shadow. */
button:active { transform: translate(3px, 3px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.7); }
button.secondary { background: var(--bg-inset); color: var(--cyan); border: 2px solid var(--cyan); }
button.secondary:hover { background: rgba(0, 255, 249, 0.12); }
button.link { background: transparent; color: var(--cyan); border: 0; box-shadow: none; padding: 6px 4px; font-family: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
button.link:active { transform: none; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.row { display: flex; gap: 10px; align-items: center; }
.persona-box { background: var(--bg-inset); border: 2px solid var(--line); border-left: 4px solid var(--magenta); padding: 12px 14px; font-size: 13px; margin-top: 6px; }
#chat, #app { display: none; }
.subhead { font-size: 12px; color: var(--muted); margin: -6px 0 12px; }

.messages {
  border: 2px solid var(--line);
  height: 380px;
  overflow-y: auto;
  padding: 14px;
  background: var(--bg-inset);
}
.msg { margin-bottom: 12px; display: flex; align-items: flex-end; gap: 6px; }
.msg .bubble { padding: 10px 13px; border: 2px solid #1a0a2e; max-width: 74%; font-size: 14px; line-height: 1.4; white-space: pre-wrap; }
.msg.se { justify-content: flex-end; }
.msg.se .bubble { background: var(--cyan); color: #0d0221; }
.msg.cust .bubble { background: var(--magenta); color: #1a0a2e; }
.msg .sprite-accent { width: 18px; height: 14px; flex-shrink: 0; image-rendering: pixelated; opacity: 0.9; }
.who { font-size: 10px; color: var(--muted); margin: 0 6px; align-self: center; text-transform: uppercase; letter-spacing: 0.5px; }
.composer { display: flex; gap: 8px; margin-top: 12px; }
.composer textarea { resize: none; height: 46px; }

.report .score-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
.dim { border: 2px solid var(--line); padding: 10px 12px; background: var(--bg-inset); }
.dim .head { display: flex; justify-content: space-between; font-weight: 700; font-size: 13px; }
.pill { font-size: 12px; padding: 2px 9px; color: #0d0221; }
/* Blocky "health bar" segments instead of a smooth gradient bar — a small
   repeating-gradient stripe pattern is enough to read as retro pixel UI. */
.bar {
  height: 10px;
  background: #2a1a4a;
  border: 1px solid var(--line);
  margin: 8px 0 4px;
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(to right, var(--cyan) 0 6px, #0d0221 6px 7px);
}
.band { font-family: "Press Start 2P", monospace; font-size: 16px; font-weight: 400; color: var(--cyan); text-shadow: 0 0 6px currentColor; }
ul.tight { margin: 6px 0; padding-left: 20px; } ul.tight li { margin: 4px 0; font-size: 14px; }
.err { color: var(--err); font-size: 13px; margin-top: 8px; }
.ok-msg { color: var(--green); font-size: 13px; margin-top: 8px; }
.spinner { font-size: 13px; color: var(--yellow); display: flex; align-items: center; gap: 8px; }
.spinner .sprite-accent { width: 20px; height: 14px; image-rendering: pixelated; animation: blink-invader 1s steps(1) infinite; }
@keyframes blink-invader { 50% { opacity: 0.35; } }

.quiz-q { margin-bottom: 14px; }
hr { border: 0; border-top: 2px dashed var(--line); margin: 18px 0; }
.badge { display: inline-block; font-size: 10px; background: var(--bg-inset); border: 1px solid var(--cyan); color: var(--cyan); padding: 3px 8px; margin-left: 6px; text-transform: uppercase; letter-spacing: 0.5px; }

.history-item { border: 2px solid var(--line); padding: 10px 12px; margin-bottom: 8px; cursor: pointer; background: var(--bg-inset); }
.history-item:hover { border-color: var(--magenta); }
.history-item .head { display: flex; justify-content: space-between; font-weight: 700; font-size: 13px; }
.history-detail { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }

#loginGate { max-width: 460px; margin: 70px auto; text-align: center; }
#loginGate .arcade-sprite { width: 64px; height: 64px; image-rendering: pixelated; margin-bottom: 6px; }
#loginGate button { padding: 14px 26px; font-size: 13px; }
#loginGate h2 { text-align: center; font-size: 15px; }

/* ---------- Weekly high-score leaderboard ---------- */
#leaderboardCard .week-label { font-size: 11px; color: var(--yellow); text-align: right; margin: -8px 0 12px; letter-spacing: 0.5px; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 2px solid var(--line); background: var(--bg-inset); margin-bottom: 6px; }
.lb-rank { font-family: "Press Start 2P", monospace; font-size: 12px; color: var(--muted); width: 34px; flex-shrink: 0; }
.lb-row.lb-top1 { border-color: var(--yellow); box-shadow: 0 0 10px rgba(255, 230, 0, 0.35); }
.lb-row.lb-top1 .lb-rank { color: var(--yellow); }
.lb-row.lb-top2 .lb-rank { color: #c9c9d8; }
.lb-row.lb-top3 .lb-rank { color: #cd8a4a; }
.lb-trophy { width: 22px; height: 18px; flex-shrink: 0; image-rendering: pixelated; }
.lb-who { flex: 1; min-width: 0; }
.lb-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-context { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-family: "Press Start 2P", monospace; font-size: 13px; color: var(--green); text-shadow: 0 0 5px rgba(57, 255, 20, 0.5); flex-shrink: 0; }
.lb-optout { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 10px; }
.lb-optout input { width: auto; }

/* Respect reduced-motion preferences for the invader blink. */
@media (prefers-reduced-motion: reduce) {
  .spinner .sprite-accent { animation: none; }
}

/* ---------- Utility classes ----------
   IMPORTANT: this app's CSP is `style-src 'self'` with no 'unsafe-inline'
   (server.js), which silently no-ops any `style="..."` attribute written
   into HTML markup OR injected via innerHTML — including ones set from a
   JS template string. It does NOT block `el.style.x = value` assigned via
   the CSSOM after the fact (that's a script action, gated by script-src,
   not style-src). Every one-off layout tweak in index.html/app.js has to be
   a class here for that reason — never a `style="..."` attribute, and never
   an innerHTML template that writes one. See ARCHITECTURE.md's CSP note. */
.sprite-defs-svg { position: absolute; }
#signOutBtn, #loginGate, #report, #quizCard, #chatSpinner { display: none; }
.login-sub { text-align: center; margin-bottom: 14px; }
.row-center { justify-content: center; }
.row-between { justify-content: space-between; }
.row-gap-lg { gap: 14px; }
#loginErr { text-align: center; }
.h2-icon { vertical-align: -4px; margin-right: 6px; }
.actions { margin-top: 14px; }
.quiz-grade-item { margin-bottom: 8px; }
/* Score bar fill — fixed-step width classes (rubric scores are 0-4) instead
   of an inline `style="width:..."`, for the CSP reason above. */
.bar > i.w0 { width: 0%; }
.bar > i.w1 { width: 25%; }
.bar > i.w2 { width: 50%; }
.bar > i.w3 { width: 75%; }
.bar > i.w4 { width: 100%; }
/* Band color — class per band instead of an inline `style="color:..."`. */
.band-strong { color: var(--green); }
.band-solid { color: var(--cyan); }
.band-developing { color: var(--err); }