/* OlimpiApp — Design System v4 */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
@import url('tokens.css');

/* ── CSS Variables ─────────────────────────────────────────────────── */
:root {
  /* ── Surfaces (deep indigo, non puro black) */
  --bg-void:       #0A0B14;
  --bg-base:       #0F1120;
  --bg-raised:     #171A2E;
  --bg-sunken:     #08090F;
  --bg-glass:      rgba(23,26,46,0.55);
  --bg-glass-strong: rgba(23,26,46,0.78);
  /* Alias legacy */
  --bg-primary:    #0A0B14;
  --bg-surface:    #0F1120;
  --bg-elevated:   #171A2E;

  /* ── Accent */
  --accent-primary:       #7C5CFF;
  --accent-primary-2:     #A16BFF;
  --accent-hot:           #FF3D9A;
  --accent-primary-soft:  rgba(124,92,255,0.12);
  --accent-primary-glow:  rgba(124,92,255,0.45);
  /* Alias legacy */
  --accent-violet:        #7C5CFF;
  --accent-violet-hover:  #6B4CEF;
  --accent-violet-glow:   rgba(124,92,255,0.35);
  --accent-indigo:        #6366F1;

  /* ── Semantic tones */
  --tone-gold:     #FFC857;
  --tone-mint:     #3DDC97;
  --tone-coral:    #FF6B6B;
  --tone-ice:      #6EE7D9;
  --tone-lavender: #B794F6;
  --tone-rose:     #FF3D9A;
  /* Alias legacy */
  --accent-gold:   #FFC857;
  --accent-mint:   #3DDC97;
  --accent-coral:  #FF6B6B;
  --accent-cyan:   #6EE7D9;
  --accent-emerald:#3DDC97;
  --accent-amber:  #FFC857;
  --accent-red:    #FF6B6B;

  /* ── Gradients
     FONTE UNICA (Fase 1.2 redesign). Regola: --gradient-primary va SOLO sul
     CTA primario, max una volta per schermata; --gradient-gold solo per
     celebrazioni (level up / badge / podio). Mai gradient sul testo. */
  --gradient-primary:   linear-gradient(90deg, #7B5CFF 0%, #A855F7 100%);
  --gradient-hero:      linear-gradient(135deg, #7C5CFF 0%, #A16BFF 50%, #FF3D9A 100%);
  --gradient-hero-soft: linear-gradient(135deg, rgba(124,92,255,0.18) 0%, rgba(255,61,154,0.14) 100%);
  --gradient-gold:      linear-gradient(135deg, #FFC857 0%, #FF9E3D 100%);
  --gradient-mint:      linear-gradient(135deg, #3DDC97 0%, #6EE7D9 100%);

  /* ── Text */
  --text-primary:  #F2F3FA;
  --text-secondary:#B8BCD4;
  --text-tertiary: #7E84A3;
  --text-muted:    #6B7185;

  /* ── Borders */
  --border-subtle: rgba(255,255,255,0.07);
  --border-default:rgba(255,255,255,0.11);
  --border-strong: rgba(255,255,255,0.18);
  --border-focus:  #7C5CFF;

  /* ── Subjects */
  --math-color:    #B794F6;
  --cs-color:      #6EE7D9;
  --physics-color: #FF6B6B;

  /* ── Fonts */
  --font-display: 'Clash Display', 'Satoshi', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Shape */
  --radius-xl:  24px;
  --radius-lg:  16px;
  --radius-md:  12px;
  --radius-sm:   8px;
  --radius-pill: 999px;

  /* ── Shadows */
  --shadow-soft: 0 4px 24px -8px rgba(0,0,0,0.45);
  --shadow-hero: 0 20px 60px -20px rgba(124,92,255,0.45);
  --shadow-card: 0 4px 20px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-hover:0 8px 32px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.3);

  /* ── Motion */
  --ease-out-expo:  cubic-bezier(0.22,1,0.36,1);
  --ease-emphasized:cubic-bezier(0.2,0,0,1);
  --duration-fast:  140ms;
  --duration-base:  220ms;
  --duration-slow:  420ms;
}

/* ── Primary CTA gradient utility (Fase 1.2) ───────────────────────────
   Usa questa classe per IL bottone primario di una schermata. Una sola
   istanza visibile per vista. Il gradient oro resta riservato alle
   celebrazioni. */
.btn-grad-primary {
  background: var(--gradient-primary);
  color: #fff;
  border: none;
  font-weight: 700;
  transition: transform var(--motion-fast, 150ms) ease, box-shadow 200ms ease;
}
.btn-grad-primary:hover { box-shadow: 0 8px 28px rgba(123,92,255,0.35); }
.btn-grad-primary:active { transform: scale(0.98); }

/* ── Base ──────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; overflow-x: hidden; }
* { -webkit-tap-highlight-color: transparent; }

body {
  background-color: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.938rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11','ss01','ss03','tnum';
  overflow-x: hidden;
}

/* ── Typography ───────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6, .font-display {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  font-weight: 600;
}
.numeric, .stat-value, .mono {
  font-feature-settings: 'tnum','ss01';
  font-variant-numeric: tabular-nums;
}

/* ── Selection ────────────────────────────────────────────────────── */
::selection { background: rgba(124,92,255,0.35); color: #fff; }

/* ── Focus ring ───────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: inherit;
}

/* ── Scrollbar ────────────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(124,92,255,0.3) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(124,92,255,0.3);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(124,92,255,0.55); }

/* ── Skeleton shimmer ─────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-raised) 0%,
    rgba(124,92,255,0.08) 50%,
    var(--bg-raised) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-md);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Hero gradient animation ──────────────────────────────────────── */
@keyframes heroShift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* ── Custom Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(139,92,246,0.4);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-violet);
}

/* ── Card / Surface ───────────────────────────────────────────────── */
/* Solid card — default, no glass overhead */
.card {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--duration-base) var(--ease-out-expo),
              box-shadow  var(--duration-base) var(--ease-out-expo),
              transform   var(--duration-base) var(--ease-out-expo);
  cursor: default;
}

/* Glass card — max 2 per schermata, solo per hero elements */
.card-glass {
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
  transition: all var(--duration-base) var(--ease-out-expo);
}
.card-glass.glow {
  box-shadow: var(--shadow-hero);
}

a.card, a .card, .card-interactive {
  cursor: pointer;
}
a.card:hover, a.card:focus {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(124,92,255,0.22);
}

.gradient-border {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 2px;
  background: linear-gradient(135deg, #8B5CF6, #6366F1);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Status Pill ──────────────────────────────────────────────────── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(18,18,26,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── Subject Chip ─────────────────────────────────────────────────── */
.subject-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1);
}
.subject-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.subject-chip.math {
  background: rgba(139,92,246,0.12);
  color: var(--math-color);
  border: 1px solid rgba(139,92,246,0.28);
}
.subject-chip.cs {
  background: rgba(6,182,212,0.12);
  color: var(--cs-color);
  border: 1px solid rgba(6,182,212,0.28);
}
.subject-chip.physics {
  background: rgba(239,68,68,0.12);
  color: var(--physics-color);
  border: 1px solid rgba(239,68,68,0.28);
}

/* ── Subject Tags (centralized) ─────────────────────────────────── */
.tag-math {
  background: rgba(139,92,246,0.12);
  color: #C4B5FD;
  border: 1px solid rgba(139,92,246,0.3);
}
.tag-cs {
  background: rgba(6,182,212,0.12);
  color: #67E8F9;
  border: 1px solid rgba(6,182,212,0.28);
}
.tag-physics {
  background: rgba(239,68,68,0.12);
  color: #FCA5A5;
  border: 1px solid rgba(239,68,68,0.28);
}

/* ── Bottom Nav ───────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(11,13,18,0.96);
  border-top: 1px solid var(--border-subtle);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav .nav-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 4rem;
  max-width: 32rem;
  margin: 0 auto;
}
.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.5rem;
  height: 4rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  text-decoration: none;
}
.bottom-nav a:hover {
  color: var(--text-secondary);
  background: rgba(123,97,255,0.06);
}
.bottom-nav a .nav-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.6;
  line-height: 1;
  pointer-events: none;
  transition: color 0.2s ease;
}
.bottom-nav a.active {
  color: var(--accent-violet);
  text-shadow: 0 0 12px var(--accent-violet-glow);
}
.bottom-nav a.active .nav-label {
  opacity: 1;
  color: var(--accent-violet);
}
.bottom-nav a.active::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 3px;
  border-radius: 2.5px;
  background: var(--accent-violet);
  box-shadow: 0 0 6px var(--accent-violet-glow);
}
.bottom-nav a.active svg {
  filter: drop-shadow(0 0 6px var(--accent-violet-glow));
}
.bottom-nav svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
  fill: none;
  stroke: currentColor;
}

/* ── KaTeX Container ──────────────────────────────────────────────── */
.katex-container {
  background: var(--bg-elevated);
  border-left: 3px solid var(--accent-violet);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin: 0.75rem 0;
  overflow-x: auto;
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

/* ── Difficulty Dots ──────────────────────────────────────────────── */
.diff-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.diff-dot.level-1 { background-color: var(--accent-emerald); box-shadow: 0 0 6px rgba(16,185,129,0.4); }
.diff-dot.level-2 { background-color: var(--accent-amber);   box-shadow: 0 0 6px rgba(245,158,11,0.4); }
.diff-dot.level-3 { background-color: #F97316;               box-shadow: 0 0 6px rgba(249,115,22,0.4); }
.diff-dot.level-4 { background-color: var(--accent-red);     box-shadow: 0 0 6px rgba(239,68,68,0.4); }
.diff-dot.empty   { background-color: rgba(148,163,184,0.15); }

/* ── MCQ Option ───────────────────────────────────────────────────── */
.mcq-option {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(18,18,26,0.6);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.mcq-option:hover {
  border-color: rgba(139,92,246,0.35);
  background: rgba(139,92,246,0.06);
  transform: translateX(2px);
}
.mcq-option.selected {
  border-color: var(--accent-violet);
  background: rgba(139,92,246,0.1);
  box-shadow: 0 0 0 1px rgba(139,92,246,0.2);
}
/* 8.5 — feedback di pressione chiaro su opzioni A/B/C/D/E */
.mcq-option:active {
  transform: scale(0.98);
  background: rgba(139,92,246,0.12);
  transition: transform 90ms ease, background 90ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .mcq-option:active { transform: none; }
}

/* ── Animations ───────────────────────────────────────────────────── */
@keyframes toast-up {
  0%   { opacity: 0; transform: translateX(-50%) translateY(20px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  80%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}
.toast-animate { animation: toast-up 2.2s ease forwards; }

@keyframes badge-drop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.7); }
  20%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.08); }
  35%  { transform: translateX(-50%) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(0.9); }
}
.badge-animate { animation: badge-drop 3.2s ease forwards; }

@keyframes flash-msg {
  0%   { opacity: 0; transform: translateY(-10px); }
  10%  { opacity: 1; transform: translateY(0); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}
.flash-msg { animation: flash-msg 4s ease forwards; }

@keyframes particle-float {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); }
}

