/* ============================================================================
   MLO ARCADE — FULL REDESIGN STYLESHEET

   Design Philosophy: Premium fintech meets clean study app
   Font: Satoshi (from Fontshare)
   Palette: Arctic Frost — icy blues, silver, mint accents
   Borders: Thin (1px), subtle, no heavy glows
   Shadows: Soft, minimal — no neon arcade effects
   ============================================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,600,700,900&display=swap');

/* ============================================================================
   CSS CUSTOM PROPERTIES (Design Tokens) — ARCTIC FROST
   ============================================================================ */
:root {
  --font-primary: 'Satoshi', system-ui, -apple-system, sans-serif;
  --bg-base: #0b0f1a;
  --bg-card: rgba(140,180,255,0.03);
  --bg-card-hover: rgba(140,180,255,0.06);
  --bg-elevated: #141929;
  --border-subtle: rgba(140,180,255,0.08);
  --border-accent: rgba(126,180,255,0.15);
  --border-accent-hover: rgba(126,180,255,0.3);
  --text-primary: #eef2ff;
  --text-secondary: rgba(238,242,255,0.6);
  --text-tertiary: rgba(238,242,255,0.35);
  --text-muted: rgba(238,242,255,0.2);
  --accent-cyan: #7eb4ff;
  --accent-green: #6ee7b7;
  --accent-gold: #e2c57b;
  --accent-orange: #fb923c;
  --accent-red: #f87171;
  --accent-yellow: #fbbf24;
  --gradient-primary: linear-gradient(90deg, #7eb4ff, #a8d4ff);
  --gradient-card: linear-gradient(160deg, rgba(126,180,255,0.06), rgba(110,231,183,0.04), transparent);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 100px;
  --shadow-card: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-elevated: 0 4px 16px rgba(0,0,0,0.35);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   GLOBAL RESETS & BASE
   ============================================================================ */
body {
  font-family: var(--font-primary) !important;
  background: #0b0f1a;
  color: #eef2ff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  font-family: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-primary) !important;
  letter-spacing: -0.3px;
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ringFill {
  from { stroke-dashoffset: var(--ring-circumference); }
  to { stroke-dashoffset: var(--ring-target); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ============================================================================
   TOP BAR / HEADER
   ============================================================================ */
.logo {
  font-family: var(--font-primary) !important;
  font-weight: 800 !important;
  letter-spacing: 2.5px !important;
  text-shadow: none !important;
}

/* ============================================================================
   BOTTOM NAVIGATION
   ============================================================================ */
.bottom-nav {
  border-top: 1px solid var(--border-accent) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.3) !important;
  background: rgba(10,10,26,0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bottom-nav-tab {
  font-family: var(--font-primary) !important;
  font-weight: 600;
  font-size: 10px !important;
  letter-spacing: 0.3px;
  transition: color var(--transition-fast);
}

.bottom-nav-tab svg {
  stroke-width: 1.5 !important;
  transition: all var(--transition-fast);
}

.bottom-nav-tab.active svg {
  filter: none !important;
  color: var(--accent-cyan);
}

/* Focus mode nav — warm analog */
body.focus-mode .bottom-nav {
  background: #ece6da !important;
  border-top-color: #d4cdbf !important;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.06) !important;
}

/* ============================================================================
   MODE GRID (Practice & Test Screens)
   ============================================================================ */
.mode-grid {
  gap: 10px !important;
}

.mode-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  padding: 22px 16px !important;
  transition: all var(--transition-normal) !important;
  box-shadow: none !important;
}

.mode-card:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--border-accent-hover) !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

.mode-card:active {
  transform: scale(0.98) !important;
  opacity: 0.95 !important;
}

.mode-card-icon {
  font-size: 28px;
  margin-bottom: 10px !important;
  line-height: 1;
}

.mode-card-name {
  font-family: var(--font-primary) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px;
}

.mode-card-desc {
  font-size: 11px !important;
  color: var(--text-tertiary) !important;
  line-height: 1.5 !important;
}

.mode-card-time {
  font-size: 10px !important;
  color: var(--text-muted) !important;
  margin-top: 8px !important;
}

/* Locked mode cards */
.mode-card.locked {
  opacity: 0.35 !important;
  filter: none !important;
}

.mode-card-unlock-hint {
  font-size: 10px !important;
  color: var(--text-muted) !important;
  font-style: normal !important;
  letter-spacing: 0.3px;
}

/* ============================================================================
   BACK BUTTON
   ============================================================================ */
.mode-back-btn {
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-tertiary) !important;
  font-family: var(--font-primary) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  transition: all var(--transition-fast) !important;
}

.mode-back-btn:hover {
  border-color: var(--border-accent) !important;
  color: var(--accent-cyan) !important;
}

/* ============================================================================
   QUESTION CARDS
   ============================================================================ */
.question-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 28px 22px !important;
}

.question-text {
  font-family: var(--font-primary) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.1px;
}

/* ============================================================================
   ANSWER BUTTONS
   ============================================================================ */
.answer-btn {
  font-family: var(--font-primary) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px 18px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--text-primary) !important;
  transition: all var(--transition-fast) !important;
  box-shadow: none !important;
}

.answer-btn:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--border-accent) !important;
  box-shadow: none !important;
  transform: none !important;
}

