/* =====================================================================
   STARForce theme — the one place the site's look is defined.
   Colors, fonts, the logo, shapes and motion all come from the tokens
   below; every page loads this file AFTER its own styles, so changing a
   token here restyles the whole site. (A future Branding panel will edit
   these same tokens.)

   Fonts load from Google Fonts in each page's <head>:
   Russo One (display), Share Tech Mono (HUD labels), Nunito (reading).
   ===================================================================== */

:root {
  /* ---- Brand tokens ---- */
  --sf-void: #050a1a;          /* page background */
  --sf-deep: #0a1433;          /* background glow */
  --sf-panel: #0c183e;         /* cards and panels */
  --sf-panel-2: #12214f;       /* raised / hover panels */
  --sf-line: #24366e;          /* borders and dividers */
  --sf-cyan: #4fd1ff;          /* primary glow: active, links, focus */
  --sf-cyan-soft: rgba(79, 209, 255, .18);
  --sf-gold: #ffc627;          /* STAR Points, earned, main buttons */
  --sf-gold-soft: rgba(255, 198, 39, .18);
  --sf-text: #eaf4ff;          /* main text */
  --sf-text-2: #c2d2ef;        /* secondary text */
  --sf-muted: #a9bbdd;         /* quiet labels */
  --sf-good: #3ccf7f;          /* complete, correct */
  --sf-bad: #ff5a6e;           /* locked and errors ONLY */
  --sf-purple: #7b4a96;        /* teacher accents */
  --sf-ink: #0b1440;           /* dark text on gold/cyan */

  --sf-font-display: "Russo One", "Arial Black", system-ui, sans-serif;
  --sf-font-hud: "Share Tech Mono", ui-monospace, Menlo, Consolas, monospace;
  --sf-font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --sf-logo: url("../assets/logo.webp");
  --sf-cut: 14px;              /* clipped-corner size */
  --sf-grid: 40px;             /* background grid spacing */

  /* ---- Older names the pages already use, mapped onto the tokens ---- */
  --navy: var(--sf-void);
  --navy-2: var(--sf-panel-2);
  --gold: var(--sf-gold);
  --purple: var(--sf-cyan);
  --purple-dark: #2fb8ea;
  --bg: var(--sf-void);
  --card: var(--sf-panel);
  --text: var(--sf-text);
  --muted: var(--sf-muted);
  --line: var(--sf-line);
  --good: var(--sf-good);
  --bad: var(--sf-bad);
  --warn: #ffd76e;
  color-scheme: dark;
}

/* ---------- Page ---------- */
html { background: var(--sf-void); }
body {
  background:
    linear-gradient(rgba(79, 209, 255, .05) 1px, transparent 1px) 0 0 / var(--sf-grid) var(--sf-grid),
    linear-gradient(90deg, rgba(79, 209, 255, .05) 1px, transparent 1px) 0 0 / var(--sf-grid) var(--sf-grid),
    radial-gradient(ellipse 80% 60% at 50% 0%, #13235a 0%, var(--sf-deep) 45%, var(--sf-void) 100%) fixed;
  background-color: var(--sf-void);
  color: var(--sf-text);
  font-family: var(--sf-font-body);
}
/* Scan lines over everything (drawn by the page itself, never blocks clicks). */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0, rgba(255, 255, 255, .025) 1px, transparent 1px, transparent 4px);
}
a { color: var(--sf-cyan); }
a:hover { color: #9be6ff; }
h1, h2, h3 { font-family: var(--sf-font-display); font-weight: 400; letter-spacing: 1px; color: var(--sf-text); }
::selection { background: var(--sf-cyan); color: var(--sf-ink); }

/* ---------- Header ---------- */
header {
  background: rgba(5, 10, 26, .82) !important;
  border-bottom: 1px solid rgba(79, 209, 255, .25);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sf-logo { display: block; height: 52px; width: auto; }
.sf-logo.big { height: auto; width: min(440px, 80vw); margin: 0 auto; filter: drop-shadow(0 0 24px rgba(79, 209, 255, .25)); }
.sf-hud {
  font-family: var(--sf-font-hud); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--sf-cyan);
}
.sf-hud.gold { color: var(--sf-gold); }
.sf-hud.quiet { color: var(--sf-muted); }

/* ---------- Panels ---------- */
.card, .sf-panel {
  background: rgba(12, 24, 62, .86) !important;
  border: 1px solid rgba(79, 209, 255, .22) !important;
  border-radius: 0 !important;
  clip-path: polygon(var(--sf-cut) 0, 100% 0, 100% calc(100% - var(--sf-cut)), calc(100% - var(--sf-cut)) 100%, 0 100%, 0 var(--sf-cut));
  color: var(--sf-text);
}
.sf-brackets {
  --c: var(--sf-cyan);
  background:
    linear-gradient(var(--c), var(--c)) top left / 18px 2px no-repeat, linear-gradient(var(--c), var(--c)) top left / 2px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 18px 2px no-repeat, linear-gradient(var(--c), var(--c)) top right / 2px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 18px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 2px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 18px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 2px 18px no-repeat;
}
.sf-section-title {
  display: flex; align-items: center; gap: 14px; margin: 22px 0 12px;
  font-family: var(--sf-font-hud); font-size: 15px; letter-spacing: 4px; text-transform: uppercase; color: var(--sf-gold);
}
.sf-section-title::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .35; }
.sf-section-title.cyan { color: var(--sf-cyan); }

