:root {
  /* Paleta cósmica PlanetAlí (manual de marca v1) */
  --azul: #0B1437;        /* espacio */
  --azul2: #11224F;       /* panel */
  --crema: #FFF6E6;
  --rosa: #F0689E;        /* coral estrella */
  --amarillo: #F2B33D;    /* dorado Alí */
  --verde: #36C95F;       /* verde juego */
  --azul-planeta: #2E7FE4;
  --pelo: #EE6C3A;
  --piel: #F8C49E;
  /* tonos inferiores de los botones "de caramelo" (relieve 3D) */
  --dorado-b: #C8881E; --verde-b: #259246; --azul-b: #1E5DB0; --coral-b: #C9477B; --crema-b: #E2D4B8;
  --sombra: 0 10px 30px rgba(0,0,0,.35);
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Títulos, logo y botones usan Fredoka (redonda y amigable) */
h1, h2, h3, .logo, .pill, .big-btn, .btn-voz, .idioma, .sorpresa-titulo, .sorpresa-nombre, .card-title h1, .fin-estrellas + h2, #fin-titulo { font-family: 'Fredoka', 'Nunito', sans-serif; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: radial-gradient(1200px 760px at 70% -5%, #16235C 0%, var(--azul) 45%, #060B22 100%);
  color: var(--crema);
  overscroll-behavior: none; touch-action: none;
}

#globe { position: fixed; inset: 0; }

/* Encabezado */
#top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(env(safe-area-inset-top), 12px) 14px 12px;
  pointer-events: none;
}
.logo {
  position: fixed; left: 14px; bottom: max(env(safe-area-inset-bottom), 16px); z-index: 11;
  display: flex; align-items: center; gap: 9px; pointer-events: none;
}
.logo-cara {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: 50% 36%;
  border: 2px solid var(--amarillo); background: radial-gradient(circle at 50% 35%, #16306E, #0A1638);
  box-shadow: 0 3px 10px rgba(0,0,0,.5);
}
.logo-txt { font-weight: 700; font-size: 1.55rem; letter-spacing: -.5px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.logo-txt b { color: var(--crema); font-weight: 700; }
.logo-txt i { color: var(--amarillo); font-style: normal; font-weight: 700; }
.top-btns { display: flex; gap: 8px; pointer-events: auto; flex-wrap: wrap; justify-content: flex-end; width: 100%; align-items: center; }
#btn-jugar { margin-right: auto; } /* Jugar a la izquierda, íconos a la derecha (ocupan todo el ancho de arriba) */

/* Botones "de caramelo": brillo arriba + borde inferior sólido (relieve 3D). */
.pill {
  border: none; border-radius: 999px; padding: 0 18px; min-height: 52px;
  font-weight: 600; font-size: 1.05rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--azul-planeta); color: #fff;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 6px 0 var(--azul-b), 0 11px 14px rgba(0,0,0,.34);
  transition: transform .07s ease, box-shadow .07s ease;
}
.pill:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 2px 0 var(--azul-b), 0 4px 7px rgba(0,0,0,.34); }
/* Botones-ícono redondos del encabezado */
#btn-buscar, #btn-sorpresa, #btn-settings, #btn-ayuda { width: 56px; min-height: 56px; padding: 0; border-radius: 50%; font-size: 1.45rem; }
#btn-buscar { background: var(--amarillo); color: var(--azul); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 6px 0 var(--dorado-b), 0 11px 14px rgba(0,0,0,.34); }
#btn-buscar:active { box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 2px 0 var(--dorado-b), 0 4px 7px rgba(0,0,0,.34); }
#btn-sorpresa, #btn-ayuda { background: var(--rosa); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 6px 0 var(--coral-b), 0 11px 14px rgba(0,0,0,.34); }
#btn-sorpresa:active, #btn-ayuda:active { box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 2px 0 var(--coral-b), 0 4px 7px rgba(0,0,0,.34); }
/* Acción principal: Jugar (verde) */
.principal { background: var(--verde); color: #063018; padding: 0 22px; font-size: 1.15rem;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 6px 0 var(--verde-b), 0 11px 14px rgba(0,0,0,.34); }
.principal:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 2px 0 var(--verde-b), 0 4px 7px rgba(0,0,0,.34); }

