/* =========================================
   PLAYCLASS PWA — PANTALLAS FULLSCREEN
   ========================================= */

/* ── SORI CSS PURO ─────────────────────── */
.sori-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sori-scene {
  position: relative;
  width: 140px;
  height: 160px;
}

/* Cuerpo principal */
.sori-body {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 70px;
  background: linear-gradient(145deg, #6c7cff, #5b6cff);
  border-radius: 16px 16px 20px 20px;
  box-shadow: 0 8px 0 #3d4ae0, 0 12px 25px rgba(91,108,255,0.35);
  z-index: 2;
}

.sori-body::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 10px;
  right: 10px;
  height: 12px;
  background: linear-gradient(145deg, #5b6cff, #3d4ae0);
  border-radius: 0 0 10px 10px;
}

/* Brazos */
.sori-arm-left,
.sori-arm-right {
  position: absolute;
  top: 72px;
  width: 18px;
  height: 40px;
  background: linear-gradient(145deg, #7a8cff, #5b6cff);
  border-radius: 10px;
  z-index: 1;
  box-shadow: 0 4px 0 #3d4ae0;
}

.sori-arm-left {
  left: -10px;
  transform-origin: top center;
  animation: armSwing 3s ease-in-out infinite;
}

.sori-arm-right {
  right: -10px;
  transform-origin: top center;
  animation: armSwing 3s ease-in-out infinite 0.5s;
}

@keyframes armSwing {
  0%, 100% { transform: rotate(8deg); }
  50% { transform: rotate(-8deg); }
}

/* Manos */
.sori-arm-left::after,
.sori-arm-right::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: #ffca28;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Cabeza */
.sori-head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 75px;
  background: linear-gradient(160deg, #8a9cff, #5b6cff);
  border-radius: 50% 50% 45% 45%;
  z-index: 3;
  box-shadow: 0 6px 0 #3d4ae0, 0 10px 25px rgba(91,108,255,0.25);
}

/* Pantalla facial */
.sori-face {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 32px;
  background: #1a1a2e;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
}

/* Ojos */
.sori-eyes {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-top: 8px;
}

.sori-eye {
  width: 10px;
  height: 14px;
  background: #4ade80;
  border-radius: 50%;
  animation: blink 4s ease-in-out infinite;
}

.sori-eye.right {
  animation-delay: 0.1s;
}

@keyframes blink {
  0%, 44%, 48%, 52%, 56%, 100% { transform: scaleY(1); }
  46%, 50%, 54% { transform: scaleY(0.1); background: #22c55e; }
}

/* Boca */
.sori-mouth {
  display: flex;
  justify-content: center;
  gap: 3px;
  padding-top: 3px;
}

.sori-mouth-dot {
  width: 4px;
  height: 4px;
  background: #4ade80;
  border-radius: 50%;
}

.sori-mouth-dot:nth-child(2) { animation: mouthTalk 0.4s ease infinite alternate; }
.sori-mouth-dot:nth-child(3) { animation: mouthTalk 0.4s ease infinite alternate 0.1s; }
.sori-mouth-dot:nth-child(4) { animation: mouthTalk 0.4s ease infinite alternate 0.2s; }

@keyframes mouthTalk {
  0% { transform: scaleY(1); }
  100% { transform: scaleY(2.5); background: #22c55e; }
}

/* Antena */
.sori-antenna {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 16px;
  background: #ffca28;
  border-radius: 2px;
}

.sori-antenna::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: #ffca28;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 202, 40, 0.6);
  animation: antennaGlow 2s ease-in-out infinite;
}

@keyframes antennaGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 202, 40, 0.4); }
  50% { box-shadow: 0 0 20px rgba(255, 202, 40, 0.8); }
}

/* Sori Estados */
.sori-body.wave {
  animation: soriWave 0.8s ease;
}

.sori-body.celebrate {
  animation: soriCelebrate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 3;
}

.sori-body.talking {
  animation: soriTalk 0.3s ease infinite alternate;
}

@keyframes soriWave {
  0% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-50%) rotate(-5deg); }
  50% { transform: translateX(-50%) rotate(5deg); }
  75% { transform: translateX(-50%) rotate(-3deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}

@keyframes soriCelebrate {
  0% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-25px) scale(1.1); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes soriTalk {
  0% { transform: translateX(-50%) translateY(0); }
  100% { transform: translateX(-50%) translateY(-4px); }
}

/* Sori Bubble */
.sori-bubble {
  margin-top: 10px;
  background: white;
  padding: 12px 18px;
  border-radius: 20px 20px 20px 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #18233f;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  max-width: 260px;
  text-align: center;
  line-height: 1.4;
  border: 2px solid rgba(91,108,255,0.1);
  transition: opacity 0.3s, transform 0.3s;
}


/* ── SPLASH ─────────────────────────────── */
#screen-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #1e0033;
}

#screen-splash.exit {
  opacity: 0;
  pointer-events: none;
}

/* ── FIX: evitar flash blanco antes del splash en móvil ── */
@media (max-width: 767px) {
  #app { display: none !important; }
}

.splash-video-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  background: #1e0033;
}

.splash-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

.splash-loader-track {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 72%;
  max-width: 340px;
  height: 16px;
  background: rgba(91, 30, 130, 0.5);
  border-radius: 16px;
  overflow: hidden;
  z-index: 10;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 0 12px rgba(124,58,237,0.15);
}

.splash-loader-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff4fa3, #d946ef, #7c3aed, #3b82f6);
  background-size: 200% 100%;
  border-radius: 10px;
  animation: splashLoad 3.5s ease-in-out forwards, shimmer 1.5s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(212, 70, 239, 0.5), 0 0 28px rgba(124, 58, 237, 0.2);
}

@keyframes shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes splashLoad {
  0% { width: 0%; }
  40% { width: 40%; }
  70% { width: 75%; }
  85% { width: 88%; }
  100% { width: 96%; }
}

/* ── SEGUNDO SPLASH: ZORI ──────────────── */
#screen-loading {
  position: fixed; inset: 0; z-index: 99998;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1e0033, #5b21b6, #be185d);
}
/* Ocultar botón de instalación en todas las pantallas excepto login */
#pwaTopInstall:not(.show-on-login) { display: none !important; }
#pwaTopInstall.show-on-login { display: flex !important; }

.loading-bg {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}

/* Partículas de fondo */
.loading-particles::before,
.loading-particles::after {
  content: "✦ ✧ ★ ✦ ✧ ★ ✦ ✧";
  position: absolute; font-size: 1.2rem; color: rgba(251,191,36,0.15);
  animation: particlesDrift 20s linear infinite;
  pointer-events: none;
}
.loading-particles::before { top: -10%; left: -10%; animation-delay: 0s; }
.loading-particles::after { bottom: -10%; right: -10%; animation-delay: -10s; font-size: 0.8rem; }

@keyframes particlesDrift {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-100vh) rotate(360deg); }
}

/* Zori character */
.loading-zori {
  margin-bottom: 10px;
  z-index: 2;
}
.zori-character {
  width: 260px; height: auto; max-height: 380px;
  animation: zoriFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 10px 30px rgba(124,58,237,0.3));
}

@keyframes zoriFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

/* Globo de diálogo */
.speech-bubble {
  background: white; border-radius: 16px; padding: 10px 14px;
  max-width: 220px; width: 75%; text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  position: relative; z-index: 2;
  margin-bottom: 6px;
}
.speech-bubble::after {
  content: ""; position: absolute; bottom: -10px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid white;
}

.speech-line {
  font-family: "Fredoka One", sans-serif;
  font-size: 0.78rem; font-weight: 700; color: #1e293b;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  line-height: 1.4; margin-bottom: 4px;
}
.speech-line:last-child { margin-bottom: 0; }
.speech-line.visible { opacity: 1; transform: translateY(0); }

/* Logo y tagline */
.loading-logo {
  font-family: "Fredoka One", sans-serif;
  font-size: 1.8rem; color: white; text-align: center;
  opacity: 0; transition: opacity 0.6s ease;
  text-shadow: 0 4px 20px rgba(79,70,229,0.5);
  z-index: 2; margin-top: 6px;
}
.loading-logo.visible { opacity: 1; }

.loading-tagline {
  font-size: 0.9rem; color: #fbcfe8; text-align: center;
  opacity: 0; transition: opacity 0.6s ease;
  z-index: 2; margin-top: 2px;
}
.loading-tagline.visible { opacity: 1; }

/* ── ZORI EN LOGIN ──────────────────────── */
.login-zori {
  margin-bottom: 8px; text-align: center;
}
.login-zori-img {
  width: 220px; height: auto; max-height: 260px;
  display: block; margin: 0 auto;
  filter: drop-shadow(0 0 20px rgba(124,58,237,0.25));
}
.zori-bubble {
  background: white; border-radius: 16px; padding: 8px 16px;
  display: inline-block; margin-bottom: 10px;
  font-size: 0.85rem; font-weight: 700; color: #475569;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/* ── PANTALLAS FULL ─────────────────────── */
.pwa-screen {
  position: fixed;
  inset: 0;
  z-index: 90000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: scale(0.96);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pwa-screen.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.pwa-screen.exit-left {
  transform: translateX(-30px);
  opacity: 0;
}

/* ── LOGIN SCREEN ───────────────────────── */
.screen-login {
  background: linear-gradient(160deg, #0f0c29, #302b63, #24243e);
  justify-content: center;
  align-items: center;
  padding: 30px 24px;
}

.login-content {
  text-align: center;
  max-width: 360px;
  width: 100%;
}

.login-content h2 {
  font-family: "Fredoka One", sans-serif;
  font-size: 1.8rem;
  color: white;
  margin: 20px 0 8px;
}

.login-content p {
  color: #a5b4fc;
  font-size: 0.95rem;
  margin-bottom: 28px;
  line-height: 1.5;
}

.login-sori {
  margin: 0 auto;
}

.btn-pwa {
  display: block;
  width: 100%;
  padding: 16px 24px;
  border-radius: 18px;
  font-weight: 800;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  margin-bottom: 12px;
  text-align: center;
}

.btn-pwa:active {
  transform: scale(0.97);
}

.btn-pwa-primary {
  background: linear-gradient(135deg, #5b6cff, #7a5cff);
  color: white;
  box-shadow: 0 8px 24px rgba(91,108,255,0.35);
}

.btn-pwa-secondary {
  background: rgba(255,255,255,0.1);
  color: white;
  border: 2px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
}

.btn-pwa-ghost {
  background: transparent;
  color: #a5b4fc;
  font-size: 0.9rem;
}

/* ── MAPA DE AVENTURA ───────────────────── */
.screen-map {
  background: linear-gradient(180deg, #0f0c29 0%, #1a1a4e 30%, #302b63 70%, #24243e 100%);
  justify-content: flex-start;
  align-items: center;
  padding: 20px 20px 45px;
  position: relative;
  overflow-y: auto;
}

.map-content {
  text-align: center;
  max-width: 400px;
  width: 100%;
}

.map-zori {
  text-align: center;
  margin-bottom: 4px;
}
.map-zori-img {
  width: 90px; height: auto;
  display: block; margin: 0 auto;
  filter: drop-shadow(0 0 15px rgba(124,58,237,0.2));
}
.map-zori-bubble {
  margin-bottom: 6px;
  padding: 6px 12px !important;
  font-size: 0.85rem !important;
}

.map-greeting {
  font-family: "Fredoka One", sans-serif;
  font-size: 1.2rem;
  color: white;
  margin-bottom: 2px;
}

.map-sub {
  font-size: 0.8rem;
  color: #a5b4fc;
  margin-bottom: 8px;
}

/* Islas flotantes decorativas */
.map-islands-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.map-island-deco {
  position: absolute;
  font-size: 3rem;
  opacity: 0.15;
  animation: islandFloat 6s ease-in-out infinite;
}

.map-island-deco:nth-child(1) { top: 5%; left: 5%; animation-delay: 0s; }
.map-island-deco:nth-child(2) { top: 12%; right: 8%; animation-delay: 2s; }
.map-island-deco:nth-child(3) { bottom: 18%; left: 10%; animation-delay: 4s; }
.map-island-deco:nth-child(4) { bottom: 8%; right: 5%; animation-delay: 1s; }
.map-island-deco:nth-child(5) { top: 30%; left: 50%; animation-delay: 3s; }

@keyframes islandFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(3deg); }
}

/* Mundos */
.map-worlds {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  position: relative;
}

/* Flecha guía animada */
.map-guide-arrow {
  position: absolute;
  right: -10px;
  font-size: 2rem;
  z-index: 10;
  pointer-events: none;
  transition: top 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: guideBounce 0.8s ease-in-out infinite;
  will-change: top;
  opacity: 0;
  transform: scale(0.5);
  transition: top 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s, transform 0.3s;
}
.map-guide-arrow.active {
  opacity: 1;
  transform: scale(1);
}
@keyframes guideBounce {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(7px); }
}
.map-guide-arrow.active {
  animation: guideBounce 0.8s ease-in-out infinite;
}
@keyframes guidePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(251,191,36,0); }
}
.guide-highlight {
  animation: guidePulse 1s ease-in-out 2;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 20px rgba(251,191,36,0.2) !important;
}

.world-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.25s;
  font-family: inherit;
  text-align: left;
  position: relative;
  overflow: hidden;
  height: 78px;
  box-sizing: border-box;
}

.world-btn:active {
  transform: scale(0.97);
}

