/* ═══════════════════════════════════════════════════════════════════════════
   Number Trainer v5 — Steve Edition
   Complete CSS — mobile-first, dark/light theme, all animations
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FOUC Prevention ──────────────────────────────────────────────────────── */
html:not([data-theme]) {
  color-scheme: light dark;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── CSS Custom Properties — Light Theme (default) ─────────────────────────── */
:root {
  --bg: #F5F5F7;
  --surface: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --text: #1D1D1F;
  --text-secondary: #86868B;
  --accent: #FF6B35;
  --accent-light: #FF8F5C;
  --correct: #34C759;
  --correct-glow: rgba(52, 199, 89, 0.3);
  --correct-wash: rgba(52, 199, 89, 0.15);
  --wrong: #FF3B30;
  --wrong-wash: rgba(255, 59, 48, 0.15);
  --border: #E5E5EA;
  --progress-track: #E5E5EA;
  --progress-fill: #FF6B35;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.12);

  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ── Dark Theme — Auto (prefers-color-scheme) ──────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1C1C1E;
    --surface: #2C2C2E;
    --surface-elevated: #3A3A3C;
    --text: #F5F5F7;
    --text-secondary: #AEAEB2;
    --accent: #FF8F5C;
    --accent-light: #FFB088;
    --correct: #30D158;
    --correct-glow: rgba(48, 209, 88, 0.3);
    --correct-wash: rgba(48, 209, 88, 0.15);
    --wrong: #FF453A;
    --wrong-wash: rgba(255, 69, 58, 0.15);
    --border: #38383A;
    --progress-track: #38383A;
    --progress-fill: #FF8F5C;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.4);
  }
}

/* ── Dark Theme — Forced ───────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg: #1C1C1E;
  --surface: #2C2C2E;
  --surface-elevated: #3A3A3C;
  --text: #F5F5F7;
  --text-secondary: #AEAEB2;
  --accent: #FF8F5C;
  --accent-light: #FFB088;
  --correct: #30D158;
  --correct-glow: rgba(48, 209, 88, 0.3);
  --correct-wash: rgba(48, 209, 88, 0.15);
  --wrong: #FF453A;
  --wrong-wash: rgba(255, 69, 58, 0.15);
  --border: #38383A;
  --progress-track: #38383A;
  --progress-fill: #FF8F5C;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ── Light Theme — Forced ──────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg: #F5F5F7;
  --surface: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --text: #1D1D1F;
  --text-secondary: #86868B;
  --accent: #FF6B35;
  --accent-light: #FF8F5C;
  --correct: #34C759;
  --correct-glow: rgba(52, 199, 89, 0.3);
  --correct-wash: rgba(52, 199, 89, 0.15);
  --wrong: #FF3B30;
  --wrong-wash: rgba(255, 59, 48, 0.15);
  --border: #E5E5EA;
  --progress-track: #E5E5EA;
  --progress-fill: #FF6B35;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.12);
}


/* ── Base ──────────────────────────────────────────────────────────────────── */
html {
  font-family: var(--font);
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  transition: filter 2s ease;
}

/* Number rendering */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}


/* ══════════════════════════════════════════════════════════════════════════════
   Typography Scale
   ══════════════════════════════════════════════════════════════════════════════ */

.type-hero         { font-size: 4.5rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.0; }
.type-focus-number { font-size: clamp(2rem, 8vw, 3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.type-screen-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.type-option       { font-size: clamp(1.125rem, 4vw, 1.5rem); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.type-card-title   { font-size: 1rem; font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.type-body         { font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; line-height: 1.5; }
.type-caption      { font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.01em; line-height: 1.4; }
.type-streak       { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.0; }
.type-settings     { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.0; }
.type-progress     { font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.01em; line-height: 1.0; }


/* ══════════════════════════════════════════════════════════════════════════════
   Screens
   ══════════════════════════════════════════════════════════════════════════════ */

.screen {
  display: none;
  width: 100%;
  max-width: 480px;
  flex: 1;
  flex-direction: column;
  padding: 0 16px;
  position: relative;
}

.screen.active {
  display: flex;
}

/* Screen transitions */
.screen-enter { animation: fadeIn 250ms ease-out forwards; }
.screen-exit  { animation: fadeOut 250ms ease-out forwards; }


/* ══════════════════════════════════════════════════════════════════════════════
   Screen 1: Language Selection
   ══════════════════════════════════════════════════════════════════════════════ */

.lang-select-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.lang-select-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}

.lang-select-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.lang-select-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 200px;
}

.lang-select-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 200px;
  height: 56px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1.5px solid var(--border);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font);
}

.lang-select-btn:active {
  transform: scale(0.97);
}

.lang-flag {
  font-size: 1.25rem;
}