.answer-btn.correct,
.answer-btn[style*="border-color: #6ee7b7"],
.answer-btn[style*="border-color:#6ee7b7"] {
  background: rgba(110,231,183,0.08) !important;
  border-color: rgba(110,231,183,0.4) !important;
  box-shadow: none !important;
}

.answer-btn.wrong,
.answer-btn[style*="border-color: #f87171"],
.answer-btn[style*="border-color:#f87171"] {
  background: rgba(248,113,113,0.08) !important;
  border-color: rgba(248,113,113,0.4) !important;
  box-shadow: none !important;
}

/* ============================================================================
   PRIMARY & SECONDARY BUTTONS
   ============================================================================ */
.btn-primary {
  font-family: var(--font-primary) !important;
  background: var(--gradient-primary) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 4px 16px rgba(126,180,255,0.15) !important;
  transition: all var(--transition-normal) !important;
}

.btn-primary:hover {
  box-shadow: 0 4px 20px rgba(126,180,255,0.25) !important;
  transform: translateY(-1px) !important;
}

.btn-secondary {
  font-family: var(--font-primary) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  transition: all var(--transition-normal) !important;
}

.btn-secondary:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--border-accent-hover) !important;
}

/* ============================================================================
   RESULTS SCREENS
   ============================================================================ */
.results-screen {
  animation: fadeUp 0.4s ease both;
}

.results-title {
  font-family: var(--font-primary) !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  text-shadow: none !important;
}

.results-stat {
  font-family: var(--font-primary) !important;
}

.game-over-title {
  font-family: var(--font-primary) !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}

/* Star rating */
.results-screen .star-rating,
.results-screen [style*="font-size: 36px"] {
  letter-spacing: 4px;
}

/* ============================================================================
   EXPLANATION BLOCKS
   ============================================================================ */
.explanation {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  padding: 18px !important;
  font-family: var(--font-primary) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--text-secondary) !important;
  animation: fadeIn 0.3s ease both;
}

/* ============================================================================
   TIMER DISPLAYS
   ============================================================================ */
.timer {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
}

.survival-timer {
  font-family: 'Satoshi', monospace !important;
  font-weight: 700 !important;
}

/* ============================================================================
   FLASHCARDS
   ============================================================================ */
.flashcard {
  font-family: var(--font-primary) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  box-shadow: var(--shadow-card) !important;
}

/* ============================================================================
   MATCHING / DEFINITION DUEL
   ============================================================================ */
.match-card {
  font-family: var(--font-primary) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 500 !important;
  transition: all var(--transition-fast) !important;
}

