/* =====================================================
   C&C ENGLISH · piel de marca
   Tokens portados del design system de cyc-platform
   (CYC-OS Design Tokens): brand violet #B255F8, escala de
   elevación, bordes por capas, escala de radios y el CTA
   premium (gradiente lila en píldora) del UI Kit.
   Adaptación: el canvas claro es algo más gris que en
   platform para que las tarjetas se separen del fondo.
   Layout por pantallas: cabe en el viewport, sin scroll.
   ===================================================== */

:root {
  /* ── Brand violet ── */
  --brand:       #B255F8;
  --brand-hover: #A347E8;
  --brand-ring:  rgba(178, 85, 248, 0.28);
  --brand-bg:    #F5EDFE;
  --brand-text:  #7C3AED;

  /* ── Superficies (escala de elevación) ── */
  --bg:     #F1F1F4;
  --elev-1: #FFFFFF;
  --elev-2: #FFFFFF;
  --elev-3: #FAFAFB;
  --elev-4: #FFFFFF;

  /* ── Texto ── */
  --fg:        #0F0F12;
  --muted-fg:  #52525B;
  --muted-fg-2:#6E6E78;

  /* ── Bordes ── */
  --border:        rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.16);

  /* ── Estado ── */
  --success:      #16A34A;
  --success-bg:   rgba(22, 163, 74, 0.10);
  --danger:       #DC2626;
  --danger-bg:    rgba(220, 38, 38, 0.10);

  /* ── Sombras ── */
  --shadow-card:       0 1px 2px rgba(15, 15, 18, 0.04);
  --shadow-card-hover: 0 4px 12px rgba(178, 85, 248, 0.08), 0 8px 24px rgba(15, 15, 18, 0.06);
  --shadow-cta:        0 1px 2px rgba(157, 64, 228, 0.30);
  --edge-top:          inset 0 1px 0 0 rgba(255, 255, 255, 1);

  /* ── Botón primario (CTA del UI Kit) ── */
  --cta-from:        #B968F9;
  --cta-to:          #9D40E4;
  --cta-from-hover:  #C57DFB;
  --cta-to-hover:    #A94FEA;
  --cta-from-active: #9D40E4;
  --cta-to-active:   #8A2FD2;

  /* ── Botón secundario ── */
  --sec-from:   #FFFFFF;
  --sec-to:     rgba(250, 250, 250, 0.75);
  --sec-border: rgba(229, 229, 229, 0.80);
  --sec-hover:  rgba(245, 245, 245, 0.60);

  /* ── Radios ── */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;

  --topbar-h: 60px;
  --font: 'Inter', 'Raleway', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body.theme-dark {
  --brand:       #B255F8;
  --brand-hover: #BB6CF8;
  --brand-ring:  rgba(178, 85, 248, 0.32);
  --brand-bg:    hsl(282 90% 14%);
  --brand-text:  hsl(282 95% 78%);

  --bg:     #1A1A1C;
  --elev-1: #212123;
  --elev-2: #28282B;
  --elev-3: #303033;
  --elev-4: #38383C;

  --fg:         #F4F4F5;
  --muted-fg:   #ABABB1;
  --muted-fg-2: #8B8B92;

  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  --success:    hsl(142 50% 55%);
  --success-bg: hsla(142, 50%, 55%, 0.14);
  --danger:     hsl(358 70% 60%);
  --danger-bg:  hsla(358, 70%, 60%, 0.14);

  --shadow-card:       inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
  --shadow-card-hover: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.20);
  --shadow-cta:        0 1px 3px rgba(157, 64, 228, 0.40);
  --edge-top:          inset 0 1px 0 0 rgba(255, 255, 255, 0.06);

  --sec-from:   rgba(255, 255, 255, 0.05);
  --sec-to:     rgba(255, 255, 255, 0.025);
  --sec-border: rgba(255, 255, 255, 0.08);
  --sec-hover:  rgba(255, 255, 255, 0.07);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ico {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.ico.sm { width: 16px; height: 16px; }
.ico.lg { width: 24px; height: 24px; }

/* Chip de icono: cuadrado con el fondo de marca, como en las tarjetas de platform */
.icon-chip {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--radius-lg);
  background: var(--brand-bg); color: var(--brand-text);
  flex-shrink: 0;
}
.icon-chip.muted { background: var(--elev-3); color: var(--muted-fg); border: 1px solid var(--border); }