@keyframes xp-float {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(1.2); }
}
.xp-float { animation: xp-float 1.5s ease-out forwards; }

@keyframes fire-glow {
  0%, 100% { text-shadow: 0 0 8px rgba(245,158,11,0.6); }
  50%       { text-shadow: 0 0 20px rgba(245,158,11,0.9), 0 0 40px rgba(239,68,68,0.3); }
}
.fire-glow { animation: fire-glow 2s ease-in-out infinite; }

@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; color: var(--accent-red); }
}
.timer-pulse { animation: timer-pulse 1s ease-in-out infinite; }

@keyframes slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes shake {
  0%, 100%               { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90%{ transform: translateX(-4px); }
  20%, 40%, 60%, 80%     { transform: translateX(4px); }
}
.shake { animation: shake 0.5s ease; }

@keyframes level-celebrate {
  0%   { opacity: 0; transform: scale(0.5); }
  50%  { opacity: 1; transform: scale(1.1); }
  70%  { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
.animate-bounce-slow { animation: bounce-slow 2s ease-in-out infinite; }

/* ── Bottom Sheet ─────────────────────────────────────────────────── */
.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in 0.2s ease;
}
.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 51;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-bottom: none;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  padding: 1.5rem;
  animation: slide-up 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
}
.bottom-sheet .handle {
  width: 40px;
  height: 4px;
  background: rgba(148,163,184,0.2);
  border-radius: 2px;
  margin: 0 auto 1rem;
}

/* ── Podium Gradients ─────────────────────────────────────────────── */
.podium-gold {
  background: linear-gradient(135deg, #F59E0B, #D97706, #B45309);
}
.podium-silver {
  background: linear-gradient(135deg, #94A3B8, #64748B, #475569);
}
.podium-bronze {
  background: linear-gradient(135deg, #CD7F32, #A0522D);
  color: #FFF8F0;
}
@keyframes avatarPulse {
  0%, 100% { box-shadow: 0 0 24px rgba(245,158,11,0.45), 0 0 0 0 rgba(245,158,11,0.25); }
  50%       { box-shadow: 0 0 32px rgba(245,158,11,0.60), 0 0 0 6px rgba(245,158,11,0.08); }
}
.podium-first-avatar {
  animation: avatarPulse 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .podium-first-avatar { animation: none; } }

/* ── Heatmap Cells ────────────────────────────────────────────────── */
.heatmap-cell {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: rgba(139,92,246,0.05);
}
.heatmap-cell.intensity-1 { background: rgba(139,92,246,0.2); }
.heatmap-cell.intensity-2 { background: rgba(139,92,246,0.4); }
.heatmap-cell.intensity-3 { background: rgba(139,92,246,0.65); }
.heatmap-cell.intensity-4 { background: rgba(139,92,246,0.9);  box-shadow: 0 0 4px rgba(139,92,246,0.4); }

/* ── XP Ring SVG ──────────────────────────────────────────────────── */
.xp-ring-bg {
  fill: none;
  stroke: rgba(139,92,246,0.12);
  stroke-width: 6;
}
.xp-ring-fill {
  fill: none;
  stroke: var(--accent-violet);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(0.4,0,0.2,1);
  filter: drop-shadow(0 0 5px rgba(139,92,246,0.55));
}

/* ── Search Bar ───────────────────────────────────────────────────── */
.search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(18,18,26,0.8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.625rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.search-bar:focus-within {
  border-color: rgba(139,92,246,0.4);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.08);
}
.search-bar input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: var(--text-primary);
}
.search-bar input::placeholder {
  color: var(--text-muted);
}

/* ── Filter Chip ──────────────────────────────────────────────────── */
.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.filter-chip:hover {
  background: rgba(139,92,246,0.08);
  color: var(--text-secondary);
  border-color: rgba(139,92,246,0.2);
}
.filter-chip.active {
  background: linear-gradient(135deg, var(--accent-violet), var(--accent-indigo));
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(139,92,246,0.35);
}

/* ── CodeMirror Overrides ─────────────────────────────────────────── */
.CodeMirror {
  font-size: 13px !important;
  font-family: var(--font-mono) !important;
  border-radius: var(--radius-md);
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  line-height: 1.6;
}
.CodeMirror-scroll { padding: 4px; }
.CodeMirror-gutters {
  background: rgba(18,18,26,0.9) !important;
  border-right: 1px solid var(--border-subtle) !important;
}

/* ── iOS Safe Area ────────────────────────────────────────────────── */
@supports (padding: max(0px)) {
  .pb-safe { padding-bottom: max(5rem, env(safe-area-inset-bottom) + 4rem); }
  .bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── Prose styling for math questions ─────────────────────────────── */
.prose-question p { margin-bottom: 0.5rem; }
.prose-question .katex-display { margin: 0.75rem 0; overflow-x: auto; }
.katex-display { overflow-x: auto; overflow-y: hidden; }

/* ── Line clamp ───────────────────────────────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Smooth transitions globally ──────────────────────────────────── */
a, button { transition: all 0.2s cubic-bezier(0.4,0,0.2,1); }

/* ── Streak flame glow ────────────────────────────────────────────── */
.streak-glow {
  text-shadow: 0 0 10px rgba(245,158,11,0.9), 0 0 20px rgba(245,158,11,0.4);
}

/* ── Glassmorphism ────────────────────────────────────────────────── */
.glass {
  background: rgba(18,18,26,0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
}

/* ── Level Up Celebration ─────────────────────────────────────────── */
.level-up-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.level-up-card {
  text-align: center;
  padding: 2.5rem 2rem;
  animation: levelUpPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes levelUpPop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.level-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid var(--accent-violet);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  background: rgba(139,92,246,0.06);
  box-shadow: 0 0 40px rgba(139,92,246,0.5), 0 0 80px rgba(139,92,246,0.2), inset 0 0 30px rgba(139,92,246,0.08);
  animation: ringPulse 2s ease-in-out infinite;
  position: relative;
}
@keyframes ringPulse {
  0%, 100% { box-shadow: 0 0 40px rgba(139,92,246,0.5), 0 0 80px rgba(139,92,246,0.2); }
  50%       { box-shadow: 0 0 60px rgba(139,92,246,0.7), 0 0 100px rgba(99,102,241,0.3); }
}
.level-ring-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--accent-violet);
  font-family: var(--font-display);
  text-shadow: 0 0 24px rgba(139,92,246,0.7);
}
.level-up-title {
  text-shadow: 0 0 30px rgba(139,92,246,0.4);
}
.level-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #A78BFA;
  pointer-events: none;
  animation: sparkleFloat 1.2s ease-out forwards;
}
@keyframes sparkleFloat {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0); }
}