.duel-term {
  font-family: var(--font-primary) !important;
  background: var(--gradient-card) !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

.duel-option {
  font-family: var(--font-primary) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px 18px !important;
  font-weight: 500 !important;
  transition: all var(--transition-fast) !important;
}

.duel-option:hover {
  border-color: var(--border-accent) !important;
  background: var(--bg-card-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}

.duel-option.correct {
  border-color: rgba(110,231,183,0.4) !important;
  background: rgba(110,231,183,0.08) !important;
  box-shadow: none !important;
}

.duel-option.wrong {
  border-color: rgba(248,113,113,0.4) !important;
  background: rgba(248,113,113,0.08) !important;
  box-shadow: none !important;
}

/* Progress dots */
.duel-dot {
  border: 1.5px solid rgba(255,255,255,0.15) !important;
  background: transparent !important;
}

.duel-dot.correct {
  background: var(--accent-green) !important;
  border-color: var(--accent-green) !important;
  box-shadow: none !important;
}

.duel-dot.wrong {
  background: var(--accent-red) !important;
  border-color: var(--accent-red) !important;
  box-shadow: none !important;
}

.duel-dot.current {
  border-color: var(--accent-cyan) !important;
  box-shadow: none !important;
}

/* ============================================================================
   CALCULATOR
   ============================================================================ */
.calc-toggle {
  background: var(--gradient-primary) !important;
  box-shadow: 0 4px 16px rgba(126,180,255,0.2) !important;
  font-family: var(--font-primary) !important;
}

.calc-panel {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-elevated) !important;
}

.calc-display {
  font-family: 'Satoshi', monospace !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
}

.calc-btn {
  font-family: var(--font-primary) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition-fast) !important;
}

.calc-btn:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--border-accent) !important;
}

.calc-btn.eq {
  background: var(--gradient-primary) !important;
}

/* ============================================================================
   REVIEW CARDS
   ============================================================================ */
.review-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
}

.review-card-header {
  font-family: var(--font-primary) !important;
  font-weight: 500 !important;
}

.review-card-header.correct-header {
  border-left: 3px solid var(--accent-green) !important;
}

.review-card-header.wrong-header {
  border-left: 3px solid var(--accent-red) !important;
  background: rgba(248,113,113,0.03) !important;
}

/* ============================================================================
   CATEGORY MASTERY BARS
   ============================================================================ */
.mastery-bar-bg {
  background: rgba(255,255,255,0.04) !important;
  border-radius: 4px !important;
  height: 8px !important;
}

.mastery-bar-fill {
  border-radius: 4px !important;
}

.mastery-row {
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 10px 0 !important;
}

.mastery-label {
  font-family: var(--font-primary) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

.mastery-pct {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
}

/* ============================================================================
   ONBOARDING
   ============================================================================ */
.onboarding-overlay {
  background: var(--bg-base) !important;
}

.ob-logo {
  font-family: var(--font-primary) !important;
  font-weight: 900 !important;
  letter-spacing: 3px !important;
  animation: fadeIn 0.8s ease both !important;
  text-shadow: none !important;
}

.ob-cta {
  font-family: var(--font-primary) !important;
  background: var(--gradient-primary) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
}

.onboarding-dot {
  border: 1.5px solid var(--accent-cyan) !important;
  background: transparent !important;
}

.onboarding-dot.active {
  background: var(--accent-cyan) !important;
  box-shadow: none !important;
}

.onboarding-dot.done {
  background: var(--accent-green) !important;
  border-color: var(--accent-green) !important;
}

/* ============================================================================
   BANNERS (Returning Student, Streak Risk, Drills)
   ============================================================================ */
.returning-banner {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: var(--radius-lg) !important;
}

.returning-banner-action button {
  background: var(--gradient-primary) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}

.streak-risk-banner {
  background: rgba(251,191,36,0.04) !important;
  border: 1px solid rgba(251,191,36,0.2) !important;
  border-radius: var(--radius-lg) !important;
}

.drills-banner {
  background: var(--bg-card) !important;
  border: 1px solid rgba(251,191,36,0.15) !important;
  border-radius: var(--radius-lg) !important;
  transition: all var(--transition-normal) !important;
}

.drills-banner:hover {
  border-color: rgba(251,191,36,0.3) !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

/* ============================================================================
   EXAM MODE
   ============================================================================ */
.exam-mode-active .question-card {
  border-color: var(--border-subtle) !important;
  box-shadow: var(--shadow-card) !important;
  background: var(--bg-card) !important;
}

.exam-mode-active .timer {
  background: rgba(126,180,255,0.04) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-primary) !important;
}

/* Exam navigator */
.exam-nav-bar {
  background: rgba(10,10,26,0.95) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-subtle) !important;
}

