/* Prueba 6 · Nuestra música (v3, sobre girasol): el pulsador gordo de escuchar, la escalera 1·2·4·8 s hundida, fichas de leche para
   ordenar y, al final, Home sonando en su tarjeta de tinta con la frase de Mario en New York cursiva. */
.mus{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--sp-4);padding-bottom:var(--kb,0px);-webkit-user-select:none;user-select:none}
.mus > :not(.stk):not(.mus-foot){position:relative;z-index:1} /* el pie de ordenar no: va pegado abajo (sticky, como el de la línea del tiempo) */
.mus [hidden]{display:none !important}

/* reproductor escondido de los clips de YouTube: dentro de la pantalla, pero invisible (NO display:none) y sin tocarse */
.mus-yt{position:fixed;left:0;bottom:0;width:2px;height:2px;overflow:hidden;opacity:.01;pointer-events:none}

/* adivinar: el pulsador gordo de escuchar, la escalera 1·2·4·8 s como un medidor hundido de cuatro casillas y lo que vale ahora */
.mus-stage{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}
.mus-play{
  display:flex;align-items:center;justify-content:center;gap:14px;width:100%;min-height:84px;margin-bottom:var(--canto);padding:0 18px;border-radius:var(--r-pill);
  background:var(--tinta);color:var(--girasol);box-shadow:0 var(--canto) 0 var(--tinta-d);
  font:400 clamp(32px,10vw,40px)/1 var(--display);text-align:center;
  transition:transform .08s,box-shadow .08s,opacity .2s;
}
.mus-play:active:not(:disabled){transform:translateY(var(--canto));box-shadow:0 0 0 var(--tinta-d)}
.mus-play:disabled{opacity:.42;cursor:default}
.mus-play.is-playing:disabled{opacity:1;transform:translateY(var(--canto));box-shadow:0 0 0 var(--tinta-d)} /* sonando: se queda hundido */
.mus-play:focus-visible{outline:3px solid var(--tinta);outline-offset:4px}
.mus-eq{display:none;align-items:flex-end;gap:4px;height:30px;margin-top:-4px}
.mus-play.is-playing .mus-eq{display:flex}
.mus-eq i{display:block;width:6px;height:100%;border-radius:3px;background:var(--girasol);transform-origin:50% 100%;animation:mus-eq .7s ease-in-out infinite alternate}
.mus-eq i:nth-child(2){animation-delay:-.3s}
.mus-eq i:nth-child(3){animation-delay:-.15s}
.mus-eq i:nth-child(4){animation-delay:-.45s}
@keyframes mus-eq{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
.mus-steps{
  list-style:none;margin:0;padding:4px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:100%;
  border-radius:18px;background:var(--tinta);box-shadow:inset 0 5px 0 var(--tinta-d);
}
.mus-steps li{padding:12px 0 9px;border-radius:14px;text-align:center;font:400 22px/1 var(--display);color:var(--lila)}
.mus-steps li.is-done{background:var(--tinta-2);color:var(--girasol)}
.mus-steps li.is-now{background:var(--girasol);color:var(--tinta)}
.mus-stake{margin:0;text-align:center;font:400 var(--t-xl)/1 var(--display);color:var(--tinta)}
.mus-stake b{font:inherit}
/* adivinar escribiendo el título: una tira de leche hundida (16 px o más para que el iPhone no haga zoom al enfocar) */
.mus-guess{display:flex;flex-direction:column;gap:var(--sp-3)}
.mus-guess.is-locked{opacity:.55}
.mus-input{
  width:100%;min-height:60px;padding:6px 14px 0;border-radius:var(--r-tesela);border:0;
  background:var(--leche);color:var(--tinta);box-shadow:inset 0 5px 0 var(--leche-d);
  font:400 28px/1 var(--display);text-align:center;
  -webkit-user-select:text;user-select:text;
}
.mus-input::placeholder{font:600 17px/1 var(--ui);color:#7A6A55}
.mus-input:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.mus-input:disabled{opacity:.7}
.mus-guess-btns{display:grid;grid-template-columns:1.3fr 1fr;gap:10px}
.mus-guess-btns .btn{font-size:18px}
.mus.is-answered .mus-stage{display:none}
/* la canción, como el rótulo de «ahora suena» */
.mus .quiz-reveal{font:400 var(--t-m)/1.02 var(--display)}

/* aviso de audio caído + «Saltar ronda» */
.mus-skip{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:16px 14px 12px;border-radius:var(--r-tesela);background:var(--tinta)}
.mus-skip p{margin:0;text-align:center;font:700 17px/1.3 var(--ui);color:#fff}

/* ordenar: fichas de leche con asa de arrastre, título y artista, «▶ 4 s» y ▲/▼ */
.mus-list{--mus-h:92px;position:relative;list-style:none;margin:0;padding:0 0 5px;display:flex;flex-direction:column;gap:10px}
.mus-card{
  position:relative;display:flex;align-items:center;gap:8px;height:var(--mus-h);padding:4px 6px 4px 4px;border-radius:var(--r-tesela);
  background:var(--leche);color:var(--tinta);transition:transform .2s ease;will-change:transform;box-shadow:0 5px 0 var(--girasol-d);
}
.mus-card .tl-moves{gap:2px} /* ▲/▼ de 44 px: juntos caben dentro de la ficha */
.mus-card.is-lifted{z-index:6;transition:none;box-shadow:0 0 0 3px var(--tinta),0 12px 0 3px var(--girasol-d)}
.mus-card.is-settling{z-index:6}
.mus-card.is-wrong{box-shadow:inset 0 0 0 3px var(--tomate),0 5px 0 var(--girasol-d)}
.mus-list.is-solved .mus-card{background:var(--tinta);color:#fff;box-shadow:0 5px 0 var(--tinta-d)}
.mus-handle{
  flex:none;position:relative;display:grid;place-items:center;align-self:stretch;width:40px;border-radius:16px;background:var(--crema);
  touch-action:none;cursor:grab;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
}
.mus-list.is-dragging .mus-handle{cursor:grabbing}
.mus-list.is-solved .mus-handle{cursor:default;background:var(--tinta-2)}
.mus-grip{display:block;width:20px;height:34px;pointer-events:none;background:radial-gradient(circle,var(--tinta) 2.2px,transparent 2.8px) 0 0/10px 11.34px}
.mus-num{display:none;font:400 40px/1 var(--display);padding-top:4px;color:var(--girasol)}
.mus-list.is-solved .mus-grip{display:none}
.mus-list.is-solved .mus-num{display:block}
.mus-song{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.mus-song b{font:400 clamp(24px,7.2vw,28px)/.95 var(--display);overflow-wrap:anywhere}
.mus-song span{font:600 13px/1.2 var(--ui);color:#4B4470}
.mus-list.is-solved .mus-song span{color:var(--lila)}
.mus-listen{
  position:relative;flex:none;display:grid;place-items:center;min-width:66px;min-height:48px;padding:3px 8px 0;border-radius:var(--r-pill);overflow:hidden;
  background:var(--tinta);color:var(--girasol);font:400 22px/1 var(--display);white-space:nowrap;
}
.mus-listen:active:not(:disabled){background:var(--tinta-2)}
.mus-listen:disabled{opacity:.4;cursor:default}
.mus-listen.is-loading{font:700 13px/1 var(--ui)}
.mus-listen.is-playing{background:var(--chicle);color:var(--tinta)}
.mus-listen.is-playing::after{ /* barra que se llena durante los 4 s de ORDER_LISTEN_S */
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--tinta);transform-origin:left center;animation:mus-fill 4s linear both;
}
@keyframes mus-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mus-listen:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
.mus-foot{
  position:sticky;bottom:0;z-index:8;display:flex;flex-direction:column;gap:var(--sp-3);
  margin:auto calc(-1 * var(--g)) -28px;padding:22px var(--g) calc(14px + var(--sab));
  background:linear-gradient(rgba(255,197,48,0),var(--girasol) 24px);
}
.mus-feedback{display:flex;flex-direction:column}
.mus-feedback:empty{display:none}

/* el final: Home sonando en su tarjeta de tinta, la frase de Mario en cursiva y el corazón chicle asomando */
.mus-final{justify-content:flex-start;gap:var(--sp-6)}
.st-music{width:clamp(150px,48vw,200px);right:-58px;bottom:70px;rotate:14deg}
.mus-phrase{
  margin:0;max-width:330px;white-space:pre-line;text-wrap:pretty;font:italic 400 clamp(32px,9.6vw,37px)/1.1 var(--voz);letter-spacing:-.012em;color:var(--tinta);
  transition:opacity 1.2s ease,transform 1.2s ease;
}
.mus-phrase.is-hidden{opacity:0;transform:translateY(10px)}
.mus-final > .btn{margin-top:auto}
.mus-end-next{transition:opacity .4s,transform .08s ease,box-shadow .08s ease}
.mus-end-next.is-hidden{opacity:0;pointer-events:none}

/* el SE con las barras de Safari (548 px): algo menos de aire y el pulsador más bajo, para que «Comprobar» y «No lo sé» se vean */
@media (max-height:600px){
  .mus{gap:var(--sp-3)}
  .mus-play{min-height:70px}
}
@media (max-width:359px){
  .mus-list{--mus-h:88px}
  .mus-handle{width:34px}
  .mus-listen{min-width:58px;font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .mus-card{transition-duration:.01ms !important}
  .mus-eq i{animation:none;transform:scaleY(.7)}
  .mus-listen.is-playing::after{animation:none;transform:none}
  .mus-end-next,.mus-phrase{transition-duration:.01ms !important}
}

/* ---------- «Ahora suena · Home» (ui/nowplaying.js): final de la prueba 6 y pantalla final ----------
   La tarjeta de tinta del reproductor: la carátula chicle con el ecualizador, «Ahora suena» en girasol, el título grande y la barra. */
.np{
  position:relative;display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:14px;padding:16px 16px 16px 14px;
  border-radius:var(--r-hoja);background:var(--tinta);color:#fff;
}
.np-art{display:grid;place-items:center;width:72px;height:72px;border-radius:20px;background:var(--chicle)}
.np-eq{display:flex;align-items:flex-end;gap:4px;height:28px}
.np-eq i{width:5px;height:100%;border-radius:3px;background:var(--tinta);transform-origin:bottom;transform:scaleY(.3)}
.np[data-status="playing"] .np-eq i{animation:np-eq .9s ease-in-out infinite alternate}
.np-eq i:nth-child(2){animation-delay:-.45s !important}
.np-eq i:nth-child(3){animation-delay:-.2s !important}
.np-eq i:nth-child(4){animation-delay:-.7s !important}
@keyframes np-eq{0%{transform:scaleY(.25)}50%{transform:scaleY(1)}100%{transform:scaleY(.45)}}
.np-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.np-info small{font:700 13px/1 var(--ui);color:var(--girasol)}
.np-info b{margin-top:3px;font:400 36px/.92 var(--display);color:#fff}
.np-artist{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 13.5px/1.25 var(--ui);color:#D6D1F2}
.np-bar{display:block;height:6px;margin-top:9px;border-radius:3px;overflow:hidden;background:var(--tinta-2)}
.np-bar i{display:block;height:100%;border-radius:3px;background:var(--girasol);transform-origin:left;transform:scaleX(0);transition:transform .5s linear}
.np-toggle{
  position:relative;width:50px;height:46px;margin-bottom:4px;border:0;border-radius:23px;background:var(--girasol);color:var(--tinta);cursor:pointer;
  box-shadow:0 4px 0 var(--girasol-d);transition:transform .08s,box-shadow .08s;
}
.np-toggle:active{transform:translateY(4px);box-shadow:0 0 0 var(--girasol-d)}
.np-toggle::before{ /* reproducir: triángulo */
  content:"";position:absolute;left:19px;top:14px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent currentColor;
}
.np[data-status="playing"] .np-toggle::before,.np[data-status="starting"] .np-toggle::before{ /* pausa: dos barras */
  left:17px;top:14px;width:5px;height:18px;border:0;border-radius:2px;background:currentColor;box-shadow:11px 0 0 currentColor;
}
.np-toggle:focus-visible{outline:3px solid #fff;outline-offset:3px}
.np-listen{grid-column:1 / -1;--face:var(--girasol);--lab:var(--tinta);--edge:var(--girasol-d)}
.np[data-status="blocked"],.np[data-status="idle"]{grid-template-columns:72px 1fr}
@media (max-width:359px){
  .np{grid-template-columns:60px 1fr auto;gap:12px}
  .np-art{width:60px;height:60px;border-radius:16px}
  .np-info b{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
  .np[data-status="playing"] .np-eq i{animation:none;transform:scaleY(.7)}
}

/* la foto de fondo de la frase final (games/music.js la mete en .fondo, debajo de la trama): a todo color y a toda la pantalla, con
   las caras entre «Ahora suena» y la frase; por abajo se funde en el amarillo, para que la frase quede sobre limpio. Aparece despacio
   con la frase y se acerca muy poco a poco. La frase baja y deja el hueco de las caras. */
.fondo > .fondo-foto{overflow:hidden}
.fondo-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:46% 30%;transform-origin:50% 30%;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 70%);mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 70%);
  opacity:0;transition:opacity 2.6s ease;animation:foto-zoom 24s ease-in-out infinite alternate}
.fondo-foto.is-on img{opacity:1}
@keyframes foto-zoom{from{scale:1.02}to{scale:1.1}}
.mus-final{min-height:calc(100dvh - 170px)}
html:has(.fondo-foto.is-on) .mus-final .st-music{width:clamp(96px,30vw,128px);right:-26px;bottom:auto;top:38%;rotate:-10deg}
html:has(.fondo-foto.is-on) .mus-final .mus-phrase{margin-top:auto;text-shadow:0 0 18px var(--bg),0 0 2px var(--bg)}
html:has(.fondo-foto.is-on) .mus-final > .btn{margin-top:0}
@media (min-aspect-ratio: 3/4){ /* en pantallas anchas, entera en una columna con los lados fundidos */
  .fondo-foto img{width:calc(100vh * 3 / 4);margin:0 auto;
    -webkit-mask-image:linear-gradient(180deg,#000 46%,transparent 70%),linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
    mask-image:linear-gradient(180deg,#000 46%,transparent 70%),linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
    -webkit-mask-composite:source-in;mask-composite:intersect}
}
@media (prefers-reduced-motion: reduce){.fondo-foto img{animation:none;transition:none}}