/* ============================================================
   قدراتي — styled 1:1 after "DuoLingo Design System (Community)"
   Figma file sCGqaL307LkNrY35xnV66O. All colors/radii/sizes are
   exact values extracted from the Figma nodes.
   Font: the file uses "DIN 2014 Rounded VF" (no Arabic glyphs);
   Baloo Bhaijaan 2 is the rounded Arabic equivalent.
   ============================================================ */
:root {
  /* exact palette from Figma */
  --green: #58CC02;        --green-dk: #58A700;
  --blue: #1CB0F6;         --blue-dk: #1899D6;
  --blue-light: #DDF4FF;   --blue-border: #63C9F9;
  --purple: #CE82FF;       --purple-dk: #A568CC;
  --purple-tint: #EDD1FF;  --purple-pale: #DBC3EB;  --purple-shine: #DAA0FF;
  --gold: #FFC800;         --gold-dk: #E6A000;
  --gold-shine: #FFE700;   --gold-soft: #FBE56D;    --brown: #AA572A;
  --red: #FF4B4B;          --red-soft: #FFB2B2;
  --orange: #FF9600;
  --ink: #4B4B4B;          --gray: #777777;         --gray-icon: #AFAFAF;
  --gray-shadow: #B7B7B7;  --line: #E5E5E5;         --divider: #D9D9D9;
  --disabled: #D9D9D9;     --snow: #FFFFFF;
  --green-lip: #478700;    /* exact lip under #58CC02 button (Figma) */
  --green-bg: #D6FFB8;     --red-bg: #FFDFE0;       --red-dk2: #EA2B2B;
  --font: 'Baloo Bhaijaan 2', 'Segoe UI', Tahoma, sans-serif;
  --nav-h: 80px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
body {
  margin: 0; min-height: 100%;
  background: #ECECEC;
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.app {
  max-width: 430px; margin: 0 auto; min-height: 100vh;
  background: var(--snow);
  box-shadow: 0 0 0 1px var(--line), 0 18px 60px rgba(75,75,75,.18);
  position: relative; display: flex; flex-direction: column;
}
@media (max-width: 470px) { .app { box-shadow: none; } }

h1,h2,h3 { margin: 0; font-weight: 700; }
button { font-family: var(--font); cursor: pointer; }
svg.ic { display: block; }

/* ============================================================
   Buttons — Figma "Button": 398x48 slot, face 43px r13,
   5px darker lip below, 16px/700 uppercase label
   ============================================================ */
.btn {
  display: block; width: 100%;
  border: 0; border-radius: 13px;
  height: 43px; margin-bottom: 5px;
  font-size: 16px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: #fff; background: var(--green);
  box-shadow: 0 5px 0 var(--green-lip);
  transition: transform .08s, box-shadow .08s;
  user-select: none;
}
.btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--green-lip); }
.btn:disabled {
  background: var(--disabled); color: var(--gray);
  box-shadow: none; cursor: default; transform: none;
}
.btn-blue   { background: var(--blue);   box-shadow: 0 5px 0 var(--blue-dk); }
.btn-blue:active   { box-shadow: 0 0 0 var(--blue-dk); }
.btn-red    { background: var(--red);    box-shadow: 0 5px 0 var(--red-dk2); }
.btn-red:active    { box-shadow: 0 0 0 var(--red-dk2); }
.btn-white  {
  background: #fff; color: var(--purple);
  box-shadow: 0 5px 0 var(--purple-pale);
}
.btn-white:active  { box-shadow: 0 0 0 var(--purple-pale); }
.btn-ghost {
  background: #fff; color: var(--blue);
  border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line);
}
.btn-ghost:active { box-shadow: 0 0 0 var(--line); transform: translateY(2px); }

/* ============================================================
   Context bar — Figma "Context Bar" 430x54, white, counters:
   icon + 16px/700 number (streak #FF9600, gem #1CB0F6, ♥ #FF4B4B)
   ============================================================ */
.statbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; justify-content: space-around; align-items: center;
  background: var(--snow);
  height: 54px; padding: 0 16px;
}
.stat { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 16px; }
.stat-streak { color: var(--orange); }
.stat-xp     { color: var(--blue); }
.stat-hearts { color: var(--red); }

/* ---------- Screens ---------- */
.screen { flex: 1; display: flex; flex-direction: column; padding-bottom: calc(var(--nav-h) + 16px); animation: fadeIn .25s ease; }
.screen-full { padding-bottom: 0; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform:none;} }

/* ============================================================
   Section header — Figma: 398x79, face #CE82FF r13 on
   #A568CC lip (4px), title 21px white, kicker 16px #EDD1FF
   uppercase, vertical divider + white icon on the far side
   ============================================================ */