/* Zoom */
#zoom-ctrls {
  position: fixed; right: 14px; bottom: max(env(safe-area-inset-bottom), 18px);
  display: flex; flex-direction: column; gap: 12px; z-index: 10;
}
#zoom-ctrls button {
  width: 60px; height: 60px; border-radius: 50%; border: none;
  font-size: 1.55rem; cursor: pointer; color: var(--azul);
  background: var(--crema);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.7), 0 6px 0 var(--crema-b), 0 11px 14px rgba(0,0,0,.34);
  transition: transform .07s ease, box-shadow .07s ease;
}
#zoom-ctrls button:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.6), 0 2px 0 var(--crema-b), 0 4px 7px rgba(0,0,0,.34); }
#btn-girar { background: var(--azul-planeta); color: #fff; box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 6px 0 var(--azul-b), 0 11px 14px rgba(0,0,0,.34); }
#btn-casa { background: var(--verde); color: #063018; box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 6px 0 var(--verde-b), 0 11px 14px rgba(0,0,0,.34); }
#btn-girar.activo { background: var(--verde); color: #06351c; animation: girando 3s linear infinite; }
@keyframes girando { to { transform: rotate(360deg); } }

/* Tarjeta país */
#card {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  max-height: 50vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--azul2), #0c1430);
  border-radius: 28px 28px 0 0; box-shadow: 0 -14px 40px rgba(0,0,0,.5);
  padding: 22px 20px calc(28px + env(safe-area-inset-bottom));
  transform: translateY(0); transition: transform .35s cubic-bezier(.2,.9,.3,1.2);
  border-top: 4px solid rgba(255,255,255,.08);
}
#card.hidden { transform: translateY(110%); }
#card-close {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px;
  border-radius: 50%; border: none; background: rgba(255,255,255,.12);
  color: var(--crema); font-size: 1.1rem; cursor: pointer;
}

.card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.card-flag {
  width: 92px; height: auto; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.5); background: #fff;
}
.card-emoji {
  width: 92px; height: 64px; border-radius: 10px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 2.8rem;
  background: rgba(255,255,255,.1); box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.card-title h1 { margin: 0; font-size: 2rem; line-height: 1.05; }
.card-title .cap { margin: 4px 0 0; font-size: 1.1rem; opacity: .9; }
.card-title .cap b { color: var(--amarillo); }

/* Botón de voz: solo la cornetita, redondo y junto a la X (aprovecha el espacio). */
.btn-voz {
  position: absolute; top: 64px; right: 14px; z-index: 2;
  width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
  background: var(--azul-planeta); color: #fff; font-size: 1.2rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 5px 0 var(--azul-b), 0 8px 12px rgba(0,0,0,.34);
  transition: transform .07s ease, box-shadow .07s ease;
}
.btn-voz:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 2px 0 var(--azul-b), 0 3px 6px rgba(0,0,0,.34); }

.seccion { margin-top: 18px; }
.seccion h3 { margin: 0 0 10px; font-size: 1.15rem; color: var(--amarillo); }

/* Una sola fila horizontal: los 3 o 4 animales se reparten el ancho (no se baja ninguno). */
.animales { display: flex; flex-wrap: nowrap; gap: 7px; align-items: stretch; }
.animal {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: #1c2c54; border-radius: 16px; padding: 6px 5px 8px;
  flex: 1 1 0; min-width: 0;
  transition: transform .08s ease;
}
/* Foto del animal: cuadrada y recortada para que TODAS se vean iguales de simétricas */
.animal-foto-wrap {
  position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px;
  overflow: hidden; background: #24365f; display: flex; align-items: center; justify-content: center;
}
.animal-foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.animal .emoji { font-size: 1.9rem; line-height: 1; }
.emoji-fallback { display: none; }               /* solo aparece si la imagen falla */
.animal-foto-wrap.img-error .animal-foto { display: none; }
.animal-foto-wrap.img-error .emoji-fallback { display: flex; }
.animal .nombre { font-size: .72rem; opacity: .9; text-align: center; line-height: 1.1; word-break: break-word; hyphens: auto; }
.animal.con-media { cursor: pointer; }
.animal.con-media:active { transform: scale(.94); }
/* Animales con sonido: borde dorado + altavoz para invitar a tocarlos */
.animal.con-sonido .animal-foto-wrap { outline: 2px solid rgba(242,179,61,.6); outline-offset: -2px; }
.anim-play {
  position: absolute; bottom: 3px; right: 3px; font-size: .7rem; line-height: 1;
  background: rgba(0,0,0,.55); border-radius: 50%; padding: 3px 4px;
}
.animal.suena { animation: animalPulse .5s ease; }
.animal.suena .animal-foto-wrap { outline: 3px solid var(--amarillo); outline-offset: -3px; }
@keyframes animalPulse { 0% { transform: scale(1); } 40% { transform: scale(1.09); } 100% { transform: scale(1); } }