.lang-name {
  font-size: 1.125rem;
}


/* ══════════════════════════════════════════════════════════════════════════════
   Screen 5: Onboarding
   ══════════════════════════════════════════════════════════════════════════════ */

.onboarding-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding: 24px;
}

.onboarding-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: calc(100% - 48px);
  max-width: 320px;
}

.onboarding-option {
  width: 100%;
  height: 56px;
}

.onboarding-message {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  text-align: center;
  opacity: 0;
  animation: fadeIn 300ms ease-out forwards;
}

.onboarding-message.hidden {
  display: none;
}


/* ══════════════════════════════════════════════════════════════════════════════
   Screen 2: Category Selection
   ══════════════════════════════════════════════════════════════════════════════ */

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 10px 0;
  margin-bottom: 16px;
}

.menu-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}

.btn-settings {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
  padding: 0;
  font-family: var(--font);
}

.btn-settings:active {
  background: var(--border);
}


/* ── Category Grid (adaptive) ──────────────────────────────────────────────── */

/* Default: 3-column grid (7+ categories) */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0;
}

/* 1 category: centered single card */
.category-grid[data-count="1"] {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

.category-grid[data-count="1"] .category-card {
  width: calc(100% - 48px);
  max-width: 320px;
  height: 120px;
}

.category-grid[data-count="1"] .category-icon {
  width: 48px;
  height: 48px;
}

/* 2-3 categories: single column, full width */
.category-grid[data-count="2"],
.category-grid[data-count="3"] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 4-6 categories: 2-column grid */
.category-grid[data-count="4"],
.category-grid[data-count="5"],
.category-grid[data-count="6"] {
  grid-template-columns: 1fr 1fr;
}


/* ── Category Card ─────────────────────────────────────────────────────────── */

.category-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 100px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font);
  border-width: 1.5px;
  border-style: solid;
}

.category-card:active {
  transform: scale(0.97);
}

.category-icon {
  width: 32px;
  height: 32px;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-icon svg {
  width: 100%;
  height: 100%;
}

.category-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
}

.category-subtitle {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.3;
}

/* Checkmark (completed category) */
.category-card .checkmark {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  color: var(--correct);
}

.category-card .checkmark svg {
  width: 100%;
  height: 100%;
}

/* Mastery checkmark */
.category-checkmark {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.75rem;
  color: var(--correct);
  font-weight: 700;
}

/* Locked state */
.category-card.locked {
  opacity: 0.4;
  pointer-events: auto;
}

.category-lock {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 0.75rem;
}

.lock-overlay {
  position: absolute;
  bottom: 8px;
  right: 8px;
}

.lock-icon {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
}


/* ── Unlock All Zone ───────────────────────────────────────────────────────── */

.unlock-all-zone {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 10;
}


/* ══════════════════════════════════════════════════════════════════════════════
   Settings Overlay
   ══════════════════════════════════════════════════════════════════════════════ */

.settings-overlay {
  position: absolute;
  top: 48px;
  right: 16px;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-overlay);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: settingsIn 200ms cubic-bezier(0.2, 0, 0, 1) forwards;
}

.settings-overlay.hidden {
  display: none;
}

.settings-overlay.closing {
  animation: settingsOut 150ms ease-in forwards;
}

.settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: transparent;
}

.settings-backdrop.hidden {
  display: none;
}

.settings-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}


/* ── Segmented Control ─────────────────────────────────────────────────────── */

.segmented-control {
  display: flex;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}

.segment {
  flex: 1;
  padding: 6px 0;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  border: none;
  background: transparent;
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
}

.segment.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}


/* ── Language Flag Buttons (settings) ──────────────────────────────────────── */

.settings-lang-flags {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.lang-flag-btn {
  width: 44px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  background: var(--bg);
  font-size: 1.25rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font);
  padding: 0;
}

.lang-flag-btn.active {
  border-color: var(--accent);
}

/* settings.js uses .settings-flags (alias for .settings-lang-flags) */
.settings-flags {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.settings-flag-btn {
  width: 44px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  background: var(--bg);
  font-size: 1.25rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font);
  padding: 0;
}

.settings-flag-btn.active {
  border-color: var(--accent);
}


/* ── Unlock All ────────────────────────────────────────────────────────────── */

.unlock-all {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-align: center;
  cursor: pointer;
  transition: color 0.15s ease;
  font-family: var(--font);
}

.unlock-all:hover,
.unlock-all:active {
  color: var(--accent);
}


/* ══════════════════════════════════════════════════════════════════════════════
   Screen 3: Training
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Progress Bar ──────────────────────────────────────────────────────────── */

.progress-bar {
  position: fixed;
  top: var(--safe-top);
  left: 0;
  right: 0;
  height: 3px;
  background: var(--progress-track);
  z-index: 100;
}

