/* ==========================================================================
   TYPING TURBO — base.css
   Design tokens, reset, shared components (buttons, panels, on-screen
   keyboard, overlays, toasts, particles canvas).
   ========================================================================== */

:root {
  /* Surfaces */
  --bg-0: #05060d;
  --bg-1: #0a0d1a;
  --bg-2: #111530;
  --bg-3: #1a2045;
  --panel: rgba(18, 23, 48, 0.78);
  --panel-solid: #141935;
  --panel-hi: rgba(38, 48, 96, 0.72);

  /* Lines */
  --stroke: rgba(122, 152, 255, 0.20);
  --stroke-strong: rgba(140, 175, 255, 0.42);

  /* Text */
  --txt: #eef2ff;
  --txt-dim: #a3b2d9;
  --txt-faint: #6e7da8;

  /* Brand */
  --pink: #ff3d81;
  --cyan: #22e0ff;
  --yellow: #ffd23f;
  --violet: #8b6bff;
  --green: #3ce97b;
  --orange: #ff8a3d;
  --red: #ff4d5e;

  --accent: var(--cyan);
  --accent-2: var(--pink);

  /* Geometry */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 26px;
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --ui-scale: 1;
  --hud-scale: 1;

  /* Finger colours used by the keyboard + hand guides */
  --f-lp: #ff5f8f;
  --f-lr: #ff9f43;
  --f-lm: #ffd93d;
  --f-li: #4ee38a;
  --f-ri: #29d3ff;
  --f-rm: #6b8cff;
  --f-rr: #b76bff;
  --f-rp: #ff6bd6;
  --f-th: #8fa1c9;

  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: calc(16px * var(--ui-scale));
  line-height: 1.45;
  color: var(--txt);
  background: var(--bg-0);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeSpeed;
}

body.is-scrollable { overflow: auto; }

h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.1; }
p { margin: 0 0 0.6em; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--cyan); }

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------- utilities */

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.hidden { display: none !important; }

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { align-items: center; justify-content: center; }
.gap-xs { gap: 6px; } .gap-sm { gap: 10px; } .gap { gap: 16px; } .gap-lg { gap: 26px; }

.display {
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-style: italic;
}