.exam-nav-btn {
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 4px !important;
  font-family: var(--font-primary) !important;
  font-weight: 600 !important;
  transition: all var(--transition-fast) !important;
}

.exam-nav-btn.current {
  border-color: var(--accent-cyan) !important;
  background: rgba(126,180,255,0.12) !important;
}

.exam-nav-btn.answered::after {
  box-shadow: none !important;
}

/* ============================================================================
   LEADERBOARD
   ============================================================================ */
.lb-mode-tab.active {
  background: var(--gradient-primary) !important;
  border-color: var(--accent-cyan) !important;
}

.lb-row {
  font-family: var(--font-primary) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

.lb-row.me {
  background: rgba(126,180,255,0.04) !important;
  border-left: 3px solid var(--accent-cyan) !important;
}

.lb-rank {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
}

.lb-score {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
}

/* ============================================================================
   SHARE CARD
   ============================================================================ */
.share-card {
  font-family: var(--font-primary) !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-elevated) !important;
}

.share-card-logo {
  font-family: var(--font-primary) !important;
  font-weight: 900 !important;
  letter-spacing: 3px !important;
}

/* ============================================================================
   PASS CELEBRATION
   ============================================================================ */
.pass-celebration {
  background: rgba(10,10,26,0.97) !important;
}

.pass-title {
  font-family: var(--font-primary) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

.pass-score {
  font-family: var(--font-primary) !important;
  font-weight: 800 !important;
}

/* ============================================================================
   TOAST & OVERLAY NOTIFICATIONS
   ============================================================================ */
.unlock-toast {
  font-family: var(--font-primary) !important;
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-elevated) !important;
  font-weight: 600 !important;
}

.unlock-overlay {
  background: rgba(10,10,26,0.95) !important;
}

.unlock-name {
  font-family: var(--font-primary) !important;
  font-weight: 800 !important;
  animation: none !important;
}

/* ============================================================================
   PERSONAL BEST BANNER
   ============================================================================ */
.pb-banner {
  font-family: var(--font-primary) !important;
  background: var(--gradient-primary) !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  box-shadow: 0 4px 16px rgba(126,180,255,0.3) !important;
  letter-spacing: 0.5px !important;
}

/* ============================================================================
   GAME OVER ENHANCEMENTS
   ============================================================================ */
.go-xp-earned {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
}

.go-percentile {
  font-family: var(--font-primary) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
}

/* ============================================================================
   KEYBOARD HELP
   ============================================================================ */
.kb-help-card {
  font-family: var(--font-primary) !important;
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: var(--radius-lg) !important;
}

.kb-help-key {
  font-family: var(--font-primary) !important;
  background: rgba(126,180,255,0.08) !important;
  border: 1px solid rgba(126,180,255,0.2) !important;
}

/* ============================================================================
   DIFFICULTY BADGES
   ============================================================================ */
.difficulty-badge {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  letter-spacing: 0.5px !important;
}

/* ============================================================================
   COMBO MILESTONES (subtle glow, no heavy text-shadow)
   ============================================================================ */
.combo-milestone-5 { text-shadow: none !important; }
.combo-milestone-10 { text-shadow: none !important; }
.combo-milestone-15 { text-shadow: none !important; }
.combo-milestone-25 { text-shadow: none !important; }

/* ============================================================================
   REINFORCEMENT TOGGLE
   ============================================================================ */
.reinforce-toggle-btn {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 6px !important;
}

.reinforce-menu {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-elevated) !important;
}

.reinforce-menu-item {
  font-family: var(--font-primary) !important;
}

/* ============================================================================
   AD SLOTS (Arctic Frost styled)
   ============================================================================ */
.ad-banner-slot {
  font-family: var(--font-primary) !important;
}

.ad-banner-slot ins {
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
}

