/* ============================================
   WPMRace Stitch / Velocity Dark UI layer
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* Midnight default — only applies when no data-theme is set.
   Using :root:not([data-theme]) ensures theme-specific selectors in
   variables.css ([data-theme="ocean"] etc.) always win. */
:root:not([data-theme]) {
  --bg-primary: #0b0816;
  --bg-secondary: #141120;
  --bg-tertiary: #211d2d;
  --bg-surface: rgba(22, 18, 39, 0.62);
  --bg-surface-hover: rgba(43, 40, 55, 0.72);
  --text-primary: #e7dff4;
  --text-secondary: #ccc3d8;
  --text-tertiary: #958da1;
  --text-muted: #475569;
  --accent: #d2bbff;
  --accent-hover: #ede0ff;
  --accent-glow: rgba(210, 187, 255, 0.28);
  --accent-subtle: rgba(210, 187, 255, 0.08);
  --color-correct: #45dfa4;
  --color-incorrect: #f43f5e;
  --color-cursor: #2fd9f4;
  --color-word-active: #e7dff4;
  --color-word-pending: #6f6780;
  --color-success: #45dfa4;
  --color-info: #2fd9f4;
  --glass-bg: rgba(22, 18, 39, 0.62);
  --glass-border: rgba(255, 255, 255, 0.06);
  --shadow-glow: 0 0 22px rgba(210, 187, 255, 0.22);
}

/* Layout/font/spacing variables apply globally regardless of theme */
:root {
  --font-primary: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', monospace;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --container-max: 1100px;
  --test-area-max: 900px;
}

body {
  background:
    radial-gradient(circle at 50% 18%, var(--accent-glow), transparent 34rem),
    var(--bg-primary);
}

.app::before,
.app::after {
  display: none;
}

.container {
  max-width: var(--container-max);
}

.header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-8);
  margin: 0 auto var(--space-16);
  padding: var(--space-6) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: transparent;
}

.logo {
  gap: var(--space-3);
}

.logo-mark {
  display: none;
}

.logo-text {
  color: var(--accent);
  font-size: clamp(2.75rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.92;
  text-shadow: 0 0 22px rgba(210, 187, 255, 0.18);
}

.primary-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}

.primary-nav-link {
  position: relative;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.primary-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  border-radius: var(--radius-full);
  background: transparent;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.primary-nav-link:hover,
.primary-nav-link.active {
  color: var(--color-cursor);
}

.primary-nav-link:hover::after,
.primary-nav-link.active::after {
  background: var(--color-cursor);
  box-shadow: 0 0 12px rgba(47, 217, 244, 0.45);
}

.header-actions {
  gap: var(--space-3);
}

.streak-badge,
.icon-btn,
.theme-picker,
.mode-bar,
.integrated-stats,
.result-card,
.leaderboard-submit-box,
.classroom-panel,
.insights-panel,
.ad-content,
.modal,
.profile-modal-box,
.race-modal-box {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(22, 18, 39, 0.62);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: none;
}

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
}

.icon-btn:hover {
  color: var(--accent);
  border-color: rgba(210, 187, 255, 0.22);
  box-shadow: 0 0 16px rgba(210, 187, 255, 0.16);
}

.quick-nav,
.career-practice,
.ad-container-disabled,
.mobile-tip,
.mobile-keyboard-tip,
.daily-progress,
.race-banner,
.race-card,
.ad-container-horizontal.ad-after-test {
  display: none !important;
}

.main-content {
  padding: 0 0 var(--space-20);
}