.muted { color: var(--txt-dim); }
.faint { color: var(--txt-faint); }
.tiny { font-size: 0.78em; }
.small { font-size: 0.88em; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------------------------------------------------------------- buttons */

.btn {
  --btn-bg: linear-gradient(180deg, rgba(58, 72, 132, 0.9), rgba(28, 36, 74, 0.95));
  --btn-line: var(--stroke-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.72em 1.25em;
  border: 2px solid var(--btn-line);
  border-radius: 14px;
  background: var(--btn-bg);
  color: var(--txt);
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  user-select: none;
  transition: transform 0.13s var(--ease-out), filter 0.15s, box-shadow 0.15s, border-color 0.15s;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), var(--shadow-sm);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-2px); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.btn[disabled], .btn.is-locked { opacity: 0.5; cursor: not-allowed; filter: saturate(0.4); transform: none; }

.btn--play {
  --btn-bg: linear-gradient(180deg, #3ff0a5, #12a765);
  --btn-line: rgba(190, 255, 224, 0.6);
  color: #04220f;
  font-size: 1.15em;
  padding: 0.85em 1.8em;
  box-shadow: 0 6px 0 rgba(6, 71, 42, 0.9), 0 18px 40px rgba(28, 226, 145, 0.28);
}
.btn--pink { --btn-bg: linear-gradient(180deg, #ff6fa5, #d6135b); --btn-line: rgba(255, 190, 216, 0.55); color: #2a0413; }
.btn--cyan { --btn-bg: linear-gradient(180deg, #6ceaff, #0b9fc4); --btn-line: rgba(190, 246, 255, 0.55); color: #04202a; }
.btn--yellow { --btn-bg: linear-gradient(180deg, #ffdf6b, #d9a100); --btn-line: rgba(255, 244, 190, 0.6); color: #2b1e00; }
.btn--violet { --btn-bg: linear-gradient(180deg, #a68bff, #6034d9); --btn-line: rgba(214, 200, 255, 0.55); color: #150433; }
.btn--ghost { --btn-bg: rgba(255, 255, 255, 0.05); --btn-line: var(--stroke); box-shadow: none; font-weight: 700; }
.btn--ghost:hover { --btn-bg: rgba(255, 255, 255, 0.1); }
.btn--sm { padding: 0.42em 0.8em; font-size: 0.85em; border-radius: 11px; border-width: 2px; }
.btn--icon { padding: 0.55em; width: 2.6em; height: 2.6em; border-radius: 12px; }
.btn--block { width: 100%; }

/* ---------------------------------------------------------------- panels */

.panel {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.95em;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--txt-dim);
}

/* Pill / badge */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.28em 0.7em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--stroke);
  font-size: 0.8em;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pill--gold { background: linear-gradient(180deg, #ffe07a, #d99b00); color: #2b1e00; border-color: rgba(255, 240, 180, 0.7); }
.pill--violet { background: linear-gradient(180deg, #a68bff, #6034d9); color: #fff; border-color: rgba(214, 200, 255, 0.5); }

/* Progress bar */
.bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  border: 1px solid var(--stroke);
}
.bar > i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transition: width 0.25s var(--ease-out);
}
.bar--xp > i { background: linear-gradient(90deg, var(--yellow), var(--orange)); }

/* ---------------------------------------------------------------- app shell */

.app {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--app-top, 0px);
  height: var(--app-h, 100vh);
  display: block;
  touch-action: manipulation;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.screen--scroll { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }

.screen-enter { animation: screenIn 0.32s var(--ease-out) both; }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(14px) scale(0.995); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- splash */

.splash {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: radial-gradient(120% 90% at 50% 0%, #1b2159 0%, #0a0d1a 55%, #05060d 100%);
  transition: opacity 0.4s ease, visibility 0.4s;
}
.splash.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.splash__logo { display: flex; gap: 0.35em; flex-wrap: wrap; justify-content: center; }
.splash__word {
  font-weight: 900; font-style: italic; letter-spacing: 0.06em;
  font-size: clamp(2rem, 9vw, 4.2rem); text-transform: uppercase;
  color: #fff; text-shadow: 0 6px 0 rgba(0, 0, 0, 0.35);
}
.splash__word--accent {
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.splash__bar { width: min(320px, 70vw); height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.splash__bar > i { display: block; width: 40%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--pink)); animation: splashSlide 1.1s infinite var(--ease-out); }
@keyframes splashSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(280%); } }
.splash__note { color: var(--txt-dim); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.78em; font-weight: 800; }

.noscript { padding: 40px; text-align: center; }

/* ---------------------------------------------------------------- fx canvas */

.fx-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 60;
}

/* ---------------------------------------------------------------- capture input
   The hidden field used to summon the device's on-screen keyboard on mobile.
   It must stay focusable but visually absent (opacity 0 + 1px still keeps
   iOS/Android happy, unlike display:none which blocks focus). */

.capture-input {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 2px;
  padding: 0;
  border: 0;
  opacity: 0.01;
  z-index: 1;
  transform: translateX(-50%);
  caret-color: transparent;
}

/* ---------------------------------------------------------------- overlay */

.overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: radial-gradient(120% 100% at 50% 0%, rgba(26, 32, 69, 0.86), rgba(5, 6, 13, 0.94));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-y: auto;
}
.overlay--soft { background: radial-gradient(120% 100% at 50% 0%, rgba(10, 13, 26, 0.55), rgba(5, 6, 13, 0.82)); }
.overlay.is-hidden { display: none; }

.dialog {
  width: min(560px, 100%);
  padding: 26px;
  text-align: center;
  animation: dialogIn 0.34s var(--ease-back) both;
}
.dialog--wide { width: min(820px, 100%); text-align: left; }
@keyframes dialogIn {
  from { opacity: 0; transform: translateY(24px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- toast */

.toasts {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  width: min(420px, 92vw);
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(52, 64, 120, 0.96), rgba(22, 28, 60, 0.96));
  border: 1px solid var(--stroke-strong);
  box-shadow: var(--shadow);
  font-weight: 700;
  animation: toastIn 0.35s var(--ease-back) both;
}
.toast--good { border-color: rgba(60, 233, 123, 0.6); }
.toast--bad { border-color: rgba(255, 77, 94, 0.6); }
.toast--gold { border-color: rgba(255, 210, 63, 0.7); background: linear-gradient(180deg, rgba(120, 92, 12, 0.96), rgba(60, 44, 4, 0.96)); }
.toast.is-out { animation: toastOut 0.3s ease both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(18px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(12px) scale(0.94); } }

/* ---------------------------------------------------------------- stars */

.stars { display: inline-flex; gap: 6px; }
.star {
  width: 1.4em; height: 1.4em;
  display: inline-block;
  background: rgba(255, 255, 255, 0.14);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.star.is-on { background: linear-gradient(180deg, #ffe98a, #f0a800); box-shadow: 0 0 14px rgba(255, 208, 63, 0.6); }
.stars--lg .star { width: 2.4em; height: 2.4em; }

/* ========================================================================== */
/* SHARED ON-SCREEN KEYBOARD                                                  */
/* ========================================================================== */

.osk {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  padding: 10px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(24, 30, 62, 0.92), rgba(11, 14, 30, 0.92));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  user-select: none;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.osk__row { display: flex; gap: 5px; justify-content: center; width: 100%; }
.osk__key {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: linear-gradient(180deg, #39436f, #232a4d);
  border: 1px solid rgba(160, 185, 255, 0.18);
  border-bottom-width: 3px;
  font-weight: 800;
  font-size: 0.9rem;
  color: #dbe4ff;
  cursor: pointer;
  transition: transform 0.07s, background 0.12s, box-shadow 0.12s, color 0.12s;
}
.osk__key--wide { flex: 2.2 1 0; }
.osk__key--wider { flex: 3.4 1 0; }
.osk__key--space { flex: 7 1 0; }
.osk__key.is-home::after {
  content: "";
  position: absolute;
  bottom: 6px;
  width: 14px; height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.5);
}
.osk__key.is-down { transform: translateY(2px); background: linear-gradient(180deg, #5a68a8, #3b457a); }
.osk__key.is-target {
  background: linear-gradient(180deg, #ffd85f, #e09a00);
  color: #2b1e00;
  border-color: #fff3c0;
  box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.28), 0 0 26px rgba(255, 200, 40, 0.55);
  animation: keyPulse 1.1s infinite ease-in-out;
  z-index: 2;
}
@keyframes keyPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.osk__key.is-good { background: linear-gradient(180deg, #57ef9b, #14a35f); color: #04220f; border-color: #c9ffe2; }
.osk__key.is-bad { background: linear-gradient(180deg, #ff7183, #c22236); color: #2b0006; border-color: #ffd0d6; animation: shake 0.28s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.osk__key[data-finger] { border-top: 3px solid var(--key-finger, transparent); }

/* Finger dot legend */
.finger-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; font-size: 0.75rem; color: var(--txt-dim); }
.finger-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }

/* ========================================================================== */
/* HAND GUIDE (Keyboard Academy)                                              */
/* ========================================================================== */

.hands { display: flex; gap: clamp(6px, 3vw, 34px); justify-content: center; align-items: flex-start; }
.hands svg { width: clamp(120px, 26vw, 220px); height: auto; overflow: visible; }
.hand__finger { transition: fill 0.18s, filter 0.18s; }
.hand__finger.is-active { filter: drop-shadow(0 0 10px currentColor); }
.hand__label { font-size: 3.4px; font-weight: 800; fill: #0a0d1a; text-anchor: middle; pointer-events: none; }

/* ========================================================================== */
/* MOTION / CONTRAST PREFERENCES                                              */
/* ========================================================================== */

body[data-contrast="high"] {
  --stroke: rgba(190, 214, 255, 0.55);
  --stroke-strong: rgba(220, 236, 255, 0.85);
  --panel: rgba(8, 10, 22, 0.94);
  --txt-dim: #cdd9f5;
  --txt-faint: #a8b6d8;
}
body[data-contrast="high"] .osk__key { border-color: rgba(220, 236, 255, 0.55); }

body[data-motion="reduced"] *,
body[data-motion="reduced"] *::before,
body[data-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
body[data-motion="reduced"] .fx-canvas { display: none; }

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
}

@media (max-width: 620px) {
  .btn { padding: 0.65em 1em; }
  .dialog { padding: 18px; }
  .osk__key { height: 40px; font-size: 0.82rem; border-radius: 8px; }
}
@media (max-width: 420px) {
  .osk { padding: 6px; gap: 4px; }
  .osk__row { gap: 3px; }
  .osk__key { height: 36px; font-size: 0.74rem; }
}