/* ---------- Buttons ---------- */
button {
  font-family: var(--sf-font-display); letter-spacing: 1px;
  background: var(--sf-gold); color: var(--sf-ink); border: 0 !important; border-radius: 0 !important;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
button:hover { background: #ffd65c; color: var(--sf-ink); }
button:focus-visible { outline: 3px solid var(--sf-cyan); outline-offset: 2px; }
button.ghost {
  background: transparent; color: var(--sf-cyan); clip-path: none;
  box-shadow: inset 0 0 0 1px rgba(79, 209, 255, .6);
}
button.ghost:hover { background: var(--sf-cyan-soft); color: var(--sf-text); }
button.link {
  background: none; color: var(--sf-cyan); clip-path: none; font-family: var(--sf-font-body); font-weight: 800; letter-spacing: 0;
}
button.link:hover { background: none; color: #9be6ff; text-decoration: underline; }
button.danger, button.link.danger { color: var(--sf-bad); }
button.chip {
  background: transparent; color: var(--sf-gold); clip-path: none; box-shadow: inset 0 0 0 1px var(--sf-gold); font-family: var(--sf-font-hud);
}
button.chip:hover { background: var(--sf-gold-soft); }
button.chip.on { background: var(--sf-gold); color: var(--sf-ink); }
button.cyan { background: var(--sf-cyan); color: var(--sf-void); box-shadow: 0 0 20px rgba(79, 209, 255, .45); }
button.cyan:hover { background: #8fe3ff; }
button:disabled { opacity: .45; cursor: default; }

/* ---------- Forms ---------- */
input[type=text], input[type=email], input[type=password], input[type=number], input:not([type]), select, textarea {
  background: rgba(5, 10, 26, .75) !important; color: var(--sf-text) !important;
  border: 1px solid rgba(79, 209, 255, .45) !important; border-radius: 0 !important;
  font-family: var(--sf-font-body);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sf-cyan) !important; box-shadow: 0 0 0 2px var(--sf-cyan-soft), 0 0 18px rgba(79, 209, 255, .25); }
input::placeholder, textarea::placeholder { color: rgba(169, 187, 221, .6); }
label { color: var(--sf-text-2); }
input[type=checkbox], input[type=radio] { accent-color: var(--sf-cyan); }
input[type=range] { accent-color: var(--sf-gold); }

/* ---------- Text helpers ---------- */
.muted { color: var(--sf-muted) !important; }
.error { color: #ff8a99 !important; }
.ok-msg, .bp-ok { color: var(--sf-good) !important; }

/* ---------- Tables ---------- */
table th { font-family: var(--sf-font-hud); font-weight: 400; letter-spacing: 2px; color: var(--sf-cyan) !important; border-bottom-color: rgba(79, 209, 255, .3) !important; }
table td { border-bottom-color: rgba(79, 209, 255, .14) !important; }
tr.sel { background: rgba(79, 209, 255, .1) !important; }
td.code { font-family: var(--sf-font-hud); color: var(--sf-gold); }

/* ---------- Tags ---------- */
.tag { font-family: var(--sf-font-hud); letter-spacing: 1px; border-radius: 0 !important; }
.tag.on { background: rgba(60, 207, 127, .16) !important; color: var(--sf-good) !important; }
.tag.off { background: rgba(169, 187, 221, .12) !important; color: var(--sf-muted) !important; }
.tag.inv { background: var(--sf-gold-soft) !important; color: var(--sf-gold) !important; }
.tag.dis { background: rgba(255, 90, 110, .15) !important; color: #ff8a99 !important; }
.tag.adm { background: var(--sf-cyan-soft) !important; color: var(--sf-cyan) !important; }

/* ---------- Warnings / notes ---------- */
.warn { background: rgba(255, 198, 39, .1) !important; border: 1px solid rgba(255, 198, 39, .45) !important; color: #ffe39a !important; border-radius: 0 !important; }

/* ---------- Dialogs and toasts ---------- */
dialog {
  background: var(--sf-panel) !important; color: var(--sf-text) !important;
  border: 1px solid rgba(79, 209, 255, .45) !important; border-radius: 0 !important;
  box-shadow: 0 0 0 1px rgba(79, 209, 255, .2), 0 20px 60px rgba(0, 0, 0, .6) !important;
}
dialog::backdrop { background: rgba(5, 10, 26, .75) !important; }
#toast {
  background: var(--sf-panel-2) !important; color: var(--sf-text) !important; border: 1px solid var(--sf-cyan);
  border-radius: 0 !important; font-weight: 700; box-shadow: 0 0 24px rgba(79, 209, 255, .35) !important;
}

/* ---------- Gauges ---------- */
.sf-ring { display: block; }
.sf-ring .track { stroke: var(--sf-cyan-soft); }
.sf-ring .val { stroke: var(--sf-cyan); transition: stroke-dasharray .9s ease-out; }
.sf-ring.gold .track { stroke: var(--sf-gold-soft); }
.sf-ring.gold .val { stroke: var(--sf-gold); }
.sf-ring.good .val { stroke: var(--sf-good); }

/* ---------- Motion ---------- */
@keyframes sf-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes sf-pulse { 0%, 100% { box-shadow: 0 0 14px rgba(79, 209, 255, .25); } 50% { box-shadow: 0 0 38px rgba(79, 209, 255, .65); } }
@keyframes sf-sweep { from { transform: translateY(-20vh); } to { transform: translateY(120vh); } }
@keyframes sf-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sf-granted { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.sf-blink { animation: sf-blink 1.8s ease-in-out infinite; }
.sf-pulse { animation: sf-pulse 2.4s ease-in-out infinite; }
.sf-in { animation: sf-in .45s ease-out both; }
/* The scanning band that glides down the screen. */
.sf-sweep { position: fixed; left: 0; right: 0; top: 0; height: 18vh; pointer-events: none; z-index: 9998;
  background: linear-gradient(180deg, transparent 0%, rgba(79, 209, 255, .04) 70%, rgba(79, 209, 255, .14) 96%, rgba(170, 236, 255, .45) 99.5%, transparent 100%);
  animation: sf-sweep 9s linear infinite; }

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

/* ---------- Print: paper stays white ---------- */
@media print {
  :root { color-scheme: light; }
  html, body { background: #fff !important; color: #000 !important; }
  body::after, .sf-sweep { display: none !important; }
}

/* While a lesson is playing full screen, keep slides clean. */
body:has(.lp)::after, body:has(.lp) .sf-sweep { display: none; }
.lp button { clip-path: none; }