/* ============================================================
   BBC English · "This is London calling" — Voice Challenge (v3)
   Prototype Sensa × BBC.

   v3 adopts the BBC English Mobile COURSE design language seen in
   the real case-study UI: a clean WHITE course card floating on the
   navy background, with BIG ROUND COLORED CIRCLE BUTTONS (the same
   vocabulary as the Listen / Grammar / Read category circles).

   The hero control is a large red "record" circle with a mic icon —
   styled exactly like those course category circles. Retry is the
   same round-button vocabulary at a smaller size. All text chrome
   (headline / kicker / instructions / footer) is removed: only the
   functional phrase and the round controls remain.

   IDENTITY:
   · BBC navy #04013F background, white course card.
   · Course circle palette (from the real UI): yellow, blue, green,
     red — the record circle is the red one.
   · Gelion typeface (the site's UI font) via @font-face.
   · Gold #FFD180 is RESERVED ONLY for the reward STARS.
   · Inline SVG line icons only (mic, rotate, check/cross). No emoji.
   ============================================================ */

/* ---- Gelion (site font). Weights present in /assets/font ---- */
@font-face {
  font-family: 'Gelion';
  src: url('../../assets/font/gelion-thin.woff') format('woff');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gelion';
  src: url('../../assets/font/gelion-light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gelion';
  src: url('../../assets/font/gelion-regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gelion';
  src: url('../../assets/font/gelion-medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gelion';
  src: url('../../assets/font/gelion-semibold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gelion';
  src: url('../../assets/font/gelion-bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* BBC palette */
  --navy:        #04013F;
  --navy-deep:   #02011F;
  --ink:         #04013F;   /* text on the white card */
  --ink-72:      rgba(4, 1, 63, 0.72);
  --ink-50:      rgba(4, 1, 63, 0.50);
  --ink-32:      rgba(4, 1, 63, 0.32);
  --card:        #FFFFFF;   /* course card */

  /* Hairline (the site's only separator) — on the white card */
  --line:        rgba(4, 1, 63, 0.14);
  --line-soft:   rgba(4, 1, 63, 0.08);

  /* Course circle palette (from the real BBC English Mobile UI) */
  --c-yellow:    #FFC400;
  --c-blue:      #1C2D8C;
  --c-green:     #00B894;
  --c-red:       #E63946;   /* the record circle */
  --c-red-deep:  #C42E3B;

  /* Reward gold — ONLY for the stars */
  --gold:        #FFD180;
  --gold-soft:   rgba(255, 209, 128, 0.55);
  --gold-glow:   rgba(255, 209, 128, 0.85);

  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --font:        'Gelion', system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  background: var(--navy);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;            /* no page scroll — everything fits the viewport */
}

/* --- Background: looping BBC clips crossfading behind a navy scrim --- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--navy); }
.bg__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 1.5s ease;        /* ~1.5s crossfade like the home */
  filter: grayscale(100%) brightness(0.9) contrast(1.02);
  transform: scale(1.04);
}
.bg__video.active { opacity: 0.42; }
/* Flat navy scrim: lifts the card off the video without glassy gradients */
.bg__scrim { position: absolute; inset: 0; background: rgba(4, 1, 63, 0.78); }
/* Progressive-blur veil between the video and the card — same vocabulary as
   Inditex (scrim + backdrop-filter blur). Softens the footage so the white
   card reads cleanly without a hard cut. */
.bg__veil {
  position: absolute; inset: 0;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  background:
    radial-gradient(ellipse at 50% -8%, rgba(6, 3, 80, 0.30), transparent 58%),
    linear-gradient(180deg, rgba(4, 1, 63, 0.10), rgba(2, 1, 31, 0.34));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

/* --- Layout: the course card centered on navy. The app is exactly one
   viewport tall and never scrolls; the active screen adapts to fit. ----- */
.app {
  position: relative; z-index: 1;
  height: 100vh; height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 40px);
  overflow: hidden;
}

/* --- PORTADA / curso: segmented + lista de niveles ---------- */
.screen { animation: screenIn 0.4s var(--ease) both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cover { width: 100%; max-width: 420px; height: 100%; display: flex; min-height: 0; }

/* ============================================================
   BBC English Mobile — Home REAL de Mónica (repo BBC) como portada.
   Composición móvil completa: ilustración + anillo de progreso
   circular + niveles + timeline de lecciones + bottom-nav.
   Paleta GRANATE (la del BBC English Mobile real), arco/estrellas en oro.
   Todo scopeado bajo .bbchome para no colisionar con la tarjeta de voz.
   ============================================================ */
.bbchome {
  position: relative; width: 100%;
  /* Fit the viewport: the home card is at most the available height and never
     scrolls internally. Internal spacing flexes to keep everything on screen. */
  max-height: 100%; overflow: hidden;
  border-radius: clamp(22px, 4vw, 30px); color: #fff;
  display: flex; flex-direction: column;
  padding-bottom: 0;
  background: linear-gradient(180deg, #8B0035 0%, #5E0024 100%);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

/* Header */
.bbchome__header { position: relative; display: flex; align-items: center; justify-content: center;
  padding: clamp(10px, 2vh, 18px) 18px clamp(4px, 1vh, 8px); flex: 0 0 auto; }
.bbchome__brand { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bbchome__sub { font-size: 12px; font-weight: 400; color: #fff; letter-spacing: 0.01em; }
.bbchome__badge { position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.42); color: #fff; font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 20px; }

/* Ilustración detrás del hero */
.bbchome__art { position: absolute; top: 0; left: 0; width: 100%; height: auto; pointer-events: none; opacity: 0.9; z-index: 0; }

/* Hero: anillo de progreso + estrellas */
.bbchome__hero { position: relative; z-index: 1; display: flex; justify-content: center;
  padding: clamp(6px, 2vh, 18px) 0 clamp(8px, 2vh, 16px); flex: 0 0 auto; }
.bbchome__progress { position: relative;
  width: clamp(132px, 26vh, 200px); height: clamp(132px, 26vh, 200px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.bbchome__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bbchome__arc { filter: drop-shadow(0 0 6px rgba(245,194,66,0.45)); transition: stroke-dashoffset 1.2s var(--ease); }
.bbchome__pct { position: relative; z-index: 2; display: flex; align-items: baseline; gap: 3px; color: #fff; }
.bbchome__num { font-size: clamp(36px, 10vw, 42px); font-weight: 500; letter-spacing: -0.02em; }
.bbchome__sign { font-size: clamp(20px, 6vw, 24px); font-weight: 500; }
.bbchome__stars { position: relative; z-index: 2; display: flex; gap: 8px; }
.bbchome__stars svg { width: 22px; height: 22px; fill: rgba(255,255,255,0.22);
  transition: fill .3s var(--ease); transform-origin: center; }
.bbchome__stars svg.on { fill: var(--gold); filter: drop-shadow(0 0 8px rgba(245,194,66,0.5));
  animation: coverStarPop .5s var(--ease-pop) both; }
@keyframes coverStarPop {
  0%   { transform: scale(0.7) rotate(-10deg); }
  55%  { transform: scale(1.22) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .bbchome__stars svg.on { animation: none; } }

/* SEGMENTED — réplica EXACTA del prototipo (Inter, track oscuro, pastilla
   blanca con sombra en el activo, hairlines entre tabs). Scopeado en .bbchome. */
.bbchome .levels { position: relative; z-index: 1; width: auto; height: 34px;
  margin: clamp(4px, 1.5vh, 6px) auto clamp(10px, 2.5vh, 22px); flex: 0 0 auto;
  display: flex; justify-content: center; max-width: calc(100% - 36px); }
.bbchome .levels__track { display: flex; justify-content: space-between; align-items: center;
  background: rgba(0,0,0,0.40); border: none; border-radius: 999px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.bbchome .levels__track::-webkit-scrollbar { display: none; }
.bbchome .level { flex: 0 0 auto; position: relative; display: flex; height: 34px; padding: 0 20px;
  justify-content: center; align-items: center; gap: 8px; border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: normal;
  color: #FFF; white-space: nowrap; cursor: pointer; background: transparent; border: 0;
  transition: color .2s ease, background .25s ease, box-shadow .25s ease, transform .2s var(--ease-pop); }
.bbchome .level:active { transform: scale(0.95); transition-duration: .12s; }
.bbchome .level + .level::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 0.955px; height: 20.88px; flex-shrink: 0; opacity: 0.24; background: #FFF; }
.bbchome .level.is-active { color: #232827; font-weight: 600; background: #FFF; border-radius: 28px;
  box-shadow: 0 10px 20px 0 rgba(0,0,0,0.50); }
.bbchome .level.is-active::before, .bbchome .level.is-active + .level::before { opacity: 0; }

/* Timeline de lecciones — región flexible que se contrae para que TODO el
   home quepa en el viewport sin scroll interno. */
.bbchome__timeline { position: relative; z-index: 1; padding: 0 18px;
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.bbchome__list { display: flex; flex-direction: column; gap: clamp(2px, 1vh, 4px); list-style: none; }
.bbcles { width: 100%; }
.bbcles__row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
  text-align: left; font-family: inherit; color: #fff; background: transparent; border: 0; cursor: pointer;
  padding: clamp(3px, 0.8vh, 6px) 12px clamp(3px, 0.8vh, 6px) 4px; border-radius: 32px;
  transition: background .15s var(--ease), transform .26s var(--ease-pop); }
button.bbcles__row:hover { background: rgba(255,255,255,0.05); transform: translateY(-2px); }
button.bbcles__row:active { transform: scale(0.98); transition-duration: .12s; }
/* The chevron leans forward on hover to invite the tap. */
.bbcles__go { transition: transform .26s var(--ease-pop), color .2s var(--ease); }
button.bbcles__row:hover .bbcles__go { transform: translateX(3px); color: rgba(255,255,255,0.9); }
.bbcles__content { display: flex; align-items: center; gap: clamp(10px, 2vw, 16px); min-width: 0; }
.bbcnode { flex: 0 0 auto; width: clamp(40px, 7vh, 48px); height: clamp(40px, 7vh, 48px);
  border-radius: 50%; display: grid; place-items: center;
  border: 3px solid rgba(255,255,255,0.2); }
.bbcnode--on { border-color: #fff; }
.bbcnode__num { font-size: 16px; font-weight: 600; color: #F2F4F5; }
.bbcnode--test { border-color: rgba(255,255,255,0.4); }
.bbcnode__star { width: 22px; height: 22px; fill: #fff; }
.bbcles__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bbcles__title { font-size: 16px; font-weight: 600; }
.bbcles__sub { font-size: 13px; color: rgba(255,255,255,0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbcles__go { flex: 0 0 auto; width: 20px; height: 20px; color: rgba(255,255,255,0.65); }
.bbcles__go svg { width: 100%; height: 100%; display: block; }
.bbcles-divider { height: clamp(6px, 1.4vh, 12px); padding-left: 26px; }
.bbcles-divider::before { content: ""; display: block; width: 1px; height: 100%; border-left: 1px solid #fff; opacity: 0.24; }
.bbcles.is-locked { opacity: 0.55; }
.bbcles.is-locked .bbcnode { border-color: rgba(255,255,255,0.2); }
.bbcles--test .bbcles__row { background: rgba(0,0,0,0.28); }

/* TABBAR inferior — réplica EXACTA del prototipo (fondo negro, iconos+labels
   Inter 12px, estrella dorada activa, subrayado blanco, badge en Repaso). */
.bbchome .bottom-nav { position: relative; z-index: 1; margin-top: clamp(10px, 2vh, 18px);
  height: clamp(54px, 9vh, 64px); flex: 0 0 auto; background: #000;
  display: flex; justify-content: space-around; align-items: center;
  border-bottom-left-radius: clamp(22px, 4vw, 30px); border-bottom-right-radius: clamp(22px, 4vw, 30px); }
.bbchome .bottom-nav__item { display: flex; flex: 1; height: 64px; padding: 11px 0 6px; flex-direction: column;
  align-items: center; gap: 7px; position: relative; color: #fff; transition: opacity .2s ease; }
.bbchome .bottom-nav__icon { transition: transform .26s var(--ease-pop); }
.bbchome .bottom-nav__item:active .bbchome__icon,
.bbchome .bottom-nav__item:active .bottom-nav__icon { transform: scale(0.88); transition-duration: .12s; }
.bbchome .bottom-nav__item:hover .bottom-nav__icon { transform: translateY(-2px); }
/* Los enlaces del menú NO llevan subrayado (son <a>: por defecto subrayan). */
.bbchome a, .bbchome__nav a, .bottom-nav a, .bbchome .bottom-nav__item { text-decoration: none; color: inherit; }
/* Sin subrayado en el item activo (solo el icono dorado lo marca). */
.bbchome .bottom-nav__item span { color: #FFF; text-align: center; font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; font-weight: 400; line-height: 16px; opacity: 0.72; }
.bbchome .bottom-nav__item.is-active span { font-weight: 600; opacity: 1; }
.bbchome .bottom-nav__icon { width: 24px; height: 24px; flex-shrink: 0; }
.bbchome .bottom-nav__badge { position: absolute; right: 20px; top: 8px; background: #fff; color: #000;
  display: flex; align-items: center; justify-content: center; border-radius: 9px; padding: 0 4px;
  min-width: 24px; height: 16px; z-index: 10; font-family: 'Inter', system-ui, sans-serif; font-size: 12px;
  font-weight: 600; line-height: 16px; }

/* ── Coreografía de entrada del Home: aparición escalonada, sutil ── */
@keyframes bbcRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bbcFade { from { opacity: 0; } to { opacity: 1; } }
.bbchome__header { animation: bbcRise .6s var(--ease) .05s both; }
.bbchome__art    { animation: bbcFade 1.1s var(--ease) .15s both; }
.bbchome__hero   { animation: bbcRise .7s var(--ease-pop) .22s both; }
.bbchome__levels { animation: bbcRise .55s var(--ease) .38s both; }
.bbchome__list > li { animation: bbcRise .5s var(--ease) both; }
.bbchome__list > li:nth-child(1) { animation-delay: .48s; }
.bbchome__list > li:nth-child(2) { animation-delay: .54s; }
.bbchome__list > li:nth-child(3) { animation-delay: .60s; }
.bbchome__list > li:nth-child(4) { animation-delay: .66s; }
.bbchome__list > li:nth-child(5) { animation-delay: .72s; }
.bbchome__list > li:nth-child(6) { animation-delay: .78s; }
.bbchome__list > li:nth-child(7) { animation-delay: .84s; }
.bbchome .bottom-nav { animation: bbcRise .55s var(--ease) .8s both; }

@media (prefers-reduced-motion: reduce) {
  .bbchome__arc { transition: none; }
  .bbchome__header, .bbchome__art, .bbchome__hero, .bbchome__levels,
  .bbchome__list > li, .bbchome .bottom-nav { animation: none !important; }
}

/* --- The white course card (case-study look) ---------------- */
.card {
  position: relative;
  width: 100%; max-width: 520px;
  /* ALTURA FIJA pero acotada al viewport: grabar y resultado ocupan el MISMO
     alto (el botón de grabar no salta bajo el dedo) y la carta nunca excede la
     pantalla — sin scroll interno. */
  height: min(620px, 100%);
  background: var(--card); color: var(--ink);
  border-radius: clamp(22px, 4vw, 32px);
  padding: clamp(24px, 4vh, 44px) clamp(20px, 5vw, 44px) clamp(20px, 4vh, 40px);
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
}
/* El recorder queda anclado abajo (posición fija de los botones). */
.recorder { margin-top: auto; }

/* Frase objetivo en KARAOKE — cada palabra apagada hasta que el
   reconocimiento la detecta; entonces se ilumina con un magic-move. */
.phrase {
  text-align: center; font-weight: 500;
  /* Más GRANDE y CENTRADO en el espacio disponible: la frase ocupa el área
     entre la cabecera y el recorder y se centra vertical/horizontalmente. */
  font-size: clamp(26px, 8vw, 48px);
  line-height: 1.12; letter-spacing: -0.03em;
  flex: 1 1 auto; align-content: center; align-items: center;
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 0.22em 0.28em; max-width: 100%;
}
.kw {
  display: inline-block;
  color: var(--ink-50);
  /* -webkit-text-fill-color heredado pisaba el color del texto; lo
     atamos a currentColor para que mande siempre `color`. */
  -webkit-text-fill-color: currentColor;
  opacity: 0.45;
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease),
    transform 0.34s var(--ease-pop);
}
/* Karaoke: de gris apagado → AZUL MARINO conforme se dicta cada palabra,
   con un breve muelle (pop) al encenderse. */
.kw.is-on {
  color: var(--navy);
  -webkit-text-fill-color: var(--navy);
  opacity: 1;
  animation: kwPop 0.4s var(--ease-pop) both;
}
@keyframes kwPop {
  0%   { transform: translateY(0) scale(1); }
  45%  { transform: translateY(-3px) scale(1.06); }
  100% { transform: translateY(-1px) scale(1); }
}
/* Entrada coreografiada: cada palabra aparece UNA A UNA con ~0,5 s de pausa
   entre ellas (énfasis locutado). Un breve pop y asienta a su gris de reposo. */
.kw.kw--in { animation: kwIntro 0.5s var(--ease-pop) both; animation-delay: calc(var(--wi, 0) * 0.5s); }
@keyframes kwIntro {
  0%   { opacity: 0; transform: translateY(12px) scale(0.92); filter: blur(3px); }
  55%  { opacity: 0.6;  transform: translateY(-2px) scale(1.05); filter: blur(0); }
  100% { opacity: 0.45; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kw { transition: color 0.3s var(--ease), opacity 0.3s var(--ease); }
  .kw.is-on { animation: none; transform: none; }
  .kw.kw--in { animation: none; }
}

/* --- Recorder: círculo de grabar + repetir al lado --------- */
.recorder {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(16px, 3vw, 22px);
}
/* Close (izq) · Record (centro, héroe) · Retry (der) — espejados, mismo
   vocabulario de botón redondo. Grid de 3 columnas para que el botón de
   grabar quede SIEMPRE centrado, aunque el repetir aún no se muestre. */
.recorder__controls {
  display: grid; align-items: center; justify-items: center;
  grid-template-columns: var(--ctl) var(--ctl-rec) var(--ctl);
  gap: clamp(14px, 4vw, 24px);
}
.recorder__controls #closeBtn { grid-column: 1; }
.recorder__controls .circle--rec { grid-column: 2; }
.recorder__controls #retryBtn  { grid-column: 3; }
/* Hidden retry keeps its column reserved (record stays centered): it stays
   laid out but invisible/inert rather than removed. Overrides the global
   [hidden] display:none. */
.recorder__controls #retryBtn[hidden] {
  display: grid !important; visibility: hidden; pointer-events: none;
}
/* Retry aparece animado al revelarse (cuando deja de estar [hidden]) con
   un muelle confiado. */
.recorder__controls #retryBtn:not([hidden]) {
  animation: ghostIn 0.46s var(--ease-pop) both;
}
@keyframes ghostIn {
  0%   { opacity: 0; transform: scale(0.6) rotate(-30deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .recorder__controls #retryBtn:not([hidden]) { animation: none; }
}

/* ============================================================
   ROUND COURSE BUTTONS — the hero vocabulary.
   Big solid colored circle, like the Listen/Grammar/Read circles.
   ============================================================ */
/* ── Unified round-button vocabulary ──────────────────────────
   One shared --ctl size + icon ratio drives EVERY circular control and
   icon (record, close, retry, and the check/cross glyphs), so the set is
   visually consistent. The record circle is the same family, just the
   hero scale. ≥44px tap targets throughout. */
:root {
  --ctl:      clamp(60px, 15vw, 76px);   /* secondary round buttons (close/retry) */
  --ctl-rec:  clamp(120px, 34vw, 156px); /* hero record circle */
  --ctl-icon: 42%;                        /* icon size as a share of the button */
}
.circle {
  position: relative;
  width: var(--ctl); height: var(--ctl);
  min-width: 44px; min-height: 44px;
  border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center;
  color: #fff; background: transparent;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s var(--ease), filter .25s var(--ease),
    box-shadow .25s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.circle__icon { width: var(--ctl-icon); height: var(--ctl-icon); display: block; }
.circle:hover { filter: brightness(1.05); transform: translateY(-2px); }
.circle:active { transform: scale(0.96); transition-duration: .12s; }
.circle:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 4px; }
/* Spring the icon a touch on press for a tactile feel. */
.circle__icon { transition: transform .26s var(--ease-pop); }
.circle:active .circle__icon { transform: scale(0.9); transition-duration: .12s; }

/* Record circle — the red category circle, hero scale. */
.circle--rec { width: var(--ctl-rec); height: var(--ctl-rec); background: var(--c-red); z-index: 2;
  transition: transform .26s var(--ease-pop), filter .25s var(--ease),
    box-shadow .25s var(--ease), background .2s var(--ease); }
.circle--rec:hover { box-shadow: 0 8px 28px rgba(230, 57, 70, 0.32); transform: translateY(-2px) scale(1.02); }
.circle--rec:active { transform: scale(0.95); transition-duration: .12s; }
/* Confident recording RING: an expanding halo radiates from the record circle
   while it listens, on top of the existing deep-red scale pulse. */
.circle--rec.is-recording::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(230, 57, 70, 0.55);
  animation: recRing 1.5s var(--ease) infinite;
  pointer-events: none;
}

/* Ghost buttons (close + retry) — identical outlined style, mirrored sides. */
.circle--ghost {
  background: transparent; border: 2px solid rgba(4, 1, 63, 0.28); color: rgba(4, 1, 63, 0.55);
  z-index: 1;
}
.circle--ghost:hover { background: rgba(4, 1, 63, 0.04); border-color: rgba(4, 1, 63, 0.5); color: var(--ink); box-shadow: none; }

/* Recording state: deep red + scale pulse (no shadows churn) */
.circle--rec.is-recording { background: var(--c-red-deep); animation: recPulse 1.15s ease-in-out infinite; }
@keyframes recPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
/* Confident outward ring that fades as it expands. */
@keyframes recRing {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { opacity: 0; }
  100% { transform: scale(1.34); opacity: 0; }
}

/* Live waveform — flat, between hairlines on the card -------- */
.meter { width: 100%; max-width: 420px; }
.meter[hidden] { display: none; }
.meter__wave {
  width: 100%; height: clamp(64px, 16vw, 84px); display: block;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
}
.meter__timer {
  display: block; text-align: center; margin-top: 8px;
  font-variant-numeric: tabular-nums; font-weight: 500;
  color: var(--ink); font-size: 14px;
}

/* Status row — ICON ONLY. No sentences: state is conveyed by which glyph is
   shown (plus color). The error glyph appears only when the mic is blocked. */
.status {
  min-height: clamp(22px, 5vw, 28px);
  display: grid; place-items: center;
}
.status__icon { width: clamp(22px, 5vw, 26px); height: clamp(22px, 5vw, 26px); display: none; }
.status__icon--error { color: var(--c-red); }
.status[data-state="error"] .status__icon--error { display: block; animation: errIn .3s var(--ease) both; }
@keyframes errIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .status[data-state="error"] .status__icon--error { animation: none; }
}

/* ============================================================
   RESULT — insignia (círculo + estrella) + estrellas que explotan
   + nota + estrellas ganadas, en el hueco reservado sobre el recorder.
   ============================================================ */
.result {
  width: 100%; margin-top: clamp(8px, 2vh, 18px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  animation: resultIn .42s var(--ease) both;
}
.result[hidden] { display: none; }
@keyframes resultIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .result { animation: none; } }

/* --- Insignia de recompensa: círculo con estrella + estrellas que explotan --- */
.reward { position: relative; width: clamp(108px, 30vw, 140px); height: clamp(108px, 30vw, 140px);
  margin-bottom: clamp(12px, 3vw, 18px); display: grid; place-items: center; }
.reward__badge {
  position: relative; z-index: 2; width: 100%; height: 100%; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 25%, #06024f, var(--navy) 70%);
  box-shadow: 0 12px 34px rgba(4,1,63,0.34), inset 0 0 0 2px var(--gold-soft);
  transform: scale(0.3); opacity: 0;
  animation: badgePop 0.6s var(--ease-pop) both;
}
.reward__star { width: 46%; height: 46%; fill: var(--gold);
  filter: drop-shadow(0 0 10px var(--gold-glow));
  animation: rewardStarGlow .9s var(--ease) both; }
@keyframes badgePop {
  0% { opacity: 0; transform: scale(0.3) rotate(-16deg); }
  55% { opacity: 1; transform: scale(1.16) rotate(5deg); }
  78% { transform: scale(0.97) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
/* The inner star flares its glow once as the badge lands. */
@keyframes rewardStarGlow {
  0%   { filter: drop-shadow(0 0 4px var(--gold-soft)); }
  55%  { filter: drop-shadow(0 0 20px var(--gold-glow)); }
  100% { filter: drop-shadow(0 0 10px var(--gold-glow)); }
}
/* Estrellas que explotan hacia afuera (inyectadas por JS). */
.reward__burst { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.reward__burst .spark { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  fill: var(--gold); opacity: 0;
  animation: sparkFly 0.7s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes sparkFly {
  0% { opacity: 0; transform: translate(0,0) scale(0.2) rotate(0); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1) rotate(140deg); }
}

/* Stars — pequeño indicador 1–3 (gold pop al ganar) */
.stars { display: flex; gap: clamp(7px, 2.4vw, 12px); margin-bottom: 8px; }
.star {
  width: clamp(22px, 6vw, 30px); height: clamp(22px, 6vw, 30px);
  fill: rgba(4, 1, 63, 0.10);              /* "off" star on the white card */
  opacity: 0; transform: scale(.3) rotate(-12deg);
}
.star.win {
  fill: var(--gold);
  animation: starPop .66s var(--ease-pop) both;
  /* Celebratory stagger: each won star lands ~190ms after the previous,
     after a short beat so it follows the badge pop. */
  animation-delay: calc(var(--i, 0) * 190ms + 120ms);
}
.star.dim {
  animation: starDim .4s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 120ms + 260ms);
}
@keyframes starPop {
  0%   { opacity: 0; transform: scale(.3) rotate(-14deg); filter: drop-shadow(0 0 0 transparent); }
  50%  { opacity: 1; transform: scale(1.32) rotate(6deg);  filter: drop-shadow(0 0 22px var(--gold-glow)); }
  72%  { transform: scale(.92) rotate(-2deg);              filter: drop-shadow(0 0 14px var(--gold-glow)); }
  88%  { transform: scale(1.05) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0);        filter: drop-shadow(0 0 10px var(--gold-soft)); }
}
@keyframes starDim {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}

.score { font-weight: 500; font-size: clamp(24px, 6vw, 36px); line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.score__max { color: var(--ink-32); font-size: .44em; font-weight: 300; margin-left: 3px; }

/* ============================================================
   RESPONSIVE — verified 360 / 414 / 768 / 1280
   ============================================================ */
@media (max-width: 380px) {
  .phrase { font-size: clamp(24px, 9vw, 36px); }
}
/* Short viewports: shrink the hero record circle so the card never overflows. */
@media (max-height: 600px) {
  :root { --ctl-rec: clamp(96px, 22vh, 130px); --ctl: clamp(54px, 12vh, 68px); }
  .phrase { font-size: clamp(22px, 6vh, 40px); }
  .reward { width: clamp(84px, 20vh, 120px); height: clamp(84px, 20vh, 120px); }
}
@media (min-width: 1100px) {
  .card { max-width: 560px; }
}

/* --- prefers-reduced-motion --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bg__video { transition: none; }
  .circle--rec.is-recording { animation: none; }
  .circle--rec.is-recording::after { animation: none; display: none; }
  .circle:hover, .circle:active, .circle--rec:hover, .circle--rec:active { transform: none; }
  .circle__icon, .circle:active .circle__icon { transition: none; transform: none; }
  .reward__badge { animation: none; opacity: 1; transform: none; }
  .reward__star { animation: none; }
  .reward__burst .spark { animation: none; opacity: 0; }
  .star.win, .star.dim {
    animation: none; opacity: 1; transform: none; transition: none;
  }
  .star.win { filter: drop-shadow(0 0 8px var(--gold-soft)); }
}