/* ---------- Barra superior ---------- */
.topbar {
  flex: 0 0 var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  background: var(--elev-1);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--edge-top);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 26px; height: 26px; display: block; }
.brand-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.topbar-actions { display: flex; gap: 4px; }
.icon-btn {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--radius-md);
  border: 1px solid transparent; background: transparent;
  color: var(--muted-fg); cursor: pointer; transition: background .18s, color .18s;
}
.icon-btn:hover { background: var(--elev-3); color: var(--fg); }
body.theme-dark .icon-btn:hover { background: rgba(255, 255, 255, 0.07); }

/* ---------- Estructura por pantallas ---------- */
/* min-width y min-height a 0: por defecto un hijo flex no puede encogerse
   por debajo de su contenido, y basta un elemento ancho (una frase larga,
   una tabla) para estirar la página entera. */
main { flex: 1; min-height: 0; min-width: 0; display: flex; }

.screen { display: none; flex: 1; min-height: 0; min-width: 0; }
.screen.active {
  display: flex; flex-direction: column;
  overflow-y: auto;
  animation: fade .25s ease both;
}
@keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.wrap { width: 100%; max-width: 920px; margin: auto; padding: 26px 20px; }
.wrap.narrow { max-width: 640px; }

.display { font-size: 27px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.lead { color: var(--muted-fg); font-size: 15px; max-width: 56ch; margin-top: 4px; }
.muted { color: var(--muted-fg); font-size: 14px; }
.center { text-align: center; }

#profile .wrap, #results .wrap { text-align: center; }
#profile .lead, #results .lead { margin-left: auto; margin-right: auto; }

@media (min-height: 800px) {
  .display { font-size: 33px; }
  .wrap { padding: 40px 24px; }
}

/* ---------- Perfiles ---------- */
.profile-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 26px; }
@media (min-width: 640px) { .profile-list { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } }
.profile-btn {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 12px; border-radius: var(--radius-xl);
  border: 1px solid var(--border); background: var(--elev-1);
  box-shadow: var(--shadow-card);
  color: inherit; font-family: inherit; font-size: 16px; cursor: pointer;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.profile-btn:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: var(--shadow-card-hover); }
.avatar {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand-bg); color: var(--brand-text);
  font-weight: 700; font-size: 18px;
}
.pname { font-weight: 500; }

/* ---------- Estadísticas ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0 26px; }
.stats.four { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .stats.four { grid-template-columns: repeat(4, 1fr); } }
.stat {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border-radius: var(--radius-xl);
  background: var(--elev-1); border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  text-align: left;
}
.stat .stat-text { display: flex; flex-direction: column; min-width: 0; }
.stat .value { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.stat .label { font-size: 11px; color: var(--muted-fg-2); letter-spacing: 0.03em; }

/* ---------- Tramos y unidades ---------- */
.tracks { display: flex; flex-direction: column; gap: 22px; }
.track-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.track-head h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.track-head p { color: var(--muted-fg-2); font-size: 13px; }

.unit-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.unit-card {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 13px; text-align: left;
  padding: 16px 18px; border-radius: var(--radius-2xl);
  border: 1px solid var(--border); background: var(--elev-1);
  box-shadow: var(--shadow-card);
  color: inherit; font-family: inherit; cursor: pointer;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.unit-card > .icon-chip { grid-row: 1 / span 2; align-self: start; }
.unit-card > *:not(.icon-chip) { grid-column: 2; }
.unit-card:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: var(--shadow-card-hover); }
.unit-card.done { border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.unit-card.empty {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: default; padding: 12px; border-style: dashed; background: transparent; box-shadow: none;
}
.unit-card.empty:hover { transform: none; border-color: var(--border); box-shadow: none; }
.soon { color: var(--muted-fg-2); font-size: 13px; }
.unit-num { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--brand-text); font-weight: 700; }
.unit-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.unit-goal { font-size: 13px; color: var(--muted-fg); line-height: 1.4; }
.unit-meta { font-size: 11px; color: var(--muted-fg-2); }