/* Modal de animal: foto real + sonido */
.animal-box {
  position: relative; background: var(--azul2); border-radius: 24px; padding: 20px;
  max-width: 360px; width: 88vw; text-align: center; box-shadow: var(--sombra);
}
.animal-box img {
  width: 100%; border-radius: 16px; display: block; background: rgba(255,255,255,.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
#animal-nombre { font-size: 1.6rem; font-weight: 800; margin: 14px 0; }
#animal-close {
  position: absolute; top: 10px; right: 10px; width: 42px; height: 42px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.45); color: var(--crema); font-size: 1rem; cursor: pointer; z-index: 2;
}

.datos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.datos li {
  background: #1a2a50; border-radius: 14px; padding: 12px 14px;
  font-size: 1.05rem; line-height: 1.35;
}

.pronto { font-size: 1.05rem; opacity: .85; margin-top: 14px; }

/* Overlays */
.overlay {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; text-align: center;
  background: rgba(7,12,32,.82); backdrop-filter: blur(6px); padding: 24px;
}
.overlay.hidden { display: none; }
.overlay-box {
  background: linear-gradient(150deg, #11224F, #0A1430); border: 1px solid rgba(120,150,230,.18);
  border-radius: 28px; padding: 26px 24px; max-width: 380px; box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
/* Alí en los overlays (bienvenida, ayuda) */
.ali-overlay { width: 116px; height: auto; display: block; margin: 2px auto -2px; filter: drop-shadow(0 12px 16px rgba(0,0,0,.4)); }
/* Recordatorio de la mejor puntuación en el menú de juego */
.menu-mejor {
  font-family: 'Fredoka', sans-serif; font-size: .95rem; font-weight: 600; color: var(--amarillo);
  background: rgba(242,179,61,.12); border: 1px solid rgba(242,179,61,.35);
  border-radius: 100px; padding: 7px 16px; margin: 2px auto 16px;
}
.overlay-box h2 { margin: 0 0 14px; font-size: 1.7rem; }
.overlay-box ul { text-align: left; margin: 0 0 20px; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.overlay-box li { font-size: 1.1rem; line-height: 1.3; }
.big-btn {
  border: none; border-radius: 999px; padding: 12px 28px; min-height: 60px; cursor: pointer;
  font-weight: 600; font-size: 1.25rem; color: #063018; background: var(--verde);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 6px 0 var(--verde-b), 0 12px 16px rgba(0,0,0,.4);
  transition: transform .07s ease, box-shadow .07s ease;
}
.overlay-box .big-btn { display: flex; width: 100%; margin: 0 auto 12px; }
.big-btn:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 2px 0 var(--verde-b), 0 5px 8px rgba(0,0,0,.4); }

/* === Ruleta sorpresa === */
.sorpresa-box { text-align: center; max-width: 90vw; }
.sorpresa-titulo { font-size: 1.5rem; font-weight: 800; margin-bottom: 20px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.sorpresa-cara {
  width: 240px; height: 160px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  animation: latido .55s ease-in-out infinite;
}
.sorpresa-cara img { width: 100%; height: auto; border-radius: 14px; border: 4px solid #fff; box-shadow: 0 12px 34px rgba(0,0,0,.7); }
.sorpresa-cara .sp-emoji { font-size: 7rem; }
.sorpresa-cara.revelado { animation: pop .55s cubic-bezier(.2,1.5,.4,1); }
.sorpresa-cara.revelado img { box-shadow: 0 0 0 5px var(--amarillo), 0 14px 40px rgba(0,0,0,.7); }
.sorpresa-nombre { font-size: 2.1rem; font-weight: 800; margin-top: 18px; min-height: 2.4rem; color: var(--amarillo); text-shadow: 0 2px 10px rgba(0,0,0,.5); }
@keyframes latido { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes pop { 0% { transform: scale(.3) rotate(-12deg); } 60% { transform: scale(1.18) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }

.loader { font-size: 4rem; animation: spin 2s linear infinite; }
.loader-ali { width: 150px; height: auto; animation: floaty 2.4s ease-in-out infinite; filter: drop-shadow(0 14px 20px rgba(0,0,0,.45)); }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Banderas sobre el globo */
.flag-pin { cursor: pointer; transform: translate(-50%, -50%); transition: opacity .2s; }
.flag-pin img {
  height: 60px; width: auto; border-radius: 7px; display: block;
  box-shadow: 0 4px 12px rgba(0,0,0,.7); border: 2px solid #fff;
}
.flag-pin:active img { transform: scale(1.25); }
.flags-off .flag-pin { display: none; }

/* === Bienvenida / perfil === */
.overlay-box .sub { margin: -6px 0 18px; opacity: .85; font-size: 1.05rem; }
.campo { display: block; text-align: left; font-weight: 700; font-size: 1.05rem; margin-bottom: 16px; }
.campo input {
  display: block; width: 100%; margin-top: 8px; border: none; border-radius: 14px;
  padding: 14px 16px; font-family: inherit; font-size: 1.15rem; font-weight: 600;
  background: var(--crema); color: var(--azul); box-sizing: border-box;
}
.campo input:focus { outline: 3px solid var(--amarillo); }
.edades { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.edad {
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); color: var(--crema); font-family: inherit;
  font-weight: 800; font-size: 1.3rem; cursor: pointer;
}
.edad.sel { background: var(--amarillo); color: var(--azul); border-color: var(--amarillo); transform: scale(1.08); }
/* Campos de perfil dentro de Ajustes (nombre + edad): más compactos */
.campo-mini { margin-bottom: 10px; font-size: .95rem; }
.campo-mini .edades { margin-top: 8px; }
.campo-mini .edad { width: 44px; height: 44px; font-size: 1.1rem; }
/* Botón Guardar del perfil en Ajustes */
.btn-guardar { min-height: 50px; font-size: 1.1rem; margin-top: 4px; }
.overlay-box .btn-guardar { width: auto; padding: 12px 30px; }
.btn-guardar.guardado-ok { background: var(--amarillo); color: var(--azul); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 6px 0 var(--dorado-b), 0 12px 16px rgba(0,0,0,.4); }

/* Selector de idioma */
.idiomas { display: flex; gap: 12px; justify-content: center; margin: 12px 0 4px; flex-wrap: wrap; }
.idioma {
  border: 2px solid rgba(255,255,255,.25); border-radius: 16px; padding: 14px 18px; cursor: pointer;
  background: rgba(255,255,255,.08); color: var(--crema); font-family: inherit; font-weight: 800; font-size: 1.1rem;
}
.idioma.sel { background: var(--amarillo); color: var(--azul); border-color: var(--amarillo); }
.idioma:active { transform: scale(.96); }
.dado-modo {
  border: 2px solid rgba(255,255,255,.25); border-radius: 16px; padding: 14px 20px; cursor: pointer;
  background: rgba(255,255,255,.08); color: var(--crema); font-family: inherit; font-weight: 800; font-size: 1.1rem;
}
.dado-modo.sel { background: var(--verde); color: #06351c; border-color: var(--verde); }
.dado-modo:active { transform: scale(.96); }
.voz-modo {
  border: 2px solid rgba(255,255,255,.25); border-radius: 16px; padding: 14px 20px; cursor: pointer;
  background: rgba(255,255,255,.08); color: var(--crema); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.1rem;
}
.voz-modo.sel { background: var(--azul-planeta); color: #fff; border-color: var(--azul-planeta); }
.voz-modo:active { transform: scale(.96); }
#btn-sorpresa.auto-on { animation: latido .7s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(255,210,63,.6), var(--sombra); }

/* === Marcador (países diminutos como Maldivas) === */
.marcador { cursor: pointer; pointer-events: auto; transform: translate(-50%, -100%); }
/* El contenido se escala según el zoom (--esc): de lejos las banderas se ven pequeñas. */
.marca-inner { display: flex; flex-direction: column; align-items: center; transform: scale(var(--esc, 1)); transform-origin: 50% 100%; transition: transform .12s ease-out; will-change: transform; }
.marcador img {
  height: 26px; width: auto; border-radius: 4px; border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.7);
}
.marca-emoji {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: #fff; font-size: 1.3rem;
  border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.7);
}
.marcador .punta {
  width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 8px solid #fff; margin-top: -1px;
}
.marcador:active img, .marcador:active .marca-emoji { transform: scale(1.2); }
#buscar-resultados .res-emoji { font-size: 1.5rem; width: 30px; text-align: center; }

/* === Buscador === */
#buscador {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  padding: max(env(safe-area-inset-top), 12px) 12px 12px;
  background: rgba(11,16,38,.96); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 10px; box-shadow: var(--sombra);
}
#buscador.hidden { display: none; }
.buscar-fila { display: flex; gap: 8px; align-items: center; }
#buscar-input {
  flex: 1; border: none; border-radius: 16px; padding: 14px 16px;
  font-family: inherit; font-size: 1.2rem; font-weight: 600;
  background: var(--crema); color: var(--azul);
}
#buscar-input:focus { outline: 3px solid var(--amarillo); }
#buscar-cerrar {
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.14); color: var(--crema); font-size: 1.1rem; flex: 0 0 auto;
}
#buscar-resultados {
  list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
#buscar-resultados li {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: rgba(255,255,255,.08); border-radius: 14px; cursor: pointer;
  font-size: 1.15rem; font-weight: 700; color: var(--crema);
}
#buscar-resultados li:active { background: rgba(255,255,255,.22); }
#buscar-resultados img { height: 26px; width: auto; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.4); }
.buscar-vacio { opacity: .75; cursor: default !important; }

/* === Modo juego === */
.pill.principal { background: linear-gradient(120deg, var(--verde), #2bb564); color: #06351c; }

#juego-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(max(env(safe-area-inset-top), 12px) + 60px); z-index: 15;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: linear-gradient(150deg, rgba(20,34,79,.94), rgba(12,20,48,.95));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(140,170,255,.22);
  border-radius: 22px; padding: 20px 24px 16px; box-shadow: 0 14px 36px rgba(0,0,0,.5);
  width: min(92vw, 440px); text-align: center;
}
#juego-bar.hidden { display: none; }
#juego-instruccion {
  font-size: 1.3rem; font-weight: 700; line-height: 1.35;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}
#juego-instruccion b { color: var(--amarillo); }
#juego-estrellas { font-size: 1rem; font-weight: 700; opacity: .85; }
.mini-flag { height: 30px; width: auto; border-radius: 4px; vertical-align: middle; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
#juego-salir {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.14); color: var(--crema); font-size: .9rem;
}
#juego-salir:active { transform: scale(.92); }
#juego-pista {
  border: none; border-radius: 999px; padding: 9px 18px; cursor: pointer;
  background: var(--amarillo); color: var(--azul); font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1rem;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 var(--dorado-b);
}
#juego-pista:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 1px 0 var(--dorado-b); }
#juego-pista.hidden { display: none; }

