/* style.css - estilos globales para "Mundo de Estrellas" */
/* Paleta: celeste, verde, amarillo pastel, blanco. Botones grandes, animaciones suaves. */

/* ---------------- Reset & base ---------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 18px; }
body, button, input, select, textarea {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 1rem;
  color: #143a3a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.35;
}
html, body, #app { height: 100%; background: linear-gradient(180deg, #f8feff 0%, #f1fbf7 45%, #fffdfa 100%); }

/* ---------------- Topbar ---------------- */
.topbar{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:90px;
    padding:18px 30px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    background:transparent;
    border:none;
    box-shadow:none;
    backdrop-filter:none;

    z-index:100;
}
.logo { height:64px; display:block; }

/* Top controls */
.top-controls { display:flex; gap:10px; align-items:center; }
.stars-counter { display:flex; gap:6px; align-items:center; font-weight:700; color:#2a6b64; }

/* Buttons básicos */
.btn {
  background: linear-gradient(180deg, #fff 0%, #f3fff6 100%);
  border: 1px solid rgba(20,58,58,0.08);
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 15px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow: 0 6px 14px rgba(18,60,60,0.06);
  color: #083232;
}
.btn:active { transform: translateY(2px); }
.btn.circle { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0; }

/* Contenedor principal */
.main-content{
    margin:0;
    padding:0;
}

/* Bottom nav (fijo) - normalmente visible, se puede ocultar with CSS additional */
.bottom-nav {
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:14px;
  display:flex;
  gap:10px;
  background:transparent;
  z-index: 30;
}
.nav-btn {
  min-width:84px;
  padding:12px 16px;
  border-radius: 14px;
  font-size: 15px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(10,40,40,0.05);
  box-shadow: 0 8px 18px rgba(7,44,44,0.04);
}

/* Mascota flotante (esquina) */
.mascot-bubble {
  position: fixed;
  right: 18px;
  bottom: 88px;
  width:88px;
  height:88px;
  pointer-events:none;
  transform: translateY(0);
  transition: transform .5s ease;
  z-index: 20;
}
.mascot-bubble img { width:100%; height:100%; display:block; }

/* Tarjetas y paneles */
.card {
  background: rgba(255,255,255,0.95);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 20px rgba(7,44,44,0.06);
  border: 1px solid rgba(10,40,40,0.03);
}

/* Grid de actividades */
.activity-grid {
  display:grid;
  gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  margin-top:12px;
}
.activity {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:12px;
  cursor:pointer;
  transition:transform .12s ease;
}
.activity:hover { transform: translateY(-6px); }

/* Tipografías rápidas */
.h1 { font-size:20px; font-weight:700; }
.h2 { font-size:18px; font-weight:600; }
.small { font-size:13px; color:rgba(20,58,58,0.72); }

/* Map grid y zonas (usado en page map) */
.map-grid {
  display:grid;
  gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
}
.zone {
  padding:18px;
  border-radius:14px;
  min-height:120px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.zone.locked { opacity:0.6; filter:grayscale(0.2); }
.zone.unlock { box-shadow: 0 12px 28px rgba(20,90,60,0.06); transform: translateY(-6px); }

/* Modales */
.modal {
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(5,20,20,0.35);
  z-index:60;
}
.modal .card { width: min(820px, 96%); }

/* Audio controls (por defecto) */
.audio-controls {
  position: fixed;
  left: 18px;
  bottom: 18px;
  display:flex;
  gap:8px;
  align-items:center;
  background: rgba(255,255,255,0.9);
  padding:8px 10px;
  border-radius:12px;
  box-shadow: 0 8px 20px rgba(7,44,44,0.04);
  z-index: 40;
}

/* COMPONENTES: tienda, iconos, etc. */
.store-item {
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:10px;
  border-radius:12px;
  background: linear-gradient(180deg, #ffffff, #fbfffb);
}
.badge {
  background: linear-gradient(90deg,#fff7c2,#f1ffd8);
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
}
.level-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:#8be3a8; margin-right:6px; }
.large-btn { font-size:18px; padding:14px 22px; border-radius:14px; }
.icon { width:48px; height:48px; }

/* Animaciones suaves */
.fade-in { animation: fadeIn .36s ease both; }
@keyframes fadeIn { from { opacity:0; transform: translateY(6px) } to { opacity:1; transform:none } }

/* ------------------------------------------------------------------
   Sección HERO - diseño principal después de la splash
   ------------------------------------------------------------------ */

/* Hero contenedor principal:
   - Usa imagen de fondo (images/hero-bg.jpg). Ajusta ruta si usas otro nombre.
   - Tiene curvatura solo en las esquinas superiores (para eliminar borde abajo).
*/
.hero{
    width:100%;
    min-height:100vh;

    margin:0;
    padding-top:90px;

    background:url("images/fondo.png") center/cover no-repeat;

    border-radius:0;
}

/* Overlay opcional para mejorar contraste (descomentar si se necesita) */
/*
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.42);
  border-radius: 18px 18px 0 0;
  pointer-events: none;
}
*/

/* Estructura interna en 3 columnas */
.hero-inner {
  display: grid;
  grid-template-columns: 400px 1fr 480px;
  gap: 40px;
  align-items: center;
  min-height: 420px;
}

/* Columna izquierda (mascota) */
.hero-left {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  padding-left:8px;
  background: transparent;
}
.capibara1 {
  width:780px;
  height:auto;
  object-fit:contain;
  transform: translate(-165px, 50px);
  filter: drop-shadow(0 20px 30px rgba(20,60,60,0.08));
}
.speech {
  background: linear-gradient(180deg,#ffffffcc,#ffffffaa);
  padding:18px 24px;
  border-radius:22px;
  font-size:18px;
  box-shadow: 0 8px 20px rgba(7,44,44,0.05);
  margin-left: 90px;
}
.speech h3 { margin:0; font-size:18px; color:#103737; }
.speech p { margin:6px 0 0; font-size:14px; color:#326e6a; }

/* Centro: logo y botón JUGAR grande */
.hero-center {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 80px;
  padding: 6px 12px;
  text-align:center;
  z-index: 2;
  
}
.logo1 { 
  width:800px; 
  max-width:100%; 
  height:auto; 
  display:block; 
  pointer-events:none; 
}

/* Botón grande JUGAR */
.play1 {
  margin-top:-75px;
  background: linear-gradient(180deg,#ffd24d,#ffb800);
  border: 6px solid rgba(255,255,255,0.6);
  box-shadow: 0 18px 40px rgba(255,160,40,0.18), inset 0 -6px 0 rgba(0,0,0,0.06);
  color:#2b1d00;
  font-weight:800;
  font-size:44px;
  padding: 24px 70px;
  border-radius: 60px;
  display:inline-flex;
  gap:14px;
  align-items:center;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.play1:active { transform: translateY(3px); }
.play-icon {
  display:inline-block;
  width:50px; height: 50px;
  background: white;
  color: #ff9f00;
  border-radius: 50%;
  font-size:22px;
  line-height:46px;
  text-align:center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.play-text { letter-spacing:2px; }
.hero-note { margin-top:10px; color:#176a66; font-weight:600; }

/* Columna derecha (mapa) */
.hero-right { display:flex; align-items:center; justify-content:center; z-index:1; }
.map-frame {
  width: 500px;
  height:auto;
  border-radius:18px;
  padding:12px;
  background: linear-gradient(180deg,#ffffff,#f8fff7);
  box-shadow: 0 10px 30px rgba(7,44,44,0.06);
  position: relative;
}
.map1 { width:100%; height:auto; display:block; border-radius:10px; }
.map-label {
  position:absolute;
  background: rgba(10,40,30,0.85);
  color: #fff;
  padding:6px 10px;
  border-radius:12px;
  font-weight:700;
  font-size:13px;
}
.map-bosque { left:28px; top:34px; }
.map-jardin { right:26px; top:36px; }
.map-playa { left:100px; top:150px; }
.map-espacio { left:30px; bottom:28px; }
.map-castillo { right:22px; bottom:28px; }

/* Barra inferior de iconos grandes (se superpone sobre el hero) */
.hero-bottom {
  margin-top: -44px;        /* sube botones para solaparlos con hero */
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:center;
  position: relative;
  z-index: 40;              /* encima del hero */
  padding-bottom: 12px;
}
.big-icon {
  width:150px;
  height:130px;
  border-radius:18px;
  background: linear-gradient(180deg,#ffffff,#f7fbff);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  border: none;
  cursor:pointer;
  box-shadow: 0 12px 30px rgba(7,44,44,0.04);
  font-weight:700;
  color:#123c3c;
}
.big-icon img { width:44px; height:44px; }

/* Ajustes sombra más suave si se superponen (evita borde fuerte abajo) */
.hero, .hero .card { box-shadow: 0 12px 30px rgba(7,44,44,0.04); }

/* Responsive: apilar columnas en pantallas pequeñas */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; grid-template-rows: auto; gap:12px; text-align:center; }
  .hero-left, .hero-right { order: 2; display:flex; justify-content:center; }
  .hero-center { order: 1; }
  .capibara1 { width:180px; }
  .hero-right .map-frame { width:260px; }
  .map-label { display:none; } /* hide absolute labels on small screens */

  /* Reduce el solapamiento para móviles */
  .hero-bottom { margin-top: -20px; gap:12px; padding-bottom: 6px; }
}

/* Accesibility helpers */
.sr-only { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ------------------------------------------------------------------
   MAPA (vista específica)
   ------------------------------------------------------------------ */
.map-full {
  padding: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.85));
  border-radius: 0;
  box-shadow: 0 12px 30px rgba(7,44,44,0.05);
  position: relative;
}
.map-canvas{
    position:relative;

    width:100%;
    height:calc(100vh - 90px);

    margin:0;
    padding:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:transparent;

    border:none;
    border-radius:0;
}
.map-large {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(7,44,44,0.04);
}
.map-level {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.95);
  border: 2px solid rgba(0,0,0,0.06);
  padding: 8px 12px;
  border-radius: 18px;
  font-weight:700;
  color:#123c3c;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(7,44,44,0.06);
}
.map-level .badge { margin-left:8px; display:inline-block; padding:4px 8px; background:#fff8c9; border-radius:999px; font-weight:700; color:#b26b00; }
.map-hub {
  display:flex;
  gap:16px;
  justify-content:center;
  align-items:center;
  margin-top:14px;
  padding:8px 0 24px 0;
  
}
.page-bottom-icon{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    

    width:120px;
    height:110px;

    background:linear-gradient(180deg,#ffffff,#fbfffb);

    border-radius:18px;

    border:1px solid rgba(10,40,40,.05);

    box-shadow:0 12px 30px rgba(0,0,0,.12);

    cursor:pointer;

    z-index:1001;
}

.page-bottom-icon.active{
    background:linear-gradient(180deg,#ffd24d,#ffb800);
    color:#2b1d00;
}
@media (max-width: 1000px) {
  .map-canvas { max-width: 92%; }
  .map-level { padding:6px 8px; font-size:14px; }
  .hero-inner { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Recomendado: ocultar bottom-nav y mover audio-controls al top
   (no rompe la lógica del juego; solo cambia presentación)
   ------------------------------------------------------------------ */
.bottom-nav { display: none !important; }
.top-controls .audio-controls {
  position: relative;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.top-controls .audio-controls label { margin-right: 6px; font-size: 14px; color: #094a47; }
.top-controls .audio-controls input[type="range"] { width: 140px; }
.hero-bottom { margin-top: 12px; }
.hero, .hero .card { box-shadow: 0 10px 22px rgba(7,44,44,0.03); }
@media (max-width: 980px) {
  .top-controls .audio-controls input[type="range"] { width: 100px; }
  .hero-bottom { margin-top: 6px; }
}
/* Iconos en map-hub (botones inferiores dentro de la vista de mapa) */
.map-hub {
  display:flex;
  gap:16px;
  justify-content:center;
  align-items:center;
  margin-top:14px;
  padding:8px 12px;
  flex-wrap:wrap;
}

/* Botón con icono a la izquierda */
.page-bottom-icon {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  background: linear-gradient(180deg,#ffffff,#fbfffb);
  box-shadow: 0 10px 26px rgba(7,44,44,0.04);
  border: 1px solid rgba(10,40,40,0.03);
  cursor:pointer;
  font-weight:700;
  color:#123c3c;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

/* Icono dentro del botón */
.page-bottom-icon .hub-icon {
  width:28px;
  height:28px;
  display:inline-block;
  object-fit:contain;
  flex-shrink:0;
}

/* Texto del botón: permite ocultarlo visualmente si quieres solo icono en xs */
.page-bottom-icon .hub-text {
  display:inline-block;
  font-size:14px;
  line-height:1;
}

/* Estado activo */
.page-bottom-icon.active {
  background: linear-gradient(180deg,#ffd24d,#ffb800);
  color:#2b1d00;
  box-shadow: 0 14px 36px rgba(255,160,40,0.12);
}

/* Hover / focus */
.page-bottom-icon:hover,
.page-bottom-icon:focus {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(7,44,44,0.08);
  outline: none;
}

/* Responsive: en pantallas muy pequeñas, puedes ocultar texto y mostrar solo iconos (opcional) */
@media (max-width: 420px) {
  .page-bottom-icon { padding:10px; gap:8px; }
  .page-bottom-icon .hub-text { display:none; } /* muestra solo iconos en XS */
  .page-bottom-icon .hub-icon { width:30px; height:30px; }
}



/* Instrucciones de los minijuegos: texto más grande y fácil de leer */
.game-instruction {
  display: block;
  font-size: 22px !important;
  line-height: 1.5 !important;
  font-weight: 600;
  text-align: center;
  color: #143a3a;
  margin: 12px 0 20px;
}

/* Ajustes finales de lectura y navegación */
.final-challenge-target {
  font-size: 38px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  margin: 18px 0 24px !important;
}
.home-capibara-message {
  font-size: 24px !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
}
.map-home-button {
  min-width: 92px !important;
  min-height: 76px !important;
  padding: 12px 18px !important;
  margin-top: -8px !important;
  margin-bottom: 20px !important;
}
.map-home-button .hub-icon {
  width: 38px !important;
  height: 38px !important;
}
.map-home-button .hub-text {
  font-size: 18px !important;
}

/* Ajuste final del botón Inicio del mapa: más arriba y siempre visible */
.map-hub {
  position: relative;
  z-index: 20;
  margin-top: -6px !important;
  padding-top: 0 !important;
  padding-bottom: 18px !important;
}

.map-home-button {
  min-width: 110px !important;
  min-height: 78px !important;
  padding: 10px 18px !important;
  margin-top: -18px !important;
  margin-bottom: 22px !important;
}

.map-home-button .hub-icon {
  width: 38px !important;
  height: 38px !important;
}

.map-home-button .hub-text {
  display: inline-block !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

@media (max-width: 420px) {
  .map-home-button .hub-text {
    display: inline-block !important;
    font-size: 18px !important;
  }
  .map-home-button {
    min-width: 105px !important;
    min-height: 72px !important;
    margin-top: -14px !important;
  }
}