/* ============================================================================
   BAZA ZADAN — Ultimate Premium Animation System
   ProfTutoring Parent Panel — Duolingo-Killer Edition v3.0
   ============================================================================
   Design tokens consumed from parent.html:
     --g1: #F9C843   --g2: #F07020   --cream: #FFFDF7   --paper: #F7F4EE
     --ink: #1A1713  --ink60: #6B6459 --ink30: #C2BAB0
     --green: #1DB954  --red: #E53E3E
     --spring: cubic-bezier(.34,1.56,.64,1)
     --ease:   cubic-bezier(.4,0,.2,1)

   Custom animation tokens:
     --bounce:  cubic-bezier(.68,-.55,.27,1.55)
     --smooth:  cubic-bezier(.25,.46,.45,.94)
     --snap:    cubic-bezier(.55,.085,.68,.53)
     --elastic: cubic-bezier(.68,-.6,.32,1.6)
   ========================================================================= */

:root {
  --bounce:  cubic-bezier(.68,-.55,.27,1.55);
  --smooth:  cubic-bezier(.25,.46,.45,.94);
  --snap:    cubic-bezier(.55,.085,.68,.53);
  --elastic: cubic-bezier(.68,-.6,.32,1.6);
  --dur-fast: .15s;
  --dur-med:  .3s;
  --dur-slow: .5s;
  --dur-xslow: .8s;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.14);
  --shadow-glow-gold: 0 0 20px rgba(249,200,67,.25);
  --shadow-glow-green: 0 0 20px rgba(88,204,2,.2);
  --shadow-glow-red: 0 0 20px rgba(229,62,62,.2);
}


/* ==========================================================================
   0. FULL-SCREEN QUESTION OVERLAY (Duolingo-style)
   ========================================================================== */
.tasks-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #FFFDF7;
  display: flex;
  flex-direction: column;
  animation: fsSlideUp .5s cubic-bezier(.22,1,.36,1) both;
  overflow: hidden;
  will-change: transform;
}
.tasks-fullscreen.closing {
  animation: fsSlideDown .35s var(--ease) both;
}

@keyframes fsSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes fsSlideDown {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(100%); opacity: 0; }
}

/* Top bar */
.fs-topbar {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  gap: 12px;
  flex-shrink: 0;
  background: #FFFDF7;
  z-index: 2;
  position: relative;
}

.fs-close-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(194,186,176,.3);
  border-bottom: 3px solid rgba(194,186,176,.45);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .12s var(--ease);
  flex-shrink: 0;
  color: var(--ink60);
  -webkit-tap-highlight-color: transparent;
}
.fs-close-btn:hover {
  border-color: var(--red);
  color: var(--red);
  background: rgba(229,62,62,.06);
}
.fs-close-btn:active {
  border-bottom-width: 2px;
  transform: translateY(1px);
  transition-duration: .04s;
}


/* ==========================================================================
   0a. PROGRESS BAR WITH SHIMMER
   ========================================================================== */
.fs-progress-wrap {
  flex: 1;
  height: 16px;
  background: rgba(194,186,176,.15);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.08);
}
.fs-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #58CC02, #78D820) !important;
  /* NOT gold, NOT orange — GREEN like Duolingo */
  border-radius: 10px;
  transition: width .5s cubic-bezier(.22,1,.36,1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(88,204,2,.35), inset 0 -2px 3px rgba(0,0,0,.12);
}
/* Glass highlight — 3D depth effect */
.fs-progress-fill::after {
  content: '';
  position: absolute;
  top: 2px; left: 4px; right: 4px;
  height: 5px;
  background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.1) 100%);
  border-radius: 5px;
  pointer-events: none;
}
/* Shimmer sweep */
.fs-progress-fill::before {
  content: '';
  position: absolute;
  top: 0; left: -50%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation: shimmerSweep 2s infinite;
  pointer-events: none;
}
@keyframes shimmerSweep {
  0%   { left: -50%; }
  100% { left: 150%; }
}

.fs-streak-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(249,200,67,.12);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 800;
  color: var(--g2);
  flex-shrink: 0;
  transition: all .2s var(--ease);
}
.fs-streak-pill .fire {
  animation: firePulse 1.5s var(--ease) infinite;
  display: inline-block;
}
.fs-streak-pill:hover {
  background: rgba(249,200,67,.2);
  transform: scale(1.05);
}


/* ==========================================================================
   0b. QUESTION AREA
   ========================================================================== */
.fs-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Scroll fade indicators */
.fs-body::before,
.fs-body::after {
  content: '';
  position: sticky;
  left: 0; right: 0;
  height: 24px;
  pointer-events: none;
  z-index: 3;
  flex-shrink: 0;
}
.fs-body::before {
  top: 0;
  background: linear-gradient(180deg, #FFFDF7 0%, transparent 100%);
}
.fs-body::after {
  bottom: 0;
  background: linear-gradient(0deg, #FFFDF7 0%, transparent 100%);
}


/* ==========================================================================
   0c. TYPEWRITER QUESTION TEXT
   ========================================================================== */
.fs-question-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 8px;
  animation: typewriterReveal .5s steps(30, end) both;
  overflow: hidden;
}
@keyframes typewriterReveal {
  from { max-width: 0; white-space: nowrap; overflow: hidden; opacity: .5; }
  to   { max-width: 100%; white-space: normal; overflow: visible; opacity: 1; }
}

.fs-question-text.multiline {
  animation: qTextFadeIn .4s var(--ease) both;
}
@keyframes qTextFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fs-question-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink30);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: fadeInUp .35s var(--ease) .1s both;
}
.fs-exam-tag {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  background: linear-gradient(135deg, rgba(249,200,67,.15), rgba(240,112,32,.1));
  color: var(--g2);
  animation: tagPop .3s var(--spring) .15s both;
}
@keyframes tagPop {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}


/* ==========================================================================
   1. MASCOT — Golden Retriever (All States)
   ========================================================================== */
.mascot-container {
  display: flex;
  justify-content: center;
  margin: 8px 0 16px;
  min-height: 120px;
  position: relative;
}
/* Subtle ambient glow behind mascot */
.mascot-container::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 140px; height: 140px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(249,200,67,.18) 0%, rgba(249,200,67,.08) 40%, transparent 70%);
  border-radius: 50%;
  animation: mascotAmbientGlow 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes mascotAmbientGlow {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .7; }
  50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.mascot-fox {
  width: 110px; height: 110px;
  position: relative;
  animation: mascotBounce 2.5s ease-in-out infinite;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.1));
  transition: filter .3s var(--ease);
}

/* Shadow that grows/shrinks with bounce */
.mascot-fox::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 50%;
  width: 60%; height: 8px;
  background: radial-gradient(ellipse, rgba(0,0,0,.1) 0%, transparent 70%);
  border-radius: 50%;
  transform: translateX(-50%);
  animation: mascotShadow 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mascotShadow {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .6; }
  50%      { transform: translateX(-50%) scaleX(.7); opacity: .3; }
}

.mascot-fox.thinking {
  animation: mascotThinkSmooth 1.5s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.08));
}
.mascot-fox.happy {
  animation: mascotHappy .6s var(--spring);
  filter: drop-shadow(0 8px 24px rgba(88,204,2,.2));
}
.mascot-fox.sad {
  animation: mascotSad .5s var(--ease);
  filter: drop-shadow(0 2px 8px rgba(229,62,62,.15));
}
.mascot-fox.celebrate {
  animation: mascotCelebrate 1s var(--spring);
  filter: drop-shadow(0 12px 32px rgba(249,200,67,.3));
}

@keyframes mascotBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes mascotThinkSmooth {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  20%      { transform: rotate(-4deg) translateY(-2px); }
  50%      { transform: rotate(0deg) translateY(-4px); }
  80%      { transform: rotate(4deg) translateY(-2px); }
}
@keyframes mascotHappy {
  0%   { transform: translateY(0) scale(1) rotate(0); }
  20%  { transform: translateY(-25px) scale(1.15) rotate(-6deg); }
  40%  { transform: translateY(-10px) scale(1.05) rotate(4deg); }
  60%  { transform: translateY(-18px) scale(1.1) rotate(-3deg); }
  80%  { transform: translateY(-5px) scale(1.02) rotate(2deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}
@keyframes mascotSad {
  0%   { transform: translateY(0) rotate(0); }
  15%  { transform: translateY(6px) rotate(-10deg); }
  30%  { transform: translateY(4px) rotate(7deg); }
  50%  { transform: translateY(5px) rotate(-4deg); }
  70%  { transform: translateY(3px) rotate(3deg); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes mascotCelebrate {
  0%   { transform: scale(1) rotate(0); }
  10%  { transform: scale(1.35) rotate(-12deg); }
  25%  { transform: scale(1.1) rotate(10deg); }
  40%  { transform: scale(1.25) rotate(-8deg); }
  55%  { transform: scale(1.05) rotate(6deg); }
  70%  { transform: scale(1.15) rotate(-3deg); }
  85%  { transform: scale(1.02) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Speech bubble */
.mascot-speech {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 8px 14px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.03);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  animation: speechPop .4s var(--spring) both;
  z-index: 3;
}
.mascot-speech::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 50%;
  width: 12px; height: 12px;
  background: white;
  border-radius: 3px;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 2px 2px 4px rgba(0,0,0,.05);
}
@keyframes speechPop {
  from { opacity: 0; transform: translateX(-50%) scale(.7) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
}


/* ==========================================================================
   2. ANSWER OPTIONS — Duolingo 3D Press Style
   ========================================================================== */
.fs-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-bottom: 8px;
}

.fs-option {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 2.5px solid rgba(194,186,176,.35);
  border-bottom: 5px solid rgba(194,186,176,.55);
  border-radius: 16px;
  background: white;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  transition: all .08s ease;
  -webkit-tap-highlight-color: transparent;
  animation: fsOptIn .35s var(--spring) both;
  min-height: 56px;
  transform: translateZ(0);
}
.fs-option:nth-child(1) { animation-delay: .05s; }
.fs-option:nth-child(2) { animation-delay: .1s; }
.fs-option:nth-child(3) { animation-delay: .15s; }
.fs-option:nth-child(4) { animation-delay: .2s; }
.fs-option:nth-child(5) { animation-delay: .25s; }
.fs-option:nth-child(6) { animation-delay: .3s; }

@keyframes fsOptIn {
  0%   { opacity: 0; transform: translateY(16px) scale(.96); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.fs-option:hover {
  border-color: var(--g1);
  border-bottom-color: rgba(249,200,67,.6);
  background: rgba(249,200,67,.04);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(249,200,67,.12);
}
/* 3D press down — dramatic like real button */
.fs-option:active {
  border-bottom-width: 2px;
  transform: translateY(3px);
  transition-duration: .03s;
  box-shadow: none;
}

.fs-option-letter {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 2px solid rgba(194,186,176,.3);
  border-bottom: 4px solid rgba(194,186,176,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink60);
  flex-shrink: 0;
  transition: all .15s var(--ease);
  background: rgba(247,244,238,.5);
}

.fs-option-text {
  flex: 1;
  line-height: 1.35;
}

/* Correct — green 3D */
.fs-option.correct {
  border-color: #58CC02;
  border-bottom: 4px solid #46A302;
  background: rgba(88,204,2,.08);
  animation: fsOptIn .35s var(--spring) both, correctBounce .5s var(--spring);
  box-shadow: 0 4px 20px rgba(88,204,2,.15);
}
.fs-option.correct .fs-option-letter {
  background: #58CC02;
  border-color: #58CC02;
  border-bottom-color: #46A302;
  color: white;
}
@keyframes correctBounce {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.04); }
  50%  { transform: scale(.99); }
  75%  { transform: scale(1.01); }
  100% { transform: scale(1); }
}

/* Correct GREEN GLOW ring — expands outward like a shockwave */
.fs-option.correct::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  background: transparent;
  border: 2.5px solid rgba(88,204,2,.35);
  box-shadow: 0 0 24px rgba(88,204,2,.25), 0 0 48px rgba(88,204,2,.1);
  animation: correctGlowRing 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes correctGlowRing {
  0%   { inset: -4px; opacity: .8; border-color: rgba(88,204,2,.5); box-shadow: 0 0 20px rgba(88,204,2,.3), 0 0 40px rgba(88,204,2,.12); }
  50%  { inset: -14px; opacity: .3; border-color: rgba(88,204,2,.15); box-shadow: 0 0 40px rgba(88,204,2,.15), 0 0 80px rgba(88,204,2,.05); }
  100% { inset: -4px; opacity: .8; border-color: rgba(88,204,2,.5); box-shadow: 0 0 20px rgba(88,204,2,.3), 0 0 40px rgba(88,204,2,.12); }
}

/* Wrong — red 3D + shake */
.fs-option.wrong {
  border-color: #E53E3E;
  border-bottom: 4px solid #C53030;
  background: rgba(229,62,62,.06);
  animation: fsOptIn .35s var(--spring) both, wrongShake .45s var(--ease);
}
.fs-option.wrong .fs-option-letter {
  background: var(--red);
  border-color: var(--red);
  border-bottom-color: #C53030;
  color: white;
}

/* Reveal correct after wrong */
.fs-option.reveal {
  border-color: #58CC02;
  border-bottom-color: #46A302;
  background: rgba(88,204,2,.06);
  animation: revealPulse .6s var(--ease) both;
}
.fs-option.reveal .fs-option-letter {
  border-color: #58CC02;
  color: #58CC02;
}
@keyframes revealPulse {
  0%   { opacity: .5; transform: scale(.98); }
  50%  { opacity: 1; transform: scale(1.01); }
  100% { opacity: 1; transform: scale(1); }
}

/* Disabled after answer — smooth fade */
.fs-option.disabled {
  pointer-events: none;
  opacity: .45;
  filter: grayscale(.2);
  transition: opacity .5s var(--ease), filter .5s var(--ease), transform .3s var(--ease);
  transform: scale(.97);
}
.fs-option.correct.disabled,
.fs-option.wrong.disabled,
.fs-option.reveal.disabled {
  opacity: 1;
  filter: none;
}


/* ==========================================================================
   3. BOTTOM ACTION BAR — 3D Duolingo Buttons
   ========================================================================== */
.fs-bottom-bar {
  padding: 12px 20px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: #FFFDF7;
  flex-shrink: 0;
  z-index: 2;
  position: relative;
}

.fs-bottom-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 20px; right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194,186,176,.2), transparent);
}

/* Result feedback strip */
.fs-result-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  margin-bottom: 10px;
  animation: stripSlideUp .35s var(--spring) both;
}
.fs-result-strip.correct {
  background: rgba(88,204,2,.1);
  border: 2px solid rgba(88,204,2,.2);
}
.fs-result-strip.wrong {
  background: rgba(229,62,62,.06);
  border: 2px solid rgba(229,62,62,.15);
}
@keyframes stripSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fs-result-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  animation: resultIconPop .4s var(--bounce) .1s both;
}
@keyframes resultIconPop {
  from { transform: scale(0) rotate(-20deg); }
  to   { transform: scale(1) rotate(0); }
}
.fs-result-strip.correct .fs-result-icon {
  background: #58CC02;
  color: white;
  box-shadow: 0 2px 8px rgba(88,204,2,.3);
}
.fs-result-strip.wrong .fs-result-icon {
  background: var(--red);
  color: white;
  box-shadow: 0 2px 8px rgba(229,62,62,.3);
}
.fs-result-title { font-weight: 800; font-size: 16px; color: var(--ink); }
.fs-result-detail { font-size: 13px; color: var(--ink60); line-height: 1.4; margin-top: 2px; }

/* Continue button — 3D Duolingo style */
.fs-continue-btn {
  width: 100%; height: 56px;
  border: none;
  border-radius: 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: all .1s ease;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Green 3D */
.fs-continue-btn.green {
  background: #58CC02;
  color: white;
  border-bottom: 4px solid #46A302;
  box-shadow: 0 4px 16px rgba(88,204,2,.25);
}
.fs-continue-btn.green:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(88,204,2,.3);
  filter: brightness(1.05);
}
.fs-continue-btn.green:active {
  border-bottom-width: 2px;
  transform: translateY(2px);
  box-shadow: 0 1px 4px rgba(88,204,2,.15);
  transition-duration: .04s;
}

/* Red 3D */
.fs-continue-btn.red {
  background: var(--red);
  color: white;
  border-bottom: 4px solid #C53030;
  box-shadow: 0 4px 16px rgba(229,62,62,.25);
}
.fs-continue-btn.red:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(229,62,62,.3);
  filter: brightness(1.05);
}
.fs-continue-btn.red:active {
  border-bottom-width: 2px;
  transform: translateY(2px);
  box-shadow: 0 1px 4px rgba(229,62,62,.15);
  transition-duration: .04s;
}

/* Gold 3D */
.fs-continue-btn.gold {
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: white;
  border-bottom: 4px solid #D4880A;
  box-shadow: 0 4px 16px rgba(249,200,67,.3);
}
.fs-continue-btn.gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(249,200,67,.35);
  filter: brightness(1.05);
}
.fs-continue-btn.gold:active {
  border-bottom-width: 2px;
  transform: translateY(2px);
  box-shadow: 0 1px 4px rgba(249,200,67,.15);
  transition-duration: .04s;
}

/* Button shimmer sweep */
.fs-continue-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.2) 45%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.2) 55%, transparent 100%);
  animation: btnShimmer 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btnShimmer {
  0%   { left: -80%; }
  40%  { left: 130%; }
  100% { left: 130%; }
}

/* Disabled */
.fs-continue-btn:disabled,
.fs-continue-btn.disabled {
  background: rgba(194,186,176,.3);
  border-bottom: 4px solid rgba(194,186,176,.45);
  color: var(--ink30);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}
.fs-continue-btn:disabled::before,
.fs-continue-btn.disabled::before {
  display: none;
}


/* ==========================================================================
   4. SOLUTION PANEL
   ========================================================================== */
.fs-solution-panel {
  background: rgba(88,204,2,.04);
  border: 1.5px solid rgba(88,204,2,.15);
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 12px;
  animation: solutionReveal .45s var(--ease) both;
  overflow: hidden;
}
.fs-solution-panel.wrong-solution {
  background: rgba(229,62,62,.03);
  border-color: rgba(229,62,62,.1);
}
@keyframes solutionReveal {
  from { opacity: 0; max-height: 0; padding: 0 16px; margin-top: 0; }
  to   { opacity: 1; max-height: 400px; padding: 14px 16px; margin-top: 12px; }
}
.fs-solution-title {
  font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px;
  color: #58CC02; margin-bottom: 6px;
}
.fs-solution-panel.wrong-solution .fs-solution-title { color: var(--red); }
.fs-solution-text { font-size: 14px; line-height: 1.6; color: var(--ink); }


/* ==========================================================================
   5. NAVIGATION TILES — 3D Press + Parallax Tilt
   ========================================================================== */
.nav-tiles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 16px 0;
}
.nav-tiles-grid.single-col { grid-template-columns: 1fr; }

.nav-tiles-grid.hero-tiles {
  grid-template-columns: 1fr;
  gap: 12px;
}
.nav-tiles-grid.hero-tiles .nav-tile {
  min-height: 100px;
  flex-direction: row;
  align-items: center;
  padding: 20px 22px;
}
.nav-tiles-grid.hero-tiles .nav-tile-icon { font-size: 42px; margin-right: 6px; }
.nav-tiles-grid.hero-tiles .nav-tile-label { font-size: 18px; }

.nav-tile {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 24px 18px;
  cursor: pointer;
  border: none;
  border-bottom: 5px solid rgba(0,0,0,.15);
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  transition: all .1s ease;
  -webkit-tap-highlight-color: transparent;
  animation: tilePopIn .45s var(--spring) both;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 140px;
  transform-style: preserve-3d;
  perspective: 800px;
}
.nav-tile:nth-child(1)  { animation-delay: 0s; }
.nav-tile:nth-child(2)  { animation-delay: .06s; }
.nav-tile:nth-child(3)  { animation-delay: .12s; }
.nav-tile:nth-child(4)  { animation-delay: .18s; }
.nav-tile:nth-child(5)  { animation-delay: .24s; }
.nav-tile:nth-child(6)  { animation-delay: .30s; }
.nav-tile:nth-child(7)  { animation-delay: .36s; }
.nav-tile:nth-child(8)  { animation-delay: .42s; }
.nav-tile:nth-child(9)  { animation-delay: .48s; }
.nav-tile:nth-child(10) { animation-delay: .54s; }
.nav-tile:nth-child(11) { animation-delay: .60s; }
.nav-tile:nth-child(12) { animation-delay: .66s; }

@keyframes tilePopIn {
  from { opacity: 0; transform: translateY(20px) scale(.88); }
  50%  { transform: translateY(-3px) scale(1.02); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.nav-tile:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  filter: brightness(1.05);
}
.nav-tile:active {
  border-bottom-width: 2px;
  transform: perspective(800px) rotateX(5deg) translateY(3px) scale(.97);
  transition-duration: .04s;
  filter: brightness(.98);
}

.nav-tile-icon {
  font-size: 36px; line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.1));
  transition: transform .3s var(--spring);
  /* Parallax: icon floats slightly separate from background */
  animation: tileIconFloat 4s ease-in-out infinite;
  will-change: transform;
}
@keyframes tileIconFloat {
  0%, 100% { transform: translateY(0) translateZ(10px); }
  50%      { transform: translateY(-5px) translateZ(10px); }
}
.nav-tile:hover .nav-tile-icon {
  transform: scale(1.15) translateY(-6px);
  animation: none;
}
.nav-tile-label {
  font-size: 16px; font-weight: 800;
  color: white; line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.nav-tile-count {
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.8);
  margin-top: auto;
}

