/* =========================================================
   Piano Aprende Jugando — estilos generales
   ========================================================= */

:root{
  --morado: #7C5CFC;
  --morado-oscuro: #5B3FE0;
  --rosa: #FF6FA5;
  --amarillo: #FFD54B;
  --verde: #3ED598;
  --rojo: #FF5C7A;
  --azul-cielo: #4FC3F7;

  --bg-1: #EAF4FF;
  --bg-2: #FDEFFB;

  --texto: #34305A;
  --texto-suave: #6B6690;
  --blanco: #ffffff;

  --radio: 20px;
  --sombra: 0 10px 25px rgba(90, 70, 180, 0.18);

  --dificil-facil: #3ED598;
  --dificil-media: #FFB84B;
  --dificil-dificil: #FF5C7A;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body{
  font-family: 'Fredoka', 'Baloo 2', 'Comic Sans MS', system-ui, -apple-system, sans-serif;
  color: var(--texto);
  background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 100%);
  min-height: 100vh;
}

a{ text-decoration: none; color: inherit; }
button{ font-family: inherit; }

/* ---------- Header ---------- */
.top-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.logo{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--morado-oscuro);
}
.logo .nota{ font-size: 1.3rem; }

.btn-volver{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blanco);
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--morado-oscuro);
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: transform .15s ease;
}
.btn-volver:hover{ transform: translateY(-2px) scale(1.03); }

/* En la pantalla de juego el header es más chico todavía: ahí lo que
   importa es el piano, no el logo. */
body.pagina-juego .top-bar{ padding: 6px 14px; }
body.pagina-juego .logo{ font-size: .9rem; }
body.pagina-juego .logo .nota{ font-size: 1.1rem; }