.unit-banner {
  margin: 14px 16px 8px; padding: 12px 18px;
  border-radius: 13px; color: #fff; position: relative;
  display: flex; align-items: center; gap: 14px;
  min-height: 75px;
}
.unit-banner .u-txt { flex: 1; }
.unit-banner .u-kicker {
  font-size: 16px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; opacity: .95;
}
.unit-banner h2 { font-size: 21px; font-weight: 700; line-height: 1.15; }
.unit-banner .u-side {
  display: flex; align-items: center; gap: 14px; align-self: stretch;
}
.unit-banner .u-divider { width: 2px; align-self: stretch; margin: -2px 0; }
.u-purple { background: var(--purple); box-shadow: 0 4px 0 var(--purple-dk); }
.u-purple .u-kicker { color: var(--purple-tint); }
.u-purple .u-divider { background: var(--purple-dk); }
.u-green  { background: var(--green);  box-shadow: 0 4px 0 var(--green-dk); }
.u-green .u-kicker { color: #C8F0A8; }
.u-green .u-divider { background: var(--green-dk); }
.u-blue   { background: var(--blue);   box-shadow: 0 4px 0 var(--blue-dk); }
.u-blue .u-kicker { color: var(--blue-light); }
.u-blue .u-divider { background: var(--blue-dk); }
.u-gold { background: var(--gold); box-shadow: 0 4px 0 var(--gold-dk); }
.u-gold .u-kicker { color: #FFF1C1; }
.u-gold .u-divider { background: var(--gold-dk); }

/* ============================================================
   Level path — Figma "Level": 71x58 ellipse face on same-size
   ellipse lip offset 7px down; inner top shine; icon centered.
   Current level: 89x84 progress ring (6px #E5E5E5 + colored arc)
   + floating white "START" tooltip (r11, 2px #E5E5E5, 17px/900)
   ============================================================ */
.path { display: flex; flex-direction: column; align-items: center; padding: 14px 0 6px; position: relative; }
.path-row { position: relative; height: 97px; width: 100%; display: flex; justify-content: center; }

.node {
  position: relative;
  width: 71px; height: 58px; margin-top: 10px;
  border-radius: 50%;
  border: 0; padding: 0;
  background: var(--node-c, var(--purple));
  box-shadow: 0 7px 0 var(--node-s, var(--purple-dk));
  display: flex; align-items: center; justify-content: center;
  transition: transform .08s, box-shadow .08s;
}
.node::before { /* inner dome shine */
  content: ''; position: absolute; top: 3px; left: 6.5px;
  width: 58px; height: 48px; border-radius: 50%;
  background: var(--node-h, transparent);
}
.node > * { position: relative; }
.node:active:not(:disabled) { transform: translateY(7px); box-shadow: 0 0 0 var(--node-s, var(--purple-dk)); }
.node-done   { --node-c: var(--gold); --node-s: var(--gold-dk); --node-h: var(--gold-shine); }
.node-locked { --node-c: var(--line); --node-s: var(--gray-shadow); --node-h: transparent; cursor: default; }
.node-ring { /* progress ring around current level; node face+lip spans y 10-75, ring height 84 → top 0 centers it */
  position: absolute; top: 0; left: 50%; margin-left: -44.5px;
  width: 89px; height: 84px; pointer-events: none;
}
.node-tip {
  position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  background: #fff; color: var(--node-c, var(--purple));
  border: 2px solid var(--line);
  font-size: 17px; font-weight: 800; text-transform: uppercase;
  border-radius: 11px; padding: 5px 16px 3px; white-space: nowrap;
  animation: tipFloat 1.6s ease-in-out infinite; z-index: 5;
}
.node-tip::after {
  content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px; background: #fff;
  border-left: 2px solid var(--line); border-bottom: 2px solid var(--line);
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
@keyframes tipFloat { 0%,100% { transform: translate(-50%,0);} 50% { transform: translate(-50%,-5px);} }

/* ============================================================
   Bottom nav — Figma "Bottom Nav": white, 1px #E5E5E5 top line,
   icon-only 40x40 r8 buttons; active: #DDF4FF + 2px #63C9F9
   ============================================================ */
.bottomnav {
  position: fixed; bottom: 0; right: 50%; transform: translateX(50%);
  width: 100%; max-width: 430px; height: var(--nav-h);
  background: var(--snow); border-top: 1px solid var(--line);
  display: flex; justify-content: space-around; align-items: center; z-index: 40;
  padding-bottom: env(safe-area-inset-bottom);
}
.navbtn {
  width: 40px; height: 40px; border-radius: 8px;
  border: 2px solid transparent; background: none;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.navbtn.active { background: var(--blue-light); border-color: var(--blue-border); }

/* ============================================================
   Lesson / exam session
   ============================================================ */
.session-top {
  display: flex; align-items: center; gap: 14px;
  height: 54px; padding: 0 16px; margin-top: 6px;
}
.x-btn { border: 0; background: none; padding: 4px; display: flex; }
/* Progress bar — Figma: track #E5E5E5 r64 h16, fill #FFC800 with
   #FBE56D shine line (5px, r6, inset 8px) */
.progress { flex: 1; height: 16px; background: var(--line); border-radius: 64px; overflow: hidden; }
.progress > i {
  display: block; height: 100%; background: var(--gold); border-radius: 64px;
  transition: width .4s cubic-bezier(.3,1.4,.5,1); position: relative; min-width: 0;
}
.progress > i::after { content:''; position:absolute; top:4px; right:8px; left:8px; height:5px; border-radius:6px; background:var(--gold-soft); }
.sess-hearts { display:flex; align-items:center; gap:6px; font-weight: 700; color: var(--red); font-size: 16px; white-space: nowrap; }
.sess-hearts.hurt { animation: shake .4s ease; }
.sess-hearts.dead { filter: grayscale(1); opacity: .6; }
.sess-timer { font-weight: 700; color: var(--blue); font-size: 18px; min-width: 64px; text-align: center; }
.sess-timer.low { color: var(--red); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .45; } }

/* ============================================================
   Question timer — the SAME Duolingo progress bar we use up top
   (16px track, r64, inset shine line) but draining for time:
   blue → orange (≤15s) → red panic (≤5s), and ices over when
   frozen. (.qt-svg / .qt-hand below still style the TIMER_SVG on
   the win/fail result cards — keep them.)
   ============================================================ */
.qt-svg .qt-face { fill: var(--blue-light); transition: fill .3s; }
.qt-hand {
  transform-box: fill-box; transform-origin: 4% 96%;
  animation: spinSlow 5s linear infinite;
}
.qtimer {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 430px; margin: 12px auto 2px; padding: 0 16px;
  animation: fadeUp .4s ease backwards;
}
.qt-ico { display: flex; width: 24px; height: 24px; flex-shrink: 0; color: var(--blue); }
.qt-ico svg { width: 100%; height: 100%; }
.qtimer:not(.frozen):not(.paused) .qt-ico { animation: tick 2.2s ease-in-out infinite; transform-origin: 50% 52%; }
@keyframes tick { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
/* the bar itself — identical to .progress / .progress > i */
.qt-track {
  flex: 1; position: relative; height: 16px;
  background: var(--line); border-radius: 64px; overflow: hidden;
  transition: box-shadow .3s;
}
.qt-fill {
  display: block; height: 100%; width: 100%; min-width: 0;
  background: var(--blue); border-radius: 64px;
  transition: width 1s linear, background .4s;
  position: relative;
}
.qt-fill::after { /* same inset shine line as the top progress bar */
  content: ''; position: absolute; top: 4px; right: 8px; left: 8px; height: 5px;
  border-radius: 6px; background: rgba(255,255,255,.5);
}
.qt-num {
  flex-shrink: 0; min-width: 30px; text-align: center;
  font-weight: 800; font-size: 18px; color: var(--blue); font-variant-numeric: tabular-nums;
}
/* low time: orange */
.qtimer.low .qt-ico, .qtimer.low .qt-num { color: var(--orange); }
.qtimer.low .qt-fill { background: var(--orange); }
.qtimer.low .qt-num { animation: numPop 1s ease infinite; }
/* critical: red panic */
.qtimer.crit .qt-ico, .qtimer.crit .qt-num { color: var(--red); }
.qtimer.crit .qt-fill { background: var(--red); }
.qtimer.crit .qt-num { animation: numPop .5s ease infinite; }
.qtimer.crit .qt-track { animation: critBar 1s ease infinite; }
.qtimer.paused { opacity: .6; }
@keyframes numPop { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.28); } }
@keyframes critBar { 50% { box-shadow: 0 0 12px 2px rgba(255,75,75,.6); } }

/* frozen (freeze hint): the bar glazes to ice, the number → spinning snowflake */
.qtimer.frozen .qt-ico { color: #1CB0F6; }
.qtimer.frozen .qt-track { background: #D6F1FF; box-shadow: inset 0 0 0 2px rgba(140,217,255,.55); }
.qtimer.frozen .qt-fill { background: #8AD9FF !important; transition: none; }
.qtimer.frozen .qt-fill::after { background: rgba(255,255,255,.75); }
.qtimer.frozen .qt-num { color: #1CB0F6; }
.qt-num.qt-num-frozen { display: flex; align-items: center; justify-content: center; }
.qt-num.qt-num-frozen svg { width: 20px; height: 20px; animation: flakeSpin 9s linear infinite; }
.qt-ice {
  position: absolute; inset: 0; pointer-events: none; border-radius: 64px;
  background: linear-gradient(115deg, rgba(255,255,255,.8), rgba(170,224,255,.3) 55%, rgba(255,255,255,.6));
  transform-origin: right center;
  animation: iceForm .45s cubic-bezier(.3,1.5,.5,1) backwards;
}
@keyframes iceForm { 0% { opacity: 0; transform: scaleX(.1); } 100% { opacity: 1; transform: none; } }
@keyframes flakeSpin { to { transform: rotate(360deg); } }

/* ============================================================
   In-level hint power-ups — a floating "+" beside the check
   button; tapping it GOOEY-blooms the two power-up bubbles out
   of it (SVG #goo filter melts them together like liquid)
   ============================================================ */
.action-bar.has-fab { display: flex; gap: 12px; align-items: flex-start; }
.action-bar.has-fab .btn { flex: 1; min-width: 0; }

.hint-fab { position: relative; width: 48px; height: 48px; flex-shrink: 0; }
.goo-defs { position: absolute; width: 0; height: 0; }
.fab-goo { position: absolute; inset: 0; filter: url(#goo); }

.fab-main {
  position: absolute; inset: 0;
  border: 0; border-radius: 50%; padding: 0;
  background: var(--blue); color: #fff;
  box-shadow: 0 4px 0 #1899D6;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
  transition: transform .08s, box-shadow .08s;
}
.fab-main svg { width: 22px; height: 22px; transition: transform .4s cubic-bezier(.3,1.7,.5,1); }
.fab-main:active { transform: translateY(4px); box-shadow: 0 0 0 #1899D6; }
.hint-fab.open .fab-main svg { transform: rotate(135deg); } /* + melts into × */

/* the two bubbles start swallowed inside the +, then squirt upward;
   while they travel, the goo filter stretches them off the + like a drop */
.fab-bubble {
  position: absolute; left: -1px; bottom: -1px; /* 50px bubble centered on the 48px + */
  width: 50px; height: 50px;
  border: 0; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer; user-select: none;
  transform: scale(.4);
  transition: transform .5s cubic-bezier(.3,1.65,.45,1);
}
.fab-bubble svg { width: 24px; height: 24px; }
.fab-freeze { background: #1CB0F6; }
.fab-fifty  { background: #FF9600; }
.hint-fab.open .fab-freeze { transform: translateY(-70px) scale(1); }
.hint-fab.open .fab-fifty  { transform: translateY(-136px) scale(1); transition-delay: .07s; }
/* squishy press while open (keeps the lift, sinks into the goo) */
.hint-fab.open .fab-freeze:not(:disabled):active { transform: translateY(-66px) scale(.92); transition-duration: .08s; }
.hint-fab.open .fab-fifty:not(:disabled):active  { transform: translateY(-132px) scale(.92); transition-duration: .08s; }

.fab-bubble:not(:disabled):not(.used) svg { will-change: transform; }
.hint-fab.open .fab-freeze:not(.used) svg { animation: flakeSpin 8s linear infinite; }
.hint-fab.open .fab-fifty:not(.used) svg { animation: snip 2.6s ease-in-out infinite; transform-origin: 28% 50%; }
@keyframes snip { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-13deg); } 62% { transform: rotate(7deg); } }
.fab-bubble:disabled:not(.used) { cursor: default; filter: grayscale(1) brightness(1.12); }
.fab-bubble.used { cursor: default; }
.fab-bubble.just-used svg { animation: badgeIn .3s ease-out; }
@keyframes badgeIn {
  0%   { transform: scale(.6); opacity: .3; }
  100% { transform: scale(1); opacity: 1; }
}

/* label chips live OUTSIDE the goo layer so the text stays crisp */
.fab-chip {
  position: absolute; left: 58px; z-index: 46;
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
  background: #fff; border: 2px solid var(--line); border-radius: 12px;
  padding: 4px 12px; font-size: 13px; font-weight: 800; color: var(--ink);
  opacity: 0; transform: translateX(-10px) scale(.85); pointer-events: none;
  transition: opacity .22s, transform .35s cubic-bezier(.3,1.6,.5,1);
}
.chip-freeze { bottom: 80px; color: var(--blue-dk); border-color: #84D8FF; }
.chip-fifty  { bottom: 146px; color: #C56A00; border-color: #FFC56B; }
.chip-bal    { bottom: 200px; left: 2px; color: var(--blue); background: var(--blue-light); border-color: transparent; }
.hint-fab.open .fab-chip { opacity: 1; transform: none; }
.hint-fab.open .chip-freeze { transition-delay: .14s; }
.hint-fab.open .chip-fifty  { transition-delay: .22s; }
.hint-fab.open .chip-bal    { transition-delay: .3s; }

/* a 50/50-removed choice blurs out — clearly "deleted" */
.choice.eliminated {
  pointer-events: none;
  animation: choiceDelete .5s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes choiceDelete {
  0%   { opacity: 1; filter: blur(0) grayscale(0); transform: none; }
  100% { opacity: .3; filter: blur(3px) grayscale(.6); transform: scale(.95); }
}

/* lightweight toast for hint feedback */
.toast {
  position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom));
  z-index: 60; display: flex; align-items: center; gap: 8px; max-width: 80vw;
  background: #4B4B4B; color: #fff; font-weight: 800; font-size: 14px;
  padding: 12px 20px 14px; border-radius: 16px;
  box-shadow: 0 4px 0 rgba(0,0,0,.18), 0 8px 18px rgba(0,0,0,.16);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity .22s, transform .22s;
}
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* solid Duolingo pills with a colored bottom lip — no gradient */
.toast.ice { background: var(--blue); box-shadow: 0 4px 0 var(--blue-dk), 0 8px 18px rgba(28,150,220,.28); }
.toast.snip { background: #FF9600; box-shadow: 0 4px 0 #E07D00, 0 8px 18px rgba(224,125,0,.28); }

.q-area { flex: 1; padding: 4px 16px 150px; overflow-y: auto; }
/* Header — Figma "Translate this sentence": 26px/700 #4B4B4B */
.q-kicker { color: var(--ink); font-weight: 700; font-size: 26px; line-height: 1.25; margin: 10px 0 16px; }
.q-count { color: var(--gray-icon); font-weight: 700; font-size: 14px; text-transform: uppercase; margin: 8px 0 0; }
.q-stem {
  font-size: 20px; font-weight: 600; line-height: 1.7; margin-bottom: 14px;
  border: 2px solid var(--line); border-radius: 10px; padding: 12px 16px;
}
.q-figure { display: flex; justify-content: center; margin: 10px 0 14px; }
.q-figure svg { max-width: 100%; height: auto; }

table.q-table { border-collapse: collapse; margin: 4px auto 8px; font-size: 16px; }
table.q-table th { background: var(--blue-light); color: var(--blue-dk); }
table.q-table th, table.q-table td { border: 2px solid var(--line); padding: 6px 14px; text-align: center; font-weight: 600; }

/* comparison layout */
.cmp-wrap { display: flex; gap: 10px; margin: 8px 0 14px; }
.cmp-box {
  flex: 1; background: #fff; border: 2px solid var(--line); border-radius: 13px;
  box-shadow: 0 2px 0 var(--line);
  padding: 12px 10px; text-align: center;
}
.cmp-box .cmp-t { font-size: 13px; font-weight: 700; color: var(--gray); margin-bottom: 6px; }
.cmp-box .cmp-v { font-size: 20px; font-weight: 700; }

/* ============================================================
   Choices — Figma "Word" chip: white face, 2px #E5E5E5 border,
   r13, 2px lip; text 20px/400 #4B4B4B. Selected: blue.
   ============================================================ */
.choices { display: flex; flex-direction: column; gap: 10px; }
.choice {
  display: flex; align-items: center; gap: 12px; text-align: right;
  background: #fff; border: 2px solid var(--line); border-radius: 13px;
  box-shadow: 0 2px 0 var(--line);
  padding: 12px 14px; font-size: 19px; font-weight: 500; color: var(--ink);
  transition: all .1s;
}
.choice .ch-letter {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  border: 2px solid var(--line); color: var(--gray-icon);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}
.choice:active { transform: translateY(2px); box-shadow: 0 0 0 var(--line); }
.choice.sel { border-color: var(--blue-border); background: var(--blue-light); color: var(--blue-dk); box-shadow: 0 2px 0 var(--blue-border); }
.choice.sel .ch-letter { border-color: var(--blue-border); color: var(--blue-dk); background:#fff; }
.choice.correct { border-color: var(--green); background: var(--green-bg); color: var(--green-dk); box-shadow: 0 2px 0 var(--green); }
.choice.correct .ch-letter { border-color: var(--green); color: var(--green-dk); background:#fff; }
.choice.wrong { border-color: var(--red); background: var(--red-bg); color: var(--red-dk2); box-shadow: 0 2px 0 var(--red); }
.choice.wrong .ch-letter { border-color: var(--red); color: var(--red-dk2); background:#fff; }
.choice:disabled { opacity: 1; }
.choice.dim { opacity: .5; }

/* ============================================================
   Bottom action area + feedback sheet
   ============================================================ */
.action-bar {
  position: fixed; bottom: 0; right: 50%; transform: translateX(50%);
  width: 100%; max-width: 430px; z-index: 45;
  background: var(--snow);
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
}
.feedback {
  position: fixed; bottom: 0; right: 50%; transform: translateX(50%) translateY(100%);
  width: 100%; max-width: 430px; z-index: 50;
  padding: 18px 16px calc(24px + env(safe-area-inset-bottom));
  transition: transform .3s cubic-bezier(.3,1.2,.4,1);
}
.feedback.show { transform: translateX(50%) translateY(0); }
.feedback.good { background: var(--green-bg); }
.feedback.bad  { background: var(--red-bg); }
.fb-head { display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 700; }
.feedback.good .fb-head { color: var(--green-dk); }
.feedback.bad  .fb-head { color: var(--red-dk2); }
.fb-x {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: #fff; color: var(--red);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
}
.fb-correct { font-weight: 600; margin: 6px 0 2px; font-size: 16px; }
.feedback.bad .fb-correct { color: var(--red-dk2); }
.fb-solution-toggle { background:none; border:0; font-weight:700; font-size:15px; padding:6px 0; text-decoration: underline; }
.feedback.good .fb-solution-toggle { color:var(--green-dk); } .feedback.bad .fb-solution-toggle { color:var(--red-dk2); }
.fb-solution {
  background: rgba(255,255,255,.75); border-radius: 12px; padding: 10px 14px;
  font-size: 15px; line-height: 1.8; max-height: 30vh; overflow-y: auto; margin-bottom: 8px; white-space: pre-line;
}
.feedback .btn { margin-top: 10px; }

/* ============================================================
   Lesson complete — Figma: title 31px #FFC800 (ls +1.2);
   stat cards 102x86: colored shell r17, 13px/900 uppercase white
   label on top band, white face r13 (2px colored border) below
   ============================================================ */
.complete { flex:1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 16px; text-align: center; position:relative; overflow:hidden; }
.complete .owl { font-size: 84px; line-height: 1.1; animation: owlPop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes owlPop { from { transform: scale(.2) rotate(-20deg); opacity:0;} to { transform: none; opacity:1;} }
.complete h1 { color: var(--gold); font-size: 31px; letter-spacing: 1.2px; margin: 14px 0 22px; }
.result-cards { display: flex; gap: 20px; justify-content: center; width: 100%; margin-bottom: 26px; }
.rcard { width: 102px; border-radius: 17px; padding: 0; font-weight: 700; }
.rcard .rc-t { font-size: 13px; font-weight: 800; text-transform: uppercase; color: #fff; padding: 3px 0 2px; }
.rcard .rc-v {
  background: #fff; border-radius: 13px; height: 66px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  border: 2px solid transparent; font-size: 19px;
}
.rc-gold  { background: var(--gold); }  .rc-gold .rc-v  { border-color: var(--gold);  color: var(--gold); }
.rc-blue  { background: var(--blue); }  .rc-blue .rc-v  { border-color: var(--blue);  color: var(--blue); }
.rc-green { background: var(--green); } .rc-green .rc-v { border-color: var(--green); color: var(--green); }
.stars { font-size: 44px; letter-spacing: 6px; margin-bottom: 6px; }
.stars .off { filter: grayscale(1); opacity: .35; }


/* ============================================================
   Losing screen — Duolingo "out of hearts", clean & juicy:
   heart drops in → cracks with shard burst + screen shake →
   halves sway forever, ripples + sparks loop, cards pop in
   with shine sweeps, CTA heartbeats. Timeline ≈ 0 → 2.6s.
   ============================================================ */
.fail-scene { animation: failShake .5s 1.1s ease both; padding-bottom: 12vh; }
@keyframes failShake {
  0%, 100% { transform: translateX(0); }
  15%, 55% { transform: translateX(-9px); }
  35%, 75% { transform: translateX(9px); }
}

/* breaking-heart hero */
.fail-hero {
  position: relative; width: 158px; height: 150px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  margin: 6px 0 2px;
}
/* shards bursting out when the heart cracks */
.bh-shard {
  position: absolute; top: 50%; left: 50%; margin: -5px;
  width: 10px; height: 10px; border-radius: 3px;
  opacity: 0; pointer-events: none;
  animation: shardFly .9s 1.15s cubic-bezier(.15,.65,.35,1) forwards;
}
@keyframes shardFly {
  0%   { opacity: 0; transform: rotate(var(--ang)) translateY(-14px) scale(1); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--ang)) translateY(calc(var(--dist) * -1)) scale(.35) rotate(160deg); }
}
.bh-svg {
  width: 80%; height: 80%; overflow: visible; position: relative;
  filter: drop-shadow(0 7px 0 rgba(234,43,43,.22));
  animation:
    heartLand .65s .15s cubic-bezier(.3,1.5,.5,1) backwards,
    heartSway 3s 2.2s ease-in-out infinite;
}
@keyframes heartLand { /* drop in with squash & stretch */
  0%   { transform: translateY(-90px) scale(.55); opacity: 0; }
  55%  { transform: translateY(4px) scale(1.12, .82); opacity: 1; }
  75%  { transform: translateY(-3px) scale(.94, 1.07); }
  100% { transform: none; opacity: 1; }
}
@keyframes heartSway {
  0%, 100% { transform: translateY(0) rotate(-2.5deg); }
  50%      { transform: translateY(-7px) rotate(2.5deg); }
}
.bh-half { transform-box: fill-box; }
.bh-l { transform-origin: 70% 95%; animation: bhSplitL .8s 1.15s cubic-bezier(.35,1.4,.5,1) forwards; }
.bh-r { transform-origin: 30% 95%; animation: bhSplitR .8s 1.15s cubic-bezier(.35,1.4,.5,1) forwards; }
@keyframes bhSplitL {
  0%  { transform: none; }
  18% { transform: translate(.6px, 0); }
  100%{ transform: translate(-2.8px, 1.1px) rotate(-13deg); }
}
@keyframes bhSplitR {
  0%  { transform: none; }
  18% { transform: translate(-.6px, 0); }
  100%{ transform: translate(2.8px, 1.3px) rotate(13deg); }
}
.bh-crack { opacity: 0; animation: crackFlash .55s 1.05s ease both; }
@keyframes crackFlash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

.complete h1.fail-title {
  color: var(--red); font-size: 31px; letter-spacing: 1.2px;
  margin: 12px 0 6px; z-index: 2;
  animation:
    titleIn .55s 1.55s cubic-bezier(.3,1.5,.5,1) backwards,
    titleThrob 2.4s 2.4s ease-in-out infinite;
}
@keyframes titleThrob {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.fail-sub {
  color: var(--gray); font-weight: 600; line-height: 1.8;
  margin: 0 0 20px; z-index: 2;
  animation: fadeUp .45s 1.8s ease backwards;
}
.fail-cards { z-index: 2; }
.complete .fail-cards .rcard {
  position: relative; overflow: hidden;
  animation:
    springIn .5s cubic-bezier(.3,1.6,.5,1) backwards,
    cardFloat 3.4s ease-in-out infinite;
}
.complete .fail-cards .rcard:nth-child(1) { animation-delay: 2s, 2.8s; }
.complete .fail-cards .rcard:nth-child(2) { animation-delay: 2.15s, 3.4s; }
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
/* glossy shine sweeping across the cards, Duolingo-gold-chest style */
.complete .fail-cards .rcard::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: sweep 3.6s 3.1s ease-in-out infinite;
}
/* green avg-time card (Duolingo "BLAZING" timer card, green edition) */
.fail-time .qt-svg { width: 22px; height: 22px; }
.fail-time .qt-svg .qt-face { fill: var(--green-bg); }
.fail-time .rc-v { font-variant-numeric: tabular-nums; }
.fail-actions { width: 100%; max-width: 320px; display: grid; gap: 12px; z-index: 2; }
.fail-actions .btn {
  position: relative; overflow: hidden;
  animation:
    fadeUp .45s 2.35s cubic-bezier(.3,1.4,.5,1) backwards,
    btnHeartbeat 2s 3.3s ease-in-out infinite;
}
.fail-actions .btn:not(.btn-ghost)::after { /* CTA shine sweep */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: sweep 3s 3.8s ease-in-out infinite;
}
.fail-actions .btn-ghost { animation: fadeUp .45s 2.5s cubic-bezier(.3,1.4,.5,1) backwards; }
@keyframes btnHeartbeat {
  0%, 40%, 100% { transform: scale(1); }
  12% { transform: scale(1.05); }
  24% { transform: scale(1.015); }
}

/* ============================================================
   Lesson-start popup — Figma "Start Tooltip" (Select Lesson):
   #CE82FF r16 sheet, 21px white title, 18px/400 sub,
   white button (lip #DBC3EB) with uppercase colored label
   ============================================================ */
.lesson-pop-veil { position: fixed; inset: 0; z-index: 90; }
.lesson-pop {
  position: absolute; right: 16px; left: 16px;
  background: var(--pop-c, var(--purple)); border-radius: 16px;
  padding: 16px; z-index: 91;
  animation: popIn .18s ease;
}
.lesson-pop::before { /* arrow toward the level node */
  content: ''; position: absolute; top: -8px; right: var(--arrow-x, 50%);
  width: 18px; height: 18px; background: inherit;
  transform: translateX(50%) rotate(45deg); border-radius: 4px;
}
@keyframes popIn { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: none;} }
.lesson-pop h3 { color: #fff; font-size: 21px; font-weight: 700; margin: 2px 0 2px; }
.lesson-pop .lp-sub { color: #fff; font-size: 18px; font-weight: 400; margin-bottom: 14px; }
.lesson-pop .btn { margin-bottom: 0; }

/* ============================================================
   Generic pages (exam home, stats, settings) — Figma profile
   cards: white, 2px #E5E5E5 border, r16
   ============================================================ */
.page { padding: 16px; }
.page h1 { font-size: 26px; margin-bottom: 4px; }
.page .sub { color: var(--gray); font-weight: 500; margin-bottom: 18px; }
.card {
  background: #fff; border: 2px solid var(--line); border-radius: 16px;
  padding: 16px; margin-bottom: 14px;
}
.card h3 { font-size: 18px; margin-bottom: 8px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; }
.row .r-label { font-weight: 600; }
.row .r-sub { font-size: 13px; color: var(--gray); font-weight: 500; }

/* stat tiles (profile "Overview" grid) */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.tile {
  border: 2px solid var(--line); border-radius: 16px; background: #fff;
  padding: 12px 14px; display: flex; align-items: center; gap: 10px;
}
.tile .t-v { font-size: 17px; font-weight: 700; line-height: 1.2; }
.tile .t-l { font-size: 13px; color: var(--gray-icon); font-weight: 600; }

/* exam answer grid */
.exam-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 12px 0; }
.eg-cell { border: 2px solid var(--line); background: #fff; border-radius: 10px; padding: 7px 0; font-weight: 700; text-align:center; font-size: 15px; color: var(--gray); }
.eg-cell.ans { background: var(--blue-light); border-color: var(--blue-border); color: var(--blue-dk); }
.eg-cell.cur { border-color: var(--blue); }
.eg-cell.right { background: var(--green-bg); border-color: var(--green); color: var(--green-dk); }
.eg-cell.wrong2 { background: var(--red-bg); border-color: var(--red); color: var(--red-dk2); }

.report-bar { display:flex; align-items:center; gap:10px; margin: 8px 0; font-weight: 600; font-size: 15px; }
.report-bar .rb-track { flex:1; height: 16px; border-radius: 64px; background: var(--line); overflow:hidden; }
.report-bar .rb-fill { display:block; height:100%; border-radius:64px; }

.review-item { border: 2px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.review-item .ri-q { font-weight: 600; margin-bottom: 8px; }
.ri-row { font-size: 15px; font-weight: 600; margin: 3px 0; }
.ri-wrong { color: var(--red-dk2); } .ri-right { color: var(--green-dk); }
.ri-sol { background: #F7F7F7; border-radius: 10px; padding: 8px 12px; font-size: 14px; line-height: 1.8; margin-top: 8px; white-space: pre-line; }

/* segmented track switch */
.seg { display: flex; background: #fff; border: 2px solid var(--line); border-radius: 13px; padding: 3px; gap: 3px; }
.seg button { flex: 1; border: 0; background: none; border-radius: 9px; padding: 8px 4px 6px; font-weight: 700; font-size: 15px; color: var(--gray); }
.seg button.on { background: var(--blue-light); color: var(--blue-dk); border: 2px solid var(--blue-border); padding: 6px 2px 4px; }

/* toggle */
.toggle { width: 54px; height: 30px; border-radius: 16px; border: 0; background: var(--line); position: relative; transition: background .2s; flex-shrink: 0; }
.toggle::after { content: ''; position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 3px rgba(0,0,0,.2); transition: transform .2s; }
.toggle.on { background: var(--green); }
.toggle.on::after { transform: translateX(-24px); }

/* stats screen bars */
.dom-stat { margin-bottom: 14px; }
.dom-stat .ds-head { display: flex; justify-content: space-between; font-weight: 700; font-size: 15px; margin-bottom: 5px; }

/* ---------- Modal (disclaimer / about) ---------- */
.modal-veil {
  position: fixed; inset: 0; background: rgba(75,75,75,.45); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: fadeIn .2s;
}
.modal {
  background: #fff; border-radius: 16px; max-width: 398px; width: 100%;
  padding: 24px 22px; max-height: 84vh; overflow-y: auto; text-align: center;
  animation: owlPop .4s cubic-bezier(.3,1.4,.5,1);
}
.modal .m-owl { font-size: 58px; }
.modal h2 { font-size: 21px; margin: 6px 0 10px; }
.modal p { font-size: 15px; line-height: 1.9; color: var(--gray); font-weight: 500; text-align: right; }
.modal .btn { margin-top: 12px; }
.linkout { display:block; text-align:center; font-weight:700; color: var(--blue); text-decoration: none; padding: 10px; }

/* ============================================================
   Login — simple onboarding: logo hero, one name field
   (gray fill, 2px border, r13 like the design-system inputs),
   green CTA on its lip, guest link in link-blue caps
   ============================================================ */
.login-screen {
  align-items: center; justify-content: center; text-align: center;
  padding: 36px 24px calc(36px + env(safe-area-inset-bottom));
}

/* --- XP-coins hero (UI-kit frame): coins rain in, gold one slams
   down, then everything floats, the bolt zaps, sparks twinkle --- */
.coins-hero { position: relative; width: 296px; height: 188px; margin: 0 auto 10px; }
.co-glow {
  position: absolute; inset: -8% 4%;
  background: radial-gradient(circle, rgba(255,200,0,.35) 0%, rgba(255,200,0,0) 65%);
  border-radius: 50%;
  animation: glowPulse 2.6s 1.2s ease-in-out infinite;
}
.coins-hero .coin { position: absolute; overflow: visible; }
.coin-blue {
  width: 118px; left: 6px; top: 40px;
  animation:
    coinDrop .6s .4s cubic-bezier(.3,1.5,.5,1) backwards,
    coinBob 3.4s 1.7s ease-in-out infinite;
}
.coin-green {
  width: 118px; right: 6px; top: 40px;
  animation:
    coinDrop .6s .55s cubic-bezier(.3,1.5,.5,1) backwards,
    coinBob 3.4s 2.1s ease-in-out infinite reverse;
}
.coin-gold {
  width: 162px; left: 50%; margin-left: -81px; top: 8px; z-index: 2;
  filter: drop-shadow(0 10px 14px rgba(230,160,0,.35));
  animation:
    heartLand .7s .1s cubic-bezier(.3,1.5,.5,1) backwards,
    coinHero 3s 1.5s ease-in-out infinite;
}
@keyframes coinDrop {
  0%  { opacity: 0; transform: translateY(-70px) scale(.4) rotate(-14deg); }
  60% { opacity: 1; transform: translateY(6px) scale(1.06, .9); }
  100%{ opacity: 1; transform: none; }
}
@keyframes coinBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-9px) rotate(3deg); }
}
@keyframes coinHero { /* the gold coin proudly bounces */
  0%, 100% { transform: translateY(0) scale(1); }
  40%      { transform: translateY(-7px) scale(1.04); }
  55%      { transform: translateY(-4px) scale(.99, 1.03); }
  70%      { transform: translateY(0) scale(1.02, .98); }
}
.co-bolt {
  transform-box: fill-box; transform-origin: center;
  animation: boltZap 2.7s 1.9s ease-in-out infinite;
}
@keyframes boltZap {
  0%, 30%, 100% { transform: rotate(0) scale(1); }
  6%  { transform: rotate(-12deg) scale(1.18); }
  14% { transform: rotate(8deg) scale(1.05); }
  22% { transform: rotate(-3deg) scale(1.1); }
}
.co-spark {
  transform-box: fill-box; transform-origin: center;
  animation: sparkTwinkle 2.2s 1.4s ease-in-out infinite;
}
@keyframes sparkTwinkle {
  0%, 100% { opacity: .9; transform: scale(1) rotate(45deg); }
  50%      { opacity: .25; transform: scale(.5) rotate(90deg); }
}
.co-diamond {
  position: absolute; border-radius: 28%;
  animation:
    springIn .5s 1s cubic-bezier(.3,1.8,.5,1) backwards,
    diamondFloat 3.2s 1.6s ease-in-out infinite;
}
.co-diamond.cd2 { animation-delay: 1.15s, 2.2s; }
.co-diamond.cd3 { animation-delay: 1.3s, 1.9s; }
.co-diamond.cd4 { animation-delay: 1.45s, 2.6s; }
@keyframes diamondFloat {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: .95; }
  50%      { transform: translateY(-12px) rotate(65deg); opacity: .55; }
}
/* --- welcome badge-trio hero (WelcomeSVG): drops in, then floats gently --- */
.welcome-hero {
  width: 248px; max-width: 70vw; margin: 0 auto 18px;
  will-change: transform;
  animation:
    welcomeIn .7s .1s cubic-bezier(.3,1.5,.5,1) backwards,
    welcomeFloat 4.2s 1.2s ease-in-out infinite;
}
.welcome-svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes welcomeIn {
  0%   { opacity: 0; transform: translateY(-26px) scale(.55); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes welcomeFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.login-title {
  font-size: 34px; color: var(--green); letter-spacing: .5px;
  animation: titleIn .5s .25s cubic-bezier(.3,1.5,.5,1) backwards;
}
.login-sub {
  color: var(--gray); font-weight: 600; line-height: 1.8;
  margin: 6px 0 28px; max-width: 300px;
  animation: fadeUp .4s .45s ease backwards;
}
.login-form { width: 100%; max-width: 340px; }
.login-input {
  display: block; width: 100%;
  font-family: var(--font); font-size: 17px; font-weight: 600; color: var(--ink);
  background: #F7F7F7; border: 2px solid var(--line); border-radius: 13px;
  padding: 13px 16px 11px; margin-bottom: 14px; outline: none;
  transition: border-color .15s, background .15s;
  animation: fadeUp .4s .6s ease backwards;
}
.login-input::placeholder { color: var(--gray-icon); font-weight: 600; }
.login-input:focus { border-color: var(--blue-border); background: #fff; }
.login-input.err { border-color: var(--red); background: var(--red-bg); animation: shake .4s ease; }
.login-form .btn { animation: fadeUp .4s .7s ease backwards; }
.login-skip {
  background: none; border: 0; width: 100%;
  color: var(--blue); font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; padding: 14px 0 4px;
  animation: fadeUp .4s .8s ease backwards;
}
.login-skip:active { opacity: .6; }

/* profile avatar (settings) */
.avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: var(--green); box-shadow: 0 3px 0 var(--green-dk);
  color: #fff; font-size: 20px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  padding-top: 2px;
}

/* intro hero */
.hero { text-align:center; padding: 36px 24px 10px; }
.hero .owl { font-size: 92px; display:block; animation: heroBob 2.4s ease-in-out infinite; }
@keyframes heroBob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-7px);} }
.hero h1 { font-size: 30px; color: var(--green); }
.hero p { color: var(--gray); font-weight: 600; }
.empty-note { text-align:center; color:var(--gray); font-weight:600; padding: 40px 30px; line-height:2; }

/* ============================================================
   ANIMATIONS — Duolingo-style juice on everything
   ============================================================ */

/* --- core keyframes --- */
@keyframes springIn {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  80%  { transform: scale(.94); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bannerIn {
  from { opacity: 0; transform: translateY(-14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes nodeBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes shake {
  10%, 50%, 90% { transform: translateX(-7px); }
  30%, 70%      { transform: translateX(7px); }
}
@keyframes correctBounce {
  0%  { transform: scale(1); }
  35% { transform: scale(1.06, .9); }
  65% { transform: scale(.97, 1.05); }
  100%{ transform: scale(1); }
}
@keyframes selPop {
  0% { transform: scale(.96); } 60% { transform: scale(1.03); } 100% { transform: scale(1); }
}
@keyframes flameDance {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  30%      { transform: rotate(4deg) scale(1.08); }
  60%      { transform: rotate(-2deg) scale(1.02); }
}
@keyframes heartBeat {
  0%, 40%, 100% { transform: scale(1); }
  10% { transform: scale(1.22); }
  25% { transform: scale(1.06); }
}
@keyframes gemSpin {
  0%, 75%, 100% { transform: rotateY(0); filter: brightness(1); }
  85% { transform: rotateY(180deg); filter: brightness(1.35); }
}
@keyframes sweep {
  0%   { transform: translateX(-130%); }
  55%, 100% { transform: translateX(130%); }
}
@keyframes coinShine {
  0%, 60%  { background-position: -150% 0; }
  90%, 100%{ background-position: 150% 0; }
}
@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.05); opacity: .85; }
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes glowPulse {
  0%, 100% { transform: scale(1); opacity: .55; }
  50%      { transform: scale(1.18); opacity: .9; }
}
@keyframes twinkle {
  0%, 100% { transform: scale(.4) rotate(0deg); opacity: 0; }
  50%      { transform: scale(1.15) rotate(40deg); opacity: 1; }
}
@keyframes starRise {
  0%   { transform: scale(0) rotate(-40deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes titleIn {
  0%   { transform: scale(.4); opacity: 0; }
  55%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes growBar { from { width: 0; } }
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); }
}

/* --- screens --- */
.screen { animation: fadeUp .32s cubic-bezier(.25,1.1,.4,1) both; }

/* --- top stat bar --- */
.stat img { animation: springIn .45s cubic-bezier(.3,1.6,.5,1) backwards; }
.stat-xp img { animation: springIn .45s .08s cubic-bezier(.3,1.6,.5,1) backwards, gemSpin 4.5s 1.5s ease-in-out infinite; }
.stat-streak img { animation: springIn .45s cubic-bezier(.3,1.6,.5,1) backwards, flameDance 2.4s 1s ease-in-out infinite; transform-origin: 50% 85%; }
.stat-hearts img { animation: springIn .45s .16s cubic-bezier(.3,1.6,.5,1) backwards, heartBeat 1.8s 1.2s ease-in-out infinite; }

/* --- unit banners + path --- */
.unit-banner { animation: bannerIn .45s cubic-bezier(.3,1.4,.5,1) backwards; }
.unit-banner .u-side img { animation: wiggle 3.5s 2s ease-in-out infinite; }
.node { animation: springIn .5s cubic-bezier(.3,1.6,.5,1) backwards; animation-delay: var(--d, 0s); }
.path-row .bob { animation: nodeBob 1.8s .8s ease-in-out infinite; }
.node-ring { animation: ringPulse 1.8s ease-in-out infinite; }
.node-done::after { /* gold coin shine sweep */
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.55) 50%, transparent 68%) no-repeat;
  background-size: 220% 100%;
  animation: coinShine 3.2s ease-in-out infinite;
}
.node:not(:disabled):hover { filter: brightness(1.05); }

/* --- bottom nav --- */
.navbtn img { transition: transform .12s; }
.navbtn:active img { transform: scale(.8); }
.navbtn.active img { animation: springIn .4s cubic-bezier(.3,1.8,.5,1); }

/* --- session / questions --- */
.q-kicker { animation: fadeUp .35s .05s ease backwards; }
.q-stem, .q-figure, .cmp-wrap { animation: fadeUp .4s .12s ease backwards; }
.choice { animation: fadeUp .38s ease backwards; animation-delay: var(--d, 0s); }
.choice.sel { animation: selPop .22s ease; }
.choice.correct { animation: correctBounce .55s cubic-bezier(.3,1.5,.5,1); }
.choice.wrong { animation: shake .45s ease; }
.x-btn { transition: transform .15s; }
.x-btn:active { transform: rotate(90deg) scale(.85); }
.progress > i { overflow: hidden; }
.progress > i::before { /* moving shine sweep on the fill */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: sweep 2.2s ease-in-out infinite;
}
.sess-hearts img { animation: heartBeat 1.8s ease-in-out infinite; }

/* --- buttons --- */
.btn:not(:disabled):hover { filter: brightness(1.05); }
.action-bar .btn { animation: fadeUp .35s .15s ease backwards; }
.feedback .btn { animation: fadeUp .3s .15s ease backwards; }

/* --- feedback sheet --- */
.feedback.show .fb-head img,
.feedback.show .fb-x { animation: springIn .5s .08s cubic-bezier(.3,1.8,.5,1) backwards; }
.feedback.show .fb-head { animation: fadeUp .3s ease backwards; }

/* --- win / complete screen --- */
.win-hero {
  position: relative; width: var(--wh, 150px); height: var(--wh, 150px);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.win-hero .wh-glow {
  position: absolute; inset: -12%;
  background: radial-gradient(circle, rgba(255,200,0,.4) 0%, rgba(255,200,0,0) 65%);
  border-radius: 50%;
  animation: glowPulse 2.2s ease-in-out infinite;
}
.win-hero .wh-ring {
  position: absolute; inset: -4%;
  border: 3px dashed var(--gold); border-radius: 50%; opacity: .55;
  animation: spinSlow 9s linear infinite;
}
.win-hero .wh-star {
  width: 72%; height: 72%; position: relative;
  filter: drop-shadow(0 6px 0 rgba(230,160,0,.45));
  animation: starRise .7s cubic-bezier(.3,1.5,.5,1) backwards;
}
.win-hero .wh-spark {
  position: absolute; color: var(--gold); font-size: 22px; line-height: 1;
  animation: twinkle 1.7s ease-in-out infinite;
}
.win-hero .s1 { top: 4%;  right: 2%;  animation-delay: .2s; }
.win-hero .s2 { bottom: 10%; left: 0;  animation-delay: .7s; color: var(--red-soft); }
.win-hero .s3 { top: 18%; left: 6%;  animation-delay: 1.1s; font-size: 16px; }
.win-hero .s4 { bottom: 0; right: 12%; animation-delay: 1.5s; font-size: 16px; color: var(--blue); }

/* === lesson-complete scene: the streak flame slams in clean on white,
   then keeps burning — no particles, no rays, just motion === */
/* the flame lands clean now — no screen shake (removed for a smoother feel) */
.flame-hero { display: flex; align-items: center; justify-content: center; }

/* --- the fire itself (exact streak-flame paths from the design icons) --- */
/* wrapper does the cinematic moves (land, then a periodic happy hop) */
.fh-wrap {
  width: 66%; height: 84%; position: relative; z-index: 2;
  transform-origin: 50% 96%;
  will-change: transform; backface-visibility: hidden;
  animation:
    heartLand .65s .15s cubic-bezier(.3,1.5,.5,1) backwards,
    flameHop 3.4s 1.6s ease-in-out infinite;
}
@keyframes flameHop { /* Duolingo-style squash → jump → land bounce */
  0%, 52%, 100% { transform: translateY(0) scale(1); }
  57%  { transform: translateY(3px) scale(1.12, .82); }
  66%  { transform: translateY(-16px) scale(.92, 1.14); }
  74%  { transform: translateY(2px) scale(1.1, .86); }
  82%  { transform: translateY(-4px) scale(.97, 1.05); }
  90%  { transform: translateY(0) scale(1.02, .98); }
}
/* the flame itself flickers continuously on top of the wrapper's moves */
.fh-flame {
  width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 6px 0 rgba(230,120,0,.30));
  transform-origin: 50% 92%;
  will-change: transform; backface-visibility: hidden;
  animation: flameFlick 1.1s .9s ease-in-out infinite;
}
@keyframes flameFlick { /* breathes, leans & licks like real fire */
  0%, 100% { transform: scale(1, 1) rotate(-2deg) skewX(0); }
  20%      { transform: scale(.98, 1.06) rotate(1.4deg) skewX(2deg); }
  40%      { transform: scale(1.03, .96) rotate(-1.2deg) skewX(-1.5deg); }
  60%      { transform: scale(.985, 1.07) rotate(2.2deg) skewX(1deg); }
  80%      { transform: scale(1.015, .98) rotate(-1.6deg) skewX(-2deg); }
}
.fh-inner { /* the yellow inner flame dances on its own beat */
  transform-box: fill-box; transform-origin: 50% 82%;
  will-change: transform;
  animation: innerFlick .85s 1s ease-in-out infinite;
}
@keyframes innerFlick {
  0%, 100% { transform: scale(1); }
  25%      { transform: scale(1.16, .88) rotate(2.5deg); }
  55%      { transform: scale(.9, 1.14) rotate(-2.5deg); }
  80%      { transform: scale(1.08, .94) rotate(1deg); }
}
/* fire sparkles around the flame (no background circle, just stars) */
.flame-hero .wh-spark { color: var(--gold); animation-delay: 1.1s; }
.flame-hero .wh-spark.s2 { color: var(--orange); animation-delay: 1.5s; }
.flame-hero .wh-spark.s3 { animation-delay: 1.9s; }
.flame-hero .wh-spark.s4 { color: var(--gold-shine); animation-delay: 2.3s; }
/* small flame tongues leaping up around the base of the fire */
.fh-lick {
  position: absolute; bottom: 12%; width: 26%; height: 32%;
  opacity: 0; pointer-events: none; z-index: 1;
  transform-origin: 50% 100%;
  animation: lickRise 1.6s ease-out infinite;
}
.fh-lick.fl1 { right: 12%; animation-delay: 1.2s; }
.fh-lick.fl2 { right: 58%; animation-delay: 1.7s; animation-duration: 1.4s; width: 20%; }
.fh-lick.fl3 { right: 30%; animation-delay: 2.1s; animation-duration: 1.8s; width: 17%; }
.fh-lick.fl4 { right: 66%; animation-delay: 2.5s; width: 14%; }
@keyframes lickRise {
  0%   { opacity: 0; transform: translateY(8px) scale(.3) rotate(-6deg); }
  25%  { opacity: .95; }
  60%  { opacity: .55; transform: translateY(calc(var(--wh, 150px) * -.34)) scale(.75) rotate(5deg); }
  100% { opacity: 0; transform: translateY(calc(var(--wh, 150px) * -.55)) scale(.25) rotate(-8deg); }
}
/* embers floating up off the flame, forever */
.fh-ember {
  position: absolute; bottom: 20%; border-radius: 50%;
  opacity: 0; pointer-events: none; z-index: 3;
  animation: emberRise 2s ease-out infinite;
}
@keyframes emberRise {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), calc(var(--wh, 150px) * -.9)) scale(.15); }
}
/* sub-line under the win title */
.win-sub {
  color: var(--gray); font-weight: 600; line-height: 1.8;
  margin: -12px 0 14px; z-index: 2;
  animation: fadeUp .45s 1.35s ease backwards;
}
/* blue total-time card on the win screen */
.rc-time .qt-svg { width: 22px; height: 22px; }
.rc-time .rc-v { font-variant-numeric: tabular-nums; }

.win-title {
  background: linear-gradient(100deg, var(--gold) 42%, #FFF3B0 50%, var(--gold) 58%);
  background-size: 220% 100%; background-position: 150% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    titleIn .55s .85s cubic-bezier(.3,1.5,.5,1) backwards,
    titleThrob 2.4s 2s ease-in-out infinite,
    titleShine 2.8s 1.6s linear infinite;
}
@keyframes titleShine { to { background-position: -70% 0; } }
.stars span {
  display: inline-block;
  animation:
    starRise .6s cubic-bezier(.3,1.7,.5,1) backwards,
    starPulse 2.4s ease-in-out infinite;
}
.stars span:nth-child(1) { animation-delay: 1.05s, 2.4s; }
.stars span:nth-child(2) { animation-delay: 1.21s, 2.7s; }
.stars span:nth-child(3) { animation-delay: 1.37s, 3s; }
.stars .off { animation: starRise .6s cubic-bezier(.3,1.7,.5,1) backwards; } /* unearned stars don't dance */
@keyframes starPulse {
  0%, 100% { transform: scale(1) rotate(0); }
  50%      { transform: scale(1.18) rotate(7deg); }
}
.result-cards .rcard {
  position: relative; overflow: hidden;
  animation:
    springIn .5s cubic-bezier(.3,1.6,.5,1) backwards,
    cardFloat 3.4s ease-in-out infinite;
}
.result-cards .rcard:nth-child(1) { animation-delay: 1.55s, 2.4s; }
.result-cards .rcard:nth-child(2) { animation-delay: 1.7s, 2.9s; }
.result-cards .rcard:nth-child(3) { animation-delay: 1.85s, 3.4s; }
.result-cards .rcard::after { /* glossy sweep */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: sweep 3.6s 3.2s ease-in-out infinite;
}
.win-action .btn {
  position: relative; overflow: hidden;
  animation:
    fadeUp .4s 2.2s ease backwards,
    btnHeartbeat 2s 3.2s ease-in-out infinite;
}
.win-action .btn::after { /* CTA shine sweep */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: sweep 3s 3.9s ease-in-out infinite;
}

/* --- report / stats bars + tiles --- */
.rb-fill { animation: growBar .9s .2s cubic-bezier(.2,.8,.2,1) backwards; }
.tiles .tile { animation: fadeUp .4s cubic-bezier(.3,1.3,.5,1) backwards; }
.tiles .tile:nth-child(1) { animation-delay: .05s; }
.tiles .tile:nth-child(2) { animation-delay: .12s; }
.tiles .tile:nth-child(3) { animation-delay: .19s; }
.tiles .tile:nth-child(4) { animation-delay: .26s; }
.card { animation: fadeUp .4s .1s ease backwards; }
.review-item { animation: fadeUp .4s ease backwards; }

/* --- popup + modal --- */
.lesson-pop { animation: springIn .35s cubic-bezier(.3,1.5,.5,1); transform-origin: top center; }
.modal { animation: springIn .4s cubic-bezier(.3,1.4,.5,1); }
.modal .m-owl { display: inline-block; animation: starRise .6s .15s cubic-bezier(.3,1.6,.5,1) backwards; }

/* --- boot hero --- */
.hero .win-hero { margin: 0 auto 10px; }
.hero h1 { animation: titleIn .5s .3s cubic-bezier(.3,1.5,.5,1) backwards; }
.hero p { animation: fadeUp .4s .55s ease backwards; }