#juego-opciones {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 18;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 20px 16px calc(22px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(11,16,38,.92) 30%);
}
#juego-opciones.hidden { display: none; }
.bandera-grande {
  width: min(70vw, 280px); height: auto; border-radius: 14px; background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.6); border: 3px solid #fff;
}
.opciones-botones { display: flex; flex-direction: column; gap: 12px; width: min(92vw, 420px); }
.opcion {
  border: none; border-radius: 18px; padding: 18px; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: 1.25rem; color: var(--azul);
  background: var(--crema); box-shadow: var(--sombra);
}
.opcion:active { transform: scale(.97); }
.opcion.ok  { background: var(--verde); color: #06351c; }
.opcion.mal { background: #ff6b6b; color: #fff; opacity: .85; }

/* === Juego "¿Cuál es la bandera?": 4 banderas en cuadrícula 2x2 === */
.banderas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: min(92vw, 440px); }
.bandera-op {
  border: none; border-radius: 18px; padding: 12px; cursor: pointer; background: var(--crema);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.6), 0 6px 0 var(--crema-b), 0 11px 14px rgba(0,0,0,.3);
  transition: transform .07s ease, box-shadow .07s ease;
}
.bandera-op img { width: 100%; height: auto; display: block; border-radius: 9px; box-shadow: 0 3px 9px rgba(0,0,0,.45); }
.bandera-op:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 2px 0 var(--crema-b), 0 4px 7px rgba(0,0,0,.3); }
.bandera-op.ok  { background: var(--verde); box-shadow: inset 0 0 0 4px var(--verde), 0 6px 0 var(--verde-b), 0 11px 16px rgba(0,0,0,.35); }
.bandera-op.mal { background: #ff6b6b; opacity: .92; box-shadow: inset 0 0 0 4px #ff6b6b, 0 6px 0 var(--coral-b), 0 11px 16px rgba(0,0,0,.35); }

/* Botones de dificultad (dos líneas: título + subtítulo) */
.dif-op { flex-direction: column; gap: 2px; line-height: 1.15; padding-top: 14px; padding-bottom: 14px; }
.dif-sub { font-size: .82rem; font-weight: 600; opacity: .82; }
.dif-op.medio { background: var(--amarillo); color: var(--azul); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 6px 0 var(--dorado-b), 0 12px 16px rgba(0,0,0,.4); }
.dif-op.medio:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 2px 0 var(--dorado-b), 0 5px 8px rgba(0,0,0,.4); }
.dif-op.crack { background: var(--rosa); color: #fff; box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 6px 0 var(--coral-b), 0 12px 16px rgba(0,0,0,.4); }
.dif-op.crack:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 2px 0 var(--coral-b), 0 5px 8px rgba(0,0,0,.4); }