.bar { display: block; height: 5px; border-radius: 999px; background: var(--elev-3); border: 1px solid var(--border); overflow: hidden; margin: 8px 0 3px; }
body.theme-dark .bar { background: rgba(255, 255, 255, 0.06); }
.bar .fill { display: block; height: 100%; background: linear-gradient(90deg, var(--cta-from), var(--cta-to)); border-radius: 999px; transition: width .4s ease; }

/* ---------- Selector de temas ---------- */
#topics .link-btn { margin-bottom: 10px; display: inline-flex; align-items: center; gap: 5px; }
.unit-num.block { display: block; margin-bottom: 2px; }
.section-label {
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted-fg-2); font-weight: 700;
  margin: 22px 0 10px;
}
#reviewCard { margin-bottom: 24px; }
.unit-card.featured {
  width: 100%; margin-top: 18px;
  border-color: var(--brand);
  background: linear-gradient(180deg, var(--brand-bg), transparent 70%), var(--elev-1);
}
.unit-card.featured .icon-chip { background: linear-gradient(180deg, var(--cta-from), var(--cta-to)); color: #fff; box-shadow: var(--shadow-cta); }
.unit-card.featured .unit-title { font-size: 18px; }

/* ---------- Sesión ---------- */
#session.active { overflow: hidden; }

.session-head {
  flex: 0 0 auto;
  background: var(--elev-1);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--edge-top);
}
.session-head .wrap { padding: 12px 20px 14px; margin: 0 auto; }
.session-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.session-unit { flex: 1; text-align: center; font-size: 13px; color: var(--muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-count { font-size: 13px; color: var(--muted-fg-2); font-variant-numeric: tabular-nums; }
.phase { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.phase .icon-chip { width: 30px; height: 30px; border-radius: var(--radius-md); }
.phase .icon-chip .ico { width: 17px; height: 17px; }
.phase-text { display: flex; flex-direction: column; min-width: 0; }
.phase-name { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand-text); font-weight: 700; }
.phase-hint { font-size: 13px; color: var(--muted-fg-2); }

.session-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.session-body .wrap { padding: 20px; }

.play-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 26px 20px; border-radius: var(--radius-2xl);
  border: 1px solid var(--border); background: var(--elev-1);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.prompt-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted-fg-2); font-weight: 600;
}
.prompt-big { font-size: 25px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; max-width: 20ch; }
.prompt-big.en { font-size: 22px; }
.prompt-sentence { font-size: 21px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; }
.prompt-sentence .gap {
  display: inline-block; width: 64px; height: 3px; margin: 0 4px 5px;
  border-radius: 2px; background: linear-gradient(90deg, var(--cta-from), var(--cta-to));
}
.prompt-es { font-size: 14px; color: var(--muted-fg); }

/* ---------- Controles ---------- */
.options { display: grid; gap: 9px; width: 100%; margin-top: 4px; }
@media (min-width: 560px) { .options { grid-template-columns: repeat(2, 1fr); } }
.options.compact { grid-template-columns: repeat(2, 1fr); }

.option {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 15px; border-radius: var(--radius-lg);
  border: 1px solid var(--sec-border);
  background: linear-gradient(180deg, var(--sec-from), var(--sec-to));
  box-shadow: var(--shadow-card);
  color: inherit; font-family: inherit; font-size: 15px; text-align: left; cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.option .key {
  display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0;
  border-radius: var(--radius-xs); background: var(--elev-3); border: 1px solid var(--border);
  font-size: 11px; font-weight: 600; color: var(--muted-fg-2);
}
body.theme-dark .option .key { background: rgba(255, 255, 255, 0.06); }
.option:hover:not(:disabled) { border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow-card-hover); }
.option:active:not(:disabled) { transform: translateY(1px); }
.option:disabled { cursor: default; opacity: .5; }
.option.correct { border-color: var(--success); background: var(--success-bg); color: var(--success); opacity: 1; font-weight: 600; }
.option.wrong { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); opacity: 1; }
.option.correct .key, .option.wrong .key { opacity: 0; }