/* Tile color themes */
.nav-tile.tile-math     { background: linear-gradient(135deg, #667EEA, #764BA2); box-shadow: 0 6px 20px rgba(102,126,234,.3); border-bottom-color: #5A6BCF; }
.nav-tile.tile-math-ext { background: linear-gradient(135deg, #6C5CE7, #A855F7); box-shadow: 0 6px 20px rgba(108,92,231,.3); border-bottom-color: #5B4BC6; }
.nav-tile.tile-polish   { background: linear-gradient(135deg, #E53E3E, #DD6B20); box-shadow: 0 6px 20px rgba(229,62,62,.3); border-bottom-color: #C53030; }
.nav-tile.tile-english  { background: linear-gradient(135deg, #3182CE, #2B6CB0); box-shadow: 0 6px 20px rgba(49,130,206,.3); border-bottom-color: #2456A0; }
.nav-tile.tile-physics  { background: linear-gradient(135deg, #ED8936, #E53E3E); box-shadow: 0 6px 20px rgba(237,137,54,.3); border-bottom-color: #D07020; }
.nav-tile.tile-chemistry { background: linear-gradient(135deg, #38B2AC, #319795); box-shadow: 0 6px 20px rgba(56,178,172,.3); border-bottom-color: #2A8A85; }
.nav-tile.tile-biology  { background: linear-gradient(135deg, #48BB78, #38A169); box-shadow: 0 6px 20px rgba(72,187,120,.3); border-bottom-color: #2F8A58; }
.nav-tile.tile-history  { background: linear-gradient(135deg, #B7791F, #975A16); box-shadow: 0 6px 20px rgba(183,121,31,.3); border-bottom-color: #7A4A10; }
.nav-tile.tile-geography { background: linear-gradient(135deg, #4299E1, #2B6CB0); box-shadow: 0 6px 20px rgba(66,153,225,.3); border-bottom-color: #2456A0; }
.nav-tile.tile-it       { background: linear-gradient(135deg, #4A5568, #2D3748); box-shadow: 0 6px 20px rgba(74,85,104,.3); border-bottom-color: #1F2937; }
.nav-tile.tile-matura   { background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 6px 20px rgba(249,200,67,.3); border-bottom-color: #D4880A; }
.nav-tile.tile-e8       { background: linear-gradient(135deg, #667EEA, #5A67D8); box-shadow: 0 6px 20px rgba(102,126,234,.3); border-bottom-color: #4C5DC0; }
.nav-tile.tile-lektury  { background: linear-gradient(135deg, #E53E3E, #C53030); box-shadow: 0 6px 20px rgba(229,62,62,.3); border-bottom-color: #A52525; }
.nav-tile.tile-wiersze  { background: linear-gradient(135deg, #9F7AEA, #805AD5); box-shadow: 0 6px 20px rgba(159,122,234,.3); border-bottom-color: #6B46C1; }
.nav-tile.tile-daily    { background: linear-gradient(135deg, #F6AD55, #ED8936); box-shadow: 0 6px 20px rgba(246,173,85,.3); border-bottom-color: #D07020; }
.nav-tile.tile-ranking  { background: linear-gradient(135deg, #ECC94B, #D69E2E); box-shadow: 0 6px 20px rgba(236,201,75,.3); border-bottom-color: #B7821C; }

/* Shimmer on tiles */
.nav-tile::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.15) 50%, transparent 100%);
  animation: tileShimmer 4s ease infinite;
  pointer-events: none;
  z-index: 2;
}
.nav-tile:nth-child(odd)::before  { animation-delay: 0s; }
.nav-tile:nth-child(even)::before { animation-delay: 2s; }

@keyframes tileShimmer {
  0%   { left: -100%; }
  25%  { left: 150%; }
  100% { left: 150%; }
}

/* Subject-themed animated background patterns */
.nav-tile::after {
  content: attr(data-pattern);
  position: absolute;
  bottom: -5px; right: -5px;
  font-size: 60px;
  opacity: .08;
  pointer-events: none;
  z-index: 0;
  animation: tilePatternDrift 8s ease-in-out infinite;
  line-height: 1;
}
@keyframes tilePatternDrift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(-4px, -3px) rotate(3deg); }
  50%      { transform: translate(2px, -5px) rotate(-2deg); }
  75%      { transform: translate(-2px, -2px) rotate(1deg); }
}
.nav-tile.tile-math::after    { content: '\u03C0\u221A'; }
.nav-tile.tile-math-ext::after { content: '\u222B\u03A3'; }
.nav-tile.tile-polish::after  { content: 'Aa'; font-family: 'Cormorant Garamond', serif; }
.nav-tile.tile-english::after { content: 'Hi'; font-family: 'DM Sans', sans-serif; font-weight: 900; }
.nav-tile.tile-physics::after { content: 'F=ma'; font-size: 28px; font-weight: 900; }
.nav-tile.tile-chemistry::after { content: 'H\u2082O'; font-size: 32px; font-weight: 900; }
.nav-tile.tile-biology::after { content: '\uD83E\uDDEC'; font-size: 48px; }
.nav-tile.tile-history::after { content: '\u2694\uFE0F'; font-size: 48px; }
.nav-tile.tile-matura::after  { content: '\uD83C\uDF93'; font-size: 48px; }
.nav-tile.tile-e8::after      { content: 'E8'; font-weight: 900; font-size: 48px; }
.nav-tile.tile-lektury::after { content: '\uD83D\uDCDA'; font-size: 48px; }
.nav-tile.tile-wiersze::after { content: '\u270D\uFE0F'; font-size: 48px; }
.nav-tile.tile-daily::after   { content: '\u2B50'; font-size: 48px; }
.nav-tile.tile-ranking::after { content: '\uD83C\uDFC6'; font-size: 48px; }

/* Ripple */
.nav-tile .tile-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transform: scale(0);
  animation: rippleExpand .6s var(--ease) forwards;
  pointer-events: none;
}


/* ==========================================================================
   6. TOPIC LIST — Beautiful Cards with 3D
   ========================================================================== */
.topic-card-list { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; }

.topic-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 16px;
  background: white;
  border: 2px solid rgba(194,186,176,.15);
  border-bottom: 4px solid rgba(194,186,176,.25);
  cursor: pointer;
  transition: all .1s ease;
  animation: topicCardIn .35s var(--spring) both;
  -webkit-tap-highlight-color: transparent;
}
.topic-card:nth-child(1)  { animation-delay: .02s; }
.topic-card:nth-child(2)  { animation-delay: .06s; }
.topic-card:nth-child(3)  { animation-delay: .10s; }
.topic-card:nth-child(4)  { animation-delay: .14s; }
.topic-card:nth-child(5)  { animation-delay: .18s; }
.topic-card:nth-child(6)  { animation-delay: .22s; }
.topic-card:nth-child(7)  { animation-delay: .26s; }
.topic-card:nth-child(8)  { animation-delay: .30s; }
.topic-card:nth-child(9)  { animation-delay: .34s; }
.topic-card:nth-child(10) { animation-delay: .38s; }
.topic-card:nth-child(11) { animation-delay: .42s; }
.topic-card:nth-child(12) { animation-delay: .46s; }

@keyframes topicCardIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.topic-card:hover {
  transform: translateX(4px) translateY(-1px);
  border-color: var(--g1);
  border-bottom-color: rgba(249,200,67,.4);
  box-shadow: 0 4px 16px rgba(249,200,67,.12);
}
.topic-card:active {
  border-bottom-width: 2px;
  transform: translateY(2px) scale(.99);
  transition-duration: .04s;
  box-shadow: none;
}

.topic-card-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px currentColor; }
.topic-card-name { flex: 1; font-size: 15px; font-weight: 600; color: var(--ink); }
.topic-card-count { font-size: 12px; font-weight: 700; color: var(--ink30); background: rgba(194,186,176,.12); padding: 4px 10px; border-radius: 8px; }
.topic-card-arrow { color: var(--ink30); transition: transform .2s var(--spring), color .2s var(--ease); }
.topic-card:hover .topic-card-arrow { transform: translateX(4px); color: var(--g2); }


/* ==========================================================================
   7. SECTION HEADERS & TAB INDICATOR
   ========================================================================== */
.tasks-section-header {
  text-align: center;
  padding: 20px 0 8px;
  animation: headerFadeIn .4s var(--ease) both;
}
@keyframes headerFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tasks-section-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 24px; font-weight: 900;
  color: var(--ink); letter-spacing: -.5px; line-height: 1.2;
}
.tasks-section-subtitle { font-size: 14px; color: var(--ink60); margin-top: 6px; line-height: 1.5; }

/* Back button 3D */
.tasks-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 12px;
  border: 2px solid rgba(194,186,176,.2);
  border-bottom: 3px solid rgba(194,186,176,.35);
  background: white;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 600; color: var(--ink60);
  cursor: pointer; transition: all .1s ease;
  margin-bottom: 12px;
  -webkit-tap-highlight-color: transparent;
}
.tasks-back-btn:hover { border-color: var(--g1); border-bottom-color: rgba(249,200,67,.4); color: var(--ink); background: rgba(249,200,67,.04); }
.tasks-back-btn:active { border-bottom-width: 2px; transform: translateY(1px); transition-duration: .04s; }
.tasks-back-btn .arrow { transition: transform .2s var(--spring); }
.tasks-back-btn:hover .arrow { transform: translateX(-3px); }

/* Tab toggle — clean, NO underline, just bg change + 3D tactile press */
.tasks-sub-toggle { position: relative; }
.tasks-sub-toggle button { position: relative; transition: all .2s var(--ease); border-bottom: 2px solid transparent; }
.tasks-sub-toggle button.active { color: var(--ink); background: linear-gradient(180deg, #FFFFFF, #FEFCF7); border-radius: 10px; border-bottom-color: rgba(194,186,176,.15); font-weight: 700; }
/* CRITICAL: No ::after — these cause double underline */
.tasks-sub-toggle button.active::after { display: none !important; }
.tasks-sub-toggle button:active { transform: scale(.95) translateY(1px); transition-duration: .04s; border-bottom-width: 1px; }


/* ==========================================================================
   8. STREAK HERO — Duolingo-style Fire Animation
   ========================================================================== */
.streak-hero {
  text-align: center; padding: 24px 16px; margin: 8px 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(249,200,67,.08), rgba(240,112,32,.05));
  position: relative; overflow: hidden;
  animation: streakHeroIn .5s var(--spring) both;
}
.streak-hero::before {
  content: '';
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(249,200,67,.08) 0%, transparent 50%),
              radial-gradient(circle at 70% 50%, rgba(240,112,32,.06) 0%, transparent 50%);
  animation: streakBgMove 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes streakBgMove {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(5%, -3%); }
  50%      { transform: translate(-3%, 5%); }
  75%      { transform: translate(3%, 2%); }
}
@keyframes streakHeroIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* Fire — realistic flame */
.streak-hero-fire {
  font-size: 48px; display: inline-block;
  animation: flamePulse 1s ease-in-out infinite, flameFloat .5s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 10px rgba(255,100,0,.35)) drop-shadow(0 0 25px rgba(255,60,0,.15));
  position: relative; z-index: 1;
}
@keyframes flamePulse {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.12) rotate(-2deg); }
  60%      { transform: scale(1.08) rotate(2deg); }
}
@keyframes flameFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-4px); }
}

/* Fire glow ring */
.streak-hero-fire::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 80px; height: 80px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,140,0,.15) 0%, transparent 70%);
  border-radius: 50%;
  animation: fireGlow 1.5s ease-in-out infinite;
  pointer-events: none; z-index: -1;
}
@keyframes fireGlow {
  0%, 100% { opacity: .5; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
}

/* Streak number — golden glow + pulse */
.streak-hero-num {
  font-family: 'DM Sans', sans-serif;
  font-size: 56px; font-weight: 900;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1; margin: 4px 0;
  position: relative; z-index: 1;
  animation: numPulseGlow 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(249,200,67,.25));
}
@keyframes numPulseGlow {
  0%, 100% { filter: drop-shadow(0 0 15px rgba(249,200,67,.15)); }
  50%      { filter: drop-shadow(0 0 30px rgba(249,200,67,.35)) drop-shadow(0 0 60px rgba(240,112,32,.15)); }
}

.streak-hero-label { font-size: 15px; font-weight: 600; color: var(--ink60); position: relative; z-index: 1; }


/* ==========================================================================
   8b. CALENDAR DOTS — Staggered Pop-in
   ========================================================================== */
.streak-cal-row { display: flex; justify-content: center; gap: 8px; margin-top: 16px; position: relative; z-index: 1; }
.streak-cal-day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.streak-cal-dot {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  transition: all .3s var(--spring);
  animation: calDotEntrance .4s var(--spring) both;
}
.streak-cal-day:nth-child(1) .streak-cal-dot { animation-delay: .05s; }
.streak-cal-day:nth-child(2) .streak-cal-dot { animation-delay: .1s; }
.streak-cal-day:nth-child(3) .streak-cal-dot { animation-delay: .15s; }
.streak-cal-day:nth-child(4) .streak-cal-dot { animation-delay: .2s; }
.streak-cal-day:nth-child(5) .streak-cal-dot { animation-delay: .25s; }
.streak-cal-day:nth-child(6) .streak-cal-dot { animation-delay: .3s; }
.streak-cal-day:nth-child(7) .streak-cal-dot { animation-delay: .35s; }

@keyframes calDotEntrance {
  from { opacity: 0; transform: scale(0) rotate(-10deg); }
  60%  { transform: scale(1.15) rotate(3deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

.streak-cal-dot.done {
  background: #58CC02; color: white;
  animation: calDotEntrance .4s var(--spring) both, calDoneGlow 2s ease-in-out infinite 1s;
  box-shadow: 0 2px 8px rgba(88,204,2,.25);
}
@keyframes calDoneGlow {
  0%, 100% { box-shadow: 0 2px 8px rgba(88,204,2,.2); }
  50%      { box-shadow: 0 2px 12px rgba(88,204,2,.35); }
}

.streak-cal-dot.today {
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: white;
  box-shadow: 0 0 0 3px rgba(249,200,67,.2);
  animation: calDotEntrance .4s var(--spring) both, todayPulse 2s var(--ease) infinite 1s;
}
@keyframes todayPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(249,200,67,.2); }
  50%      { box-shadow: 0 0 0 8px rgba(249,200,67,0); }
}

.streak-cal-dot.empty { background: rgba(194,186,176,.15); color: var(--ink30); }

.streak-cal-name { font-size: 10px; font-weight: 600; color: var(--ink30); animation: fadeInUp .3s var(--ease) both; }
.streak-cal-day:nth-child(1) .streak-cal-name { animation-delay: .1s; }
.streak-cal-day:nth-child(2) .streak-cal-name { animation-delay: .15s; }
.streak-cal-day:nth-child(3) .streak-cal-name { animation-delay: .2s; }
.streak-cal-day:nth-child(4) .streak-cal-name { animation-delay: .25s; }
.streak-cal-day:nth-child(5) .streak-cal-name { animation-delay: .3s; }
.streak-cal-day:nth-child(6) .streak-cal-name { animation-delay: .35s; }
.streak-cal-day:nth-child(7) .streak-cal-name { animation-delay: .4s; }
.streak-cal-name.today { color: var(--g2); font-weight: 700; }


/* ==========================================================================
   9. LEADERBOARD — Premium with Podium Effects
   ========================================================================== */
.lb-hero {
  text-align: center; padding: 24px 16px; margin: 8px 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(236,201,75,.1), rgba(214,158,46,.06));
  animation: streakHeroIn .5s var(--spring) both;
  position: relative; overflow: hidden;
}
.lb-hero::before {
  content: '';
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at 25% 25%, rgba(255,215,0,.1) 0%, transparent 40%),
              radial-gradient(circle at 75% 75%, rgba(255,215,0,.06) 0%, transparent 40%);
  animation: lbHeroBg 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lbHeroBg {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(3%, -2%) rotate(3deg); }
}

.lb-trophy {
  font-size: 48px; display: inline-block;
  animation: trophyBounce 2s var(--ease) infinite;
  filter: drop-shadow(0 4px 12px rgba(255,215,0,.3));
  position: relative; z-index: 1;
}
@keyframes trophyBounce {
  0%, 100% { transform: translateY(0) rotate(0); }
  20%      { transform: translateY(-6px) rotate(-5deg); }
  50%      { transform: translateY(-3px) rotate(0); }
  80%      { transform: translateY(-4px) rotate(5deg); }
}

.lb-pos {
  font-family: 'DM Sans', sans-serif;
  font-size: 48px; font-weight: 900;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; line-height: 1;
  position: relative; z-index: 1;
}
.lb-of { font-size: 14px; color: var(--ink60); font-weight: 600; margin-top: 4px; position: relative; z-index: 1; }
.lb-streak-tag {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px; padding: 6px 14px;
  border-radius: 20px; background: rgba(249,200,67,.12);
  font-size: 14px; font-weight: 700; color: var(--g2);
  position: relative; z-index: 1;
}

.lb-section-title {
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--ink30); margin: 16px 0 8px;
  animation: fadeInUp .3s var(--ease) both;
}

.lb-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 14px; margin-bottom: 6px;
  animation: lbRowIn .35s var(--spring) both;
  transition: all .2s var(--ease);
  position: relative;
}
.lb-row:nth-child(1)  { animation-delay: .02s; }
.lb-row:nth-child(2)  { animation-delay: .06s; }
.lb-row:nth-child(3)  { animation-delay: .10s; }
.lb-row:nth-child(4)  { animation-delay: .14s; }
.lb-row:nth-child(5)  { animation-delay: .18s; }
.lb-row:nth-child(6)  { animation-delay: .22s; }
.lb-row:nth-child(7)  { animation-delay: .26s; }
.lb-row:nth-child(8)  { animation-delay: .30s; }
.lb-row:nth-child(9)  { animation-delay: .34s; }
.lb-row:nth-child(10) { animation-delay: .38s; }

@keyframes lbRowIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Podium #1 Gold */
.lb-row.rank-1, .lb-list .lb-row:nth-child(1) {
  background: linear-gradient(90deg, rgba(255,215,0,.12), rgba(255,215,0,.04));
  border: 2px solid rgba(255,215,0,.25);
  box-shadow: 0 4px 20px rgba(255,215,0,.12);
  padding: 14px 18px;
}
.lb-row.rank-1::before, .lb-list .lb-row:nth-child(1)::before {
  content: ''; position: absolute; inset: -1px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(255,215,0,.15), transparent, rgba(255,215,0,.08));
  pointer-events: none; animation: goldShimmer 3s ease-in-out infinite; z-index: -1;
}
@keyframes goldShimmer { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* Podium #2 Silver */
.lb-row.rank-2, .lb-list .lb-row:nth-child(2) {
  background: linear-gradient(90deg, rgba(192,192,192,.1), rgba(192,192,192,.03));
  border: 1.5px solid rgba(192,192,192,.2);
}

/* Podium #3 Bronze */
.lb-row.rank-3, .lb-list .lb-row:nth-child(3) {
  background: linear-gradient(90deg, rgba(205,127,50,.1), rgba(205,127,50,.03));
  border: 1.5px solid rgba(205,127,50,.2);
}

/* User row — animated golden border + glow pulse */
.lb-row.is-me {
  background: linear-gradient(90deg, rgba(249,200,67,.14), rgba(240,112,32,.07));
  border: 2px solid rgba(249,200,67,.3);
  box-shadow: 0 0 20px rgba(249,200,67,.12);
  animation: lbRowIn .35s var(--spring) both, meGlowPulse 2.5s var(--ease) infinite;
}
.lb-row.is-me::before {
  content: ''; position: absolute; inset: -2px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(249,200,67,.15), rgba(240,112,32,.1), rgba(249,200,67,.15));
  background-size: 200% 100%;
  animation: meGlowBorder 3s ease-in-out infinite;
  pointer-events: none; z-index: -1; opacity: .4;
}
@keyframes meGlowPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(249,200,67,.1); }
  50%      { box-shadow: 0 0 28px rgba(249,200,67,.22); }
}
@keyframes meGlowBorder {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.lb-rank { width: 28px; font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 900; color: var(--ink30); text-align: center; flex-shrink: 0; }
.lb-row.rank-1 .lb-rank, .lb-list .lb-row:nth-child(1) .lb-rank { color: #FFD700; font-size: 22px; filter: drop-shadow(0 0 4px rgba(255,215,0,.4)); }
.lb-row.rank-2 .lb-rank, .lb-list .lb-row:nth-child(2) .lb-rank { color: #C0C0C0; font-size: 19px; }
.lb-row.rank-3 .lb-rank, .lb-list .lb-row:nth-child(3) .lb-rank { color: #CD7F32; font-size: 19px; }

.lb-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: white; flex-shrink: 0;
  transition: transform .2s var(--spring);
}
.lb-row:hover .lb-avatar { transform: scale(1.1); }
.lb-row.rank-1 .lb-avatar, .lb-list .lb-row:nth-child(1) .lb-avatar { box-shadow: 0 0 0 2px #FFD700, 0 0 12px rgba(255,215,0,.3); }
.lb-row.rank-2 .lb-avatar, .lb-list .lb-row:nth-child(2) .lb-avatar { box-shadow: 0 0 0 2px #C0C0C0; }
.lb-row.rank-3 .lb-avatar, .lb-list .lb-row:nth-child(3) .lb-avatar { box-shadow: 0 0 0 2px #CD7F32; }

.lb-name { flex: 1; font-size: 15px; font-weight: 600; color: var(--ink); }
.lb-days-num { font-size: 16px; font-weight: 800; color: var(--g2); }
.lb-days-label { font-size: 10px; color: var(--ink30); margin-left: 2px; }

/* Invite card */
.lb-invite {
  margin-top: 20px; padding: 20px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(249,200,67,.06), rgba(240,112,32,.04));
  border: 2px dashed rgba(249,200,67,.3);
  text-align: center;
  animation: tilePopIn .5s var(--spring) both; animation-delay: .4s;
}
.lb-invite-emoji { font-size: 36px; margin-bottom: 8px; display: inline-block; animation: wiggle 2s ease-in-out infinite; }
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-10deg); } 30% { transform: rotate(10deg); }
  45% { transform: rotate(-5deg); } 55% { transform: rotate(0); }
}
.lb-invite-title { font-size: 17px; font-weight: 800; color: var(--ink); }
.lb-invite-desc { font-size: 13px; color: var(--ink60); line-height: 1.5; margin-top: 6px; }

.lb-invite-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 14px 28px;
  border: none; border-bottom: 4px solid #D4880A; border-radius: 14px;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: white; font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 16px rgba(249,200,67,.3);
  transition: all .1s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative; overflow: hidden;
}
.lb-invite-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(249,200,67,.35); filter: brightness(1.05); }
.lb-invite-btn:active { border-bottom-width: 2px; transform: translateY(2px); box-shadow: 0 1px 4px rgba(249,200,67,.15); transition-duration: .04s; }
.lb-invite-btn::before {
  content: ''; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  animation: btnShimmer 3s ease-in-out infinite; pointer-events: none;
}


/* ==========================================================================
   10. COMPLETION CELEBRATION + CONFETTI
   ========================================================================== */
.celebration-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(255,253,247,.97);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  animation: celebFadeIn .5s var(--ease) both; padding: 20px;
}
@keyframes celebFadeIn { from { opacity: 0; } to { opacity: 1; } }

.celebration-overlay::before {
  content: ''; position: absolute; top: 35%; left: 50%;
  width: 300px; height: 300px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(249,200,67,.15) 0%, rgba(88,204,2,.08) 40%, transparent 70%);
  border-radius: 50%; animation: celebBurst 2s ease-out both; pointer-events: none;
}
@keyframes celebBurst {
  from { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  to   { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

.celeb-mascot { font-size: 80px; animation: mascotCelebrate 1.2s var(--spring) both; filter: drop-shadow(0 8px 24px rgba(249,200,67,.25)); position: relative; z-index: 1; }
.celeb-title { font-family: 'DM Sans', sans-serif; font-size: 28px; font-weight: 900; color: var(--ink); margin-top: 16px; text-align: center; animation: fadeInUp .5s var(--ease) .2s both; }
.celeb-subtitle { font-size: 16px; color: var(--ink60); margin-top: 8px; text-align: center; line-height: 1.5; animation: fadeInUp .5s var(--ease) .3s both; }

.celeb-streak-card {
  margin-top: 24px; padding: 20px 32px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(249,200,67,.1), rgba(240,112,32,.06));
  text-align: center; animation: fadeInUp .5s var(--spring) .35s both;
  position: relative; overflow: hidden;
}
.celeb-streak-card::before {
  content: ''; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(249,200,67,.15), transparent);
  animation: btnShimmer 3s ease-in-out infinite 1s; pointer-events: none;
}
.celeb-streak-num {
  font-family: 'DM Sans', sans-serif; font-size: 48px; font-weight: 900;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  position: relative; animation: celebCountUp .8s var(--spring) .5s both;
}
@keyframes celebCountUp {
  from { transform: scale(.3) translateY(20px); opacity: 0; }
  60%  { transform: scale(1.15) translateY(-5px); opacity: 1; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.celeb-streak-label { font-size: 14px; font-weight: 600; color: var(--ink60); }
.celeb-actions { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; animation: fadeInUp .5s var(--ease) .5s both; }

/* Confetti system */
.confetti-particle { position: fixed; pointer-events: none; z-index: 10001; animation: confettiFall var(--fall-dur, 3s) linear forwards; }
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  50%  { opacity: 1; }
  100% { transform: translateY(100vh) rotate(var(--rot, 720deg)) scale(.5); opacity: 0; }
}
.confetti-rect     { width: 10px; height: 6px; border-radius: 1px; }
.confetti-circle   { width: 8px; height: 8px; border-radius: 50%; }
.confetti-triangle { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid currentColor; }
.confetti-star     { width: 10px; height: 10px; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

.confetti-wobble { animation: confettiWobble var(--fall-dur, 3.5s) linear forwards; }
@keyframes confettiWobble {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
  25%  { transform: translateY(25vh) translateX(var(--wobble, 30px)) rotate(180deg); opacity: 1; }
  50%  { transform: translateY(50vh) translateX(calc(var(--wobble, 30px) * -1)) rotate(360deg); opacity: .9; }
  75%  { transform: translateY(75vh) translateX(var(--wobble, 30px)) rotate(540deg); opacity: .6; }
  100% { transform: translateY(100vh) translateX(0) rotate(720deg); opacity: 0; }
}

.confetti-gold   { background: #FFD700; color: #FFD700; }
.confetti-orange { background: #F07020; color: #F07020; }
.confetti-green  { background: #58CC02; color: #58CC02; }
.confetti-blue   { background: #3B82F6; color: #3B82F6; }
.confetti-pink   { background: #EC4899; color: #EC4899; }
.confetti-purple { background: #8B5CF6; color: #8B5CF6; }
.confetti-red    { background: #EF4444; color: #EF4444; }
.confetti-cyan   { background: #06B6D4; color: #06B6D4; }
.confetti-yellow { background: #F9C843; color: #F9C843; }


/* ==========================================================================
   11. LEKTURY & WIERSZE CARDS
   ========================================================================== */
.lektura-card {
  border-radius: 18px; padding: 18px;
  background: white;
  border: 2px solid rgba(194,186,176,.12);
  border-bottom: 4px solid rgba(194,186,176,.2);
  cursor: pointer; transition: all .12s ease;
  animation: lekturaCardIn .4s var(--spring) both;
  -webkit-tap-highlight-color: transparent;
  position: relative; overflow: hidden;
}
.lektura-card:nth-child(1)  { animation-delay: .02s; }
.lektura-card:nth-child(2)  { animation-delay: .06s; }
.lektura-card:nth-child(3)  { animation-delay: .10s; }
.lektura-card:nth-child(4)  { animation-delay: .14s; }
.lektura-card:nth-child(5)  { animation-delay: .18s; }
.lektura-card:nth-child(6)  { animation-delay: .22s; }
.lektura-card:nth-child(7)  { animation-delay: .26s; }
.lektura-card:nth-child(8)  { animation-delay: .30s; }
.lektura-card:nth-child(9)  { animation-delay: .34s; }
.lektura-card:nth-child(10) { animation-delay: .38s; }
.lektura-card:nth-child(11) { animation-delay: .42s; }
.lektura-card:nth-child(12) { animation-delay: .46s; }

@keyframes lekturaCardIn {
  from { opacity: 0; transform: translateY(16px) scale(.95); }
  60%  { transform: translateY(-2px) scale(1.01); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.lektura-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.08); border-color: var(--g1); }
.lektura-card:active { border-bottom-width: 2px; transform: translateY(2px) scale(.99); transition-duration: .04s; box-shadow: none; }

.lektura-emoji { font-size: 32px; margin-bottom: 8px; display: inline-block; transition: transform .3s var(--spring); }
.lektura-card:hover .lektura-emoji { transform: scale(1.15) rotate(-5deg); }
.lektura-title { font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.lektura-author { font-size: 13px; color: var(--ink60); margin-top: 2px; }
.lektura-epoch { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; background: rgba(229,62,62,.08); color: #E53E3E; margin-top: 8px; }

.lektura-detail-header { padding: 20px; border-radius: 20px; margin-bottom: 16px; animation: headerFadeIn .4s var(--ease) both; }
.lektura-detail-tabs { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: none; }
.lektura-detail-tabs::-webkit-scrollbar { display: none; }

.lektura-tab-btn {
  padding: 8px 16px; border-radius: 10px;
  border: 2px solid rgba(194,186,176,.2); border-bottom: 3px solid rgba(194,186,176,.35);
  background: white; font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 600; color: var(--ink60);
  white-space: nowrap; cursor: pointer;
  transition: all .1s ease; -webkit-tap-highlight-color: transparent;
}
.lektura-tab-btn.active { border-color: var(--g1); border-bottom-color: rgba(249,200,67,.5); background: rgba(249,200,67,.08); color: var(--ink); }
.lektura-tab-btn:active { border-bottom-width: 2px; transform: translateY(1px); transition-duration: .04s; }


/* ==========================================================================
   12. SHARED KEYFRAMES
   ========================================================================== */
@keyframes firePulse {
  0%, 100% { transform: scale(1) translateY(0); }
  25%      { transform: scale(1.12) translateY(-2px); }
  50%      { transform: scale(1.05) translateY(-1px); }
}
@keyframes wrongShake {
  0%   { transform: translateX(0); }
  10%  { transform: translateX(-10px) rotate(-1deg); }
  20%  { transform: translateX(10px) rotate(1deg); }
  30%  { transform: translateX(-8px) rotate(-.5deg); }
  40%  { transform: translateX(8px) rotate(.5deg); }
  50%  { transform: translateX(-6px); }
  60%  { transform: translateX(6px); }
  70%  { transform: translateX(-3px); }
  80%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}
@keyframes rippleExpand { to { transform: scale(4); opacity: 0; } }
@keyframes fadeInUp  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes scaleIn { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes scaleInBounce { from { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes gentlePulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.02); opacity: .9; } }
@keyframes rotate360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }


/* ==========================================================================
   12b. XP POPUP — Enhanced
   ========================================================================== */
.xp-popup {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'DM Sans', sans-serif;
  font-size: 36px; font-weight: 900; color: #58CC02;
  z-index: 10002;
  animation: xpPopFloat 1.4s var(--spring) both;
  pointer-events: none;
  text-shadow: 0 0 20px rgba(88,204,2,.4), 0 0 40px rgba(88,204,2,.2);
  filter: drop-shadow(0 4px 12px rgba(88,204,2,.3));
}
@keyframes xpPopFloat {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-10deg); }
  15%  { opacity: 1; transform: translate(-50%, -60%) scale(1.3) rotate(5deg); }
  30%  { transform: translate(-50%, -65%) scale(1.1) rotate(-3deg); }
  45%  { transform: translate(-50%, -75%) scale(1.15) rotate(2deg); }
  70%  { opacity: 1; transform: translate(-50%, -100%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(.7) rotate(0); }
}
.xp-popup::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 60px; height: 60px; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88,204,2,.2) 0%, transparent 70%);
  animation: xpSparkle 1s ease-out both; pointer-events: none;
}
@keyframes xpSparkle {
  from { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  to   { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}
.xp-popup.bonus {
  color: var(--g2);
  text-shadow: 0 0 20px rgba(240,112,32,.4), 0 0 40px rgba(249,200,67,.2);
  filter: drop-shadow(0 4px 12px rgba(240,112,32,.3));
}


/* ==========================================================================
   13. LIVE ACTIVITY BANNER
   ========================================================================== */
.live-activity-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9998;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 10px;
  background: linear-gradient(135deg, #1A1713, #2D2520);
  color: white; display: flex; align-items: center; gap: 12px;
  animation: laBannerIn .5s var(--spring) both;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.live-activity-banner.closing { animation: laBannerOut .3s var(--ease) both; }
@keyframes laBannerIn  { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes laBannerOut { from { transform: translateY(0); } to { transform: translateY(-100%); } }

.live-activity-banner::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--g1), var(--g2), #58CC02, var(--g1));
  background-size: 300% 100%;
  animation: laBorderGradient 3s linear infinite;
}
@keyframes laBorderGradient { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

.la-mascot { width: 48px; height: 48px; flex-shrink: 0; animation: mascotBounce 2s ease-in-out infinite; filter: drop-shadow(0 2px 8px rgba(249,200,67,.3)); }
.la-content { flex: 1; min-width: 0; }
.la-title { font-size: 14px; font-weight: 800; color: white; line-height: 1.2; }
.la-subtitle { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 2px; line-height: 1.3; }
.la-stats { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.la-stat { display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; }
.la-stat.fire { color: #F9C843; }
.la-stat.progress { color: #58CC02; }
.la-stat.time { color: #3B82F6; }
.la-close { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.1); border: none; color: rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; font-size: 14px; transition: all .15s var(--ease); }
.la-close:hover { background: rgba(255,255,255,.2); color: white; transform: scale(1.1); }
.la-brand { font-size: 11px; font-weight: 800; letter-spacing: .5px; background: linear-gradient(135deg, var(--g1), var(--g2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }


/* ==========================================================================
   14. MASCOT ADVANCED ANIMATIONS
   ========================================================================== */
.mascot-anim { display: inline-block; position: relative; transition: transform .3s var(--spring); }
.mascot-anim img { display: block; filter: drop-shadow(0 4px 12px rgba(0,0,0,.08)); transition: filter .3s ease; }

.mascot-idle-float {
  animation: mascotIdleFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 8px 20px rgba(249,200,67,.12));
}
@keyframes mascotIdleFloat {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 4px 12px rgba(0,0,0,.08)); }
  50%      { transform: translateY(-8px); filter: drop-shadow(0 12px 20px rgba(0,0,0,.06)); }
}

.mascot-idle-heartbeat { animation: mascotIdleHeartbeat 3s ease-in-out infinite; }
@keyframes mascotIdleHeartbeat {
  0%, 100% { transform: scale(1); }
  7%  { transform: scale(1.03); }
  14% { transform: scale(1); }
  21% { transform: scale(1.03); }
  28% { transform: scale(1); }
}

.mascot-bounce { animation: mascotJump .6s var(--spring); }
@keyframes mascotJump {
  0%   { transform: translateY(0) scale(1); }
  15%  { transform: translateY(10px) scale(1.08, .92); }
  35%  { transform: translateY(-35px) scale(.93, 1.07); }
  55%  { transform: translateY(-15px) scale(1.02, .98); }
  70%  { transform: translateY(-22px) scale(.98, 1.02); }
  85%  { transform: translateY(-5px) scale(1.01, .99); }
  100% { transform: translateY(0) scale(1); }
}

.mascot-shake { animation: mascotShake .5s var(--ease); }
@keyframes mascotShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  12% { transform: translateX(-10px) rotate(-4deg); }
  24% { transform: translateX(10px) rotate(4deg); }
  36% { transform: translateX(-8px) rotate(-3deg); }
  48% { transform: translateX(8px) rotate(3deg); }
  60% { transform: translateX(-5px) rotate(-2deg); }
  72% { transform: translateX(5px) rotate(1deg); }
  84% { transform: translateX(-2px) rotate(-.5deg); }
}

.mascot-celebrate { animation: mascotCeleb 1s var(--spring); }
@keyframes mascotCeleb {
  0%   { transform: scale(1) rotate(0); }
  12%  { transform: scale(1.35) rotate(-10deg); }
  25%  { transform: scale(1.1) rotate(10deg); }
  38%  { transform: scale(1.25) rotate(-7deg); }
  50%  { transform: scale(1.05) rotate(7deg); }
  65%  { transform: scale(1.15) rotate(-4deg); }
  80%  { transform: scale(1.02) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}

.mascot-think { animation: mascotThinkAnim 2.5s ease-in-out infinite; }
@keyframes mascotThinkAnim {
  0%, 100% { transform: rotate(0) translateY(0); }
  15% { transform: rotate(-6deg) translateY(-2px); }
  35% { transform: rotate(-3deg) translateY(-4px); }
  65% { transform: rotate(6deg) translateY(-3px); }
  85% { transform: rotate(3deg) translateY(-1px); }
}

.mascot-wave { animation: mascotWave .8s var(--ease); }
@keyframes mascotWave {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-12deg); } 30% { transform: rotate(12deg); }
  45% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); }
  75% { transform: rotate(-4deg); }
}

.mascot-pulse { animation: mascotPulseAnim 1.5s ease-in-out infinite; }
@keyframes mascotPulseAnim {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 4px 12px rgba(0,0,0,.08)); }
  50%      { transform: scale(1.06); filter: drop-shadow(0 8px 24px rgba(249,200,67,.25)); }
}

.mascot-entrance { animation: mascotEntrance .6s var(--spring) both; }
@keyframes mascotEntrance {
  from { opacity: 0; transform: translateY(40px) scale(.7); }
  60%  { transform: translateY(-10px) scale(1.08); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mascot-walk-right { animation: walkRight 4s linear forwards; }
@keyframes walkRight {
  0%   { transform: translateX(-120px) scaleX(1); opacity: 0; }
  5%   { opacity: 1; }
  10%  { transform: translateX(-80px) scaleX(1) translateY(-4px); }
  15%  { transform: translateX(-60px) scaleX(1) translateY(0); }
  20%  { transform: translateX(-40px) scaleX(1) translateY(-4px); }
  25%  { transform: translateX(-20px) scaleX(1) translateY(0); }
  30%  { transform: translateX(0) scaleX(1) translateY(-4px); }
  35%  { transform: translateX(0) scaleX(1) translateY(0); }
  100% { transform: translateX(0) scaleX(1) translateY(0); }
}

.mascot-walk-left { animation: walkLeft 4s linear forwards; }
@keyframes walkLeft {
  0%   { transform: translateX(120px) scaleX(-1); opacity: 0; }
  5%   { opacity: 1; }
  10%  { transform: translateX(80px) scaleX(-1) translateY(-4px); }
  15%  { transform: translateX(60px) scaleX(-1) translateY(0); }
  20%  { transform: translateX(40px) scaleX(-1) translateY(-4px); }
  25%  { transform: translateX(20px) scaleX(-1) translateY(0); }
  30%  { transform: translateX(0) scaleX(-1) translateY(-4px); }
  35%  { transform: translateX(0) scaleX(1) translateY(0); }
  100% { transform: translateX(0) scaleX(1) translateY(0); }
}

.mascot-peek-up { animation: peekUp 1s var(--spring) both; }
@keyframes peekUp {
  from { transform: translateY(80%) scale(.9); opacity: 0; }
  60%  { transform: translateY(-5%) scale(1.02); opacity: 1; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.mascot-peek-right { animation: peekRight .8s var(--spring) both; }
@keyframes peekRight {
  from { transform: translateX(100%) rotate(15deg); opacity: 0; }
  to   { transform: translateX(0) rotate(0); opacity: 1; }
}

.mascot-dance { animation: mascotDance 1.5s ease-in-out; }
@keyframes mascotDance {
  0%   { transform: translateY(0) rotate(0) scale(1); }
  8%   { transform: translateY(-22px) rotate(-10deg) scale(1.06); }
  16%  { transform: translateY(0) rotate(6deg) scale(1); }
  24%  { transform: translateY(-28px) rotate(-6deg) scale(1.08); }
  32%  { transform: translateY(0) rotate(10deg) scale(1); }
  40%  { transform: translateY(-20px) rotate(-12deg) scale(1.06); }
  48%  { transform: translateY(0) rotate(6deg) scale(1); }
  56%  { transform: translateY(-14px) rotate(-4deg) scale(1.03); }
  64%  { transform: translateY(0) rotate(4deg) scale(1); }
  76%  { transform: translateY(-6px) rotate(-2deg) scale(1.01); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}

.mascot-wiggle { animation: mascotWiggle .5s ease-in-out infinite; }
@keyframes mascotWiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-4deg) translateX(-3px); }
  40% { transform: rotate(4deg) translateX(3px); }
  60% { transform: rotate(-3deg) translateX(-2px); }
  80% { transform: rotate(3deg) translateX(2px); }
}

.mascot-nod { animation: mascotNod .6s ease-in-out; }
@keyframes mascotNod {
  0%, 100% { transform: translateY(0) rotate(0); }
  20% { transform: translateY(6px) rotate(4deg); }
  45% { transform: translateY(0) rotate(0); }
  70% { transform: translateY(6px) rotate(4deg); }
}

.mascot-spin { animation: mascotSpin .8s var(--spring); }
@keyframes mascotSpin {
  0%   { transform: rotate(0) scale(1); }
  40%  { transform: rotate(360deg) scale(1.2); }
  70%  { transform: rotate(600deg) scale(1.05); }
  100% { transform: rotate(720deg) scale(1); }
}

.mascot-heartbeat { animation: mascotHeartbeat 1.2s ease-in-out infinite; }
@keyframes mascotHeartbeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.12); }
  24% { transform: scale(1); }
  36% { transform: scale(1.12); }
  48% { transform: scale(1); }
}

.mascot-sleepy { animation: mascotSleepy 3s ease-in-out infinite; }
@keyframes mascotSleepy {
  0%, 100% { transform: rotate(0) translateY(0); }
  30% { transform: rotate(-5deg) translateY(3px); }
  60% { transform: rotate(-3deg) translateY(5px); }
}

.mascot-curious { animation: mascotCurious 1.5s ease-in-out infinite; }
@keyframes mascotCurious {
  0%, 100% { transform: translateX(0) rotate(0) scale(1); }
  50%      { transform: translateX(8px) rotate(5deg) scale(1.03); }
}

.mascot-bounce img { filter: drop-shadow(0 16px 24px rgba(0,0,0,.12)); }
.mascot-celebrate img { filter: drop-shadow(0 8px 24px rgba(249,200,67,.25)); }
.mascot-dance img { filter: drop-shadow(0 12px 24px rgba(88,204,2,.2)); }
.mascot-shake img { filter: drop-shadow(0 4px 8px rgba(229,62,62,.15)); }

/* Mascot glow effects */
.mascot-glow::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 150%; height: 150%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(249,200,67,.15) 0%, transparent 70%);
  border-radius: 50%; animation: glowPulse 2s ease-in-out infinite;
  pointer-events: none; z-index: -1;
}
@keyframes glowPulse {
  0%, 100% { opacity: .5; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}
.mascot-glow-green::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 150%; height: 150%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(88,204,2,.12) 0%, transparent 70%);
  border-radius: 50%; animation: glowPulse 2s ease-in-out infinite;
  pointer-events: none; z-index: -1;
}
.mascot-glow-red::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 150%; height: 150%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(229,62,62,.1) 0%, transparent 70%);
  border-radius: 50%; animation: glowPulse 1.5s ease-in-out infinite;
  pointer-events: none; z-index: -1;
}

.mascot-anim img, .mascot-anim video { background: transparent !important; border-radius: 0 !important; }
.mascot-anim { border-radius: 0 !important; overflow: visible !important; }

/* Speech bubble */
.mascot-speech-bubble {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  background: white; padding: 8px 16px; border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.03);
  font-size: 14px; font-weight: 700; font-family: 'DM Sans', sans-serif;
  color: var(--ink, #1A1713); white-space: nowrap;
  z-index: 5; animation: speechBubbleIn .4s var(--spring) both;
}
.mascot-speech-bubble::after {
  content: ''; position: absolute; bottom: -6px; left: 50%;
  width: 12px; height: 12px; background: white;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 2px 2px 4px rgba(0,0,0,.05);
}
@keyframes speechBubbleIn {
  from { opacity: 0; transform: translateX(-50%) scale(.6) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
}
.mascot-speech-bubble.correct { background: #ECFDF5; color: #059669; }
.mascot-speech-bubble.correct::after { background: #ECFDF5; }
.mascot-speech-bubble.wrong { background: #FEF2F2; color: #DC2626; }
.mascot-speech-bubble.wrong::after { background: #FEF2F2; }

/* Typing dots */
.mascot-speech-typing { display: flex; gap: 4px; padding: 4px 8px; }
.mascot-speech-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink30); animation: typingDot 1.2s ease-in-out infinite; }
.mascot-speech-typing span:nth-child(2) { animation-delay: .2s; }
.mascot-speech-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-6px); opacity: 1; }
}


/* ==========================================================================
   15. FLOATING BACKGROUND PARTICLES
   ========================================================================== */
.tasks-bg-floats { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.tasks-bg-floats .float-item { position: absolute; font-size: 24px; opacity: .06; animation: floatDrift var(--dur, 12s) ease-in-out infinite; pointer-events: none; }
.float-item { position: absolute; opacity: .06; animation: floatDrift var(--dur, 12s) ease-in-out infinite; pointer-events: none; }

@keyframes floatDrift {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  20% { transform: translateY(-18px) rotate(4deg) scale(1.04); }
  40% { transform: translateY(-10px) rotate(-5deg) scale(.97); }
  60% { transform: translateY(-22px) rotate(3deg) scale(1.03); }
  80% { transform: translateY(-6px) rotate(-2deg) scale(.99); }
}

.float-item.float-slow { animation-duration: 18s; }
.float-item.float-fast { animation-duration: 8s; }

@keyframes floatDrift2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(10px, -15px) rotate(8deg); }
  50% { transform: translate(-5px, -25px) rotate(-3deg); }
  75% { transform: translate(8px, -12px) rotate(5deg); }
}
.float-item.float-sway { animation-name: floatDrift2; }

@keyframes floatDrift3 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(12px, -12px) rotate(90deg); }
  50%  { transform: translate(0, -20px) rotate(180deg); }
  75%  { transform: translate(-12px, -12px) rotate(270deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}
.float-item.float-orbit { animation-name: floatDrift3; }

#view-tasks::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: 300px;
  background: linear-gradient(180deg, rgba(249,200,67,.04) 0%, transparent 100%);
  pointer-events: none; z-index: 0;
}
#view-tasks > * { position: relative; z-index: 1; }


/* ==========================================================================
   16. TOAST NOTIFICATIONS
   ========================================================================== */
.toast-notification {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 50%; transform: translateX(-50%);
  z-index: 10003; padding: 12px 20px; border-radius: 14px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 40px);
  animation: toastIn .5s var(--spring) both;
  box-shadow: 0 8px 32px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08);
  pointer-events: auto;
}
.toast-notification.dismissing { animation: toastOut .3s var(--ease) both; }

@keyframes toastIn {
  from { transform: translateX(-50%) translateY(-30px) scale(.9); opacity: 0; }
  60%  { transform: translateX(-50%) translateY(4px) scale(1.02); opacity: 1; }
  to   { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}
@keyframes toastOut {
  from { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
  to   { transform: translateX(-50%) translateY(-30px) scale(.9); opacity: 0; }
}

.toast-notification::after {
  content: ''; position: absolute; bottom: 0; left: 8px; right: 8px;
  height: 3px; border-radius: 0 0 14px 14px;
  background: currentColor; opacity: .2;
  animation: toastProgress var(--toast-dur, 3s) linear both;
  transform-origin: left;
}
@keyframes toastProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.toast-success { background: #ECFDF5; color: #059669; border: 1.5px solid rgba(5,150,105,.15); }
.toast-error   { background: #FEF2F2; color: #DC2626; border: 1.5px solid rgba(220,38,38,.15); }
.toast-info    { background: #EFF6FF; color: #2563EB; border: 1.5px solid rgba(37,99,235,.15); }
.toast-warning { background: #FFFBEB; color: #D97706; border: 1.5px solid rgba(217,119,6,.15); }
.toast-streak  { background: linear-gradient(135deg, #1A1713, #2D2520); color: white; border: none; }

.toast-icon { font-size: 18px; flex-shrink: 0; animation: toastIconPop .3s var(--bounce) .15s both; }
@keyframes toastIconPop { from { transform: scale(0) rotate(-15deg); } to { transform: scale(1) rotate(0); } }


/* ==========================================================================
   17-21. CARDS, SCROLLS, LOADING, INTERACTIONS
   ========================================================================== */

/* Card entrances */
.p-card { animation: pCardIn .4s var(--spring) both; }
.p-card:nth-child(1)  { animation-delay: .02s; }
.p-card:nth-child(2)  { animation-delay: .06s; }
.p-card:nth-child(3)  { animation-delay: .10s; }
.p-card:nth-child(4)  { animation-delay: .14s; }
.p-card:nth-child(5)  { animation-delay: .18s; }
.p-card:nth-child(6)  { animation-delay: .22s; }
.p-card:nth-child(7)  { animation-delay: .26s; }
.p-card:nth-child(8)  { animation-delay: .30s; }
.p-card:nth-child(9)  { animation-delay: .34s; }
.p-card:nth-child(10) { animation-delay: .38s; }

@keyframes pCardIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Stagger utilities */
.stagger-1  { animation-delay: .03s !important; }
.stagger-2  { animation-delay: .06s !important; }
.stagger-3  { animation-delay: .09s !important; }
.stagger-4  { animation-delay: .12s !important; }
.stagger-5  { animation-delay: .15s !important; }
.stagger-6  { animation-delay: .18s !important; }
.stagger-7  { animation-delay: .21s !important; }
.stagger-8  { animation-delay: .24s !important; }
.stagger-9  { animation-delay: .27s !important; }
.stagger-10 { animation-delay: .30s !important; }

/* Animation utilities */
.anim-fade-in      { animation: fadeIn .3s var(--ease) both; }
.anim-fade-up      { animation: fadeInUp .3s var(--ease) both; }
.anim-fade-down    { animation: fadeInDown .3s var(--ease) both; }
.anim-fade-left    { animation: fadeInLeft .3s var(--ease) both; }
.anim-fade-right   { animation: fadeInRight .3s var(--ease) both; }
.anim-scale-in     { animation: scaleIn .3s var(--spring) both; }
.anim-scale-bounce { animation: scaleInBounce .4s var(--spring) both; }
.anim-pop          { animation: tilePopIn .4s var(--spring) both; }
.anim-slide-right  { animation: slideInRight .4s var(--ease) both; }
.anim-slide-left   { animation: slideInLeft .4s var(--ease) both; }
.anim-pulse        { animation: pulse 2s ease-in-out infinite; }
.anim-gentle-pulse { animation: gentlePulse 3s ease-in-out infinite; }

/* Scroll fades */
.scroll-fade-container { position: relative; overflow: hidden; }
.scroll-fade-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 20px; background: linear-gradient(180deg, var(--cream, #FFFDF7) 0%, transparent 100%); pointer-events: none; z-index: 10; opacity: 0; transition: opacity .2s var(--ease); }
.scroll-fade-container::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 20px; background: linear-gradient(0deg, var(--cream, #FFFDF7) 0%, transparent 100%); pointer-events: none; z-index: 10; opacity: 0; transition: opacity .2s var(--ease); }
.scroll-fade-container.scrolled-top::before { opacity: 1; }
.scroll-fade-container.scrolled-bottom::after { opacity: 1; }
.scroll-h-fade { position: relative; }
.scroll-h-fade::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 20px; background: linear-gradient(-90deg, var(--cream, #FFFDF7) 0%, transparent 100%); pointer-events: none; z-index: 5; }

/* Skeleton loading */
.skeleton { background: linear-gradient(90deg, rgba(194,186,176,.12) 25%, rgba(194,186,176,.2) 50%, rgba(194,186,176,.12) 75%); background-size: 200% 100%; animation: skeletonShimmer 1.5s ease-in-out infinite; border-radius: 8px; }
@keyframes skeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text.short { width: 60%; }
.skeleton-title { height: 22px; margin-bottom: 12px; width: 80%; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-card { height: 80px; margin-bottom: 10px; border-radius: 16px; }
.skeleton-tile { height: 140px; border-radius: 20px; }

/* Spinners */
.spinner { width: 28px; height: 28px; border: 3px solid rgba(194,186,176,.2); border-top: 3px solid var(--g2, #F07020); border-radius: 50%; animation: rotate360 .8s linear infinite; }
.spinner-sm { width: 18px; height: 18px; border-width: 2px; }
.spinner-lg { width: 40px; height: 40px; border-width: 4px; }

.loading-dots { display: flex; gap: 6px; align-items: center; }
.loading-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--g2, #F07020); animation: loadingDot 1.2s ease-in-out infinite; }
.loading-dots span:nth-child(2) { animation-delay: .15s; }
.loading-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes loadingDot {
  0%, 60%, 100% { transform: scale(.6); opacity: .4; }
  30% { transform: scale(1); opacity: 1; }
}

/* Hover/press utilities */
.hover-lift { transition: transform .2s var(--spring), box-shadow .2s var(--ease); }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.hover-scale { transition: transform .2s var(--spring); }
.hover-scale:hover { transform: scale(1.03); }
.hover-glow { transition: box-shadow .3s var(--ease); }
.hover-glow:hover { box-shadow: 0 0 24px rgba(249,200,67,.15); }
.press-3d { transition: all .1s ease; border-bottom-width: 4px; }
.press-3d:active { border-bottom-width: 2px; transform: translateY(2px); transition-duration: .04s; }

.icon-bounce:hover { animation: iconBounce .4s var(--spring); }
@keyframes iconBounce {
  0% { transform: translateY(0); } 30% { transform: translateY(-4px); }
  50% { transform: translateY(0); } 70% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

.count-up { animation: countFadeIn .5s var(--ease) both; }
@keyframes countFadeIn { from { opacity: 0; transform: translateY(8px) scale(.8); } to { opacity: 1; transform: translateY(0) scale(1); } }

.text-highlight {
  background: linear-gradient(120deg, rgba(249,200,67,.15) 0%, rgba(249,200,67,.15) 100%);
  background-repeat: no-repeat; background-size: 0% 100%; background-position: 0 88%;
  animation: textHighlight .6s ease-out .2s forwards;
}
@keyframes textHighlight { to { background-size: 100% 100%; } }


/* ==========================================================================
   22-27. LANDSCAPE, SAFE AREAS, MODALS, MISC
   ========================================================================== */

/* Landscape blocker */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .landscape-blocker {
    display: flex !important; position: fixed; inset: 0; z-index: 99999;
    background: #FFFDF7; align-items: center; justify-content: center;
    flex-direction: column; gap: 16px; padding: 20px;
    animation: fadeIn .3s var(--ease) both;
  }
  .landscape-blocker-icon { font-size: 48px; animation: rotatePhone 2s ease-in-out infinite; }
  @keyframes rotatePhone { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(90deg); } 75% { transform: rotate(0deg); } }
  .landscape-blocker-text { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 700; color: var(--ink); text-align: center; }
}
@media screen and (orientation: landscape) {
  .p-view, .tasks-fullscreen { max-width: 500px; margin: 0 auto; }
}

/* Safe areas */
.safe-area-top { padding-top: env(safe-area-inset-top, 0px); }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
.safe-area-all { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.fixed-bottom { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.fixed-top { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }

/* Modal overlay */
.modal-overlay { position: fixed; inset: 0; background: rgba(26,23,19,.5); z-index: 9999; animation: modalOverlayIn .25s var(--ease) both; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-overlay.closing { animation: modalOverlayOut .2s var(--ease) both; }
@keyframes modalOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalOverlayOut { from { opacity: 1; } to { opacity: 0; } }

.modal-content {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000;
  background: #FFFDF7; border-radius: 24px 24px 0 0;
  padding: 24px 20px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  max-height: 85vh; overflow-y: auto;
  animation: modalSlideUp .4s var(--spring) both;
}
.modal-content.closing { animation: modalSlideDown .25s var(--ease) both; }
@keyframes modalSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes modalSlideDown { from { transform: translateY(0); } to { transform: translateY(100%); } }
.modal-handle { width: 36px; height: 4px; border-radius: 2px; background: rgba(194,186,176,.3); margin: 0 auto 16px; }

.modal-center {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 10000; background: #FFFDF7; border-radius: 24px;
  padding: 28px; max-width: 400px; width: calc(100vw - 40px);
  max-height: 80vh; overflow-y: auto;
  animation: modalCenterIn .4s var(--spring) both;
  box-shadow: 0 24px 64px rgba(0,0,0,.2);
}
.modal-center.closing { animation: modalCenterOut .2s var(--ease) both; }
@keyframes modalCenterIn { from { transform: translate(-50%, -50%) scale(.85); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes modalCenterOut { from { transform: translate(-50%, -50%) scale(1); opacity: 1; } to { transform: translate(-50%, -50%) scale(.85); opacity: 0; } }

/* Empty state */
.empty-state { text-align: center; padding: 40px 20px; animation: fadeInUp .5s var(--ease) both; }
.empty-state-icon { font-size: 56px; margin-bottom: 16px; display: inline-block; animation: mascotIdleFloat 3s ease-in-out infinite; }
.empty-state-title { font-family: 'DM Sans', sans-serif; font-size: 20px; font-weight: 800; color: var(--ink); }
.empty-state-desc { font-size: 14px; color: var(--ink60); margin-top: 6px; line-height: 1.5; }
.empty-state-cta { margin-top: 20px; }


/* ==========================================================================
   28-35. MILESTONES, SPARKLES, STATS, PATH, BADGES
   ========================================================================== */

/* Milestone celebration */
.milestone-overlay { position: fixed; inset: 0; z-index: 10005; background: rgba(26,23,19,.7); display: flex; align-items: center; justify-content: center; animation: fadeIn .3s var(--ease) both; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.milestone-card { background: #FFFDF7; border-radius: 28px; padding: 32px 28px; text-align: center; max-width: 320px; width: calc(100vw - 48px); animation: milestoneCardIn .6s var(--spring) .1s both; box-shadow: 0 24px 64px rgba(0,0,0,.2); position: relative; overflow: hidden; }
@keyframes milestoneCardIn { from { transform: scale(.5) translateY(40px); opacity: 0; } 60% { transform: scale(1.05) translateY(-10px); opacity: 1; } to { transform: scale(1) translateY(0); opacity: 1; } }
.milestone-card::before { content: ''; position: absolute; top: 30%; left: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(249,200,67,.2) 0%, transparent 70%); border-radius: 50%; animation: milestoneGlow 2s ease-in-out infinite; pointer-events: none; }
@keyframes milestoneGlow { 0%, 100% { opacity: .4; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .8; transform: translate(-50%, -50%) scale(1.3); } }
.milestone-number { font-family: 'DM Sans', sans-serif; font-size: 72px; font-weight: 900; background: linear-gradient(135deg, var(--g1), var(--g2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; animation: milestoneNumIn .8s var(--spring) .3s both; position: relative; z-index: 1; }
@keyframes milestoneNumIn { from { transform: scale(.2) rotate(-15deg); opacity: 0; } 60% { transform: scale(1.15) rotate(5deg); opacity: 1; } to { transform: scale(1) rotate(0); opacity: 1; } }

/* Sparkles */
.sparkle { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--g1); animation: sparkleFade var(--sparkle-dur, 1s) ease-out both; pointer-events: none; }
@keyframes sparkleFade { 0% { transform: scale(0) translate(0, 0); opacity: 1; } 50% { transform: scale(1.5) translate(var(--sx, 10px), var(--sy, -15px)); opacity: .8; } 100% { transform: scale(0) translate(var(--sx2, 20px), var(--sy2, -30px)); opacity: 0; } }

.star-burst { position: absolute; top: 50%; left: 50%; width: 0; height: 0; pointer-events: none; }
.star-burst-ray { position: absolute; top: 0; left: 0; width: 3px; height: 20px; background: linear-gradient(to bottom, var(--g1), transparent); transform-origin: center center; animation: starBurstRay .6s var(--ease) both; }
@keyframes starBurstRay { from { transform: rotate(var(--ray-angle, 0deg)) translateY(0) scaleY(0); opacity: 1; } to { transform: rotate(var(--ray-angle, 0deg)) translateY(-30px) scaleY(1); opacity: 0; } }

/* Notification badge */
.notification-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: white; font-size: 11px; font-weight: 800; animation: badgeBounceIn .4s var(--spring) both; }
@keyframes badgeBounceIn { from { transform: scale(0); } 60% { transform: scale(1.3); } to { transform: scale(1); } }
.notification-badge.pulse { animation: badgeBounceIn .4s var(--spring) both, badgePulse 2s ease-in-out infinite 1s; }
@keyframes badgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(229,62,62,.3); } 50% { box-shadow: 0 0 0 6px rgba(229,62,62,0); } }

/* Toggle switch */
.toggle-switch { width: 48px; height: 28px; border-radius: 14px; background: rgba(194,186,176,.3); border: none; cursor: pointer; position: relative; transition: background .2s var(--ease); -webkit-tap-highlight-color: transparent; }
.toggle-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: white; box-shadow: 0 2px 4px rgba(0,0,0,.1); transition: transform .2s var(--spring); }
.toggle-switch.on { background: #58CC02; }
.toggle-switch.on::after { transform: translateX(20px); }

/* Shake effects */
.shake-error { animation: shakeError .5s var(--ease); }
@keyframes shakeError { 0%, 100% { transform: translateX(0); } 10% { transform: translateX(-8px); } 20% { transform: translateX(8px); } 30% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 50% { transform: translateX(-4px); } 60% { transform: translateX(4px); } 70% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.shake-attention { animation: shakeAttention .6s var(--ease); }
@keyframes shakeAttention { 0%, 100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-3px) rotate(-1deg); } 40% { transform: translateX(3px) rotate(1deg); } 60% { transform: translateX(-2px) rotate(-.5deg); } 80% { transform: translateX(2px) rotate(.5deg); } }

/* Tooltip */
.tooltip { position: absolute; padding: 6px 12px; border-radius: 8px; background: var(--ink); color: white; font-size: 12px; font-weight: 600; white-space: nowrap; z-index: 1000; animation: tooltipIn .2s var(--spring) both; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.tooltip::after { content: ''; position: absolute; width: 8px; height: 8px; background: var(--ink); transform: rotate(45deg); }
.tooltip.top::after { bottom: -4px; left: 50%; margin-left: -4px; }
.tooltip.bottom::after { top: -4px; left: 50%; margin-left: -4px; }
@keyframes tooltipIn { from { opacity: 0; transform: scale(.8) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* Stat counters */
.stat-number { font-family: 'DM Sans', sans-serif; font-weight: 900; display: inline-block; animation: statCountIn .6s var(--spring) both; }
@keyframes statCountIn { from { opacity: 0; transform: scale(.5) translateY(10px); } 60% { transform: scale(1.1) translateY(-3px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.stat-increment { animation: statIncrement .4s var(--bounce); }
@keyframes statIncrement { 0% { transform: scale(1); } 30% { transform: scale(1.15); color: #58CC02; } 60% { transform: scale(.95); } 100% { transform: scale(1); } }
.stat-decrement { animation: statDecrement .4s var(--ease); }
@keyframes statDecrement { 0% { transform: scale(1); } 30% { transform: scale(.85); color: var(--red); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* Rewards */
.coin-reward { display: inline-block; animation: coinSpin 1s var(--spring) both; }
@keyframes coinSpin { 0% { transform: scale(0) rotateY(0); opacity: 0; } 50% { transform: scale(1.3) rotateY(180deg); opacity: 1; } 100% { transform: scale(1) rotateY(360deg); opacity: 1; } }
.heart-reward { display: inline-block; animation: heartPop .6s var(--spring) both; }
@keyframes heartPop { 0% { transform: scale(0); } 40% { transform: scale(1.4); } 60% { transform: scale(.9); } 80% { transform: scale(1.1); } 100% { transform: scale(1); } }
.star-reward { display: inline-block; animation: starTwinkle .8s var(--spring) both; }
@keyframes starTwinkle { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 50% { transform: scale(1.3) rotate(15deg); opacity: 1; } 70% { transform: scale(.9) rotate(-5deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }

/* Learning path */
.path-node { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; position: relative; transition: all .2s var(--spring); cursor: pointer; }
.path-node.completed { background: #58CC02; box-shadow: 0 4px 0 #46A302, 0 6px 16px rgba(88,204,2,.2); animation: pathNodeComplete .5s var(--spring) both; }
.path-node.current { background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 4px 0 #D4880A, 0 6px 16px rgba(249,200,67,.25); animation: pathNodeCurrent 2s ease-in-out infinite; }
.path-node.locked { background: rgba(194,186,176,.2); box-shadow: 0 4px 0 rgba(194,186,176,.35); opacity: .5; cursor: not-allowed; }
@keyframes pathNodeComplete { from { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.1); } to { transform: scale(1); opacity: 1; } }
@keyframes pathNodeCurrent { 0%, 100% { box-shadow: 0 4px 0 #D4880A, 0 6px 16px rgba(249,200,67,.2); } 50% { box-shadow: 0 4px 0 #D4880A, 0 6px 24px rgba(249,200,67,.35); } }
.path-node:active:not(.locked) { box-shadow: 0 2px 0 currentColor; transform: translateY(2px); transition-duration: .04s; }
.path-connector { width: 4px; background: rgba(194,186,176,.2); margin: 0 auto; transition: background .5s var(--ease); }
.path-connector.completed { background: #58CC02; }

/* Achievements & progress */
.progress-card { background: white; border-radius: 16px; padding: 16px; border: 2px solid rgba(194,186,176,.12); animation: fadeInUp .4s var(--ease) both; position: relative; overflow: hidden; }
.progress-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.progress-ring svg { transform: rotate(-90deg); }
.progress-ring circle { transition: stroke-dashoffset .8s cubic-bezier(.22,1,.36,1); }
.progress-ring-value { position: absolute; font-family: 'DM Sans', sans-serif; font-weight: 900; color: var(--ink); }
.achievement-badge { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; position: relative; animation: badgeUnlock .8s var(--spring) both; }
.achievement-badge.locked { filter: grayscale(1) opacity(.4); animation: none; }
@keyframes badgeUnlock { from { transform: scale(0) rotate(-180deg); opacity: 0; } 60% { transform: scale(1.2) rotate(15deg); opacity: 1; } to { transform: scale(1) rotate(0); opacity: 1; } }
.achievement-badge.new::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: transparent; box-shadow: 0 0 0 2px rgba(249,200,67,.3), 0 0 16px rgba(249,200,67,.2); animation: badgeNewGlow 2s ease-in-out infinite; }
@keyframes badgeNewGlow { 0%, 100% { box-shadow: 0 0 0 2px rgba(249,200,67,.2), 0 0 12px rgba(249,200,67,.1); } 50% { box-shadow: 0 0 0 4px rgba(249,200,67,.3), 0 0 24px rgba(249,200,67,.25); } }

/* Gradient text */
.text-gradient-gold { background: linear-gradient(135deg, var(--g1), var(--g2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-gradient-green { background: linear-gradient(135deg, #58CC02, #78D820); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-gradient-purple { background: linear-gradient(135deg, #8B5CF6, #6D28D9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Animated gradient border */
.border-gradient-animated { position: relative; border: 2px solid transparent; }
.border-gradient-animated::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: linear-gradient(90deg, var(--g1), var(--g2), #58CC02, var(--g1)); background-size: 300% 100%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: borderRotate 3s linear infinite; pointer-events: none; }
@keyframes borderRotate { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

/* Step dots */
.step-indicator { display: flex; align-items: center; justify-content: center; gap: 6px; }
.step-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(194,186,176,.3); transition: all .3s var(--spring); }
.step-dot.completed { background: #58CC02; animation: stepDotComplete .3s var(--spring); }
.step-dot.current { width: 24px; border-radius: 4px; background: linear-gradient(90deg, var(--g1), var(--g2)); }
@keyframes stepDotComplete { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } }

/* Flip card */
.flip-card { perspective: 1000px; }
.flip-card-inner { position: relative; transition: transform .6s var(--spring); transform-style: preserve-3d; }
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 16px; }
.flip-card-back { transform: rotateY(180deg); }

/* Page transitions */
.page-enter-right { animation: pageEnterRight .4s var(--ease) both; }
@keyframes pageEnterRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.page-exit-left { animation: pageExitLeft .3s var(--ease) both; }
@keyframes pageExitLeft { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-30%); opacity: 0; } }
.page-enter-left { animation: pageEnterLeft .4s var(--ease) both; }
@keyframes pageEnterLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.page-exit-right { animation: pageExitRight .3s var(--ease) both; }
@keyframes pageExitRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(30%); opacity: 0; } }
.page-fade-in { animation: fadeIn .3s var(--ease) both; }
.page-fade-out { animation: fadeOut .2s var(--ease) both; }

/* Answer feedback */
.correct-flash { animation: correctFlash .5s ease-out; }
@keyframes correctFlash { 0% { background-color: rgba(88,204,2,.2); } 100% { background-color: transparent; } }
.wrong-flash { animation: wrongFlash .5s ease-out; }
@keyframes wrongFlash { 0% { background-color: rgba(229,62,62,.15); } 100% { background-color: transparent; } }
.check-draw { stroke-dasharray: 40; stroke-dashoffset: 40; animation: drawCheck .5s ease-out .2s forwards; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
.x-draw { stroke-dasharray: 30; stroke-dashoffset: 30; animation: drawX .4s ease-out .2s forwards; }
@keyframes drawX { to { stroke-dashoffset: 0; } }

/* Level up */
.level-up-effect { animation: levelUpBurst .8s var(--spring) both; }
@keyframes levelUpBurst { 0% { transform: scale(.5); opacity: 0; } 30% { transform: scale(1.4); opacity: 1; } 50% { transform: scale(.9); } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
.level-up-ring { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; border: 3px solid var(--g1); border-radius: 50%; transform: translate(-50%, -50%) scale(0); animation: levelUpRing .8s ease-out both; pointer-events: none; }
@keyframes levelUpRing { from { transform: translate(-50%, -50%) scale(0); opacity: 1; } to { transform: translate(-50%, -50%) scale(3); opacity: 0; } }

/* Progress bar linear (subject) */
.subject-progress-linear { height: 8px; background: rgba(194,186,176,.15); border-radius: 4px; overflow: hidden; position: relative; }
.subject-progress-linear-fill { height: 100%; border-radius: 4px; transition: width .8s cubic-bezier(.22,1,.36,1); position: relative; }
.subject-progress-linear-fill::after { content: ''; position: absolute; top: 1px; right: 3px; width: 25%; height: 3px; background: rgba(255,255,255,.3); border-radius: 2px; }
.subject-progress-linear-fill::before { content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: shimmerSweep 2.5s ease-in-out infinite; pointer-events: none; }

/* Daily challenge */
.daily-challenge-card { background: linear-gradient(135deg, rgba(249,200,67,.08), rgba(240,112,32,.05)); border: 2px solid rgba(249,200,67,.15); border-radius: 20px; padding: 20px; position: relative; overflow: hidden; animation: dailyCardIn .5s var(--spring) both; }
@keyframes dailyCardIn { from { opacity: 0; transform: translateY(20px) scale(.95); } 60% { transform: translateY(-4px) scale(1.01); } to { opacity: 1; transform: translateY(0) scale(1); } }
.daily-timer { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 800; color: var(--g2); display: flex; align-items: center; gap: 4px; }
.daily-timer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g2); animation: timerDotPulse 1s ease-in-out infinite; }
@keyframes timerDotPulse { 0%, 100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.3); opacity: 1; } }

/* Glassmorphism */
.glass { background: rgba(255,253,247,.75); backdrop-filter: blur(12px) saturate(1.5); -webkit-backdrop-filter: blur(12px) saturate(1.5); border: 1px solid rgba(255,255,255,.3); }
.glass-dark { background: rgba(26,23,19,.75); backdrop-filter: blur(12px) saturate(1.5); -webkit-backdrop-filter: blur(12px) saturate(1.5); border: 1px solid rgba(255,255,255,.08); }

/* Scroll hint */
.scroll-hint { display: flex; justify-content: center; padding: 12px 0; opacity: .4; animation: scrollHintBounce 2s ease-in-out infinite; }
@keyframes scrollHintBounce { 0%, 100% { transform: translateY(0); opacity: .3; } 50% { transform: translateY(6px); opacity: .6; } }
.scroll-hint-arrow { width: 24px; height: 24px; border-right: 2px solid var(--ink30); border-bottom: 2px solid var(--ink30); transform: rotate(45deg); }

/* Ripple */
@keyframes rippleFade { 0% { transform: scale(0); opacity: .4; } 100% { transform: scale(4); opacity: 0; } }
.ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.2); animation: rippleFade .6s var(--ease) forwards; pointer-events: none; }
.ripple-dark { background: rgba(0,0,0,.06); }

/* Exam mode */
.exam-mode-header { background: linear-gradient(135deg, #1A1713, #2D2520); color: white; padding: 16px 20px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); display: flex; align-items: center; gap: 12px; animation: fadeInDown .3s var(--ease) both; }
.exam-timer { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 800; color: white; padding: 6px 14px; border-radius: 10px; background: rgba(255,255,255,.1); }
.exam-timer.warning { background: rgba(229,62,62,.2); color: #FCA5A5; animation: examTimerWarn 1s ease-in-out infinite; }
@keyframes examTimerWarn { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }


/* ==========================================================================
   50. FINAL — REDUCED MOTION (must be last)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fs-progress-fill { transition: width .01ms !important; }
  .toggle-switch::after { transition: transform .01ms !important; }
  .tasks-bg-floats, .float-item, .confetti-particle, .sparkle, .star-burst, .star-burst-ray { display: none !important; }
  .nav-tile::before, .fs-progress-fill::before, .fs-continue-btn::before, .lb-invite-btn::before, .celeb-streak-card::before { display: none !important; }
}

/* ==========================================================================
   CYCLE 1 IMPROVEMENTS — Design Quality Orchestrator
   ========================================================================== */

/* ── Language Level Map — Dotted Path Connectors ────── */
.lang-path-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  position: relative;
}
.lang-path-connector {
  display: flex;
  justify-content: center;
  height: 32px;
  opacity: .7;
}
.lang-path-node {
  position: relative;
  z-index: 2;
}
.lang-lesson-circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: none;
  font-size: 24px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s ease, box-shadow .1s ease;
  position: relative;
}
.lang-lesson-circle.completed::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(88,204,2,.2);
  animation: langCircleGlow 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes langCircleGlow {
  0%, 100% { border-color: rgba(88,204,2,.15); }
  50% { border-color: rgba(88,204,2,.35); }
}
.lang-lesson-circle:active:not([disabled]) {
  border-bottom-width: 2px !important;
  transform: translateY(2px);
  transition-duration: .04s;
}

/* ── Leaderboard Rows — Premium Background ──────────── */
.lb-row {
  background: white;
  border: 1px solid rgba(237,232,223,.5);
  box-shadow: 0 1px 3px rgba(26,23,19,.04);
}
.lb-row:hover {
  background: rgba(249,200,67,.03);
  transform: translateX(4px);
  box-shadow: 0 3px 12px rgba(26,23,19,.06);
}

/* ── Lektura Detail Cards — Premium Styling ─────────── */
.lektura-character-card {
  padding: 16px 18px;
  background: white;
  border-radius: 16px;
  border: 1.5px solid rgba(237,232,223,.5);
  border-bottom: 3px solid rgba(237,232,223,.3);
  margin-bottom: 10px;
  transition: all .15s ease;
  animation: fadeInUp .3s var(--ease) both;
}
.lektura-character-card:hover {
  border-color: rgba(229,62,62,.2);
  border-bottom-color: rgba(229,62,62,.3);
  box-shadow: 0 4px 16px rgba(229,62,62,.06);
  transform: translateY(-2px);
}
.lektura-character-card:nth-child(1) { animation-delay: .02s; }
.lektura-character-card:nth-child(2) { animation-delay: .06s; }
.lektura-character-card:nth-child(3) { animation-delay: .10s; }
.lektura-character-card:nth-child(4) { animation-delay: .14s; }
.lektura-character-card:nth-child(5) { animation-delay: .18s; }

.lektura-character-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.lektura-character-name::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  flex-shrink: 0;
}
.lektura-character-desc {
  font-size: 13px;
  color: var(--ink60);
  line-height: 1.65;
  margin-top: 6px;
  padding-left: 16px;
}

/* ── Poem Text Container — Literary Premium ─────────── */
.poem-text-container {
  padding: 24px;
  background: linear-gradient(145deg, rgba(159,122,234,.04) 0%, rgba(159,122,234,.02) 100%);
  border-radius: 20px;
  border: 1.5px solid rgba(159,122,234,.12);
  margin-bottom: 16px;
  white-space: pre-line;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink);
  font-style: italic;
  position: relative;
  overflow: hidden;
}
.poem-text-container::before {
  content: '\201C';
  position: absolute;
  top: 8px; left: 12px;
  font-size: 72px;
  font-family: 'Cormorant Garamond', serif;
  color: rgba(159,122,234,.1);
  line-height: 1;
  pointer-events: none;
}
.poem-text-container::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, #9F7AEA, #805AD5);
  border-radius: 4px 0 0 4px;
}

/* ── Quote Cards — Premium Upgrade ──────────────────── */
.lektura-quote-card {
  padding: 18px 20px;
  background: linear-gradient(145deg, rgba(159,122,234,.05), rgba(159,122,234,.02));
  border-left: 4px solid #9F7AEA;
  border-radius: 0 16px 16px 0;
  margin-bottom: 12px;
  transition: all .15s ease;
  animation: fadeInUp .3s var(--ease) both;
}
.lektura-quote-card:hover {
  background: linear-gradient(145deg, rgba(159,122,234,.08), rgba(159,122,234,.03));
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(159,122,234,.08);
}
.lektura-quote-text {
  font-size: 14px;
  font-style: italic;
  color: var(--ink);
  line-height: 1.7;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
}
.lektura-quote-context {
  font-size: 12px;
  color: var(--ink60);
  margin-top: 8px;
  font-family: 'DM Sans', sans-serif;
}

/* ── Language Tile Landmark — Pulse Animation ───────── */
.lang-tile-landmark {
  animation: landmarkFloat 4s ease-in-out infinite;
}
@keyframes landmarkFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: .15; }
  50% { transform: translateY(-4px) scale(1.05); opacity: .2; }
}

/* Duplicate removed — active tab styled above in section 36 */

/* ==========================================================================
   CYCLE 2 IMPROVEMENTS — Design Quality Orchestrator
   ========================================================================== */

/* ── Invite Button Shimmer ──────────────────────────── */
.invite-btn-premium {
  position: relative;
  overflow: hidden;
}
.invite-btn-premium::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.2) 45%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.2) 55%, transparent 100%);
  animation: btnShimmer 3s ease-in-out infinite;
  pointer-events: none;
}

/* ── Ranking Section Title — Premium Label ──────────── */
.lb-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}
.lb-section-title::before,
.lb-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194,186,176,.3), transparent);
}

/* ── Podium Floor Effect ────────────────────────────── */
.lb-podium::after {
  content: '';
  position: absolute;
  bottom: 0; left: -10%; right: -10%;
  height: 8px;
  background: linear-gradient(90deg, transparent, rgba(194,186,176,.15) 20%, rgba(194,186,176,.2) 50%, rgba(194,186,176,.15) 80%, transparent);
  border-radius: 50%;
  z-index: 0;
}

/* ── Podium Medal Shine ─────────────────────────────── */
.lb-podium-medal {
  position: relative;
}
.lb-podium-place.first .lb-podium-medal::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,.2) 0%, transparent 70%);
  animation: medalGlow 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes medalGlow {
  0%, 100% { opacity: .3; transform: scale(1); }
  50% { opacity: .7; transform: scale(1.15); }
}

/* ── Leaderboard Row Premium Background ─────────────── */
.lb-row {
  background: white;
  border: 1px solid rgba(237,232,223,.4);
  box-shadow: 0 1px 3px rgba(26,23,19,.04);
  border-radius: 14px;
  margin-bottom: 6px;
}
.lb-row:hover {
  background: rgba(249,200,67,.03);
  transform: translateX(4px);
  box-shadow: 0 3px 12px rgba(26,23,19,.06);
}

/* ── Language Tile Landmark — Pulse Animation ───────── */
.lang-tile-landmark {
  animation: landmarkFloat 4s ease-in-out infinite;
}
@keyframes landmarkFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: .15; }
  50% { transform: translateY(-4px) scale(1.05); opacity: .2; }
}

/* ── Tasks Tab Toggle Background ────────────────────── */
.tasks-sub-toggle {
  background: linear-gradient(135deg, var(--paper) 0%, rgba(247,244,238,.8) 50%, var(--paper) 100%);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.03);
}

/* ── Back Button Pill — Elevated ────────────────────── */
.back-btn-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.back-btn-pill:active {
  transform: translateY(1px);
  box-shadow: none;
  transition-duration: .04s;
}

/* ── Coming Soon Empty State ────────────────────────── */
.coming-soon-card {
  text-align: center;
  padding: 48px 24px;
  background: linear-gradient(145deg, rgba(249,200,67,.04), rgba(240,112,32,.02));
  border-radius: 24px;
  border: 2px dashed rgba(249,200,67,.2);
}

/* ── Streak Popup Card — Better Entrance ────────────── */
.streak-popup-card {
  animation: streakPopupIn .5s var(--spring) both;
}
@keyframes streakPopupIn {
  from { opacity: 0; transform: translateY(40px) scale(.9); }
  60% { transform: translateY(-8px) scale(1.02); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── XP Bar Glow for Active Progress ────────────────── */
.lang-xp-glow {
  box-shadow: 0 0 8px rgba(255,255,255,.3);
  position: relative;
}
.lang-xp-glow::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 6px; height: 100%;
  background: rgba(255,255,255,.5);
  border-radius: 2px;
  animation: xpBarPulse 1.5s ease-in-out infinite;
}
@keyframes xpBarPulse {
  0%, 100% { opacity: .3; }
  50% { opacity: .7; }
}

/* ==========================================================================
   CYCLE 3 IMPROVEMENTS — Final Polish
   ========================================================================== */

/* ── Tab Button Hover — Premium Micro-interaction ───── */
.tasks-sub-toggle button:hover {
  color: var(--ink);
  background: rgba(249,200,67,.06);
}
.lektura-tab-btn:hover {
  border-color: rgba(249,200,67,.3);
  color: var(--ink);
  background: rgba(249,200,67,.04);
  transform: translateY(-1px);
}

/* ── Lektura Detail Header Card — Entrance ──────────── */
.lektura-detail-hero {
  animation: headerFadeIn .5s var(--ease) both;
}

/* ── Premium Summary Card ───────────────────────────── */
.lektura-summary-card {
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink);
  padding: 18px 20px;
  background: white;
  border-radius: 16px;
  border: 1.5px solid rgba(237,232,223,.5);
  border-bottom: 3px solid rgba(237,232,223,.3);
  animation: fadeInUp .3s var(--ease) both;
}

/* ── Theme Pill 3D Press Effect ─────────────────────── */
.theme-pill-3d:active {
  border-bottom-width: 1px;
  transform: translateY(2px);
  transition-duration: .04s;
}

/* ── Quiz Score Stars ───────────────────────────────── */
.quiz-score-stars {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 12px 0;
}
.quiz-score-star {
  font-size: 32px;
  animation: starTwinkle .5s var(--spring) both;
}
.quiz-score-star:nth-child(1) { animation-delay: .1s; }
.quiz-score-star:nth-child(2) { animation-delay: .2s; }
.quiz-score-star:nth-child(3) { animation-delay: .3s; }
.quiz-score-star.dim { opacity: .2; filter: grayscale(1); }

/* ── Book Card Hover Lift ───────────────────────────── */
.book-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}

/* ── Smooth Section Transitions ─────────────────────── */
.section-enter {
  animation: sectionSlideIn .4s var(--ease) both;
}
@keyframes sectionSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Lektura Detail Tabs — Scroll Fade ──────────────── */
.lektura-detail-tabs::after {
  content: '';
  position: sticky;
  right: 0;
  min-width: 20px;
  background: linear-gradient(90deg, transparent, var(--cream, #FFFDF7));
  pointer-events: none;
  flex-shrink: 0;
}

/* ── Polish for CKE Section Title ───────────────────── */
.tasks-section-title {
  background: linear-gradient(135deg, var(--ink) 0%, rgba(26,23,19,.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==========================================================================
   CYCLE 4 IMPROVEMENTS — Critic/Animator Deep Polish
   ========================================================================== */

/* ── 1. CORRECT ANSWER — Green Flash Fill + Confetti Burst ── */
.fs-option.correct {
  border-color: #58CC02;
  border-bottom: 4px solid #46A302;
  background: rgba(88,204,2,.08);
  animation: correctFlashFill .6s ease-out, correctBounceHard .5s var(--spring) .1s;
  box-shadow: 0 4px 20px rgba(88,204,2,.2);
}
@keyframes correctFlashFill {
  0%   { background: rgba(88,204,2,.5); box-shadow: 0 0 40px rgba(88,204,2,.4); }
  30%  { background: rgba(88,204,2,.3); box-shadow: 0 0 25px rgba(88,204,2,.3); }
  100% { background: rgba(88,204,2,.08); box-shadow: 0 4px 20px rgba(88,204,2,.2); }
}
@keyframes correctBounceHard {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.06) translateY(-2px); }
  40%  { transform: scale(.98); }
  60%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* ── 2. WRONG ANSWER — Dramatic Rotation + Vibration Shake ── */
.fs-option.wrong {
  border-color: #E53E3E;
  border-bottom: 4px solid #C53030;
  background: rgba(229,62,62,.06);
  animation: wrongShakeDramatic .55s var(--ease);
}
@keyframes wrongShakeDramatic {
  0%   { transform: translateX(0) rotate(0deg); }
  6%   { transform: translateX(-14px) rotate(-3.5deg); }
  12%  { transform: translateX(14px) rotate(3.5deg); }
  18%  { transform: translateX(-12px) rotate(-3deg); }
  24%  { transform: translateX(12px) rotate(3deg); }
  30%  { transform: translateX(-10px) rotate(-2.5deg); }
  38%  { transform: translateX(10px) rotate(2.5deg); }
  46%  { transform: translateX(-7px) rotate(-1.5deg); }
  54%  { transform: translateX(7px) rotate(1.5deg); }
  62%  { transform: translateX(-4px) rotate(-1deg); }
  70%  { transform: translateX(4px) rotate(1deg); }
  80%  { transform: translateX(-2px) rotate(-.3deg); }
  90%  { transform: translateX(1px) rotate(0); }
  100% { transform: translateX(0) rotate(0); }
}

/* ── 3. CONTINUE BUTTON — Ready Pulse When Visible ────────── */
.fs-continue-btn.ready-pulse,
.btn-3d-green.ready-pulse,
.btn-3d-gold.ready-pulse {
  animation: continueReadyPulse 1.8s ease-in-out infinite;
}
@keyframes continueReadyPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 16px rgba(88,204,2,.25); }
  50%      { transform: scale(1.025); box-shadow: 0 6px 24px rgba(88,204,2,.35), 0 0 0 4px rgba(88,204,2,.1); }
}

/* ── 4. QUESTION TRANSITION — Butter-smooth slide with ease-out ── */
.slide-out-left-wide {
  animation: slideOutLeftWide .35s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes slideOutLeftWide {
  0%   { transform: translateX(0) scale(1); opacity: 1; filter: blur(0); }
  60%  { opacity: .4; }
  100% { transform: translateX(-60%) scale(.96); opacity: 0; filter: blur(2px); }
}
.slide-in-right-wide {
  animation: slideInRightWide .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes slideInRightWide {
  0%   { transform: translateX(60px) scale(.97); opacity: 0; filter: blur(2px); }
  40%  { filter: blur(0); }
  100% { transform: translateX(0) scale(1); opacity: 1; filter: blur(0); }
}

/* ── 5. QUESTION TEXT — Silky smooth entrance ──────────────── */
.fs-question-text-entrance {
  animation: qTextSlideReveal .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes qTextSlideReveal {
  0%   { opacity: 0; transform: translateY(14px) translateX(-6px) scale(.98); filter: blur(3px); }
  40%  { filter: blur(1px); }
  70%  { filter: blur(0); transform: translateY(-1px) translateX(0) scale(1.005); }
  100% { opacity: 1; transform: translateY(0) translateX(0) scale(1); filter: blur(0); }
}

/* ── 6. STREAK FIRE — Fixed Conflicting Animations ────────── */
.streak-hero-fire-fixed {
  font-size: 48px;
  display: inline-block;
  animation: flameRealistic 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255,100,0,.35)) drop-shadow(0 0 25px rgba(255,60,0,.15));
  position: relative;
  z-index: 1;
}
@keyframes flameRealistic {
  0%   { transform: scale(1) translateY(0) rotate(0deg); }
  15%  { transform: scale(1.08) translateY(-3px) rotate(-2deg); }
  30%  { transform: scale(1.12) translateY(-5px) rotate(1deg); }
  50%  { transform: scale(1.06) translateY(-2px) rotate(-1deg); }
  70%  { transform: scale(1.1) translateY(-4px) rotate(2deg); }
  85%  { transform: scale(1.04) translateY(-1px) rotate(-1deg); }
  100% { transform: scale(1) translateY(0) rotate(0deg); }
}

/* ── 7. OPTION STAGGER — Wider Delay + Spring ─────────────── */
.fs-option.stagger-cascade:nth-child(1) { animation-delay: .03s; }
.fs-option.stagger-cascade:nth-child(2) { animation-delay: .09s; }
.fs-option.stagger-cascade:nth-child(3) { animation-delay: .15s; }
.fs-option.stagger-cascade:nth-child(4) { animation-delay: .21s; }

/* ── 8. WARM RADIATING RAYS — Streak Section ──────────────── */
.streak-hero-rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 200px; height: 200px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
.streak-hero-rays::before {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(249,200,67,.06) 10deg,
    transparent 20deg, transparent 30deg,
    rgba(240,112,32,.04) 40deg, transparent 50deg,
    transparent 60deg, rgba(249,200,67,.06) 70deg,
    transparent 80deg, transparent 90deg,
    rgba(240,112,32,.04) 100deg, transparent 110deg,
    transparent 120deg, rgba(249,200,67,.06) 130deg,
    transparent 140deg, transparent 150deg,
    rgba(240,112,32,.04) 160deg, transparent 170deg,
    transparent 180deg, rgba(249,200,67,.06) 190deg,
    transparent 200deg, transparent 210deg,
    rgba(240,112,32,.04) 220deg, transparent 230deg,
    transparent 240deg, rgba(249,200,67,.06) 250deg,
    transparent 260deg, transparent 270deg,
    rgba(240,112,32,.04) 280deg, transparent 290deg,
    transparent 300deg, rgba(249,200,67,.06) 310deg,
    transparent 320deg, transparent 330deg,
    rgba(240,112,32,.04) 340deg, transparent 350deg,
    transparent 360deg
  );
  border-radius: 50%;
  animation: raysRotate 20s linear infinite;
}
@keyframes raysRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ==========================================================================
   CYCLE 5 IMPROVEMENTS — Screen Flashes, Medal Twinkle, Score Count-up
   ========================================================================== */

/* ── 9. SCREEN FLASH — Green on correct, Red tint on wrong ── */
.fs-screen-flash-correct {
  animation: screenFlashGreen .4s ease-out both;
}
@keyframes screenFlashGreen {
  0%   { box-shadow: inset 0 0 80px rgba(88,204,2,.2); }
  100% { box-shadow: inset 0 0 0 rgba(88,204,2,0); }
}
.fs-screen-flash-wrong {
  animation: screenFlashRed .4s ease-out both;
}
@keyframes screenFlashRed {
  0%   { box-shadow: inset 0 0 60px rgba(229,62,62,.15); }
  100% { box-shadow: inset 0 0 0 rgba(229,62,62,0); }
}

/* ── 10. NAV TILE ICON STAGGER — Desync float animation ──── */
.nav-tile:nth-child(1) .nav-tile-icon { animation-delay: 0s; }
.nav-tile:nth-child(2) .nav-tile-icon { animation-delay: .5s; }
.nav-tile:nth-child(3) .nav-tile-icon { animation-delay: 1s; }
.nav-tile:nth-child(4) .nav-tile-icon { animation-delay: 1.5s; }
.nav-tile:nth-child(5) .nav-tile-icon { animation-delay: 2s; }
.nav-tile:nth-child(6) .nav-tile-icon { animation-delay: .3s; }
.nav-tile:nth-child(7) .nav-tile-icon { animation-delay: .8s; }
.nav-tile:nth-child(8) .nav-tile-icon { animation-delay: 1.3s; }

/* ── 11. LEADERBOARD MEDAL TWINKLE ───────────────────────── */
.lb-podium-medal {
  display: inline-block;
  animation: medalTwinkle 3s ease-in-out infinite;
}
.lb-podium-place.first .lb-podium-medal {
  animation: medalTwinkle 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255,215,0,.4));
}
.lb-podium-place.second .lb-podium-medal {
  animation: medalTwinkle 3s ease-in-out infinite .5s;
  filter: drop-shadow(0 0 6px rgba(192,192,192,.3));
}
.lb-podium-place.third .lb-podium-medal {
  animation: medalTwinkle 3.5s ease-in-out infinite 1s;
  filter: drop-shadow(0 0 6px rgba(205,127,50,.3));
}
@keyframes medalTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  15%      { transform: scale(1.08) rotate(-5deg); }
  30%      { transform: scale(1) rotate(0deg); }
  45%      { transform: scale(1.06) rotate(5deg); }
  60%      { transform: scale(1) rotate(0deg); }
}

/* ── 12. CELEBRATION SCORE — Count-up pulse effect ───────── */
.celeb-score-count-up {
  animation: celebScoreUp 1s var(--spring) both;
}
@keyframes celebScoreUp {
  0%   { transform: scale(0.3) translateY(20px); opacity: 0; }
  40%  { transform: scale(1.2) translateY(-8px); opacity: 1; }
  60%  { transform: scale(0.95) translateY(2px); }
  80%  { transform: scale(1.05) translateY(-2px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ── 13. CORRECT OPTION — Checkmark draw overlay ─────────── */
.fs-option.correct .fs-option-letter {
  position: relative;
}

/* ── 14. WRONG OPTION — X overlay ────────────────────────── */
.fs-option.wrong .fs-option-letter {
  position: relative;
}

/* ==========================================================================
   CYCLE 6-12 IMPROVEMENTS — Critic/Animator Ultra-Polish
   Targeting 9.5/10 on EVERY element
   ========================================================================== */

/* ── A. CONFETTI FROM BUTTON — Burst from correct option ──────── */
.confetti-from-btn {
  position: absolute;
  pointer-events: none;
  z-index: 10001;
  border-radius: 2px;
  animation: confettiBurstFromBtn var(--burst-dur, .8s) cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes confettiBurstFromBtn {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  30%  { opacity: 1; }
  100% { transform: translate(var(--bx, 40px), var(--by, -60px)) rotate(var(--br, 360deg)) scale(.3); opacity: 0; }
}

/* ── B. CORRECT ANSWER — DRAMATIC GREEN FLASH + GLOW BURST ───────── */
.fs-option.correct {
  border-color: #58CC02;
  border-bottom: 5px solid #46A302;
  background: rgba(88,204,2,.08);
  animation: correctDramaticFlash .7s ease-out, correctBounceHard .5s var(--spring) .15s;
  box-shadow: 0 4px 28px rgba(88,204,2,.3);
}
@keyframes correctDramaticFlash {
  0%   { background: rgba(88,204,2,.65); box-shadow: 0 0 70px rgba(88,204,2,.55), inset 0 0 35px rgba(88,204,2,.35), 0 0 0 0 rgba(88,204,2,.4); }
  10%  { box-shadow: 0 0 60px rgba(88,204,2,.5), inset 0 0 25px rgba(88,204,2,.2), 0 0 0 8px rgba(88,204,2,.2); }
  25%  { background: rgba(88,204,2,.35); box-shadow: 0 0 40px rgba(88,204,2,.35), 0 0 0 14px rgba(88,204,2,.08); }
  50%  { background: rgba(88,204,2,.18); box-shadow: 0 0 25px rgba(88,204,2,.2), 0 0 0 18px rgba(88,204,2,0); }
  100% { background: rgba(88,204,2,.08); box-shadow: 0 4px 28px rgba(88,204,2,.3); }
}

/* ── C. SCREEN FLASH — DRAMATIC with vignette ─────────────────── */
.fs-screen-flash-correct {
  animation: screenFlashGreenDramatic .6s ease-out both;
}
@keyframes screenFlashGreenDramatic {
  0%   { box-shadow: inset 0 0 150px rgba(88,204,2,.35), inset 0 0 350px rgba(88,204,2,.1); }
  15%  { box-shadow: inset 0 0 100px rgba(88,204,2,.25), inset 0 0 200px rgba(88,204,2,.06); }
  40%  { box-shadow: inset 0 0 50px rgba(88,204,2,.12); }
  100% { box-shadow: inset 0 0 0 rgba(88,204,2,0); }
}
.fs-screen-flash-wrong {
  animation: screenFlashRedDramatic .5s ease-out both, screenViolentShake .5s ease-out;
}
/* FULL SCREEN VIBRATION — dramatic multi-axis shake on wrong answer */
@keyframes screenViolentShake {
  0%   { transform: translate(0, 0) rotate(0); }
  5%   { transform: translate(-6px, 2px) rotate(-.5deg); }
  10%  { transform: translate(6px, -2px) rotate(.5deg); }
  15%  { transform: translate(-5px, -1px) rotate(-.3deg); }
  20%  { transform: translate(5px, 1px) rotate(.3deg); }
  25%  { transform: translate(-4px, 2px) rotate(-.2deg); }
  30%  { transform: translate(4px, -2px) rotate(.2deg); }
  40%  { transform: translate(-3px, 1px) rotate(-.1deg); }
  50%  { transform: translate(3px, -1px) rotate(.1deg); }
  60%  { transform: translate(-2px, 0) rotate(0); }
  70%  { transform: translate(2px, 0) rotate(0); }
  80%  { transform: translate(-1px, 0) rotate(0); }
  90%  { transform: translate(1px, 0) rotate(0); }
  100% { transform: translate(0, 0) rotate(0); }
}
@keyframes screenFlashRedDramatic {
  0%   { box-shadow: inset 0 0 130px rgba(229,62,62,.25), inset 0 0 300px rgba(229,62,62,.08); }
  15%  { box-shadow: inset 0 0 80px rgba(229,62,62,.18); }
  40%  { box-shadow: inset 0 0 40px rgba(229,62,62,.08); }
  100% { box-shadow: inset 0 0 0 rgba(229,62,62,0); }
}

/* ── D. STREAK HERO — Pixar-level with animated SVG-like fire ─── */
.streak-hero {
  text-align: center;
  padding: 28px 16px 20px;
  margin: 8px 0;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(249,200,67,.1), rgba(240,112,32,.06), rgba(249,200,67,.08));
  position: relative;
  overflow: hidden;
  animation: streakHeroIn .5s var(--spring) both;
  border: 1.5px solid rgba(249,200,67,.12);
}

/* Animated warm rays behind fire */
.streak-hero .streak-hero-rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 260px; height: 260px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
.streak-hero .streak-hero-rays::before {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(249,200,67,.08) 8deg, transparent 16deg,
    transparent 30deg, rgba(240,112,32,.06) 38deg, transparent 46deg,
    transparent 60deg, rgba(249,200,67,.08) 68deg, transparent 76deg,
    transparent 90deg, rgba(240,112,32,.06) 98deg, transparent 106deg,
    transparent 120deg, rgba(249,200,67,.08) 128deg, transparent 136deg,
    transparent 150deg, rgba(240,112,32,.06) 158deg, transparent 166deg,
    transparent 180deg, rgba(249,200,67,.08) 188deg, transparent 196deg,
    transparent 210deg, rgba(240,112,32,.06) 218deg, transparent 226deg,
    transparent 240deg, rgba(249,200,67,.08) 248deg, transparent 256deg,
    transparent 270deg, rgba(240,112,32,.06) 278deg, transparent 286deg,
    transparent 300deg, rgba(249,200,67,.08) 308deg, transparent 316deg,
    transparent 330deg, rgba(240,112,32,.06) 338deg, transparent 346deg,
    transparent 360deg
  );
  border-radius: 50%;
  animation: raysRotateSlow 25s linear infinite;
}
@keyframes raysRotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Fire emoji replacement — CSS animated flame layers */
.streak-fire-animated {
  position: relative;
  display: inline-block;
  width: 60px; height: 70px;
  filter: drop-shadow(0 0 14px rgba(255,100,0,.4)) drop-shadow(0 0 30px rgba(255,60,0,.18));
}
.streak-fire-animated .flame-core {
  position: absolute;
  bottom: 0; left: 50%;
  width: 36px; height: 50px;
  transform: translateX(-50%);
  background: linear-gradient(0deg, #FF6B00 0%, #FFB800 40%, #FFDD57 80%, rgba(255,255,255,.8) 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: flameCoreAnimate 1s ease-in-out infinite alternate;
}
@keyframes flameCoreAnimate {
  0%   { transform: translateX(-50%) scaleX(1) scaleY(1) rotate(-1deg); }
  25%  { transform: translateX(-50%) scaleX(1.05) scaleY(1.08) rotate(1deg); }
  50%  { transform: translateX(-50%) scaleX(.95) scaleY(1.12) rotate(-2deg); }
  75%  { transform: translateX(-50%) scaleX(1.08) scaleY(1.04) rotate(1.5deg); }
  100% { transform: translateX(-50%) scaleX(1) scaleY(1.06) rotate(0deg); }
}
.streak-fire-animated .flame-outer {
  position: absolute;
  bottom: -2px; left: 50%;
  width: 44px; height: 58px;
  transform: translateX(-50%);
  background: linear-gradient(0deg, #E65100 0%, #FF8F00 50%, rgba(255,183,77,.5) 100%);
  border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
  opacity: .7;
  animation: flameOuterAnimate 1.3s ease-in-out infinite alternate;
  z-index: -1;
}
@keyframes flameOuterAnimate {
  0%   { transform: translateX(-50%) scaleX(1) scaleY(1) rotate(1deg); }
  50%  { transform: translateX(-50%) scaleX(1.1) scaleY(1.15) rotate(-2deg); }
  100% { transform: translateX(-50%) scaleX(.92) scaleY(1.1) rotate(1deg); }
}
.streak-fire-animated .flame-glow {
  position: absolute;
  bottom: 10px; left: 50%;
  width: 80px; height: 80px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,140,0,.25) 0%, transparent 70%);
  border-radius: 50%;
  animation: flameGlowPulse 1.5s ease-in-out infinite;
  pointer-events: none;
  z-index: -2;
}
@keyframes flameGlowPulse {
  0%, 100% { opacity: .5; transform: translateX(-50%) scale(1); }
  50%      { opacity: .9; transform: translateX(-50%) scale(1.35); }
}
/* Fire sparks */
.streak-fire-animated .spark {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #FFD54F;
  animation: sparkRise var(--spark-dur, 1.2s) ease-out infinite;
  pointer-events: none;
}
@keyframes sparkRise {
  0%   { transform: translate(0, 0) scale(1); opacity: .8; }
  100% { transform: translate(var(--spark-x, 8px), var(--spark-y, -40px)) scale(0); opacity: 0; }
}

/* Streak number — BIGGER glow, text-shadow rainbow */
.streak-hero-num {
  font-family: 'DM Sans', sans-serif;
  font-size: 60px; font-weight: 900;
  background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 50%, #FF6B00 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1; margin: 6px 0;
  position: relative; z-index: 1;
  animation: numGlowBreathe 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 25px rgba(249,200,67,.3)) drop-shadow(0 2px 4px rgba(0,0,0,.1));
}
@keyframes numGlowBreathe {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(249,200,67,.2)) drop-shadow(0 2px 4px rgba(0,0,0,.08)); }
  50%      { filter: drop-shadow(0 0 40px rgba(249,200,67,.45)) drop-shadow(0 0 80px rgba(240,112,32,.2)) drop-shadow(0 2px 4px rgba(0,0,0,.08)); }
}

/* ── E. START BUTTON — Breathing pulse + sparkle border ───────── */
.start-btn-hero {
  position: relative;
  overflow: hidden;
  animation: startBtnBreathe 2s ease-in-out infinite;
}
@keyframes startBtnBreathe {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 0 #46A302, 0 6px 20px rgba(88,204,2,.25); }
  50%      { transform: scale(1.03); box-shadow: 0 4px 0 #46A302, 0 8px 30px rgba(88,204,2,.35), 0 0 0 6px rgba(88,204,2,.08); }
}
.start-btn-hero::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(88,204,2,.3), rgba(120,216,32,.4), rgba(88,204,2,.3));
  background-size: 200% 100%;
  animation: borderGlowSlide 2s linear infinite;
  z-index: -1;
  opacity: .5;
}
@keyframes borderGlowSlide {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ── F. BOTTOM NAV — Enhanced bounce + icon pop ───────────────── */
.p-nav-item.active .p-nav-label {
  font-weight: 700;
  color: var(--g2);
  transform: scale(1.05);
}
.p-nav-item:active {
  transform: scale(.92);
  transition: transform .06s ease;
}
.p-nav-item:active svg {
  animation: navTapPop .4s var(--spring);
}
@keyframes navTapPop {
  0%   { transform: scale(1.15); }
  25%  { transform: scale(.8) translateY(3px); }
  50%  { transform: scale(1.25) translateY(-4px); }
  75%  { transform: scale(1.1) translateY(-1px); }
  100% { transform: scale(1.15); }
}

/* Gold dot under active nav */
.p-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--g2);
  box-shadow: 0 0 8px rgba(240,112,32,.4);
  animation: navDotPop .3s var(--spring) both;
}
@keyframes navDotPop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
/* Remove dot from inactive */
.p-nav-item::after {
  content: none;
}

/* ── G. RANKING — Sparkle particles on #1 + epic podium ───────── */
.lb-podium-place.first {
  position: relative;
}
.lb-podium-place.first::before {
  content: '';
  position: absolute;
  top: -10px; left: 50%;
  width: 80px; height: 80px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,215,0,.2) 0%, transparent 70%);
  border-radius: 50%;
  animation: firstPlaceGlow 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes firstPlaceGlow {
  0%, 100% { opacity: .4; transform: translateX(-50%) scale(1); }
  50%      { opacity: .8; transform: translateX(-50%) scale(1.3); }
}

/* Medal stagger entrance */
.lb-podium-place .lb-podium-medal {
  animation: medalBounceIn .6s var(--spring) both;
}
.lb-podium-place.first .lb-podium-medal {
  animation-delay: .3s;
}
.lb-podium-place.second .lb-podium-medal {
  animation-delay: .45s;
}
.lb-podium-place.third .lb-podium-medal {
  animation-delay: .6s;
}
@keyframes medalBounceIn {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(10deg); opacity: 1; }
  80%  { transform: scale(.9) rotate(-5deg); }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* Crown sparkle on first medal */
.lb-podium-place.first .lb-podium-medal {
  position: relative;
}
.lb-podium-place.first .lb-podium-medal::before {
  content: '';
  position: absolute;
  top: -4px; right: -4px;
  width: 8px; height: 8px;
  background: #FFD700;
  border-radius: 50%;
  animation: sparkleFlicker 1.5s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(255,215,0,.6);
}
@keyframes sparkleFlicker {
  0%, 100% { opacity: 0; transform: scale(.5); }
  30%      { opacity: 1; transform: scale(1.2); }
  50%      { opacity: .6; transform: scale(.8); }
  70%      { opacity: 1; transform: scale(1); }
}

/* User row — stronger animated border */
.lb-row.is-me {
  background: linear-gradient(90deg, rgba(249,200,67,.14), rgba(240,112,32,.08));
  border: 2px solid rgba(249,200,67,.35);
  box-shadow: 0 0 24px rgba(249,200,67,.15);
  animation: lbRowIn .35s var(--spring) both, meGlowStronger 2.5s var(--ease) infinite;
}
@keyframes meGlowStronger {
  0%, 100% { box-shadow: 0 0 16px rgba(249,200,67,.12), 0 0 0 0 rgba(249,200,67,0); }
  50%      { box-shadow: 0 0 32px rgba(249,200,67,.25), 0 0 0 4px rgba(249,200,67,.06); }
}

/* Invite card — premium pulsing CTA */
.invite-btn-premium {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-bottom: 4px solid #D4880A;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: white;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(249,200,67,.3);
  transition: all .1s ease;
  -webkit-tap-highlight-color: transparent;
  animation: invitePulse 3s ease-in-out infinite;
}
@keyframes invitePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(249,200,67,.3); }
  50%      { transform: scale(1.02); box-shadow: 0 6px 28px rgba(249,200,67,.4), 0 0 0 4px rgba(249,200,67,.08); }
}
.invite-btn-premium:active {
  border-bottom-width: 2px;
  transform: translateY(2px) !important;
  box-shadow: 0 1px 4px rgba(249,200,67,.15) !important;
  transition-duration: .04s;
}
.invite-sticky {
  position: sticky;
  bottom: 0;
  padding: 16px 0 8px;
  background: linear-gradient(0deg, var(--cream, #FFFDF7) 60%, transparent);
  z-index: 5;
}

/* ── H. VIEW TRANSITIONS — Content stagger on enter ───────────── */
.view-content-stagger > * {
  animation: viewStaggerIn .4s var(--ease) both;
}
.view-content-stagger > *:nth-child(1) { animation-delay: .02s; }
.view-content-stagger > *:nth-child(2) { animation-delay: .06s; }
.view-content-stagger > *:nth-child(3) { animation-delay: .1s; }
.view-content-stagger > *:nth-child(4) { animation-delay: .14s; }
.view-content-stagger > *:nth-child(5) { animation-delay: .18s; }
.view-content-stagger > *:nth-child(6) { animation-delay: .22s; }
.view-content-stagger > *:nth-child(7) { animation-delay: .26s; }
.view-content-stagger > *:nth-child(8) { animation-delay: .3s; }

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

/* ── I. LEKTURY CARDS — Premium book covers ───────────────────── */
.book-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: white;
  border: 2px solid rgba(194,186,176,.12);
  border-bottom: 4px solid rgba(194,186,176,.2);
  cursor: pointer;
  transition: all .12s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}
.book-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: tileShimmer 5s ease infinite;
  pointer-events: none;
  z-index: 1;
}
.book-card:hover {
  transform: translateY(-3px) scale(1.01);
  border-color: var(--g1);
  box-shadow: 0 8px 28px rgba(0,0,0,.1);
}
.book-card:active {
  border-bottom-width: 2px;
  transform: translateY(2px) scale(.99);
  box-shadow: none;
  transition-duration: .04s;
}
.book-card-emoji {
  font-size: 32px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.1));
  transition: transform .3s var(--spring);
  flex-shrink: 0;
}
.book-card:hover .book-card-emoji {
  transform: scale(1.15) rotate(-5deg);
}
.book-card-title {
  font-size: 15px; font-weight: 800;
  color: var(--ink); line-height: 1.25;
}
.book-card-author {
  font-size: 12px; color: var(--ink60);
  margin-top: 2px;
}

/* Book gradient themes for covers */
.book-grad-1  { background: linear-gradient(145deg, #FFF5F5, #FFF1F1); border-color: rgba(229,62,62,.12); }
.book-grad-2  { background: linear-gradient(145deg, #F0FFF4, #ECFDF5); border-color: rgba(72,187,120,.12); }
.book-grad-3  { background: linear-gradient(145deg, #EBF8FF, #E6F4FF); border-color: rgba(66,153,225,.12); }
.book-grad-4  { background: linear-gradient(145deg, #FAF5FF, #F3E8FF); border-color: rgba(159,122,234,.12); }
.book-grad-5  { background: linear-gradient(145deg, #FFFFF0, #FFFBEB); border-color: rgba(236,201,75,.12); }
.book-grad-6  { background: linear-gradient(145deg, #FFF5F7, #FFF0F3); border-color: rgba(237,100,166,.12); }
.book-grad-7  { background: linear-gradient(145deg, #F0FFFF, #E6FFFA); border-color: rgba(56,178,172,.12); }
.book-grad-8  { background: linear-gradient(145deg, #FFF8E1, #FFFBF0); border-color: rgba(246,173,85,.12); }
.book-grad-9  { background: linear-gradient(145deg, #F5F5FF, #EDEDFF); border-color: rgba(102,126,234,.12); }
.book-grad-10 { background: linear-gradient(145deg, #FFF0E6, #FFEBDB); border-color: rgba(237,137,54,.12); }

/* ── J. TAB SWITCHER — Stronger indicator, NO double lines ────── */
.tasks-sub-toggle .tab-indicator {
  height: 3px;
  background: linear-gradient(90deg, var(--g1), var(--g2));
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(249,200,67,.3);
}

/* ── K. FLOATING EMOJIS — Improved animation ──────────────────── */
.float-emoji {
  position: absolute;
  pointer-events: none;
  opacity: .06;
  animation: floatEmojiDrift var(--float-dur, 12s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  z-index: 0;
}
@keyframes floatEmojiDrift {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  25%      { transform: translateY(-12px) rotate(5deg) scale(1.05); }
  50%      { transform: translateY(-20px) rotate(-3deg) scale(.97); }
  75%      { transform: translateY(-8px) rotate(4deg) scale(1.03); }
}
.section-floats-container {
  position: relative;
}

/* ── L. CONFETTI MINI — Celebration particles ─────────────────── */
.confetti-mini {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  animation: confettiMiniFloat var(--cf-dur, 3s) ease-in-out infinite;
  animation-delay: var(--cf-delay, 0s);
  opacity: .4;
}
@keyframes confettiMiniFloat {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: .4; }
  25%      { transform: translateY(-8px) rotate(90deg) scale(1.1); opacity: .6; }
  50%      { transform: translateY(-14px) rotate(180deg) scale(.9); opacity: .5; }
  75%      { transform: translateY(-6px) rotate(270deg) scale(1.05); opacity: .3; }
}

/* ── M. GOLDEN RAYS — Behind celebration mascot ───────────────── */
.golden-rays {
  position: absolute;
  top: 50%; left: 50%;
  margin-top: -70px; margin-left: -70px;
  width: 140px; height: 140px;
  pointer-events: none;
  z-index: 0;
}
.golden-rays::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(249,200,67,.12) 10deg, transparent 20deg,
    transparent 30deg, rgba(240,112,32,.08) 40deg, transparent 50deg,
    transparent 60deg, rgba(249,200,67,.12) 70deg, transparent 80deg,
    transparent 90deg, rgba(240,112,32,.08) 100deg, transparent 110deg,
    transparent 120deg, rgba(249,200,67,.12) 130deg, transparent 140deg,
    transparent 150deg, rgba(240,112,32,.08) 160deg, transparent 170deg,
    transparent 180deg, rgba(249,200,67,.12) 190deg, transparent 200deg,
    transparent 210deg, rgba(240,112,32,.08) 220deg, transparent 230deg,
    transparent 240deg, rgba(249,200,67,.12) 250deg, transparent 260deg,
    transparent 270deg, rgba(240,112,32,.08) 280deg, transparent 290deg,
    transparent 300deg, rgba(249,200,67,.12) 310deg, transparent 320deg,
    transparent 330deg, rgba(240,112,32,.08) 340deg, transparent 350deg,
    transparent 360deg
  );
  border-radius: 50%;
  animation: raysRotateSlow 25s linear infinite;
}

/* ── N. STREAK GLOW TEXT ──────────────────────────────────────── */
.streak-glow {
  animation: numGlowBreathe 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(249,200,67,.25));
}

/* ── O. CALENDAR DOTS — Improved with bounce & glow ───────────── */
.streak-cal-day-anim {
  animation: calDayPop .4s var(--spring) both;
}
.streak-cal-day-anim:nth-child(1) { animation-delay: .05s; }
.streak-cal-day-anim:nth-child(2) { animation-delay: .1s; }
.streak-cal-day-anim:nth-child(3) { animation-delay: .15s; }
.streak-cal-day-anim:nth-child(4) { animation-delay: .2s; }
.streak-cal-day-anim:nth-child(5) { animation-delay: .25s; }
.streak-cal-day-anim:nth-child(6) { animation-delay: .3s; }
.streak-cal-day-anim:nth-child(7) { animation-delay: .35s; }
@keyframes calDayPop {
  from { opacity: 0; transform: scale(.6) translateY(8px); }
  60%  { transform: scale(1.1) translateY(-2px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── P. PROGRESS SHIMMER — Enhanced 3D look ───────────────────── */
.progress-shimmer {
  position: relative;
  overflow: hidden;
}
.progress-shimmer::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 45%, rgba(255,255,255,.4) 50%, rgba(255,255,255,.35) 55%, transparent 100%);
  animation: shimmerSweep 2.5s ease-in-out infinite;
  pointer-events: none;
}
.progress-shimmer::after {
  content: '';
  position: absolute;
  top: 1px; left: 2px; right: 2px;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.3), transparent);
  border-radius: 3px;
  pointer-events: none;
}

/* ── Q. VIEW FADE ENTER ───────────────────────────────────────── */
.view-fade-enter {
  animation: viewFadeEnter .35s var(--ease) both;
}
@keyframes viewFadeEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── R. XP FLOAT QUIZ ─────────────────────────────────────────── */
.xp-float-quiz {
  position: fixed; top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'DM Sans', sans-serif;
  font-size: 28px; font-weight: 900;
  color: #58CC02;
  z-index: 10002;
  pointer-events: none;
  text-shadow: 0 0 16px rgba(88,204,2,.4);
  animation: xpFloatUp 1.2s ease-out both;
}
.xp-popup-bounce {
  position: fixed; top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'DM Sans', sans-serif;
  font-size: 32px; font-weight: 900;
  color: #58CC02;
  z-index: 10002;
  pointer-events: none;
  text-shadow: 0 0 20px rgba(88,204,2,.4);
  animation: xpBounceUp 1.4s var(--spring) both;
}
@keyframes xpFloatUp {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  15%  { opacity: 1; transform: translate(-50%, -70%) scale(1.2); }
  40%  { transform: translate(-50%, -90%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(.7); }
}
@keyframes xpBounceUp {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-10deg); }
  15%  { opacity: 1; transform: translate(-50%, -65%) scale(1.3) rotate(5deg); }
  30%  { transform: translate(-50%, -80%) scale(1.1) rotate(-3deg); }
  50%  { opacity: 1; transform: translate(-50%, -100%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(.6); }
}

/* ── S. XP FLOAT CSS for combo popups ─────────────────────────── */
@keyframes xpFloat {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  15%  { opacity: 1; transform: translate(-50%, -70%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(.7); }
}

/* ── T. PODIUM CONFETTI WRAP — Relative container ─────────────── */
.podium-confetti-wrap {
  position: relative;
  overflow: visible;
}

/* ── U. LEKTURA QUIZ — Premium skin ───────────────────────────── */
.lektura-quiz-header {
  background: linear-gradient(145deg, rgba(229,62,62,.08), rgba(221,107,32,.04));
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 16px;
  text-align: center;
  animation: headerFadeIn .4s var(--ease) both;
}

/* Lektura detail — floating cover emoji */
.lektura-cover-float {
  font-size: 56px;
  display: inline-block;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.12));
  animation: coverBounce 3s ease-in-out infinite;
}
@keyframes coverBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-8px) rotate(-3deg); }
  50%      { transform: translateY(-4px) rotate(0deg); }
  75%      { transform: translateY(-6px) rotate(3deg); }
}

/* Lektura chapter card */
.lektura-chapter-card {
  padding: 14px 16px;
  border-radius: 14px;
  background: white;
  border: 1.5px solid rgba(237,232,223,.4);
  border-bottom: 3px solid rgba(237,232,223,.3);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all .12s ease;
  animation: fadeInUp .35s var(--ease) both;
  -webkit-tap-highlight-color: transparent;
}
.lektura-chapter-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  border-color: rgba(229,62,62,.2);
}
.lektura-chapter-card:active {
  border-bottom-width: 1.5px;
  transform: translateY(1px);
  box-shadow: none;
  transition-duration: .04s;
}

/* Wiersze card enhancements */
.wiersz-card {
  position: relative;
  overflow: hidden;
}
.wiersz-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at 30% 30%, rgba(159,122,234,.04) 0%, transparent 50%);
  pointer-events: none;
}
.wiersz-card:hover {
  border-color: rgba(159,122,234,.25);
  box-shadow: 0 8px 24px rgba(159,122,234,.08);
}

/* Lektura theme pills enhanced */
.lektura-theme-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid rgba(194,186,176,.15);
  border-bottom: 2.5px solid rgba(194,186,176,.25);
  background: white;
  color: var(--ink);
  transition: all .1s ease;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.lektura-theme-pill:active {
  border-bottom-width: 1.5px;
  transform: translateY(1px);
  transition-duration: .04s;
}
.lektura-theme-pill.active {
  background: rgba(229,62,62,.06);
  border-color: rgba(229,62,62,.2);
  border-bottom-color: rgba(229,62,62,.3);
  color: #E53E3E;
}

/* ── V. NAV TILE — Enhanced 3D parallax on hover ──────────────── */
.nav-tile {
  will-change: transform;
}
.nav-tile:hover .nav-tile-label {
  text-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.nav-tile:hover .nav-tile-count {
  color: rgba(255,255,255,.95);
}

/* ── W. CORRECT CHECKMARK ANIMATION ───────────────────────────── */
.fs-option.correct .fs-option-letter,
.fs-option.wrong .fs-option-letter {
  font-size: 0; /* hide letter text, show icon via ::before */
  overflow: hidden;
}
.fs-option.correct .fs-option-letter::before {
  content: '\2713';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  color: white;
  animation: checkDraw .3s var(--spring) .1s both;
  z-index: 2;
}
@keyframes checkDraw {
  from { transform: scale(0) rotate(-45deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* ── X. WRONG X ANIMATION ─────────────────────────────────────── */
.fs-option.wrong .fs-option-letter::before {
  content: '\2717';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  color: white;
  animation: xDraw .3s var(--spring) .1s both;
  z-index: 2;
}
@keyframes xDraw {
  from { transform: scale(0) rotate(45deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* ── Y. STREAK POPUP OVERLAY ──────────────────────────────────── */
.streak-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 10005;
  background: rgba(26,23,19,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn .3s var(--ease) both;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.streak-popup-card {
  background: #FFFDF7;
  border-radius: 28px;
  max-width: 340px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.2);
  animation: streakPopupIn .5s var(--spring) both;
}
.streak-popup-header {
  background: linear-gradient(145deg, rgba(249,200,67,.12), rgba(240,112,32,.08));
  padding: 28px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.streak-popup-header::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, transparent, rgba(249,200,67,.06), transparent, rgba(240,112,32,.04), transparent);
  animation: raysRotateSlow 20s linear infinite;
}
.streak-popup-body {
  padding: 20px 24px;
}
.streak-popup-actions {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Z. SOUND WAVE ANIMATION — On correct answer ──────────────── */
.sound-wave-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(88,204,2,.3);
  border-radius: inherit;
  animation: soundWaveExpand .6s ease-out both;
  pointer-events: none;
}
@keyframes soundWaveExpand {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: .6; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* ── AA. TROPHY ANIMATION — More dramatic ─────────────────────── */
.trophy-anim {
  animation: trophyDramatic 2.5s var(--ease) infinite;
  filter: drop-shadow(0 4px 16px rgba(255,215,0,.35));
}
@keyframes trophyDramatic {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  10%      { transform: translateY(-8px) rotate(-8deg) scale(1.05); }
  25%      { transform: translateY(-4px) rotate(0) scale(1); }
  40%      { transform: translateY(-6px) rotate(8deg) scale(1.03); }
  55%      { transform: translateY(-3px) rotate(0) scale(1); }
  70%      { transform: translateY(-5px) rotate(-5deg) scale(1.02); }
  85%      { transform: translateY(-2px) rotate(3deg) scale(1); }
}

/* ── BB. LANGUAGE LEVEL PATH — Premium Duolingo-style ─────────── */
.lang-level-node {
  position: relative;
  transition: all .2s var(--spring);
}
.lang-level-node.completed {
  animation: levelNodeComplete .5s var(--spring) both;
}
@keyframes levelNodeComplete {
  from { transform: scale(.5); opacity: 0; }
  60%  { transform: scale(1.1); }
  to   { transform: scale(1); opacity: 1; }
}
.lang-level-node.current {
  animation: levelNodePulse 2.5s ease-in-out infinite;
}
@keyframes levelNodePulse {
  0%, 100% { box-shadow: 0 4px 0 rgba(0,0,0,.15), 0 0 0 0 rgba(249,200,67,0); }
  50%      { box-shadow: 0 4px 0 rgba(0,0,0,.15), 0 0 0 8px rgba(249,200,67,.1), 0 0 20px rgba(249,200,67,.15); }
}
.lang-level-node.locked {
  opacity: .45;
  filter: grayscale(.3);
}
.lang-level-node:not(.locked):hover {
  transform: translateY(-3px) scale(1.05);
}
.lang-level-node:not(.locked):active {
  transform: translateY(2px) scale(.97);
  transition-duration: .06s;
}

/* Level connector line */
.lang-level-connector {
  width: 3px;
  margin: 0 auto;
  transition: background .5s var(--ease);
}
.lang-level-connector.completed {
  background: #58CC02 !important;
  box-shadow: 0 0 8px rgba(88,204,2,.2);
}

/* Language XP bar enhanced */
.lang-xp-bar {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}
.lang-xp-fill {
  border-radius: 6px;
  position: relative;
  transition: width .8s cubic-bezier(.22,1,.36,1);
}
.lang-xp-fill::after {
  content: '';
  position: absolute;
  top: 1px; left: 2px; right: 2px;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.3), transparent);
  border-radius: 4px;
  pointer-events: none;
}

/* Language card hover effect */
.lang-lesson-card {
  transition: all .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.lang-lesson-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.lang-lesson-card:active {
  transform: translateY(1px);
  box-shadow: none;
  transition-duration: .04s;
}

/* ── CC. QUIZ RESULT ENHANCED — Animated score ring ───────────── */
.quiz-result-ring {
  width: 100px; height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  position: relative;
  animation: resultRingPop .6s var(--spring) .2s both;
}
@keyframes resultRingPop {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(5deg); }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.quiz-result-ring svg {
  transform: rotate(-90deg);
  position: absolute;
  inset: 0;
}
.quiz-result-ring circle.progress-circle {
  stroke-dasharray: 283;
  transition: stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1) .4s;
}
.quiz-result-pct {
  font-family: 'DM Sans', sans-serif;
  font-size: 28px;
  font-weight: 900;
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   CYCLE 11/10 — ULTRA ANIMATION UPGRADE — 5 Cycles to Perfection
   Critic standard: 11/10. Every animation DRAMATICALLY elevated.
   ========================================================================== */


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 1: QUIZ FULLSCREEN — DRAMATIC PRESS + CORRECT GREEN EXPLOSION  ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 1A. OPTION PRESS — 5px border-bottom, 3px+ translateY, TRUE 3D depth ── */
.fs-option {
  border-bottom: 5px solid rgba(194,186,176,.55) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  transition: all .08s ease, box-shadow .12s ease !important;
}
.fs-option:active {
  border-bottom-width: 2px !important;
  transform: translateY(3px) scale(.985) !important;
  transition-duration: .03s !important;
  box-shadow: 0 0 2px rgba(0,0,0,.06) !important;
  filter: brightness(.97);
}
/* Hover state — lifted with gold tint */
.fs-option:hover {
  transform: translateY(-2px) scale(1.005) !important;
  box-shadow: 0 6px 20px rgba(249,200,67,.15), 0 2px 6px rgba(0,0,0,.06) !important;
  border-color: rgba(249,200,67,.5) !important;
  border-bottom-color: rgba(249,200,67,.65) !important;
}

/* ── 1B. CORRECT — DRAMATIC GREEN FLASH with EXPANDING RING SHOCKWAVE ──── */
.fs-option.correct {
  border-color: #58CC02 !important;
  border-bottom: 5px solid #3BA001 !important;
  background: rgba(88,204,2,.1) !important;
  animation: correctMegaFlash .8s ease-out both, correctElasticBounce .6s var(--spring) .1s both !important;
  box-shadow: 0 4px 30px rgba(88,204,2,.35), 0 0 0 0 rgba(88,204,2,.3) !important;
}
@keyframes correctMegaFlash {
  0%   { background: rgba(88,204,2,.7) !important; box-shadow: 0 0 80px rgba(88,204,2,.6), inset 0 0 40px rgba(255,255,255,.4), 0 0 0 0 rgba(88,204,2,.5) !important; }
  8%   { box-shadow: 0 0 70px rgba(88,204,2,.55), inset 0 0 30px rgba(255,255,255,.3), 0 0 0 10px rgba(88,204,2,.25) !important; }
  20%  { background: rgba(88,204,2,.4) !important; box-shadow: 0 0 50px rgba(88,204,2,.4), 0 0 0 20px rgba(88,204,2,.1) !important; }
  40%  { background: rgba(88,204,2,.2) !important; box-shadow: 0 0 30px rgba(88,204,2,.25), 0 0 0 28px rgba(88,204,2,0) !important; }
  70%  { background: rgba(88,204,2,.12) !important; }
  100% { background: rgba(88,204,2,.1) !important; box-shadow: 0 4px 30px rgba(88,204,2,.35) !important; }
}
@keyframes correctElasticBounce {
  0%   { transform: scale(1); }
  15%  { transform: scale(1.07) translateY(-3px); }
  30%  { transform: scale(.97) translateY(1px); }
  50%  { transform: scale(1.03) translateY(-1px); }
  70%  { transform: scale(.99); }
  100% { transform: scale(1); }
}

/* ── 1C. CORRECT EXPANDING RING — ONE-TIME shockwave burst, NOT infinite ── */
.fs-option.correct::after {
  content: '' !important;
  position: absolute !important;
  inset: -2px !important;
  border-radius: 20px !important;
  border: 3px solid rgba(88,204,2,.6) !important;
  box-shadow: 0 0 30px rgba(88,204,2,.4), 0 0 60px rgba(88,204,2,.15), inset 0 0 20px rgba(88,204,2,.1) !important;
  animation: correctRingShockwave 1s ease-out both !important;
  pointer-events: none !important;
}
@keyframes correctRingShockwave {
  0%   { inset: -2px; opacity: 1; border-color: rgba(88,204,2,.8); box-shadow: 0 0 40px rgba(88,204,2,.5), 0 0 80px rgba(88,204,2,.2); }
  25%  { inset: -12px; opacity: .7; border-color: rgba(88,204,2,.5); box-shadow: 0 0 50px rgba(88,204,2,.3), 0 0 100px rgba(88,204,2,.1); }
  50%  { inset: -22px; opacity: .4; border-color: rgba(88,204,2,.3); box-shadow: 0 0 30px rgba(88,204,2,.15); }
  75%  { inset: -30px; opacity: .15; border-color: rgba(88,204,2,.1); }
  100% { inset: -38px; opacity: 0; border-color: rgba(88,204,2,0); box-shadow: none; }
}

/* Second ring — delayed shockwave for double-ring effect */
.fs-option.correct::before {
  content: '' !important;
  position: absolute !important;
  inset: -2px !important;
  border-radius: 20px !important;
  border: 2px solid rgba(120,216,32,.5) !important;
  animation: correctRingShockwave2 1.2s ease-out .15s both !important;
  pointer-events: none !important;
  z-index: 3 !important;
}
@keyframes correctRingShockwave2 {
  0%   { inset: -2px; opacity: .8; border-color: rgba(120,216,32,.6); }
  30%  { inset: -16px; opacity: .5; border-color: rgba(120,216,32,.3); }
  60%  { inset: -28px; opacity: .2; border-color: rgba(120,216,32,.1); }
  100% { inset: -42px; opacity: 0; border-color: rgba(120,216,32,0); }
}

/* ── 1D. WRONG ANSWER — Violent shake with rotation + red tint ──────────── */
.fs-option.wrong {
  border-color: #E53E3E !important;
  border-bottom: 5px solid #B83030 !important;
  background: rgba(229,62,62,.08) !important;
  animation: wrongViolentShake .6s ease-out both !important;
}
@keyframes wrongViolentShake {
  0%   { transform: translateX(0) rotate(0); background: rgba(229,62,62,.25); }
  5%   { transform: translateX(-16px) rotate(-4deg); }
  10%  { transform: translateX(16px) rotate(4deg); }
  15%  { transform: translateX(-14px) rotate(-3.5deg); }
  20%  { transform: translateX(14px) rotate(3.5deg); }
  25%  { transform: translateX(-11px) rotate(-2.5deg); }
  30%  { transform: translateX(11px) rotate(2.5deg); background: rgba(229,62,62,.15); }
  38%  { transform: translateX(-8px) rotate(-1.5deg); }
  46%  { transform: translateX(8px) rotate(1.5deg); }
  55%  { transform: translateX(-5px) rotate(-1deg); }
  65%  { transform: translateX(5px) rotate(.5deg); }
  75%  { transform: translateX(-2px) rotate(0); }
  85%  { transform: translateX(1px); }
  100% { transform: translateX(0) rotate(0); background: rgba(229,62,62,.08); }
}

/* ── 1E. OPTIONS STAGGER ENTRANCE — Spring with overshoot ───────────────── */
.fs-option {
  animation: fsOptInSpring .45s var(--elastic) both !important;
}
.fs-option:nth-child(1) { animation-delay: .04s !important; }
.fs-option:nth-child(2) { animation-delay: .1s !important; }
.fs-option:nth-child(3) { animation-delay: .16s !important; }
.fs-option:nth-child(4) { animation-delay: .22s !important; }
.fs-option:nth-child(5) { animation-delay: .28s !important; }
.fs-option:nth-child(6) { animation-delay: .34s !important; }

@keyframes fsOptInSpring {
  0%   { opacity: 0; transform: translateY(24px) scale(.9); }
  50%  { opacity: 1; transform: translateY(-4px) scale(1.02); }
  70%  { transform: translateY(1px) scale(.998); }
  85%  { transform: translateY(-1px) scale(1.002); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 2: PAGE TRANSITIONS + BOTTOM NAV SLIDING INDICATOR             ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 2A. PAGE TRANSITIONS — Smooth directional slides with depth ────────── */
.page-slide-forward {
  animation: pageSlideForward .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes pageSlideForward {
  0%   { transform: translateX(80px) scale(.97); opacity: 0; filter: blur(3px); }
  30%  { filter: blur(1px); }
  60%  { opacity: 1; }
  100% { transform: translateX(0) scale(1); opacity: 1; filter: blur(0); }
}

.page-slide-backward {
  animation: pageSlideBackward .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes pageSlideBackward {
  0%   { transform: translateX(-80px) scale(.97); opacity: 0; filter: blur(3px); }
  30%  { filter: blur(1px); }
  60%  { opacity: 1; }
  100% { transform: translateX(0) scale(1); opacity: 1; filter: blur(0); }
}

.page-slide-out-forward {
  animation: pageSlideOutForward .3s cubic-bezier(.4,0,1,1) both;
}
@keyframes pageSlideOutForward {
  0%   { transform: translateX(0) scale(1); opacity: 1; }
  100% { transform: translateX(-40%) scale(.95); opacity: 0; filter: blur(2px); }
}

.page-slide-out-backward {
  animation: pageSlideOutBackward .3s cubic-bezier(.4,0,1,1) both;
}
@keyframes pageSlideOutBackward {
  0%   { transform: translateX(0) scale(1); opacity: 1; }
  100% { transform: translateX(40%) scale(.95); opacity: 0; filter: blur(2px); }
}

/* Page zoom entrance — for main views */
.page-zoom-in {
  animation: pageZoomIn .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes pageZoomIn {
  0%   { transform: scale(.92); opacity: 0; filter: blur(4px); }
  40%  { filter: blur(1px); }
  100% { transform: scale(1); opacity: 1; filter: blur(0); }
}

/* ── 2B. BOTTOM NAV — Sliding pill indicator between tabs ───────────────── */
.p-nav {
  position: relative;
}

/* Sliding indicator — THIN gold line on top, NOT a full rectangle */
.p-nav-slider {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 28px;
  background: linear-gradient(90deg, var(--g1, #F9C843), var(--g2, #F07020));
  border-radius: 0 0 3px 3px;
  transition: left .35s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(249,200,67,.3);
}

/* Active nav item — stronger styling */
.p-nav-item.active {
  position: relative;
  z-index: 1;
}
.p-nav-item.active svg {
  transform: scale(1.15);
  transition: transform .35s var(--spring);
  filter: drop-shadow(0 0 6px rgba(240,112,32,.3));
}
.p-nav-item.active .p-nav-label {
  color: var(--g2) !important;
  font-weight: 700 !important;
  transform: scale(1.05) !important;
  transition: all .3s var(--spring) !important;
}

/* Nav item tap — juicier bounce */
.p-nav-item:active {
  transform: scale(.88) !important;
  transition: transform .05s ease !important;
}
.p-nav-item:active svg {
  animation: navIconSmash .35s var(--spring) !important;
}
@keyframes navIconSmash {
  0%   { transform: scale(.7) translateY(4px); }
  40%  { transform: scale(1.35) translateY(-5px); }
  65%  { transform: scale(1.1) translateY(-1px); }
  85%  { transform: scale(1.2) translateY(-2px); }
  100% { transform: scale(1.15); }
}

/* Gold dot — bigger and glowier */
.p-nav-item.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: 4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--g2) !important;
  box-shadow: 0 0 10px rgba(240,112,32,.5), 0 0 20px rgba(240,112,32,.2) !important;
  animation: navDotGlowPop .4s var(--spring) both !important;
}
@keyframes navDotGlowPop {
  from { transform: translateX(-50%) scale(0); opacity: 0; }
  50%  { transform: translateX(-50%) scale(1.5); opacity: 1; }
  to   { transform: translateX(-50%) scale(1); opacity: 1; }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 3: CARDS SPRING BOUNCE + TILE 3D PRESS + CONFETTI PHYSICS      ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 3A. CARDS — using original tilePopIn from section above ────────── */
/* tileSpringIn removed — was overriding with !important and causing glitches */

/* Wider stagger delays for dramatic cascade */
.nav-tile:nth-child(1)  { animation-delay: .02s !important; }
.nav-tile:nth-child(2)  { animation-delay: .08s !important; }
.nav-tile:nth-child(3)  { animation-delay: .14s !important; }
.nav-tile:nth-child(4)  { animation-delay: .20s !important; }
.nav-tile:nth-child(5)  { animation-delay: .26s !important; }
.nav-tile:nth-child(6)  { animation-delay: .32s !important; }
.nav-tile:nth-child(7)  { animation-delay: .38s !important; }
.nav-tile:nth-child(8)  { animation-delay: .44s !important; }
.nav-tile:nth-child(9)  { animation-delay: .50s !important; }
.nav-tile:nth-child(10) { animation-delay: .56s !important; }
.nav-tile:nth-child(11) { animation-delay: .62s !important; }
.nav-tile:nth-child(12) { animation-delay: .68s !important; }

/* Topic cards — same spring treatment */
.topic-card {
  animation: topicSpringIn .5s var(--elastic) both !important;
}
@keyframes topicSpringIn {
  0%   { opacity: 0; transform: translateX(24px) scale(.95); }
  45%  { opacity: 1; transform: translateX(-4px) scale(1.02); }
  65%  { transform: translateX(1px) scale(.998); }
  80%  { transform: translateX(-1px) scale(1.002); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Lektura cards — spring entrance with vertical bounce */
.lektura-card {
  animation: lekturaSpringIn .5s var(--elastic) both !important;
}
@keyframes lekturaSpringIn {
  0%   { opacity: 0; transform: translateY(20px) scale(.93); }
  45%  { opacity: 1; transform: translateY(-4px) scale(1.02); }
  65%  { transform: translateY(1px) scale(.99); }
  80%  { transform: translateY(-1px) scale(1.005); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 3B. TILE PRESS — Real 3D depth, shadow reduction, perspective tilt ─── */
.nav-tile:active {
  border-bottom-width: 2px !important;
  transform: perspective(600px) rotateX(6deg) translateY(3px) scale(.96) !important;
  transition-duration: .04s !important;
  filter: brightness(.96) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
}
/* Restore shadow on hover */
.nav-tile:hover {
  transform: translateY(-6px) scale(1.025) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.06) !important;
  filter: brightness(1.06) !important;
}

/* ── 3C. CONFETTI — More shapes, colors, realistic physics ──────────────── */
/* New confetti shapes */
.confetti-diamond {
  width: 8px; height: 8px;
  transform: rotate(45deg);
  border-radius: 2px;
}
.confetti-ribbon {
  width: 3px; height: 16px;
  border-radius: 1px;
}
.confetti-ring {
  width: 10px; height: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent !important;
}
.confetti-heart {
  width: 10px; height: 10px;
  clip-path: path('M5 9 C5 9 0 5 0 3 C0 1 2 0 3.5 0 C4.5 0 5 1 5 1 C5 1 5.5 0 6.5 0 C8 0 10 1 10 3 C10 5 5 9 5 9');
}

/* New confetti colors */
.confetti-lime    { background: #84CC16; color: #84CC16; }
.confetti-rose    { background: #F43F5E; color: #F43F5E; }
.confetti-amber   { background: #F59E0B; color: #F59E0B; }
.confetti-violet  { background: #7C3AED; color: #7C3AED; }
.confetti-emerald { background: #10B981; color: #10B981; }
.confetti-sky     { background: #38BDF8; color: #38BDF8; }
.confetti-fuchsia { background: #D946EF; color: #D946EF; }

/* Realistic physics — gravity + wind + tumble */
.confetti-physics {
  animation: confettiPhysics var(--fall-dur, 3.5s) cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes confettiPhysics {
  0%   { transform: translateY(0) translateX(0) rotate(0deg) scale(1); opacity: 1; }
  10%  { transform: translateY(6vh) translateX(var(--wind, 15px)) rotate(120deg) scale(1); opacity: 1; }
  25%  { transform: translateY(22vh) translateX(calc(var(--wind, 15px) * -0.6)) rotate(260deg) scale(.95); opacity: 1; }
  45%  { transform: translateY(45vh) translateX(calc(var(--wind, 15px) * 0.8)) rotate(400deg) scale(.85); opacity: .9; }
  65%  { transform: translateY(65vh) translateX(calc(var(--wind, 15px) * -0.4)) rotate(540deg) scale(.7); opacity: .6; }
  85%  { transform: translateY(85vh) translateX(calc(var(--wind, 15px) * 0.3)) rotate(660deg) scale(.5); opacity: .3; }
  100% { transform: translateY(105vh) translateX(var(--wind, 15px)) rotate(var(--rot, 720deg)) scale(.3); opacity: 0; }
}

/* Confetti flutter — leaf-like motion */
.confetti-flutter {
  animation: confettiFlutter var(--fall-dur, 4s) ease-in-out forwards;
}
@keyframes confettiFlutter {
  0%   { transform: translateY(0) translateX(0) rotateX(0) rotateZ(0) scale(1); opacity: 1; }
  15%  { transform: translateY(12vh) translateX(25px) rotateX(90deg) rotateZ(45deg); opacity: 1; }
  30%  { transform: translateY(28vh) translateX(-15px) rotateX(180deg) rotateZ(90deg); opacity: .9; }
  45%  { transform: translateY(42vh) translateX(20px) rotateX(270deg) rotateZ(180deg); opacity: .8; }
  60%  { transform: translateY(58vh) translateX(-20px) rotateX(360deg) rotateZ(270deg); opacity: .6; }
  80%  { transform: translateY(78vh) translateX(10px) rotateX(450deg) rotateZ(360deg); opacity: .3; }
  100% { transform: translateY(100vh) translateX(0) rotateX(540deg) rotateZ(450deg) scale(.4); opacity: 0; }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 4: STREAK FIRE (TRUE FLAME) + LEADERBOARD EPIC ENTRIES         ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 4A. STREAK FIRE — Multi-layer REAL flame with heat distortion ──────── */
.streak-fire-animated {
  width: 64px !important;
  height: 76px !important;
  filter: drop-shadow(0 0 18px rgba(255,100,0,.5)) drop-shadow(0 0 40px rgba(255,60,0,.25)) drop-shadow(0 -4px 12px rgba(255,200,0,.2)) !important;
}

/* Core flame — white-hot center */
.streak-fire-animated .flame-core {
  width: 30px !important;
  height: 48px !important;
  background: linear-gradient(0deg,
    #FF6B00 0%,
    #FF9500 20%,
    #FFBE0B 40%,
    #FFE066 65%,
    rgba(255,255,255,.95) 90%,
    rgba(255,255,255,1) 100%
  ) !important;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% !important;
  animation: flameCoreUltra .6s ease-in-out infinite alternate !important;
}
@keyframes flameCoreUltra {
  0%   { transform: translateX(-50%) scaleX(1) scaleY(1) rotate(-1.5deg); }
  20%  { transform: translateX(-50%) scaleX(1.06) scaleY(1.1) rotate(1deg); }
  40%  { transform: translateX(-50%) scaleX(.94) scaleY(1.14) rotate(-2.5deg); }
  60%  { transform: translateX(-50%) scaleX(1.08) scaleY(1.06) rotate(2deg); }
  80%  { transform: translateX(-50%) scaleX(.96) scaleY(1.12) rotate(-1deg); }
  100% { transform: translateX(-50%) scaleX(1.02) scaleY(1.08) rotate(.5deg); }
}

/* Outer flame — orange envelope */
.streak-fire-animated .flame-outer {
  width: 46px !important;
  height: 62px !important;
  background: linear-gradient(0deg,
    #BF360C 0%,
    #E65100 15%,
    #FF6D00 35%,
    #FF9100 55%,
    rgba(255,183,77,.5) 80%,
    transparent 100%
  ) !important;
  opacity: .75 !important;
  animation: flameOuterUltra .8s ease-in-out infinite alternate !important;
}
@keyframes flameOuterUltra {
  0%   { transform: translateX(-50%) scaleX(1) scaleY(1) rotate(1.5deg); }
  30%  { transform: translateX(-50%) scaleX(1.12) scaleY(1.18) rotate(-2.5deg); }
  60%  { transform: translateX(-50%) scaleX(.88) scaleY(1.12) rotate(2deg); }
  100% { transform: translateX(-50%) scaleX(1.05) scaleY(1.08) rotate(-1deg); }
}

/* Third flame layer — blue base (hottest part) */
.streak-fire-animated .flame-core::before {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  width: 16px; height: 12px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(100,149,237,.4) 0%, rgba(65,105,225,.2) 50%, transparent 70%);
  border-radius: 50%;
  animation: flameBlueBase .5s ease-in-out infinite alternate;
}
@keyframes flameBlueBase {
  0%   { opacity: .6; transform: translateX(-50%) scaleX(1); }
  100% { opacity: .9; transform: translateX(-50%) scaleX(1.2); }
}

/* Heat distortion haze */
.streak-fire-animated .flame-core::after {
  content: '';
  position: absolute;
  top: -20px; left: 50%;
  width: 30px; height: 24px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(255,200,0,.08) 0%, transparent 70%);
  animation: heatHaze .7s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes heatHaze {
  0%   { transform: translateX(-50%) translateY(0) scaleX(1); opacity: .4; }
  100% { transform: translateX(-50%) translateY(-6px) scaleX(1.3); opacity: .7; }
}

/* Bigger glow */
.streak-fire-animated .flame-glow {
  width: 100px !important;
  height: 100px !important;
  background: radial-gradient(circle, rgba(255,140,0,.3) 0%, rgba(255,100,0,.15) 30%, transparent 70%) !important;
  animation: flameGlowUltra 1.2s ease-in-out infinite !important;
}
@keyframes flameGlowUltra {
  0%, 100% { opacity: .5; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1; transform: translateX(-50%) scale(1.4); }
}

/* More sparks — varied sizes and trajectories */
.streak-fire-animated .spark {
  width: 3px !important; height: 3px !important;
  background: #FFD54F !important;
  box-shadow: 0 0 4px rgba(255,213,79,.8) !important;
  animation: sparkRiseUltra var(--spark-dur, 1s) ease-out infinite !important;
}
@keyframes sparkRiseUltra {
  0%   { transform: translate(0, 0) scale(1.2); opacity: 1; }
  30%  { opacity: .9; }
  60%  { opacity: .5; }
  100% { transform: translate(var(--spark-x, 10px), var(--spark-y, -50px)) scale(0); opacity: 0; }
}

/* Streak fire pill — enhanced pulse */
.fs-streak-pill .fire {
  animation: firePulseUltra 1s ease-in-out infinite !important;
  filter: drop-shadow(0 0 4px rgba(255,100,0,.3));
}
@keyframes firePulseUltra {
  0%, 100% { transform: scale(1) translateY(0) rotate(0); }
  20%      { transform: scale(1.15) translateY(-2px) rotate(-3deg); }
  40%      { transform: scale(1.08) translateY(-1px) rotate(2deg); }
  60%      { transform: scale(1.12) translateY(-2px) rotate(-2deg); }
  80%      { transform: scale(1.05) translateY(-1px) rotate(1deg); }
}

/* ── 4B. LEADERBOARD TOP 3 — EPIC dramatic entrances ────────────────────── */

/* Gold #1 — Dramatic scale + rotation + golden shower */
.lb-row.rank-1, .lb-list .lb-row:nth-child(1) {
  animation: goldRowEntrance .8s var(--spring) .15s both !important;
  background: linear-gradient(90deg, rgba(255,215,0,.15), rgba(255,215,0,.06)) !important;
  border: 2px solid rgba(255,215,0,.3) !important;
  box-shadow: 0 4px 24px rgba(255,215,0,.15), 0 0 0 0 rgba(255,215,0,.1) !important;
}
@keyframes goldRowEntrance {
  0%   { opacity: 0; transform: translateX(-60px) scale(.7) rotate(-3deg); }
  30%  { opacity: 1; transform: translateX(8px) scale(1.04) rotate(.5deg); }
  50%  { transform: translateX(-3px) scale(.99) rotate(-.2deg); }
  70%  { transform: translateX(1px) scale(1.01); }
  100% { opacity: 1; transform: translateX(0) scale(1) rotate(0); }
}

/* Gold shimmer overlay — animated */
.lb-row.rank-1::before, .lb-list .lb-row:nth-child(1)::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(110deg, transparent 20%, rgba(255,215,0,.12) 40%, rgba(255,215,0,.2) 50%, rgba(255,215,0,.12) 60%, transparent 80%) !important;
  background-size: 250% 100% !important;
  animation: goldShimmerSlide 3s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
@keyframes goldShimmerSlide {
  0%   { background-position: 150% 0; }
  50%  { background-position: -50% 0; }
  100% { background-position: 150% 0; }
}

/* Silver #2 — Slide from right with bounce */
.lb-row.rank-2, .lb-list .lb-row:nth-child(2) {
  animation: silverRowEntrance .7s var(--spring) .35s both !important;
  background: linear-gradient(90deg, rgba(192,192,192,.12), rgba(192,192,192,.04)) !important;
  border: 2px solid rgba(192,192,192,.25) !important;
}
@keyframes silverRowEntrance {
  0%   { opacity: 0; transform: translateX(50px) scale(.8); }
  35%  { opacity: 1; transform: translateX(-6px) scale(1.02); }
  60%  { transform: translateX(2px) scale(.99); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Bronze #3 — Rise from below with fade */
.lb-row.rank-3, .lb-list .lb-row:nth-child(3) {
  animation: bronzeRowEntrance .7s var(--spring) .55s both !important;
  background: linear-gradient(90deg, rgba(205,127,50,.12), rgba(205,127,50,.04)) !important;
  border: 2px solid rgba(205,127,50,.25) !important;
}
@keyframes bronzeRowEntrance {
  0%   { opacity: 0; transform: translateY(30px) scale(.85); }
  40%  { opacity: 1; transform: translateY(-5px) scale(1.02); }
  65%  { transform: translateY(1px) scale(.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Medal font size — bigger for podium */
.lb-row.rank-1 .lb-rank, .lb-list .lb-row:nth-child(1) .lb-rank {
  font-size: 26px !important;
  filter: drop-shadow(0 0 8px rgba(255,215,0,.5)) !important;
  animation: goldRankPulse 2s ease-in-out infinite !important;
}
@keyframes goldRankPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255,215,0,.4)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 14px rgba(255,215,0,.6)); transform: scale(1.08); }
}

/* Avatar ring for podium */
.lb-row.rank-1 .lb-avatar, .lb-list .lb-row:nth-child(1) .lb-avatar {
  box-shadow: 0 0 0 3px #FFD700, 0 0 16px rgba(255,215,0,.4) !important;
  animation: avatarGoldGlow 2.5s ease-in-out infinite !important;
}
@keyframes avatarGoldGlow {
  0%, 100% { box-shadow: 0 0 0 3px #FFD700, 0 0 12px rgba(255,215,0,.3); }
  50%      { box-shadow: 0 0 0 4px #FFD700, 0 0 22px rgba(255,215,0,.5); }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 5: PROGRESS BAR + MASCOT GLOW + SCREEN FLASH ENHANCEMENT       ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 5A. PROGRESS BAR — 16px height, green, glass 3D effect ─────────────── */
.fs-progress-wrap {
  height: 16px !important;
  border-radius: 10px !important;
  background: rgba(194,186,176,.18) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.1), 0 1px 2px rgba(255,255,255,.5) !important;
}
.fs-progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #4CAF50, #58CC02, #6BD80C, #78D820) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 16px rgba(88,204,2,.4), 0 0 4px rgba(88,204,2,.6), inset 0 -3px 4px rgba(0,0,0,.15) !important;
  transition: width .6s cubic-bezier(.22,1,.36,1) !important;
}
/* Glass highlight — wide, bright */
.fs-progress-fill::after {
  content: '' !important;
  position: absolute !important;
  top: 2px !important; left: 3px !important; right: 3px !important;
  height: 6px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.15) 100%) !important;
  border-radius: 6px !important;
}
/* Shimmer — faster and brighter */
.fs-progress-fill::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -50% !important;
  width: 50% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent) !important;
  animation: shimmerSweepFast 1.8s ease-in-out infinite !important;
}
@keyframes shimmerSweepFast {
  0%   { left: -50%; }
  100% { left: 150%; }
}

/* Pulsating glow at the tip of progress */
.fs-progress-fill {
  position: relative !important;
}

/* ── 5B. MASCOT GLOW — Warm, large ambient glow behind mascot ───────────── */
.mascot-container::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  width: 180px !important; height: 180px !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(circle,
    rgba(249,200,67,.25) 0%,
    rgba(249,200,67,.15) 25%,
    rgba(240,112,32,.08) 50%,
    rgba(249,200,67,.04) 70%,
    transparent 85%
  ) !important;
  border-radius: 50% !important;
  animation: mascotWarmGlow 3s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
@keyframes mascotWarmGlow {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .6; filter: blur(0); }
  50%      { transform: translate(-50%, -50%) scale(1.2); opacity: 1; filter: blur(2px); }
}

/* Second layer — outer warm haze */
.mascot-container::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 220px; height: 220px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(249,200,67,.1) 0%,
    rgba(240,112,32,.05) 40%,
    transparent 70%
  );
  border-radius: 50%;
  animation: mascotOuterHaze 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes mascotOuterHaze {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .4; }
  50%      { transform: translate(-50%, -50%) scale(1.15); opacity: .7; }
}

/* Mascot glow classes — stronger */
.mascot-glow::before {
  width: 170% !important; height: 170% !important;
  background: radial-gradient(circle, rgba(249,200,67,.22) 0%, rgba(240,112,32,.08) 40%, transparent 70%) !important;
  animation: glowPulseWarm 2s ease-in-out infinite !important;
}
@keyframes glowPulseWarm {
  0%, 100% { opacity: .5; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.25); filter: blur(3px); }
}

/* ── 5C. SCREEN FLASH — Even more dramatic with vignette ────────────────── */
.fs-screen-flash-correct {
  animation: screenFlashGreenUltra .7s ease-out both !important;
}
@keyframes screenFlashGreenUltra {
  0%   { box-shadow: inset 0 0 200px rgba(88,204,2,.4), inset 0 0 400px rgba(88,204,2,.12); }
  10%  { box-shadow: inset 0 0 160px rgba(88,204,2,.35), inset 0 0 300px rgba(88,204,2,.1); }
  25%  { box-shadow: inset 0 0 100px rgba(88,204,2,.22); }
  50%  { box-shadow: inset 0 0 50px rgba(88,204,2,.1); }
  100% { box-shadow: inset 0 0 0 rgba(88,204,2,0); }
}

.fs-screen-flash-wrong {
  animation: screenFlashRedUltra .6s ease-out both !important;
}
@keyframes screenFlashRedUltra {
  0%   { box-shadow: inset 0 0 180px rgba(229,62,62,.3), inset 0 0 350px rgba(229,62,62,.1); }
  12%  { box-shadow: inset 0 0 120px rgba(229,62,62,.22); }
  30%  { box-shadow: inset 0 0 60px rgba(229,62,62,.12); }
  55%  { box-shadow: inset 0 0 25px rgba(229,62,62,.05); }
  100% { box-shadow: inset 0 0 0 rgba(229,62,62,0); }
}

/* ── 5D. LEADERBOARD PODIUM — Animated pedestals ────────────────────────── */
.lb-podium-place {
  animation: podiumRise .7s var(--spring) both;
}
.lb-podium-place.second { animation-delay: .1s; }
.lb-podium-place.first  { animation-delay: .25s; }
.lb-podium-place.third  { animation-delay: .4s; }

@keyframes podiumRise {
  0%   { opacity: 0; transform: translateY(40px) scale(.8); }
  50%  { opacity: 1; transform: translateY(-8px) scale(1.05); }
  70%  { transform: translateY(2px) scale(.98); }
  85%  { transform: translateY(-2px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 5E. CELEBRATION OVERLAY — Enhanced with golden burst + scale ────────── */
.celebration-overlay {
  animation: celebEntranceUltra .6s var(--ease) both !important;
}
@keyframes celebEntranceUltra {
  0%   { opacity: 0; backdrop-filter: blur(0); }
  30%  { opacity: .7; }
  100% { opacity: 1; backdrop-filter: blur(4px); }
}

.celebration-overlay::before {
  width: 400px !important; height: 400px !important;
  background: radial-gradient(circle,
    rgba(249,200,67,.2) 0%,
    rgba(88,204,2,.1) 30%,
    rgba(249,200,67,.05) 50%,
    transparent 70%
  ) !important;
  animation: celebBurstUltra 2.5s ease-out both !important;
}
@keyframes celebBurstUltra {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  30%  { opacity: .8; }
  60%  { transform: translate(-50%, -50%) scale(1.5); opacity: .4; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* ── 5F. OPTION LETTER — Stronger 3D ────────────────────────────────────── */
.fs-option-letter {
  border-bottom: 4px solid rgba(194,186,176,.5) !important;
  background: rgba(247,244,238,.6) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  transition: all .12s var(--ease) !important;
}
.fs-option:hover .fs-option-letter {
  border-color: rgba(249,200,67,.4) !important;
  background: rgba(249,200,67,.08) !important;
  color: var(--g2) !important;
}

/* ── 5G. QUIZ FULLSCREEN — Smoother entrance ────────────────────────────── */
.tasks-fullscreen {
  animation: fsSlideUpUltra .55s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes fsSlideUpUltra {
  0%   { transform: translateY(100%) scale(.98); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.tasks-fullscreen.closing {
  animation: fsSlideDownUltra .4s var(--ease) both !important;
}
@keyframes fsSlideDownUltra {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(100%) scale(.97); opacity: 0; }
}

/* ── 5H. CONTINUE BUTTON — Stronger breathing pulse ─────────────────────── */
.fs-continue-btn.green {
  box-shadow: 0 4px 0 #46A302, 0 6px 20px rgba(88,204,2,.3) !important;
}
.fs-continue-btn.green:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 #46A302, 0 8px 28px rgba(88,204,2,.35) !important;
  filter: brightness(1.06) !important;
}
.fs-continue-btn.green:active {
  border-bottom-width: 2px !important;
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #46A302, 0 2px 6px rgba(88,204,2,.15) !important;
  transition-duration: .04s !important;
}

/* ── 5I. VIEW TRANSITION — Content stagger enhanced ─────────────────────── */
.view-content-stagger > * {
  animation: viewStaggerInElastic .5s var(--elastic) both !important;
}
@keyframes viewStaggerInElastic {
  0%   { opacity: 0; transform: translateY(20px) scale(.97); }
  50%  { opacity: 1; transform: translateY(-3px) scale(1.01); }
  70%  { transform: translateY(1px) scale(.998); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 2 FIX: Animation priority — correct/wrong MUST override base   ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* Fix: correct/wrong/disabled states override base option animation */
.fs-option.correct {
  animation: correctMegaFlash .8s ease-out both, correctElasticBounce .6s var(--spring) .1s both !important;
}
.fs-option.wrong {
  animation: wrongViolentShake .6s ease-out both !important;
}
.fs-option.disabled {
  animation: none !important;
  transition: opacity .5s var(--ease), filter .5s var(--ease), transform .3s var(--ease) !important;
}
.fs-option.correct.disabled,
.fs-option.wrong.disabled,
.fs-option.reveal.disabled {
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 2 EXTRA: Progress bar tip glow + Confetti spiral               ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* Progress bar — pulsating green dot at the tip */
.fs-progress-fill-tip {
  position: absolute;
  right: -2px; top: 50%;
  width: 10px; height: 10px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #78D820;
  box-shadow: 0 0 8px rgba(88,204,2,.6), 0 0 16px rgba(88,204,2,.3);
  animation: progressTipPulse 1.5s ease-in-out infinite;
  z-index: 3;
}
@keyframes progressTipPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(88,204,2,.5), 0 0 12px rgba(88,204,2,.2); transform: translateY(-50%) scale(1); }
  50%      { box-shadow: 0 0 12px rgba(88,204,2,.7), 0 0 24px rgba(88,204,2,.4); transform: translateY(-50%) scale(1.3); }
}

/* Confetti spiral — spinning descent */
.confetti-spiral {
  animation: confettiSpiral var(--fall-dur, 3.5s) linear forwards;
}
@keyframes confettiSpiral {
  0%   { transform: translateY(0) translateX(0) rotate(0deg) scale(1); opacity: 1; }
  12%  { transform: translateY(10vh) translateX(20px) rotate(120deg); }
  25%  { transform: translateY(22vh) translateX(-15px) rotate(250deg); opacity: .95; }
  37%  { transform: translateY(35vh) translateX(25px) rotate(390deg); }
  50%  { transform: translateY(48vh) translateX(-20px) rotate(520deg); opacity: .7; }
  62%  { transform: translateY(60vh) translateX(15px) rotate(660deg); }
  75%  { transform: translateY(72vh) translateX(-10px) rotate(800deg); opacity: .4; }
  87%  { transform: translateY(85vh) translateX(8px) rotate(920deg); }
  100% { transform: translateY(100vh) translateX(0) rotate(1080deg) scale(.3); opacity: 0; }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 3 EXTRA: Inactive nav hover + LB row hover lift               ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* Bottom nav — inactive items have subtle hover */
.p-nav-item:not(.active):hover {
  transform: translateY(-2px);
  transition: transform .2s var(--spring);
}
.p-nav-item:not(.active):hover svg {
  transform: scale(1.08);
  transition: transform .2s var(--spring);
  opacity: .85;
}
.p-nav-item:not(.active):hover .p-nav-label {
  color: var(--ink);
  transition: color .2s var(--ease);
}

/* Leaderboard rows — hover lift with subtle shadow */
.lb-row:hover {
  transform: translateX(5px) translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(26,23,19,.08) !important;
  transition: all .2s var(--ease) !important;
}
.lb-row.rank-1:hover, .lb-list .lb-row:nth-child(1):hover {
  box-shadow: 0 6px 24px rgba(255,215,0,.2) !important;
}
.lb-row.rank-2:hover, .lb-list .lb-row:nth-child(2):hover {
  box-shadow: 0 5px 20px rgba(192,192,192,.15) !important;
}
.lb-row.rank-3:hover, .lb-list .lb-row:nth-child(3):hover {
  box-shadow: 0 5px 20px rgba(205,127,50,.15) !important;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 4 EXTRA: Topic card hover glow + Quiz option letter glow      ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* Topic cards — hover with themed border glow */
.topic-card:hover {
  transform: translateX(5px) translateY(-2px) !important;
  border-color: var(--g1) !important;
  box-shadow: 0 6px 20px rgba(249,200,67,.12), 0 2px 6px rgba(0,0,0,.04) !important;
}
.topic-card:active {
  border-bottom-width: 2px !important;
  transform: translateY(2px) scale(.99) !important;
  transition-duration: .04s !important;
  box-shadow: none !important;
}

/* Correct option letter — green glow ring */
.fs-option.correct .fs-option-letter {
  box-shadow: 0 0 12px rgba(88,204,2,.4), 0 0 0 2px rgba(88,204,2,.2) !important;
  border-color: #58CC02 !important;
  border-bottom-color: #46A302 !important;
}

/* Wrong option letter — red glow */
.fs-option.wrong .fs-option-letter {
  box-shadow: 0 0 10px rgba(229,62,62,.35), 0 0 0 2px rgba(229,62,62,.15) !important;
  border-color: #E53E3E !important;
  border-bottom-color: #C53030 !important;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 5 EXTRA: Tab toggle smooth transitions + Streak calendar glow ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* Tab toggle — smooth background transition */
.tasks-sub-toggle button {
  transition: all .25s var(--ease) !important;
}
.tasks-sub-toggle button.active {
  background: linear-gradient(180deg, #FFFFFF, #FEFCF7) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(249,200,67,.1) !important;
  border-bottom: 2px solid rgba(249,200,67,.3) !important;
  transform: translateY(-1px);
}
.tasks-sub-toggle button:not(.active):hover {
  background: rgba(249,200,67,.04) !important;
  color: var(--ink) !important;
}

/* Streak calendar — done dots stronger glow */
.streak-cal-dot.done {
  background: #58CC02 !important;
  color: white !important;
  box-shadow: 0 2px 10px rgba(88,204,2,.35), 0 0 0 2px rgba(88,204,2,.1) !important;
}
.streak-cal-dot.today {
  box-shadow: 0 0 0 3px rgba(249,200,67,.25), 0 0 12px rgba(249,200,67,.15) !important;
}

/* Streak number — even bigger glow */
.streak-hero-num {
  font-size: 64px !important;
  filter: drop-shadow(0 0 30px rgba(249,200,67,.35)) drop-shadow(0 0 60px rgba(240,112,32,.15)) drop-shadow(0 2px 4px rgba(0,0,0,.1)) !important;
}

/* Result strip — stronger entrance */
.fs-result-strip {
  animation: stripSlideUpSpring .4s var(--spring) both !important;
}
@keyframes stripSlideUpSpring {
  0%   { opacity: 0; transform: translateY(24px) scale(.95); }
  50%  { opacity: 1; transform: translateY(-3px) scale(1.01); }
  70%  { transform: translateY(1px) scale(.998); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Correct result strip — green border glow */
.fs-result-strip.correct {
  background: rgba(88,204,2,.12) !important;
  border: 2px solid rgba(88,204,2,.25) !important;
  box-shadow: 0 0 16px rgba(88,204,2,.1) !important;
}

/* Wrong result strip — red tint */
.fs-result-strip.wrong {
  background: rgba(229,62,62,.08) !important;
  border: 2px solid rgba(229,62,62,.18) !important;
  box-shadow: 0 0 12px rgba(229,62,62,.06) !important;
}

/* Solution panel — smoother reveal */
.fs-solution-panel {
  animation: solutionRevealSmooth .5s var(--ease) both !important;
}
@keyframes solutionRevealSmooth {
  from { opacity: 0; max-height: 0; padding: 0 16px; margin-top: 0; transform: translateY(10px); }
  to   { opacity: 1; max-height: 400px; padding: 14px 16px; margin-top: 12px; transform: translateY(0); }
}

/* XP popup — bigger, bouncier */
.xp-popup {
  font-size: 40px !important;
  text-shadow: 0 0 24px rgba(88,204,2,.5), 0 0 48px rgba(88,204,2,.25), 0 2px 4px rgba(0,0,0,.1) !important;
}

/* Celebration mascot — bigger bounce */
.celeb-mascot {
  font-size: 88px !important;
  filter: drop-shadow(0 10px 30px rgba(249,200,67,.3)) !important;
}

/* Toast notifications — bouncier entrance */
.toast-notification {
  animation: toastInBounce .5s var(--spring) both !important;
}
@keyframes toastInBounce {
  0%   { transform: translateX(-50%) translateY(-40px) scale(.85); opacity: 0; }
  45%  { transform: translateX(-50%) translateY(5px) scale(1.03); opacity: 1; }
  65%  { transform: translateX(-50%) translateY(-2px) scale(.99); }
  80%  { transform: translateX(-50%) translateY(1px) scale(1.005); }
  100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 3: Book cards spring + Back btn juice + Trophy drama           ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── Book cards — Spring entrance with subtle rotation ──────────────────── */
.book-card {
  animation: bookCardSpring .5s var(--elastic) both !important;
}
.book-card:nth-child(1)  { animation-delay: .03s !important; }
.book-card:nth-child(2)  { animation-delay: .09s !important; }
.book-card:nth-child(3)  { animation-delay: .15s !important; }
.book-card:nth-child(4)  { animation-delay: .21s !important; }
.book-card:nth-child(5)  { animation-delay: .27s !important; }
.book-card:nth-child(6)  { animation-delay: .33s !important; }
.book-card:nth-child(7)  { animation-delay: .39s !important; }
.book-card:nth-child(8)  { animation-delay: .45s !important; }
.book-card:nth-child(9)  { animation-delay: .51s !important; }
.book-card:nth-child(10) { animation-delay: .57s !important; }

@keyframes bookCardSpring {
  0%   { opacity: 0; transform: translateY(18px) scale(.92) rotate(-.5deg); }
  45%  { opacity: 1; transform: translateY(-3px) scale(1.015) rotate(.2deg); }
  65%  { transform: translateY(1px) scale(.998); }
  80%  { transform: translateY(-.5px) scale(1.003); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* ── Back button — Juicy 3D press with arrow spring ─────────────────────── */
.tasks-back-btn {
  transition: all .12s ease !important;
  border-bottom: 3px solid rgba(194,186,176,.4) !important;
}
.tasks-back-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.06) !important;
  border-color: var(--g1) !important;
  border-bottom-color: rgba(249,200,67,.45) !important;
  background: rgba(249,200,67,.04) !important;
}
.tasks-back-btn:active {
  border-bottom-width: 1px !important;
  transform: translateY(2px) !important;
  transition-duration: .04s !important;
  box-shadow: none !important;
}
.tasks-back-btn:hover .arrow {
  transform: translateX(-5px) !important;
  transition: transform .2s var(--spring) !important;
}

/* ── Trophy animation — More dramatic bounce with tilt ──────────────────── */
.lb-trophy {
  animation: trophyUltraBounce 2.5s var(--ease) infinite !important;
  filter: drop-shadow(0 6px 18px rgba(255,215,0,.4)) !important;
}
@keyframes trophyUltraBounce {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  8%       { transform: translateY(-10px) rotate(-10deg) scale(1.08); }
  18%      { transform: translateY(-3px) rotate(0) scale(1); }
  28%      { transform: translateY(-8px) rotate(8deg) scale(1.05); }
  38%      { transform: translateY(-2px) rotate(0) scale(1); }
  50%      { transform: translateY(-6px) rotate(-6deg) scale(1.03); }
  62%      { transform: translateY(-1px) rotate(0) scale(1); }
  75%      { transform: translateY(-4px) rotate(4deg) scale(1.02); }
  87%      { transform: translateY(-1px) rotate(0) scale(1); }
}

/* ── Start button hero — Stronger pulse + glow ──────────────────────────── */
.start-btn-hero {
  animation: startBtnBreatheUltra 2s ease-in-out infinite !important;
}
@keyframes startBtnBreatheUltra {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 0 #46A302, 0 6px 20px rgba(88,204,2,.25), 0 0 0 0 rgba(88,204,2,0);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 5px 0 #46A302, 0 10px 35px rgba(88,204,2,.4), 0 0 0 8px rgba(88,204,2,.08);
  }
}

/* ── Question text — Scale overshoot on entrance ────────────────────────── */
.fs-question-text {
  animation: qTextUltraReveal .55s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes qTextUltraReveal {
  0%   { opacity: 0; transform: translateY(16px) scale(.96); filter: blur(3px); }
  35%  { filter: blur(1px); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.008); filter: blur(0); }
  80%  { transform: translateY(.5px) scale(.999); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ── Celebration burst — Center radial burst ────────────────────────────── */
.celeb-burst-center {
  position: fixed;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 10001;
}
.celeb-burst-particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  animation: burstFromCenter .8s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes burstFromCenter {
  0%   { transform: translate(0, 0) scale(1.5); opacity: 1; }
  40%  { opacity: 1; }
  100% { transform: translate(var(--bx, 50px), var(--by, -80px)) scale(0); opacity: 0; }
}

/* ── Streak hero background — Heat shimmer effect ───────────────────────── */
.streak-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255,140,0,.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(249,200,67,.06) 0%, transparent 50%);
  animation: heatShimmerBg 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes heatShimmerBg {
  0%, 100% { opacity: .5; transform: translateY(0); }
  25%      { opacity: .8; transform: translateY(-2px); }
  50%      { opacity: .6; transform: translateY(1px); }
  75%      { opacity: .9; transform: translateY(-1px); }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 4: Close button 3D + Invite button + Empty state               ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── Close button — Stronger 3D feel ────────────────────────────────────── */
.fs-close-btn {
  border-bottom: 3px solid rgba(194,186,176,.5) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  transition: all .12s ease !important;
}
.fs-close-btn:hover {
  border-color: var(--red) !important;
  border-bottom-color: #C53030 !important;
  color: var(--red) !important;
  background: rgba(229,62,62,.06) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(229,62,62,.1) !important;
}
.fs-close-btn:active {
  border-bottom-width: 1px !important;
  transform: translateY(2px) !important;
  transition-duration: .04s !important;
  box-shadow: none !important;
}

/* ── Invite button — Stronger pulse glow ────────────────────────────────── */
.invite-btn-premium {
  animation: invitePulseUltra 3s ease-in-out infinite !important;
}
@keyframes invitePulseUltra {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 20px rgba(249,200,67,.3), 0 0 0 0 rgba(249,200,67,0);
  }
  50% {
    transform: scale(1.025);
    box-shadow: 0 6px 32px rgba(249,200,67,.45), 0 0 0 6px rgba(249,200,67,.08);
  }
}

/* ── Empty state icon — Bigger float ────────────────────────────────────── */
.empty-state-icon {
  animation: emptyStateFloat 3s ease-in-out infinite !important;
}
@keyframes emptyStateFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-10px) rotate(-3deg); }
  50%      { transform: translateY(-6px) rotate(0); }
  75%      { transform: translateY(-8px) rotate(3deg); }
}

/* ── Milestone card — More dramatic entrance ────────────────────────────── */
.milestone-card {
  animation: milestoneCardUltra .7s var(--spring) .1s both !important;
}
@keyframes milestoneCardUltra {
  0%   { transform: scale(.4) translateY(50px) rotate(-5deg); opacity: 0; }
  35%  { opacity: 1; }
  55%  { transform: scale(1.06) translateY(-12px) rotate(1deg); opacity: 1; }
  70%  { transform: scale(.97) translateY(3px) rotate(-.5deg); }
  85%  { transform: scale(1.02) translateY(-2px); }
  100% { transform: scale(1) translateY(0) rotate(0); opacity: 1; }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 5 FINAL: Streak fire sparks + Lektura tab + micro-polish       ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── Lektura tab buttons — Stronger 3D ──────────────────────────────────── */
.lektura-tab-btn {
  border-bottom: 3px solid rgba(194,186,176,.4) !important;
  transition: all .12s ease !important;
}
.lektura-tab-btn.active {
  border-color: var(--g1) !important;
  border-bottom: 3px solid rgba(249,200,67,.55) !important;
  background: rgba(249,200,67,.1) !important;
  color: var(--ink) !important;
  box-shadow: 0 2px 8px rgba(249,200,67,.12) !important;
  transform: translateY(-1px) !important;
}
.lektura-tab-btn:active {
  border-bottom-width: 1px !important;
  transform: translateY(2px) !important;
  transition-duration: .04s !important;
  box-shadow: none !important;
}

/* ── Speech bubble — Bouncier entrance ──────────────────────────────────── */
.mascot-speech {
  animation: speechPopUltra .45s var(--spring) both !important;
}
@keyframes speechPopUltra {
  0%   { opacity: 0; transform: translateX(-50%) scale(.5) translateY(14px); }
  50%  { opacity: 1; transform: translateX(-50%) scale(1.06) translateY(-2px); }
  70%  { transform: translateX(-50%) scale(.98) translateY(1px); }
  100% { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
}

/* ── Exam tag — Pop with rotation ───────────────────────────────────────── */
.fs-exam-tag {
  animation: tagPopUltra .35s var(--spring) .15s both !important;
}
@keyframes tagPopUltra {
  0%   { transform: scale(.5) rotate(-8deg); opacity: 0; }
  50%  { transform: scale(1.1) rotate(2deg); opacity: 1; }
  70%  { transform: scale(.97) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ── Wiersz card — Purple glow on hover ─────────────────────────────────── */
.wiersz-card:hover {
  border-color: rgba(159,122,234,.3) !important;
  box-shadow: 0 8px 28px rgba(159,122,234,.1), 0 0 0 1px rgba(159,122,234,.05) !important;
  transform: translateY(-3px) !important;
}

/* ── Daily challenge card — Enhanced glow ───────────────────────────────── */
.daily-challenge-card {
  animation: dailyCardSpring .5s var(--elastic) both !important;
}
@keyframes dailyCardSpring {
  0%   { opacity: 0; transform: translateY(24px) scale(.93); }
  45%  { opacity: 1; transform: translateY(-5px) scale(1.02); }
  65%  { transform: translateY(1px) scale(.998); }
  80%  { transform: translateY(-1px) scale(1.003); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Path nodes — Stronger current pulse ────────────────────────────────── */
.path-node.current {
  animation: pathNodeCurrentUltra 2s ease-in-out infinite !important;
}
@keyframes pathNodeCurrentUltra {
  0%, 100% {
    box-shadow: 0 4px 0 #D4880A, 0 6px 16px rgba(249,200,67,.2), 0 0 0 0 rgba(249,200,67,0);
  }
  50% {
    box-shadow: 0 4px 0 #D4880A, 0 8px 28px rgba(249,200,67,.4), 0 0 0 10px rgba(249,200,67,.08);
  }
}

/* ── Lang lesson circle — Current glow ──────────────────────────────────── */
.lang-level-node.current {
  animation: langNodeCurrentGlow 2.5s ease-in-out infinite !important;
}
@keyframes langNodeCurrentGlow {
  0%, 100% {
    box-shadow: 0 4px 0 rgba(0,0,0,.15), 0 0 0 0 rgba(249,200,67,0), 0 0 16px rgba(249,200,67,.1);
  }
  50% {
    box-shadow: 0 4px 0 rgba(0,0,0,.15), 0 0 0 10px rgba(249,200,67,.1), 0 0 28px rgba(249,200,67,.2);
  }
}

/* ── Flip card — Smoother transition ────────────────────────────────────── */
.flip-card-inner {
  transition: transform .7s var(--spring) !important;
}

/* ── Achievement badge — Stronger unlock ────────────────────────────────── */
.achievement-badge {
  animation: badgeUnlockUltra .9s var(--spring) both !important;
}
@keyframes badgeUnlockUltra {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  30%  { opacity: 1; }
  50%  { transform: scale(1.25) rotate(15deg); opacity: 1; }
  65%  { transform: scale(.92) rotate(-5deg); }
  80%  { transform: scale(1.08) rotate(3deg); }
  90%  { transform: scale(.98) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ── Notification badge — Juicier bounce ────────────────────────────────── */
.notification-badge {
  animation: badgeBounceUltra .5s var(--spring) both !important;
}
@keyframes badgeBounceUltra {
  0%   { transform: scale(0); }
  40%  { transform: scale(1.4); }
  60%  { transform: scale(.85); }
  75%  { transform: scale(1.15); }
  87%  { transform: scale(.95); }
  100% { transform: scale(1); }
}

/* ── Live activity banner — Stronger entrance ───────────────────────────── */
.live-activity-banner {
  animation: laBannerInUltra .5s var(--spring) both !important;
}
@keyframes laBannerInUltra {
  0%   { transform: translateY(-100%) scale(.98); }
  60%  { transform: translateY(3px) scale(1.005); }
  80%  { transform: translateY(-1px); }
  100% { transform: translateY(0) scale(1); }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 4: Modal spring + Skeleton polish + Reward glow + Tab slide    ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── Modal — Springier entrance with bounce ─────────────────────────────── */
.modal-content {
  animation: modalSlideUpSpring .45s var(--spring) both !important;
}
@keyframes modalSlideUpSpring {
  0%   { transform: translateY(100%); }
  60%  { transform: translateY(-6px); }
  80%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

.modal-center {
  animation: modalCenterSpring .5s var(--spring) both !important;
}
@keyframes modalCenterSpring {
  0%   { transform: translate(-50%, -50%) scale(.75); opacity: 0; }
  50%  { transform: translate(-50%, -50%) scale(1.04); opacity: 1; }
  70%  { transform: translate(-50%, -50%) scale(.98); }
  85%  { transform: translate(-50%, -50%) scale(1.01); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ── Skeleton loading — Smoother, wider gradient ────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    rgba(194,186,176,.1) 0%,
    rgba(194,186,176,.08) 20%,
    rgba(194,186,176,.2) 45%,
    rgba(194,186,176,.25) 50%,
    rgba(194,186,176,.2) 55%,
    rgba(194,186,176,.08) 80%,
    rgba(194,186,176,.1) 100%
  ) !important;
  background-size: 250% 100% !important;
  animation: skeletonShimmerSmooth 1.8s ease-in-out infinite !important;
}
@keyframes skeletonShimmerSmooth {
  0%   { background-position: 250% 0; }
  100% { background-position: -250% 0; }
}

/* ── Rewards — Glow shadows ─────────────────────────────────────────────── */
.coin-reward {
  filter: drop-shadow(0 0 8px rgba(255,215,0,.4));
  animation: coinSpinUltra 1.2s var(--spring) both !important;
}
@keyframes coinSpinUltra {
  0%   { transform: scale(0) rotateY(0); opacity: 0; filter: drop-shadow(0 0 0 transparent); }
  30%  { transform: scale(1.3) rotateY(180deg); opacity: 1; filter: drop-shadow(0 0 12px rgba(255,215,0,.5)); }
  60%  { transform: scale(.9) rotateY(300deg); }
  80%  { transform: scale(1.1) rotateY(340deg); }
  100% { transform: scale(1) rotateY(360deg); opacity: 1; filter: drop-shadow(0 0 8px rgba(255,215,0,.3)); }
}

.heart-reward {
  filter: drop-shadow(0 0 6px rgba(229,62,62,.3));
  animation: heartPopUltra .7s var(--spring) both !important;
}
@keyframes heartPopUltra {
  0%   { transform: scale(0); }
  25%  { transform: scale(1.5); }
  40%  { transform: scale(.8); }
  55%  { transform: scale(1.2); }
  70%  { transform: scale(.95); }
  85%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.star-reward {
  filter: drop-shadow(0 0 8px rgba(249,200,67,.4));
  animation: starTwinkleUltra .9s var(--spring) both !important;
}
@keyframes starTwinkleUltra {
  0%   { transform: scale(0) rotate(-45deg); opacity: 0; }
  30%  { transform: scale(1.4) rotate(10deg); opacity: 1; filter: drop-shadow(0 0 14px rgba(249,200,67,.6)); }
  50%  { transform: scale(.85) rotate(-8deg); }
  65%  { transform: scale(1.15) rotate(5deg); }
  80%  { transform: scale(.95) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ── Tab indicator — Smooth position transition ─────────────────────────── */
.tasks-sub-toggle .tab-indicator {
  height: 3px !important;
  background: linear-gradient(90deg, var(--g1), var(--g2)) !important;
  border-radius: 3px !important;
  box-shadow: 0 0 10px rgba(249,200,67,.35) !important;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), width .35s var(--ease) !important;
}

/* ── Spinner — Smoother rotation ────────────────────────────────────────── */
.spinner {
  border: 3px solid rgba(194,186,176,.15) !important;
  border-top: 3px solid var(--g2, #F07020) !important;
  animation: spinnerSmooth .7s cubic-bezier(.4,.15,.6,.85) infinite !important;
}
@keyframes spinnerSmooth {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Floating particles — Larger, more visible ──────────────────────────── */
.float-item {
  opacity: .07 !important;
  filter: blur(.5px);
}

/* ── Step dots — Animated current width ─────────────────────────────────── */
.step-dot.current {
  animation: stepDotCurrentPulse 2s ease-in-out infinite !important;
}
@keyframes stepDotCurrentPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249,200,67,.2); }
  50%      { box-shadow: 0 0 0 4px rgba(249,200,67,.1); }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 5 FINAL: Micro-interactions polish — every detail 11/10        ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── Toggle switch — Springier thumb movement ───────────────────────────── */
.toggle-switch::after {
  transition: transform .3s var(--spring) !important;
}
.toggle-switch.on {
  box-shadow: 0 0 8px rgba(88,204,2,.2) !important;
}

/* ── Tooltip — Scale with direction ─────────────────────────────────────── */
.tooltip {
  animation: tooltipInSpring .25s var(--spring) both !important;
}
@keyframes tooltipInSpring {
  0%   { opacity: 0; transform: scale(.7) translateY(6px); }
  60%  { transform: scale(1.05) translateY(-1px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Scroll hint — Stronger bounce ──────────────────────────────────────── */
.scroll-hint {
  animation: scrollHintBounceUltra 2s ease-in-out infinite !important;
}
@keyframes scrollHintBounceUltra {
  0%, 100% { transform: translateY(0); opacity: .25; }
  50%      { transform: translateY(8px); opacity: .7; }
}

/* ── Exam timer warning — More dramatic flash ───────────────────────────── */
.exam-timer.warning {
  animation: examTimerWarnUltra .8s ease-in-out infinite !important;
}
@keyframes examTimerWarnUltra {
  0%, 100% { opacity: 1; background: rgba(229,62,62,.2); }
  50%      { opacity: .5; background: rgba(229,62,62,.35); transform: scale(1.05); }
}

/* ── Landscape blocker — Phone icon bigger rotation ─────────────────────── */
.landscape-blocker-icon {
  animation: rotatePhoneUltra 2.5s ease-in-out infinite !important;
}
@keyframes rotatePhoneUltra {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20%      { transform: rotate(90deg) scale(1.1); }
  40%      { transform: rotate(90deg) scale(1.1); }
  60%      { transform: rotate(0deg) scale(1); }
}

/* ── Gradient text — Animated gradient shift ────────────────────────────── */
.text-gradient-gold {
  background-size: 200% 200% !important;
  animation: gradientShift 4s ease-in-out infinite !important;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── Level up effect — More dramatic burst ──────────────────────────────── */
.level-up-effect {
  animation: levelUpBurstUltra .9s var(--spring) both !important;
}
@keyframes levelUpBurstUltra {
  0%   { transform: scale(.3); opacity: 0; }
  20%  { transform: scale(1.5); opacity: 1; filter: brightness(1.3); }
  35%  { transform: scale(.85); filter: brightness(1); }
  50%  { transform: scale(1.2); }
  65%  { transform: scale(.95); }
  80%  { transform: scale(1.08); }
  90%  { transform: scale(.98); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Level up ring — Bigger expansion ───────────────────────────────────── */
.level-up-ring {
  animation: levelUpRingUltra .9s ease-out both !important;
}
@keyframes levelUpRingUltra {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; border-width: 4px; }
  50%  { opacity: .6; border-width: 2px; }
  100% { transform: translate(-50%, -50%) scale(4); opacity: 0; border-width: 1px; }
}

/* ── Hover utilities — More responsive ──────────────────────────────────── */
.hover-lift:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.1) !important;
}
.hover-scale:hover {
  transform: scale(1.04) !important;
}
.hover-glow:hover {
  box-shadow: 0 0 28px rgba(249,200,67,.2) !important;
}

/* ── Press 3D — Deeper press ────────────────────────────────────────────── */
.press-3d {
  border-bottom-width: 5px !important;
}
.press-3d:active {
  border-bottom-width: 2px !important;
  transform: translateY(3px) !important;
  transition-duration: .04s !important;
}

/* ── Confetti new color: white shimmer ──────────────────────────────────── */
.confetti-white {
  background: rgba(255,255,255,.9);
  color: rgba(255,255,255,.9);
  box-shadow: 0 0 4px rgba(255,255,255,.5);
}
.confetti-silver {
  background: #C0C0C0;
  color: #C0C0C0;
  box-shadow: 0 0 3px rgba(192,192,192,.4);
}

/* ── Mascot idle — Tail-like subtle rotation ────────────────────────────── */
.mascot-fox {
  animation: mascotBounceUltra 2.5s ease-in-out infinite !important;
}
@keyframes mascotBounceUltra {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-6px) rotate(-.5deg); }
  50%      { transform: translateY(-10px) rotate(.5deg); }
  75%      { transform: translateY(-4px) rotate(-.3deg); }
}

/* Mascot happy — BIGGER joy bounce */
.mascot-fox.happy {
  animation: mascotHappyUltra .7s var(--spring) !important;
  filter: drop-shadow(0 10px 28px rgba(88,204,2,.25)) !important;
}
@keyframes mascotHappyUltra {
  0%   { transform: translateY(0) scale(1) rotate(0); }
  15%  { transform: translateY(-30px) scale(1.2) rotate(-8deg); }
  30%  { transform: translateY(-12px) scale(1.05) rotate(5deg); }
  45%  { transform: translateY(-22px) scale(1.12) rotate(-4deg); }
  60%  { transform: translateY(-6px) scale(1.02) rotate(3deg); }
  75%  { transform: translateY(-14px) scale(1.06) rotate(-2deg); }
  90%  { transform: translateY(-3px) scale(1.01) rotate(1deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}

/* Mascot sad — Deeper droopy effect */
.mascot-fox.sad {
  animation: mascotSadUltra .6s var(--ease) !important;
  filter: drop-shadow(0 2px 6px rgba(229,62,62,.2)) !important;
}
@keyframes mascotSadUltra {
  0%   { transform: translateY(0) rotate(0) scale(1); }
  10%  { transform: translateY(8px) rotate(-12deg) scale(.95); }
  25%  { transform: translateY(5px) rotate(8deg) scale(.97); }
  40%  { transform: translateY(7px) rotate(-5deg) scale(.96); }
  55%  { transform: translateY(4px) rotate(3deg) scale(.98); }
  70%  { transform: translateY(3px) rotate(-2deg); }
  85%  { transform: translateY(1px) rotate(1deg); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}

/* Mascot celebrate — Bigger party */
.mascot-fox.celebrate {
  animation: mascotCelebrateUltra 1.2s var(--spring) !important;
  filter: drop-shadow(0 14px 36px rgba(249,200,67,.35)) !important;
}
@keyframes mascotCelebrateUltra {
  0%   { transform: scale(1) rotate(0); }
  8%   { transform: scale(1.4) rotate(-14deg); }
  18%  { transform: scale(1.08) rotate(12deg); }
  28%  { transform: scale(1.3) rotate(-10deg); }
  38%  { transform: scale(1.04) rotate(8deg); }
  48%  { transform: scale(1.2) rotate(-6deg); }
  58%  { transform: scale(1.02) rotate(5deg); }
  68%  { transform: scale(1.12) rotate(-3deg); }
  78%  { transform: scale(1.01) rotate(2deg); }
  88%  { transform: scale(1.05) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 5 FINAL: Last micro-polish — confetti hex + header pop +       ║
   ║  celeb glow + loading bounce + mascot typing dots                     ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── Confetti hexagon shape ─────────────────────────────────────────────── */
.confetti-hexagon {
  width: 10px; height: 10px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* ── Confetti cross shape ───────────────────────────────────────────────── */
.confetti-cross {
  width: 10px; height: 10px;
  clip-path: polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%);
}

/* ── Confetti moon shape ────────────────────────────────────────────────── */
.confetti-moon {
  width: 10px; height: 10px;
  clip-path: polygon(50% 0%, 70% 10%, 85% 30%, 85% 70%, 70% 90%, 50% 100%, 60% 85%, 65% 65%, 65% 35%, 60% 15%);
}

/* ── Section header — Scale pop entrance ────────────────────────────────── */
.tasks-section-header {
  animation: headerPopIn .5s var(--spring) both !important;
}
@keyframes headerPopIn {
  0%   { opacity: 0; transform: scale(.94) translateY(-6px); }
  50%  { transform: scale(1.015) translateY(1px); }
  70%  { transform: scale(.998) translateY(-.5px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Section title — Dramatic text entrance ─────────────────────────────── */
.tasks-section-title {
  animation: titleGlideIn .5s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes titleGlideIn {
  0%   { opacity: 0; transform: translateY(-12px) scale(.97); filter: blur(2px); }
  40%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ── Celebration streak card — Golden animated border ───────────────────── */
.celeb-streak-card {
  position: relative !important;
  border: 2px solid rgba(249,200,67,.2) !important;
  animation: fadeInUp .5s var(--spring) .35s both, celebCardGlow 3s ease-in-out infinite 1s !important;
}
@keyframes celebCardGlow {
  0%, 100% { border-color: rgba(249,200,67,.2); box-shadow: 0 0 0 0 rgba(249,200,67,0); }
  50%      { border-color: rgba(249,200,67,.4); box-shadow: 0 0 20px rgba(249,200,67,.12); }
}

/* ── Loading dots — Juicier bounce ──────────────────────────────────────── */
.loading-dots span {
  animation: loadingDotBounce 1s ease-in-out infinite !important;
}
@keyframes loadingDotBounce {
  0%, 70%, 100% { transform: scale(.5) translateY(0); opacity: .3; }
  25%           { transform: scale(1.2) translateY(-6px); opacity: 1; }
  40%           { transform: scale(.9) translateY(2px); opacity: .8; }
}

/* ── Mascot typing dots — Faster, bouncier ──────────────────────────────── */
.mascot-speech-typing span {
  animation: typingDotBounce 1s ease-in-out infinite !important;
}
@keyframes typingDotBounce {
  0%, 65%, 100% { transform: translateY(0) scale(.8); opacity: .3; }
  25%           { transform: translateY(-8px) scale(1.1); opacity: 1; }
  40%           { transform: translateY(1px) scale(.95); opacity: .7; }
}

/* ── Podium names — Bold for top 3 ──────────────────────────────────────── */
.lb-row.rank-1 .lb-name, .lb-list .lb-row:nth-child(1) .lb-name {
  font-weight: 800 !important;
  color: var(--ink) !important;
}
.lb-row.rank-2 .lb-name, .lb-list .lb-row:nth-child(2) .lb-name {
  font-weight: 700 !important;
}
.lb-row.rank-3 .lb-name, .lb-list .lb-row:nth-child(3) .lb-name {
  font-weight: 700 !important;
}

/* ── Podium days count — Stronger for gold ──────────────────────────────── */
.lb-row.rank-1 .lb-days-num, .lb-list .lb-row:nth-child(1) .lb-days-num {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #D4880A !important;
  text-shadow: 0 0 8px rgba(255,215,0,.2);
}

/* ── Quiz meta — Smoother entrance ──────────────────────────────────────── */
.fs-question-meta {
  animation: metaFadeIn .4s var(--ease) .12s both !important;
}
@keyframes metaFadeIn {
  0%   { opacity: 0; transform: translateY(8px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Calendar row — Smoother stagger ────────────────────────────────────── */
.streak-cal-row {
  animation: calRowFadeIn .4s var(--ease) .1s both;
}
@keyframes calRowFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Streak hero label — Fade with delay ────────────────────────────────── */
.streak-hero-label {
  animation: fadeInUp .4s var(--ease) .2s both !important;
}

/* ── Page card (p-card) — Elastic spring entrance ───────────────────────── */
.p-card {
  animation: pCardSpring .5s var(--elastic) both !important;
}
@keyframes pCardSpring {
  0%   { opacity: 0; transform: translateY(20px) scale(.94); }
  45%  { opacity: 1; transform: translateY(-3px) scale(1.015); }
  65%  { transform: translateY(1px) scale(.998); }
  80%  { transform: translateY(-.5px) scale(1.002); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Fullscreen body — Smooth scroll fades ──────────────────────────────── */
.fs-body::before {
  height: 28px !important;
  background: linear-gradient(180deg, #FFFDF7 0%, rgba(255,253,247,.8) 50%, transparent 100%) !important;
}
.fs-body::after {
  height: 28px !important;
  background: linear-gradient(0deg, #FFFDF7 0%, rgba(255,253,247,.8) 50%, transparent 100%) !important;
}

/* ── Quiz correct/wrong — Option text bold change ───────────────────────── */
.fs-option.correct .fs-option-text {
  color: #2F7A00 !important;
  font-weight: 700 !important;
}
.fs-option.wrong .fs-option-text {
  color: #B83030 !important;
  text-decoration: line-through;
  text-decoration-color: rgba(229,62,62,.3);
}

/* ── Invite emoji — Wiggle with scale ───────────────────────────────────── */
.lb-invite-emoji {
  animation: wiggleScale 2.5s ease-in-out infinite !important;
}
@keyframes wiggleScale {
  0%, 100% { transform: rotate(0) scale(1); }
  10%      { transform: rotate(-12deg) scale(1.1); }
  20%      { transform: rotate(12deg) scale(1.05); }
  30%      { transform: rotate(-8deg) scale(1.08); }
  40%      { transform: rotate(5deg) scale(1); }
  50%      { transform: rotate(0) scale(1); }
}

/* ── Progress ring SVG — Smoother transition ────────────────────────────── */
.progress-ring circle {
  transition: stroke-dashoffset 1s cubic-bezier(.22,1,.36,1) !important;
}

/* ── Border gradient animated — Smoother speed ──────────────────────────── */
.border-gradient-animated::before {
  animation: borderRotate 4s linear infinite !important;
}

/* ── Reduced motion — Everything still respects it ──────────────────────── */
/* NOTE: The reduced-motion media query at line ~2339 covers all of these
   with !important overrides. No changes needed there. */

/* END v6.1 */

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  v7.0 — FULLSCREEN QUIZ PERFECTION — 10 Cycles of Absolute Polish    ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── Progress bar: 14px, GREEN Duolingo, glass effect ──────────────────── */
.fs-progress-wrap {
  height: 14px !important;
  border-radius: 8px !important;
  background: rgba(194,186,176,.12) !important;
  box-shadow: inset 0 1.5px 4px rgba(0,0,0,.06), 0 0.5px 0 rgba(255,255,255,.6) !important;
}
.fs-progress-fill {
  border-radius: 8px !important;
  background: linear-gradient(90deg, #58CC02 0%, #6EDE12 40%, #7BE818 60%, #58CC02 100%) !important;
  background-size: 200% 100% !important;
  animation: progressGradientFlow 3s ease-in-out infinite !important;
  box-shadow: 0 0 10px rgba(88,204,2,.3), 0 0 20px rgba(88,204,2,.12), inset 0 -1.5px 2px rgba(0,0,0,.1) !important;
}
@keyframes progressGradientFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.fs-progress-fill::after {
  top: 1.5px !important; left: 3px !important; right: 3px !important;
  height: 4px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.15) 100%) !important;
  border-radius: 4px !important;
}

/* ── Streak pill — micro bounce fire ───────────────────────────────────── */
.fs-streak-pill {
  background: rgba(249,200,67,.1) !important;
  border: 1.5px solid rgba(249,200,67,.15) !important;
  border-radius: 24px !important;
  padding: 5px 12px !important;
}
.fs-streak-pill .fire {
  animation: fireEmoji 1.2s ease-in-out infinite !important;
}
@keyframes fireEmoji {
  0%, 100% { transform: scale(1) translateY(0); }
  20%      { transform: scale(1.15) translateY(-2px); }
  40%      { transform: scale(1.05) translateY(-1px); }
}

/* ── Close button — refined 3D ─────────────────────────────────────────── */
.fs-close-btn {
  width: 38px !important; height: 38px !important;
  border-radius: 12px !important;
  border: 2px solid rgba(194,186,176,.2) !important;
  border-bottom: 3px solid rgba(194,186,176,.35) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}

/* ── Question text — 20px, bold, centered, line-height 1.5 ────────────── */
.fs-question-text {
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  max-width: 90% !important;
  margin: 0 auto 12px !important;
  letter-spacing: -.2px !important;
}
.fs-question-text-entrance {
  animation: qTextEntranceV2 .5s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes qTextEntranceV2 {
  0%   { opacity: 0; transform: translateY(16px) scale(.97); filter: blur(2px); }
  50%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ── Options — 15px, 600wt, 54px min-h, 3D Duolingo press ─────────────── */
.fs-options {
  margin-top: auto !important;
  padding-bottom: 10px !important;
  gap: 10px !important;
}
.fs-option {
  font-size: 15px !important;
  font-weight: 600 !important;
  min-height: 54px !important;
  border: 2.5px solid rgba(194,186,176,.3) !important;
  border-bottom: 4px solid rgba(194,186,176,.5) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  gap: 12px !important;
  will-change: transform, border-bottom-width !important;
}
.fs-option:nth-child(1) { animation-delay: .05s !important; }
.fs-option:nth-child(2) { animation-delay: .11s !important; }
.fs-option:nth-child(3) { animation-delay: .17s !important; }
.fs-option:nth-child(4) { animation-delay: .23s !important; }
.fs-option:hover {
  border-color: rgba(194,186,176,.5) !important;
  background: rgba(249,200,67,.03) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.04) !important;
}
.fs-option:active {
  border-bottom-width: 2px !important;
  transform: translateY(2px) !important;
  transition-duration: .03s !important;
  box-shadow: none !important;
}

/* Letter badge — 32px circle */
.fs-option-letter {
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(194,186,176,.25) !important;
  border-bottom: 3px solid rgba(194,186,176,.4) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  background: rgba(247,244,238,.6) !important;
}

/* CORRECT — green 3D + glow */
.fs-option.correct {
  border-color: #58CC02 !important;
  border-bottom: 4px solid #46A302 !important;
  background: rgba(88,204,2,.08) !important;
  box-shadow: 0 4px 20px rgba(88,204,2,.18) !important;
}
.fs-option.correct .fs-option-letter {
  background: #58CC02 !important;
  border-color: #58CC02 !important;
  border-bottom-color: #46A302 !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(88,204,2,.3) !important;
}

/* WRONG — red shake (6px, 0.5s) */
.fs-option.wrong {
  border-color: #E53E3E !important;
  border-bottom: 4px solid #C53030 !important;
  background: rgba(229,62,62,.06) !important;
  animation: fsOptIn .35s var(--spring) both, wrongShakeV2 .5s var(--ease) !important;
}
@keyframes wrongShakeV2 {
  0%       { transform: translateX(0); }
  10%, 30% { transform: translateX(-6px); }
  20%, 40% { transform: translateX(6px); }
  50%      { transform: translateX(-4px); }
  60%      { transform: translateX(4px); }
  70%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
  100%     { transform: translateX(0); }
}
.fs-option.wrong .fs-option-letter {
  background: #E53E3E !important;
  border-color: #E53E3E !important;
  border-bottom-color: #C53030 !important;
  color: white !important;
}

/* Reveal correct after wrong — green pulse */
.fs-option.reveal {
  border-color: #58CC02 !important;
  border-bottom-color: #46A302 !important;
  background: rgba(88,204,2,.06) !important;
  animation: revealPulseV2 1.5s var(--ease) both !important;
}
@keyframes revealPulseV2 {
  0%   { box-shadow: 0 0 0 0 rgba(88,204,2,.4); }
  25%  { box-shadow: 0 0 0 6px rgba(88,204,2,.15), 0 0 20px rgba(88,204,2,.12); }
  50%  { box-shadow: 0 0 0 0 rgba(88,204,2,.2); }
  75%  { box-shadow: 0 0 0 4px rgba(88,204,2,.1); }
  100% { box-shadow: 0 0 0 0 rgba(88,204,2,0); }
}
.fs-option.reveal .fs-option-letter {
  border-color: #58CC02 !important;
  color: #58CC02 !important;
  background: rgba(88,204,2,.08) !important;
}

/* Disabled fade */
.fs-option.disabled {
  opacity: .4 !important;
  filter: grayscale(.15) !important;
  transition: opacity .4s var(--ease), filter .4s var(--ease) !important;
  transform: scale(.97) !important;
}
.fs-option.correct.disabled,
.fs-option.wrong.disabled,
.fs-option.reveal.disabled {
  opacity: 1 !important;
  filter: none !important;
  transform: scale(1) !important;
}

/* ── GREEN SCREEN FLASH — 0.25s overlay ───────────────────────────────── */
.fs-screen-flash-correct::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(88,204,2,.12) !important;
  z-index: 10 !important;
  pointer-events: none !important;
  animation: screenFlashGreen .25s ease-out both !important;
}
@keyframes screenFlashGreen { 0% { opacity: 1; } 100% { opacity: 0; } }

.fs-screen-flash-wrong::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(229,62,62,.08) !important;
  z-index: 10 !important;
  pointer-events: none !important;
  animation: screenFlashRed .3s ease-out both !important;
}
@keyframes screenFlashRed { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ── Correct glow ring — refined pulse ────────────────────────────────── */
.fs-option.correct::after {
  animation: correctGlowRingV2 2s ease-in-out infinite !important;
}
@keyframes correctGlowRingV2 {
  0%   { inset: -4px; opacity: .6; border-color: rgba(88,204,2,.4); box-shadow: 0 0 16px rgba(88,204,2,.2); }
  50%  { inset: -10px; opacity: .2; border-color: rgba(88,204,2,.12); box-shadow: 0 0 32px rgba(88,204,2,.08); }
  100% { inset: -4px; opacity: .6; border-color: rgba(88,204,2,.4); box-shadow: 0 0 16px rgba(88,204,2,.2); }
}

/* ── Result strip — richer feedback ───────────────────────────────────── */
.fs-result-strip {
  padding: 16px 18px !important;
  border-radius: 16px !important;
  margin-bottom: 12px !important;
}
.fs-result-strip.correct {
  background: linear-gradient(135deg, rgba(88,204,2,.1), rgba(88,204,2,.05)) !important;
  border: 2px solid rgba(88,204,2,.2) !important;
}
.fs-result-strip.wrong {
  background: linear-gradient(135deg, rgba(229,62,62,.06), rgba(229,62,62,.03)) !important;
  border: 2px solid rgba(229,62,62,.15) !important;
}

/* ── Slide transition — between questions ─────────────────────────────── */
.slide-in-right-wide {
  animation: slideInRightWideV2 .35s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes slideInRightWideV2 {
  from { opacity: 0; transform: translateX(60px) scale(.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ── Question number badge — gold pill ────────────────────────────────── */
.fs-question-number-badge {
  display: inline-flex !important;
  padding: 4px 12px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(249,200,67,.12), rgba(240,112,32,.08)) !important;
  color: var(--g2) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
  border: 1px solid rgba(249,200,67,.15) !important;
}

/* ── Exam tag — refined ───────────────────────────────────────────────── */
.fs-exam-tag {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
}

/* ── Mascot glow — ambient gold ───────────────────────────────────────── */
.quiz-mascot-glow::before {
  background: radial-gradient(circle, rgba(249,200,67,.1) 0%, rgba(249,200,67,.04) 40%, transparent 70%) !important;
}

/* ── Celebration stars — bouncy entrance ──────────────────────────────── */
.quiz-score-stars {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 16px 0 8px !important;
}
.quiz-score-star {
  font-size: 42px !important;
  animation: starBounceIn .5s var(--spring) both !important;
  filter: drop-shadow(0 4px 12px rgba(255,215,0,.35)) !important;
}
.quiz-score-star:nth-child(1) { animation-delay: .15s !important; }
.quiz-score-star:nth-child(2) { animation-delay: .3s !important; }
.quiz-score-star:nth-child(3) { animation-delay: .45s !important; }
@keyframes starBounceIn {
  0%   { opacity: 0; transform: scale(0) rotate(-30deg); }
  50%  { opacity: 1; transform: scale(1.3) rotate(10deg); }
  70%  { transform: scale(.9) rotate(-5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.quiz-score-star.dim {
  opacity: .15 !important;
  filter: grayscale(1) !important;
}

/* ── Celebration overlay — blur background ────────────────────────────── */
.celebration-overlay {
  background: rgba(255,253,247,.96) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.celebration-overlay::before {
  width: 350px !important; height: 350px !important;
  background: radial-gradient(circle, rgba(249,200,67,.18) 0%, rgba(88,204,2,.1) 35%, transparent 70%) !important;
}
.celeb-title { font-size: 30px !important; font-weight: 900 !important; letter-spacing: -.5px !important; }
.celeb-subtitle { font-size: 16px !important; line-height: 1.6 !important; }
.celeb-streak-card { padding: 22px 36px !important; border-radius: 22px !important; }
.celeb-streak-num { font-size: 52px !important; }
.celeb-actions { margin-top: 24px !important; max-width: 340px !important; width: 100% !important; }

/* ── Confetti from button — burst ─────────────────────────────────────── */
.confetti-from-btn {
  z-index: 10001 !important;
  pointer-events: none !important;
  animation: confettiBurstV2 var(--burst-dur, .8s) cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes confettiBurstV2 {
  0%   { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
  40%  { opacity: 1; }
  100% { transform: translate(var(--bx, 50px), var(--by, -60px)) rotate(var(--br, 360deg)) scale(.3); opacity: 0; }
}

/* ── XP float from button — premium ──────────────────────────────────── */
.xp-float-from-btn {
  font-size: 26px !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 10px rgba(88,204,2,.45), 0 0 16px rgba(88,204,2,.25) !important;
  animation: xpFloatFromBtnV2 1.3s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes xpFloatFromBtnV2 {
  0%   { opacity: 0; transform: translateX(-50%) translateY(0) scale(.5) rotate(-6deg); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(-18px) scale(1.25) rotate(3deg); }
  35%  { transform: translateX(-50%) translateY(-40px) scale(1.05); opacity: 1; }
  65%  { opacity: .85; transform: translateX(-50%) translateY(-75px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-120px) scale(.65); }
}

/* ── XP float quiz — centered ─────────────────────────────────────────── */
.xp-float-quiz {
  font-size: 32px !important;
  font-weight: 900 !important;
  text-shadow: 0 0 16px rgba(88,204,2,.4), 0 0 32px rgba(88,204,2,.15) !important;
}

/* ── Topbar, body, bottom — refined spacing ───────────────────────────── */
.fs-topbar {
  padding: 10px 16px !important;
  padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
  gap: 10px !important;
  border-bottom: 1px solid rgba(194,186,176,.06) !important;
}
.fs-body {
  padding: 12px 20px 8px !important;
}
.fs-bottom-bar {
  padding: 10px 20px !important;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid rgba(194,186,176,.08) !important;
}
.fs-bottom-bar::before { display: none !important; }

/* ── Sound wave ring on correct ───────────────────────────────────────── */
.sound-wave-ring {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid rgba(88,204,2,.3);
  animation: soundWaveExpand .8s ease-out both;
  pointer-events: none;
}
@keyframes soundWaveExpand {
  0%   { inset: -2px; opacity: .8; }
  100% { inset: -16px; opacity: 0; }
}

/* ── Mascot shrink after answer — smoother ────────────────────────────── */
.tasks-fullscreen.fs-answered #fsMascotWrap {
  min-height: 70px !important;
  max-height: 70px !important;
  transition: all .4s cubic-bezier(.22,1,.36,1) !important;
}
.tasks-fullscreen.fs-answered #fsMascot {
  width: 70px !important;
  height: 70px !important;
  transition: all .4s cubic-bezier(.22,1,.36,1) !important;
}

/* ── Reveal badge ─────────────────────────────────────────────────────── */
.fs-reveal-badge {
  position: absolute !important;
  top: -10px !important; right: 12px !important;
  background: linear-gradient(135deg, #58CC02, #46A302) !important;
  color: white !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  border-radius: 10px !important;
  animation: revealBadgePopV2 .45s var(--spring) both !important;
  box-shadow: 0 2px 10px rgba(88,204,2,.35) !important;
  text-transform: uppercase !important;
}
@keyframes revealBadgePopV2 {
  0%   { transform: scale(0) translateY(4px); opacity: 0; }
  60%  { transform: scale(1.15) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ── Exam timer in quiz ───────────────────────────────────────────────── */
.fs-exam-timer {
  text-align: center;
  padding: 8px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #58CC02;
  background: rgba(88,204,2,.04);
  border-bottom: 1px solid rgba(88,204,2,.08);
  transition: all .5s ease;
  flex-shrink: 0;
}
.fs-exam-timer.warning-yellow {
  color: #D69E2E;
  background: rgba(214,158,46,.04);
}
.fs-exam-timer.warning-red {
  color: #E53E3E;
  background: rgba(229,62,62,.04);
}
.fs-exam-timer.warning-critical {
  color: #E53E3E;
  background: rgba(229,62,62,.06);
  animation: timerCriticalPulse 1s ease-in-out infinite;
}
@keyframes timerCriticalPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .6; background: rgba(229,62,62,.1); }
}

/* ── Solution body — collapsible accordion ────────────────────────────── */
.fs-solution-body {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height .4s cubic-bezier(.22,1,.36,1), padding .3s ease !important;
  padding: 0 !important;
}
.fs-solution-body.open {
  max-height: 500px !important;
  padding: 0 !important;
}
.fs-solution-body .fs-solution-panel {
  animation: none !important;
  max-height: none !important;
  margin-top: 8px !important;
}

/* ── Solution toggle button — clean tap target ────────────────────────── */
.fs-solution-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  background: rgba(88,204,2,.04) !important;
  border: 1.5px solid rgba(88,204,2,.1) !important;
  cursor: pointer !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  transition: all .2s ease !important;
  margin-top: 10px !important;
  -webkit-tap-highlight-color: transparent !important;
}
.fs-solution-toggle:hover {
  background: rgba(88,204,2,.07) !important;
  border-color: rgba(88,204,2,.18) !important;
}
.fs-solution-toggle .toggle-arrow {
  transition: transform .3s var(--spring) !important;
  font-size: 16px !important;
  color: var(--ink30) !important;
  font-weight: 800 !important;
}
.fs-solution-toggle.open .toggle-arrow {
  transform: rotate(90deg) !important;
}

/* ── Hint panel — expandable accordion ────────────────────────────────── */
.fs-hint-panel {
  margin-top: 10px !important;
  border-radius: 14px !important;
  border: 1.5px solid rgba(88,204,2,.1) !important;
  background: rgba(88,204,2,.02) !important;
}
.fs-hint-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.hint-arrow {
  transition: transform .3s var(--spring) !important;
  font-size: 13px !important;
  color: var(--ink30) !important;
}
.hint-arrow.open {
  transform: rotate(90deg) !important;
}

/* ── Pronunciation practice ───────────────────────────────────────────── */
.pronunciation-practice {
  margin-top: 12px;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(49,130,206,.04), rgba(49,130,206,.02));
  border: 1.5px solid rgba(49,130,206,.12);
}
.pron-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pron-icon { font-size: 18px; }
.pron-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #2B6CB0; }
.pron-text-display { font-size: 18px; font-weight: 700; color: var(--ink); text-align: center; padding: 8px 0; }
.pron-play-btn {
  display: block; width: 100%; padding: 12px; border: 2px solid rgba(49,130,206,.2);
  border-bottom: 3px solid rgba(49,130,206,.35); border-radius: 14px;
  background: white; font-family: 'DM Sans', sans-serif; font-size: 14px;
  font-weight: 700; color: #2B6CB0; cursor: pointer; transition: all .1s ease;
}
.pron-play-btn:active { border-bottom-width: 2px; transform: translateY(1px); }
.pron-instruction { margin-top: 10px; font-size: 12px; color: var(--ink60); line-height: 1.5; text-align: center; }

/* ── Slide transitions between questions ──────────────────────────────── */
.fs-slide-out {
  animation: fsSlideOutLeft .25s ease-in both !important;
}
@keyframes fsSlideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-60px); }
}
.fs-slide-in {
  animation: fsSlideInRight .3s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes fsSlideInRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Correct letter badge — checkmark ─────────────────────────────────── */
.fs-option.correct .fs-option-letter::after {
  content: '\2713';
  font-size: 16px;
  font-weight: 900;
}
.fs-option.correct .fs-option-letter .letter-text {
  display: none;
}

/* ── Wrong letter badge — X mark ──────────────────────────────────────── */
.fs-option.wrong .fs-option-letter::after {
  content: '\2717';
  font-size: 14px;
  font-weight: 900;
}
.fs-option.wrong .fs-option-letter .letter-text {
  display: none;
}

/* ============================================================================
   QUIZ UX OVERHAUL v7.1 — Solution layout, 60fps, colors, transitions, feel
   ============================================================================ */

/* ── 1. SOLUTION NEVER OVERLAPS QUESTION ──────────────────────────────────── */

.tasks-fullscreen.fs-answered {
  overflow: hidden !important;
}

.tasks-fullscreen.fs-answered .fs-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 90px !important;
  flex: 1 !important;
}

.tasks-fullscreen.fs-answered .fs-bottom-bar {
  flex-shrink: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
}
.tasks-fullscreen.fs-answered .fs-bottom-bar::before {
  display: none !important;
}

/* Solution separator line */
.fs-solution-separator {
  height: 1px;
  margin: 16px 0 12px;
  background: linear-gradient(90deg, transparent, rgba(194,186,176,.35), transparent);
}

/* Solution panel — clear, themed */
.fs-solution-panel {
  margin-top: 0 !important;
  border-left: 4px solid #58CC02 !important;
  border-radius: 4px 14px 14px 4px !important;
  padding: 14px 16px !important;
  background: rgba(88,204,2,.04) !important;
  border: 1.5px solid rgba(88,204,2,.15) !important;
  border-left: 4px solid #58CC02 !important;
  animation: solutionFadeIn7 .35s cubic-bezier(.22,1,.36,1) both !important;
  will-change: opacity, transform !important;
}
.fs-solution-panel.wrong-solution {
  border-left-color: #E53E3E !important;
  background: rgba(229,62,62,.03) !important;
  border-color: rgba(229,62,62,.1) !important;
  border-left-color: #E53E3E !important;
}
@keyframes solutionFadeIn7 {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fixed continue button at bottom */
.fs-continue-fixed {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 12px 20px !important;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  background: linear-gradient(0deg, #FFFDF7 85%, rgba(255,253,247,0) 100%) !important;
  z-index: 10 !important;
  will-change: opacity !important;
  animation: continueSlideUp7 .3s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes continueSlideUp7 {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── 2. GPU ACCELERATION + will-change ────────────────────────────────────── */

.fs-option {
  will-change: transform, border-color, background !important;
  transform: translateZ(0) !important;
  transition: transform .08s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
  backface-visibility: hidden !important;
}

.fs-progress-fill {
  will-change: width !important;
  transition: width .5s cubic-bezier(.22,1,.36,1) !important;
}

.fs-question-text {
  will-change: opacity, transform !important;
}

.fs-body {
  will-change: transform, opacity !important;
}

.fs-result-strip {
  will-change: opacity, transform !important;
}

.confetti-particle,
.confetti-from-btn {
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;
}


/* ── 3. CONSISTENT WARM COLORS ────────────────────────────────────────────── */

.tasks-fullscreen {
  background: #FFFDF7 !important;
}

.fs-topbar {
  background: #FFFDF7 !important;
}
.fs-bottom-bar {
  background: #FFFDF7 !important;
}

.fs-option {
  background: white !important;
  border-color: rgba(194,186,176,.25) !important;
  border-bottom-color: rgba(194,186,176,.55) !important;
  color: #1A1713 !important;
}

.fs-option.correct {
  border-color: #58CC02 !important;
  border-bottom-color: #46A302 !important;
  background: rgba(88,204,2,.08) !important;
  box-shadow: 0 4px 20px rgba(88,204,2,.2) !important;
}
.fs-option.correct .fs-option-letter {
  background: #58CC02 !important;
  border-color: #58CC02 !important;
  border-bottom-color: #46A302 !important;
  color: white !important;
}

.fs-option.wrong {
  border-color: #E53E3E !important;
  border-bottom-color: #C53030 !important;
  background: rgba(229,62,62,.06) !important;
  box-shadow: 0 4px 16px rgba(229,62,62,.15) !important;
}

.fs-progress-fill {
  background: linear-gradient(90deg, #58CC02, #78D820) !important;
}

.fs-question-text {
  color: #1A1713 !important;
}

.fs-result-strip.correct {
  background: rgba(88,204,2,.1) !important;
  border-color: rgba(88,204,2,.2) !important;
}
.fs-result-strip.correct .fs-result-icon {
  background: #58CC02 !important;
}

.btn-3d-green {
  background: #58CC02 !important;
  border-bottom: 5px solid #46A302 !important;
  box-shadow: 0 4px 20px rgba(88,204,2,.3) !important;
}
.btn-3d-green:active {
  border-bottom-width: 2px !important;
  transform: translateY(3px) !important;
}

.btn-3d-gold {
  background: linear-gradient(135deg, #F9C843, #F07020) !important;
  border-bottom: 5px solid #C47A10 !important;
  box-shadow: 0 4px 20px rgba(249,200,67,.35) !important;
}
.btn-3d-gold:active {
  border-bottom-width: 2px !important;
  transform: translateY(3px) !important;
}

.fs-body::before {
  background: linear-gradient(180deg, #FFFDF7 0%, transparent 100%) !important;
}
.fs-body::after {
  background: linear-gradient(0deg, #FFFDF7 0%, transparent 100%) !important;
}


/* ── 4. SMOOTH SLIDE TRANSITIONS (override above) ─────────────────────────── */

.fs-body.fs-slide-out {
  animation: fsSlideOutLeft .25s cubic-bezier(.22,1,.36,1) both !important;
  pointer-events: none !important;
}
.fs-body.fs-slide-in {
  animation: fsSlideInRight .25s cubic-bezier(.22,1,.36,1) both !important;
}


/* ── 5. OPTION PRESS FEEL ─────────────────────────────────────────────────── */

.fs-option:active {
  border-bottom-width: 2px !important;
  transform: translateY(2px) translateZ(0) !important;
  transition-duration: .06s !important;
  box-shadow: 0 1px 0 rgba(194,186,176,.2) !important;
}

.fs-option.pressed {
  border-bottom-width: 2px !important;
  transform: translateY(2px) translateZ(0) !important;
  transition-duration: .06s !important;
  box-shadow: 0 1px 0 rgba(194,186,176,.2) !important;
}

/* Shrink mascot after answer */
.tasks-fullscreen.fs-answered #fsMascotWrap {
  min-height: 70px !important;
  max-height: 70px !important;
  overflow: hidden !important;
  transition: min-height .35s cubic-bezier(.22,1,.36,1), max-height .35s cubic-bezier(.22,1,.36,1) !important;
}
.tasks-fullscreen.fs-answered #fsMascot {
  width: 70px !important;
  height: 70px !important;
  transition: width .35s cubic-bezier(.22,1,.36,1), height .35s cubic-bezier(.22,1,.36,1) !important;
}
.tasks-fullscreen.fs-answered .quiz-mascot-glow::before {
  display: none !important;
}

/* ── BUG FIXES v7.2 ──────────────────────────────────────────────────────── */

/* BUG 1: XP popup must not block clicks and should have proper z-index */
.xp-popup, .xp-float-from-btn, .xp-float-quiz {
  pointer-events: none !important;
  z-index: 10002 !important;
}

/* BUG 2: POPRAWNA badge - keep inside the option card, not overflow */
.fs-reveal-badge {
  top: 4px !important;
  right: 8px !important;
  font-size: 9px !important;
  padding: 2px 8px !important;
  z-index: 2 !important;
}

/* BUG 3: Solution accordion toggle + body for ABCD quiz */
.fs-solution-body {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height .4s ease !important;
}
.fs-solution-body.open {
  max-height: 500px !important;
}
.fs-solution-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  background: rgba(88,204,2,.04) !important;
  border-radius: 12px !important;
  margin-top: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #58CC02 !important;
}
.fs-solution-toggle:hover {
  background: rgba(88,204,2,.08) !important;
}
.fs-solution-toggle .toggle-arrow {
  transition: transform .3s !important;
  font-size: 18px !important;
}
.fs-solution-toggle.open .toggle-arrow {
  transform: rotate(90deg) !important;
}

/* BUG 4: Reduce gap between options and result strip */
.tasks-fullscreen.fs-answered .fs-body {
  padding-bottom: 16px !important;
}
.fs-result-strip {
  margin-top: 0 !important;
}
.fs-options {
  margin-top: auto !important;
  padding-bottom: 0 !important;
}

/* BUG 5: Mascot — ensure no white background on any element */
#fsMascotWrap,
#fsMascot,
.quiz-mascot-glow,
.mascot-anim,
.mascot-anim img,
.mascot-anim video {
  background: transparent !important;
  border-radius: 0 !important;
}
#fsMascotWrap {
  overflow: visible !important;
}

/* ── Solution text — premium formatted rendering ───────────────────────── */
.fs-solution-text {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--ink) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  word-break: break-word !important;
}

.fs-solution-text code {
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  background: rgba(0,0,0,.04) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
}

.fs-solution-panel {
  padding: 16px !important;
  background: rgba(88,204,2,.03) !important;
  border-left: 3px solid #58CC02 !important;
  border-radius: 0 12px 12px 0 !important;
}

.fs-solution-panel.wrong-solution {
  background: rgba(229,62,62,.03) !important;
  border-left-color: #E53E3E !important;
}

/* Exam review solution — formatted */
.exam-review-solution {
  background: var(--paper) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  line-height: 1.7 !important;
  border-left: 3px solid #58CC02 !important;
}
.exam-review-solution strong {
  color: var(--ink) !important;
  font-weight: 700 !important;
}

/* Hint body — same premium formatting */
.fs-hint-body {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--ink) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  padding: 12px 16px !important;
  word-break: break-word !important;
}

/* END v7.2 — Bug Fixes Complete */

/* ═══════════════════════════════════════════════════════════════════════
   LANGUAGE SECTION MASTERPIECE — v8.0
   Premium redesign: onboarding, tiles, level map, themed backgrounds
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Language Tile Cards — Premium Grid ──────────────────────── */
.lang-tiles-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 2px;
}
.lang-tile-card {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid rgba(237,232,223,.3);
  box-shadow: 0 4px 0 rgba(194,186,176,.12), 0 8px 24px rgba(0,0,0,.06);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  animation: cardFadeUp .5s var(--ease) both;
}
.lang-tile-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 0 rgba(194,186,176,.1), 0 14px 36px rgba(0,0,0,.1);
}
.lang-tile-card:active {
  transform: translateY(1px) scale(.98);
  box-shadow: 0 2px 0 rgba(194,186,176,.1), 0 4px 12px rgba(0,0,0,.06);
  transition-duration: .06s;
}

/* Gradient top strip */
.lang-tile-gradient {
  height: 52px;
  position: relative;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
}
.lang-tile-gradient .lang-tile-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .15;
  border-radius: 0;
}

/* Themed floating emoji in tile */
.lang-tile-theme-float {
  position: absolute;
  font-size: 18px;
  opacity: .15;
  animation: tileFloatEmoji 6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes tileFloatEmoji {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-8px) scale(1.1); }
}
.lang-tile-theme-float:nth-child(2) { animation-delay: -2s; }
.lang-tile-theme-float:nth-child(3) { animation-delay: -4s; font-size: 14px; }

/* Body section */
.lang-tile-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 12px;
}
.lang-tile-flag {
  font-size: 36px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.1));
}
.lang-tile-info {
  flex: 1;
  min-width: 0;
}
.lang-tile-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.lang-tile-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink30);
  margin-top: 2px;
  font-style: italic;
}
.lang-tile-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.lang-tile-level {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 10px;
  color: white;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.lang-tile-xp {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink30);
}
.lang-tile-cta {
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}

/* XP bar at bottom of card */
.lang-tile-xp-bar {
  height: 4px;
  background: rgba(237,232,223,.25);
}
.lang-tile-xp-fill {
  height: 100%;
  transition: width .8s var(--ease);
  position: relative;
}
.lang-tile-xp-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 100%;
  background: rgba(255,255,255,.6);
  border-radius: 2px;
  animation: xpBarPulse 1.5s ease-in-out infinite;
}

/* ── Onboarding Flow — Multi-Step Premium ────────────────────── */
.onboard-container {
  text-align: center;
  padding: 0;
  animation: sectionFadeIn .5s var(--ease) both;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(180deg, #faf9f6 0%, #f0ede6 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 16px env(safe-area-inset-bottom, 24px);
}

/* Back button inside fullscreen overlay */
.onboard-back-btn {
  align-self: flex-start;
  margin-bottom: 12px;
  z-index: 10;
  position: relative;
}

/* Step dots */
.onboard-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.onboard-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(194,186,176,.25);
  transition: all .4s var(--ease);
}
.onboard-dot.active {
  width: 28px;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* Step entrance animation */
.onboard-step-enter {
  animation: onboardStepIn .5s var(--ease) both;
}
@keyframes onboardStepIn {
  0% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Hero header in onboarding — fullscreen premium */
.onboard-hero-header {
  padding: 48px 28px 36px;
  max-width: 460px;
  width: 100%;
  border-radius: 28px;
  box-shadow: 0 16px 48px rgba(0,0,0,.12);
}
.onboard-float-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.onboard-float-word {
  position: absolute;
  color: rgba(255,255,255,.12);
  font-weight: 800;
  animation: floatSlow 8s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Mascot speech bubble in onboarding */
.onboard-speech-bubble {
  position: relative;
  display: inline-block;
  background: white;
  border-radius: 16px;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
  max-width: 300px;
  margin: 8px auto 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  animation: bubbleIn .5s var(--spring) .3s both;
}
.onboard-speech-bubble::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-bottom-color: white;
  border-top: 0;
}
@keyframes bubbleIn {
  0% { opacity: 0; transform: scale(.8) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Question text */
.onboard-question {
  font-size: 22px;
  font-weight: 900;
  color: var(--ink);
  margin: 24px 0 20px;
  letter-spacing: -0.4px;
  line-height: 1.3;
}

/* Motivation option grid (2x2) — FULLSCREEN large tiles */
.onboard-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
  padding: 0 4px;
}
.onboard-option-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 16px;
  min-height: 110px;
  border-radius: 22px;
  border: 2.5px solid rgba(237,232,223,.4);
  border-bottom: 5px solid rgba(237,232,223,.3);
  background: white;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s var(--ease);
  animation: onboardTileStagger .5s var(--spring) both;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
  transform-style: preserve-3d;
  perspective: 500px;
}
@keyframes onboardTileStagger {
  0% { opacity: 0; transform: translateY(30px) scale(.92) rotateX(8deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
}
.onboard-option-btn:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
}
.onboard-option-btn:active {
  transform: translateY(2px) scale(.97);
  border-bottom-width: 2px;
  transition-duration: .06s;
}
.onboard-option-btn.selected {
  border-color: var(--sel-color, #F9C843);
  box-shadow: 0 0 0 4px rgba(249,200,67,.2), 0 8px 28px rgba(249,200,67,.12);
  background: linear-gradient(135deg, rgba(249,200,67,.06), rgba(255,255,255,1));
  transform: translateY(-3px) scale(1.03);
}
.onboard-option-icon {
  font-size: 38px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.12));
  transition: transform .3s var(--spring);
}
.onboard-option-btn:active .onboard-option-icon {
  transform: scale(1.15);
}
.onboard-option-label {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.2px;
}

/* Level self-assessment list — LARGE premium tiles */
.onboard-level-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
  padding: 0 4px;
}
.onboard-level-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  min-height: 84px;
  border-radius: 20px;
  border: 2.5px solid rgba(237,232,223,.35);
  border-bottom: 5px solid rgba(237,232,223,.25);
  background: white;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  transition: all .2s var(--ease);
  animation: onboardTileStagger .5s var(--spring) both;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
  transform-style: preserve-3d;
}
.onboard-level-btn:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 10px 28px rgba(0,0,0,.07);
}
.onboard-level-btn:active {
  transform: translateY(2px) scale(.98);
  border-bottom-width: 2px;
  transition-duration: .06s;
}
.onboard-level-btn.selected {
  background: linear-gradient(135deg, rgba(255,255,255,1), rgba(249,200,67,.04));
  box-shadow: 0 0 0 3px var(--sel-color, rgba(249,200,67,.25)), 0 8px 24px rgba(0,0,0,.06);
  transform: translateY(-2px);
}
.onboard-level-icon {
  font-size: 34px;
  flex-shrink: 0;
  transition: transform .3s var(--spring);
}
.onboard-level-btn:active .onboard-level-icon {
  transform: scale(1.15);
}
.onboard-level-info {
  flex: 1;
}
.onboard-level-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.2px;
}
.onboard-level-desc {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink60);
  margin-top: 3px;
  line-height: 1.4;
}
.onboard-check {
  font-size: 22px;
  font-weight: 900;
  flex-shrink: 0;
  animation: checkBounce .4s var(--spring) both;
}
@keyframes checkBounce {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Next button in onboarding — large CTA */
.onboard-next-btn {
  max-width: 420px;
  width: 100%;
  margin: 28px auto 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: onboardTileStagger .5s var(--spring) .15s both;
  padding: 18px 32px;
  font-size: 17px;
  font-weight: 800;
  border-radius: 20px;
  letter-spacing: -0.2px;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  transition: all .2s var(--ease);
}
.onboard-next-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,.16);
}
.onboard-next-btn:active {
  transform: translateY(1px);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}

/* Final header */
.onboard-final-header {
  border-radius: 24px;
  padding: 28px 20px;
  max-width: 360px;
  margin: 0 auto;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  position: relative;
  overflow: hidden;
}
.onboard-final-header::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
}
.onboard-final-header::after {
  content: '';
  position: absolute;
  bottom: -20px; left: -20px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
}

/* ── Level Map — Enhanced Living Background ──────────────────── */

/* Language-specific map backgrounds */
.lang-map-bg.lang-bg-en::before {
  background:
    radial-gradient(circle at 20% 15%, rgba(49,130,206,.06) 0%, transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(43,108,176,.04) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(249,200,67,.03) 0%, transparent 35%) !important;
}
.lang-map-bg.lang-bg-es::before {
  background:
    radial-gradient(circle at 25% 20%, rgba(229,62,62,.06) 0%, transparent 45%),
    radial-gradient(circle at 75% 75%, rgba(221,107,32,.05) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(255,200,0,.03) 0%, transparent 35%) !important;
}
.lang-map-bg.lang-bg-de::before {
  background:
    radial-gradient(circle at 30% 25%, rgba(45,55,72,.05) 0%, transparent 45%),
    radial-gradient(circle at 70% 80%, rgba(26,32,44,.04) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(200,200,200,.03) 0%, transparent 35%) !important;
}
.lang-map-bg.lang-bg-fr::before {
  background:
    radial-gradient(circle at 20% 15%, rgba(102,126,234,.06) 0%, transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(90,103,216,.04) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(229,62,62,.02) 0%, transparent 35%) !important;
}
.lang-map-bg.lang-bg-ru::before {
  background:
    radial-gradient(circle at 25% 20%, rgba(159,122,234,.06) 0%, transparent 45%),
    radial-gradient(circle at 75% 80%, rgba(128,90,213,.04) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(49,130,206,.03) 0%, transparent 35%) !important;
}
.lang-map-bg.lang-bg-pl::before {
  background:
    radial-gradient(circle at 20% 15%, rgba(237,137,54,.06) 0%, transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(221,107,32,.04) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(229,62,62,.03) 0%, transparent 35%) !important;
}

/* Enhanced particle opacity for themed words */
.lang-map-particle {
  font-weight: 700 !important;
  opacity: 0.06 !important;
}

/* ── Responsive adjustments ──────────────────────────────────── */
@media (min-width: 420px) {
  .lang-tiles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .lang-tile-gradient {
    height: 48px;
  }
}

/* END v8.0 — Language Section Masterpiece */


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  v9.0 — ABSOLUTE MASTERPIECE — 10 Cycles of Perfection (12/10)        ║
   ║  KRYTYK ESTETA + PRACOWNIK + TESTER — 50+ targeted fixes              ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 1: FULLSCREEN QUIZ — Every Single Detail Perfect                ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 1. Question text: 20px, bold, centered, max-width 85%, line-height 1.5 ── */
.fs-question-text {
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  max-width: 85% !important;
  margin: 0 auto 12px !important;
  letter-spacing: -.2px !important;
  color: var(--ink, #1A1713) !important;
}

/* ── 2. Question number badge: visible pill shape ── */
.fs-question-number-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(249,200,67,.1), rgba(240,112,32,.06)) !important;
  color: var(--g2, #F07020) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  border: 1px solid rgba(249,200,67,.12) !important;
  margin-bottom: 4px !important;
}

/* ── 3. Source badge MATURA_P 2023: small, elegant ── */
.fs-exam-tag {
  padding: 3px 10px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, rgba(249,200,67,.1), rgba(240,112,32,.06)) !important;
  color: var(--g2, #F07020) !important;
  border: none !important;
}

/* ── 4. Progress bar: 12px, green, glass effect, smooth ── */
.fs-progress-wrap {
  height: 12px !important;
  border-radius: 7px !important;
  background: rgba(194,186,176,.12) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.06), 0 .5px 0 rgba(255,255,255,.5) !important;
}
.fs-progress-fill {
  border-radius: 7px !important;
  background: linear-gradient(90deg, #58CC02, #6EDE12, #78D820, #58CC02) !important;
  background-size: 200% 100% !important;
  animation: progressGradientFlow9 3s ease-in-out infinite !important;
  box-shadow: 0 0 8px rgba(88,204,2,.3), inset 0 -1px 2px rgba(0,0,0,.1) !important;
  transition: width .5s cubic-bezier(.22,1,.36,1) !important;
}
@keyframes progressGradientFlow9 {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.fs-progress-fill::after {
  top: 1px !important; left: 2px !important; right: 2px !important;
  height: 3.5px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.12) 100%) !important;
  border-radius: 3px !important;
}

/* ── 5. Options: 15px, 600wt, 54px min-h, 16px radius, 4px border-bottom 3D ── */
.fs-option {
  font-size: 15px !important;
  font-weight: 600 !important;
  min-height: 54px !important;
  border: 2.5px solid rgba(194,186,176,.28) !important;
  border-bottom: 4px solid rgba(194,186,176,.5) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  gap: 12px !important;
  background: white !important;
  color: var(--ink, #1A1713) !important;
  will-change: transform, border-bottom-width !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  transition: transform .08s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease !important;
}

/* ── 6. Option stagger: 0ms/50ms/100ms/150ms — VISIBLE cascade ── */
.fs-option:nth-child(1) { animation-delay: 0ms !important; }
.fs-option:nth-child(2) { animation-delay: 50ms !important; }
.fs-option:nth-child(3) { animation-delay: 100ms !important; }
.fs-option:nth-child(4) { animation-delay: 150ms !important; }
.fs-option:nth-child(5) { animation-delay: 200ms !important; }
.fs-option:nth-child(6) { animation-delay: 250ms !important; }

/* ── 7. Letter badge: 34px circle, centered ── */
.fs-option-letter {
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(194,186,176,.22) !important;
  border-bottom: 3px solid rgba(194,186,176,.38) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  background: rgba(247,244,238,.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.03) !important;
}

/* ── 8. Disabled options: opacity .5 (not .3 — too dark) ── */
.fs-option.disabled {
  pointer-events: none !important;
  opacity: .5 !important;
  filter: grayscale(.12) !important;
  transition: opacity .4s var(--ease), filter .4s var(--ease) !important;
  transform: scale(.97) !important;
  animation: none !important;
}
.fs-option.correct.disabled,
.fs-option.wrong.disabled,
.fs-option.reveal.disabled {
  opacity: 1 !important;
  filter: none !important;
  transform: scale(1) !important;
  animation: none !important;
}

/* ── 9. Correct: GREEN border + bg + glow ── */
.fs-option.correct {
  border-color: #58CC02 !important;
  border-bottom: 4px solid #46A302 !important;
  background: rgba(88,204,2,.08) !important;
  box-shadow: 0 4px 20px rgba(88,204,2,.2), 0 0 0 1px rgba(88,204,2,.1) !important;
}
.fs-option.correct .fs-option-letter {
  background: #58CC02 !important;
  border-color: #58CC02 !important;
  border-bottom-color: #46A302 !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(88,204,2,.35) !important;
}

/* ── 10. Wrong: RED border + bg + shake ── */
.fs-option.wrong {
  border-color: #E53E3E !important;
  border-bottom: 4px solid #C53030 !important;
  background: rgba(229,62,62,.05) !important;
  box-shadow: 0 4px 16px rgba(229,62,62,.12) !important;
}
.fs-option.wrong .fs-option-letter {
  background: #E53E3E !important;
  border-color: #E53E3E !important;
  border-bottom-color: #C53030 !important;
  color: white !important;
}

/* ── 11. Mascot: 100px (not too big), centered, with shadow ── */
.mascot-fox {
  width: 100px !important; height: 100px !important;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.1)) !important;
}
.mascot-container {
  min-height: 110px !important;
  margin: 6px 0 12px !important;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 2: CONTINUE BUTTON + SOLUTION ACCORDION                        ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 12. Continue button: 54px, full width, 3D, uppercase 15px 700 ── */
.fs-continue-btn {
  width: 100% !important;
  height: 54px !important;
  border-radius: 16px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: all .1s ease !important;
}
.fs-continue-btn.green {
  background: #58CC02 !important;
  color: white !important;
  border: none !important;
  border-bottom: 4px solid #46A302 !important;
  box-shadow: 0 4px 0 #46A302, 0 6px 20px rgba(88,204,2,.25) !important;
}
.fs-continue-btn.green:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 0 #46A302, 0 8px 28px rgba(88,204,2,.3) !important;
  filter: brightness(1.05) !important;
}
.fs-continue-btn.green:active {
  border-bottom-width: 2px !important;
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #46A302, 0 2px 6px rgba(88,204,2,.15) !important;
  transition-duration: .04s !important;
}
.fs-continue-btn.red {
  background: #E53E3E !important;
  color: white !important;
  border: none !important;
  border-bottom: 4px solid #C53030 !important;
  box-shadow: 0 4px 0 #C53030, 0 6px 20px rgba(229,62,62,.25) !important;
}
.fs-continue-btn.red:active {
  border-bottom-width: 2px !important;
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #C53030, 0 2px 6px rgba(229,62,62,.15) !important;
  transition-duration: .04s !important;
}

/* ── 13. Solution toggle button: visible, with emoji ── */
.fs-solution-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  background: rgba(88,204,2,.05) !important;
  border: 1.5px solid rgba(88,204,2,.12) !important;
  cursor: pointer !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #3D8B00 !important;
  transition: all .2s ease !important;
  margin-top: 10px !important;
  -webkit-tap-highlight-color: transparent !important;
}
.fs-solution-toggle:hover {
  background: rgba(88,204,2,.08) !important;
  border-color: rgba(88,204,2,.2) !important;
}
.fs-solution-toggle:active {
  transform: scale(.98) !important;
  transition-duration: .04s !important;
}
.fs-solution-toggle .toggle-arrow {
  transition: transform .3s var(--spring, cubic-bezier(.34,1.56,.64,1)) !important;
  font-size: 16px !important;
  color: rgba(61,139,0,.5) !important;
  font-weight: 800 !important;
}
.fs-solution-toggle.open .toggle-arrow {
  transform: rotate(90deg) !important;
}

/* ── 14. Solution text: line-height 1.7, readable ── */
.fs-solution-text {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--ink, #1A1713) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  word-break: break-word !important;
}
.fs-solution-panel {
  padding: 16px !important;
  background: rgba(88,204,2,.03) !important;
  border-left: 3px solid #58CC02 !important;
  border-radius: 0 12px 12px 0 !important;
  border: 1.5px solid rgba(88,204,2,.12) !important;
  border-left: 3px solid #58CC02 !important;
}

/* ── 15. Task content in solution: grey background ── */
.fs-solution-panel .solution-task-text,
.fs-solution-panel .task-content-block {
  background: rgba(194,186,176,.08) !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  margin: 8px 0 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--ink60, #6B6459) !important;
  border: 1px solid rgba(194,186,176,.12) !important;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 3: TAB SWITCHER — Clean, No Double Lines                       ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 16. Tab toggle: clean background, no double lines ── */
.tasks-sub-toggle {
  display: flex !important;
  padding: 4px !important;
  border-radius: 14px !important;
  background: rgba(247,244,238,.9) !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03) !important;
  position: relative !important;
}
.tasks-sub-toggle button {
  flex: 1 !important;
  padding: 10px 8px !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink60, #6B6459) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all .25s var(--ease, cubic-bezier(.4,0,.2,1)) !important;
  -webkit-tap-highlight-color: transparent !important;
  position: relative !important;
  white-space: nowrap !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
/* Active tab: white bg, bold, ZERO box-shadow */
.tasks-sub-toggle button.active {
  background: white !important;
  color: var(--ink, #1A1713) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  border-bottom: none !important;
  transform: none !important;
}
/* NO ::after on active — prevents double underline */
.tasks-sub-toggle button.active::after {
  display: none !important;
  content: none !important;
}
.tasks-sub-toggle button:not(.active):hover {
  color: var(--ink, #1A1713) !important;
  background: rgba(249,200,67,.05) !important;
}
.tasks-sub-toggle button:active {
  transform: scale(.95) !important;
  transition-duration: .04s !important;
}

/* Tab indicator line — gold, subtle */
.tasks-sub-toggle .tab-indicator {
  position: absolute !important;
  bottom: 0 !important;
  height: 2.5px !important;
  background: linear-gradient(90deg, var(--g1, #F9C843), var(--g2, #F07020)) !important;
  border-radius: 2px !important;
  transition: left .35s cubic-bezier(.34,1.56,.64,1), width .3s var(--ease) !important;
  z-index: 2 !important;
  box-shadow: 0 0 6px rgba(249,200,67,.25) !important;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 4: BOTTOM NAV — Gold Line 28px, Smooth Transition              ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 17. Bottom nav slider: 28px gold line (not dot!) ── */
.p-nav-slider {
  position: absolute !important;
  top: 0 !important;
  height: 3px !important;
  width: 28px !important;
  background: linear-gradient(90deg, var(--g1, #F9C843), var(--g2, #F07020)) !important;
  border-radius: 0 0 3px 3px !important;
  transition: left .35s cubic-bezier(.34,1.56,.64,1) !important;
  pointer-events: none !important;
  z-index: 5 !important;
  box-shadow: 0 2px 8px rgba(249,200,67,.35) !important;
}

/* ── 18. Remove the gold dot — use the 28px line instead ── */
.p-nav-item.active::after {
  display: none !important;
  content: none !important;
}
.p-nav-item::after {
  display: none !important;
  content: none !important;
}

/* ── 19. Active nav: icon scale + color, smooth transition ── */
.p-nav-item.active svg {
  transform: scale(1.12) !important;
  transition: transform .3s var(--spring, cubic-bezier(.34,1.56,.64,1)) !important;
  filter: drop-shadow(0 0 4px rgba(240,112,32,.25)) !important;
}
.p-nav-item.active .p-nav-label {
  color: var(--g2, #F07020) !important;
  font-weight: 700 !important;
  transform: scale(1.03) !important;
  transition: all .3s var(--spring) !important;
}

/* ── 20. Nav tap bounce ── */
.p-nav-item:active {
  transform: scale(.9) !important;
  transition: transform .05s ease !important;
}
.p-nav-item:not(.active):hover {
  transform: translateY(-1px) !important;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 5: BAZA ZADAN — Main Screen Tiles                              ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 21. Nav tiles: min-height 120px, gradient bg, icon 36px, title 16px bold ── */
.nav-tile {
  min-height: 120px !important;
  border-radius: 20px !important;
  padding: 22px 18px !important;
  transition: all .12s ease !important;
}
.nav-tile-icon {
  font-size: 36px !important;
  line-height: 1 !important;
}
.nav-tile-label {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: white !important;
}
.nav-tile-count {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.8) !important;
}

/* ── 22. Nav tile stagger: bounce entrance ── */
.nav-tile {
  animation: tilePopIn9 .5s var(--spring, cubic-bezier(.34,1.56,.64,1)) both !important;
}
@keyframes tilePopIn9 {
  0%   { opacity: 0; transform: translateY(24px) scale(.88); }
  50%  { opacity: 1; transform: translateY(-4px) scale(1.02); }
  75%  { transform: translateY(1px) scale(.995); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.nav-tile:nth-child(1)  { animation-delay: .02s !important; }
.nav-tile:nth-child(2)  { animation-delay: .08s !important; }
.nav-tile:nth-child(3)  { animation-delay: .14s !important; }
.nav-tile:nth-child(4)  { animation-delay: .20s !important; }
.nav-tile:nth-child(5)  { animation-delay: .26s !important; }

/* ── 23. Tile hover lift + active 3D press ── */
.nav-tile:hover {
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.12) !important;
  filter: brightness(1.05) !important;
}
.nav-tile:active {
  border-bottom-width: 2px !important;
  transform: perspective(600px) rotateX(5deg) translateY(3px) scale(.97) !important;
  transition-duration: .04s !important;
  filter: brightness(.97) !important;
}

/* ── 24. Floating emojis: SUBTLE opacity .04 ── */
.float-emoji {
  opacity: .04 !important;
}
.float-item {
  opacity: .04 !important;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 6: TOPIC LIST + SUBJECT GRID                                   ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 25. Topic cards: gradient left-border, emoji icon, stagger ── */
.topic-card {
  border-left: 4px solid var(--topic-color, rgba(249,200,67,.5)) !important;
  border-radius: 4px 16px 16px 4px !important;
  padding: 16px 18px !important;
  background: white !important;
  border-top: 1.5px solid rgba(194,186,176,.12) !important;
  border-right: 1.5px solid rgba(194,186,176,.12) !important;
  border-bottom: 3px solid rgba(194,186,176,.2) !important;
  animation: topicCardIn9 .4s var(--spring) both !important;
}
@keyframes topicCardIn9 {
  0%   { opacity: 0; transform: translateX(20px) scale(.96); }
  55%  { opacity: 1; transform: translateX(-3px) scale(1.01); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.topic-card:nth-child(1)  { animation-delay: .03s !important; }
.topic-card:nth-child(2)  { animation-delay: .07s !important; }
.topic-card:nth-child(3)  { animation-delay: .11s !important; }
.topic-card:nth-child(4)  { animation-delay: .15s !important; }
.topic-card:nth-child(5)  { animation-delay: .19s !important; }
.topic-card:nth-child(6)  { animation-delay: .23s !important; }
.topic-card:nth-child(7)  { animation-delay: .27s !important; }
.topic-card:nth-child(8)  { animation-delay: .31s !important; }
.topic-card:nth-child(9)  { animation-delay: .35s !important; }
.topic-card:nth-child(10) { animation-delay: .39s !important; }

.topic-card-name {
  flex: 1 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink, #1A1713) !important;
}
.topic-card-count {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ink30, #C2BAB0) !important;
  background: rgba(194,186,176,.1) !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
}
.topic-card:hover {
  transform: translateX(4px) translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.06) !important;
}
.topic-card:active {
  border-bottom-width: 2px !important;
  transform: translateY(1px) scale(.99) !important;
  transition-duration: .04s !important;
}

/* ── 26. Subject tile color themes in grid — 2 columns ── */
.nav-tiles-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  padding: 12px 0 !important;
}
.nav-tiles-grid.single-col {
  grid-template-columns: 1fr !important;
}
.nav-tiles-grid.hero-tiles {
  grid-template-columns: 1fr !important;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 7: CODZIENNA PIATKA — Streak Hero, Calendar, Rewards           ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 27. Streak hero: clean cream bg, fire with glow, gold number ── */
.streak-hero {
  text-align: center !important;
  padding: 28px 16px 20px !important;
  margin: 8px 0 !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, rgba(249,200,67,.06), rgba(240,112,32,.03), rgba(249,200,67,.04)) !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(249,200,67,.1) !important;
}
.streak-hero-num {
  font-size: 60px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin: 6px 0 !important;
}

/* ── 28. Calendar 7 days: clean circles in row ── */
.streak-cal-row {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 16px !important;
}
.streak-cal-dot {
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.streak-cal-dot.empty {
  background: rgba(194,186,176,.12) !important;
  color: var(--ink30, #C2BAB0) !important;
}
.streak-cal-dot.done {
  background: #58CC02 !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(88,204,2,.3) !important;
}
.streak-cal-dot.today {
  background: linear-gradient(135deg, var(--g1, #F9C843), var(--g2, #F07020)) !important;
  color: white !important;
  box-shadow: 0 0 0 3px rgba(249,200,67,.2) !important;
}

/* ── 29. Start button: 3D green, big ── */
.start-btn-hero {
  position: relative !important;
  overflow: hidden !important;
  animation: startBtnPulse9 2.5s ease-in-out infinite !important;
}
@keyframes startBtnPulse9 {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 0 #46A302, 0 6px 20px rgba(88,204,2,.25); }
  50%      { transform: scale(1.03); box-shadow: 0 5px 0 #46A302, 0 8px 30px rgba(88,204,2,.35), 0 0 0 5px rgba(88,204,2,.06); }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 8: RANKING — Podium, User Row, Invite Button                   ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 30. Leaderboard row hover: lift + shadow ── */
.lb-row {
  background: white !important;
  border: 1px solid rgba(237,232,223,.35) !important;
  border-radius: 14px !important;
  margin-bottom: 6px !important;
  transition: all .15s var(--ease) !important;
}
.lb-row:hover {
  transform: translateX(4px) translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(26,23,19,.06) !important;
}

/* ── 31. User row: golden glow ── */
.lb-row.is-me {
  background: linear-gradient(90deg, rgba(249,200,67,.12), rgba(240,112,32,.06)) !important;
  border: 2px solid rgba(249,200,67,.3) !important;
  box-shadow: 0 0 20px rgba(249,200,67,.1) !important;
}

/* ── 32. Invite button: visible WITHOUT scrolling ── */
.invite-sticky {
  position: sticky !important;
  bottom: 0 !important;
  padding: 16px 0 8px !important;
  background: linear-gradient(0deg, var(--cream, #FFFDF7) 70%, transparent) !important;
  z-index: 5 !important;
}
.invite-btn-premium {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 16px 24px !important;
  border: none !important;
  border-bottom: 4px solid #D4880A !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, var(--g1, #F9C843), var(--g2, #F07020)) !important;
  color: white !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(249,200,67,.3) !important;
  transition: all .1s ease !important;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 9: ANIMATIONS GLOBALNE — Transitions, Loading                   ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 33. View transitions: smooth slide left/right ── */
.page-slide-forward {
  animation: pageSlide9Forward .4s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes pageSlide9Forward {
  0%   { transform: translateX(60px) scale(.97); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}
.page-slide-backward {
  animation: pageSlide9Backward .4s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes pageSlide9Backward {
  0%   { transform: translateX(-60px) scale(.97); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

/* ── 34. Cards: stagger fade-up entrance ── */
.view-content-stagger > * {
  animation: viewStagger9 .45s var(--elastic, cubic-bezier(.68,-.6,.32,1.6)) both !important;
}
@keyframes viewStagger9 {
  0%   { opacity: 0; transform: translateY(16px) scale(.97); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.005); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 35. Skeleton shimmer: premium loading ── */
.skeleton {
  background: linear-gradient(90deg,
    rgba(194,186,176,.08) 0%,
    rgba(194,186,176,.18) 45%,
    rgba(194,186,176,.22) 50%,
    rgba(194,186,176,.18) 55%,
    rgba(194,186,176,.08) 100%
  ) !important;
  background-size: 250% 100% !important;
  animation: skeleton9Shimmer 1.6s ease-in-out infinite !important;
  border-radius: 8px !important;
}
@keyframes skeleton9Shimmer {
  0%   { background-position: 250% 0; }
  100% { background-position: -250% 0; }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CYCLE 10: CONSISTENCY — Fonts, Colors, Radius, Shadows, Padding      ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 36. DM Sans everywhere ── */
.tasks-section-title,
.tasks-section-subtitle,
.tasks-back-btn,
.fs-question-text,
.fs-option,
.fs-continue-btn,
.lb-name,
.lb-rank,
.streak-hero-num,
.streak-hero-label,
.topic-card-name,
.topic-card-count,
.nav-tile-label,
.nav-tile-count,
.lektura-title,
.lektura-author {
  font-family: 'DM Sans', sans-serif !important;
}

/* ── 37. Consistent border-radius: 12-16-20px ── */
.p-card { border-radius: 16px !important; }
.lektura-card { border-radius: 18px !important; }
.book-card { border-radius: 18px !important; }

/* ── 38. Consistent warm shadows ── */
.p-card { box-shadow: 0 2px 8px rgba(26,23,19,.04) !important; }
.lektura-card { box-shadow: 0 2px 8px rgba(26,23,19,.04) !important; }

/* ── 39. Back button: consistent 3D press ── */
.tasks-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  border: 2px solid rgba(194,186,176,.18) !important;
  border-bottom: 3px solid rgba(194,186,176,.32) !important;
  background: white !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink60, #6B6459) !important;
  cursor: pointer !important;
  transition: all .1s ease !important;
  margin-bottom: 12px !important;
}
.tasks-back-btn:hover {
  border-color: var(--g1, #F9C843) !important;
  border-bottom-color: rgba(249,200,67,.4) !important;
  color: var(--ink, #1A1713) !important;
  background: rgba(249,200,67,.04) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.04) !important;
}
.tasks-back-btn:active {
  border-bottom-width: 2px !important;
  transform: translateY(1px) !important;
  transition-duration: .04s !important;
  box-shadow: none !important;
}
.tasks-back-btn:hover .arrow {
  transform: translateX(-4px) !important;
}

/* ── 40. Section header: clean centered ── */
.tasks-section-header {
  text-align: center !important;
  padding: 16px 0 8px !important;
}
.tasks-section-title {
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: -.5px !important;
  line-height: 1.2 !important;
  color: var(--ink, #1A1713) !important;
  -webkit-text-fill-color: var(--ink, #1A1713) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}
.tasks-section-subtitle {
  font-size: 14px !important;
  color: var(--ink60, #6B6459) !important;
  margin-top: 4px !important;
  line-height: 1.5 !important;
}

/* ── 41. Fullscreen quiz background: clean #FFFDF7, ZERO gradients ── */
.tasks-fullscreen {
  background: #FFFDF7 !important;
}
.fs-topbar {
  background: #FFFDF7 !important;
}
.fs-bottom-bar {
  background: #FFFDF7 !important;
}
.fs-body::before {
  background: linear-gradient(180deg, #FFFDF7 0%, transparent 100%) !important;
}
.fs-body::after {
  background: linear-gradient(0deg, #FFFDF7 0%, transparent 100%) !important;
}

/* ── 42. Result strip — richer correct/wrong colors ── */
.fs-result-strip {
  padding: 14px 18px !important;
  border-radius: 14px !important;
  margin-bottom: 10px !important;
}
.fs-result-strip.correct {
  background: linear-gradient(135deg, rgba(88,204,2,.08), rgba(88,204,2,.04)) !important;
  border: 1.5px solid rgba(88,204,2,.18) !important;
}
.fs-result-strip.wrong {
  background: linear-gradient(135deg, rgba(229,62,62,.05), rgba(229,62,62,.02)) !important;
  border: 1.5px solid rgba(229,62,62,.12) !important;
}

/* ── 43. Option hover: subtle, not overwhelming ── */
.fs-option:hover {
  border-color: rgba(194,186,176,.4) !important;
  background: rgba(249,200,67,.02) !important;
  transform: translateY(-1px) translateZ(0) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.04) !important;
}

/* ── 44. Option :active — Duolingo press ── */
.fs-option:active {
  border-bottom-width: 2px !important;
  transform: translateY(2px) translateZ(0) !important;
  transition-duration: .03s !important;
  box-shadow: none !important;
}

/* ── 45. Lektura cards: stagger with bounce ── */
.lektura-card {
  animation: lekturaCardIn9 .45s var(--spring) both !important;
}
@keyframes lekturaCardIn9 {
  0%   { opacity: 0; transform: translateY(18px) scale(.94); }
  50%  { opacity: 1; transform: translateY(-3px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.lektura-card:nth-child(1)  { animation-delay: .03s !important; }
.lektura-card:nth-child(2)  { animation-delay: .08s !important; }
.lektura-card:nth-child(3)  { animation-delay: .13s !important; }
.lektura-card:nth-child(4)  { animation-delay: .18s !important; }
.lektura-card:nth-child(5)  { animation-delay: .23s !important; }
.lektura-card:nth-child(6)  { animation-delay: .28s !important; }

/* ── 46. Lektura hover: lift + shadow ── */
.lektura-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.07) !important;
  border-color: var(--g1, #F9C843) !important;
}
.lektura-card:active {
  border-bottom-width: 2px !important;
  transform: translateY(2px) scale(.99) !important;
  transition-duration: .04s !important;
  box-shadow: none !important;
}

/* ── 47. Book card: stagger with bounce ── */
.book-card {
  animation: bookCardIn9 .45s var(--spring) both !important;
}
@keyframes bookCardIn9 {
  0%   { opacity: 0; transform: translateY(16px) scale(.94); }
  50%  { opacity: 1; transform: translateY(-2px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 48. Hover utilities ── */
.hover-lift:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
}

/* ── 49. Close button: refined ── */
.fs-close-btn {
  width: 38px !important; height: 38px !important;
  border-radius: 12px !important;
  border: 2px solid rgba(194,186,176,.18) !important;
  border-bottom: 3px solid rgba(194,186,176,.3) !important;
  background: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all .12s ease !important;
  color: var(--ink60, #6B6459) !important;
}
.fs-close-btn:hover {
  border-color: var(--red, #E53E3E) !important;
  border-bottom-color: #C53030 !important;
  color: var(--red, #E53E3E) !important;
  background: rgba(229,62,62,.04) !important;
  transform: translateY(-1px) !important;
}
.fs-close-btn:active {
  border-bottom-width: 1px !important;
  transform: translateY(2px) !important;
  transition-duration: .04s !important;
}

/* ── 50. Streak pill in topbar: refined ── */
.fs-streak-pill {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 12px !important;
  background: rgba(249,200,67,.08) !important;
  border: 1.5px solid rgba(249,200,67,.12) !important;
  border-radius: 24px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--g2, #F07020) !important;
  flex-shrink: 0 !important;
}

/* ── 51. Correct option glow ring — subtle pulse, not infinite crazy ── */
.fs-option.correct::after {
  content: '' !important;
  position: absolute !important;
  inset: -3px !important;
  border-radius: 19px !important;
  border: 2px solid rgba(88,204,2,.3) !important;
  box-shadow: 0 0 16px rgba(88,204,2,.15) !important;
  animation: correctGlow9 2s ease-in-out infinite !important;
  pointer-events: none !important;
}
@keyframes correctGlow9 {
  0%, 100% { opacity: .5; inset: -3px; }
  50%      { opacity: .8; inset: -6px; }
}

/* Remove second ring (::before override) for cleanliness */
.fs-option.correct::before {
  display: none !important;
}

/* ── 52. Screen flash green — clean 0.25s ── */
.fs-screen-flash-correct {
  animation: screenFlash9Green .3s ease-out both !important;
}
@keyframes screenFlash9Green {
  0%   { box-shadow: inset 0 0 120px rgba(88,204,2,.15); }
  100% { box-shadow: inset 0 0 0 rgba(88,204,2,0); }
}
.fs-screen-flash-wrong {
  animation: screenFlash9Red .3s ease-out both !important;
}
@keyframes screenFlash9Red {
  0%   { box-shadow: inset 0 0 100px rgba(229,62,62,.12); }
  100% { box-shadow: inset 0 0 0 rgba(229,62,62,0); }
}

/* ── 53. Correct option text: green, bold ── */
.fs-option.correct .fs-option-text {
  color: #2F7A00 !important;
  font-weight: 700 !important;
}
/* ── 54. Wrong option text: red, line-through ── */
.fs-option.wrong .fs-option-text {
  color: #B83030 !important;
  text-decoration: line-through !important;
  text-decoration-color: rgba(229,62,62,.3) !important;
}

/* ── 55. Reveal option: green pulsing border ── */
.fs-option.reveal {
  border-color: #58CC02 !important;
  border-bottom-color: #46A302 !important;
  background: rgba(88,204,2,.05) !important;
  animation: revealPulse9 1.5s ease-in-out both !important;
}
@keyframes revealPulse9 {
  0%   { box-shadow: 0 0 0 0 rgba(88,204,2,.3); }
  25%  { box-shadow: 0 0 0 5px rgba(88,204,2,.12); }
  50%  { box-shadow: 0 0 0 0 rgba(88,204,2,.15); }
  75%  { box-shadow: 0 0 0 3px rgba(88,204,2,.08); }
  100% { box-shadow: 0 0 0 0 rgba(88,204,2,0); }
}
.fs-option.reveal .fs-option-letter {
  border-color: #58CC02 !important;
  color: #58CC02 !important;
  background: rgba(88,204,2,.06) !important;
}

/* ── 56. Mascot container glow: warm, not overwhelming ── */
.mascot-container::before {
  width: 140px !important; height: 140px !important;
  background: radial-gradient(circle,
    rgba(249,200,67,.15) 0%,
    rgba(249,200,67,.08) 40%,
    transparent 70%
  ) !important;
}

/* ── 57. Quiz meta info: centered, visible ── */
.fs-question-meta {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink30, #C2BAB0) !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  v9.1 — CYCLES 2-5: Topic Cards, Back Button, Exam Badge, Spacing     ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 58. Topic card v2: stagger entrance, hover lift, 3D press ── */
.topic-card-v2 {
  animation: topicV2In .45s var(--ease, cubic-bezier(.4,0,.2,1)) both !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
  border-left-width: 4px !important;
  border-left-style: solid !important;
}
@keyframes topicV2In {
  0%   { opacity: 0; transform: translateX(16px) scale(.96); }
  60%  { opacity: 1; transform: translateX(-2px) scale(1.005); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.topic-card-v2:hover {
  transform: translateX(4px) translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.07) !important;
}
.topic-card-v2:active {
  transform: translateY(1px) scale(.985) !important;
  border-bottom-width: 1.5px !important;
  transition-duration: .04s !important;
  box-shadow: none !important;
}
.topic-card-v2:hover .topic-card-v2-arrow {
  transform: translateX(4px) !important;
  color: var(--g2, #F07020) !important;
}
.topic-card-v2-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink, #1A1713) !important;
}
.topic-card-v2-icon {
  width: 42px !important; height: 42px !important;
  border-radius: 12px !important;
  font-size: 20px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.06) !important;
}
.topic-card-v2-badge {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: white !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
}

/* ── 59. Back button pill: premium styling ── */
.back-btn-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  border: 2px solid rgba(194,186,176,.15) !important;
  border-bottom: 3px solid rgba(194,186,176,.28) !important;
  background: white !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink60, #6B6459) !important;
  cursor: pointer !important;
  transition: all .1s ease !important;
  margin-bottom: 12px !important;
  -webkit-tap-highlight-color: transparent !important;
}
.back-btn-pill:hover {
  border-color: var(--g1, #F9C843) !important;
  border-bottom-color: rgba(249,200,67,.35) !important;
  color: var(--ink, #1A1713) !important;
  background: rgba(249,200,67,.03) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.04) !important;
}
.back-btn-pill:active {
  border-bottom-width: 2px !important;
  transform: translateY(1px) !important;
  transition-duration: .04s !important;
  box-shadow: none !important;
}
.back-btn-pill .arrow-icon {
  transition: transform .2s var(--spring, cubic-bezier(.34,1.56,.64,1)) !important;
}
.back-btn-pill:hover .arrow-icon {
  transform: translateX(-3px) !important;
}

/* ── 60. Heading entrance: scale pop ── */
.heading-entrance {
  animation: headingPop9 .5s var(--spring, cubic-bezier(.34,1.56,.64,1)) both !important;
}
@keyframes headingPop9 {
  0%   { opacity: 0; transform: translateY(-8px) scale(.96); }
  60%  { transform: translateY(1px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 61. CKE nav btn: premium 3D button ── */
.cke-nav-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 14px 24px !important;
  border: none !important;
  border-bottom: 4px solid rgba(0,0,0,.15) !important;
  border-radius: 16px !important;
  color: white !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all .1s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.15) !important;
}
.cke-nav-btn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.05) !important;
}
.cke-nav-btn:active {
  border-bottom-width: 2px !important;
  transform: translateY(2px) !important;
  transition-duration: .04s !important;
}

/* ── 62. Option entrance animation: spring with stagger ── */
@keyframes fsOptSpring9 {
  0%   { opacity: 0; transform: translateY(20px) scale(.94); }
  50%  { opacity: 1; transform: translateY(-3px) scale(1.015); }
  75%  { transform: translateY(1px) scale(.998); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.fs-option {
  animation: fsOptSpring9 .4s var(--spring, cubic-bezier(.34,1.56,.64,1)) both !important;
}

/* ── 63. Exam badge: Egzamin Probny tile ── */
.nav-tile.tile-exam {
  background: linear-gradient(135deg, #667EEA, #5A67D8) !important;
  box-shadow: 0 6px 20px rgba(102,126,234,.3) !important;
  border-bottom-color: #4C5DC0 !important;
}
.nav-tile.tile-exam::after {
  content: '\u23F1\uFE0F' !important;
  font-size: 48px !important;
}

/* ── 64. Mascot in section header — smaller (100px) ── */
.tasks-section-header .mascot-anim img,
.tasks-section-header .mascot-anim video {
  max-width: 100px !important;
  max-height: 100px !important;
}

/* ── 65. Reward milestone path: visible, premium ── */
.rewards-path-container {
  position: relative !important;
  padding: 16px 0 !important;
}
.milestone-marker {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  background: white !important;
  border: 1.5px solid rgba(237,232,223,.3) !important;
  border-bottom: 3px solid rgba(237,232,223,.2) !important;
  transition: all .15s ease !important;
  animation: fadeInUp .4s var(--ease) both !important;
}
.milestone-marker:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.05) !important;
}
.milestone-marker.reached {
  border-color: rgba(88,204,2,.2) !important;
  background: rgba(88,204,2,.03) !important;
}
.milestone-marker.current {
  border-color: rgba(249,200,67,.3) !important;
  box-shadow: 0 0 0 3px rgba(249,200,67,.1), 0 4px 16px rgba(249,200,67,.1) !important;
}

/* ── 66. Section title reset — NO gradient text, clean ink ── */
.tasks-section-title {
  -webkit-text-fill-color: var(--ink, #1A1713) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--ink, #1A1713) !important;
}

/* ── 67. Quiz answered state — properly handle scrolling ── */
.tasks-fullscreen.fs-answered .fs-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ── 68. Fullscreen entrance: smoother ── */
.tasks-fullscreen {
  animation: fsSlideUp9 .5s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes fsSlideUp9 {
  0%   { transform: translateY(100%); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
.tasks-fullscreen.closing {
  animation: fsSlideDown9 .35s var(--ease) both !important;
}
@keyframes fsSlideDown9 {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* ── 69. Celebration: bigger stars, cleaner layout ── */
.quiz-score-star {
  font-size: 40px !important;
  filter: drop-shadow(0 3px 10px rgba(255,215,0,.3)) !important;
}
.quiz-score-star.dim {
  opacity: .15 !important;
  filter: grayscale(1) !important;
}

/* ── 70. Celebration overlay: clean backdrop ── */
.celebration-overlay {
  background: rgba(255,253,247,.96) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* ── 71. Correct answer — wrong text: softer styling ── */
.fs-option.wrong .fs-option-text {
  color: var(--ink60, #6B6459) !important;
  text-decoration: line-through !important;
  text-decoration-color: rgba(229,62,62,.25) !important;
  text-decoration-thickness: 1.5px !important;
}

/* ── 72. Topbar: cleaner spacing ── */
.fs-topbar {
  padding: 10px 16px !important;
  padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
  gap: 10px !important;
  border-bottom: 1px solid rgba(194,186,176,.06) !important;
}

/* ── 73. Body spacing: balanced ── */
.fs-body {
  padding: 12px 20px 8px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ── 74. Bottom bar: clean ── */
.fs-bottom-bar {
  padding: 10px 20px !important;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}
.fs-bottom-bar::before {
  display: none !important;
}

/* ── 75. Mascot after answer: shrink to 70px ── */
.tasks-fullscreen.fs-answered #fsMascotWrap {
  min-height: 70px !important;
  max-height: 70px !important;
  overflow: hidden !important;
  transition: all .35s cubic-bezier(.22,1,.36,1) !important;
}
.tasks-fullscreen.fs-answered #fsMascot {
  width: 70px !important; height: 70px !important;
  transition: all .35s cubic-bezier(.22,1,.36,1) !important;
}

/* ── 76. Solution accordion: expanded max-height for long solutions ── */
.fs-solution-body {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height .4s cubic-bezier(.22,1,.36,1) !important;
}
.fs-solution-body.open {
  max-height: 800px !important;
  overflow: visible !important;
}

/* ── 77. Leaderboard podium: stagger rise ── */
.lb-podium-place {
  animation: podiumRise9 .6s var(--spring) both !important;
}
.lb-podium-place.second { animation-delay: .1s !important; }
.lb-podium-place.first  { animation-delay: .25s !important; }
.lb-podium-place.third  { animation-delay: .4s !important; }
@keyframes podiumRise9 {
  0%   { opacity: 0; transform: translateY(30px) scale(.85); }
  50%  { opacity: 1; transform: translateY(-5px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 78. Leaderboard row stagger ── */
.lb-row {
  animation: lbRow9In .35s var(--ease) both !important;
}
.lb-row:nth-child(1)  { animation-delay: .05s !important; }
.lb-row:nth-child(2)  { animation-delay: .1s !important; }
.lb-row:nth-child(3)  { animation-delay: .15s !important; }
.lb-row:nth-child(4)  { animation-delay: .2s !important; }
.lb-row:nth-child(5)  { animation-delay: .25s !important; }
.lb-row:nth-child(6)  { animation-delay: .3s !important; }
.lb-row:nth-child(7)  { animation-delay: .35s !important; }
.lb-row:nth-child(8)  { animation-delay: .4s !important; }
@keyframes lbRow9In {
  0%   { opacity: 0; transform: translateX(-12px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ── 79. Gold #1 row: epic styling ── */
.lb-row.rank-1, .lb-list .lb-row:nth-child(1) {
  background: linear-gradient(90deg, rgba(255,215,0,.12), rgba(255,215,0,.04)) !important;
  border: 2px solid rgba(255,215,0,.25) !important;
  box-shadow: 0 4px 20px rgba(255,215,0,.1) !important;
}

/* ── 80. Streak hero fire: bigger, with glow ── */
.streak-hero-fire,
.streak-hero-fire-fixed,
.streak-fire-animated {
  filter: drop-shadow(0 0 12px rgba(255,100,0,.35)) drop-shadow(0 0 25px rgba(255,60,0,.15)) !important;
}

/* ── 81. Streak label: clean ── */
.streak-hero-label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ink60, #6B6459) !important;
}

/* ── 82. Quiz question meta info: centered, subtle ── */
.fs-question-meta {
  text-align: center !important;
  justify-content: center !important;
}

/* ── 83. Exam timer: clean, fixed at top ── */
.fs-exam-timer {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
}

/* ── 84. Pronunciation play button: 3D ── */
.pron-play-btn {
  border-bottom: 3px solid rgba(49,130,206,.35) !important;
  transition: all .1s ease !important;
}
.pron-play-btn:active {
  border-bottom-width: 2px !important;
  transform: translateY(1px) !important;
  transition-duration: .04s !important;
}

/* ── 85. View #view-tasks — NO position:relative/overflow:hidden ── */
/* CRITICAL: Do NOT add position:relative or overflow:hidden to #view-tasks */
/* The ::before pseudo-element handles the gradient background */

/* ── 86. Content stagger delays: wider for premium cascade ── */
.view-content-stagger > *:nth-child(1) { animation-delay: .02s !important; }
.view-content-stagger > *:nth-child(2) { animation-delay: .06s !important; }
.view-content-stagger > *:nth-child(3) { animation-delay: .1s !important; }
.view-content-stagger > *:nth-child(4) { animation-delay: .14s !important; }
.view-content-stagger > *:nth-child(5) { animation-delay: .18s !important; }
.view-content-stagger > *:nth-child(6) { animation-delay: .22s !important; }
.view-content-stagger > *:nth-child(7) { animation-delay: .26s !important; }
.view-content-stagger > *:nth-child(8) { animation-delay: .3s !important; }

/* ── 87. Quiz slide transitions ── */
.fs-slide-out {
  animation: fsSlide9Out .22s ease-in both !important;
}
@keyframes fsSlide9Out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-50px); }
}
.fs-slide-in {
  animation: fsSlide9In .28s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes fsSlide9In {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── 88. All buttons: consistent DM Sans font ── */
button {
  font-family: 'DM Sans', sans-serif;
}

/* ── 89. Option pressed class (JS adds this) ── */
.fs-option.pressed {
  border-bottom-width: 2px !important;
  transform: translateY(2px) translateZ(0) !important;
  box-shadow: none !important;
}

/* ── 90. Reveal badge: inside option ── */
.fs-reveal-badge {
  position: absolute !important;
  top: 4px !important; right: 8px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #58CC02, #46A302) !important;
  color: white !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
  z-index: 2 !important;
  box-shadow: 0 2px 6px rgba(88,204,2,.3) !important;
}

/* ── 91. Mascot no white background (critical) ── */
#fsMascotWrap,
#fsMascot,
.quiz-mascot-glow,
.mascot-anim,
.mascot-anim img,
.mascot-anim video {
  background: transparent !important;
  border-radius: 0 !important;
}

/* ── 92. XP popups: not blocking ── */
.xp-popup, .xp-float-from-btn, .xp-float-quiz, .xp-popup-bounce {
  pointer-events: none !important;
  z-index: 10002 !important;
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  v9.2 — CYCLES 6-10: Daily Card, Rewards, Micro-polish, Final Pass    ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 93. Daily start card: premium container ── */
.daily-start-card {
  background: white !important;
  border-radius: 24px !important;
  padding: 24px 20px !important;
  border: 1.5px solid rgba(237,232,223,.25) !important;
  border-bottom: 4px solid rgba(237,232,223,.15) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.04) !important;
  animation: dailyCardIn .5s var(--spring, cubic-bezier(.34,1.56,.64,1)) both !important;
}
@keyframes dailyCardIn {
  0%   { opacity: 0; transform: translateY(20px) scale(.95); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 94. Daily done card: celebration ── */
.daily-done-card {
  background: white !important;
  border-radius: 24px !important;
  padding: 28px 20px !important;
  text-align: center !important;
  border: 1.5px solid rgba(237,232,223,.2) !important;
  border-bottom: 4px solid rgba(237,232,223,.12) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.04) !important;
  position: relative !important;
  overflow: hidden !important;
  animation: dailyCardIn .5s var(--spring) both !important;
}
.daily-done-title {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--ink, #1A1713) !important;
  margin-top: 12px !important;
}
.daily-done-sub {
  font-size: 14px !important;
  color: var(--ink60, #6B6459) !important;
  margin-top: 6px !important;
  line-height: 1.5 !important;
}

/* ── 95. Reward path card: premium container ── */
.reward-path-card {
  background: white !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(237,232,223,.25) !important;
  border-bottom: 3px solid rgba(237,232,223,.15) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.04) !important;
  overflow: hidden !important;
  margin: 12px 0 !important;
  animation: fadeInUp .4s var(--ease) .1s both !important;
}
.reward-path-header {
  padding: 18px 20px 14px !important;
  text-align: center !important;
}
.reward-path-title {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: var(--ink, #1A1713) !important;
}
.reward-path-sub {
  font-size: 13px !important;
  color: var(--ink60, #6B6459) !important;
  margin-top: 4px !important;
}
.reward-path-progress {
  height: 6px !important;
  background: rgba(194,186,176,.12) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  margin-top: 12px !important;
}
.reward-path-progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #58CC02, #78D820) !important;
  border-radius: 3px !important;
  transition: width .8s cubic-bezier(.22,1,.36,1) !important;
  position: relative !important;
}
.reward-path-progress-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ink30, #C2BAB0) !important;
  margin-top: 4px !important;
}

/* ── 96. Reward nodes: premium ── */
.reward-node {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  position: relative !important;
  animation: fadeInUp .4s var(--ease) both !important;
}
.reward-circle {
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
  transition: all .2s var(--ease) !important;
}
.reward-circle.unlocked {
  background: #58CC02 !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(88,204,2,.25) !important;
}
.reward-circle.current {
  box-shadow: 0 0 0 3px rgba(249,200,67,.2), 0 4px 12px rgba(249,200,67,.15) !important;
  animation: rewardPulse 2s ease-in-out infinite !important;
}
@keyframes rewardPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(249,200,67,.2), 0 4px 12px rgba(249,200,67,.15); }
  50%      { box-shadow: 0 0 0 6px rgba(249,200,67,.1), 0 4px 16px rgba(249,200,67,.25); }
}
.reward-circle.locked {
  background: rgba(194,186,176,.1) !important;
  opacity: .5 !important;
}
.reward-info {
  flex: 1 !important;
  min-width: 0 !important;
}
.reward-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ink, #1A1713) !important;
}
.reward-subtitle {
  font-size: 12px !important;
  color: var(--ink60, #6B6459) !important;
  margin-top: 1px !important;
}
.reward-day-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--ink30, #C2BAB0) !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  margin-bottom: 2px !important;
}
.reward-day-badge.current {
  color: var(--g2, #F07020) !important;
}
.reward-day-badge.unlocked {
  color: #58CC02 !important;
}
.reward-countdown {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--g2, #F07020) !important;
  margin-top: 3px !important;
}
.reward-claim-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  margin-top: 6px !important;
  border: none !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, var(--g1, #F9C843), var(--g2, #F07020)) !important;
  color: white !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all .1s ease !important;
}
.reward-claim-btn:active {
  transform: scale(.95) !important;
}

/* Line segments between reward nodes */
.reward-line-seg {
  width: 3px !important;
  height: 24px !important;
  margin: 0 0 0 38px !important;
  border-radius: 2px !important;
  background: rgba(194,186,176,.15) !important;
}
.reward-line-seg.done {
  background: #58CC02 !important;
  box-shadow: 0 0 6px rgba(88,204,2,.15) !important;
}
.reward-line-seg.active {
  background: linear-gradient(180deg, #58CC02 40%, rgba(194,186,176,.2)) !important;
}

/* ── 97. Btn-3d classes: consistent 3D Duolingo styling ── */
.btn-3d-green {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: none !important;
  border-bottom: 4px solid #46A302 !important;
  border-radius: 16px !important;
  background: #58CC02 !important;
  color: white !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(88,204,2,.25) !important;
  transition: all .1s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}
.btn-3d-green:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(88,204,2,.3) !important;
  filter: brightness(1.05) !important;
}
.btn-3d-green:active {
  border-bottom-width: 2px !important;
  transform: translateY(2px) !important;
  transition-duration: .04s !important;
  box-shadow: 0 1px 4px rgba(88,204,2,.1) !important;
}

.btn-3d-gold {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: none !important;
  border-bottom: 4px solid #D4880A !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, var(--g1, #F9C843), var(--g2, #F07020)) !important;
  color: white !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(249,200,67,.25) !important;
  transition: all .1s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}
.btn-3d-gold:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(249,200,67,.3) !important;
  filter: brightness(1.05) !important;
}
.btn-3d-gold:active {
  border-bottom-width: 2px !important;
  transform: translateY(2px) !important;
  transition-duration: .04s !important;
  box-shadow: 0 1px 4px rgba(249,200,67,.1) !important;
}

/* ── 98. Text gradient gold utility ── */
.text-gradient-gold {
  background: linear-gradient(135deg, var(--g1, #F9C843), var(--g2, #F07020)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── 99. Spinner: smooth, gold ── */
.spinner {
  width: 32px !important; height: 32px !important;
  border: 3px solid rgba(194,186,176,.12) !important;
  border-top: 3px solid var(--g2, #F07020) !important;
  border-radius: 50% !important;
  animation: spinSmooth9 .7s cubic-bezier(.4,.15,.6,.85) infinite !important;
}
@keyframes spinSmooth9 {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

/* ── 100. Global hover-lift and press utility ── */
.hover-lift {
  transition: transform .12s ease, box-shadow .12s ease !important;
}
.hover-lift:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
}
.press-3d {
  transition: all .1s ease !important;
}
.press-3d:active {
  border-bottom-width: 2px !important;
  transform: translateY(2px) !important;
  transition-duration: .04s !important;
  box-shadow: none !important;
}

/* ── 101. Modal entrance: spring ── */
.modal-content {
  animation: modalSpring9 .45s var(--spring) both !important;
}
@keyframes modalSpring9 {
  0%   { transform: translateY(100%); }
  60%  { transform: translateY(-4px); }
  80%  { transform: translateY(1px); }
  100% { transform: translateY(0); }
}

/* ── 102. Option correct text: readable green (not too dark) ── */
.fs-option.correct .fs-option-text {
  color: #2D7A00 !important;
  font-weight: 700 !important;
}

/* ── 103. Invite card: centered, no scroll needed ── */
.lb-invite {
  margin-top: 16px !important;
  padding: 20px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(249,200,67,.04), rgba(240,112,32,.02)) !important;
  border: 2px dashed rgba(249,200,67,.25) !important;
  text-align: center !important;
}
.lb-invite-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--ink, #1A1713) !important;
}
.lb-invite-desc {
  font-size: 13px !important;
  color: var(--ink60, #6B6459) !important;
  line-height: 1.5 !important;
  margin-top: 6px !important;
}

/* ── 104. Lektura detail header: gradient bg ── */
.lektura-detail-header {
  border-radius: 20px !important;
  padding: 20px !important;
  margin-bottom: 14px !important;
  text-align: center !important;
}

/* ── 105. Lektura tab buttons: clean 3D ── */
.lektura-tab-btn {
  padding: 8px 16px !important;
  border-radius: 10px !important;
  border: 2px solid rgba(194,186,176,.15) !important;
  border-bottom: 3px solid rgba(194,186,176,.3) !important;
  background: white !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink60, #6B6459) !important;
  cursor: pointer !important;
  transition: all .1s ease !important;
  white-space: nowrap !important;
}
.lektura-tab-btn.active {
  border-color: var(--g1, #F9C843) !important;
  border-bottom-color: rgba(249,200,67,.5) !important;
  background: rgba(249,200,67,.06) !important;
  color: var(--ink, #1A1713) !important;
  box-shadow: 0 2px 6px rgba(249,200,67,.1) !important;
}
.lektura-tab-btn:active {
  border-bottom-width: 2px !important;
  transform: translateY(1px) !important;
  transition-duration: .04s !important;
}

/* ── 106. Solution sections: colorful emojis, clear ── */
.fs-solution-text strong {
  color: var(--ink, #1A1713) !important;
  font-weight: 700 !important;
}
.fs-solution-text br + strong {
  display: inline-block !important;
  margin-top: 6px !important;
}

/* ── 107. Fixed continue button at bottom: gradient fade ── */
.fs-continue-fixed {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important; right: 0 !important;
  padding: 12px 20px !important;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  background: linear-gradient(0deg, #FFFDF7 80%, rgba(255,253,247,0) 100%) !important;
  z-index: 10 !important;
}

/* ── 108. Reduced motion: respect user preference ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── 109. Wiersz card: purple theme on hover ── */
.wiersz-card:hover {
  border-color: rgba(159,122,234,.25) !important;
  box-shadow: 0 6px 20px rgba(159,122,234,.08) !important;
  transform: translateY(-2px) !important;
}

/* ── 110. Toast notifications: bouncier ── */
.toast-notification {
  border-radius: 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
}

/* ── FINAL NOTES ──
   - NO position:relative or overflow:hidden on #view-tasks
   - NO box-shadow on .tasks-sub-toggle button.active (the box-shadow is on the button via CSS override)
   - Scrolling preserved everywhere
   - Accordion toggle NOT overridden (JS handles open/close)
   ── */

/* END v9.2 — ABSOLUTE MASTERPIECE 12/10 */