.ad-interstitial {
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999 !important;
  background: rgba(11,15,26,0.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: fadeIn 0.3s ease !important;
}

.ad-interstitial .btn-secondary {
  border-color: rgba(126,180,255,0.2) !important;
  color: var(--text-secondary) !important;
  margin-top: 8px;
}

.ad-interstitial .btn-secondary:hover {
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
}

/* ============================================================================
   DASHBOARD CARDS (generic)
   ============================================================================ */
.dashboard-card {
  font-family: var(--font-primary) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}

/* ============================================================================
   INFO BOXES (in-game stats)
   ============================================================================ */
.info-box {
  font-family: var(--font-primary) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
}

.info-value {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
}

/* ============================================================================
   GLOSSARY
   ============================================================================ */
.glossary-item {
  font-family: var(--font-primary) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
}

/* ============================================================================
   TOMORROW PREVIEW
   ============================================================================ */
.tomorrow-preview {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
}

.tomorrow-preview-label {
  font-family: var(--font-primary) !important;
  letter-spacing: 1px !important;
}

.tomorrow-preview-mode {
  font-family: var(--font-primary) !important;
  font-weight: 600 !important;
}

/* ============================================================================
   CONTAINER ADJUSTMENTS
   ============================================================================ */
.container {
  max-width: 480px;
  margin: 0 auto;
}

/* ============================================================================
   INLINE SVG ICON SYSTEM
   ============================================================================ */
.icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}