.audio-btn, .mic-btn, .primary-btn, .ghost-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px;
  font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  transition: border-color .18s, background .18s, color .18s, box-shadow .18s, transform .1s;
}

/* Secundario del UI Kit: gradiente sutil, borde neutro, sombra fina */
.audio-btn, .ghost-btn {
  padding: 10px 20px; min-height: 40px;
  border: 1px solid var(--sec-border);
  background: linear-gradient(180deg, var(--sec-from), var(--sec-to));
  box-shadow: var(--shadow-card);
  color: var(--fg);
}
.audio-btn:hover, .ghost-btn:hover { background: var(--sec-hover); border-color: var(--border-strong); }
.audio-btn:active, .ghost-btn:active { transform: translateY(1px); }

/* CTA premium: gradiente lila en píldora con sombra morada */
.primary-btn {
  padding: 11px 24px; min-height: 42px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--cta-from), var(--cta-to));
  box-shadow: var(--shadow-cta);
  color: #fff; font-weight: 600;
}
.primary-btn:hover { background: linear-gradient(180deg, var(--cta-from-hover), var(--cta-to-hover)); }
.primary-btn:active { background: linear-gradient(180deg, var(--cta-from-active), var(--cta-to-active)); transform: translateY(1px); }
.primary-btn:focus-visible { outline: none; box-shadow: var(--shadow-cta), 0 0 0 3px var(--brand-ring); }
.primary-btn.wide { display: flex; width: 100%; margin-top: 14px; }

.mic-btn {
  padding: 14px 30px; min-height: 52px; font-size: 16px; font-weight: 600;
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--cta-from), var(--cta-to));
  box-shadow: var(--shadow-cta);
  color: #fff;
}
.mic-btn:hover { background: linear-gradient(180deg, var(--cta-from-hover), var(--cta-to-hover)); }
.mic-btn:active { transform: translateY(1px); }
.mic-btn.listening { animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: var(--shadow-cta), 0 0 0 0 var(--brand-ring); }
  50% { box-shadow: var(--shadow-cta), 0 0 0 12px transparent; }
}

.link-btn {
  background: none; border: none; color: var(--muted-fg); cursor: pointer;
  font-family: inherit; font-size: 14px; padding: 4px;
}
.link-btn:hover { color: var(--fg); }

.text-input {
  width: 100%; max-width: 380px; padding: 12px 16px;
  border-radius: var(--radius-lg); border: 1px solid var(--border-strong);
  background: var(--elev-1); color: inherit;
  font-family: inherit; font-size: 17px; text-align: center;
}
.text-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }

.self-check { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; }
.self-check .ghost-btn { min-width: 190px; }

/* ---------- Feedback ---------- */
.feedback { min-height: 8px; margin-top: 14px; text-align: center; font-size: 15px; }
.feedback .verdict { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.feedback.good .verdict { color: var(--success); }
.feedback.bad .verdict { color: var(--danger); }
.feedback b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-top: 3px; }
.feedback .es { display: block; font-size: 14px; color: var(--muted-fg); font-weight: 400; }
.feedback .heard { display: block; font-size: 13px; color: var(--muted-fg-2); margin-top: 3px; }
.feedback .detail {
  margin-top: 12px; padding: 13px 15px; border-radius: var(--radius-lg);
  background: var(--elev-1); border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  color: var(--fg); text-align: left;
}
.feedback .detail b { font-size: 16px; margin-top: 0; }
.feedback .note { display: block; font-size: 13px; color: var(--muted-fg); margin-top: 6px; line-height: 1.45; }

/* ---------- Resultados y ajustes ---------- */
.actions { display: flex; flex-direction: column; gap: 9px; margin-top: 22px; }
@media (min-width: 560px) { .actions { flex-direction: row; justify-content: center; } }