.progress-fill {
  height: 100%;
  background: var(--progress-fill);
  border-radius: 0 1.5px 1.5px 0;
  transition: width 300ms ease-out;
  width: 0%;
}


/* ── Training Header ───────────────────────────────────────────────────────── */

.training-header {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0;
  margin-top: 10px;
  gap: 12px;
}

.btn-back {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  padding: 0;
  font-family: var(--font);
}

.btn-back:active {
  background: var(--border);
}

.category-indicator {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.streak-counter {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity 300ms ease;
  flex-shrink: 0;
}

.streak-counter.visible {
  opacity: 1;
}


/* ── Training Area ─────────────────────────────────────────────────────────── */

.training-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding-bottom: 24px;
}


/* ── Breathing Circle ──────────────────────────────────────────────────────── */

.breathing-circle {
  width: clamp(100px, 32vw, 140px);
  height: clamp(100px, 32vw, 140px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, var(--accent-light) 100%);
  cursor: pointer;
  animation: breathe 4s ease-in-out infinite;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  margin-bottom: 40px;
  outline: none;
}

.breathing-circle:active {
  transform: scale(0.97);
}

/* Audio playing state */
.breathing-circle.playing {
  animation: audioPlay var(--audio-duration, 800ms) ease-out;
  box-shadow: 0 0 30px rgba(255, 107, 53, 0.4);
}

/* Streak brightness */
.breathing-circle.streak-glow {
  filter: brightness(1.08);
}

/* Bloom on streak milestone */
.breathing-circle.bloom {
  animation: bloom 400ms ease-out;
}


/* ── Focus Card ────────────────────────────────────────────────────────────── */

.focus-card {
  width: clamp(200px, 70vw, 320px);
  padding: 32px 24px;
  border-radius: 20px;
  background: linear-gradient(135deg,
    rgba(255, 107, 53, 0.06) 0%,
    rgba(255, 143, 92, 0.03) 100%);
  border: 1px solid var(--border);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-shrink: 0;
  animation: fadeIn 300ms ease-out;
}

.focus-card.hidden {
  display: none;
}

.focus-number {
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
  word-break: break-word;
}

.focus-prompt {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 400;
  margin: 0;
}


/* ── Options Grid (2×2) ────────────────────────────────────────────────────── */

.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 24px;
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}

.option-btn {
  padding: 16px 12px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1.5px solid var(--border);
  font-size: clamp(1.125rem, 4vw, 1.5rem);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: background 0.2s, transform 0.2s, opacity 0.2s, border-color 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font);
  line-height: 1.3;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Visible (stagger in) */
.option-btn.visible {
  animation: optionIn 200ms ease-out forwards;
}

/* Long text adjustment */
.option-btn.long-text {
  font-size: clamp(0.85rem, 3.5vw, 1.1rem);
}

/* Active press */
.option-btn:active:not(.correct):not(.wrong):not(.dimmed) {
  transform: scale(0.97);
}

/* Correct answer */
.option-btn.correct {
  background: var(--correct-wash);
  border-color: var(--correct);
  animation: correctLift 300ms ease-out forwards;
}

/* Wrong answer */
.option-btn.wrong {
  background: var(--wrong-wash);
  border-color: var(--wrong);
}

/* Reveal correct (after wrong) */
.option-btn.reveal-correct {
  background: var(--correct-wash);
  border-color: var(--correct);
  animation: correctPulse 600ms ease-in-out 2;
}

/* Dimmed (non-selected after answer) */
.option-btn.dimmed {
  opacity: 0.3;
  transition: opacity 200ms ease-out;
}

/* Disabled (during transition) */
.option-btn:disabled {
  pointer-events: none;
}


/* ── Score Display (legacy compat) ─────────────────────────────────────────── */

.score-display {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  padding: 8px 0;
}

.score-display.hidden {
  display: none;
}


/* ══════════════════════════════════════════════════════════════════════════════
   Screen 4: Summary
   ══════════════════════════════════════════════════════════════════════════════ */

.summary-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px;
}

.summary-percent {
  font-size: 4.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  text-align: center;
  margin-bottom: 8px;
}

.summary-percent.excellent { color: var(--correct); }
.summary-percent.good      { color: var(--accent); }
.summary-percent.learning  { color: var(--text); }

.summary-subtitle {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 4px;
  line-height: 1.5;
}

.summary-category {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.summary-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
}


/* ══════════════════════════════════════════════════════════════════════════════
   Buttons
   ══════════════════════════════════════════════════════════════════════════════ */

/* Common */
button {
  font-family: var(--font);
  cursor: pointer;
  border: none;
  -webkit-appearance: none;
  touch-action: manipulation;
}