.fin-estrellas { font-size: 3.4rem; margin-bottom: 6px; }

/* Confeti */
#confeti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
#confeti span {
  position: absolute; top: -40px; animation: caer linear forwards;
}
@keyframes caer {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(108vh) rotate(540deg); opacity: .9; }
}

/* ===== Rebranding Alí: personaje en tarjeta y juego ===== */
.seccion.sabias h3 { display: flex; align-items: center; gap: 8px; }
.ali-dato { width: 42px; height: 56px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); flex: 0 0 auto; }

/* Opciones del juego: estilo "de caramelo" */
.opcion {
  box-shadow: inset 0 3px 0 rgba(255,255,255,.6), 0 6px 0 var(--crema-b), 0 11px 14px rgba(0,0,0,.3);
  transition: transform .07s ease, box-shadow .07s ease;
}
.opcion:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 2px 0 var(--crema-b), 0 4px 7px rgba(0,0,0,.3); }
.opcion.ok  { box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 6px 0 var(--verde-b), 0 11px 14px rgba(0,0,0,.3); }

/* Alí flotante de feedback (acierto / casi) */
.ali-flash {
  position: fixed; left: 50%; bottom: 22vh; transform: translateX(-50%); z-index: 70;
  width: 150px; height: auto; pointer-events: none; filter: drop-shadow(0 14px 22px rgba(0,0,0,.5));
  animation: aliPop 1.5s cubic-bezier(.2,1.5,.4,1) forwards;
}
@keyframes aliPop {
  0% { transform: translateX(-50%) scale(.3) translateY(30px); opacity: 0; }
  18% { transform: translateX(-50%) scale(1.12) translateY(0); opacity: 1; }
  75% { transform: translateX(-50%) scale(1) translateY(0); opacity: 1; }
  100% { transform: translateX(-50%) scale(.9) translateY(-12px); opacity: 0; }
}
/* Alí en la pantalla de fin de juego */
.fin-ali { width: 130px; height: auto; display: block; margin: 0 auto 8px; filter: drop-shadow(0 12px 18px rgba(0,0,0,.45)); }