.world-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background: white;
}

.world-icon {
  font-size: 1.45rem;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  flex-shrink: 0;
}

.world-info { 
  flex: 1; 
  min-width: 0;
}

.world-title {
  display: block;
  font-weight: 800;
  font-size: 0.85rem;
  color: white;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.world-desc {
  display: none !important;
}

.world-arrow {
  display: none !important;
}

.world-games  { background: linear-gradient(135deg, #5b6cff, #7a5cff); box-shadow: 0 4px 10px rgba(91,108,255,0.2); }
.world-creative { background: linear-gradient(135deg, #f59e0b, #fbbf24); box-shadow: 0 4px 10px rgba(245,158,11,0.2); }
.world-zones   { background: linear-gradient(135deg, #10b981, #34d399); box-shadow: 0 4px 10px rgba(16,185,129,0.2); }
.world-profile { background: linear-gradient(135deg, #8b5cf6, #a78bfa); box-shadow: 0 4px 10px rgba(139,92,246,0.2); }
.world-english   { background: linear-gradient(135deg, #38bdf8, #818cf8); box-shadow: 0 4px 10px rgba(56,189,248,0.2); }
.world-school    { background: linear-gradient(135deg, #0d9488, #14b8a6); box-shadow: 0 4px 10px rgba(13,148,136,0.2); }
.world-help      { background: linear-gradient(135deg, #d97706, #f59e0b); box-shadow: 0 4px 10px rgba(217,119,6,0.2); }
.world-news      { background: linear-gradient(135deg, #ec4899, #f43f5e); box-shadow: 0 4px 10px rgba(236,72,153,0.2); }
.world-challenge { background: linear-gradient(135deg, #f43f5e, #be123c); box-shadow: 0 4px 10px rgba(244,63,94,0.2); }
.world-admin     { background: linear-gradient(135deg, #64748b, #475569); box-shadow: 0 4px 10px rgba(100,116,139,0.2); }

/* Barra superior del mapa */
.map-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  margin-bottom: 8px;
}

.map-topbar h1 {
  font-family: "Fredoka One", sans-serif;
  font-size: 1.4rem;
  color: white;
}

.map-topbar-right {
  display: flex;
  gap: 8px;
}

.map-top-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  background: rgba(255,255,255,0.08);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.map-top-btn:active {
  background: rgba(255,255,255,0.15);
  transform: scale(0.9);
}

.user-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5b6cff, #7a5cff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: white;
}

/* ── CATALOGO FULLSCREEN ────────────────── */
.screen-catalog {
  background: var(--bg);
  padding: 0;
}

.catalog-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: white;
  border-bottom: 1px solid rgba(91,108,255,0.08);
  position: sticky;
  top: 0;
  z-index: 10;
}

.btn-back {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: var(--surface-soft);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.btn-back:active {
  transform: scale(0.9);
}

.catalog-header h2 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  flex: 1;
}

.catalog-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

/* ── ZORI CONTEXT BAR ────────────────────── */
.zori-context-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  background: rgba(255,255,255,0.88);
  border-bottom: 1px solid #eef3ff;
  min-height: 52px;
}
.zori-context-img {
  width: 48px; height: auto;
  flex-shrink: 0;
}
.zori-context-msg {
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  line-height: 1.3;
}

/* Desktop: Zori ligeramente más grande */
@media (min-width: 1024px) {
  .zori-context-img { width: 56px; }
  .zori-context-msg { font-size: 0.9rem; }
  .map-zori-img { width: 200px; }
  .login-zori-img { width: 260px; max-height: 300px; }
  .zori-character { width: 320px; max-height: 440px; }
}

/* ── CREATIVE / ZONES FULLSCREEN ────────── */
.screen-creative,
.screen-zones {
  background: var(--bg);
  padding: 0;
}

.creative-header,
.zones-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: white;
  border-bottom: 1px solid rgba(91,108,255,0.08);
  position: sticky;
  top: 0;
  z-index: 10;
}

.creative-header h2,
.zones-header h2 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  flex: 1;
}

.creative-scroll,
.zones-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

/* ── OCULTAR APP EN PWA ─────────────────── */
.pwa-active #app {
  display: none;
}

/* ── BOTON INSTALACION EN HEADER ────────── */
.pwa-top-install {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 999999;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 50px;
  border: none;
  background: linear-gradient(135deg, #5b6cff, #7a5cff);
  color: white;
  font-weight: 800;
  font-size: 0.72rem;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(91,108,255,0.35);
  transition: all 0.25s;
  white-space: nowrap;
}

.pwa-top-install:active {
  transform: scale(0.95);
}

.pwa-top-install[hidden] {
  display: none !important;
}

.pwa-top-icon {
  font-size: 0.9rem;
}

/* ── XILOFONO ESTRICTAMENTE HORIZONTAL ──── */
@media (max-width: 768px) {
  .pwa-active .xylophone-container {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 4px !important;
    padding: 8px !important;
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
    scroll-snap-type: x mandatory !important;
  }

  .pwa-active .xylo-key {
    flex: 0 0 calc(12.5% - 4px) !important;
    min-width: 50px !important;
    height: 120px !important;
    scroll-snap-align: start !important;
  }

  .pwa-active .music-controls .btn-group {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .pwa-active .music-controls .btn-sm {
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
  }

  /* ── MUSICA: landscape + sidebar canciones ── */
  .pwa-active .music-playground-layout {
    display: flex !important;
    flex-direction: row !important;
    height: calc(100vh - 60px) !important;
    gap: 8px !important;
    padding: 0 !important;
  }
  .pwa-active .music-playground-layout .instrument-header {
    width: 30% !important;
    max-width: 180px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 8px !important;
    margin: 0 !important;
  }
  .pwa-active .music-playground-layout .instrument-header h3 {
    font-size: 0.85rem !important;
  }
  .pwa-active .music-playground-layout .instrument-header p {
    font-size: 0.65rem !important;
  }
  .pwa-active .music-playground-layout .btn-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  .pwa-active .music-playground-layout .btn-sm {
    font-size: 0.65rem !important;
    padding: 6px 8px !important;
    width: 100% !important;
  }
  .pwa-active .xylophone-container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 4px !important;
    padding: 8px !important;
    height: 85% !important;
    align-self: flex-end !important;
  }
  .pwa-active .xylo-key {
    flex: 1 !important;
    height: 80% !important;
    min-width: 30px !important;
    max-height: 280px !important;
    border-radius: 8px !important;
  }
  .pwa-active .xylo-key .note-name {
    font-size: 0.65rem !important;
    padding-bottom: 4px !important;
  }
  .pwa-active .song-guide-display {
    max-width: 100% !important;
    font-size: 0.7rem !important;
  }

  /* ── FOSILES: compacto sin scroll ──── */
  .pwa-active .fossil-layout {
    flex-direction: column !important;
    gap: 8px !important;
    height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
  }
  .pwa-active .fossil-controls {
    min-width: auto !important;
    padding: 6px 10px !important;
    flex: none !important;
  }
  .pwa-active .fossil-controls h3 {
    font-size: 0.9rem !important;
  }
  .pwa-active .fossil-controls p {
    font-size: 0.65rem !important;
  }
  .pwa-active .dino-selector {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
  }
  .pwa-active .btn-dino-mode {
    font-size: 0.6rem !important;
    padding: 3px 8px !important;
  }
  .pwa-active .fossil-stats {
    font-size: 0.7rem !important;
  }
  .pwa-active .fossil-arena {
    min-width: auto !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .pwa-active .fossil-grid {
    width: 180px !important;
    height: 180px !important;
  }
  .pwa-active .fossil-cell {
    font-size: 1rem !important;
  }
  .pwa-active .fossil-preview-panel {
    flex: none !important;
    width: 100% !important;
  }
  .pwa-active .fossil-preview-panel h4 {
    font-size: 0.75rem !important;
  }
  .pwa-active .skeleton-bone {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
  }
  .pwa-active #btnRestartFossil {
    font-size: 0.65rem !important;
    padding: 4px 8px !important;
  }

  /* ── HUERTO: compacto ───────────────── */
  .pwa-active .garden-layout {
    flex-direction: column !important;
    gap: 8px !important;
    height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
  }
  .pwa-active .garden-controls {
    min-width: auto !important;
    padding: 6px 10px !important;
    flex: none !important;
  }
  .pwa-active .garden-controls h3 {
    font-size: 0.9rem !important;
  }
  .pwa-active .garden-controls p {
    font-size: 0.6rem !important;
  }
  .pwa-active .plant-selector {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
  }
  .pwa-active .btn-plant-mode {
    font-size: 0.6rem !important;
    padding: 3px 8px !important;
  }
  .pwa-active .garden-status-bars {
    gap: 4px !important;
  }
  .pwa-active .status-row label {
    font-size: 0.65rem !important;
  }
  .pwa-active .garden-actions {
    gap: 4px !important;
  }
  .pwa-active .garden-arena {
    min-width: auto !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .pwa-active .garden-pot-view {
    flex: 1 !important;
  }
  .pwa-active .plant-stage-icon {
    font-size: 2.5rem !important;
  }
  .pwa-active .garden-progress-panel {
    flex: 1 !important;
  }

  /* ── LOGICA: compacto ───────────────── */
  .pwa-active .logic-studio-layout {
    gap: 8px !important;
  }
  .pwa-active .logic-header h3 {
    font-size: 0.9rem !important;
  }
  .pwa-active .logic-header p {
    font-size: 0.65rem !important;
  }
  .pwa-active .logic-sequence-display {
    font-size: 1.4rem !important;
    gap: 4px !important;
    padding: 8px 12px !important;
  }
  .pwa-active .btn-logic-opt {
    font-size: 1.4rem !important;
    padding: 8px !important;
  }

  /* ── INGLES: compacto ───────────────── */
  .pwa-active .english-corner-layout {
    gap: 8px !important;
  }
  .pwa-active .english-header h3 {
    font-size: 0.9rem !important;
  }
  .pwa-active .english-vocab-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 8px !important;
  }
  .pwa-active .english-match-options button {
    font-size: 2.2rem !important;
    min-width: 60px !important;
    padding: 8px !important;
  }

  /* ── CUENTOS: restaurar escenas ─────── */
  .pwa-active .story-visual-pane {
    display: block !important;
    width: 100% !important;
    height: 150px !important;
    margin-bottom: 8px !important;
    position: relative !important;
    order: -1 !important;
  }
  .pwa-active .story-scene-window {
    width: 100% !important;
    height: 100% !important;
  }
  .pwa-active .story-reader-body {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .pwa-active .story-text-pane {
    max-height: none !important;
    overflow-y: visible !important;
  }
  .pwa-active .stories-sidebar {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* touch-action para xilófono y canvas */
  .pwa-active .xylo-key,
  .pwa-active .cloud-choice,
  .pwa-active .track-lane,
  .pwa-active .q-opt-btn,
  .pwa-active .quest-opt-btn {
    touch-action: manipulation !important;
  }
}

/* ── CATEGORY GRID (movil) ──────────────── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 8px;
}

.cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 16px 6px 12px;
  border-radius: 18px;
  border: none;
  cursor: pointer;
  transition: all 0.25s;
  font-family: inherit;
  text-align: center;
  background: linear-gradient(145deg, var(--cat-color), color-mix(in srgb, var(--cat-color) 70%, white));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--cat-color) 30%, transparent);
  min-height: 95px;
}

.cat-btn:active {
  transform: scale(0.93);
}

.cat-icon {
  font-size: 1.7rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.cat-name {
  font-size: 0.7rem;
  font-weight: 800;
  color: white;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.cat-count {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}

/* ── HEADER DE CATEGORIA ────────────────── */
.cat-header-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 14px;
  border-bottom: 2px solid #eef3ff;
  margin-bottom: 12px;
}

.cat-header-bar h3 {
  font-size: 1rem;
  font-weight: 800;
  color: #18233f;
  flex: 1;
}

.cat-game-total {
  font-size: 0.7rem;
  font-weight: 700;
  color: #5f6b8a;
  background: #f0f3ff;
  padding: 3px 10px;
  border-radius: 20px;
}

/* ── GAME GRID 2 COLUMNAS + PAGINACION HORIZONTAL ── */
.game-pages-container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.game-pages-container::-webkit-scrollbar { display: none; }

.game-pages-track {
  display: flex;
  gap: 0;
}

.game-page {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 2px;
  box-sizing: border-box;
}

.game-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 2px;
}

.game-card-sm {
  background: white;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,0,0,0.03);
  transition: transform 0.2s;
}

.game-card-sm:active {
  transform: scale(0.96);
}

.game-card-sm.completed {
  border: 2px solid #22c55e;
}

.game-card-sm-img {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #f0f3ff;
}

.game-card-sm-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.badge-sm {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 0.5rem;
  letter-spacing: 0.2px;
  border: 1px solid white;
  z-index: 2;
}

.badge-free-sm {
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  color: white;
}

.badge-premium-sm {
  background: linear-gradient(135deg, #ffd700, #ffa500);
  color: #18233f;
}

.badge-completed {
  position: absolute;
  bottom: 5px;
  left: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  background: #22c55e;
  color: white;
  font-weight: 800;
  font-size: 0.5rem;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(34,197,94,0.4);
}

.game-card-sm-body {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.badge-area {
  align-self: flex-start;
  padding: 2px 6px;
  border-radius: 20px;
  font-size: 0.48rem;
  font-weight: 700;
}

.game-card-sm-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: #18233f;
  line-height: 1.15;
  margin: 0;
}

.game-card-sm-desc {
  font-size: 0.58rem;
  color: #5f6b8a;
  line-height: 1.2;
  flex: 1;
  margin: 0;
}

.btn-play-sm {
  width: 100%;
  padding: 6px;
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 800;
  font-size: 0.65rem;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  margin-top: auto;
}

.btn-play-sm:active {
  transform: scale(0.95);
}

/* ── PAGINACION DOTS ─────────────────────── */
.page-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 0 4px;
}

.page-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dce3f5;
  cursor: pointer;
  transition: all 0.25s;
  border: none;
  padding: 0;
}

.page-dot.active {
  background: #5b6cff;
  transform: scale(1.3);
}

/* ── DESAFÍO DIARIO: CATÁLOGO SCROLL HORIZONTAL ── */
.challenge-scroll {
  flex: 1;
  overflow: hidden;
  background: linear-gradient(160deg, #0f0c29, #1a1040, #0f0c29);
  display: flex;
  flex-direction: column;
}

.challenge-pages-container {
  flex: 1;
  overflow: hidden;
}

.challenge-pages-container::-webkit-scrollbar { display: none; }

.challenge-pages-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  height: 100%;
  scrollbar-width: none;
}

.challenge-mobile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px;
  align-content: start;
}

.challenge-page {
  flex: 0 0 100%;
  scroll-snap-align: start;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 10px;
}

.challenge-mobile-card {
  background: var(--card-gradient, linear-gradient(135deg, #f43f5e, #fbbf24));
  border-radius: 16px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: white;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition: transform 0.2s;
}

.challenge-mobile-card:active {
  transform: scale(0.95);
}

.challenge-mobile-icon {
  font-size: 2.5rem;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}

.challenge-mobile-title {
  font-size: 0.85rem;
  font-weight: 800;
  margin-bottom: 4px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.challenge-mobile-desc {
  font-size: 0.7rem;
  line-height: 1.3;
  opacity: 0.88;
  margin-bottom: 10px;
  min-height: 30px;
}

.challenge-mobile-start {
  padding: 8px 18px;
  font-size: 0.78rem;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  background: rgba(255,255,255,0.93);
  color: #18233f;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

.challenge-mobile-start:active {
  transform: scale(0.93);
  background: white;
}

/* Ajuste para pantallas muy pequeñas */
@media (max-width: 380px) {
  .challenge-mobile-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .challenge-mobile-card {
    padding: 10px 8px;
  }
  .challenge-mobile-icon {
    font-size: 2rem;
  }
}

/* ── FONDO GRADIENTE SUAVE ─────────────── */
#screen-catalog .catalog-scroll {
  background: linear-gradient(160deg, #f8faff, #f0f3ff, #f8faff);
  min-height: 100%;
}
/* pwa-v4 */

/* ── SUB-SECTION GRID 3 COLUMNAS + TARJETAS ── */
.sub-grid-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #18233f;
  margin-bottom: 14px;
  padding: 0 4px;
}

.act-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.act-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 18px 8px 14px;
  border-radius: 18px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  background: linear-gradient(145deg, var(--a-color), color-mix(in srgb, var(--a-color) 60%, white));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--a-color) 25%, transparent);
  transition: all 0.25s;
  min-height: 105px;
}

.act-card:active {
  transform: scale(0.94);
}

.act-icon {
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.act-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: white;
  text-align: center;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.act-desc {
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  text-align: center;
  line-height: 1.2;
}

.btn-back-creative {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 12px;
  border: none;
  background: #f0f3ff;
  color: #5f6b8a;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 12px;
  transition: all 0.2s;
}

.btn-back-creative:active {
  transform: scale(0.95);
}

/* ── CALMA: scroll vertical seguro ──────── */
.pwa-active .calm-layout {
  height: 100vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 40px !important;
}

.pwa-active .breathing-guide-container {
  min-height: auto !important;
}

.pwa-active .emotions-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
}

.pwa-active .sound-mixer {
  margin-bottom: 30px !important;
}

@media (max-width: 380px) {
  .act-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── MUSIC CATALOG (Pantalla A) ──────────── */
.music-catalog-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #18233f;
  margin-bottom: 16px;
}

.music-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.music-cat-card {
  touch-action: manipulation;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 18px 8px 14px;
  border-radius: 18px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  background: linear-gradient(145deg, var(--mc-color), color-mix(in srgb, var(--mc-color) 60%, white));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--mc-color) 25%, transparent);
  transition: all 0.25s;
  min-height: 95px;
}

.music-cat-card:active { transform: scale(0.94); }
.music-cat-card:disabled { opacity: 0.4; cursor: default; transform: none; }

.mc-icon { font-size: 1.8rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
.mc-name { font-size: 0.78rem; font-weight: 800; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.mc-desc { font-size: 0.6rem; font-weight: 600; color: rgba(255,255,255,0.8); }

/* ── SONG PLAYER (Pantalla B) ───────────── */
.song-player-layout {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  overflow: hidden;
}

.song-player-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: white;
  border-bottom: 1px solid rgba(91,108,255,0.08);
  flex-shrink: 0;
}

.btn-back-song {
  padding: 6px 14px;
  border-radius: 12px;
  border: none;
  background: #f0f3ff;
  color: #5f6b8a;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

.btn-back-song:active { transform: scale(0.95); }

.song-player-title {
  font-size: 1rem;
  font-weight: 800;
  color: #18233f;
  flex: 1;
  text-align: center;
  margin-right: 60px;
}

/* ── STRIP DE NOTAS (arriba, delgado) ───── */
.song-guide-strip {
  height: 36px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
  background: #1e293b;
  padding: 4px 0;
}

.song-notes-scroll {
  display: flex;
  gap: 4px;
  padding: 0 8px;
  align-items: center;
  height: 100%;
}

.song-note-chip {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(255,255,255,0.06);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.25s;
}

.song-note-chip.active {
  background: #5b6cff;
  color: white;
  transform: scale(1.15);
  box-shadow: 0 2px 10px rgba(91,108,255,0.4);
}

.song-note-chip.completed {
  background: #22c55e;
  color: white;
}

.free-mode-hint {
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0 10px;
}

/* ── XILOFONO GIGANTE ───────────────────── */
.song-xylo-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px;
  overflow: hidden;
}

.song-xylo {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 3px;
  width: 95vw;
  height: 80vh;
  align-items: flex-end;
  background: #475569;
  padding: 8px 6px;
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.song-xylo-key {
  flex: 1 !important;
  height: 100% !important;
  min-width: 28px !important;
  max-width: 120px !important;
  max-height: none !important;
  background: var(--key-color) !important;
  border-radius: 8px 8px 4px 4px !important;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12px;
  transition: transform 0.08s, box-shadow 0.08s;
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,0.3),
    inset 0 -6px 0 rgba(0,0,0,0.15),
    0 4px 12px rgba(0,0,0,0.15);
}

.song-xylo-key.pressed {
  transform: translateY(6px) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.2),
    inset 0 -3px 0 rgba(0,0,0,0.1),
    0 2px 6px rgba(0,0,0,0.1) !important;
}

.song-xylo-key.guide-active {
  box-shadow:
    0 0 0 4px white,
    0 0 20px rgba(255,255,255,0.5),
    inset 0 4px 0 rgba(255,255,255,0.3),
    inset 0 -6px 0 rgba(0,0,0,0.15) !important;
  transform: scale(1.05);
  z-index: 2;
}

.song-xylo-key .note-name {
  color: white;
  font-weight: 800;
  font-size: 0.7rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

@media (max-width: 380px) {
  .music-catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── SONG PLAYER: estricto sin scroll ───── */
.song-player-layout {
  max-height: 100vh !important;
  height: 100vh !important;
  overflow: hidden !important;
}

/* Ocultar cabecera superior cuando el reproductor está activo */
.song-player-layout ~ .creative-header,
.song-player-layout .creative-header,
.screen-creative:has(.song-player-layout) .creative-header {
  display: none !important;
}

.song-xylo-wrapper {
  max-height: calc(100vh - 70px) !important;
}
.song-guide-strip {
  height: 28px !important;
}
.song-note-chip {
  font-size: 0.55rem !important;
  padding: 3px 8px !important;
}
.song-player-topbar {
  padding: 4px 8px !important;
  min-height: 32px !important;
}
.btn-back-song {
  font-size: 0.75rem !important;
  padding: 4px 10px !important;
}
.song-player-title {
  font-size: 0.85rem !important;
  margin-right: 40px !important;
}

/* ── STORY QUIZ OVERLAY ─────────────────── */
.story-quiz-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: linear-gradient(160deg, #f8faff, #eef3ff);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.story-quiz-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 16px 20px 30px;
  min-height: 100vh;
  box-sizing: border-box;
}

.sq-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(91,108,255,0.1);
}

.btn-back-quiz {
  padding: 6px 14px;
  border-radius: 12px;
  border: none;
  background: #f0f3ff;
  color: #5f6b8a;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}

.btn-back-quiz:active { transform: scale(0.95); }

.sq-title {
  font-size: 1rem;
  font-weight: 800;
  color: #18233f;
  flex: 1;
  text-align: center;
}

.sq-body .quiz-progress-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: #5f6b8a;
  display: block;
  margin-bottom: 8px;
}

.sq-body .quiz-progress-bar {
  height: 6px;
  background: #dce3f5;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

.sq-body .quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #5b6cff, #7a5cff);
  border-radius: 10px;
  transition: width 0.4s;
}

.sq-body .quiz-question-text {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: #18233f !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
}

.sq-body .quiz-option-btn {
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  border-radius: 16px;
  border: 2px solid #e2e8f0;
  background: white;
  font-size: 1rem;
  font-weight: 700;
  color: #18233f;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  margin-bottom: 8px;
}

.sq-body .quiz-option-btn:active {
  transform: scale(0.97);
}

.sq-body .quiz-option-btn.option-correct {
  background: #dcfce7;
  border-color: #22c55e;
  color: #166534;
}

.sq-body .quiz-option-btn.option-incorrect {
  background: #fef2f2;
  border-color: #ef4444;
  color: #991b1b;
}

.sq-body .quiz-option-btn.option-disabled {
  opacity: 0.6;
}

.sq-body .quiz-victory-panel {
  text-align: center;
  padding: 40px 20px;
}

.sq-body .quiz-victory-icon {
  font-size: 4rem;
  margin-bottom: 15px;
}

.sq-body .quiz-victory-panel h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #18233f;
  margin-bottom: 10px;
}

/* ── FOSILES: EXCAVACION JURASICA ──────────── */
.fossil-excavation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px;
}

.fossil-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.fossil-dino-select {
  display: flex;
  gap: 4px;
}

.btn-dino-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  font-size: 1.2rem;
  cursor: pointer;
  background: #f0f3ff;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-dino-sm.active {
  border-color: #5b6cff;
  background: rgba(91,108,255,0.1);
}

.fossil-counter {
  font-weight: 800;
  font-size: 0.9rem;
  color: #18233f;
}

.btn-reset-fossil {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #f0f3ff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fossil-excavation-area {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.fossil-bg-canvas, .fossil-scratch-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.fossil-hint {
  font-size: 0.75rem;
  color: #5f6b8a;
  font-weight: 600;
  text-align: center;
}

/* ── FASE 2: ENSAMBLAJE ── */
.fossil-assembly {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px;
}

.fossil-assembly-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.fossil-silhouette {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: 220px;
  margin: 0 auto;
  background: radial-gradient(ellipse at center, rgba(91,108,255,0.04), transparent);
  border: 2px dashed rgba(91,108,255,0.15);
  border-radius: 20px;
}

.bone-slot {
  position: absolute;
  width: 80px;
  height: 44px;
  border: 2px dashed #dce3f5;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  font-size: 1.2rem;
  color: #94a3b8;
  background: rgba(255,255,255,0.5);
  transition: all 0.3s;
}

.bone-slot.filled {
  border-color: #22c55e;
  background: rgba(34,197,94,0.08);
  color: #18233f;
}

.bone-slot.wrong {
  border-color: #ef4444;
  background: rgba(239,68,68,0.08);
}

.slot-label {
  font-size: 0.55rem;
  font-weight: 700;
  color: inherit;
}

.fossil-bones-tray {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 8px;
  min-height: 50px;
}

.bone-draggable {
  width: 80px;
  padding: 8px;
  border-radius: 14px;
  border: 2px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: grab;
  transition: all 0.2s;
  font-family: inherit;
  user-select: none;
  -webkit-user-select: none;
}

.bone-draggable:active {
  cursor: grabbing;
  transform: scale(0.95);
}

.bone-icon {
  font-size: 1.5rem;
}

.bone-name {
  font-size: 0.6rem;
  font-weight: 700;
  color: #18233f;
}

/* ── FASE 3: CELEBRACION ── */
.fossil-celebration {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  padding: 20px;
}

.fossil-celebrate-inner {
  text-align: center;
  max-width: 360px;
}

.dino-roar {
  font-size: 5rem;
  margin-bottom: 16px;
  animation: dinoRoarAnim 0.5s ease-in-out 3;
}

@keyframes dinoRoarAnim {
  0%, 100% { transform: scale(1) translateY(0); }
  25% { transform: scale(1.2) translateY(-10px); }
  50% { transform: scale(1.3) translateY(-15px) rotate(5deg); }
  75% { transform: scale(1.2) translateY(-10px) rotate(-5deg); }
}

.celebration-title {
  font-family: "Fredoka One", sans-serif;
  font-size: 1.5rem;
  color: #18233f;
  margin-bottom: 16px;
}

.dino-fact-card {
  background: #f0f3ff;
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  animation: fadeInUp 0.6s ease;
}

.fact-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.fact-text {
  font-size: 0.9rem;
  color: #18233f;
  line-height: 1.5;
  font-weight: 600;
}

.celebration-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

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

/* ── HUERTO VIVO ─────────────────────────── */
.garden-canvas-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px;
  position: relative;
}

.garden-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.garden-plant-select {
  display: flex;
  gap: 4px;
}

.btn-plant-garden {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid transparent;
  font-size: 1.2rem;
  cursor: pointer;
  background: #f0f3ff;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-plant-garden.active {
  border-color: #22c55e;
  background: rgba(34,197,94,0.1);
}

.garden-phase-label {
  font-size: 0.8rem;
  font-weight: 800;
  color: #18233f;
  flex: 1;
  text-align: center;
}

.garden-coins {
  font-size: 0.85rem;
  font-weight: 800;
  color: #f59e0b;
}

.garden-canvas {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1.1;
  border-radius: 20px;
  background: #87CEEB;
  touch-action: none;
}

.btn-water-can {
  position: absolute;
  bottom: 50px;
  right: 10px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  background: linear-gradient(135deg, #5b6cff, #7a5cff);
  color: white;
  box-shadow: 0 4px 14px rgba(91,108,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 2;
}

.btn-water-can:active {
  transform: scale(0.9);
}

.garden-hint {
  font-size: 0.65rem;
  color: #5f6b8a;
  font-weight: 600;
  text-align: center;
  margin-top: 4px;
}

.btn-reset-garden {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #f0f3ff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── GARDEN SUCCESS SCREEN ──────────────── */
.garden-success {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 20px;
}

.garden-success-inner {
  text-align: center;
  max-width: 360px;
}

.garden-success-inner h2 {
  font-family: "Fredoka One", sans-serif;
  font-size: 1.5rem;
  color: #18233f;
  margin-bottom: 10px;
}

.garden-success-text {
  font-size: 0.95rem;
  color: #5f6b8a;
  margin-bottom: 16px;
}

.garden-success-coins {
  font-size: 1.3rem;
  font-weight: 800;
  color: #f59e0b;
  margin-bottom: 16px;
}

.garden-success-fact {
  background: #f0f3ff;
  border-radius: 16px;
  padding: 14px;
  font-size: 0.85rem;
  color: #18233f;
  line-height: 1.4;
  margin-bottom: 20px;
  font-weight: 600;
}

/* Forzar portrait en creative screen cuando no está en música */
.screen-creative:not(.music-active) .creative-scroll {
  max-width: 480px;
  margin: 0 auto;
}

/* ── ADMIN PANEL ──────────────────────────── */
.screen-admin {
  background: #f0f4ff;
  padding: 0;
}
.admin-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: white;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  position: sticky;
  top: 0;
  z-index: 10;
}
.admin-header h2 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  flex: 1;
}
.admin-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

/* Dashboard */
.admin-dashboard {
  max-width: 1100px;
  margin: 0 auto;
}
.admin-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.admin-header-bar h2 {
  font-size: 1.3rem;
  font-weight: 800;
}
.admin-total-users {
  background: #e0e7ff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #4f46e5;
}

/* Tabs del panel */
.admin-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.admin-tab {
  padding: 8px 16px;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  font-size: 0.85rem;
  background: white;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.admin-tab:hover { background: #e0e7ff; }
.admin-tab.active {
  background: #4f46e5;
  color: white;
  box-shadow: 0 4px 12px rgba(79,70,229,0.25);
}
.btn-back-admin {
  margin-left: auto;
  background: #fee2e2;
  color: #dc2626;
}
.btn-back-admin:hover { background: #fecaca; }

/* Module */
.admin-module {
  background: white;
  border-radius: 20px;
  padding: 20px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.admin-module h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 4px; }
.admin-module-desc { font-size: 0.85rem; color: #94a3b8; margin-bottom: 16px; }

/* Features Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.feature-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8faff;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #eef3ff;
}
.feature-label { font-weight: 700; font-size: 0.9rem; }

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #cbd5e1;
  border-radius: 24px;
  transition: 0.25s;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.25s;
}
.toggle-switch input:checked + .toggle-slider { background: #4f46e5; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
.toggle-switch input:disabled + .toggle-slider { opacity: 0.5; cursor: default; }

/* Users Table */
.admin-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.admin-search-input {
  flex: 1;
  padding: 10px 16px;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.admin-search-input:focus { border-color: #4f46e5; }
.admin-search-count { font-size: 0.8rem; color: #94a3b8; font-weight: 600; }
.admin-table-wrap { overflow-x: auto; }
.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
  font-size: 0.85rem;
}
.admin-table th {
  text-align: left;
  padding: 8px 12px;
  color: #94a3b8;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.admin-table td {
  padding: 10px 12px;
  background: #f8faff;
  border-radius: 0;
}
.admin-table tr td:first-child { border-radius: 10px 0 0 10px; }
.admin-table tr td:last-child { border-radius: 0 10px 10px 0; }
.plan-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
}
.plan-free { background: #fef3c7; color: #b45309; }
.plan-premium { background: #d1fae5; color: #065f46; }
.btn-plan-toggle {
  padding: 5px 12px;
  border-radius: 10px;
  border: none;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  background: #e0e7ff;
  color: #4f46e5;
  transition: all 0.2s;
}
.btn-plan-toggle:hover { background: #c7d2fe; }
.btn-plan-toggle:disabled { opacity: 0.5; cursor: default; }

/* Students Grid */
.admin-students-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.student-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #f8faff;
  padding: 20px 16px;
  border-radius: 16px;
  border: 1px solid #eef3ff;
  gap: 8px;
}
.student-avatar { font-size: 2.5rem; }
.student-info strong { font-size: 1rem; }
.student-grade { font-size: 0.8rem; color: #94a3b8; }
.student-parent { font-size: 0.75rem; color: #64748b; }
.student-stats {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 0.85rem;
  font-weight: 700;
}
.stat-icon { font-size: 1.1rem; }

/* Modules Tree */
.modules-tree { display: flex; flex-direction: column; gap: 16px; }
.module-group h4 { font-size: 0.95rem; font-weight: 800; margin-bottom: 8px; color: #1e293b; }
.module-items { display: flex; flex-direction: column; gap: 6px; }
.module-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8faff;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #eef3ff;
}
.module-item.private { background: #fef2f2; border-color: #fecaca; }
.module-icon { font-size: 1.5rem; }
.module-info { flex: 1; }
.module-info strong { font-size: 0.9rem; }
.module-info p { font-size: 0.78rem; color: #64748b; margin-top: 4px; }
.module-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 700;
  background: #d1fae5;
  color: #065f46;
}
.private-badge { background: #fecaca; color: #991b1b; }
.module-status { font-size: 0.8rem; font-weight: 700; }
.module-status.restricted { color: #dc2626; }

/* Toast */
.admin-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1e293b;
  color: white;
  padding: 12px 24px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.9rem;
  z-index: 999999;
  opacity: 0;
  transition: all 0.3s;
  pointer-events: none;
}
.admin-toast.toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.admin-toast.toast-error { background: #dc2626; }

/* ── CONTROL DE ACCESO ───────────────────── */
.access-nav { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.access-nav-btn {
  padding:8px 14px; border-radius:10px; border:none; font-weight:700; font-size:0.8rem;
  background:#f1f5f9; color:#475569; cursor:pointer; font-family:inherit; transition:all .2s;
}
.access-nav-btn:hover { background:#e0e7ff; }
.access-nav-btn.active { background:#4f46e5; color:white; box-shadow:0 4px 12px rgba(79,70,229,0.25); }
.access-master-switch {
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  background:#f8faff; border-radius:12px; border:1px solid #eef3ff; margin-bottom:12px;
}
.access-master-label { font-weight:700; font-size:0.9rem; flex:1; }
.access-master-hint { font-size:0.75rem; color:#94a3b8; }
.access-items { display:flex; flex-direction:column; gap:6px; }
.access-item {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:#f8faff; border-radius:10px; border:1px solid #eef3ff;
}
.access-item-icon { font-size:1.3rem; }
.access-item-name { flex:1; font-weight:600; font-size:0.85rem; }
.access-item-select {
  padding:5px 10px; border-radius:8px; border:2px solid #e2e8f0;
  font-size:0.8rem; font-weight:700; font-family:inherit; background:white; cursor:pointer;
}
.access-item-controls {
  display:flex; align-items:center; gap:6px; flex-shrink:0;
}
.access-item-label-select {
  padding:5px 8px; border-radius:8px; border:2px solid #e2e8f0;
  font-size:0.75rem; font-weight:600; font-family:inherit; background:white; cursor:pointer;
  color:#6366f1;
}
/* Type category tabs inside game access section */
.access-type-tabs {
  display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; overflow-x:auto;
  padding-bottom:4px; scrollbar-width:none;
}
.access-type-tabs::-webkit-scrollbar { display:none; }
.access-type-tab {
  padding:6px 12px; border-radius:20px; border:2px solid #e2e8f0;
  font-size:0.75rem; font-weight:700; cursor:pointer; font-family:inherit;
  background:white; color:#64748b; white-space:nowrap; transition:all .2s;
  flex-shrink:0;
}
.access-type-tab:hover { background:#e0e7ff; border-color:#c7d2fe; color:#4f46e5; }
.access-type-tab.active {
  background:linear-gradient(135deg,#4f46e5,#6366f1); color:white;
  border-color:#4f46e5; box-shadow:0 4px 12px rgba(79,70,229,0.3);
}

/* ── NOTIFICACIONES ──────────────────────── */
.notif-editor { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.notif-label { font-weight:700; font-size:0.85rem; }
.notif-textarea {
  width:100%; padding:12px; border-radius:12px; border:2px solid #e2e8f0;
  font-size:0.9rem; font-family:inherit; resize:vertical; outline:none;
}
.notif-textarea:focus { border-color:#4f46e5; }
.notif-actions { display:flex; align-items:center; gap:16px; }
.notif-toggle-label { display:flex; align-items:center; gap:8px; font-weight:600; font-size:0.85rem; cursor:pointer; }
.notif-toggle-label input[type="checkbox"] { width:18px; height:18px; cursor:pointer; }
.notif-preview { margin-top:12px; }
.notif-preview strong { font-size:0.8rem; color:#94a3b8; }
.notif-banner-preview {
  margin-top:6px; padding:14px 20px; border-radius:14px;
  background:linear-gradient(135deg,#4f46e5,#6366f1); color:white;
  font-weight:700; font-size:0.9rem; text-align:center;
}

/* ── TIPS PARENTALES ─────────────────────── */
.tips-editor { display:flex; flex-direction:column; gap:8px; }
.tip-row { display:flex; align-items:center; gap:8px; }
.tip-num {
  width:24px; height:24px; border-radius:50%; background:#e0e7ff; color:#4f46e5;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.75rem; flex-shrink:0;
}
.tip-input {
  flex:1; padding:8px 12px; border-radius:10px; border:2px solid #e2e8f0;
  font-size:0.85rem; font-family:inherit; outline:none;
}
.tip-input:focus { border-color:#4f46e5; }
.tip-remove {
  width:28px; height:28px; border-radius:50%; border:none; background:#fee2e2; color:#dc2626;
  font-weight:700; cursor:pointer; font-size:0.85rem; flex-shrink:0;
}
.tip-remove:hover { background:#fecaca; }

/* ── SOPORTE ─────────────────────────────── */
.ticket-card {
  background:#f8faff; border-radius:12px; border:1px solid #eef3ff;
  padding:14px 16px; margin-bottom:8px;
}
.ticket-header {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px;
}
.ticket-header strong { font-size:0.85rem; }
.ticket-date { font-size:0.7rem; color:#94a3b8; }
.ticket-category {
  font-size:0.65rem; padding:2px 8px; border-radius:8px; background:#e0e7ff; color:#4f46e5; font-weight:700;
}
.ticket-archive {
  margin-left:auto; padding:4px 10px; border-radius:8px; border:none;
  background:#e0e7ff; color:#4f46e5; font-weight:700; font-size:0.7rem; cursor:pointer; font-family:inherit;
}
.ticket-archive:hover { background:#c7d2fe; }
.ticket-archived { font-size:0.7rem; color:#94a3b8; font-weight:600; margin-left:auto; }
.ticket-body { font-size:0.85rem; color:#475569; line-height:1.4; margin:0; }

/* ── ADMIN SIDEBAR ────────────────────────── */
.admin-dashboard { display:flex; gap:0; min-height:calc(100vh - 60px); }
.admin-sidebar {
  width:220px; flex-shrink:0; background:white; border-right:1px solid #e2e8f0;
  padding:12px 0; display:flex; flex-direction:column; gap:2px; overflow-y:auto;
}
.sidebar-brand {
  padding:12px 16px; font-weight:900; font-size:1.05rem; color:#1e293b;
  border-bottom:1px solid #e2e8f0; margin-bottom:8px;
}
.sidebar-btn {
  display:flex; align-items:center; gap:8px; padding:9px 16px; border:none;
  background:transparent; color:#475569; font-size:0.8rem; font-weight:600;
  cursor:pointer; font-family:inherit; transition:all .15s; text-align:left; width:100%;
}
.sidebar-btn:hover { background:#f1f5f9; color:#1e293b; }
.sidebar-btn.active { background:#eef2ff; color:#4f46e5; font-weight:700; border-right:3px solid #4f46e5; }
.sidebar-btn span { flex:1; }
.sidebar-back { margin-top:auto; border-top:1px solid #e2e8f0; padding-top:12px; color:#dc2626; }
.sidebar-back:hover { background:#fef2f2; }
.admin-main { flex:1; padding:20px 28px; overflow-y:auto; max-height:calc(100vh - 60px); width:100%; }
.admin-main .admin-module { max-width:100%; }
.admin-main .admin-table-wrap { width:100%; overflow-x:auto; }
.admin-main .admin-table { width:100%; min-width:600px; }

/* Hamburger menu button (hidden on desktop) */
.admin-hamburger { display:none; }

/* ── RESPONSIVE: mobile sidebar ───────────── */
@media(max-width:820px){
  .admin-dashboard { flex-direction:column; position:relative; }
  .admin-hamburger {
    display:flex; align-items:center; justify-content:center; position:fixed;
    bottom:20px; right:20px; z-index:99999; width:52px; height:52px; border-radius:50%;
    background:#4f46e5; color:white; border:none; font-size:1.5rem; cursor:pointer;
    box-shadow:0 4px 20px rgba(79,70,229,0.4);
  }
  .admin-sidebar {
    position:fixed; top:0; left:-260px; width:250px; height:100vh; z-index:99998;
    transition:left .3s ease; flex-direction:column; overflow-y:auto;
    box-shadow:2px 0 20px rgba(0,0,0,0.15);
  }
  .admin-sidebar.open { left:0; }
  .sidebar-brand { display:flex; }
  .sidebar-btn span { display:inline; }
  .sidebar-back { margin-top:auto; }
  .admin-main { padding:14px; max-height:none; }
  .access-nav { flex-wrap:wrap; }
  .access-item { flex-wrap:wrap; padding-left:40px; }
}

/* ── RESPONSIVE: very small screens ───────── */
@media(max-width:480px){
  .admin-main { padding:10px; }
  .admin-module { padding:14px; }
  .features-grid { grid-template-columns:1fr; }
  .quick-grid { grid-template-columns:repeat(2,1fr); }
  .analytics-grid { grid-template-columns:repeat(2,1fr); }
  .admin-tabs { flex-wrap:wrap; }
  .admin-students-grid { grid-template-columns:1fr; }
}

/* pwa-v12 */

/* ── MOBILE PROFILE DRAWER ────────────────── */
.mobile-drawer-overlay {
  position:fixed; inset:0; z-index:99998; background:rgba(0,0,0,0.4);
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.mobile-drawer-overlay.show { opacity:1; pointer-events:auto; }

.mobile-drawer {
  position:fixed; bottom:0; left:0; right:0; z-index:99999;
  background:white; border-radius:24px 24px 0 0; padding:8px 0 20px;
  transform:translateY(100%); transition:transform .35s cubic-bezier(.22,1,.36,1);
  max-height:80vh; overflow-y:auto;
}
.mobile-drawer.open { transform:translateY(0); }

.drawer-handle {
  width:36px; height:4px; border-radius:4px; background:#e2e8f0;
  margin:0 auto 12px;
}
.drawer-header {
  display:flex; align-items:center; gap:12px; padding:4px 20px 16px;
  border-bottom:1px solid #f1f5f9;
}
.drawer-avatar .mobile-avatar-img,
.drawer-avatar .mobile-avatar-letter {
  width:48px; height:48px; border-radius:50%; object-fit:cover;
}
.drawer-avatar .mobile-avatar-letter {
  background:#4f46e5; color:white; display:flex; align-items:center;
  justify-content:center; font-size:1.2rem; font-weight:800;
}
.drawer-user-info strong { display:block; font-size:1rem; }
.drawer-user-info small { font-size:0.78rem; color:#94a3b8; }

.drawer-menu { padding:8px 0; }
.drawer-item {
  display:flex; align-items:center; gap:12px; width:100%; padding:12px 20px;
  border:none; background:transparent; font-size:0.9rem; font-weight:600;
  color:#475569; cursor:pointer; font-family:inherit; transition:background .15s;
}
.drawer-item:hover { background:#f8faff; }
.drawer-logout { color:#dc2626; margin-top:8px; border-top:1px solid #f1f5f9; padding-top:16px; }

/* Mobile profile button on map */
.map-top-btn.profile-logged {
  padding:0; overflow:hidden; width:36px; height:36px; border-radius:50%;
}
.map-top-btn.profile-logged .mobile-avatar-img,
.map-top-btn.profile-logged .mobile-avatar-letter {
  width:36px; height:36px; border-radius:50%; object-fit:cover; display:block;
}
.map-top-btn.profile-logged .mobile-avatar-letter {
  background:#4f46e5; color:white; display:flex; align-items:center;
  justify-content:center; font-size:0.9rem; font-weight:800;
}

/* ── SORI 2.0 — ANIMACIONES SVG ──────────── */
@keyframes soriFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(0.5deg); }
}

@keyframes ledPulse {
  0%, 100% { filter: drop-shadow(0 0 12px #22C55E); opacity: 1; }
  50% { filter: drop-shadow(0 0 6px #22C55E); opacity: 0.9; }
}

.sori-float {
  animation: soriFloat 3s ease-in-out infinite;
}

.led-glow {
  animation: ledPulse 2s ease-in-out infinite;
}

/* Splash screen con Sori 2.0 */
.splash-sori-svg {
  width: 200px;
  height: 200px;
  filter: drop-shadow(0 20px 40px rgba(46, 16, 101, 0.4));
}

/* =========================================
   ESTILOS GENERALES DEL MÓDULO DE INGLÉS
   ========================================= */

/* Contenedor principal de Inglés (PC y Móvil) */
#desktopEnglishView.desktop-active-view {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  overflow-y: auto !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
}

#desktopEnglishView {
  min-height: 100vh;
  position: relative;
  box-sizing: border-box;
  transition: background 0.6s ease;
}

#desktopEnglishView,
.screen-english {
  background: linear-gradient(135deg, #1e1b4c, #4c1d95, #1e3a8a, #1e1b4c);
  background-size: 400% 400%;
  animation: welcomeBgMove 15s ease infinite;
  overflow-x: hidden;
  transition: background 0.6s ease;
}

/* Portada del Portal */
.english-portal-welcome {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  min-height: 100vh;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

@keyframes welcomeBgMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Dibujos decorativos flotantes */
.english-deco-draw {
  position: absolute;
  user-select: none;
  pointer-events: none;
  opacity: 0.75;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.25));
  transition: transform 0.3s;
}

.deco-cloud {
  top: 10%; left: 8%;
  font-size: 3.5rem;
  animation: floatDeco 6s ease-in-out infinite;
}

.deco-rainbow {
  top: 12%; right: 10%;
  font-size: 4rem;
  animation: floatDeco 8s ease-in-out infinite 1s;
}

.deco-hat {
  bottom: 15%; left: 10%;
  font-size: 3rem;
  animation: floatDeco 7s ease-in-out infinite 0.5s;
}

.deco-earth {
  bottom: 20%; right: 12%;
  font-size: 3.2rem;
  animation: floatDeco 9s ease-in-out infinite 2s;
}

.deco-rocket {
  top: 45%; left: 6%;
  font-size: 3.5rem;
  animation: floatDeco 6.5s ease-in-out infinite 1.5s;
}

.deco-balloon {
  top: 48%; right: 8%;
  font-size: 3rem;
  animation: floatDeco 7.5s ease-in-out infinite 0.8s;
}

.deco-book {
  top: 5%; left: 45%;
  font-size: 2.5rem;
  animation: floatDeco 5.5s ease-in-out infinite;
}

.deco-star {
  bottom: 8%; left: 48%;
  font-size: 2.8rem;
  animation: floatDeco 8.5s ease-in-out infinite 1.2s;
}

@keyframes floatDeco {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(4deg); }
}

.english-portal-card {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 28px !important;
  padding: 35px 25px !important;
  max-width: 420px !important;
  width: 100% !important;
  text-align: center !important;
  box-shadow: 0 20px 45px rgba(99, 102, 241, 0.25) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
  animation: cardFadeIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

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

.english-welcome-mascot {
  margin-bottom: 20px;
}

.floating-mascot {
  animation: mascotFloat 3s ease-in-out infinite;
}

@keyframes mascotFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.03); }
}

.english-portal-card h2 {
  font-family: "Fredoka One", sans-serif;
  font-size: 1.8rem;
  color: #4f46e5;
  margin-bottom: 6px;
}

.welcome-tag {
  display: inline-block;
  background: #e0e7ff;
  color: #4f46e5;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 4px 12px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 15px;
}

.english-portal-card p {
  color: #4b5563;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 25px;
}

.btn-english-start {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: white !important;
  border: none !important;
  padding: 14px 28px !important;
  border-radius: 18px !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35) !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.btn-english-start:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 12px 25px rgba(16, 185, 129, 0.5) !important;
}

/* Encabezados */
.english-course-header {
  text-align: center;
  padding: 20px;
  margin-bottom: 15px;
}

.english-course-header h2 {
  font-family: "Fredoka One", sans-serif;
  font-size: 1.6rem;
  color: white;
}

.english-course-header p {
  color: #cbd5e1;
  font-size: 0.85rem;
  margin-top: 5px;
}

/* Winding Paths (Ruta de Mundos y Lecciones) */
.english-winding-path {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding: 20px;
  max-width: 680px;
  margin: 0 auto;
  position: relative;
}

.path-node-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  animation: nodeSlideIn 0.5s ease-out;
}

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

.path-node-wrapper.node-right {
  flex-direction: row-reverse;
}

.path-node {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  border: 4px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.path-node.unlocked {
  background: linear-gradient(135deg, #38bdf8, #818cf8);
}

.path-node.locked {
  background: #64748b;
  cursor: not-allowed;
  opacity: 0.7;
}

.path-node.active {
  animation: pulseActiveNode 2s infinite;
  border-color: white;
  transform: scale(1.05);
}

@keyframes pulseActiveNode {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.6); }
  50% { box-shadow: 0 0 0 12px rgba(56, 189, 248, 0); }
}

.node-icon-globe {
  font-size: 2rem;
  user-select: none;
}

.node-lock-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: #334155;
  color: white;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  border: 2px solid white;
}

.node-info-bubble {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 12px 16px;
  flex: 1;
  color: white;
}

.node-info-bubble h4 {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 2px;
}

.node-info-bubble p {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Barra de progreso de Lección */
.english-lesson-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lesson-phase-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: white;
}

.lesson-progress-container {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  margin: 0 15px;
  overflow: hidden;
}

.lesson-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.lesson-progress-text {
  font-size: 0.75rem;
  font-weight: 800;
  color: #cbd5e1;
}

/* Área de contenido de Lección */
.english-lesson-content {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  box-sizing: border-box;
}

.english-concept-card,
.english-activity-card {
  background: white;
  border-radius: 28px;
  padding: 30px 20px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  animation: cardFadeIn 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.concept-visual {
  font-size: 5rem;
  margin-bottom: 15px;
  animation: bounceVisual 2s infinite ease-in-out;
}

@keyframes bounceVisual {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.concept-word-english {
  font-family: "Fredoka One", sans-serif;
  font-size: 2.5rem;
  color: #1e1b4b;
  margin-bottom: 4px;
}

.concept-word-spanish {
  font-size: 1.25rem;
  font-weight: 700;
  color: #6366f1;
  margin-bottom: 12px;
}

.concept-explanation {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 20px;
}

.audio-speaker-btn {
  background: #f1f5f9;
  border: none;
  font-size: 2rem;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  transition: all 0.2s;
  outline: none;
}

.audio-speaker-btn:hover {
  background: #e2e8f0;
  transform: scale(1.05);
}

.audio-speaker-btn.playing {
  background: #e0e7ff;
  transform: scale(0.95);
}

.audio-pulse-ring {
  position: absolute;
  inset: -4px;
  border: 2px solid #818cf8;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.audio-speaker-btn.playing .audio-pulse-ring {
  animation: ringPulse 1.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes ringPulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* Área de Prácticas y Evaluaciones */
.activity-type-banner {
  display: inline-block;
  background: #e0f2fe;
  color: #0284c7;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 8px;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.demo-banner {
  background: #fee2e2;
  color: #dc2626;
}

.english-activity-card h3 {
  font-family: "Fredoka One", sans-serif;
  font-size: 1.4rem;
  color: #1e293b;
  margin-bottom: 6px;
}

.activity-instruction {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 20px;
}

.mock-activity-playground {
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 18px;
  padding: 20px;
  margin-top: 15px;
}

.mock-play-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 15px;
}

.mock-interactive-box {
  background: white;
  border: 1px dashed #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.02);
  color: #475569;
}

.demo-box {
  background: #fdf2f8;
  border-color: #fbcfe8;
}

/* Footer de Lección (Botón Siguiente) */
.english-lesson-footer {
  padding: 16px 20px;
  display: flex;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.1);
}

.btn-lesson-next {
  background: #10b981 !important;
  color: white !important;
  padding: 10px 24px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25) !important;
}

/* Pantalla de Recompensas */
.english-rewards-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  min-height: 80vh;
}

.rewards-celebration-card {
  background: white;
  border-radius: 28px;
  padding: 40px 30px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 40px rgba(245, 158, 11, 0.15);
  border: 1px solid #fef3c7;
  animation: cardFadeIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reward-star-ring {
  font-size: 5rem;
  margin-bottom: 15px;
  animation: starRotate 3s infinite linear;
}

@keyframes starRotate {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

.rewards-celebration-card h2 {
  font-family: "Fredoka One", sans-serif;
  font-size: 1.8rem;
  color: #d97706;
  margin-bottom: 8px;
}

.rewards-celebration-card p {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 25px;
}

.rewards-summary-box {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-bottom: 30px;
}

.reward-stat-item {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 16px;
  padding: 12px 20px;
  flex: 1;
}

.reward-val {
  display: block;
  font-family: "Fredoka One", sans-serif;
  font-size: 1.4rem;
  color: #b45309;
}

.reward-lbl {
  display: block;
  font-size: 0.75rem;
  color: #78350f;
  font-weight: 800;
  margin-top: 2px;
}

.btn-rewards-claim {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: white !important;
  border: none !important;
  padding: 12px 28px !important;
  border-radius: 18px !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  box-shadow: 0 8px 16px rgba(245, 158, 11, 0.3) !important;
  transition: all 0.2s !important;
  width: 100%;
}

.btn-rewards-claim:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px rgba(245, 158, 11, 0.4) !important;
}

/* =========================================
   ESTILOS DE CONTENEDORES Y DECORACIONES DE RUTA
   ========================================= */

.english-worlds-view-container {
  background: linear-gradient(to bottom, #bae6fd 0%, #bbf7d0 40%, #86efac 100%) !important;
  min-height: 100vh;
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
}

/* Ajustes de contraste para fondo verde claro */
.english-worlds-view-container .english-course-header h2 {
  color: #064e3b !important;
  font-weight: 800 !important;
}

.english-worlds-view-container .english-course-header p {
  color: #047857 !important;
  font-weight: 600 !important;
}

/* Tarjeta de Mundo y Lección */
.english-worlds-view-container .node-info-bubble,
.english-lessons-view-container .node-info-bubble {
  width: 262px !important;
  max-width: 262px !important;
  min-height: 124px !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
  color: white !important;
  border-radius: 24px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease !important;
}

.english-worlds-view-container .node-info-bubble:hover,
.english-lessons-view-container .node-info-bubble:hover {
  transform: translateY(-12px) scale(1.05) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22) !important;
}

.english-worlds-view-container .node-info-bubble::before,
.english-worlds-view-container .node-info-bubble::after,
.english-lessons-view-container .node-info-bubble::before,
.english-lessons-view-container .node-info-bubble::after {
  content: none !important;
}

/* Layout de la Tarjeta */
.world-card-left-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.world-card-tag {
  background: rgba(255, 255, 255, 0.22);
  color: white;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 800;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.world-card-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: white !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.world-card-subtitle {
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

/* Sección de Progreso */
.world-progress-section {
  margin-top: 8px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.world-progress-text {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #fef08a !important; /* Gold text */
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.world-progress-bar-container {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  overflow: hidden;
}

.world-progress-bar-fill {
  height: 100%;
  background: #fbbf24; /* Yellow load bar */
  border-radius: 10px;
  transition: width 0.4s ease;
}

/* Columna Derecha (Ilustración) */
.world-card-right-illustration {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  position: relative;
  z-index: 2;
}

.illustration-circle {
  width: 54px;
  height: 54px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.2);
}

.illustration-emoji {
  font-size: 2.2rem;
}

/* Estado de Bloqueo */
.card-locked {
  opacity: 0.75 !important;
  filter: saturate(0.85) brightness(0.95);
  cursor: not-allowed !important;
}

.card-locked:hover {
  transform: none !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

/* Círculo de Nodos Numerados en el Sendero */
.english-worlds-view-container .path-node,
.english-lessons-view-container .path-node {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  border: 5px solid #f59e0b !important; /* Gold border */
  color: white !important;
  font-weight: 800 !important;
  font-size: 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
}

.english-worlds-view-container .path-node.active,
.english-lessons-view-container .path-node.active {
  animation: pulseActiveNode 2s infinite;
  border-color: #fbbf24 !important;
}

/* Colores de los Nodos del Sendero */
.world-node-color-0 { background: linear-gradient(135deg, #36d1dc, #5b86e5) !important; }
.world-node-color-1 { background: linear-gradient(135deg, #667eea, #764ba2) !important; }
.world-node-color-2 { background: linear-gradient(135deg, #f953c6, #b91d73) !important; }
.world-node-color-3 { background: linear-gradient(135deg, #43cea2, #185a9d) !important; }
.world-node-color-4 { background: linear-gradient(135deg, #f7971e, #ffd200) !important; }
.world-node-color-5 { background: linear-gradient(135deg, #ff512f, #dd2476) !important; }
.world-node-color-6 { background: linear-gradient(135deg, #00c6ff, #0072ff) !important; }
.world-node-color-7 { background: linear-gradient(135deg, #7f00ff, #e100ff) !important; }
.world-node-color-review {
  background: linear-gradient(135deg, #fef08a, #f59e0b) !important;
  border-color: #fbbf24 !important;
  color: #78350f !important;
}

/* Contenedor de Badge de Bloqueo en el Sendero */
.world-lock-badge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 72px;
  z-index: 10;
  animation: nodeSlideIn 0.5s ease-out;
}

.world-lock-circle {
  width: 44px;
  height: 44px;
  background: #e2e8f0;
  border: 3.5px solid #cbd5e1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.world-lock-text {
  font-size: 0.65rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Colores de Sendero de Aventura */
.english-worlds-view-container .trail-bg {
  stroke: rgba(21, 128, 61, 0.15) !important;
  stroke-width: 14px !important;
}

.english-worlds-view-container .trail-active {
  stroke: #16a34a !important;
  stroke-width: 5px !important;
  stroke-dasharray: 10 8 !important;
}

.english-lessons-view-container {
  background-size: 400% 400%;
  animation: welcomeBgMove 15s ease infinite;
  min-height: 100vh;
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
}

/* Clases de Fondos Temáticos para la pantalla de Lecciones */
.english-lessons-view-container.lessons-bg-theme-0 { background: linear-gradient(135deg, #7dd3fc 0%, #bae6fd 100%) !important; }
.english-lessons-view-container.lessons-bg-theme-1 { background: linear-gradient(135deg, #e9d5ff 0%, #f3e8ff 100%) !important; }
.english-lessons-view-container.lessons-bg-theme-2 { background: linear-gradient(135deg, #fecdd3 0%, #ffe4e6 100%) !important; }
.english-lessons-view-container.lessons-bg-theme-3 { background: linear-gradient(135deg, #99f6e4 0%, #ccfbf1 100%) !important; }
.english-lessons-view-container.lessons-bg-theme-4 { background: linear-gradient(135deg, #fed7aa 0%, #ffedd5 100%) !important; }
.english-lessons-view-container.lessons-bg-theme-5 { background: linear-gradient(135deg, #fbcfe8 0%, #fce7f3 100%) !important; }
.english-lessons-view-container.lessons-bg-theme-6 { background: linear-gradient(135deg, #a7f3d0 0%, #d1fae5 100%) !important; }
.english-lessons-view-container.lessons-bg-theme-7 { background: linear-gradient(135deg, #ddd6fe 0%, #ede9fe 100%) !important; }
.english-lessons-view-container.lessons-bg-theme-review { background: linear-gradient(135deg, #15123a 0%, #260c38 100%) !important; }

/* Dibujos decorativos laterales */
.english-side-deco {
  position: absolute;
  user-select: none;
  pointer-events: none;
  font-size: 3.5rem;
  opacity: 0.85;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.2));
  z-index: 2;
}

.side-deco-left-1 { left: 10%; top: 15%; animation: floatDeco 6s ease-in-out infinite; }
.side-deco-left-2 { left: 14%; top: 48%; animation: floatDeco 8s ease-in-out infinite 1s; }
.side-deco-left-3 { left: 8%; top: 78%; animation: floatDeco 7s ease-in-out infinite 0.5s; }

.side-deco-right-1 { right: 10%; top: 18%; animation: floatDeco 6.5s ease-in-out infinite 1.5s; }
.side-deco-right-2 { right: 14%; top: 50%; animation: floatDeco 7.5s ease-in-out infinite 0.8s; }
.side-deco-right-3 { right: 8%; top: 80%; animation: floatDeco 8.5s ease-in-out infinite 1.2s; }

/* Ocultar en dispositivos móviles y tablets para evitar encimar texto */
@media (max-width: 1024px) {
  .english-side-deco {
    display: none !important;
  }
}

/* =========================================
   CAMINO DE AVENTURA (PATH TRAIL) Y DECORACIONES
   ========================================= */

.adventure-trail-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.trail-bg {
  stroke: rgba(4, 120, 87, 0.12);
  stroke-width: 12px;
}

/* En la pantalla de lecciones (azul), el color de fondo del sendero es azul claro */
.english-lessons-view-container .trail-bg {
  stroke: rgba(255, 255, 255, 0.1);
}

.trail-active {
  stroke: #10b981;
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 12 8;
  animation: dashScroll 4s linear infinite;
}

/* En la lección (azul), el camino activo es de un color celeste/cyan brillante */
.english-lessons-view-container .trail-active {
  stroke: #38bdf8;
}

@keyframes dashScroll {
  to {
    stroke-dashoffset: -40;
  }
}

/* Resaltado del Mundo/Lección Objetivo Actual */
.path-node.current-objective {
  animation: currentNodePulse 2.5s infinite ease-in-out, currentPop 1.5s ease-in-out infinite alternate !important;
  border: 4px solid #f59e0b !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.6) !important;
}

@keyframes currentPop {
  from { transform: scale(1.04); }
  to { transform: scale(1.12); }
}

@keyframes currentNodePulse {
  0%, 100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.5); }
  50% { box-shadow: 0 0 25px rgba(245, 158, 11, 0.9); }
}

/* Bandera de Objetivo Bouncing */
.node-objective-flag {
  position: absolute;
  top: -24px;
  right: -8px;
  font-size: 1.6rem;
  z-index: 6;
  animation: flagBounce 0.8s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
}

@keyframes flagBounce {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

/* Elementos decorativos esparcidos por el mapa */
.adventure-map-deco {
  position: absolute;
  font-size: 1.4rem;
  opacity: 0.65;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
  animation: floatDeco 9s ease-in-out infinite;
}

/* Posiciones de decoraciones */
.map-deco-1 { left: 24%; top: 14%; animation-delay: 0.5s; }
.map-deco-2 { right: 26%; top: 38%; animation-delay: 1.2s; }
.map-deco-3 { left: 28%; top: 62%; animation-delay: 2s; }
.map-deco-4 { right: 22%; top: 76%; animation-delay: 0.8s; }
.map-deco-5 { left: 12%; top: 42%; animation-delay: 1.5s; }
.map-deco-6 { right: 16%; top: 16%; animation-delay: 0.2s; }

/* Ocultar decoraciones de mapa y laterales en pantallas móviles */
@media (max-width: 1024px) {
  .adventure-map-deco {
    display: none !important;
  }
}

/* Colores personalizados para las tarjetas de mundos (Estilo Categorías de Juegos y Repaso) */
.node-info-bubble.world-card-color-0 {
  background: linear-gradient(135deg, #36d1dc, #5b86e5) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 20px rgba(91, 134, 229, 0.3) !important;
}
.node-info-bubble.world-card-color-1 {
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 20px rgba(118, 75, 162, 0.3) !important;
}
.node-info-bubble.world-card-color-2 {
  background: linear-gradient(135deg, #f953c6, #b91d73) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 20px rgba(185, 29, 115, 0.3) !important;
}
.node-info-bubble.world-card-color-3 {
  background: linear-gradient(135deg, #43cea2, #185a9d) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 20px rgba(24, 90, 157, 0.3) !important;
}
.node-info-bubble.world-card-color-4 {
  background: linear-gradient(135deg, #f7971e, #ffd200) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 20px rgba(247, 151, 30, 0.3) !important;
}
.node-info-bubble.world-card-color-5 {
  background: linear-gradient(135deg, #ff512f, #dd2476) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 20px rgba(221, 36, 118, 0.3) !important;
}
.node-info-bubble.world-card-color-6 {
  background: linear-gradient(135deg, #00c6ff, #0072ff) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 20px rgba(0, 114, 255, 0.3) !important;
}
.node-info-bubble.world-card-color-7 {
  background: linear-gradient(135deg, #7f00ff, #e100ff) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 20px rgba(225, 0, 255, 0.3) !important;
}
.node-info-bubble.world-card-color-review {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border: 1.5px solid #fef08a !important;
  box-shadow: 0 12px 25px rgba(245, 158, 11, 0.35) !important;
}

/* Etiqueta de Mundo Completado */
.world-completed-badge {
  display: inline-block;
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: white !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  margin-top: 6px !important;
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.25) !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  animation: badgePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes badgePop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

/* ── DISEÑO DE TARJETAS MULTIPLES (APRENDO / PRACTICO / DEMUESTRO) ── */
.english-lesson-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 50px 20px 40px;
  min-height: 100vh;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

/* === BASE: Propiedades por defecto (Tema 0: Azul Holo) === */
.english-concept-board {
  --holo-bg: #16253d;
  --holo-border: #38bdf8;
  --holo-glow: rgba(56, 189, 248, 0.35);
  --holo-illus-start: #1e1b4b;
  --holo-illus-end: #0f2040;
  --holo-illus-border: rgba(56, 189, 248, 0.5);
  --holo-badge-bg: #075985;
  --holo-badge-color: #38bdf8;
  background: var(--holo-bg) !important;
  border-radius: 32px !important;
  padding: 26px !important;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 0 25px var(--holo-glow), 0 20px 45px rgba(0, 0, 0, 0.4) !important;
  border: 4px solid var(--holo-border) !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px !important;
  animation: cardEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* === TEMA 0: Azul Holo / Espacio Profundo (default) === */
.holo-theme-0 {
  --holo-bg: #16253d;
  --holo-border: #38bdf8;
  --holo-glow: rgba(56, 189, 248, 0.35);
  --holo-illus-start: #1e1b4b;
  --holo-illus-end: #0f2040;
  --holo-illus-border: rgba(56, 189, 248, 0.5);
  --holo-badge-bg: #075985;
  --holo-badge-color: #38bdf8;
}

/* === TEMA 1: Púrpura Holo / Nebulosa === */
.holo-theme-1 {
  --holo-bg: #21123f;
  --holo-border: #c084fc;
  --holo-glow: rgba(192, 132, 252, 0.4);
  --holo-illus-start: #2e1065;
  --holo-illus-end: #1a0533;
  --holo-illus-border: rgba(192, 132, 252, 0.5);
  --holo-badge-bg: #4c1d95;
  --holo-badge-color: #c084fc;
}

/* === TEMA 2: Verde Holo / Supernova Esmeralda === */
.holo-theme-2 {
  --holo-bg: #0d3c32;
  --holo-border: #34d399;
  --holo-glow: rgba(52, 211, 153, 0.4);
  --holo-illus-start: #064e3b;
  --holo-illus-end: #011c17;
  --holo-illus-border: rgba(52, 211, 153, 0.5);
  --holo-badge-bg: #065f46;
  --holo-badge-color: #34d399;
}

/* === TEMA 3: Rojo Holo / Rubí Estelar === */
.holo-theme-3 {
  --holo-bg: #331515;
  --holo-border: #f87171;
  --holo-glow: rgba(248, 113, 113, 0.4);
  --holo-illus-start: #450a0a;
  --holo-illus-end: #1c0303;
  --holo-illus-border: rgba(248, 113, 113, 0.5);
  --holo-badge-bg: #7f1d1d;
  --holo-badge-color: #f87171;
}

/* === TEMA 4: Ámbar Holo / Sol de Fuego === */
.holo-theme-4 {
  --holo-bg: #332110;
  --holo-border: #fbbf24;
  --holo-glow: rgba(251, 191, 36, 0.4);
  --holo-illus-start: #451a03;
  --holo-illus-end: #1c0d00;
  --holo-illus-border: rgba(251, 191, 36, 0.5);
  --holo-badge-bg: #78350f;
  --holo-badge-color: #fbbf24;
}

/* === TEMA 5: Fucsia Holo / Plasma === */
.holo-theme-5 {
  --holo-bg: #2c1136;
  --holo-border: #f472b6;
  --holo-glow: rgba(244, 114, 182, 0.4);
  --holo-illus-start: #500724;
  --holo-illus-end: #1a0512;
  --holo-illus-border: rgba(244, 114, 182, 0.5);
  --holo-badge-bg: #831843;
  --holo-badge-color: #f472b6;
}

/* === TEMA 6: Naranja Holo / Tornado Cósmico === */
.holo-theme-6 {
  --holo-bg: #331c10;
  --holo-border: #fb923c;
  --holo-glow: rgba(251, 146, 60, 0.4);
  --holo-illus-start: #431407;
  --holo-illus-end: #1c0600;
  --holo-illus-border: rgba(251, 146, 60, 0.5);
  --holo-badge-bg: #7c2d12;
  --holo-badge-color: #fb923c;
}

/* === TEMA 7: Índigo Holo / Agujero de Gusano === */
.holo-theme-7 {
  --holo-bg: #181a38;
  --holo-border: #818cf8;
  --holo-glow: rgba(129, 140, 248, 0.4);
  --holo-illus-start: #1e1b6e;
  --holo-illus-end: #08093a;
  --holo-illus-border: rgba(129, 140, 248, 0.5);
  --holo-badge-bg: #312e81;
  --holo-badge-color: #818cf8;
}

/* === TEMA 8: Turquesa Holo / Jade Interestelar === */
.holo-theme-8 {
  --holo-bg: #0d2f33;
  --holo-border: #2dd4bf;
  --holo-glow: rgba(45, 212, 191, 0.4);
  --holo-illus-start: #134e4a;
  --holo-illus-end: #021212;
  --holo-illus-border: rgba(45, 212, 191, 0.5);
  --holo-badge-bg: #0f4f4d;
  --holo-badge-color: #2dd4bf;
}

/* === TEMA 9: Oro Holo / Desafío Dorado 👑 === */
.holo-theme-9 {
  --holo-bg: #2d240d;
  --holo-border: #eab308;
  --holo-glow: rgba(234, 179, 8, 0.5);
  --holo-illus-start: #3d2e00;
  --holo-illus-end: #1a1100;
  --holo-illus-border: rgba(234, 179, 8, 0.6);
  --holo-badge-bg: #713f12;
  --holo-badge-color: #eab308;
}

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

.board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.board-badge-type {
  background: var(--holo-badge-bg, #075985) !important;
  color: var(--holo-badge-color, #38bdf8) !important;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 5px 12px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background 0.5s ease, color 0.5s ease;
}

.board-badge-type.badge-practice {
  background: var(--holo-badge-bg, #075985) !important;
  color: var(--holo-badge-color, #38bdf8) !important;
}

.board-badge-type.badge-demo {
  background: var(--holo-badge-bg, #075985) !important;
  color: var(--holo-badge-color, #38bdf8) !important;
}

.board-progress-bar {
  flex: 1;
  height: 14px !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px !important;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.board-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #fb923c, #ef4444, #10b981) !important;
  border-radius: 12px !important;
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.board-progress-fraction {
  background: var(--holo-badge-bg, #075985) !important;
  color: var(--holo-badge-color, #38bdf8) !important;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 12px;
  transition: background 0.5s ease, color 0.5s ease;
}

.concept-illustration-box {
  background: linear-gradient(135deg, var(--holo-illus-start, #1e1b4b) 0%, var(--holo-illus-end, #311042) 100%) !important;
  border-radius: 20px !important;
  height: 140px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px dashed var(--holo-illus-border, rgba(56, 189, 248, 0.5)) !important;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.3) !important;
  transition: background 0.5s ease, border-color 0.5s ease;
}

.concept-illustration-box.practice-box,
.concept-illustration-box.demo-box {
  background: linear-gradient(135deg, var(--holo-illus-start, #1e1b4b) 0%, var(--holo-illus-end, #0f172a) 100%) !important;
  border-color: var(--holo-illus-border, rgba(56, 189, 248, 0.5)) !important;
}

.concept-visual-element {
  font-size: 5.8rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.1)) !important;
  animation: floatMascot 4s ease-in-out infinite !important;
}

@keyframes floatMascot {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.05); }
}

.concept-detail-card {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 20px !important;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.concept-detail-card.practice-detail {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.concept-detail-card.demo-detail {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.lang-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lang-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.lang-label.label-en {
  color: #7dd3fc !important;
}

.lang-label.label-es {
  color: #fb923c !important;
}

.lang-word {
  margin: 0;
  font-weight: 900;
  font-size: 1.9rem !important;
}

.lang-word.word-en {
  color: #38bdf8 !important;
  font-family: 'Fredoka One', sans-serif !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.5) !important;
}

.lang-word.word-es {
  color: #e2e8f0 !important;
  font-size: 1.4rem !important;
  text-shadow: 0 0 8px rgba(226, 232, 240, 0.25) !important;
}

.lang-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12) !important;
  width: 100%;
}

.concept-explanation {
  font-size: 0.85rem;
  color: #4b5563;
  line-height: 1.4;
  margin: 0;
}

.concept-action-buttons {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

.concept-action-buttons .btn {
  flex: 1;
  height: 48px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  box-sizing: border-box;
  border: none;
}

.btn-action-prev {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.btn-action-prev:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-action-listen {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: white !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 4px 12px rgba(3, 105, 161, 0.3) !important;
}

.btn-action-listen:active {
  background: linear-gradient(135deg, #0369a1, #075985) !important;
}

.btn-action-next {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.btn-action-next:active {
  background: linear-gradient(135deg, #059669, #047857) !important;
  transform: scale(0.98);
}

.concept-footer-banner {
  margin-top: 24px;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 12px 30px;
  border-radius: 30px;
  box-shadow: none !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  animation: pulseBanner 2s infinite;
  text-align: center;
  max-width: 90%;
}

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

.mock-activity-playground {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mock-play-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: #475569;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mock-interactive-box {
  background: white;
  border-radius: 12px;
  border: 1px dashed rgba(139, 92, 246, 0.25);
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mock-interactive-box.demo-icon-box {
  border-color: rgba(245, 158, 11, 0.25);
}

/* Elementos decorativos flotantes a los lados de la lección */
.lesson-deco-side {
  position: absolute;
  font-size: 3rem;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  animation: floatDeco 5s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
}

.deco-left-1 { left: 10%; top: 22%; animation-delay: 0s; }
.deco-left-2 { left: 8%; bottom: 25%; animation-delay: 2.5s; }
.deco-right-1 { right: 10%; top: 25%; animation-delay: 1.2s; }
.deco-right-2 { right: 8%; bottom: 22%; animation-delay: 3.7s; }

@keyframes floatDeco {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(6deg); }
}

@media (max-width: 768px) {
  .lesson-deco-side {
    font-size: 1.8rem;
    opacity: 0.35; /* Efecto marca de agua semitransparente para que no estorbe */
  }
  .deco-left-1 { left: 4%; top: 15%; }
  .deco-left-2 { left: 3%; bottom: 20%; }
  .deco-right-1 { right: 4%; top: 18%; }
  .deco-right-2 { right: 3%; bottom: 18%; }
}

/* ── PANTALLAS REPRODUCTOR DE JUEGO (IFRAME PLAYER) ── */
.screen-game-player {
  background: #0b0f19;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  z-index: 99999; /* Mayor prioridad para superponerse a otras pantallas */
  
  /* CORRECCIÓN: Forzar altura completa y desactivar scroll de pantalla */
  overflow: hidden !important;
  height: 100% !important;
  width: 100% !important;
  position: fixed;
  inset: 0;
}

.game-player-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: #1e293b;
  color: white;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-sizing: border-box;
  height: 56px;
  flex-shrink: 0;
}

.btn-game-back {
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 8px;
  color: white;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.btn-game-back:active {
  background: rgba(255,255,255,0.2);
}

.game-player-header h2 {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0;
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}

.game-player-frame-wrap {
  flex: 1;
  width: 100%;
  position: relative;
  background: #000;
}

.game-player-frame-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ── BOTÓN VOLVER EN GRID DE CATEGORÍAS ── */
.cat-back-wrap {
  padding: 8px 16px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-cat-back-map {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  color: #a5b4fc;
  padding: 12px 24px;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  width: 100%;
  max-width: 280px;
  transition: all 0.25s;
  text-align: center;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.btn-cat-back-map:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.16);
}

/* ── PANTALLA DE GRADUACIÓN Y DIPLOMA ── */
.english-graduation-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  min-height: 100vh;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  color: white;
}

.graduation-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 800px;
  width: 100%;
  text-align: center;
  z-index: 10;
}

.graduation-title {
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  color: #fbbf24 !important;
  text-shadow: 0 4px 8px rgba(0,0,0,0.3);
  margin-bottom: 8px !important;
  animation: bouncePop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.graduation-subtitle {
  font-size: 1.1rem !important;
  color: #e2e8f0 !important;
  margin-bottom: 30px !important;
}

.name-entry-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 25px;
  width: 100%;
  max-width: 380px;
}

.name-entry-section label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #cbd5e1;
}

.name-entry-section input {
  padding: 12px 18px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 12px;
  border: 2px solid rgba(251, 191, 36, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  transition: all 0.3s;
}

.name-entry-section input:focus {
  border-color: #fbbf24;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

/* El Diploma imprimible */
.graduation-diploma-card {
  width: 100%;
  max-width: 650px;
  aspect-ratio: 1.414; /* Proporción A4 apaisado */
  background: #fffdf5; /* Off-white pergamino */
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  color: #1e293b;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
  border: 6px solid #d97706; /* Golden border */
}

.diploma-border-outer {
  border: 4px double #b45309;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.diploma-border-inner {
  border: 1.5px solid #d97706;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.diploma-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.diploma-mascot {
  font-size: 0.85rem;
  font-weight: 800;
  color: #d97706;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.diploma-header h3 {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #78350f !important;
  margin: 4px 0 !important;
  letter-spacing: 0.04em;
  font-family: 'Outfit', 'Georgia', serif;
}

.diploma-header p {
  font-size: 0.82rem !important;
  color: #64748b !important;
  margin: 0 !important;
  font-style: italic;
}

.diploma-name-display {
  font-size: 2.2rem !important;
  font-weight: 900 !important;
  color: #b45309 !important;
  border-bottom: 2px solid #cbd5e1;
  padding: 0 20px 4px;
  min-width: 250px;
  max-width: 90%;
  text-align: center;
  font-family: 'Outfit', 'Times New Roman', serif;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diploma-body {
  text-align: center;
  margin: 6px 0;
}

.diploma-body p {
  font-size: 0.82rem !important;
  color: #475569 !important;
  margin: 0 !important;
}

.diploma-body h4 {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: #d97706 !important;
  margin: 4px 0 0 !important;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.02em;
}

.diploma-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 8px;
}

.diploma-seal {
  font-size: 2.4rem;
  line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(180, 83, 9, 0.2));
}

.diploma-date {
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
  border-top: 1.5px solid #cbd5e1;
  padding-top: 4px;
  min-width: 100px;
}

.graduation-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  width: 100%;
}

/* Animación Confeti */
.confetti-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 18px;
  background: #fbbf24;
  top: -20px;
  border-radius: 3px;
  animation: confettiFall 4s linear infinite;
}

.confetti-piece:nth-child(1) { left: 8%; background: #ef4444; animation-delay: 0.2s; animation-duration: 3.5s; }
.confetti-piece:nth-child(2) { left: 18%; background: #3b82f6; animation-delay: 0.8s; animation-duration: 4s; }
.confetti-piece:nth-child(3) { left: 28%; background: #10b981; animation-delay: 1.2s; animation-duration: 3s; }
.confetti-piece:nth-child(4) { left: 40%; background: #a855f7; animation-delay: 0s; animation-duration: 4.5s; }
.confetti-piece:nth-child(5) { left: 52%; background: #fb923c; animation-delay: 2s; animation-duration: 3.8s; }
.confetti-piece:nth-child(6) { left: 64%; background: #ec4899; animation-delay: 1.5s; animation-duration: 3.3s; }
.confetti-piece:nth-child(7) { left: 76%; background: #6366f1; animation-delay: 0.5s; animation-duration: 4.2s; }
.confetti-piece:nth-child(8) { left: 84%; background: #14b8a6; animation-delay: 2.2s; animation-duration: 3.6s; }
.confetti-piece:nth-child(9) { left: 92%; background: #facc15; animation-delay: 1s; animation-duration: 4.1s; }

@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ── REGLAS DE IMPRESIÓN (DIPLOMA LIMPIO) ── */
@media print {
  body * {
    visibility: hidden;
  }
  .graduation-diploma-card, .graduation-diploma-card * {
    visibility: visible;
  }
  .graduation-diploma-card {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    width: 297mm !important; /* Ancho A4 estándar */
    height: 210mm !important; /* Alto A4 estándar */
    box-sizing: border-box !important;
  }
  @page {
    size: landscape;
    margin: 0;
  }
}

/* Ajustes de contraste para la cabecera en lecciones */
.english-lessons-view-container .english-course-header h2 {
  color: #1e293b !important;
  font-weight: 800 !important;
}

.english-lessons-view-container .english-course-header p {
  color: #475569 !important;
  font-weight: 600 !important;
}

/* Ajustes de contraste para el hito de Repaso (Fondo Oscuro) */
.english-lessons-view-container.lessons-bg-theme-review .english-course-header h2 {
  color: #fbbf24 !important; /* Gold title */
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.english-lessons-view-container.lessons-bg-theme-review .english-course-header p {
  color: #cbd5e1 !important; /* Silver subtitle */
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Botón de regresar en la vista de repaso oscuro */
.english-lessons-view-container.lessons-bg-theme-review .view-header-bar .btn-secondary,
.english-lessons-view-container.lessons-bg-theme-review .btn-back {
  background: rgba(255, 255, 255, 0.15) !important;
  color: white !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}

.english-lessons-view-container.lessons-bg-theme-review .view-header-bar .btn-secondary:hover,
.english-lessons-view-container.lessons-bg-theme-review .btn-back:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* ════════════════════════════════════════════════════════════
   MOTOR DE JUEGO – Misión Decodificador
════════════════════════════════════════════════════════════ */

/* --- Pantalla de Lanzamiento --- */
.game-launch-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 32px 26px !important;
}

.game-launch-icon {
  font-size: 5rem;
  animation: floatMascot 3s ease-in-out infinite;
}

.game-launch-title {
  font-family: 'Fredoka One', sans-serif;
  font-size: 1.9rem;
  color: var(--holo-border, #38bdf8);
  margin: 0;
  text-shadow: 0 0 12px var(--holo-glow, rgba(56,189,248,0.4));
}

.game-launch-subtitle {
  color: #cbd5e1;
  font-size: 1rem;
  margin: 0;
  line-height: 1.5;
}

.game-launch-words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.game-word-chip {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.85rem;
  font-weight: 700;
}

.btn-game-start {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 14px 36px;
  font-size: 1.15rem;
  font-weight: 900;
  font-family: 'Fredoka One', sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
  margin-top: 8px;
}

.btn-game-start:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 28px rgba(16, 185, 129, 0.55);
}

.btn-game-start:active {
  transform: scale(0.97);
}

/* --- Pregunta del Juego --- */
.game-question-text {
  color: #e2e8f0;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  padding: 0 4px;
}

.game-question-text strong {
  color: var(--holo-border, #38bdf8);
  font-size: 1.25rem;
}

/* --- Grilla de Opciones --- */
.game-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.game-option-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  color: #e2e8f0;
  font-size: 1rem;
  font-weight: 800;
  font-family: 'Fredoka One', sans-serif;
  padding: 14px 8px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
}

.game-option-btn:hover:not([data-answered]) {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--holo-border, #38bdf8);
  transform: scale(1.04);
}

.game-option-btn.correct {
  background: rgba(16, 185, 129, 0.3) !important;
  border-color: #34d399 !important;
  color: #a7f3d0 !important;
  transform: scale(1.05);
}

.game-option-btn.wrong {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: #f87171 !important;
  color: #fca5a5 !important;
  opacity: 0.7;
}

/* --- Feedback --- */
.game-feedback {
  text-align: center;
  min-height: 28px;
  font-size: 1rem;
  font-weight: 800;
}

.feedback-correct {
  color: #34d399;
  animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feedback-wrong {
  color: #f87171;
  animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popIn {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* --- Pantalla de Resultados --- */
.game-result-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 32px 26px !important;
}

.game-result-icon {
  font-size: 5rem;
  animation: floatMascot 3s ease-in-out infinite;
}

.game-result-stars {
  font-size: 2.2rem;
  letter-spacing: 4px;
}

.game-result-title {
  font-family: 'Fredoka One', sans-serif;
  font-size: 1.6rem;
  color: var(--holo-border, #38bdf8);
  margin: 0;
  text-shadow: 0 0 10px var(--holo-glow, rgba(56,189,248,0.4));
}

.game-result-score {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  color: #e2e8f0;
  font-size: 1.1rem;
  font-weight: 800;
  padding: 10px 24px;
}

/* --- Estilos Adicionales del Multijuego --- */

/* Hover & clicks para las opciones de emojis (Listening) */
.game-emoji-option-btn:hover {
  transform: scale(1.08);
  border-color: var(--holo-border, #38bdf8) !important;
  background: rgba(255,255,255,0.15) !important;
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.25);
}

.game-emoji-option-btn:active {
  transform: scale(0.95);
}

/* Tarjetas de Matching */
.game-match-btn {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 14px;
  color: white;
  font-size: 0.92rem;
  font-weight: 800;
  font-family: 'Fredoka One', sans-serif;
  padding: 11px 4px;
  cursor: pointer;
  text-align: center;
  position: relative;
  will-change: transform;
  transition: all 0.2s;
}

.game-match-btn.left-card.selected {
  border-color: #38bdf8 !important;
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
  animation: pulseSelection 1.2s infinite alternate;
}

.game-match-btn.right-card.selected {
  border-color: #f472b6 !important;
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(244, 114, 182, 0.5);
  animation: pulseSelection 1.2s infinite alternate;
}

.game-match-btn.matched {
  opacity: 0.25 !important;
  transform: scale(0.9) !important;
  text-decoration: line-through !important;
  pointer-events: none !important;
  border-color: #10b981 !important;
}

@keyframes pulseSelection {
  0% { transform: scale(1.02); }
  100% { transform: scale(1.06); }
}

/* Micrófono del Speaking */
.game-speak-mic-btn.recording {
  animation: pulseRecording 1s infinite alternate;
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.8) !important;
  background: #ef4444 !important;
}

@keyframes pulseRecording {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.15); opacity: 1; }
}

.game-speak-mic-btn:hover {
  transform: scale(1.08);
}

.game-speak-mic-btn:active {
  transform: scale(0.95);
}

.launch-phase-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s;
}

.launch-phase-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}

/* --- Dictation Styles --- */
#dictationInput:focus {
  border-color: var(--holo-border, #38bdf8) !important;
  box-shadow: 0 0 12px var(--holo-glow, rgba(56, 189, 248, 0.35)), inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

#dictationInput::placeholder {
  color: #64748b;
  opacity: 0.8;
}

.dictation-letter-guide {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

/* Shuffling animation */
.matching-column.shuffling {
  animation: shuffleCards 0.8s ease-in-out;
}

@keyframes shuffleCards {
  0% { transform: scale(1); opacity: 1; filter: blur(0); }
  40% { transform: scale(0.8) rotate(5deg); opacity: 0.5; filter: blur(2px); }
  60% { transform: scale(0.8) rotate(-5deg); opacity: 0.5; filter: blur(2px); }
  100% { transform: scale(1); opacity: 1; filter: blur(0); }
}

/* Feedback wrong shake for matched card */
.game-match-btn.wrong {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: #f87171 !important;
  color: #fca5a5 !important;
  animation: shakeCard 0.4s ease-in-out;
}

@keyframes shakeCard {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Optimizaciones para Móviles (PWA) de PlayClass English */
@media (max-width: 767px) {
  /* Centrado vertical del tablero */
  .english-lesson-container {
    justify-content: center !important;
    padding: 35px 16px 20px !important;
  }

  /* Hacer el tablero de aprendizaje y juego más alto */
  .concept-illustration-box {
    height: 190px !important;
  }
  .concept-visual-element {
    font-size: 7.2rem !important;
  }

  /* Botones de emparejamiento (matching) más grandes y cómodos */
  .game-match-btn {
    padding: 16px 8px !important;
    font-size: 1.05rem !important;
    border-radius: 16px !important;
  }
}

/* Splash Announcements styles */
.splash-announcements-container {
  width: 85%;
  max-width: 360px;
  margin: 10px auto 0;
  z-index: 10;
  position: relative;
  max-height: 48vh;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  animation: fadeInUp 0.6s ease forwards;
}

.splash-announcements-container::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

.splash-ann-header {
  font-family: "Fredoka One", sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  margin-bottom: 12px;
  text-shadow: 0 2px 8px rgba(79,70,229,0.6);
  letter-spacing: 0.5px;
}

.splash-ann-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 20px;
}

.splash-ann-card {
  border-radius: 20px;
  padding: 14px;
  color: #ffffff;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.splash-ann-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.splash-ann-icon {
  font-size: 1.3rem;
}

.splash-ann-type {
  font-size: 0.65rem;
  font-weight: 800;
  background: rgba(255,255,255,0.2);
  padding: 2px 10px;
  border-radius: 50px;
  letter-spacing: 0.8px;
}

.splash-ann-card-title {
  font-family: "Fredoka One", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 4px;
  line-height: 1.3;
}

.splash-ann-card-msg {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
}

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

/* ── BADGES NUEVOS JUEGOS (MÓVIL) ──────────────── */
.cat-new-badge {
  display: block;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 50px;
  margin-top: 3px;
  width: fit-content;
  box-shadow: 0 2px 8px rgba(16,185,129,0.35);
}

.world-new-badge {
  display: inline;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 50px;
  margin-left: 4px;
  box-shadow: 0 2px 6px rgba(16,185,129,0.3);
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .world-title-multiline {
    text-align: center;
    line-height: 1.05;
    display: flex;
    flex-direction: column;
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
    font-size: 0.78rem;
    gap: 0;
  }
}
/* ============================================
   TUTORIAL INTERACTIVO - CONTROL PARENTAL (PWA)
   ============================================ */

@media (max-width: 768px) {
    .tutorial-slide {
        padding: 24px 16px;
        min-height: 320px;
        border-radius: 24px;
    }
    
    .tutorial-icon {
        font-size: 3.5rem;
        margin-bottom: 12px;
    }
    
    .tutorial-title {
        font-size: 1.4rem;
        margin-bottom: 12px;
    }
    
    .tutorial-description {
        font-size: 0.95rem;
        margin-bottom: 16px;
    }
    
    .tutorial-visual-hint {
        padding: 14px;
        margin-bottom: 16px;
    }
    
    .tutorial-visual-hint .hint-icon {
        font-size: 2.5rem;
    }
    
    .tutorial-btn-prev,
    .tutorial-btn-next,
    .tutorial-btn-finish {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
    
    .tutorial-dots {
        gap: 6px;
        margin-bottom: 20px;
    }
    
    .tutorial-dot {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .tutorial-carousel {
        padding: 12px;
    }
    
    .tutorial-slide {
        padding: 20px 12px;
        min-height: 280px;
    }
    
    .tutorial-icon {
        font-size: 3rem;
    }
    
    .tutorial-title {
        font-size: 1.2rem;
    }
    
    .tutorial-description {
        font-size: 0.85rem;
    }
    
    .tutorial-nav {
        gap: 8px;
    }
}