/* ==========================================================
   Mundo Mola — sistema de diseño del hub de minijuegos de
   Kinder a 3°. Vive en su propio archivo (no embebido por
   pantalla como el resto de los juegos) porque 9 escenas
   comparten este único sistema visual; todo queda contenido
   bajo .mola-world para no filtrarse a la shell oscura del
   resto de la app.

   Inspirado en la mola guna: capas de tela recortada, contorno
   de tinta grueso y sombra desplazada sólida (no difusa).
   ========================================================== */

.mola-world {
  /* Paleta — el "negro" de la mola es --mo-tinta, no un gris */
  --mo-coral:    #FF5A5F;
  --mo-mango:    #FFB020;
  --mo-lima:     #37D67A;
  --mo-turquesa: #21C7D0;
  --mo-uva:      #7C4DFF;
  --mo-rosa:     #FF4FA3;
  --mo-tinta:    #1B1033;
  --mo-crema:    #FFF7E8;
  --mo-arena:    #FFE9C7;
  --mo-blanco:   #FFFFFF;

  --mo-r-sm: 14px;
  --mo-r:    22px;
  --mo-r-lg: 32px;

  --mo-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --mo-shadow-y: 6px;

  font-family: var(--f-head, 'Fredoka', sans-serif);
  background: linear-gradient(175deg, #FFF9F0 0%, #FFF2DD 100%);
  color: var(--mo-tinta);
  border-radius: var(--mo-r-lg);
  min-height: calc(100vh - var(--header-h, 58px) - 48px);
  padding: 24px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25), inset 0 2px 4px rgba(255, 255, 255, 0.6);
  border: 3px solid rgba(255, 176, 32, 0.4);
}

.mola-world * { box-sizing: border-box; }
.mola-world button { font-family: inherit; cursor: pointer; }
.mola-world h1, .mola-world h2, .mola-world h3 { font-family: inherit; line-height: 1.15; }

/* ── Utilidad: capas mola (contorno + sombra desplazada) ─────────────── */
.mola-layered {
  position: relative;
  filter: drop-shadow(0 var(--mo-shadow-y) 0 rgba(27, 16, 51, 0.25));
}