/* ── Ripple ────────────────────────────────────────────────────────── */
@keyframes ripple { to { transform: scale(2.5); opacity: 0; } }

/* ── Badge Premium Effects ───────────────────────────────────────── */
.badge-card {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.badge-card:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 8px 28px var(--badge-glow, rgba(139, 92, 246, 0.3));
  z-index: 5;
}

/* Shine sweep pseudo-element */
.badge-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.1) 45%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.1) 55%,
    transparent 60%
  );
  transform: rotate(25deg);
  transition: none;
  pointer-events: none;
  opacity: 0;
}
.badge-earned:hover::after {
  animation: badge-shine 0.7s ease forwards;
}

@keyframes badge-shine {
  0%   { left: -75%; opacity: 1; }
  100% { left: 150%;  opacity: 1; }
}

/* Earned badge pulse glow on outer ring */
.badge-earned {
  animation: badge-pulse-glow 3s ease-in-out infinite;
}

@keyframes badge-pulse-glow {
  0%, 100% {
    box-shadow: 0 0 8px var(--badge-glow, rgba(139, 92, 246, 0.15)),
                inset 0 0 6px rgba(255, 255, 255, 0.02);
  }
  50% {
    box-shadow: 0 0 20px var(--badge-glow, rgba(139, 92, 246, 0.4)),
                inset 0 0 8px rgba(255, 255, 255, 0.04);
  }
}