/* Primary */
.btn-primary {
  width: calc(100% - 48px);
  max-width: 320px;
  height: 56px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font);
  width: 100%;
}

.btn-primary:active {
  transform: scale(0.97);
}

/* Ghost */
.btn-ghost {
  width: calc(100% - 48px);
  max-width: 320px;
  height: 56px;
  border-radius: var(--radius);
  background: transparent;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font);
  width: 100%;
}

.btn-ghost:active {
  transform: scale(0.97);
}

/* Secondary (legacy compat) */
.btn-secondary {
  width: 100%;
  max-width: 320px;
  height: 56px;
  border-radius: var(--radius);
  background: transparent;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: transform 0.15s ease;
  font-family: var(--font);
}

.btn-secondary:active {
  transform: scale(0.97);
}


/* ══════════════════════════════════════════════════════════════════════════════
   Error Screen
   ══════════════════════════════════════════════════════════════════════════════ */

.error-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px;
}

.emoji-hero {
  font-size: 3rem;
  margin-bottom: 16px;
}


/* ══════════════════════════════════════════════════════════════════════════════
   Toast
   ══════════════════════════════════════════════════════════════════════════════ */

.toast {
  position: fixed;
  bottom: calc(20px + var(--safe-bottom));
  left: 16px;
  right: 16px;
  max-width: 400px;
  margin: 0 auto;
  padding: 12px 16px;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
  z-index: 300;
  font-family: var(--font);
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ══════════════════════════════════════════════════════════════════════════════
   Utility
   ══════════════════════════════════════════════════════════════════════════════ */

.hidden {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   Keyframe Animations
   ══════════════════════════════════════════════════════════════════════════════ */

/* Breathing circle idle */
@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.03);
    opacity: 1;
  }
}

/* Audio playing pulse */
@keyframes audioPlay {
  0%  { transform: scale(1); }
  15% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Options stagger in */
@keyframes optionIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Correct answer lift */
@keyframes correctLift {
  0% {
    transform: scale(1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 20px var(--correct-glow);
  }
  100% {
    transform: scale(1.02);
    box-shadow: 0 2px 12px rgba(52, 199, 89, 0.2);
  }
}

/* Correct pulse (reveal after wrong) */
@keyframes correctPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

/* Streak bloom */
@keyframes bloom {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.15);
    filter: brightness(1.2);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* Settings appear */
@keyframes settingsIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Settings dismiss */
@keyframes settingsOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Screen fade in/out */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

/* Summary slide down (summary → category) */
@keyframes slideDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(30px);
    opacity: 0;
  }
}

/* Circle-to-summary morph (training → summary) */
.circle-to-summary {
  transition: transform 400ms cubic-bezier(0.2, 0, 0, 1),
              opacity 400ms ease;
}


/* ══════════════════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════════════════ */

/* Small phones (320–374px) */
@media (max-width: 374px) {
  .options-grid {
    gap: 8px;
    padding: 0 16px;
  }

  .option-btn {
    padding: 12px 8px;
    min-height: 52px;
  }

  .breathing-circle {
    width: 100px;
    height: 100px;
  }

  .focus-number {
    font-size: 2rem;
  }

  .summary-percent {
    font-size: 3.5rem;
  }

  .category-card {
    padding: 12px;
    min-height: 88px;
  }

  .lang-select-buttons {
    width: 180px;
  }

  .lang-select-btn {
    width: 180px;
    height: 50px;
    font-size: 1rem;
  }
}

/* Large phones / small tablets (429px+) */
@media (min-width: 429px) {
  .breathing-circle {
    width: 140px;
    height: 140px;
  }

  .options-grid {
    max-width: 480px;
  }

  .category-grid[data-count="7"] ~ *,
  .category-grid[data-count="8"] ~ *,
  .category-grid[data-count="9"] ~ *,
  .category-grid[data-count="10"] ~ *,
  .category-grid[data-count="11"] ~ *,
  .category-grid[data-count="12"] ~ * {
    /* keep 3 columns with larger cards */
  }
}

/* Tablets / desktop (769px+) */
@media (min-width: 769px) {
  .screen {
    max-width: 480px;
  }

  body {
    justify-content: center;
  }
}

/* Landscape */
@media (orientation: landscape) and (max-height: 500px) {
  .breathing-circle {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
  }

  .options-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0 16px;
  }

  .option-btn {
    min-height: 44px;
    padding: 10px 8px;
  }

  .training-area {
    gap: 8px;
    padding-bottom: 8px;
  }

  .settings-overlay {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }

  .focus-card {
    padding: 16px;
    margin-bottom: 16px;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   Reduced Motion
   ══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .breathing-circle {
    animation: none;
  }

  .option-btn {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .option-btn.visible {
    animation: none;
    opacity: 1;
    transform: none;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}