/* ── Respiración ambiental ────────────────────────────────────────────── */
@keyframes molaFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}
@keyframes molaPop {
  0%   { transform: scale(.7); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes molaSquash {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18, .84); }
  70%  { transform: scale(.94, 1.06); }
  100% { transform: scale(1); }
}
@keyframes molaPress {
  0%   { transform: translateY(0); }
  100% { transform: translateY(4px); }
}
@keyframes molaGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 176, 32, 0); }
  50%      { box-shadow: 0 0 22px rgba(255, 176, 32, .55); }
}
@keyframes molaWiggleNo {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

.mola-float  { animation: molaFloat 2.4s ease-in-out infinite; }
.mola-glow   { animation: molaGlow 2s ease-in-out infinite; }
.mola-pop-in { animation: molaPop .45s var(--mo-ease-bounce) both; }

@media (prefers-reduced-motion: reduce) {
  .mola-world .mola-float,
  .mola-world .mola-glow,
  .mola-world [class*="mola-"] {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── Botones "chunky" ────────────────────────────────────────────────── */
.mola-btn {
  --mola-btn-c: var(--mo-turquesa);
  --mola-btn-shadow: #159199;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 72px; min-height: 72px;
  padding: 14px 22px;
  font-size: 20px; font-weight: 700; color: var(--mo-blanco);
  background: var(--mola-btn-c);
  border: 3.5px solid var(--mo-tinta);
  border-radius: var(--mo-r);
  box-shadow: 0 var(--mo-shadow-y) 0 var(--mola-btn-shadow), 0 var(--mo-shadow-y) 0 3.5px var(--mo-tinta);
  transition: transform .12s var(--mo-ease-bounce), box-shadow .12s ease;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.mola-btn:hover  { transform: translateY(-2px); }
.mola-btn:active,
.mola-btn.pressed {
  transform: translateY(var(--mo-shadow-y));
  box-shadow: 0 0 0 var(--mola-btn-shadow), 0 0 0 3.5px var(--mo-tinta);
}
.mola-btn:disabled { opacity: .45; cursor: default; transform: none; }

.mola-btn-coral    { --mola-btn-c: var(--mo-coral);    --mola-btn-shadow: #C23439; }
.mola-btn-mango    { --mola-btn-c: var(--mo-mango);    --mola-btn-shadow: #C77E00; }
.mola-btn-lima     { --mola-btn-c: var(--mo-lima);     --mola-btn-shadow: #1E9A56; }
.mola-btn-uva      { --mola-btn-c: var(--mo-uva);      --mola-btn-shadow: #5527D6; }
.mola-btn-rosa     { --mola-btn-c: var(--mo-rosa);     --mola-btn-shadow: #C22778; }
.mola-btn-outline  {
  --mola-btn-c: var(--mo-blanco); --mola-btn-shadow: #D8CDBB;
  color: var(--mo-tinta);
}
.mola-btn-round { border-radius: 50%; padding: 0; width: 72px; height: 72px; min-width: 0; }
.mola-btn-sm { min-width: 52px; min-height: 52px; padding: 8px 16px; font-size: 16px; border-width: 3px; }

/* ── Header del hub moderno ───────────────────────────────────────────── */
.mola-hub-head {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  margin-bottom: 26px;
  background: linear-gradient(135deg, #FFFDF8 0%, #FFF3E0 50%, #FFE5C4 100%);
  border: 3.5px solid var(--mo-tinta);
  border-radius: 28px;
  padding: 18px 24px;
  box-shadow: 0 10px 0 rgba(27, 16, 51, 0.12), 0 16px 32px rgba(0,0,0,0.06);
}
.mola-hero-tag {
  font-family: var(--f-body, sans-serif);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #EA580C;
  background: rgba(234, 88, 12, 0.12);
  border: 1.5px solid rgba(234, 88, 12, 0.3);
  padding: 3px 12px;
  border-radius: 999px;
  width: fit-content;
  margin-bottom: 2px;
}
.mola-hero-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 260px;
}
.mola-hub-title {
  font-size: 34px; font-weight: 800; color: var(--mo-tinta);
  display: flex; align-items: center; gap: 10px;
  line-height: 1.1;
}
.mola-hub-sub {
  font-size: 14px;
  color: #6B5E82;
  font-family: var(--f-body, sans-serif);
  font-weight: 600;
  margin-top: 1px;
}
.mola-hero-stats {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.mola-stat-pill {
  font-family: var(--f-body, sans-serif);
  background: #FFF;
  border: 2.5px solid var(--mo-tinta);
  padding: 6px 14px;
  border-radius: 16px;
  box-shadow: 0 3px 0 rgba(27, 16, 51, 0.1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mola-stat-pill.stars { background: #FEF3C7; border-color: #F59E0B; }
.mola-stat-pill.stickers { background: #EDE9FE; border-color: #A78BFA; }
.mola-stat-pill .pill-icon { font-size: 20px; }
.mola-stat-pill .pill-info { display: flex; flex-direction: column; line-height: 1.1; }
.mola-stat-pill .pill-val { font-size: 15px; font-weight: 800; color: #1B1033; font-family: var(--f-head, 'Fredoka', sans-serif); }
.mola-stat-pill .pill-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #6B5E82; letter-spacing: 0.04em; }

.mola-hub-actions { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }

/* Botón llamativo del Álbum */
.mola-album-btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 24px;
  background: linear-gradient(180deg, #FFB020 0%, #F59E0B 100%);
  border: 3.5px solid var(--mo-tinta);
  border-radius: 20px;
  box-shadow: 0 6px 0 #B45309, 0 6px 0 3.5px var(--mo-tinta);
  cursor: pointer;
  transition: all .15s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
}
.mola-album-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 #B45309, 0 9px 0 3.5px var(--mo-tinta);
}
.mola-album-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #B45309, 0 2px 0 3.5px var(--mo-tinta);
}
.mola-album-btn .album-btn-icon { font-size: 28px; transition: transform .2s ease; }
.mola-album-btn:hover .album-btn-icon { transform: scale(1.15) rotate(-6deg); }
.mola-album-btn .album-btn-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.mola-album-btn .album-btn-main { font-size: 18px; font-weight: 800; color: #FFFFFF; font-family: var(--f-head, 'Fredoka', sans-serif); text-shadow: 0 2px 0 rgba(0,0,0,0.2); }
.mola-album-btn .album-btn-sub { font-size: 11px; font-weight: 700; color: #FFF8E1; text-transform: uppercase; letter-spacing: 0.04em; }

/* Kiri, la mascota, en la esquina del hub */
.mola-pet-wrap {
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(145deg, #FFE8C7, #FFD090);
  border: 3.5px solid var(--mo-tinta);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 var(--mo-shadow-y) 0 #D9A86C;
  flex-shrink: 0;
  position: relative;
  transition: transform .25s var(--mo-ease-bounce);
}
.mola-pet-wrap:hover { transform: scale(1.08) rotate(4deg); }
.mola-pet-level-badge {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  background: #1B1033; color: #FFD54F;
  font-size: 10px; font-weight: 800;
  padding: 2px 10px; border-radius: 999px;
  border: 1.5px solid #FFD54F;
  text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ── Grilla de Tarjetas de Juegos (Arcade Posters) ────────────────────── */
.mola-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.mola-game-card {
  background: #FFFFFF;
  border: 3.5px solid var(--mo-tinta);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 8px 0 rgba(27,16,51,0.14), 0 14px 28px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  transition: transform .22s var(--mo-ease-bounce), box-shadow .22s ease;
  cursor: pointer;
  position: relative;
}
.mola-game-card:hover {
  transform: translateY(-8px) scale(1.025);
  box-shadow: 0 14px 0 rgba(27,16,51,0.18), 0 20px 36px rgba(0,0,0,0.14);
}
.mola-game-card:active {
  transform: translateY(2px);
}
.mola-card-banner {
  width: 100%;
  height: 140px;
  display: block;
  border-bottom: 3.5px solid var(--mo-tinta);
  background: #1B1033;
}
.mola-card-body {
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  flex: 1;
}
.mola-game-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--mo-tinta);
  margin-top: 1px;
}
.mola-game-theme {
  font-family: var(--f-body, sans-serif);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 14px;
  border-radius: 999px;
  border: 2px solid currentColor;
}
.mola-theme-numeros     { color: #B45309; background: #FEF3C7; border-color: #F59E0B; }
.mola-theme-letras      { color: #BE123C; background: #FFE4E6; border-color: #FB7185; }
.mola-theme-memoria     { color: #047857; background: #D1FAE5; border-color: #34D399; }
.mola-theme-ciencias    { color: #6D28D9; background: #EDE9FE; border-color: #A78BFA; }
.mola-theme-naturaleza  { color: #0369A1; background: #E0F2FE; border-color: #38BDF8; }
.mola-theme-logica      { color: #4338CA; background: #EEF2FF; border-color: #818CF8; }
.mola-theme-habitos     { color: #B45309; background: #FEF3C7; border-color: #F59E0B; }
.mola-theme-exploracion { color: #334155; background: #F1F5F9; border-color: #94A3B8; }

.mola-mini-stars {
  display: flex;
  gap: 6px;
  font-size: 18px;
  margin-top: 4px;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}
.mola-card-play-btn {
  margin-top: 10px;
  width: 100%;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
  background: linear-gradient(180deg, #22D3EE 0%, #06B6D4 100%);
  border: 3px solid var(--mo-tinta);
  border-radius: 16px;
  box-shadow: 0 4px 0 #0891B2, 0 4px 0 3px var(--mo-tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .15s ease;
  cursor: pointer;
  font-family: var(--f-head, 'Fredoka', sans-serif);
}
.mola-game-card:hover .mola-card-play-btn {
  background: linear-gradient(180deg, #4ADE80 0%, #22C55E 100%);
  box-shadow: 0 4px 0 #16A34A, 0 4px 0 3px var(--mo-tinta);
  transform: translateY(-2px);
}
.mola-game-card.locked {
  opacity: .65;
  filter: grayscale(.4);
  cursor: default;
}
.mola-game-card.locked:hover {
  transform: none;
  box-shadow: 0 8px 0 rgba(27,16,51,0.14);
}
.mola-game-card.locked .mola-card-play-btn {
  background: linear-gradient(180deg, #CBD5E1 0%, #94A3B8 100%);
  box-shadow: 0 4px 0 #64748B, 0 4px 0 3px var(--mo-tinta);
  color: #334155;
}

/* ── Escena de juego (stage) ──────────────────────────────────────────── */
.mola-stage-wrap { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.mola-stage-top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.mola-level-chips { display: flex; gap: 8px; margin-left: auto; }
.mola-chip {
  font-family: var(--f-body, sans-serif); font-weight: 700; font-size: 13px;
  padding: 8px 16px; border-radius: 999px; border: 3px solid var(--mo-tinta);
  background: var(--mo-blanco); color: var(--mo-tinta);
  min-height: 44px; display: inline-flex; align-items: center;
}
.mola-chip.on { background: var(--mo-lima); color: var(--mo-blanco); }

.mola-stage {
  position: relative;
  flex: 1; min-height: 360px;
  background: linear-gradient(160deg, var(--mo-arena), var(--mo-crema) 65%);
  border: 4px solid var(--mo-tinta);
  border-radius: var(--mo-r-lg);
  overflow: hidden;
  touch-action: none;
}
.mola-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* HUD sin depender de texto: estrellas + racha, iconografía grande */
.mola-hud {
  position: absolute; top: 14px; left: 14px; right: 14px;
  display: flex; align-items: center; gap: 10px; pointer-events: none;
  z-index: 5;
}
.mola-hud-stars { display: flex; gap: 4px; font-size: 26px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.mola-hud-stars .off { opacity: .25; }

/* Narrador (Kiri hablando) */
.mola-narrator {
  display: flex; align-items: center; gap: 12px;
  background: var(--mo-blanco); border: 4px solid var(--mo-tinta);
  border-radius: var(--mo-r); padding: 10px 16px;
  box-shadow: 0 var(--mo-shadow-y) 0 rgba(27,16,51,.15);
}
.mola-narrator-avatar { width: 48px; height: 48px; flex-shrink: 0; }
.mola-narrator-avatar.speaking { animation: molaFloat 1s ease-in-out infinite; }
.mola-narrator-text { font-size: 16px; font-weight: 600; flex: 1; }
.mola-narrator-speak {
  width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--mo-tinta);
  background: var(--mo-mango); font-size: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

/* ── Objetos arrastrables / tocables ───────────────────────────────────── */
.mola-draggable {
  cursor: grab; touch-action: none; user-select: none;
  transition: filter .12s ease;
}
.mola-draggable:active,
.mola-draggable.dragging { cursor: grabbing; filter: brightness(1.08); z-index: 20; }
.mola-drop-target {
  transition: transform .15s var(--mo-ease-bounce), filter .15s ease;
}
.mola-drop-target.hover { transform: scale(1.06); filter: drop-shadow(0 0 14px rgba(55,214,122,.6)); }
.mola-drop-target.wrong-shake { animation: molaWiggleNo .35s ease; }
.mola-drop-target.correct-pop { animation: molaSquash .5s var(--mo-ease-bounce); }

/* ── Overlay de celebración de nivel ───────────────────────────────────── */
.mola-celebrate {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(255, 247, 232, .96);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 20px;
}
.mola-celebrate.show { display: flex; }
.mola-celebrate canvas.mola-confetti { position: absolute; inset: 0; pointer-events: none; }
.mola-celebrate-title { font-size: 26px; font-weight: 700; position: relative; z-index: 2; }
.mola-celebrate-stickers { display: flex; gap: 10px; position: relative; z-index: 2; }

/* ── Modal del Álbum de Calcomanías Ilustrado ──────────────────────────── */
.mola-modal-back {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.mola-album-modal {
  background: #0F172A;
  border: 4px solid #F59E0B;
  border-radius: 30px;
  padding: 24px;
  max-width: 820px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0,0,0,0.6), 0 0 30px rgba(245, 158, 11, 0.25);
  color: #FFFFFF;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mola-album-modal::-webkit-scrollbar { width: 6px; }
.mola-album-modal::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }

.mola-album-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(255,255,255,0.1);
  position: relative;
}
.album-header-main {
  display: flex;
  align-items: center;
  gap: 16px;
}
.album-badge-icon {
  font-size: 36px;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #FDE047;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
  flex-shrink: 0;
}
.album-progress-text {
  font-size: 14px;
  font-weight: 600;
  color: #94A3B8;
  margin-top: 2px;
  font-family: var(--f-body, sans-serif);
}
.album-progress-bar-wrap {
  width: 100%;
  height: 12px;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.15);
}
.album-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #F59E0B, #10B981, #06B6D4);
  border-radius: 999px;
  transition: width .4s ease;
}
.mola-album-close-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.2);
  color: #FFF;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}
.mola-album-close-btn:hover {
  background: #EF4444;
  border-color: #EF4444;
  transform: scale(1.1);
}

.mola-album-tabs {
  display: flex;
  gap: 10px;
  margin: 4px 0 10px;
  border-bottom: 2px solid rgba(255,255,255,0.1);
  padding-bottom: 12px;
}
.album-tab-btn {
  padding: 10px 20px;
  border-radius: 14px;
  font-family: var(--f-head, 'Fredoka', sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: #94A3B8;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: all .15s ease;
}
.album-tab-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #FFF;
}
.album-tab-btn.active {
  color: #0F172A;
  background: #FDE047;
  border-color: #F59E0B;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

.mola-album-content {
  display: flex;
  flex-direction: column;
}
.mola-album-content.hidden { display: none; }

.mola-stickers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 14px;
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 4px;
}
.mola-sticker-card {
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: default;
}
.mola-sticker-card:hover {
  transform: translateY(-4px);
}
.mola-sticker-card.earned {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.15);
}
.mola-sticker-card.earned:hover {
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
}
.sticker-canvas-wrap {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sticker-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #E2E8F0;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--f-body, sans-serif);
}
.sticker-status {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #10B981;
}
.mola-sticker-card.locked .sticker-status {
  color: #64748B;
}

/* ── Vestidor de Kiri ─────────────────────────────────────────────────── */
.pet-locked-notice {
  text-align: center;
  padding: 40px 20px;
  background: rgba(255,255,255,0.03);
  border: 2px dashed rgba(255,255,255,0.1);
  border-radius: 24px;
}
.pet-dressing-room {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  background: rgba(255,255,255,0.03);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 22px;
}
.pet-stage-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.2) 100%);
  border: 3px solid rgba(245, 158, 11, 0.4);
  border-radius: 24px;
  padding: 18px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.4);
}
.pet-stage-name {
  font-size: 13px;
  font-weight: 800;
  color: #FDE047;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pet-custom-controls {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pet-control-title {
  font-size: 13px;
  font-weight: 800;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
  font-family: var(--f-body, sans-serif);
}
.pet-options-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mola-wardrobe-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #FFF;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
  font-family: var(--f-body, sans-serif);
}
.mola-wardrobe-btn:hover {
  background: rgba(255,255,255,0.18);
  transform: translateY(-2px);
}
.mola-wardrobe-btn.on {
  background: #F59E0B;
  border-color: #FDE047;
  color: #0F172A;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

/* ==========================================================
   Ritmo Mola — Escenario de Telar Tradicional No Plano
   ========================================================== */
.ritmo-mola-stage {
  background: radial-gradient(circle at 50% 30%, #2D1457 0%, #17092E 70%, #0D041B 100%) !important;
  border: 4px solid #1B1033 !important;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6), 0 16px 32px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 24px 20px !important;
  gap: 16px;
  position: relative;
}

.ritmo-round-pill {
  margin-left: auto;
  font-family: var(--f-head, sans-serif);
  font-weight: 800;
  font-size: 13px;
  color: #FDE047;
  background: rgba(245, 158, 11, 0.2);
  border: 2px solid #F59E0B;
  border-radius: 999px;
  padding: 4px 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Telar y Cinta Ceremonial */
.ritmo-loom-container {
  width: 100%;
  max-width: 640px;
  background: linear-gradient(180deg, #3A1B68 0%, #200E3D 100%);
  border: 3.5px solid #F59E0B;
  border-radius: 26px;
  padding: 16px 20px;
  box-shadow: 0 12px 0 #130726, 0 16px 30px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
}

.ritmo-loom-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-head, sans-serif);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #FDE047;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.ritmo-sash-track {
  width: 100%;
  background: linear-gradient(180deg, #1C0A33 0%, #2E1253 50%, #150727 100%);
  border-radius: 20px;
  border: 2.5px solid rgba(245, 158, 11, 0.5);
  padding: 12px 14px;
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow-x: auto;
}

.sash-gold-trim {
  position: absolute;
  left: 8px; right: 8px;
  height: 2px;
  background: repeating-linear-gradient(90deg, #FDE047 0px, #FDE047 6px, transparent 6px, transparent 10px);
}
.sash-gold-trim.top { top: 6px; }
.sash-gold-trim.bottom { bottom: 6px; }

.ritmo-sash-strip {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  min-height: 80px;
}

.ritmo-strip-cell {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all .2s cubic-bezier(.34, 1.56, .64, 1);
}

.ritmo-strip-cell.is-blank {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.05) 70%);
  border-radius: 50%;
  animation: pulseBlank 1.6s ease-in-out infinite;
}

@keyframes pulseBlank {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(245, 158, 11, 0); }
  50%      { transform: scale(1.08); box-shadow: 0 0 20px rgba(245, 158, 11, 0.6); }
}

.ritmo-blank-quest {
  position: absolute;
  font-family: var(--f-head, sans-serif);
  font-size: 32px;
  font-weight: 900;
  color: #FDE047;
  text-shadow: 0 0 12px rgba(253, 224, 71, 0.8), 0 2px 4px rgba(0,0,0,0.8);
  pointer-events: none;
  animation: floatQuest 1.4s ease-in-out infinite;
}

@keyframes floatQuest {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.15); }
}

.ritmo-cell-filled {
  animation: popFill .4s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes popFill {
  0%   { transform: scale(0.3) rotate(-20deg); opacity: 0; }
  70%  { transform: scale(1.2) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.ritmo-strip-cell.is-singing {
  transform: scale(1.25) translateY(-6px);
  filter: drop-shadow(0 0 16px #FDE047);
  z-index: 10;
}

/* Bandeja de Fichas de Elección */
.ritmo-choices-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.ritmo-choices-label {
  font-family: var(--f-head, sans-serif);
  font-size: 14px;
  font-weight: 800;
  color: #FDE047;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.ritmo-choices-grid {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.ritmo-token-card {
  background: linear-gradient(180deg, #381A64 0%, #200B3F 100%);
  border: 3.5px solid #F59E0B;
  border-radius: 22px;
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: 0 8px 0 #130726, 0 12px 20px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.2);
  transition: all .16s cubic-bezier(.34, 1.56, .64, 1);
  min-width: 100px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ritmo-token-card:hover {
  transform: translateY(-5px) scale(1.05);
  border-color: #FDE047;
  box-shadow: 0 12px 0 #130726, 0 16px 28px rgba(245, 158, 11, 0.35);
}

.ritmo-token-card:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #130726;
}

.ritmo-token-card.is-correct {
  border-color: #34D399;
  background: linear-gradient(180deg, #065F46 0%, #022C22 100%);
  box-shadow: 0 0 24px rgba(52, 211, 153, 0.7);
  transform: scale(1.1);
}

.ritmo-token-card.is-wrong {
  border-color: #F87171;
  background: linear-gradient(180deg, #991B1B 0%, #450A0A 100%);
  animation: molaWiggleNo .4s ease;
}

.ritmo-card-label {
  font-family: var(--f-body, sans-serif);
  font-size: 11.5px;
  font-weight: 800;
  color: #FFFDF5;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  white-space: nowrap;
}

/* ==========================================================
   Mi Día Perfecto — Diorama Celestial Vivo
   ========================================================== */
.midia-stage {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(124, 77, 255, 0.28) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(160deg, #241246 0%, #170B2E 55%, #0D0520 100%) !important;
  border: 4px solid #1B1033 !important;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.55), 0 16px 32px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 18px !important;
  position: relative;
  min-height: 480px;
  overflow: hidden;
}

/* Neblina cósmica de fondo que respira */
.midia-stage::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 40% at 18% 22%, rgba(255, 176, 32, 0.16) 0%, rgba(0,0,0,0) 70%),
    radial-gradient(38% 38% at 82% 30%, rgba(33, 199, 208, 0.14) 0%, rgba(0,0,0,0) 70%),
    radial-gradient(45% 45% at 50% 92%, rgba(124, 77, 255, 0.18) 0%, rgba(0,0,0,0) 70%);
  animation: midiaNebula 16s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes midiaNebula {
  0%   { transform: scale(1) translateY(0); opacity: .85; }
  100% { transform: scale(1.12) translateY(-14px); opacity: 1; }
}

.midia-stage > * { position: relative; z-index: 1; }

/* ── Barra superior: estrellas + progreso ─────────────────────────────── */
.midia-topbar {
  width: 100%;
  max-width: 700px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.midia-progress {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

.midia-progress-track {
  flex: 1;
  height: 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

.midia-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #FFB020 0%, #FDE047 45%, #7CF5C4 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 14px rgba(253, 224, 71, 0.7);
  transition: width .45s cubic-bezier(.34, 1.56, .64, 1);
  animation: midiaShine 2.4s linear infinite;
}
@keyframes midiaShine {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.midia-progress-pill {
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 13px;
  color: #FDE047;
  background: rgba(253, 224, 71, 0.12);
  border: 2px solid rgba(253, 224, 71, 0.55);
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* ── Ventanas del día ─────────────────────────────────────────────────── */
.midia-portals-wrapper {
  width: 100%;
  max-width: 700px;
}

.midia-zones-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
}

.midia-zone-card {
  --zone-accent: #F59E0B;
  --zone-accent-soft: rgba(245, 158, 11, 0.45);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(0, 0, 0, 0.34) 100%);
  border-radius: 22px;
  border: 3px solid var(--zone-accent);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.38), 0 14px 26px rgba(0, 0, 0, 0.45);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease, border-color .22s ease;
  position: relative;
}

.midia-zone-card.zone-manana { --zone-accent: #F59E0B; --zone-accent-soft: rgba(253, 224, 71, 0.55); }
.midia-zone-card.zone-tarde  { --zone-accent: #F97316; --zone-accent-soft: rgba(255, 159, 90, 0.55); }
.midia-zone-card.zone-noche  { --zone-accent: #8B5CF6; --zone-accent-soft: rgba(196, 181, 253, 0.55); }

/* Con una actividad "en la mano": las tres ventanas respiran por igual */
.midia-zone-card.is-armed {
  animation: midiaArmed 1.5s ease-in-out infinite;
}
@keyframes midiaArmed {
  0%, 100% { box-shadow: 0 10px 0 rgba(0,0,0,.38), 0 0 0 0 var(--zone-accent-soft); }
  50%      { box-shadow: 0 10px 0 rgba(0,0,0,.38), 0 0 0 7px rgba(255, 255, 255, 0.08); }
}

.midia-zone-card.hover {
  transform: translateY(-10px) scale(1.05);
  border-color: #FFFDF5;
  box-shadow: 0 18px 0 rgba(0, 0, 0, 0.42), 0 0 34px var(--zone-accent-soft);
  animation: none;
}

.midia-zone-card.zone-receive { border-color: #7CF5C4; }
.midia-zone-card.zone-reject  { border-color: #FF5A5F; }

.midia-zone-scene {
  position: relative;
  width: 100%;
  height: 104px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.45);
}

.midia-stage .midia-zone-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Brillo diagonal de "cristal" sobre la ventana */
.midia-zone-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 42%);
  pointer-events: none;
}

.midia-zone-header {
  position: absolute;
  left: 7px;
  bottom: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(13, 5, 32, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  font-family: var(--f-head, sans-serif);
  font-size: 11px;
  font-weight: 900;
  color: #FFFDF5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  letter-spacing: .05em;
  text-transform: uppercase;
  z-index: 2;
}
.midia-zone-header .zone-emoji { font-size: 13px; }

/* Anillo de impacto al recibir una actividad correcta */
.midia-zone-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 3px solid #7CF5C4;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.midia-zone-card.zone-receive .midia-zone-ring {
  animation: midiaRing .7s ease-out;
}
@keyframes midiaRing {
  0%   { opacity: .95; transform: scale(.3); }
  100% { opacity: 0;   transform: scale(4.2); }
}

/* Chispas */
.midia-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.midia-spark {
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #FDE047;
  animation: midiaSpark .8s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes midiaSpark {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.15); opacity: 0; }
}

/* Fichas ya colocadas */
.midia-zone-placed {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 4px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
}

.midia-placed-pin {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #FFFDF5;
  border: 2px solid #1B1033;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
  animation: midiaPinFloat 3.2s ease-in-out infinite;
}
@keyframes midiaPinFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-3px) rotate(2deg); }
}
.midia-stage .midia-placed-pin canvas {
  display: block;
  width: 28px !important;
  height: 28px !important;
}
.midia-pin-check {
  position: absolute;
  right: -5px;
  top: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #37D67A;
  border: 2px solid #0D0520;
  color: #FFFDF5;
  font-size: 9px;
  font-weight: 900;
  line-height: 12px;
  text-align: center;
}

/* ── Bandeja de actividades ───────────────────────────────────────────── */
.midia-tray-wrapper {
  width: 100%;
  max-width: 700px;
  margin-top: auto;
  background: linear-gradient(180deg, rgba(60, 30, 105, 0.92) 0%, rgba(25, 9, 51, 0.95) 100%);
  border: 3px solid rgba(245, 158, 11, 0.45);
  border-radius: 22px;
  padding: 12px 16px 14px;
  box-shadow: 0 10px 0 #0E031E, 0 14px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.midia-tray-label {
  font-family: var(--f-head, sans-serif);
  font-size: 12px;
  font-weight: 800;
  color: #FDE047;
  letter-spacing: .04em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.midia-tray-grid {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.midia-act-card {
  position: relative;
  background: linear-gradient(180deg, #452178 0%, #24103F 100%);
  border: 3px solid rgba(226, 232, 240, 0.9);
  border-radius: 18px;
  padding: 8px 10px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: grab;
  box-shadow: 0 8px 0 #110522, 0 10px 18px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.18);
  transition: border-color .16s ease, box-shadow .16s ease;
  min-width: 92px;
  user-select: none;
  touch-action: none;
  /* Flotación en reposo, escalonada por posición en la bandeja */
  animation: midiaCardFloat 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .35s);
}
@keyframes midiaCardFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-7px) rotate(1deg); }
}

.midia-act-icon {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 15px;
  background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, #FFF3D6 70%, #FFE0A8 100%);
  border: 2px solid #1B1033;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 -3px 6px rgba(180, 130, 40, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.midia-stage .midia-act-icon canvas {
  display: block;
  width: 52px !important;
  height: 52px !important;
  animation: midiaIconBob 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .28s);
}
@keyframes midiaIconBob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2.5px) scale(1.06); }
}

.midia-act-card:hover {
  border-color: #FDE047;
  box-shadow: 0 12px 0 #110522, 0 16px 28px rgba(245, 158, 11, 0.45), 0 0 24px rgba(253, 224, 71, 0.35);
}
.midia-act-card:hover .midia-act-icon canvas {
  animation: midiaIconWiggle .6s ease-in-out infinite;
}
@keyframes midiaIconWiggle {
  0%, 100% { transform: rotate(-7deg) scale(1.1); }
  50%      { transform: rotate(7deg) scale(1.1); }
}

.midia-act-card.is-picked {
  border-color: #FDE047;
  background: linear-gradient(180deg, #6C33A8 0%, #431479 100%);
  box-shadow: 0 0 26px rgba(253, 224, 71, 0.85), 0 8px 0 #110522;
  animation: midiaPickedPulse 1s ease-in-out infinite;
}
@keyframes midiaPickedPulse {
  0%, 100% { transform: translateY(-8px) scale(1.06); }
  50%      { transform: translateY(-11px) scale(1.11); }
}

.midia-act-card.is-dragging {
  cursor: grabbing;
  animation: none;
  border-color: #7CF5C4;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.6));
}

.midia-act-label {
  font-family: var(--f-body, sans-serif);
  font-size: 11px;
  font-weight: 800;
  color: #FFFDF5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  text-align: center;
  line-height: 1.15;
  max-width: 84px;
}

/* Amanecer final: al completar el día toda la escena se ilumina */
.midia-stage.is-complete::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 40%, rgba(255, 224, 130, 0.35) 0%, rgba(255, 224, 130, 0) 70%);
  animation: midiaDayrise 1.4s ease-out forwards;
  pointer-events: none;
  z-index: 2;
}
@keyframes midiaDayrise {
  0%   { opacity: 0; transform: scale(.6); }
  55%  { opacity: 1; }
  100% { opacity: .5; transform: scale(1.25); }
}

/* En pantallas angostas las tres ventanas se apilan: cada escena conserva su
   proporción apaisada y el área para soltar la actividad crece. */
@media (max-width: 560px) {
  .midia-stage { padding: 12px 12px 14px !important; }
  .midia-zones-grid { grid-template-columns: 1fr; gap: 10px; }
  .midia-zone-card { flex-direction: row; align-items: center; gap: 10px; padding: 7px; }
  .midia-zone-scene { width: 52%; height: 74px; flex-shrink: 0; }
  .midia-zone-placed { min-height: 46px; }
  .midia-act-card { min-width: 78px; }
  .midia-progress { min-width: 120px; }
  .midia-tray-grid { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .midia-stage::before,
  .midia-act-card,
  .midia-stage .midia-act-icon canvas,
  .midia-placed-pin,
  .midia-progress-fill,
  .midia-zone-card.is-armed { animation: none !important; }
}


/* ==========================================================
   Linterna Curiosa — Selva Nocturna Viva
   ========================================================== */
.linterna-stage {
  background: #05030E !important;
  border: 4px solid #1B1033 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 440px;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.8), 0 16px 32px rgba(0, 0, 0, 0.3);
}

.linterna-canvas {
  flex: 1;
  width: 100%;
  min-height: 320px;
}

.linterna-progress-pill {
  font-family: var(--f-head, sans-serif);
  font-weight: 800;
  font-size: 13px;
  color: #FDE047;
  background: rgba(8, 4, 20, 0.72);
  border: 2px solid rgba(245, 158, 11, 0.5);
  border-radius: 999px;
  padding: 4px 14px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* ── Bandeja inferior de hallazgos ────────────────────────────────────── */
.linterna-tray {
  background: linear-gradient(180deg, rgba(6, 20, 14, 0.94) 0%, rgba(4, 10, 8, 0.98) 100%);
  border-top: 2px solid rgba(52, 211, 153, 0.28);
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  z-index: 2;
}

.linterna-tray-label {
  font-family: var(--f-head, sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(214, 255, 107, 0.75);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.linterna-found-strip {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}

/* Casilla vacía: un hueco por animal que falta */
.linterna-slot {
  width: 52px;
  min-height: 52px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 2.5px dashed rgba(120, 160, 140, 0.4);
  transition: border-color .3s ease, background .3s ease;
  animation: linternaSlotBreathe 3s ease-in-out infinite;
}
.linterna-slot:nth-child(2) { animation-delay: .35s; }
.linterna-slot:nth-child(3) { animation-delay: .7s; }
.linterna-slot:nth-child(4) { animation-delay: 1.05s; }
.linterna-slot:nth-child(5) { animation-delay: 1.4s; }
.linterna-slot:nth-child(6) { animation-delay: 1.75s; }

@keyframes linternaSlotBreathe {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

.linterna-slot-q {
  font-family: var(--f-head, sans-serif);
  font-size: 20px;
  font-weight: 900;
  color: rgba(180, 220, 200, 0.5);
}

/* Casilla ya descubierta */
.linterna-slot.is-filled {
  background: linear-gradient(180deg, #133026 0%, #0A1C15 100%);
  border: 2.5px solid #34D399;
  border-style: solid;
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.55), 0 4px 8px rgba(0, 0, 0, 0.5);
  animation: linternaFoundGlow 2.4s ease-in-out infinite;
}
@keyframes linternaFoundGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(52, 211, 153, 0.4), 0 4px 8px rgba(0,0,0,.5); }
  50%      { box-shadow: 0 0 20px rgba(52, 211, 153, 0.75), 0 4px 8px rgba(0,0,0,.5); }
}

.linterna-stage .linterna-slot canvas {
  display: block;
  width: 40px !important;
  height: 40px !important;
}

.linterna-chip-label {
  font-family: var(--f-body, sans-serif);
  font-size: 9px;
  font-weight: 800;
  color: #7CF5C4;
  text-align: center;
  max-width: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Amanecer al encontrarlos a todos */
.linterna-stage.is-complete::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(65% 65% at 50% 45%, rgba(124, 245, 196, 0.28) 0%, rgba(124, 245, 196, 0) 70%);
  animation: linternaDawn 1.6s ease-out forwards;
  pointer-events: none;
  z-index: 3;
}
@keyframes linternaDawn {
  0%   { opacity: 0; transform: scale(.55); }
  55%  { opacity: 1; }
  100% { opacity: .45; transform: scale(1.3); }
}

@media (max-width: 560px) {
  .linterna-canvas { min-height: 260px; }
  .linterna-slot { width: 46px; min-height: 46px; }
  .linterna-stage .linterna-slot canvas { width: 34px !important; height: 34px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .linterna-slot,
  .linterna-slot.is-filled { animation: none !important; }
}


/* ==========================================================
   Suma Rápida — Puesto de Frutas del Mercado
   ========================================================== */
.suma-stage {
  background: linear-gradient(180deg, #4A2A10 0%, #2C170A 100%) !important;
  border: 4px solid #4A2A10 !important;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.45), 0 16px 32px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 !important;
  gap: 0;
  position: relative;
  min-height: 460px;
  overflow: hidden;
}

.suma-canvas {
  flex: 1;
  width: 100%;
  min-height: 300px;
}

.suma-round-pill {
  margin-left: auto;
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 13px;
  color: #FFF3C4;
  background: rgba(74, 42, 16, 0.82);
  border: 2px solid rgba(255, 200, 100, 0.65);
  border-radius: 999px;
  padding: 4px 14px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* ── Fila de respuestas: fichas de madera con canto ───────────────────── */
.suma-choices-row {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  padding: 12px 16px 16px;
  background: linear-gradient(180deg, rgba(74, 42, 16, 0.4) 0%, rgba(30, 15, 6, 0.92) 45%);
  perspective: 700px;
  z-index: 2;
}

.suma-choice-btn {
  position: relative;
  width: 86px;
  height: 74px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), filter .18s ease;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.5));
  animation: sumaChipIn .4s cubic-bezier(.34, 1.56, .64, 1) both;
}
.suma-choice-btn:nth-child(2) { animation-delay: .07s; }
.suma-choice-btn:nth-child(3) { animation-delay: .14s; }

@keyframes sumaChipIn {
  0%   { opacity: 0; transform: translateY(22px) rotateX(-40deg); }
  100% { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* Canto inferior: es lo que da el grosor de la ficha */
.suma-choice-btn::before {
  content: '';
  position: absolute;
  inset: 8px 0 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #7A4718 0%, #4A2A10 100%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.5);
}

.suma-choice-face {
  position: absolute;
  inset: 0 0 8px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-head, sans-serif);
  font-size: 34px;
  font-weight: 900;
  color: #4A2A10;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #FFE9B8 0%, #F3C377 55%, #E0A55E 100%);
  border: 3px solid #7A4718;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: inset .16s ease;
}

.suma-choice-btn:hover {
  transform: translateY(-6px) rotateX(9deg) scale(1.05);
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(255, 200, 100, 0.4));
}

.suma-choice-btn:active {
  transform: translateY(5px) scale(.98);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}
.suma-choice-btn:active .suma-choice-face { inset: 0 0 2px; }

.suma-choice-btn.is-correct .suma-choice-face {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #A7F3D0 0%, #4ADE80 55%, #16A34A 100%);
  border-color: #14532D;
  color: #14532D;
}
.suma-choice-btn.is-correct {
  animation: sumaWin .55s cubic-bezier(.34, 1.56, .64, 1);
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .5)) drop-shadow(0 0 26px rgba(74, 222, 128, .8));
}
@keyframes sumaWin {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.2) rotateX(12deg); }
  100% { transform: scale(1.06); }
}

.suma-choice-btn.is-wrong .suma-choice-face {
  background: linear-gradient(180deg, #FCA5A5 0%, #EF4444 60%, #991B1B 100%);
  border-color: #7F1D1D;
  color: #FFF1F1;
}
.suma-choice-btn.is-wrong { animation: molaWiggleNo .4s ease; }

@media (max-width: 560px) {
  .suma-canvas { min-height: 220px; }
  .suma-choice-btn { width: 72px; height: 64px; }
  .suma-choice-face { font-size: 28px; }
  .suma-choices-row { gap: 12px; padding: 10px 12px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .suma-choice-btn { animation: none !important; }
}


/* ── Modo compacto ────────────────────────────────────────────────────── */
@media (max-width: 860px), (max-height: 720px) {
  .mola-world { padding: 12px; }
  .mola-stage { min-height: 280px; }
  .mola-btn { min-width: 60px; min-height: 60px; font-size: 17px; padding: 10px 16px; }
  .mola-hub-title { font-size: 24px; }
}

@media (max-width: 560px) {
  .mola-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ==========================================================
   Resta con Globos — Feria al Aire Libre
   ========================================================== */
.resta-stage {
  background: linear-gradient(180deg, #2E6E9E 0%, #1B4560 100%) !important;
  border: 4px solid #1B1033 !important;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35), 0 16px 32px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 !important;
  gap: 0;
  position: relative;
  min-height: 460px;
  overflow: hidden;
  transition: box-shadow .3s ease, border-color .3s ease;
}

.resta-canvas {
  flex: 1;
  width: 100%;
  min-height: 300px;
}

.resta-stage.resta-overshoot-flash {
  border-color: #EF4444 !important;
  box-shadow: inset 0 0 90px rgba(239, 68, 68, 0.55), 0 0 40px rgba(239, 68, 68, 0.45);
}
.resta-stage.resta-overshoot-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(239, 68, 68, 0.22);
  animation: restaFlash .62s ease-out;
  pointer-events: none;
  z-index: 4;
}
@keyframes restaFlash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

.resta-round-pill {
  margin-left: auto;
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 13px;
  color: #FFF7E8;
  background: rgba(27, 16, 51, 0.7);
  border: 2px solid rgba(255, 232, 170, 0.6);
  border-radius: 999px;
  padding: 4px 14px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ── Cartel de la meta, colgado sobre la feria ────────────────────────── */
.resta-goal-panel {
  position: absolute;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: stretch;
  gap: 0;
  background: linear-gradient(180deg, #FFF6E0 0%, #F4D9A4 100%);
  border: 3px solid #7A4718;
  border-radius: 16px;
  padding: 6px 4px;
  box-shadow: 0 7px 0 #5C3410, 0 12px 20px rgba(0, 0, 0, 0.4);
  animation: restaSignSwing 4s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes restaSignSwing {
  0%, 100% { transform: translateX(-50%) rotate(-1.1deg); }
  50%      { transform: translateX(-50%) rotate(1.1deg); }
}

.resta-goal-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px 16px;
  min-width: 96px;
}

.resta-goal-sep {
  width: 2px;
  background: rgba(122, 71, 24, 0.3);
  border-radius: 2px;
}

.resta-goal-cap {
  font-family: var(--f-body, sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8A5522;
  white-space: nowrap;
}

.resta-goal-num,
.resta-have-num {
  font-family: var(--f-head, sans-serif);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.resta-goal-num {
  color: #C2410C;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
}

.resta-have-num {
  color: #166534;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
}

@media (max-width: 560px) {
  .resta-canvas { min-height: 230px; }
  .resta-goal-panel { top: 44px; padding: 4px 2px; }
  .resta-goal-block { min-width: 74px; padding: 2px 10px; }
  .resta-goal-num, .resta-have-num { font-size: 24px; }
  .resta-goal-cap { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .resta-goal-panel { animation: none !important; transform: translateX(-50%); }
}


/* ==========================================================
   Memoria de Parejas — Mesa de Tejido Mola
   ========================================================== */
.memoria-stage {
  background: linear-gradient(160deg, #24103F 0%, #150726 100%) !important;
  border: 4px solid #6D28D9 !important;
  box-shadow: inset 0 0 60px rgba(124, 58, 237, 0.22), 0 16px 32px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px !important;
  gap: 10px;
  position: relative;
  min-height: 470px;
  overflow: hidden;
  transition: border-color .4s ease, box-shadow .4s ease;
}

/* ── Barra superior: estrellas, avance y contador ─────────────────────── */
.memoria-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  z-index: 2;
}

.memoria-progress {
  flex: 1;
  min-width: 90px;
  height: 12px;
  border-radius: 999px;
  background: rgba(10, 3, 22, 0.55);
  border: 2px solid rgba(255, 224, 138, 0.35);
  overflow: hidden;
}

.memoria-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #FFB020 0%, #FFE08A 50%, #37D67A 100%);
  transition: width .5s cubic-bezier(.34, 1.4, .64, 1);
  position: relative;
  overflow: hidden;
}
.memoria-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .75) 50%, transparent 80%);
  animation: memoriaShine 2.2s linear infinite;
}
@keyframes memoriaShine {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.memoria-pill {
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 13px;
  color: #FFF3C4;
  background: rgba(42, 16, 85, 0.85);
  border: 2px solid rgba(255, 224, 138, 0.55);
  border-radius: 999px;
  padding: 4px 14px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* ── La mesa: paño en canvas con el tablero encima ─────────────────────── */
.memoria-table {
  position: relative;
  flex: 1;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid #120522;
  box-shadow: inset 0 6px 18px rgba(0, 0, 0, .5), 0 6px 0 #120522;
}

.memoria-table-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.memoria-grid {
  position: relative;
  display: grid;
  gap: 12px;
  justify-content: center;
  align-content: center;
  perspective: 900px;
  z-index: 1;
}

/* ── Cartas: el volteo va dentro, el bote y el temblor fuera ───────────── */
.memoria-card {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  animation: memoriaDeal .5s cubic-bezier(.34, 1.5, .64, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
  transition: transform .2s cubic-bezier(.34, 1.5, .64, 1), filter .2s ease;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55));
}

@keyframes memoriaDeal {
  0%   { opacity: 0; transform: translate(-40px, -60px) rotate(-22deg) scale(.7); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}

.memoria-card:hover  { transform: translateY(-7px) scale(1.05); filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .6)) drop-shadow(0 0 16px rgba(255, 224, 138, .45)); }
.memoria-card:active { transform: translateY(-2px) scale(1.01); }
.memoria-card:focus-visible { outline: 3px solid #FFE08A; outline-offset: 4px; border-radius: 16px; }

.memoria-card.is-matched {
  cursor: default;
  animation: memoriaSealed 2s ease-in-out infinite alternate;
}
.memoria-card.is-matched:hover { transform: none; }

@keyframes memoriaSealed {
  from { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)) drop-shadow(0 0 12px rgba(255, 224, 138, .55)); }
  to   { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)) drop-shadow(0 0 28px rgba(255, 224, 138, .95)); }
}

.memoria-card.is-wrong { animation: memoriaShake .42s ease; }
@keyframes memoriaShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px) rotate(-3deg); }
  45% { transform: translateX(6px) rotate(3deg); }
  70% { transform: translateX(-4px) rotate(-2deg); }
}

.memoria-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.4, 1.25, .5, 1);
}
.memoria-card.is-flipped .memoria-card-inner { transform: rotateY(180deg); }

.memoria-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
  overflow: hidden;
}
.memoria-card-face canvas { display: block; width: 100%; height: 100%; }

.memoria-card-back { transform: rotateY(0deg) translateZ(1px); }
.memoria-card-front { transform: rotateY(180deg) translateZ(1px); }

/* Barrido de luz sobre el reverso: la carta parece de tela satinada */
.memoria-card-back::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .3) 48%, transparent 64%);
  transform: translateX(-120%);
  animation: memoriaSheen 4.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 180ms);
  pointer-events: none;
}
@keyframes memoriaSheen {
  0%, 62%  { transform: translateX(-120%); }
  82%, 100% { transform: translateX(120%); }
}

.memoria-card.is-wrong .memoria-card-front::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(239, 68, 68, .35);
  pointer-events: none;
}

/* ── Tira de hallazgos: una casilla por pareja ─────────────────────────── */
.memoria-tray {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  z-index: 2;
}

.memoria-slot {
  width: 56px;
  min-height: 56px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 18px;
  color: rgba(255, 224, 138, .4);
  border: 2px dashed rgba(255, 224, 138, .35);
  background: rgba(10, 3, 22, .35);
  animation: memoriaSlotBreathe 2.6s ease-in-out infinite;
}
.memoria-slot:nth-child(2n) { animation-delay: .4s; }
.memoria-slot:nth-child(3n) { animation-delay: .8s; }

@keyframes memoriaSlotBreathe {
  0%, 100% { border-color: rgba(255, 224, 138, .22); }
  50%      { border-color: rgba(255, 224, 138, .55); }
}

.memoria-slot.is-filled {
  animation: memoriaSlotPop .5s cubic-bezier(.34, 1.56, .64, 1);
  border: 2px solid #FFE08A;
  background: linear-gradient(180deg, rgba(255, 224, 138, .22) 0%, rgba(255, 176, 32, .12) 100%);
  box-shadow: 0 0 16px rgba(255, 224, 138, .45);
}
.memoria-slot.is-filled span {
  font-family: var(--f-body, sans-serif);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #FFF3C4;
  line-height: 1;
}
@keyframes memoriaSlotPop {
  0%   { transform: scale(.5) rotate(-12deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Amanece sobre la mesa al completar el tablero */
.memoria-stage.is-complete {
  border-color: #FFE08A !important;
  box-shadow: inset 0 0 90px rgba(255, 224, 138, .28), 0 16px 32px rgba(0, 0, 0, .3);
}

@media (max-width: 560px) {
  .memoria-stage { min-height: 420px; padding: 8px !important; gap: 8px; }
  .memoria-table { padding: 8px; min-height: 210px; }
  .memoria-grid { gap: 7px; }
  .memoria-pill { font-size: 11px; padding: 3px 10px; }
  .mola-hud-stars { font-size: 20px; }
  .memoria-slot { width: 46px; min-height: 46px; }
  .memoria-slot.is-filled span { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .memoria-card,
  .memoria-card-back::after,
  .memoria-slot,
  .memoria-progress-fill::after {
    animation: none !important;
  }
  .memoria-card { opacity: 1; transform: none; }
  .memoria-card-inner { transition: none; }
}

/* ==========================================================
   ¿Quién Vive Aquí? — Ventanas Vivas a los Hábitats
   ========================================================== */
.qv-stage {
  background: linear-gradient(170deg, #0E3A34 0%, #0A2A28 55%, #08211F 100%) !important;
  border: 4px solid #1B6E4E !important;
  box-shadow: inset 0 0 60px rgba(31, 168, 204, 0.16), 0 16px 32px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px !important;
  gap: 10px;
  position: relative;
  min-height: 490px;
  overflow: hidden;
  transition: border-color .4s ease, box-shadow .4s ease;
}

.qv-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  z-index: 3;
}

.qv-progress {
  flex: 1;
  min-width: 90px;
  height: 12px;
  border-radius: 999px;
  background: rgba(4, 20, 18, 0.6);
  border: 2px solid rgba(127, 231, 242, 0.35);
  overflow: hidden;
}
.qv-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #21C7D0 0%, #7FE7F2 45%, #37D67A 100%);
  transition: width .5s cubic-bezier(.34, 1.4, .64, 1);
  position: relative;
  overflow: hidden;
}
.qv-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .7) 50%, transparent 80%);
  animation: qvShine 2.2s linear infinite;
}
@keyframes qvShine {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.qv-pill {
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 13px;
  color: #E8FFF8;
  background: rgba(8, 40, 36, 0.85);
  border: 2px solid rgba(127, 231, 242, 0.5);
  border-radius: 999px;
  padding: 4px 14px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* ── Las ventanas a cada bioma ─────────────────────────────────────────── */
.qv-habitats {
  display: grid;
  grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr));
  gap: 10px;
  z-index: 2;
}

.qv-zone {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 92px;
  border-radius: 16px;
  overflow: hidden;
  border: 3px solid #08211F;
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, .45), 0 6px 0 #08211F, 0 10px 18px rgba(0, 0, 0, .4);
  cursor: pointer;
  transition: transform .18s cubic-bezier(.34, 1.5, .64, 1), box-shadow .18s ease, border-color .18s ease;
}

.qv-zone-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Cristal: el reflejo que convierte la tarjeta en una ventana */
.qv-zone::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
}

.qv-zone-name {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 12px;
  color: #08211F;
  background: rgba(255, 247, 232, .92);
  border: 2px solid #08211F;
  border-radius: 999px;
  padding: 2px 12px;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(8, 33, 31, .5);
  pointer-events: none;
}

/* Aro que late mientras hay un animal en la mano */
.qv-zone-ring {
  position: absolute;
  inset: 5px;
  border-radius: 12px;
  border: 3px solid transparent;
  pointer-events: none;
  transition: border-color .2s ease;
}
.qv-zone.is-armed .qv-zone-ring {
  border-color: rgba(127, 231, 242, .55);
  animation: qvRing 1.5s ease-in-out infinite;
}
@keyframes qvRing {
  0%, 100% { border-color: rgba(127, 231, 242, .3); }
  50%      { border-color: rgba(127, 231, 242, .9); }
}

.qv-zone:hover,
.qv-zone.hover {
  transform: translateY(-5px) scale(1.03);
  border-color: #7FE7F2;
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, .3), 0 10px 0 #08211F, 0 0 26px rgba(127, 231, 242, .6);
}

.qv-zone.is-correct {
  animation: qvCorrect .7s cubic-bezier(.34, 1.56, .64, 1);
  border-color: #37D67A;
}
@keyframes qvCorrect {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.11) rotate(-1.5deg); }
  100% { transform: scale(1); }
}

.qv-zone.is-wrong {
  animation: molaWiggleNo .48s ease;
  border-color: #EF4444;
}
.qv-zone.is-wrong::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(239, 68, 68, .3);
  z-index: 1;
  pointer-events: none;
}