.setting-block { padding: 16px 0; border-bottom: 1px solid var(--border); }
.setting-block h2 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.setting-block .ghost-btn { margin-top: 10px; }
.ghost-btn.danger { border-color: var(--danger); color: var(--danger); }

.voice-list { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; max-height: 168px; overflow-y: auto; }
.voice-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--elev-1);
  color: inherit; font-family: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.voice-item:hover { border-color: var(--brand); }
.voice-item.sel { border-color: var(--brand); background: var(--brand-bg); color: var(--brand-text); font-weight: 600; }
.vlang { font-size: 12px; color: var(--muted-fg-2); }

/* ---------- Modo sin micro ---------- */
.quiet-btn {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: transparent;
  color: var(--muted-fg-2); cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.quiet-btn:hover { color: var(--fg); border-color: var(--border-strong); }
.quiet-btn.on { background: var(--brand-bg); border-color: var(--brand); color: var(--brand-text); }
#quietSetting.on { color: var(--brand-text); }

/* ---------- Reconstruir la frase ---------- */
.scramble-answer {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center;
  width: 100%; min-height: 58px; padding: 12px;
  border-radius: var(--radius-lg); border: 1px dashed var(--border-strong);
  background: var(--elev-3);
}
body.theme-dark .scramble-answer { background: rgba(255, 255, 255, 0.03); }
.scramble-bank { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.scramble-empty { color: var(--muted-fg-2); font-size: 14px; }

.chip {
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--sec-border);
  background: linear-gradient(180deg, var(--sec-from), var(--sec-to));
  box-shadow: var(--shadow-card);
  color: inherit; font-family: inherit; font-size: 15px; cursor: pointer;
  transition: border-color .18s, background .18s, transform .12s;
  animation: itemIn .28s cubic-bezier(.22, .61, .36, 1) backwards;
  animation-delay: calc(var(--i, 0) * .035s);
}
.chip:hover { border-color: var(--brand); }
.chip:active { transform: translateY(1px); }
.chip.placed { border-color: var(--brand); background: var(--brand-bg); color: var(--brand-text); font-weight: 500; }
.chip.ok { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.chip.ko { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }

/* ---------- Movimiento ----------
   Entradas cortas (0.28 a 0.35s) y escalonadas. Se usa animation-fill-mode
   backwards, no both, para que al terminar no quede un transform fijado
   que anule el hover de las tarjetas. */
@keyframes stepIn   { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes itemIn   { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes popIn    { 0% { transform: none; } 40% { transform: scale(1.035); } 100% { transform: none; } }
@keyframes nudge    { 10%, 90% { transform: translateX(-2px); } 30%, 70% { transform: translateX(3px); } 50% { transform: translateX(-3px); } }
@keyframes ring     { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(1.28); } }
@keyframes chipIn   { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

.play-card.step-in { animation: stepIn .32s cubic-bezier(.22, .61, .36, 1) backwards; }

.option, .unit-card, .profile-btn, .stat {
  animation: itemIn .32s cubic-bezier(.22, .61, .36, 1) backwards;
  animation-delay: calc(var(--i, 0) * .045s);
}
.option.correct { animation: popIn .45s cubic-bezier(.34, 1.56, .64, 1); }
.option.wrong   { animation: nudge .38s ease; }

.feedback.good, .feedback.bad { animation: itemIn .3s cubic-bezier(.22, .61, .36, 1) backwards; }
.feedback .verdict .ico { animation: chipIn .35s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: .06s; }
.feedback .detail { animation: itemIn .34s cubic-bezier(.22, .61, .36, 1) backwards; animation-delay: .1s; }

.primary-btn.pop { animation: itemIn .3s cubic-bezier(.22, .61, .36, 1) backwards; }

.mic-btn { position: relative; }
.mic-btn.listening::after {
  content: ''; position: absolute; inset: -1px;
  border-radius: 999px; border: 2px solid var(--brand);
  animation: ring 1.4s ease-out infinite;
}

.stat .value.counting { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}