/* TypingStreak "future" look: deep-space background with moving aurora light and a glowing grid, frosted-glass
   panels with neon edges, sci-fi headings, glowing keys. Loaded last; only restyles, no layout changes.
   Only while no Pro theme is chosen (themes mark <html data-ks-theme>), so light themes stay readable. */

/* Fonts are bundled (assets/fonts, SIL Open Font License, latin subset; variable weights in one file each). */
@font-face { font-family: "Orbitron"; src: url("../assets/fonts/orbitron.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../assets/fonts/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root:not([data-ks-theme]) {
  & {
    --bg: #04050f;
    --surface: rgb(18 22 48 / 0.55);
    --surface-2: rgb(120 140 255 / 0.1);
    --text: #eef1ff;
    --muted: #9aa3cf;
    --border: rgb(150 170 255 / 0.18);
    --primary: #7c6cff;
    --primary-text: #ffffff;
    --cyan: #2fe6ff;
    --pink: #ff4fd8;
    --good: #3dfcb0;
    --bad: #ff5c8a;
    --warn: #ffc55c;
    --cursor: rgb(47 230 255 / 0.18);
    --hint: #7c6cff;
    --star: #ffd25c;
    --star-off: #3a3f66;
    --shadow-sm: inset 0 1px 0 rgb(255 255 255 / 0.07);
    --shadow-md: 0 24px 70px rgb(0 0 0 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.1);
    --glow: 0 0 24px rgb(124 108 255 / 0.55);
    --radius: 18px;
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --display: "Orbitron", "Space Grotesk", system-ui, sans-serif;
    --neon: linear-gradient(110deg, var(--cyan), var(--primary) 50%, var(--pink));
    /* finger zones: dim neon tints */
    --f-L5: rgb(255 79 216 / 0.14); --f-L4: rgb(255 160 80 / 0.13); --f-L3: rgb(255 220 90 / 0.12); --f-L2: rgb(61 252 176 / 0.12);
    --f-R2: rgb(47 230 255 / 0.13); --f-R3: rgb(110 140 255 / 0.15); --f-R4: rgb(170 110 255 / 0.15); --f-R5: rgb(255 90 170 / 0.14); --f-T: rgb(255 255 255 / 0.05);
    --game-bg: #050716; --game-bg-2: #1a0b3d; --game-fg: #eef1ff; --game-accent: #2fe6ff; --game-accent-2: #ff4fd8; --game-danger: #ff5c8a; --game-good: #3dfcb0;
    --hand-opacity: 0.94; --hand-fill: #e9ecfb; --hand-line: #b9c0e6; --hand-nail: #8d93c0; --hand-active: #2fe6ff;
    --key-target: #7c6cff; --key-wrong: #ff5c8a; --key-correct: #3dfcb0;
    color-scheme: dark;
  }

  body {
    font-family: "Space Grotesk", system-ui, "Segoe UI", sans-serif;
    background: var(--bg);
    min-height: 100vh;
  }
  /* aurora light (slowly drifting) and a glowing grid that fades out towards the top */
  body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
  body::before {
    inset: -20%;
    background:
      radial-gradient(40% 35% at 18% 12%, rgb(47 230 255 / 0.26), transparent 70%),
      radial-gradient(38% 40% at 85% 8%, rgb(124 108 255 / 0.34), transparent 70%),
      radial-gradient(45% 40% at 60% 95%, rgb(255 79 216 / 0.18), transparent 70%);
    filter: blur(20px);
    animation: aurora 26s ease-in-out infinite alternate;
  }
  body::after {
    background:
      linear-gradient(rgb(124 140 255 / 0.07) 1px, transparent 1px) 0 0 / 46px 46px,
      linear-gradient(90deg, rgb(124 140 255 / 0.07) 1px, transparent 1px) 0 0 / 46px 46px;
    mask-image: linear-gradient(to top, #000, transparent 75%);
  }
  ::selection { background: rgb(124 108 255 / 0.55); color: #fff; }
  * { scrollbar-color: rgb(124 108 255 / 0.5) transparent; }

  /* type */
  h1, h2, h3, .brand, .cert-brand, .stars-big { font-family: var(--display); letter-spacing: 0.02em; }
  /* numbers stay in Space Grotesk: Orbitron draws 0 with a slash, which reads as Ø */
  .stat-value, .metric-value { font-weight: 700; font-variant-numeric: tabular-nums; }
  h1 { background: linear-gradient(100deg, #fff 15%, #b9b0ff 50%, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .home-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.3rem); line-height: 1.1; }
  h2 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.12em; }
  h3 { font-size: 0.98rem; letter-spacing: 0.04em; }
  .eyebrow { color: var(--cyan); text-shadow: 0 0 12px rgb(47 230 255 / 0.6); letter-spacing: 0.22em; }
  .stat-value, .metric-value { background: var(--neon); -webkit-background-clip: text; background-clip: text; color: transparent; }

  /* top bar */
  .topbar { background: rgb(6 7 20 / 0.97); border-bottom: 1px solid var(--border); }
  .brand { letter-spacing: 0.06em; }
  .brand span { background: var(--neon); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 8px rgb(124 108 255 / 0.7)); }
  .nav a, .nav-more summary { border-radius: 99px; }
  .nav a.active { background: rgb(124 108 255 / 0.18); color: #fff; box-shadow: inset 0 0 0 1px rgb(124 108 255 / 0.55), 0 0 18px rgb(124 108 255 / 0.35); }
  .nav-more-menu { background: rgb(12 14 34); }

  /* glass panels */
  .home-hero, .hero, .card, .stat, .lesson-card, .typing-area, .results, .test-form, .chart-wrap, .table, .game-stage {
    background-color: rgb(10 12 30 / 0.94); /* solid enough to read on; no backdrop blur (soft text) */
  }
  .home-hero {
    position: relative;
    border-radius: 30px;
    background: linear-gradient(140deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.02)), rgb(10 12 32 / 0.55);
    border: 1px solid transparent;
    box-shadow: var(--shadow-md), 0 0 80px rgb(124 108 255 / 0.18);
  }
  /* neon edge that slowly travels round the hero */
  .home-hero::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
    background: conic-gradient(from var(--edge, 0deg), var(--cyan), var(--primary), var(--pink), transparent 40%, var(--cyan));
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: edge 8s linear infinite;
  }
  .card, .stat, .lesson-card { background: linear-gradient(160deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.015)); }
  .card:hover, .ex-tile:hover { border-color: rgb(124 108 255 / 0.8); box-shadow: 0 0 0 1px rgb(124 108 255 / 0.5), 0 18px 50px rgb(124 108 255 / 0.28); }
  .lesson-card.next { box-shadow: 0 0 0 1px var(--primary), 0 0 36px rgb(124 108 255 / 0.35); }
  .lesson-card.next .lesson-num { box-shadow: var(--glow); }
  .ex-tile { background: rgb(255 255 255 / 0.03); }
  .badge-done { box-shadow: 0 0 16px rgb(61 252 176 / 0.3); }
  .progress .fill { background: var(--neon); box-shadow: 0 0 12px rgb(124 108 255 / 0.8); }

  /* buttons */
  .btn { border-radius: 99px; background: rgb(255 255 255 / 0.05); transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s; }
  .btn:hover { border-color: var(--cyan); box-shadow: 0 0 18px rgb(47 230 255 / 0.35); }
  .btn-primary { background: var(--neon); border: 0; color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / 0.35); box-shadow: 0 10px 34px rgb(124 108 255 / 0.55); }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 44px rgb(124 108 255 / 0.75); filter: brightness(1.08); }
  .btn-good { background: linear-gradient(110deg, #19d9a0, var(--good)); border: 0; color: #032018; }
  .btn:focus-visible, .chip:focus-visible, .card:focus-visible { outline-color: var(--cyan); }

  /* typing */
  .typing-area { background: rgb(8 10 28 / 0.6); border: 1px solid var(--border); }
  .typing-area:focus-within { border-color: rgb(124 108 255 / 0.85); box-shadow: 0 0 0 1px rgb(124 108 255 / 0.5), 0 0 40px rgb(124 108 255 / 0.25); }
  .ch.current { box-shadow: inset 0 -3px 0 var(--cyan), 0 0 14px rgb(47 230 255 / 0.45); }
  .ch.error { box-shadow: 0 0 12px rgb(255 92 138 / 0.6); }

  /* keyboard: glass keys, glowing target */
  .kb-key { border-radius: 9px; border-color: rgb(150 170 255 / 0.2); border-bottom-width: 1px; color: #cfd5ff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08); }
  .kb-plain .kb .kb-key { background: rgb(255 255 255 / 0.05); border-bottom-width: 1px; color: #aab2e0; }
  .kb-key.kb-target, .kb-key.kb-hint { box-shadow: 0 0 0 1px #fff3, 0 0 22px rgb(124 108 255 / 0.95), 0 0 50px rgb(124 108 255 / 0.45); }
  .kb-key.kb-wrong { box-shadow: 0 0 22px rgb(255 92 138 / 0.9); }
  .kb-key.kb-correct { box-shadow: inset 0 0 0 2px var(--key-correct), 0 0 18px rgb(61 252 176 / 0.6); }
  .kb-caption { color: var(--cyan); letter-spacing: 0.08em; }
  .hand-art, .hands-overlay { filter: drop-shadow(0 0 14px rgb(124 108 255 / 0.25)); }

  /* forms, tables, chips */
  .field input, .field select, select, .kt-search { background: rgb(255 255 255 / 0.05); border-color: var(--border); }
  .field input:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgb(124 108 255 / 0.25); }
  .table { background: rgb(10 12 32 / 0.5); }
  .table th { background: rgb(124 108 255 / 0.12); letter-spacing: 0.04em; }
  .chip.on { box-shadow: var(--glow); }
  .chart .line { filter: drop-shadow(0 0 6px currentColor); }
  .chart .line-0 { color: var(--primary); } .chart .line-1 { color: var(--good); }
  kbd { background: rgb(255 255 255 / 0.06); }

  /* lesson results: glowing edge in the pass/fail colour, gold stars with a halo, neon cheer */
  .results { border-radius: 24px; border-width: 1px; background: linear-gradient(160deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.015)), rgb(10 12 32 / 0.94); }
  .results.pass { box-shadow: 0 0 0 1px rgb(61 252 176 / 0.45), 0 0 60px rgb(61 252 176 / 0.16); }
  .results.fail { box-shadow: 0 0 0 1px rgb(255 197 92 / 0.45), 0 0 60px rgb(255 197 92 / 0.12); }
  .results-stars { position: relative; }
  .results-stars::before { content: ""; position: absolute; left: 50%; top: 50%; width: 280px; height: 130px; translate: -50% -50%; background: radial-gradient(closest-side, rgb(255 210 92 / 0.25), transparent); pointer-events: none; }
  .stars-big .star.on { filter: drop-shadow(0 0 10px rgb(255 210 92 / 0.85)); }
  .results-cheer { text-align: center; font-family: var(--display); font-size: 1.5rem; background: var(--neon); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .verdict.pass { text-shadow: 0 0 12px rgb(61 252 176 / 0.6); }
  .results h2 { text-align: center; }

  /* typing-test results: neon big numbers on a glass panel */
  .pr-top { padding: 20px; border-radius: 24px; border: 1px solid var(--border); background: linear-gradient(160deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.015)); }
  .pr-big-value { background: var(--neon); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgb(124 108 255 / 0.45)); }
  .pr-pb-badge:not(.subtle) { background: var(--neon); color: #fff; box-shadow: var(--glow); }
  .pr-pot-value { text-shadow: 0 0 18px rgb(61 252 176 / 0.45); }
  .pr-card { background: linear-gradient(160deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.015)); }
  .pr-bar span { background: var(--neon); box-shadow: 0 0 10px rgb(124 108 255 / 0.6); }
  .pr-bar-row.has-err .pr-bar span { background: var(--warn); box-shadow: 0 0 10px rgb(255 197 92 / 0.5); }

  /* lesson map */
  .lesson-card.done { box-shadow: 0 0 0 1px rgb(61 252 176 / 0.35), 0 0 28px rgb(61 252 176 / 0.1); }
  .lesson-card.done .lesson-num { box-shadow: 0 0 14px rgb(61 252 176 / 0.6); color: #032018; }
  .star.on { text-shadow: 0 0 8px rgb(255 210 92 / 0.7); }
  .star-total { text-shadow: 0 0 14px rgb(255 210 92 / 0.45); }
  .ex-tile.next { box-shadow: 0 0 18px rgb(124 108 255 / 0.35); }

  /* games hub */
  .gm-card { background: linear-gradient(160deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.015)); }
  .gm-card:hover, .gm-card:focus-visible { box-shadow: 0 0 0 1px rgb(124 108 255 / 0.6), 0 18px 50px rgb(124 108 255 / 0.3); }
  .gm-card.featured { box-shadow: 0 0 0 1px rgb(47 230 255 / 0.4), 0 0 50px rgb(124 108 255 / 0.2); }
  .gm-featured { color: var(--cyan); text-shadow: 0 0 12px rgb(47 230 255 / 0.6); }
  .gm-chip.on { background: var(--neon); border: 0; color: #fff; box-shadow: var(--glow); }

  /* today strip, badges, toasts, onboarding */
  .today-item, .badge, .onb-rec, .toast { background: linear-gradient(160deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.015)), rgb(10 12 32 / 0.94); }
  .goal-fill { filter: drop-shadow(0 0 6px rgb(61 252 176 / 0.8)); }
  .badge.on { box-shadow: 0 0 0 1px rgb(255 210 92 / 0.45), 0 0 30px rgb(255 210 92 / 0.15); }
  .badge.on .badge-icon { filter: drop-shadow(0 0 10px rgb(255 210 92 / 0.6)); }
  .toast { box-shadow: 0 0 0 1px rgb(255 210 92 / 0.5), 0 20px 50px rgb(0 0 0 / 0.5), 0 0 40px rgb(255 210 92 / 0.2); }
  .onb-rec { box-shadow: 0 0 0 1px rgb(124 108 255 / 0.6), 0 0 50px rgb(124 108 255 / 0.2); }
  .onb-goal .btn.on { background: var(--neon); border: 0; color: #fff; }
  .kp.new { background: var(--neon); border: 0; box-shadow: var(--glow); }

  /* pages slide in; race vehicles a little bigger, glowing in their own colour */
  .page { animation: page-in 0.35s ease-out both; }
  .rc-vehicle { width: 60px; height: 30px; filter: drop-shadow(0 0 6px currentColor); }

  /* certificate stays print-friendly */
  .certificate { background: rgb(10 12 32 / 0.7); border-color: var(--primary); }
  @media print {
    & { --bg: #fff; --surface: #fff; --text: #000; --muted: #444; --border: #ccc; --primary: #3b5bdb; color-scheme: light; }
    body::before, body::after, .home-hero::after { display: none; }
    h1, .stat-value, .metric-value, .brand span { background: none; color: inherit; -webkit-background-clip: border-box; background-clip: border-box; }
    .certificate { background: #fff; }
  }
}

@keyframes aurora {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(4%, 3%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(-4%, 2%, 0) rotate(-6deg) scale(1.04); }
}
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }
@property --edge { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes edge { to { --edge: 360deg; } }