/* Chispas del acierto */
.qv-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #FFE08A;
  box-shadow: 0 0 10px #FFE08A;
  pointer-events: none;
  z-index: 3;
  animation: qvSpark .95s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes qvSpark {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; }
}

/* ── El escenario donde espera el animal ───────────────────────────────── */
.qv-arena {
  position: relative;
  flex: 1;
  min-height: 168px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 16px;
  overflow: hidden;
  border: 3px solid #08211F;
  box-shadow: inset 0 6px 18px rgba(0, 0, 0, .45);
  background: linear-gradient(180deg, #123E3A 0%, #0C2C2A 100%);
}

.qv-arena-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.qv-animal {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .5));
  animation: qvAnimalIn .45s cubic-bezier(.34, 1.5, .64, 1) both,
             qvAnimalIdle 3.2s ease-in-out .45s infinite;
}
.qv-animal canvas { display: block; }

@keyframes qvAnimalIn {
  0%   { opacity: 0; transform: translateY(26px) scale(.7); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes qvAnimalIdle {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-6px) rotate(1.5deg); }
}

.qv-animal.is-dragging {
  cursor: grabbing;
  animation: none;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .6)) drop-shadow(0 0 20px rgba(127, 231, 242, .55));
  z-index: 30;
}

.qv-animal.is-picked {
  animation: qvPicked .9s ease-in-out infinite;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .5)) drop-shadow(0 0 20px rgba(55, 214, 122, .9));
}
@keyframes qvPicked {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

.qv-animal.is-returning {
  animation: qvReturn .38s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes qvReturn {
  0%   { transform: translateY(-8px) rotate(-6deg); }
  50%  { transform: translateY(0) rotate(5deg); }
  100% { transform: translateY(0) rotate(0); }
}

.qv-animal:focus-visible { outline: 3px solid #7FE7F2; outline-offset: 6px; border-radius: 14px; }

.qv-nameplate {
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 14px;
  color: #08211F;
  background: linear-gradient(180deg, #FFF7E8 0%, #FFE4B0 100%);
  border: 2.5px solid #08211F;
  border-radius: 12px;
  padding: 3px 14px;
  white-space: nowrap;
  box-shadow: 0 4px 0 rgba(8, 33, 31, .55);
}

/* ── Tira de animales ya colocados ─────────────────────────────────────── */
.qv-tray {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  z-index: 2;
}

.qv-slot {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 17px;
  color: rgba(127, 231, 242, .45);
  border: 2px dashed rgba(127, 231, 242, .35);
  background: rgba(4, 20, 18, .4);
  animation: qvSlotBreathe 2.6s ease-in-out infinite;
}
.qv-slot:nth-child(2n) { animation-delay: .4s; }
.qv-slot:nth-child(3n) { animation-delay: .8s; }

@keyframes qvSlotBreathe {
  0%, 100% { border-color: rgba(127, 231, 242, .22); }
  50%      { border-color: rgba(127, 231, 242, .55); }
}

.qv-slot.is-filled {
  animation: qvSlotPop .5s cubic-bezier(.34, 1.56, .64, 1);
  border: 2px solid #37D67A;
  background: linear-gradient(180deg, rgba(55, 214, 122, .22) 0%, rgba(33, 199, 208, .12) 100%);
  box-shadow: 0 0 16px rgba(55, 214, 122, .45);
}
@keyframes qvSlotPop {
  0%   { transform: scale(.5) rotate(-12deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.qv-stage.is-complete {
  border-color: #37D67A !important;
  box-shadow: inset 0 0 90px rgba(55, 214, 122, .26), 0 16px 32px rgba(0, 0, 0, .3);
}

@media (max-width: 560px) {
  .qv-stage { min-height: 440px; padding: 8px !important; gap: 8px; }
  .qv-habitats { gap: 7px; }
  .qv-zone { min-height: 76px; border-radius: 13px; }
  .qv-zone-name { font-size: 10px; padding: 2px 8px; bottom: 4px; }
  .qv-arena { min-height: 140px; }
  .qv-nameplate { font-size: 12px; padding: 2px 10px; }
  .qv-pill { font-size: 11px; padding: 3px 10px; }
  .mola-hud-stars { font-size: 20px; }
  .qv-slot { width: 40px; height: 40px; }
}

/* Con cuatro biomas en pantalla estrecha, dos filas de dos leen mejor que
   cuatro tiras aplastadas. */
@media (max-width: 460px) {
  .qv-habitats { grid-template-columns: repeat(min(var(--n, 2), 2), minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .qv-animal,
  .qv-zone.is-armed .qv-zone-ring,
  .qv-slot,
  .qv-progress-fill::after,
  .qv-spark {
    animation: none !important;
  }
  .qv-animal { opacity: 1; transform: none; }
}

/* ==========================================================
   Mezcla Mágica — Laboratorio de Alquimia Mola
   ========================================================== */
.mz-stage {
  background: linear-gradient(170deg, #241247 0%, #170B2E 55%, #100720 100%) !important;
  border: 4px solid #6D28D9 !important;
  box-shadow: inset 0 0 60px rgba(124, 58, 237, 0.2), 0 16px 32px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px !important;
  gap: 10px;
  position: relative;
  min-height: 500px;
  overflow: hidden;
  transition: border-color .4s ease, box-shadow .4s ease;
}

.mz-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  z-index: 3;
}

.mz-progress {
  flex: 1;
  min-width: 90px;
  height: 12px;
  border-radius: 999px;
  background: rgba(10, 4, 24, 0.6);
  border: 2px solid rgba(190, 150, 255, 0.4);
  overflow: hidden;
}
.mz-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #B06BFF 0%, #21C7D0 50%, #37D67A 100%);
  transition: width .5s cubic-bezier(.34, 1.4, .64, 1);
  position: relative;
  overflow: hidden;
}
.mz-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .75) 50%, transparent 80%);
  animation: mzShine 2.2s linear infinite;
}
@keyframes mzShine {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.mz-pill {
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 13px;
  color: #F3E8FF;
  background: rgba(36, 18, 71, 0.9);
  border: 2px solid rgba(190, 150, 255, 0.55);
  border-radius: 999px;
  padding: 4px 14px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* ── La escena del laboratorio ─────────────────────────────────────────── */
.mz-lab {
  position: relative;
  /* La caja adopta la proporción de la escena virtual (640x340): así el
     lienzo la llena entera y no quedan franjas vacías arriba y abajo en
     pantallas estrechas. */
  width: 100%;
  aspect-ratio: 64 / 34;
  flex: none;
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid #0C0518;
  box-shadow: inset 0 6px 20px rgba(0, 0, 0, .55), 0 6px 0 #0C0518;
}

.mz-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Marcador de gotas vertidas ────────────────────────────────────────── */
.mz-recipe {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 22px;
  z-index: 2;
}

.mz-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px dashed rgba(200, 168, 255, .65);
  background: rgba(46, 26, 88, .7);
  transition: transform .2s ease;
}
.mz-dot.is-filled {
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 0 12px rgba(255, 255, 255, .35), inset 0 -3px 5px rgba(0, 0, 0, .35),
              inset 0 3px 5px rgba(255, 255, 255, .45);
  animation: mzDotPop .42s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes mzDotPop {
  0%   { transform: scale(.2); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Estante de goteros ────────────────────────────────────────────────── */
.mz-shelf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

.mz-shelf-label {
  font-family: var(--f-body, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(243, 232, 255, .8);
}

.mz-drops {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.mz-pipette {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 6px 5px;
  border: 2px solid rgba(190, 150, 255, .35);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(60, 34, 110, .55) 0%, rgba(24, 12, 48, .75) 100%);
  cursor: pointer;
  transition: transform .16s cubic-bezier(.34, 1.5, .64, 1), border-color .16s ease, box-shadow .16s ease;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5));
}
.mz-pipette canvas { display: block; }
.mz-pipette span {
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 12px;
  color: #F3E8FF;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .8);
}

.mz-pipette:hover {
  transform: translateY(-6px) scale(1.05);
  border-color: #C9A6FF;
  box-shadow: 0 0 20px rgba(176, 107, 255, .55);
}
.mz-pipette:active { transform: translateY(-1px) scale(.99); }
.mz-pipette:focus-visible { outline: 3px solid #C9A6FF; outline-offset: 3px; }

.mz-stage.is-complete {
  border-color: #37D67A !important;
  box-shadow: inset 0 0 90px rgba(55, 214, 122, .24), 0 16px 32px rgba(0, 0, 0, .3);
}

@media (max-width: 560px) {
  .mz-stage { min-height: 0; padding: 8px !important; gap: 8px; }
  .mz-pill { font-size: 11px; padding: 3px 10px; }
  .mola-hud-stars { font-size: 20px; }
  .mz-drops { gap: 6px; }
  .mz-pipette { padding: 3px 4px 4px; border-radius: 11px; }
  .mz-pipette span { font-size: 10px; }
  .mz-dot { width: 15px; height: 15px; }
  .mz-shelf-label { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .mz-progress-fill::after,
  .mz-dot.is-filled {
    animation: none !important;
  }
}

/* ==========================================================
   Mercado Ñam-Ñam — Puesto de Mercado Panameño
   ========================================================== */
.me-stage {
  background: linear-gradient(170deg, #4A2C12 0%, #33200C 55%, #241505 100%) !important;
  border: 4px solid #8A5426 !important;
  box-shadow: inset 0 0 60px rgba(255, 176, 32, 0.14), 0 16px 32px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px !important;
  gap: 10px;
  position: relative;
  min-height: 480px;
  overflow: hidden;
  transition: border-color .4s ease, box-shadow .4s ease;
}

.me-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  z-index: 3;
  /* Bajo el toldo y los banderines, que ocupan la franja alta del lienzo */
  margin-top: 92px;
}

.me-progress {
  flex: 1;
  min-width: 90px;
  height: 12px;
  border-radius: 999px;
  background: rgba(30, 14, 4, 0.6);
  border: 2px solid rgba(255, 210, 130, 0.4);
  overflow: hidden;
}
.me-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #FF5A5F 0%, #FFB020 50%, #37D67A 100%);
  transition: width .5s cubic-bezier(.34, 1.4, .64, 1);
  position: relative;
  overflow: hidden;
}
.me-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .75) 50%, transparent 80%);
  animation: meShine 2.2s linear infinite;
}
@keyframes meShine {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.me-pill {
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 13px;
  color: #FFF3D6;
  background: rgba(74, 44, 18, 0.9);
  border: 2px solid rgba(255, 210, 130, 0.55);
  border-radius: 999px;
  padding: 4px 14px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* ── Fila de canastas rotuladas ────────────────────────────────────────── */
.me-baskets {
  display: grid;
  /* Reto llega a 11 sílabas: como mucho seis por fila, o quedan tiras
     aplastadas. Y con solo dos letras, las canastas no se vuelven enormes. */
  grid-template-columns: repeat(min(var(--n, 4), 6), minmax(0, 1fr));
  gap: 8px;
  justify-items: center;
  z-index: 2;
}

.me-basket {
  position: relative;
  width: 100%;
  max-width: 130px;
  aspect-ratio: 1 / 0.86;
  min-height: 74px;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.34, 1.5, .64, 1), filter .18s ease;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5));
}

.me-basket-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.me-basket-ring {
  position: absolute;
  inset: 8% 6% 4%;
  border-radius: 14px;
  border: 3px solid transparent;
  pointer-events: none;
  transition: border-color .2s ease;
}
.me-basket.is-armed .me-basket-ring {
  border-color: rgba(255, 224, 138, .5);
  animation: meRing 1.5s ease-in-out infinite;
}
@keyframes meRing {
  0%, 100% { border-color: rgba(255, 224, 138, .25); }
  50%      { border-color: rgba(255, 224, 138, .9); }
}

.me-basket:hover,
.me-basket.hover {
  transform: translateY(-6px) scale(1.05);
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(255, 224, 138, .7));
}

.me-basket.is-correct {
  animation: meCorrect .7s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes meCorrect {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.13) rotate(-2deg); }
  100% { transform: scale(1); }
}

.me-basket.is-wrong { animation: molaWiggleNo .48s ease; }

.me-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #FFE08A;
  box-shadow: 0 0 10px #FFE08A;
  pointer-events: none;
  z-index: 3;
  animation: meSpark .95s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes meSpark {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; }
}

/* ── El mostrador donde espera el producto ─────────────────────────────── */
/* El decorado del puesto cubre TODA la escena: el toldo va arriba del todo,
   no debajo de las canastas. */
.me-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.me-counter {
  position: relative;
  flex: 1;
  min-height: 168px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 2;
}

.me-item {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .5));
  animation: meItemIn .45s cubic-bezier(.34, 1.5, .64, 1) both,
             meItemIdle 3.2s ease-in-out .45s infinite;
}
.me-item canvas { display: block; }