/* Rarity labels */
.rarity-label {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.rarity-common {
  background: rgba(16, 185, 129, 0.12);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.22);
}
.rarity-rare {
  background: rgba(59, 130, 246, 0.12);
  color: #60A5FA;
  border: 1px solid rgba(59, 130, 246, 0.22);
}
.rarity-epic {
  background: rgba(168, 85, 247, 0.12);
  color: #C084FC;
  border: 1px solid rgba(168, 85, 247, 0.22);
}
.rarity-legendary {
  background: rgba(245, 158, 11, 0.12);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.28);
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

/* ── Max Level XP Celebration ────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.xp-max-shimmer {
  background: linear-gradient(90deg, #F59E0B, #FBBF24, #F59E0B, #FBBF24);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(245,158,11,0.3); }
  50%       { box-shadow: 0 0 18px rgba(245,158,11,0.65), 0 0 36px rgba(139,92,246,0.2); }
}
.xp-max-glow {
  animation: glow-pulse 2s ease-in-out infinite;
}
@keyframes max-bar-shift {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}
.xp-max-bar {
  background-size: 200% 100%;
  animation: max-bar-shift 3s linear infinite;
}

/* ── Progress Bar Fill Animation ─────────────────────────────────── */
@keyframes fill-bar {
  from { width: 0%; }
}
.progress-bar-fill {
  animation: fill-bar 700ms cubic-bezier(0.4,0,0.2,1) forwards;
}
.progress-complete {
  box-shadow: 0 0 10px rgba(16,185,129,0.5);
}

/* ── Badge Tooltip ───────────────────────────────────────────────── */
.badge-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border: 1px solid rgba(139,92,246,0.22);
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 20;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.badge-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(139,92,246,0.22);
}
.badge-card:hover .badge-tooltip {
  opacity: 1;
}

/* ── Exercise Card Padding ───────────────────────────────────────── */
.card-exercise {
  padding: 16px 20px;
}

/* ── Logo Gradient ───────────────────────────────────────────────── */
.logo-gradient {
  background: linear-gradient(135deg, #8B5CF6, #6366F1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Tabular Numbers ─────────────────────────────────────────────── */
.stat-number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-family: var(--font-mono);
}

/* ── Exercise Card Typography ────────────────────────────────────── */
.exercise-topic {
  font-size: 12px;
  color: var(--text-muted);
}
.tag-subject {
  font-size: 11px;
  padding: 2px 8px;
}

/* ── Page Transition ─────────────────────────────────────────────── */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
main > *:first-child {
  animation: page-enter 240ms cubic-bezier(0.4,0,0.2,1);
}
@media (prefers-reduced-motion: reduce) {
  main > *:first-child { animation: none; }
}

/* ── Skeleton Loading ────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s infinite;
  border-radius: var(--radius-sm);
}
.skeleton-text   { height: 14px; margin-bottom: 8px; }
.skeleton-title  { height: 20px; width: 60%; margin-bottom: 12px; }
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }
.skeleton-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
}

/* ── Global Tooltip ──────────────────────────────────────────────── */
[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  padding: 6px 10px;
  background: var(--bg-elevated);
  border: 1px solid rgba(139,92,246,0.25);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 50;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
[data-tooltip]::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(139,92,246,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
  z-index: 50;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
[data-tooltip]:hover::after {
  transform: translateX(-50%);
}

/* ── Spin (pull-to-refresh) ──────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────────── */
/* ── New Additions ─────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────── */

/* Staggered fade-in */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stagger-in > * {
  opacity: 0;
  animation: fadeInUp 0.4s ease-out forwards;
}
.stagger-in > *:nth-child(1)  { animation-delay: 0s; }
.stagger-in > *:nth-child(2)  { animation-delay: 0.05s; }
.stagger-in > *:nth-child(3)  { animation-delay: 0.1s; }
.stagger-in > *:nth-child(4)  { animation-delay: 0.15s; }
.stagger-in > *:nth-child(5)  { animation-delay: 0.2s; }
.stagger-in > *:nth-child(6)  { animation-delay: 0.25s; }
.stagger-in > *:nth-child(7)  { animation-delay: 0.3s; }
.stagger-in > *:nth-child(8)  { animation-delay: 0.35s; }
.stagger-in > *:nth-child(9)  { animation-delay: 0.4s; }
.stagger-in > *:nth-child(10) { animation-delay: 0.45s; }

/* Progress bar animate */
@keyframes progressFill {
  from { width: 0%; }
}
.progress-animate {
  animation: progressFill 0.8s ease-out forwards;
}

/* Mono numbers */
.mono { font-family: var(--font-mono); }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #8B5CF6, #6366F1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow effects */
.glow-violet  { box-shadow: 0 0 20px var(--accent-violet-glow); }
.glow-amber   { box-shadow: 0 0 20px rgba(255,184,0,0.3); }
.glow-emerald { box-shadow: 0 0 20px rgba(61,220,151,0.3); }

/* ── Mascotte Oli ─────────────────────────────────────────────────── */
.oli-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.oli-img {
  display: block;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  filter: drop-shadow(0 4px 12px rgba(123,97,255,0.25));
}
.oli-size-sm  .oli-img { width: 48px;  height: 48px; }
.oli-size-md  .oli-img { width: 80px;  height: 80px; }
.oli-size-lg  .oli-img { width: 120px; height: 120px; }
.oli-size-xl  .oli-img { width: 160px; height: 160px; }

/* Idle — oscillazione lenta */
@keyframes oli-idle {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-6px) rotate(1deg); }
}
.oli-idle .oli-img { animation: oli-idle 3s ease-in-out infinite; }

/* Happy — salto */
@keyframes oli-happy {
  0%,100% { transform: scale(1) rotate(0); }
  20%     { transform: scale(1.15) rotate(-4deg); }
  40%     { transform: scale(0.95) rotate(2deg) translateY(-8px); }
  60%     { transform: scale(1.08) rotate(-2deg) translateY(-4px); }
  80%     { transform: scale(1) rotate(1deg); }
}
.oli-happy .oli-img { animation: oli-happy 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* Sad — tremolio */
@keyframes oli-sad {
  0%,100% { transform: rotate(0) translateY(0); }
  20%     { transform: rotate(-3deg) translateY(2px); }
  40%     { transform: rotate(3deg) translateY(1px); }
  60%     { transform: rotate(-2deg) translateY(2px); }
}
.oli-sad .oli-img { animation: oli-sad 0.8s ease-out forwards; }

/* Excited — coriandoli + spin */
@keyframes oli-excited {
  0%         { transform: scale(0.7) rotate(-10deg); opacity:0; }
  50%        { transform: scale(1.2) rotate(5deg);  opacity:1; }
  75%        { transform: scale(0.95) rotate(-2deg); }
  100%       { transform: scale(1) rotate(0); opacity:1; }
}
.oli-excited .oli-img { animation: oli-excited 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* Thinking — pulsazione lenta */
@keyframes oli-thinking {
  0%,100% { transform: scale(1); opacity:1; }
  50%     { transform: scale(0.96); opacity:0.85; }
}
.oli-thinking .oli-img { animation: oli-thinking 1.4s ease-in-out infinite; }

/* Sleepy — ciondola */
@keyframes oli-sleepy {
  0%,100% { transform: rotate(0) translateY(0); }
  30%     { transform: rotate(-8deg) translateY(4px); }
  70%     { transform: rotate(8deg) translateY(4px); }
}
.oli-sleepy .oli-img { animation: oli-sleepy 2.5s ease-in-out infinite; }

/* Speech bubble */
.oli-bubble {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.875rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  max-width: 220px;
  text-align: center;
  line-height: 1.4;
  animation: fadeInUp 0.3s ease-out;
}
.oli-bubble::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--border-subtle);
  border-top: none;
}
.oli-bubble::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--bg-elevated);
  border-top: none;
}