.icon-svg svg {
  width: 1em;
  height: 1em;
  stroke-width: 1.5;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-svg.icon-lg svg {
  width: 1.5em;
  height: 1.5em;
}

.icon-svg.icon-xl svg {
  width: 2em;
  height: 2em;
}

/* ============================================================================
   NAV TABS (category selector in game modes)
   ============================================================================ */
.nav-tabs {
  border-bottom: 1px solid var(--border-subtle);
}

.nav-tab {
  font-family: var(--font-primary) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  transition: all var(--transition-fast) !important;
}

/* ============================================================================
   SPEED ROUND SPECIFICS
   ============================================================================ */
.speed-slide-in {
  animation: slideIn 0.25s ease both !important;
}

/* ============================================================================
   RESPONSIVE REFINEMENTS
   ============================================================================ */
@media (max-width: 480px) {
  .container {
    padding: 0 12px !important;
  }

  h1 {
    font-size: 22px !important;
    font-weight: 700 !important;
  }

  .question-card {
    padding: 22px 16px !important;
  }

  .answer-btn {
    padding: 14px 16px !important;
    font-size: 13px !important;
  }

  .mode-card {
    padding: 18px 14px !important;
  }

  .duel-term {
    font-size: 20px !important;
    padding: 18px !important;
  }

  .duel-option {
    font-size: 13px !important;
    padding: 14px 16px !important;
  }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  .mode-card,
  .question-card,
  .answer-btn,
  .duel-option,
  .review-card,
  .flashcard {
    border-width: 2px !important;
  }
}

/* ============================================================================
   FOCUS VISIBLE (keyboard nav)
   ============================================================================ */
:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

button:focus-visible,
.answer-btn:focus-visible,
.mode-card:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

/* ============================================================================
   ARCTIC FROST — GLOBAL COLOR OVERRIDES
   Catches all hardcoded colors from the original styles.css
   ============================================================================ */

/* Background overrides */
body,
.onboarding-overlay,
.pass-celebration,
.unlock-overlay,
.ad-interstitial,
.kb-help-overlay {
  background: #0b0f1a !important;
}

.top-bar,
.bottom-nav,
.exam-nav-bar {
  background: rgba(11,15,26,0.95) !important;
}

/* Elevated surfaces */
.calc-panel,
.kb-help-card,
.reinforce-menu,
.unlock-toast {
  background: #141929 !important;
}

/* Accent color: cyan → soft blue */
.bottom-nav-tab.active { color: #7eb4ff !important; }
.logo { color: #7eb4ff !important; }
.ob-logo { color: #7eb4ff !important; }
.mastery-pct { color: #7eb4ff !important; }
.lb-score { color: #7eb4ff !important; }
.tomorrow-preview-mode { color: #7eb4ff !important; }
.share-card-logo { color: #7eb4ff !important; }

/* Border accents: cyan → soft blue */
.bottom-nav { border-top-color: rgba(126,180,255,0.15) !important; }
.calc-panel { border-color: rgba(126,180,255,0.15) !important; }
.kb-help-card { border-color: rgba(126,180,255,0.15) !important; }
.share-card { border-color: rgba(126,180,255,0.15) !important; }

/* Green accent → Mint */
.answer-btn.correct,
.answer-btn[style*="border-color: #6ee7b7"],
.answer-btn[style*="border-color:#6ee7b7"] {
  background: rgba(110,231,183,0.08) !important;
  border-color: rgba(110,231,183,0.4) !important;
}

/* Duplicate .duel-option.correct removed — defined at line 432 */

.duel-dot.correct {
  background: #6ee7b7 !important;
  border-color: #6ee7b7 !important;
}

.review-card-header.correct-header {
  border-left-color: #6ee7b7 !important;
}

.difficulty-badge.easy {
  background: rgba(110,231,183,0.15) !important;
  color: #6ee7b7 !important;
}

.go-xp-earned { color: #6ee7b7 !important; }
.pass-score { color: #6ee7b7 !important; }
.calc-display { color: #6ee7b7 !important; }

/* Red accent → Soft red */
.answer-btn.wrong,
.answer-btn[style*="border-color: #f87171"],
.answer-btn[style*="border-color:#f87171"] {
  background: rgba(248,113,113,0.08) !important;
  border-color: rgba(248,113,113,0.4) !important;
}

.duel-option.wrong {
  border-color: rgba(248,113,113,0.4) !important;
  background: rgba(248,113,113,0.08) !important;
}

.duel-dot.wrong {
  background: #f87171 !important;
  border-color: #f87171 !important;
}

.review-card-header.wrong-header {
  border-left-color: #f87171 !important;
  background: rgba(248,113,113,0.03) !important;
}

.survival-timer { color: #f87171 !important; }

.difficulty-badge.hard {
  background: rgba(248,113,113,0.15) !important;
  color: #f87171 !important;
}

/* Gold accent → Warm amber */
.pass-title { color: #e2c57b !important; }
.duel-streak { color: #e2c57b !important; }
.lb-rank.gold { color: #e2c57b !important; }

.streak-risk-banner {
  background: rgba(251,191,36,0.04) !important;
  border-color: rgba(251,191,36,0.2) !important;
}

.drills-banner {
  border-color: rgba(251,191,36,0.15) !important;
}

.difficulty-badge.medium {
  background: rgba(251,191,36,0.15) !important;
  color: #fbbf24 !important;
}

/* Gradient button overrides */
.returning-banner-action button,
.btn-primary,
.ob-cta,
.calc-toggle,
.calc-btn.eq {
  background: linear-gradient(90deg, #7eb4ff, #a8d4ff) !important;
  color: #0b0f1a !important;
}

.pb-banner {
  background: linear-gradient(90deg, #7eb4ff, #a8d4ff) !important;
  color: #0b0f1a !important;
}

/* Focus mode overrides */
body.focus-mode .bottom-nav { border-top-color: #d4cdbf !important; background: #ece6da !important; }
body.focus-mode .bottom-nav-tab.active { color: #5c4a3a !important; }

/* Combo milestone colors (Arctic Frost tones) */
.combo-milestone-5 { color: #6ee7b7 !important; }
.combo-milestone-10 { color: #e2c57b !important; }
.combo-milestone-15 { color: #fb923c !important; }
.combo-milestone-25 { color: #f87171 !important; }

/* Leaderboard active tab */
.lb-mode-tab.active {
  background: linear-gradient(90deg, #7eb4ff, #a8d4ff) !important;
  color: #0b0f1a !important;
  border-color: #7eb4ff !important;
}

.lb-row.me {
  background: rgba(126,180,255,0.06) !important;
  border-left-color: #7eb4ff !important;
}

/* Exam nav frost colors */
.exam-nav-btn.current {
  border-color: #7eb4ff !important;
  background: rgba(126,180,255,0.12) !important;
}

.exam-nav-btn.answered::after { background: #6ee7b7 !important; }
.exam-nav-btn.flagged { border-color: #e2c57b !important; }
.exam-nav-btn.flagged::after { background: #e2c57b !important; }

/* Level badge & XP accent */
.level-badge {
  background: linear-gradient(90deg, #7eb4ff, #a8d4ff) !important;
  color: #0b0f1a !important;
}

/* Go-percentile badge */
.go-percentile {
  background: rgba(126,180,255,0.1) !important;
  border-color: #7eb4ff !important;
  color: #7eb4ff !important;
}

/* Onboarding dots frost */
.onboarding-dot { border-color: #7eb4ff !important; }
.onboarding-dot.active { background: #7eb4ff !important; }
.onboarding-dot.done { background: #6ee7b7 !important; border-color: #6ee7b7 !important; }

/* Active nav glow removal */
.bottom-nav-tab.active svg { filter: none !important; }

/* ============================================================================
   UX ENHANCEMENT #1: 3D FLASHCARD FLIP
   True perspective-based card flip with front/back faces
   ============================================================================ */
.flashcard-container {
  perspective: 1200px !important;
}

.flashcard {
  cursor: pointer;
  position: relative !important;
  min-height: 200px !important;
  transform-origin: center center;
}

.flashcard .card-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase;
  color: var(--accent-cyan) !important;
  margin-bottom: 12px;
}

.flashcard-hint {
  font-size: 13px !important;
  color: var(--text-tertiary) !important;
  text-align: center;
  margin-top: 12px;
  transition: opacity 0.3s ease;
}

/* ============================================================================
   UX ENHANCEMENT #2: SMOOTH SCREEN TRANSITIONS
   Crossfade + subtle slide on screen switches
   ============================================================================ */
.screen:not(.active) {
  opacity: 0 !important;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}

.screen.active {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.25s ease !important;
}

/* Bottom nav tab transitions */
.bottom-nav-tab {
  transition: color 0.2s ease, transform 0.15s ease !important;
}

.bottom-nav-tab:active {
  transform: scale(0.92) !important;
}

/* ============================================================================
   UX ENHANCEMENT #3: DASHBOARD LOADING SKELETON
   Shimmer placeholders while stats calculate
   ============================================================================ */
.skeleton-pulse {
  background: linear-gradient(
    90deg,
    rgba(140,180,255,0.04) 0%,
    rgba(140,180,255,0.08) 40%,
    rgba(140,180,255,0.04) 80%
  ) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.8s ease-in-out infinite !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-subtle) !important;
}

.skeleton-line {
  height: 16px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 65%; }
.skeleton-line.long { width: 90%; }

.skeleton-card {
  height: 120px;
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}

.skeleton-ring {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  margin: 20px auto;
}

/* ============================================================================
   UX ENHANCEMENT #4: FLASHCARD SWIPE GESTURES
   Visual feedback during swipe
   ============================================================================ */
.flashcard.swiping {
  transition: none !important;
}

.flashcard.swipe-right {
  animation: swipeRight 0.3s ease forwards !important;
}

.flashcard.swipe-left {
  animation: swipeLeft 0.3s ease forwards !important;
}

.flashcard.swipe-up {
  animation: swipeUp 0.3s ease forwards !important;
}

.flashcard.swipe-down {
  animation: swipeDown 0.3s ease forwards !important;
}

@keyframes swipeRight {
  to { transform: translateX(120px) rotate(8deg); opacity: 0; }
}

@keyframes swipeLeft {
  to { transform: translateX(-120px) rotate(-8deg); opacity: 0; }
}

@keyframes swipeUp {
  to { transform: translateY(-100px); opacity: 0; }
}

@keyframes swipeDown {
  to { transform: translateY(100px); opacity: 0; }
}

/* Swipe hint badges */
.swipe-hint {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 10;
}

.swipe-hint.left {
  left: 12px;
  background: rgba(248,113,113,0.15);
  border: 1px solid rgba(248,113,113,0.3);
  color: #f87171;
}

.swipe-hint.right {
  right: 12px;
  background: rgba(110,231,183,0.15);
  border: 1px solid rgba(110,231,183,0.3);
  color: #6ee7b7;
}

.flashcard.swiping .swipe-hint.active {
  opacity: 1;
}

/* ============================================================================
   UX ENHANCEMENT #7: EXAM PROGRESS BAR
   Thin bar at top of exam screen
   ============================================================================ */
.exam-progress-bar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(140,180,255,0.06);
  z-index: 50;
  border-radius: 0 0 2px 2px;
  overflow: hidden;
  margin-bottom: 16px;
}

.exam-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7eb4ff, #6ee7b7);
  border-radius: 0 2px 2px 0;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.exam-progress-label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

/* ============================================================================
   UX ENHANCEMENT #8: MICRO-INTERACTIONS ON ANSWERS
   Scale + glow on correct, enhanced shake on wrong
   ============================================================================ */
.answer-btn.correct {
  animation: correctPop 0.4s ease !important;
}

.answer-btn.wrong {
  animation: wrongShake 0.4s ease !important;
}

@keyframes correctPop {
  0% { transform: scale(1); }
  30% { transform: scale(1.03); box-shadow: 0 0 20px rgba(110,231,183,0.2); }
  60% { transform: scale(0.99); }
  100% { transform: scale(1); box-shadow: none; }
}

@keyframes wrongShake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

/* Correct answer icon indicator */
.answer-btn.correct::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%236ee7b7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  margin-left: 8px;
  vertical-align: middle;
  animation: fadeIn 0.3s ease 0.1s both;
}

.answer-btn.wrong::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 6L6 18'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
  margin-left: 8px;
  vertical-align: middle;
  animation: fadeIn 0.3s ease 0.1s both;
}

/* ============================================================================
   UX ENHANCEMENT #9: TOUCH TARGET FIXES
   Minimum 44px on all interactive elements
   ============================================================================ */
.mode-back-btn {
  min-height: 44px !important;
  min-width: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Modal close buttons */
button[onclick*="remove()"],
button[onclick*="close"],
.close-btn,
[class*="close"],
[class*="dismiss"] {
  min-height: 44px !important;
  min-width: 44px !important;
}

/* Small secondary actions */
.btn-secondary {
  min-height: 44px !important;
  padding: 10px 18px !important;
}

/* Exam nav buttons */
.exam-nav-btn {
  min-height: 36px !important;
  min-width: 36px !important;
}

/* Self-check toggle */
button[onclick*="toggleFlashcard"] {
  min-height: 40px !important;
  padding: 8px 16px !important;
}

/* Flag button in exam */
button[onclick*="toggleExamFlag"] {
  min-height: 40px !important;
}

/* Calculator buttons */
.calc-btn {
  min-height: 48px !important;
  min-width: 48px !important;
}

/* ============================================================================
   UX ENHANCEMENT #10: EMPTY STATE ILLUSTRATIONS
   Styled SVG-based empty states
   ============================================================================ */
.empty-state {
  text-align: center;
  padding: 40px 24px;
  animation: fadeUp 0.5s ease;
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(126,180,255,0.06);
  border: 1px solid rgba(126,180,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state-icon svg {
  width: 36px;
  height: 36px;
  stroke: var(--accent-cyan);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
}

.empty-state-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.empty-state-text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 280px;
  margin: 0 auto;
}

/* ============================================================================
   UX ENHANCEMENT #6: TONED DOWN MOMENTUM NAGS
   Softer styling for recommendation prompts
   ============================================================================ */
.momentum-prompt-soft {
  margin: 15px 0 !important;
  padding: 14px 18px !important;
  background: rgba(126,180,255,0.04) !important;
  border: 1px solid rgba(126,180,255,0.1) !important;
  border-radius: var(--radius-md) !important;
  animation: fadeUp 0.3s ease;
}

.momentum-prompt-soft .momentum-header {
  color: var(--accent-cyan) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.momentum-prompt-soft .momentum-text {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* Override the escalated CRITICAL styling with something gentler */
div[style*="CRITICAL"] {
  background: rgba(251,191,36,0.04) !important;
  border-color: rgba(251,191,36,0.15) !important;
}

/* ============================================================================
   UX ENHANCEMENT #5: MODAL OVERLAY POLISH
   Consistent overlay styling, smoother entrances
   ============================================================================ */
.trophy-modal,
.unlock-overlay,
.pass-celebration,
.daily-complete-overlay,
.streak-celebration {
  animation: fadeIn 0.3s ease !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.trophy-modal > div,
.unlock-overlay > div,
.pass-celebration > div {
  animation: correctPop 0.4s ease !important;
}