/* ---------- Hero (home) ---------- */
.hero{
  text-align: center;
  padding: 10px 20px 30px;
}
.hero h1{
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin: 0 0 8px;
  color: var(--morado-oscuro);
}
.hero p{
  font-size: 1.15rem;
  color: var(--texto-suave);
  max-width: 560px;
  margin: 0 auto;
}
.hero .teclas-flotantes{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 22px 0 4px;
  font-size: 1.8rem;
}
.hero .teclas-flotantes span{
  animation: flotar 2.2s ease-in-out infinite;
  display: inline-block;
}
.hero .teclas-flotantes span:nth-child(2){ animation-delay: .2s; }
.hero .teclas-flotantes span:nth-child(3){ animation-delay: .4s; }
.hero .teclas-flotantes span:nth-child(4){ animation-delay: .6s; }
.hero .teclas-flotantes span:nth-child(5){ animation-delay: .8s; }
@keyframes flotar{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* ---------- Secciones por dificultad ---------- */
.contenedor{
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 22px 60px;
}

.seccion-dificultad{
  margin-top: 34px;
}

.titulo-dificultad{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.badge-dificultad{
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.badge-dificultad.facil{ background: var(--dificil-facil); }
.badge-dificultad.media{ background: var(--dificil-media); }
.badge-dificultad.dificil{ background: var(--dificil-dificil); }

.grid-canciones{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.tarjeta-cancion{
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 20px;
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  border: 3px solid transparent;
  position: relative;
  overflow: hidden;
}
.tarjeta-cancion:hover{
  transform: translateY(-6px) rotate(-.3deg);
  box-shadow: 0 16px 30px rgba(90,70,180,.28);
}
.tarjeta-cancion .emoji{
  font-size: 2.4rem;
  display: block;
  margin-bottom: 8px;
}
.tarjeta-cancion h3{
  margin: 0 0 4px;
  font-size: 1.15rem;
}
.tarjeta-cancion p{
  margin: 0;
  color: var(--texto-suave);
  font-size: .92rem;
}
.tarjeta-cancion .estrellas{
  margin-top: 10px;
  font-size: 1rem;
}
.tarjeta-cancion.facil{ border-color: var(--dificil-facil); }
.tarjeta-cancion.media{ border-color: var(--dificil-media); }
.tarjeta-cancion.dificil{ border-color: var(--dificil-dificil); }

.titulo-resto{
  margin-top: 42px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--texto-suave);
  text-align: center;
  padding-top: 18px;
  border-top: 2px dashed #E0DAF7;
}

.tarjeta-cancion.destacada{
  border-color: var(--rosa);
  background: linear-gradient(165deg, #FFFFFF 0%, #FFF3F8 100%);
}
.tarjeta-cancion.destacada:hover{
  box-shadow: 0 16px 30px rgba(255,111,165,.35);
}
.cinta-popular{
  position: absolute;
  top: 12px;
  right: -30px;
  background: var(--rosa);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: 4px 34px;
  transform: rotate(28deg);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* ---------- Página de juego ---------- */
.juego-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 12px 10px;
}

.panel-cancion{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--blanco);
  border-radius: 14px;
  padding: 8px 16px;
  box-shadow: var(--sombra);
  margin-bottom: 8px;
}
.panel-cancion h2{
  margin: 0;
  font-size: 1.05rem;
}
.panel-cancion .sub{
  color: var(--texto-suave);
  font-size: .78rem;
  margin-top: 1px;
  max-width: 46ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.controles{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.btn{
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
  color: var(--blanco);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  transition: transform .12s ease, filter .12s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.btn:active{ transform: translateY(0); }
.btn.morado{ background: var(--morado); }
.btn.verde{ background: var(--verde); }
.btn.rosa{ background: var(--rosa); }
.btn.azul{ background: var(--azul-cielo); }
.btn.naranja{ background: var(--dificil-media); }
.btn.gris{ background: #B9B4D6; }
.btn.activo{ outline: 3px solid var(--amarillo); }
.btn[disabled]{ opacity: .5; cursor: not-allowed; }

.marcador{
  display: flex;
  gap: 14px;
  background: var(--blanco);
  border-radius: 14px;
  padding: 6px 16px;
  box-shadow: var(--sombra);
  margin-bottom: 8px;
  font-weight: 700;
  justify-content: center;
  flex-wrap: wrap;
}
.marcador .item{ display:flex; flex-direction: row; align-items:center; gap: 5px; min-width: 0; }
.marcador .num{ font-size: 1.05rem; color: var(--morado-oscuro); }
.marcador .lbl{ font-size: .7rem; color: var(--texto-suave); font-weight: 500; }

/* ---------- Carril de notas cayendo ---------- */
.escenario{
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 8px 8px 0;
  overflow: hidden;
}

/* Contenedor que hace scroll horizontal solo si de verdad no cabe
   (celulares muy angostos); en tablet/computador el piano llena todo
   el ancho, así que normalmente no hace falta ningún scroll. */
.pista-scroll{
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 14px;
}
.carril-interno{
  width: 100%;
  min-width: 480px;
}

.zona-caida{
  position: relative;
  height: clamp(110px, 26vh, 260px);
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, #EFF0FF 0%, #FCEFFA 100%);
  overflow: hidden;
}

.piano-fondo{
  background: linear-gradient(180deg, #E6E1FA 0%, #F1EEFC 100%);
  border-radius: 0 0 14px 14px;
  padding: 8px 0 10px;
}

.linea-golpe{
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--amarillo) 0 14px, transparent 14px 24px);
  bottom: 0;
  box-shadow: 0 0 12px rgba(255, 213, 75, .8);
}

.carril-guia{
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: rgba(124,92,252,.08);
}

.nota-cayendo{
  position: absolute;
  border-radius: 9px;
  box-shadow: 0 4px 8px rgba(0,0,0,.18);
  transition: opacity .2s ease, filter .2s ease;
  pointer-events: none;
  border: 2px solid rgba(255,255,255,.55);
}
.nota-cayendo.blanca{ background: var(--morado); }
.nota-cayendo.negra{ background: var(--rosa); }
.nota-cayendo.acertada{ opacity: 0; }

/* Notas largas (que hay que mantener presionadas): el "cubo" se estira
   y la punta de abajo (donde se presiona) queda marcada más sólida,
   para diferenciarla de la "cola" que indica cuánto hay que sostenerla. */
.nota-cayendo.larga{ opacity: .82; }
.nota-cayendo.larga::after{
  content: '';
  position: absolute;
  left: -2px; right: -2px; bottom: -2px;
  height: 26px;
  border-radius: 9px;
  background: inherit;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 4px 10px rgba(0,0,0,.22);
}
.nota-cayendo.golpeada{
  box-shadow: 0 0 0 3px rgba(62,213,152,.85), 0 4px 8px rgba(0,0,0,.18);
}
.nota-cayendo.fallada-visual{ filter: grayscale(.65) brightness(.85); }

/* Nota "en espera" del Modo Aprender: queda quieta sobre la línea,
   pulsando, hasta que se presione la tecla correcta */
.nota-espera{
  position: absolute;
  bottom: 4px;
  height: 34px;
  border-radius: 10px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 0 rgba(255,111,165,.6);
  animation: latido 1s ease-in-out infinite;
  pointer-events: none;
}
.nota-espera.blanca{ background: var(--morado); }
.nota-espera.negra{ background: var(--rosa); }
@keyframes latido{
  0%, 100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(255,111,165,.55); }
  50%{ transform: scale(1.08); box-shadow: 0 0 0 10px rgba(255,111,165,0); }
}

.efecto-golpe{
  position: absolute;
  bottom: -6px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transform: translate(-50%, 0) scale(.4);
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 70%);
  animation: pop .4s ease-out forwards;
  pointer-events: none;
}
@keyframes pop{
  0%{ transform: translate(-50%,0) scale(.3); opacity: 1;}
  100%{ transform: translate(-50%,0) scale(1.8); opacity: 0;}
}

/* ---------- Pentagrama simple ---------- */
.pentagrama-wrap{
  padding: 10px 4px 6px;
  display: none;
}
.pentagrama-wrap.visible{ display: block; }
.pentagrama-wrap svg{ width: 100%; height: 90px; display: block; }

/* ---------- Piano ---------- */
.piano{
  position: relative;
  display: flex;
  width: 100%;
  height: clamp(120px, 26vh, 200px);
  user-select: none;
  touch-action: manipulation;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 18px rgba(70, 50, 150, .25);
}

.tecla{
  position: relative;
  border-radius: 0 0 10px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 10px;
  transition: background .08s ease, transform .05s ease;
}

/* Las blancas se reparten el ancho completo entre todas (flex: 1),
   así el teclado siempre llega de punta a punta de la pantalla. */
.tecla.blanca{
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #f3f1fc 100%);
  border: 1px solid #C9C1EF;
  border-top: none;
  box-shadow: inset -1px 0 0 rgba(90,70,180,.08);
  z-index: 1;
  color: var(--texto-suave);
}
.tecla.blanca:active,
.tecla.blanca.presionada{
  background: var(--amarillo);
  transform: translateY(2px);
}

/* El ancho/posición de las negras lo calcula piano.js en JS, según el
   ancho real que quedaron las blancas (para que siempre encajen bien
   sin importar el tamaño de pantalla). */
.tecla.negra{
  height: 60%;
  background: #3A3560;
  border-radius: 0 0 8px 8px;
  position: absolute;
  z-index: 2;
  top: 0;
  color: #EAE6FF;
}
.tecla.negra:active,
.tecla.negra.presionada{
  background: var(--rosa);
  transform: translateY(2px);
}

.tecla .nombre-nota{
  font-size: clamp(.68rem, 2.6vw, 1.05rem);
  font-weight: 700;
  line-height: 1;
}
.tecla .nombre-letra{
  font-size: clamp(.55rem, 1.6vw, .75rem);
  opacity: .7;
  line-height: 1.3;
}
.tecla .tecla-teclado{
  position: absolute;
  top: 8px;
  font-size: .62rem;
  background: rgba(124,92,252,.12);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--morado-oscuro);
  font-weight: 700;
}
.tecla.negra .tecla-teclado{
  background: rgba(255,255,255,.15);
  color: #fff;
}

.tecla.destello{
  animation: destello .35s ease;
}
@keyframes destello{
  0%{ box-shadow: 0 0 0 0 rgba(255,213,75,.9); }
  100%{ box-shadow: 0 0 0 14px rgba(255,213,75,0); }
}

/* Tecla "objetivo": la que hay que presionar en Modo Aprender.
   Se queda encendida (a diferencia del destello, que es momentáneo)
   hasta que el niño/a la presiona. */
.tecla.objetivo.blanca{
  background: #FFE59A;
  box-shadow: 0 0 0 3px var(--amarillo) inset, 0 0 16px rgba(255,213,75,.9);
}
.tecla.objetivo.negra{
  background: #B85C86;
  box-shadow: 0 0 0 3px var(--rosa) inset, 0 0 16px rgba(255,111,165,.9);
}

/* ---------- Ajustes / opciones ---------- */
.opciones{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  background: var(--blanco);
  border-radius: 14px;
  padding: 6px 16px;
  box-shadow: var(--sombra);
  margin-bottom: 8px;
  font-size: .8rem;
  color: var(--texto-suave);
  justify-content: center;
}
.opciones label{
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.estado-mic{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: #F1EEFF;
  color: var(--morado-oscuro);
}
.estado-mic .punto{
  width: 8px; height: 8px; border-radius: 50%;
  background: #C7C1EE;
}
.estado-mic.escuchando .punto{
  background: var(--rojo);
  animation: pulso 1s infinite;
}
@keyframes pulso{
  0%,100%{ opacity: 1; } 50%{ opacity: .3; }
}

footer{
  text-align: center;
  padding: 26px;
  color: var(--texto-suave);
  font-size: .82rem;
}

/* ---------- Aviso del Modo Aprender ---------- */
.aviso-aprender{
  display: none;
  background: #FFEFF6;
  border: 2px dashed var(--rosa);
  border-radius: 16px;
  padding: 12px 18px;
  color: #A23F6B;
  font-size: .9rem;
  text-align: center;
  margin-bottom: 14px;
}
.aviso-aprender.visible{ display: block; }

/* ---------- Aviso para girar el celular ---------- */
.banner-horizontal{
  display: none;
  background: var(--morado);
  color: #fff;
  text-align: center;
  font-weight: 700;
  padding: 10px 16px;
  font-size: .9rem;
}
.banner-horizontal.visible{ display: block; }

/* ---------- Tablet (~10 pulgadas) y computador: todo en una sola
   pantalla, sin scroll. El ancho del piano ya es fluido (flex), así
   que aquí solo ajustamos cuánto del alto de la pantalla ocupa cada
   parte, usando la altura real de la ventana (100dvh) como referencia. */
@media (min-width: 620px){
  .juego-wrap{ max-width: 98%; }
  body.pagina-juego{
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body.pagina-juego .juego-wrap{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 6px;
  }
  body.pagina-juego .escenario{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  body.pagina-juego .pista-scroll{
    flex: 1 1 auto;
    min-height: 0;
  }
  body.pagina-juego .carril-interno{
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  body.pagina-juego .zona-caida{
    flex: 1 1 auto;
    height: auto;
    min-height: 90px;
  }
  body.pagina-juego .piano-fondo{
    flex: 0 0 auto;
  }
  body.pagina-juego .piano{
    height: clamp(120px, 24vh, 220px);
  }
  body.pagina-juego .tip-ayuda,
  body.pagina-juego footer{
    display: none;
  }
}

/* Cuando el celular está bien angosto, dejamos que las teclas tengan un
   ancho mínimo razonable y que el teclado haga scroll horizontal en vez
   de volverse ilegible (esto lo seguimos afinando para celular). */
@media (max-width: 619px){
  .carril-interno{ min-width: 560px; }
}