/* ── Tap feedback su bottoni ──────────────────────────────────────── */
.btn-tap:active { transform: scale(0.97); }

/* ── Focus ring accessibilità ────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── CTA primario — gradient animato heroShift ───────────────────── */
.btn-primary-cta {
  display: block;
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--gradient-hero);
  background-size: 200% 200%;
  animation: heroShift 8s ease-in-out infinite;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hero);
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) var(--ease-out-expo);
  text-decoration: none;
  letter-spacing: -0.015em;
  position: relative;
  overflow: hidden;
}
.btn-primary-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 50% 0%, rgba(255,255,255,0.22), transparent 60%);
  opacity: 0;
  transition: opacity var(--duration-base);
}
.btn-primary-cta:hover { transform: translateY(-2px); box-shadow: 0 24px 60px -12px rgba(124,92,255,0.6); }
.btn-primary-cta:hover::after { opacity: 1; }
.btn-primary-cta:active { transform: scale(0.97); }

/* ── Icon tone system (Lucide icons con contesto cromatico) ──────── */
.icon-wrap {
  display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.icon-tone-primary  { background: rgba(124,92,255,0.12); color: #A16BFF; }
.icon-tone-gold     { background: rgba(255,200,87,0.12);  color: #FFC857; }
.icon-tone-mint     { background: rgba(61,220,151,0.12);  color: #3DDC97; }
.icon-tone-coral    { background: rgba(255,107,107,0.12); color: #FF6B6B; }
.icon-tone-ice      { background: rgba(110,231,217,0.12); color: #6EE7D9; }
.icon-tone-lavender { background: rgba(183,148,246,0.12); color: #B794F6; }
.icon-tone-rose     { background: rgba(255,61,154,0.12);  color: #FF3D9A; }
.icon-tone-muted    { background: rgba(255,255,255,0.05); color: #B8BCD4; }

/* ── Daily goal ring ─────────────────────────────────────────────── */
.goal-ring-track { fill:none; stroke: var(--border-subtle); stroke-width:5; }
.goal-ring-fill  {
  fill:none; stroke: var(--accent-gold); stroke-width:5;
  stroke-linecap:round;
  transition: stroke-dashoffset 1s cubic-bezier(0.4,0,0.2,1);
  filter: drop-shadow(0 0 4px rgba(255,184,0,0.5));
}

/* ════════════════════════════════════════════════════════════════════
   V4 — Signature Visual Language
   ════════════════════════════════════════════════════════════════════ */

/* ── Grain / noise texture overlay ──────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>");
}

/* ── Aurora ambient behind CTAs ──────────────────────────────────── */
@keyframes auroraBreathe {
  0%,100% { opacity:0.4; transform:translate(-10%,-10%) scale(1); }
  50%     { opacity:0.7; transform:translate(10%,5%) scale(1.15); }
}
.aurora-behind {
  position: absolute;
  inset: -40%;
  filter: blur(80px);
  background:
    radial-gradient(circle at 30% 30%, rgba(124,92,255,0.55), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255,61,154,0.45), transparent 60%);
  animation: auroraBreathe 8s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
  .aurora-behind { animation: none; }
}

/* ── Floating crown for 1st place ───────────────────────────────── */
@keyframes crownFloat {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%     { transform: translateY(-6px) rotate(2deg); }
}
.crown-float {
  animation: crownFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255,200,87,0.6));
}
@media (prefers-reduced-motion: reduce) { .crown-float { animation: none; } }

/* ── Editorial gradient title ────────────────────────────────────── */
@keyframes shine {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.gradient-title {
  background: linear-gradient(120deg, #F2F3FA 0%, #B794F6 45%, #F2F3FA 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .gradient-title { animation: none; } }

/* ── Variable-font weight breathing ─────────────────────────────── */
@keyframes weightBreathe {
  0%,100% { opacity: 0.82; }
  50%     { opacity: 1; }
}
.hero-breathe { animation: weightBreathe 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hero-breathe { animation: none; } }

/* ── Outlined-then-fill for level numbers ────────────────────────── */
@keyframes fillIn {
  to { color: var(--accent-primary); -webkit-text-stroke-width: 0; }
}
.outline-then-fill {
  -webkit-text-stroke: 2px var(--accent-primary);
  color: transparent;
  animation: fillIn 0.8s 0.4s forwards;
}

/* ── Cursor trail (desktop only) ─────────────────────────────────── */
#cursor-trail {
  pointer-events: none;
  position: fixed;
  top: 0; left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent-primary);
  opacity: 0;
  filter: blur(3px);
  transform: translate(-50%,-50%);
  transition: transform 200ms var(--ease-out-expo);
  z-index: 9999;
}

/* ── XP fly animation ────────────────────────────────────────────── */
@keyframes xpFly {
  0%   { opacity:1; transform: translate(0,0) scale(1.2); }
  80%  { opacity:0.8; }
  100% { opacity:0; transform: translate(80px,-160px) scale(0.5); }
}
.xp-fly {
  position: fixed;
  pointer-events: none;
  z-index: 500;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--tone-gold);
  text-shadow: 0 0 12px rgba(255,200,87,0.6);
  animation: xpFly 0.9s var(--ease-out-expo) forwards;
}

/* ── Skeleton — branded shimmer (V4 override) ────────────────────── */
.skeleton {
  background: linear-gradient(
    110deg,
    var(--bg-raised) 0%,
    rgba(124,92,255,0.12) 40%,
    rgba(255,61,154,0.08) 60%,
    var(--bg-raised) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.8s cubic-bezier(0.4,0,0.2,1) infinite !important;
}

/* ── Scrollbar gradient (V4 override) ────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-hot) 100%);
  box-shadow: 0 0 8px rgba(124,92,255,0.35);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #A16BFF 0%, #FF3D9A 100%);
}

/* ── Selection gradient (V4 override) ───────────────────────────── */
::selection {
  background: linear-gradient(120deg, rgba(124,92,255,0.45), rgba(255,61,154,0.35));
  color: #fff;
  text-shadow: 0 0 8px rgba(124,92,255,0.5);
}

/* ── Focus halo (V4 override) ────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(124,92,255,0.15);
  border-radius: inherit;
  transition: box-shadow 180ms ease;
}

/* ── Command Palette ─────────────────────────────────────────────── */
#cmd-palette-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(10,11,20,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
  animation: fadeIn 120ms ease;
}
#cmd-palette-overlay.hidden { display: none; }
#cmd-palette {
  width: 100%; max-width: 480px; margin: 0 1rem;
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(124,92,255,0.15);
  animation: cmdPop 200ms var(--ease-out-expo);
}
@keyframes cmdPop {
  from { opacity:0; transform: scale(0.96) translateY(-8px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}
#cmd-input {
  width: 100%; background: transparent; border: none; outline: none;
  font-size: 1.05rem; font-family: var(--font-body);
  color: var(--text-primary); padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border-subtle);
}
#cmd-input::placeholder { color: var(--text-muted); }
#cmd-results { max-height: 320px; overflow-y: auto; padding: 0.5rem 0; }
.cmd-item {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 0.7rem 1.2rem; cursor: pointer;
  font-size: 0.875rem; color: var(--text-secondary);
  transition: background 100ms ease, color 100ms ease;
  text-decoration: none;
}
.cmd-item:hover, .cmd-item.active {
  background: rgba(124,92,255,0.1);
  color: var(--text-primary);
}
.cmd-item-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(124,92,255,0.1);
  color: #A16BFF;
}
.cmd-category {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted);
  padding: 0.5rem 1.2rem 0.2rem; pointer-events: none;
}
#cmd-empty {
  text-align: center; padding: 2rem 1rem;
  font-size: 0.875rem; color: var(--text-muted);
}
#cmd-hint {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 0.5rem 1rem; border-top: 1px solid var(--border-subtle);
  gap: 0.5rem;
}
.cmd-kbd {
  font-size: 0.65rem; font-family: var(--font-mono);
  padding: 1px 5px; border-radius: 4px;
  background: rgba(255,255,255,0.07); color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

/* ── 3D podium ───────────────────────────────────────────────────── */
.podium-wrap { perspective: 900px; position: relative; overflow: hidden; }
.podium-3d {
  transform-style: preserve-3d;
  transition: transform 600ms var(--ease-out-expo);
}
@keyframes podiumRise {
  from { transform: rotateX(30deg) translateY(30px); opacity:0; }
  to   { transform: rotateX(8deg) translateY(0); opacity:1; }
}
.podium-3d { animation: podiumRise 700ms 200ms var(--ease-out-expo) both; }
@media (prefers-reduced-motion: reduce) {
  .podium-3d { animation: none; }
}

/* ── Global transition layer (sartoria) ─────────────────────────── */
*, *::before, *::after {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 200ms;
  transition-timing-function: ease;
}
/* Exclude motion-heavy elements */
.btn-primary-cta, .aurora-behind, .crown-float,
.hero-breathe, .gradient-title, .oli-img,
[class*="animate-"] { transition-property: none; }

/* ═══════════════════════════════════════════════════════════════════
   PARTE 9 — Theme overrides (Deep · Aurora · Focus)
   Applied as <html class="theme-aurora"> etc.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Aurora (emerald / cyan) ─────────────────────────────────────── */
.theme-aurora {
  --bg-void:               #040E0A;
  --bg-base:               #07120D;
  --bg-raised:             #0F1F18;
  --bg-sunken:             #030A06;
  --bg-glass:              rgba(15,31,24,0.55);
  --bg-glass-strong:       rgba(15,31,24,0.80);
  --bg-primary:            #040E0A;
  --bg-surface:            #07120D;
  --bg-elevated:           #0F1F18;

  --accent-primary:        #00C896;
  --accent-primary-2:      #3DDC97;
  --accent-hot:            #00D4FF;
  --accent-primary-soft:   rgba(0,200,150,0.12);
  --accent-primary-glow:   rgba(0,200,150,0.45);
  --accent-violet:         #00C896;
  --accent-violet-hover:   #00B384;
  --accent-violet-glow:    rgba(0,200,150,0.35);
  --accent-indigo:         #3DDC97;

  --gradient-hero:         linear-gradient(135deg, #00C896 0%, #3DDC97 50%, #00D4FF 100%);
  --gradient-hero-soft:    linear-gradient(135deg, rgba(0,200,150,0.18) 0%, rgba(0,212,255,0.14) 100%);

  --border-subtle:         rgba(0,200,150,0.08);
  --border-default:        rgba(0,200,150,0.14);
  --border-strong:         rgba(0,200,150,0.24);
  --border-focus:          #00C896;

  --shadow-hero:           0 20px 60px -20px rgba(0,200,150,0.45);
}
.theme-aurora .aurora-behind {
  background:
    radial-gradient(circle at 30% 30%, rgba(0,200,150,0.55), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(0,212,255,0.45), transparent 60%);
}
/* btn-primary-cta inherits var(--gradient-hero) — no override needed */
.theme-aurora .gradient-title {
  background: linear-gradient(120deg, #F2F3FA 0%, #3DDC97 45%, #00D4FF 80%, #F2F3FA 100%) !important;
  background-size: 200% 100% !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── Focus (amber / near-monochrome) ─────────────────────────────── */
.theme-focus {
  --bg-void:               #080808;
  --bg-base:               #0C0C0C;
  --bg-raised:             #141414;
  --bg-sunken:             #060606;
  --bg-glass:              rgba(20,20,20,0.6);
  --bg-glass-strong:       rgba(20,20,20,0.85);
  --bg-primary:            #080808;
  --bg-surface:            #0C0C0C;
  --bg-elevated:           #141414;

  --accent-primary:        #FFC857;
  --accent-primary-2:      #FFD166;
  --accent-hot:            #FF9E3D;
  --accent-primary-soft:   rgba(255,200,87,0.10);
  --accent-primary-glow:   rgba(255,200,87,0.35);
  --accent-violet:         #FFC857;
  --accent-violet-hover:   #FFB832;
  --accent-violet-glow:    rgba(255,200,87,0.25);
  --accent-indigo:         #FFC857;

  --gradient-hero:         linear-gradient(135deg, #FFC857 0%, #FF9E3D 100%);
  --gradient-hero-soft:    linear-gradient(135deg, rgba(255,200,87,0.15) 0%, rgba(255,158,61,0.12) 100%);

  --border-subtle:         rgba(255,255,255,0.06);
  --border-default:        rgba(255,255,255,0.09);
  --border-strong:         rgba(255,255,255,0.14);
  --border-focus:          #FFC857;

  --shadow-hero:           0 20px 60px -20px rgba(255,200,87,0.35);
}
.theme-focus .aurora-behind {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,200,87,0.35), transparent 65%),
    radial-gradient(circle at 70% 70%, rgba(255,158,61,0.25), transparent 65%);
  filter: blur(100px);
}
/* btn-primary-cta inherits var(--gradient-hero) — no override needed */
.theme-focus .gradient-title {
  background: linear-gradient(120deg, #F2F3FA 0%, #FFC857 45%, #FF9E3D 80%, #F2F3FA 100%) !important;
  background-size: 200% 100% !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── Body background (overrides Tailwind bg-bgdark hardcoded value) ── */
body { background-color: var(--bg-void); }

/* ── Per-theme nav bar background ─────────────────────────────────── */
.theme-aurora .bottom-nav { background: rgba(4,14,10,0.96); }
.theme-focus  .bottom-nav { background: rgba(8,8,8,0.97); }

/* ── Tailwind brand color → CSS var bridge ───────────────────────── */
/* Tailwind `text-brand`, `bg-brand`, `border-brand` use hardcoded #7C5CFF.
   Override them per theme so key UI elements adapt. */
.theme-aurora .text-brand, .theme-aurora [class*="text-brand"] { color: #00C896; }
.theme-aurora .bg-brand   { background-color: #00C896; }
.theme-aurora .border-brand { border-color: #00C896; }
.theme-aurora .nav-items a.active { color: #00C896; }
.theme-aurora .nav-items a svg { stroke: currentColor; }
.theme-focus  .text-brand, .theme-focus  [class*="text-brand"] { color: #FFC857; }
.theme-focus  .bg-brand   { background-color: #FFC857; }
.theme-focus  .border-brand { border-color: #FFC857; }
.theme-focus  .nav-items a.active { color: #FFC857; }

/* ── Theme transition (smooth switch) ──────────────────────────────── */
html { transition: background-color 350ms ease; }
html.theme-switching * { transition: background-color 350ms ease, border-color 350ms ease, color 350ms ease !important; }

/* ── Nav tap feedback ─────────────────────────────────────────────── */
@keyframes navTap {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.82); }
  100% { transform: scale(1); }
}
.nav-tap { animation: navTap 200ms var(--ease-out-expo) forwards; }
@media (prefers-reduced-motion: reduce) { .nav-tap { animation: none; } }

/* ── XP header pulse ──────────────────────────────────────────────── */
@keyframes xpPulse {
  0%   { transform: scale(1);    filter: brightness(1); }
  50%  { transform: scale(1.22); filter: brightness(1.4); }
  100% { transform: scale(1);    filter: brightness(1); }
}
.xp-pulse { animation: xpPulse 300ms var(--ease-out-expo); }
@media (prefers-reduced-motion: reduce) { .xp-pulse { animation: none; } }

/* ── Streak fire glow (streak > 7) ───────────────────────────────── */
@keyframes fireAlive {
  0%, 100% { filter: drop-shadow(0 0 4px #FF6B35); transform: scale(1)   rotate(-3deg); }
  50%       { filter: drop-shadow(0 0 10px #FF9E3D); transform: scale(1.15) rotate(3deg); }
}
.streak-alive { animation: fireAlive 1.6s ease-in-out infinite; display: inline-block; }
@media (prefers-reduced-motion: reduce) { .streak-alive { animation: none; } }

/* ── Oli mascot state animations ────────────────────────────────── */
.oli-mascot-img {
  display: block;
  transform-origin: bottom center;
  will-change: transform;
}
.oli-glow {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  pointer-events: none;
  transition: background 400ms ease;
  background: radial-gradient(circle, rgba(124,92,255,0.35) 0%, transparent 68%);
}
/* idle — slow breathe */
@keyframes oliBreath {
  0%, 100% { transform: scale(1)    translateY(0); }
  50%       { transform: scale(1.04) translateY(-3px); }
}
.oli-anim-idle { animation: oliBreath 3.8s ease-in-out infinite; }

/* wink — bounce up */
@keyframes oliWink {
  0%   { transform: scale(1)    translateY(0)    rotate(0deg); }
  20%  { transform: scale(1.12) translateY(-12px) rotate(4deg); }
  40%  { transform: scale(1.04) translateY(-6px)  rotate(-2deg); }
  65%  { transform: scale(1.08) translateY(-9px)  rotate(3deg); }
  85%  { transform: scale(1.02) translateY(-3px)  rotate(-1deg); }
  100% { transform: scale(1)    translateY(0)    rotate(0deg); }
}
.oli-anim-wink { animation: oliWink 0.85s cubic-bezier(0.34,1.56,0.64,1) both; }

/* sad — slump + sway */
@keyframes oliSad {
  0%   { transform: scale(1) translateY(0)  rotate(0deg); }
  15%  { transform: scale(0.94) translateY(4px) rotate(-4deg); }
  40%  { transform: scale(0.96) translateY(3px) rotate(3deg); }
  65%  { transform: scale(0.94) translateY(4px) rotate(-3deg); }
  85%  { transform: scale(0.97) translateY(2px) rotate(1deg); }
  100% { transform: scale(1) translateY(0)  rotate(0deg); }
}
.oli-anim-sad { animation: oliSad 1.15s cubic-bezier(0.25,0.1,0.25,1) both; }

/* celebrate — jump + spin */
@keyframes oliCelebrate {
  0%   { transform: scale(1)    translateY(0)     rotate(0deg); }
  18%  { transform: scale(1.18) translateY(-20px) rotate(-8deg); }
  36%  { transform: scale(1.12) translateY(-14px) rotate(8deg); }
  54%  { transform: scale(1.15) translateY(-18px) rotate(-5deg); }
  72%  { transform: scale(1.08) translateY(-10px) rotate(5deg); }
  88%  { transform: scale(1.02) translateY(-3px)  rotate(-2deg); }
  100% { transform: scale(1)    translateY(0)     rotate(0deg); }
}
.oli-anim-celebrate { animation: oliCelebrate 2s cubic-bezier(0.34,1.56,0.64,1) both; }

@media (prefers-reduced-motion: reduce) {
  .oli-anim-idle, .oli-anim-wink, .oli-anim-sad, .oli-anim-celebrate {
    animation: none;
  }
}

/* ── Level-up overlay animations (V4.1) ─────────────────────────── */
@keyframes levelupGlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(1.05); }
}
@keyframes levelupBounce {
  0%   { transform: scale(0.45) translateY(50px); opacity: 0; }
  65%  { transform: scale(1.06) translateY(-6px);  opacity: 1; }
  80%  { transform: scale(0.97) translateY(2px); }
  100% { transform: scale(1)    translateY(0);    opacity: 1; }
}

/* ── Grain overlay (global, non-interactive) ──────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── Fase 5 juice (juice.js) ─────────────────────────────────────── */
.juice-correct {
  background: rgba(74,222,128,0.16) !important;
  border-color: rgba(74,222,128,0.6) !important;
  box-shadow: 0 0 0 2px rgba(74,222,128,0.45), 0 0 22px rgba(74,222,128,0.35);
  transform: scale(1.02);
  transition: transform 150ms cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 150ms ease, background 150ms ease;
}

#archi-celebrate {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; justify-content: center; pointer-events: none;
  padding-bottom: 96px;
}
#archi-celebrate.hidden { display: none; }
#archi-celebrate img { width: 120px; height: 120px; }
@keyframes archiIn {
  from { opacity: 0; transform: translateY(60px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes archiOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(40px) scale(0.85); }
}
#archi-celebrate.archi-in  { animation: archiIn 360ms cubic-bezier(0.34,1.56,0.64,1) both; }
#archi-celebrate.archi-out { animation: archiOut 340ms ease both; }

@keyframes streakPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.32) rotate(-6deg); }
  70%  { transform: scale(0.94) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}
.streak-pop { animation: streakPop 420ms cubic-bezier(0.34,1.56,0.64,1); }

.streak-particle {
  position: fixed; width: 6px; height: 6px; border-radius: 50%;
  background: #FF8A3D; pointer-events: none; z-index: 80;
  animation: streakParticle 520ms ease-out forwards;
}
@keyframes streakParticle {
  from { opacity: 1; transform: translate(0,0) scale(1); }
  to   { opacity: 0; transform: translate(var(--dx,0), var(--dy,-40px)) scale(0.4); }
}

@media (prefers-reduced-motion: reduce) {
  .juice-correct, .streak-pop,
  #archi-celebrate.archi-in, #archi-celebrate.archi-out { animation: none; transition: none; }
}