.mode-bar {
  width: min(100%, var(--test-area-max));
  margin: 0 auto var(--space-2);
  padding: 0 var(--space-1);
  border-color: transparent !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.mode-group {
  gap: var(--space-5);
  background: transparent;
  border: 0;
  padding: 0;
}

.mode-btn {
  min-width: auto;
  padding: 0 0 var(--space-1);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-weight: 700;
}

.mode-btn.active,
.mode-btn:hover {
  color: var(--color-cursor);
  border-bottom-color: var(--color-cursor);
  background: transparent;
  box-shadow: none;
}

.live-stats {
  width: min(100%, var(--test-area-max));
  margin: 0 auto var(--space-3);
  justify-content: flex-start;
  gap: var(--space-4);
  opacity: 0.68 !important;
  transform: none !important;
  pointer-events: none;
}

.live-stat {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  text-align: left;
}

.live-stat:last-child {
  margin-left: auto;
}

.live-stat-value {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1;
  text-shadow: 0 0 8px rgba(210, 187, 255, 0.32);
}

.live-stat-label {
  margin-top: 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
}

.test-area {
  min-height: 220px;
  padding: var(--space-10) 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.test-area:hover,
.test-area.focused {
  border: 0;
  box-shadow: none;
}

.words-container {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 3.2vw, 2rem);
  line-height: 1.55;
  letter-spacing: 0.045em;
}

.word.current {
  color: var(--text-primary);
  text-shadow: 0 0 8px rgba(210, 187, 255, 0.35);
}

.word.current::after {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(210, 187, 255, 0.42);
}

.char.correct {
  color: var(--color-correct);
}

.char.incorrect {
  color: var(--color-incorrect);
  text-decoration: line-through;
}

.restart-hint {
  margin-top: var(--space-8);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.race-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: min(100%, 672px);
  margin: var(--space-10) auto var(--space-16);
  padding: var(--space-6);
  border: 1px solid rgba(210, 187, 255, 0.20);
  border-radius: var(--radius-xl);
  background: rgba(22, 18, 39, 0.62);
  box-shadow: 0 0 24px rgba(210, 187, 255, 0.14);
}

.race-card-title {
  color: var(--text-primary);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.race-card-text {
  color: var(--text-secondary);
}

.btn-primary,
.btn-secondary,
.race-card .btn {
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
  font-weight: 700;
}

.btn-primary {
  background: var(--accent);
  color: #25005a;
  box-shadow: 0 0 18px rgba(210, 187, 255, 0.24);
}

.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 24px rgba(210, 187, 255, 0.34);
}

.integrated-stats {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
}

.stats-panel-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.stats-tabs {
  background: transparent;
  border: 0;
  gap: var(--space-6);
}

.stats-tab {
  padding: 0 0 var(--space-2);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.stats-tab.active,
.stats-tab:hover {
  color: var(--color-cursor);
  border-bottom-color: var(--color-cursor);
  background: transparent;
}

.list-item,
.classroom-builder,
.classroom-roster,
.profile-stat-card,
.result-stat-item,
.daily-stats-row,
.insight-tip {
  border-color: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  background: rgba(20, 17, 32, 0.72);
}

.list-item:hover {
  border-color: rgba(47, 217, 244, 0.22);
  background: rgba(33, 29, 45, 0.82);
}

.classroom-title,
.career-title,
.result-wpm-value,
.page-hero h1 {
  color: var(--text-primary);
  letter-spacing: -0.035em;
}

.classroom-kicker,
.career-kicker,
.section-title,
.profile-section-title,
.result-coach-kicker {
  color: var(--color-cursor);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

.typing-guide {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
  gap: var(--space-12);
  max-width: var(--container-max);
  margin-top: var(--space-20) !important;
  padding: var(--space-12) 0 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.typing-guide .section-title {
  grid-column: 1 / -1;
  margin-bottom: calc(-1 * var(--space-6));
  color: var(--text-primary);
  font-family: var(--font-primary);
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  letter-spacing: -0.025em;
  text-transform: none;
  border: 0;
}

.typing-guide .section-title::before {
  display: none;
}

.typing-guide p,
.typing-guide li {
  color: var(--text-secondary);
}

.footer {
  margin-top: var(--space-20);
  padding: var(--space-8) 0 var(--space-12);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
}

.footer-links {
  justify-content: flex-start;
  gap: var(--space-8);
}

.footer a {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-weight: 700;
}

.footer-divider {
  display: none;
}

@media (max-width: 900px) {
  .header {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-12);
  }

  .primary-nav {
    gap: var(--space-5);
    overflow-x: auto;
    width: 100%;
    justify-content: flex-start;
    padding-bottom: var(--space-2);
  }

  .header-actions {
    flex-wrap: wrap;
    justify-content: center;
  }

  .mode-bar {
    align-items: stretch;
  }

  .typing-guide {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 640px) {
  .container,
  .main-content {
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
  }

  .logo-text {
    font-size: 2.6rem;
  }

  .mode-bar,
  .live-stats,
  .test-wrapper,
  .integrated-stats {
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
  }

  .test-area,
  .words-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .words-container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    column-gap: 0.72rem;
    row-gap: 0.25rem;
    width: calc(100vw - 4rem) !important;
    max-width: calc(100vw - 4rem) !important;
    overflow: hidden;
    font-size: 1.1rem;
    line-height: 1.55;
    letter-spacing: 0.025em;
  }

  .word {
    flex: 0 0 auto;
    margin: 0;
  }

  .test-area {
    padding: var(--space-8) var(--space-4);
  }

  .integrated-stats {
    padding: var(--space-5);
  }

  .stats-panel-header {
    padding: 0;
  }

  .stats-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    width: 100%;
  }

  .stats-tab {
    min-width: 0;
    padding: 0.8rem 0.55rem;
    font-size: 0.58rem;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: normal;
  }

  .stats-tab:last-child {
    grid-column: 1 / -1;
  }

  .footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.race-card .btn {
  min-width: 168px;
  justify-content: center;
}

@media (max-width: 640px) {
  .race-card {
    align-items: stretch;
    flex-direction: column;
  }
}


/* Keep the Stitch focus layout clean: the existing race CTA belongs outside the first viewport. */
.race-banner,
.race-card {
  display: none !important;
}