@keyframes meItemIn {
  0%   { opacity: 0; transform: translateY(26px) scale(.7); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes meItemIdle {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-6px) rotate(1.5deg); }
}

.me-item.is-dragging {
  cursor: grabbing;
  animation: none;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .6)) drop-shadow(0 0 20px rgba(255, 224, 138, .6));
  z-index: 30;
}

.me-item.is-picked {
  animation: mePicked .9s ease-in-out infinite;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .5)) drop-shadow(0 0 20px rgba(255, 176, 32, .95));
}
@keyframes mePicked {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

.me-item.is-returning { animation: meReturn .38s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes meReturn {
  0%   { transform: translateY(-8px) rotate(-6deg); }
  50%  { transform: translateY(0) rotate(5deg); }
  100% { transform: translateY(0) rotate(0); }
}

.me-item:focus-visible { outline: 3px solid #FFE08A; outline-offset: 6px; border-radius: 14px; }

.me-nameplate {
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 15px;
  color: #3A2008;
  background: linear-gradient(180deg, #FFF7E8 0%, #FFE0A8 100%);
  border: 2.5px solid #3A2008;
  border-radius: 12px;
  padding: 3px 14px;
  white-space: nowrap;
  box-shadow: 0 4px 0 rgba(58, 32, 8, .55);
}

.me-stage.is-complete {
  border-color: #FFB020 !important;
  box-shadow: inset 0 0 90px rgba(255, 176, 32, .26), 0 16px 32px rgba(0, 0, 0, .3);
}

@media (max-width: 560px) {
  .me-stage { min-height: 430px; padding: 8px !important; gap: 8px; }
  .me-topbar { margin-top: 66px; }
  .me-baskets { gap: 6px; }
  .me-basket { min-height: 58px; }
  .me-counter { min-height: 132px; }
  .me-nameplate { font-size: 13px; padding: 2px 10px; }
  .me-pill { font-size: 11px; padding: 3px 10px; }
  .mola-hud-stars { font-size: 20px; }
}

/* Con muchas letras en pantalla estrecha, dos filas leen mejor que una tira
   de canastas aplastadas. */
@media (max-width: 620px) {
  .me-baskets { grid-template-columns: repeat(min(var(--n, 4), 4), minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .me-baskets { grid-template-columns: repeat(min(var(--n, 4), 3), minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .me-item,
  .me-basket.is-armed .me-basket-ring,
  .me-progress-fill::after,
  .me-spark {
    animation: none !important;
  }
  .me-item { opacity: 1; transform: none; }
}

/* ==========================================================
   Eco de la Selva — Claro de Selva con Tótems de Piedra
   ========================================================== */
.es-stage {
  background: linear-gradient(170deg, #0A2A1E 0%, #072016 60%, #04150E 100%) !important;
  border: 4px solid #1F7A52 !important;
  box-shadow: inset 0 0 60px rgba(55, 214, 122, 0.16), 0 16px 32px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px !important;
  gap: 10px;
  position: relative;
  min-height: 490px;
  overflow: hidden;
  transition: border-color .4s ease, box-shadow .4s ease;
}

.es-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.es-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  z-index: 3;
}

.es-progress {
  flex: 1;
  min-width: 90px;
  height: 12px;
  border-radius: 999px;
  background: rgba(4, 20, 12, 0.65);
  border: 2px solid rgba(127, 240, 170, 0.4);
  overflow: hidden;
}
.es-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #FFC93C 0%, #37D67A 55%, #21C7D0 100%);
  transition: width .5s cubic-bezier(.34, 1.4, .64, 1);
  position: relative;
  overflow: hidden;
}
.es-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .7) 50%, transparent 80%);
  animation: esShine 2.2s linear infinite;
}
@keyframes esShine {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.es-pill {
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 13px;
  color: #E8FFF0;
  background: rgba(8, 42, 26, 0.9);
  border: 2px solid rgba(127, 240, 170, 0.5);
  border-radius: 999px;
  padding: 4px 14px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* ── Aviso de turno ────────────────────────────────────────────────────── */
.es-turn {
  align-self: center;
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 16px;
  text-align: center;
  border-radius: 16px;
  padding: 7px 20px;
  border: 3px solid;
  z-index: 3;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.es-turn.is-listen { background: rgba(8, 42, 26, .92); color: #DFF7E6; border-color: #37D67A; }
.es-turn.is-you    { background: #37D67A; color: #06301C; border-color: #DFF7E6; animation: esTurnPop .45s cubic-bezier(.34,1.56,.64,1); }
.es-turn.is-win    { background: #FFC93C; color: #4A2A00; border-color: #FFF3D0; }
.es-turn.is-again  { background: rgba(120, 40, 40, .95); color: #FFE0E0; border-color: #FF8A8A; }

@keyframes esTurnPop {
  0%   { transform: scale(.85); }
  100% { transform: scale(1); }
}

/* ── Marcador de pasos del eco ─────────────────────────────────────────── */
.es-steps {
  display: flex;
  gap: 7px;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 16px;
  z-index: 3;
}

.es-step {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(127, 240, 170, .45);
  background: rgba(4, 20, 12, .6);
  transition: transform .2s ease, box-shadow .2s ease;
}
.es-step.is-active {
  transform: scale(1.5);
  border-color: #FFF3D0;
  background: #FFC93C;
  box-shadow: 0 0 14px #FFC93C;
}
.es-step.is-done {
  border-color: rgba(255, 255, 255, .8);
  box-shadow: 0 0 10px rgba(255, 255, 255, .5);
}

/* ── Tótems de piedra ──────────────────────────────────────────────────── */
.es-totems {
  display: grid;
  grid-template-columns: repeat(min(var(--n, 3), 5), minmax(0, 1fr));
  gap: 10px;
  justify-items: center;
  align-content: end;
  align-items: end;
  flex: 1;
  z-index: 2;
}

.es-totem {
  position: relative;
  width: 100%;
  max-width: 132px;
  /* Sin altura propia: con height 100% el tótem se estiraba a la altura de la
     fila del grid y en móvil, con dos filas, medía más de mil píxeles. */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .16s cubic-bezier(.34, 1.5, .64, 1), filter .16s ease;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55));
}

.es-totem-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.2;
  pointer-events: none;
}

.es-totem-name {
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 12px;
  color: #06301C;
  background: linear-gradient(180deg, #F0FFF5 0%, #B9EFCC 100%);
  border: 2px solid #06301C;
  border-radius: 999px;
  padding: 2px 8px;
  margin: 2px auto 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(6, 48, 28, .55);
}

.es-totem:hover  { transform: translateY(-5px) scale(1.03); }
.es-totem:active { transform: translateY(-1px) scale(.99); }
.es-totem:focus-visible { outline: 3px solid var(--gem, #37D67A); outline-offset: 5px; border-radius: 16px; }

.es-totem.is-singing {
  transform: translateY(-10px) scale(1.06);
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .6)) drop-shadow(0 0 26px var(--gem, #37D67A));
}

.es-totem.is-wrong { animation: molaWiggleNo .5s ease; }

.es-stage.is-complete {
  border-color: #FFC93C !important;
  box-shadow: inset 0 0 90px rgba(255, 201, 60, .24), 0 16px 32px rgba(0, 0, 0, .3);
}

@media (max-width: 560px) {
  .es-stage { min-height: 440px; padding: 8px !important; gap: 8px; }
  .es-turn { font-size: 13px; padding: 5px 12px; }
  .es-totems { gap: 6px; }
  .es-totem-name { font-size: 10px; padding: 2px 6px; }
  .es-pill { font-size: 11px; padding: 3px 10px; }
  .mola-hud-stars { font-size: 20px; }
  .es-step { width: 11px; height: 11px; }
}

/* Con cinco animales en pantalla estrecha, tres por fila leen mejor que
   cinco tótems aplastados. */
@media (max-width: 430px) {
  .es-totems { grid-template-columns: repeat(min(var(--n, 3), 3), minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .es-progress-fill::after,
  .es-turn.is-you {
    animation: none !important;
  }
}

/* ==========================================================
   Atrapaluces — Noche Tropical
   ========================================================== */
.al-stage {
  background: #070A1E !important;
  border: 4px solid #2A3A6E !important;
  box-shadow: inset 0 0 60px rgba(120, 200, 255, 0.12), 0 16px 32px rgba(0, 0, 0, 0.35);
  position: relative;
  padding: 0 !important;
  min-height: 460px;
  overflow: hidden;
  display: block;
  transition: border-color .4s ease, box-shadow .4s ease;
}

.al-canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 460px;
  cursor: pointer;
  touch-action: manipulation;
}

.al-topbar {
  position: absolute;
  top: 12px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
  z-index: 4;
}

.mola-hud-stars { filter: drop-shadow(0 2px 8px rgba(255, 176, 32, .8)); }

/* ── Cartel de la meta ─────────────────────────────────────────────────── */
.al-goal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 5px 18px 7px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20, 14, 42, .92) 0%, rgba(10, 8, 26, .95) 100%);
  border: 3px solid #FFD84A;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55), inset 0 0 18px rgba(255, 216, 74, .18);
  transition: border-color .3s ease, box-shadow .3s ease;
}

.al-goal-cap {
  font-family: var(--f-body, sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #FFE9A8;
}

.al-goal-num {
  font-family: var(--f-head, sans-serif);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  color: #FFD84A;
  text-shadow: 0 0 16px rgba(255, 216, 74, .8);
}

.al-goal.is-match {
  border-color: #7CF5C4;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55), 0 0 26px rgba(124, 245, 196, .7);
  animation: alGoalMatch 1.4s ease-in-out infinite;
}
.al-goal.is-match .al-goal-num { color: #7CF5C4; text-shadow: 0 0 16px rgba(124, 245, 196, .9); }

@keyframes alGoalMatch {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* ── Botón de cerrar el frasco ─────────────────────────────────────────── */
.al-done {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 17px;
  color: #2A1A00;
  background: linear-gradient(180deg, #FFE9A8 0%, #FFB020 100%);
  border: 3px solid #6B4200;
  border-radius: 999px;
  padding: 9px 26px;
  cursor: pointer;
  box-shadow: 0 6px 0 #A56A00, 0 12px 22px rgba(0, 0, 0, .5);
  transition: transform .15s cubic-bezier(.34, 1.5, .64, 1), box-shadow .15s ease, filter .3s ease;
  filter: saturate(.55) brightness(.8);
}
.al-done-ico { font-size: 20px; }

.al-done.is-ready {
  filter: none;
  animation: alDoneBreathe 2.4s ease-in-out infinite;
}
@keyframes alDoneBreathe {
  0%, 100% { box-shadow: 0 6px 0 #A56A00, 0 12px 22px rgba(0, 0, 0, .5); }
  50%      { box-shadow: 0 6px 0 #A56A00, 0 12px 22px rgba(0, 0, 0, .5), 0 0 26px rgba(255, 216, 74, .75); }
}

.al-done:hover  { transform: translateX(-50%) translateY(-3px) scale(1.04); }
.al-done:active { transform: translateX(-50%) translateY(3px); box-shadow: 0 2px 0 #A56A00, 0 6px 12px rgba(0, 0, 0, .5); }
.al-done:focus-visible { outline: 3px solid #FFF7E8; outline-offset: 4px; }

/* Aviso de que el número no cuadra */
.al-stage.is-wrong {
  border-color: #EF4444 !important;
  box-shadow: inset 0 0 90px rgba(239, 68, 68, .35), 0 16px 32px rgba(0, 0, 0, .35);
}
.al-stage.is-wrong::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(239, 68, 68, .16);
  animation: alFlash .6s ease-out;
  pointer-events: none;
  z-index: 3;
}
@keyframes alFlash {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.al-stage.is-complete {
  border-color: #7CF5C4 !important;
  box-shadow: inset 0 0 90px rgba(124, 245, 196, .22), 0 16px 32px rgba(0, 0, 0, .35);
}

@media (max-width: 560px) {
  .al-stage, .al-canvas { min-height: 400px; }
  .al-topbar { top: 8px; left: 10px; right: 10px; }
  .al-goal { padding: 4px 12px 5px; border-radius: 13px; }
  .al-goal-num { font-size: 26px; }
  .al-goal-cap { font-size: 9px; }
  .mola-hud-stars { font-size: 20px; }
  .al-done { font-size: 14px; padding: 7px 18px; bottom: 12px; }
  .al-done-ico { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .al-goal.is-match,
  .al-done.is-ready,
  .al-stage.is-wrong::after {
    animation: none !important;
  }
}

/* ==========================================================
   Balanza Bamba — Taller de Pesas
   ========================================================== */
.ba-stage {
  background: #120E24 !important;
  border: 4px solid #4A3A7A !important;
  box-shadow: inset 0 0 60px rgba(124, 77, 255, 0.16), 0 16px 32px rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px !important;
  gap: 10px;
  position: relative;
  min-height: 490px;
  overflow: hidden;
  transition: border-color .4s ease, box-shadow .4s ease;
}

.ba-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.ba-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  z-index: 3;
}

.ba-progress {
  flex: 1;
  min-width: 90px;
  height: 12px;
  border-radius: 999px;
  background: rgba(8, 4, 20, 0.65);
  border: 2px solid rgba(255, 217, 138, 0.4);
  overflow: hidden;
}
.ba-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8B5CF6 0%, #F0B840 55%, #7CF5C4 100%);
  transition: width .5s cubic-bezier(.34, 1.4, .64, 1);
  position: relative;
  overflow: hidden;
}
.ba-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .7) 50%, transparent 80%);
  animation: baShine 2.2s linear infinite;
}
@keyframes baShine {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.ba-pill {
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 13px;
  color: #FFF3D6;
  background: rgba(30, 20, 58, 0.9);
  border: 2px solid rgba(255, 217, 138, 0.5);
  border-radius: 999px;
  padding: 4px 14px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* ── Aviso de estado de la balanza ─────────────────────────────────────── */
.ba-status {
  align-self: center;
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 15px;
  text-align: center;
  border-radius: 16px;
  padding: 7px 20px;
  border: 3px solid;
  z-index: 3;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.ba-status.is-low  { background: rgba(30, 20, 58, .92); color: #FFE9C7; border-color: #F0B840; }
.ba-status.is-high { background: rgba(70, 24, 30, .92); color: #FFD8D8; border-color: #FF8A8A; }
.ba-status.is-ok   { background: #7CF5C4; color: #06301C; border-color: #E8FFF4; animation: baOkPop .45s cubic-bezier(.34,1.56,.64,1); }

@keyframes baOkPop {
  0%   { transform: scale(.86); }
  100% { transform: scale(1); }
}

/* ── Botonera de pesas ─────────────────────────────────────────────────── */
.ba-controls {
  margin-top: auto;
  display: flex;
  gap: 16px;
  justify-content: center;
  z-index: 3;
}

.ba-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 18px;
  padding: 11px 26px;
  border-radius: 18px;
  border: 3px solid;
  cursor: pointer;
  transition: transform .14s cubic-bezier(.34, 1.5, .64, 1), box-shadow .14s ease, filter .2s ease;
}

.ba-btn-sign {
  font-size: 26px;
  line-height: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .35);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .25);
}

.ba-btn-plus {
  color: #4A2A00;
  background: linear-gradient(180deg, #FFE9A8 0%, #F0A81E 100%);
  border-color: #6B4200;
  box-shadow: 0 6px 0 #A56A00, 0 12px 20px rgba(0, 0, 0, .5);
}
.ba-btn-minus {
  color: #4A0A0A;
  background: linear-gradient(180deg, #FFC4C4 0%, #EF5350 100%);
  border-color: #6B1414;
  box-shadow: 0 6px 0 #A32020, 0 12px 20px rgba(0, 0, 0, .5);
}

.ba-btn:hover:not(:disabled)  { transform: translateY(-3px) scale(1.04); }
.ba-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 currentColor, 0 5px 10px rgba(0, 0, 0, .5); }
.ba-btn:focus-visible { outline: 3px solid #FFF7E8; outline-offset: 4px; }

.ba-btn:disabled {
  cursor: default;
  filter: grayscale(.7) brightness(.62);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
}

/* Fogonazo al quedar nivelada */
.ba-stage.is-level {
  border-color: #7CF5C4 !important;
  box-shadow: inset 0 0 90px rgba(124, 245, 196, .3), 0 16px 32px rgba(0, 0, 0, .32);
}

.ba-stage.is-complete {
  border-color: #F0B840 !important;
  box-shadow: inset 0 0 90px rgba(240, 184, 64, .26), 0 16px 32px rgba(0, 0, 0, .32);
}

@media (max-width: 560px) {
  .ba-stage { min-height: 430px; padding: 8px !important; gap: 8px; }
  .ba-status { font-size: 13px; padding: 5px 12px; }
  .ba-pill { font-size: 11px; padding: 3px 10px; }
  .mola-hud-stars { font-size: 20px; }
  .ba-controls { gap: 10px; }
  .ba-btn { font-size: 15px; padding: 9px 16px; gap: 7px; border-radius: 15px; }
  .ba-btn-sign { font-size: 21px; width: 25px; height: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .ba-progress-fill::after,
  .ba-status.is-ok {
    animation: none !important;
  }
}