/* ========================================================
   ICONOS DEL MENÚ - estilo «recortes de partituras»
   Papel recortado: cada pieza lleva margen blanco, sombra y grano
   (texturas en papel/). Las animaciones imitan la animación
   «stop-motion» con recortes: pocos fotogramas (steps), giros
   pequeños y piezas que saltan con un ligero rebote.
   - En reposo solo «tiembla» el papel, 3 fotogramas cada 2,4 s.
   - La animación completa suena al pasar el ratón (ratón real),
     al enfocar con el teclado o al pulsar la tarjeta.
   - Con «reducir movimiento» no se mueve nada.
   Solo se animan transform y opacity.
   rosco y bingo siguen en iconos.css.
   ======================================================== */

/* Reposo: temblor de papel a fotogramas, desfasado entre tarjetas */
svg:is(.ico-ritmo, .ico-lluvia, .ico-piano, .ico-subebaja, .ico-tambor, .ico-simon,
       .ico-trofeo, .ico-fantasma, .ico-sonido, .ico-bomba, .ico-nota, .ico-escalera) {
  /* el icono entero tiembla en su propia capa: así no se redibuja la sombra de la tarjeta (antes iba a tirones) */
  will-change: transform;
  transform-origin: 50% 60%;
  animation: pp-boil 2.4s steps(1, end) infinite;
  animation-delay: calc(var(--i, 0) * -0.7s);
}
@keyframes pp-boil {
  0%, 100% { transform: none; }
  33.33%   { transform: rotate(-0.6deg); }
  66.66%   { transform: rotate(0.4deg) translateY(-0.4px); }
}

/* ---------- ritmo · Dictado rítmico ---------- */
.pr-notes { transform-box: fill-box; transform-origin: 50% 100%; animation: pr-bop 1.2s steps(1, end) infinite; }
.pr-cup   { transform-box: fill-box; transform-origin: 50% 50%;  animation: pr-cup 0.6s steps(1, end) infinite; }
.pr-band  { animation: pr-band 0.6s steps(1, end) infinite; }
@keyframes pr-bop {
  0%, 100% { transform: none; }
  25% { transform: translateY(-1.5px) rotate(-4deg); }
  50% { transform: translateY(0.6px) scale(1.03, 0.97); }
  75% { transform: translateY(-1.5px) rotate(4deg); }
}
@keyframes pr-cup  { 0%, 100% { transform: none; } 16% { transform: scale(1.12); } 33% { transform: scale(0.97); } 50% { transform: none; } }
@keyframes pr-band { 0%, 100% { transform: none; } 16% { transform: translateY(-1.2px); } 33% { transform: none; } }

/* ---------- lluvia · Lluvia de notas ---------- */
.pl-n, .pl-d { transform-box: fill-box; transform-origin: 50% 50%; }
.pl-n1 { animation: pl-fall 2.4s steps(1, end) infinite; }
.pl-n2 { animation: pl-fall 2.4s steps(1, end) 1.2s infinite; }
.pl-d1 { animation: pl-drop 1.2s steps(1, end) infinite; }
.pl-d2 { animation: pl-drop 1.2s steps(1, end) 0.4s infinite; }
.pl-d3 { animation: pl-drop 1.2s steps(1, end) 0.8s infinite; }
.pl-land  { transform-box: fill-box; transform-origin: 50% 100%; animation: pl-land 1.2s steps(1, end) infinite; }
.pl-cloud { transform-box: fill-box; transform-origin: 50% 100%; animation: pl-cloud 1.2s steps(1, end) infinite; }
@keyframes pl-fall {
  0%     { transform: none; opacity: 1; }
  12.5%  { transform: translateY(3px) rotate(7deg); }
  25%    { transform: translateY(6px) rotate(-5deg); }
  37.5%  { transform: translateY(9px) rotate(6deg); opacity: 1; }
  50%    { transform: translateY(12px) rotate(-3deg); opacity: 0; }
  62.5%  { transform: translateY(-9px) rotate(-6deg); opacity: 0; }
  75%    { transform: translateY(-6px) rotate(5deg); opacity: 1; }
  87.5%  { transform: translateY(-3px) rotate(-6deg); }
  100%   { transform: none; opacity: 1; }
}
@keyframes pl-drop {
  0%   { transform: none; opacity: 1; }
  25%  { transform: translateY(3px); }
  50%  { transform: translateY(6px); opacity: 0; }
  75%  { transform: translateY(-3px); opacity: 1; }
  100% { transform: none; }
}
@keyframes pl-land  { 0%, 100% { transform: none; } 50% { transform: scale(1.1, 0.88); } 62.5% { transform: scale(0.96, 1.05) translateY(-1px); } 75% { transform: none; } }
@keyframes pl-cloud { 0%, 100% { transform: none; } 50% { transform: rotate(-1.5deg) translateY(-0.8px); } }

/* ---------- piano · Pianista lector ---------- */
.pp-note  { transform-box: fill-box; transform-origin: 50% 100%; animation: pp-note 1.6s steps(1, end) infinite; }
.pp-arrow { animation: pp-arrow 1.6s steps(1, end) infinite; }
.pp-key   { animation: pp-key 1.6s steps(1, end) infinite; }
@keyframes pp-note {
  0%, 100% { transform: none; }
  12.5% { transform: translateY(-2.5px) rotate(-6deg); }
  25%   { transform: translateY(-3.5px) rotate(5deg); }
  37.5% { transform: scale(1.06, 0.94); }
  50%   { transform: none; }
}
@keyframes pp-arrow { 0%, 25%, 100% { transform: none; } 37.5% { transform: translateY(1.6px); } 50% { transform: translateY(2.6px); } 62.5% { transform: translateY(0.6px); } }
@keyframes pp-key   { 0%, 37.5%, 100% { transform: none; } 50%, 62.5% { transform: translateY(1.2px); opacity: .75; } 75% { transform: translateY(-0.4px); opacity: 1; } }

/* ---------- escalera · Escalera al castillo: la corchea sube peldaño a peldaño ---------- */
.pe-note { transform-box: view-box; animation: pe-climb 3.2s steps(1, end) infinite; }
@keyframes pe-climb {
  0%, 100% { transform: translate(-32px, 28px); }
  12.5% { transform: translate(-24px, 17px); }
  25%   { transform: translate(-16px, 14px); }
  37.5% { transform: translate(-8px, 3px); }
  50%   { transform: none; }
  62.5% { transform: translate(8px, -11px); }
  75%, 93.75% { transform: translate(16px, -13px); }
}

/* ---------- subebaja · ¿Sube o baja? ---------- */
.ps-plank { transform-box: view-box; transform-origin: 50px 62px; animation: ps-rock 2.4s steps(1, end) infinite; }
.ps-up, .ps-down { transform-box: fill-box; transform-origin: 50% 50%; }
.ps-up   { animation: ps-up 2.4s steps(1, end) infinite; }
.ps-down { animation: ps-down 2.4s steps(1, end) infinite; }
@keyframes ps-rock {
  0%, 100% { transform: none; }
  8.33%  { transform: rotate(-5deg); }
  16.66% { transform: rotate(-11deg); }
  25%    { transform: rotate(-9deg); }
  33.33% { transform: rotate(-10deg); }
  41.66% { transform: rotate(-5deg); }
  50%    { transform: none; }
  58.33% { transform: rotate(5deg); }
  66.66% { transform: rotate(11deg); }
  75%    { transform: rotate(9deg); }
  83.33% { transform: rotate(10deg); }
  91.66% { transform: rotate(5deg); }
}
@keyframes ps-up   { 0%, 25%, 100% { transform: none; } 66.66% { transform: translateY(-3px) scale(1.12); } 75% { transform: translateY(-1px) scale(0.96); } 83.33% { transform: none; } }
@keyframes ps-down { 0%, 33.33%, 100% { transform: none; } 16.66% { transform: translateY(3px) scale(1.12); } 25% { transform: translateY(1px) scale(0.96); } }

/* ---------- tambor · Repite el ritmo ---------- */
.pt-hand { animation: pt-tap 1.6s steps(1, end) infinite; }
.pt-pad  { transform-box: fill-box; transform-origin: 50% 100%; animation: pt-pad 1.6s steps(1, end) infinite; }
.pt-hit  { transform-box: fill-box; transform-origin: 50% 50%; animation: pt-hit 1.6s steps(1, end) infinite; }
.pt-n    { transform-box: fill-box; transform-origin: 50% 100%; }
.pt-n1   { animation: pt-n 1.6s steps(1, end) infinite; }
.pt-n2   { animation: pt-n 1.6s steps(1, end) 0.8s infinite; }
@keyframes pt-tap {
  0%, 100% { transform: none; }
  12.5% { transform: translate(1.5px, -3.5px) rotate(-2deg); }
  25%   { transform: translate(-0.6px, 1.6px); }
  37.5% { transform: none; }
  50%   { transform: translate(1.5px, -3.5px) rotate(-2deg); }
  62.5% { transform: translate(-0.6px, 1.6px); }
  75%   { transform: none; }
}
@keyframes pt-pad { 0%, 12.5%, 37.5%, 50%, 75%, 100% { transform: none; } 25%, 62.5% { transform: scale(1.02, 0.93); } }
@keyframes pt-hit { 0%, 12.5%, 50%, 100% { transform: scale(0.7); opacity: .4; } 25%, 62.5% { transform: scale(1.3); opacity: 1; } 37.5%, 75% { transform: none; opacity: 1; } }
@keyframes pt-n   { 0%, 100% { transform: none; } 25% { transform: translateY(-4px) rotate(-10deg); } 37.5% { transform: translateY(-5px) rotate(8deg); } 50% { transform: translateY(-1px) scale(1.08, 0.92); } 62.5% { transform: none; } }

/* ---------- simon · Simón musical ---------- */
.pm-l { animation: 2.4s steps(1, end) infinite; }
.pm-l1 { animation-name: pm-l1; } .pm-l2 { animation-name: pm-l2; }
.pm-l3 { animation-name: pm-l3; } .pm-l4 { animation-name: pm-l4; }
.pm-p { animation: 2.4s steps(1, end) infinite; }
.pm-p1 { animation-name: pm-p1; } .pm-p2 { animation-name: pm-p2; }
.pm-p3 { animation-name: pm-p3; } .pm-p4 { animation-name: pm-p4; }
.pm-hub { transform-box: fill-box; transform-origin: 50% 50%; animation: pm-hub 0.6s steps(1, end) infinite; }
@keyframes pm-l1 { 0%, 20%, 100% { opacity: 0; } 2%  { opacity: .55; } }
@keyframes pm-l2 { 0%, 25%, 45%, 100% { opacity: 0; } 27% { opacity: .55; } }
@keyframes pm-l3 { 0%, 50%, 70%, 100% { opacity: 0; } 52% { opacity: .55; } }
@keyframes pm-l4 { 0%, 75%, 95%, 100% { opacity: 0; } 77% { opacity: .55; } }
@keyframes pm-p1 { 0%, 20%, 100% { transform: none; } 2%  { transform: translate(-1px, -1.4px); } }
@keyframes pm-p2 { 0%, 25%, 45%, 100% { transform: none; } 27% { transform: translate(1px, -1.4px); } }
@keyframes pm-p3 { 0%, 50%, 70%, 100% { transform: none; } 52% { transform: translate(1px, 0.6px); } }
@keyframes pm-p4 { 0%, 75%, 95%, 100% { transform: none; } 77% { transform: translate(-1px, 0.6px); } }
@keyframes pm-hub { 0%, 100% { transform: none; } 10% { transform: scale(1.1); } 25% { transform: scale(0.97); } 40% { transform: none; } }

/* ---------- trofeo · Concurso musical ---------- */
.po-cup  { transform-box: view-box; transform-origin: 50px 92px; animation: po-wig 2s steps(1, end) infinite; }
.po-note { transform-box: fill-box; transform-origin: 50% 100%; animation: po-hop 2s steps(1, end) infinite; }
.po-sp   { transform-box: fill-box; transform-origin: 50% 50%; animation: po-sp 1.2s steps(1, end) infinite; }
.po-sp2  { animation-delay: 0.4s; } .po-sp3 { animation-delay: 0.8s; }
@keyframes po-wig { 0%, 50%, 100% { transform: none; } 10% { transform: rotate(-5deg); } 20% { transform: rotate(4deg); } 30% { transform: rotate(-2deg); } 40% { transform: rotate(1deg); } }
@keyframes po-hop { 0%, 50%, 100% { transform: none; } 60% { transform: translateY(-4px) rotate(-6deg); } 70% { transform: translateY(-5.5px) rotate(5deg); } 80% { transform: scale(1.08, 0.92); } 90% { transform: none; } }
@keyframes po-sp  { 0%, 100% { transform: none; } 25% { transform: scale(0.55) rotate(20deg); opacity: .7; } 50% { transform: scale(1.25) rotate(-8deg); opacity: 1; } 75% { transform: scale(0.95); } }

/* ---------- fantasma · Caza fantasmas ---------- */
.pf-ghost { transform-box: fill-box; transform-origin: 50% 25%; animation: pf-ghost 1.6s steps(1, end) infinite; }
.pf-net   { animation: pf-net 1.6s steps(1, end) infinite; }
@keyframes pf-ghost {
  0%, 100% { transform: none; }
  12.5% { transform: rotate(-6deg) translateX(-1px); }
  25%   { transform: rotate(4deg) translateX(1px) scaleY(1.03); }
  37.5% { transform: rotate(-4deg); }
  50%   { transform: rotate(6deg) translateX(1px); }
  62.5% { transform: rotate(-3deg) scaleY(0.97); }
  75%   { transform: rotate(2deg); }
}
@keyframes pf-net { 0%, 100% { transform: none; } 12.5% { transform: translate(-1px, 0.8px); } 25% { transform: translate(0.8px, -0.4px); } 50% { transform: translate(1px, 0.6px); } 62.5% { transform: translate(-0.6px, 0); } }

/* ---------- sonido · ¿Qué suena? ---------- */
.pn-bird { transform-box: fill-box; transform-origin: 50% 100%; animation: pn-bob 1.2s steps(1, end) infinite; }
.pn-beak { transform-box: fill-box; transform-origin: 0% 20%; animation: pn-beak 0.6s steps(1, end) infinite; }
.pn-w    { transform-box: view-box; transform-origin: 62px 61px; }
.pn-w1   { animation: pn-w 0.6s steps(1, end) infinite; }
.pn-w2   { animation: pn-w 0.6s steps(1, end) 0.2s infinite; }
.pn-n    { transform-box: fill-box; transform-origin: 50% 50%; }
.pn-n1   { animation: pn-float 2.4s steps(1, end) infinite; }
.pn-n2   { animation: pn-float 2.4s steps(1, end) 1.2s infinite; }
@keyframes pn-bob  { 0%, 100% { transform: none; } 25% { transform: rotate(-3deg) translateY(-1px); } 50% { transform: none; } 75% { transform: rotate(2deg); } }
@keyframes pn-beak { 0%, 100% { transform: none; } 33.33% { transform: rotate(16deg); } 66.66% { transform: rotate(8deg); } }
@keyframes pn-w    { 0%, 100% { transform: none; opacity: 1; } 33.33% { transform: scale(1.12); opacity: .6; } 66.66% { transform: scale(0.94); opacity: 1; } }
@keyframes pn-float {
  0%    { transform: none; opacity: 1; }
  12.5% { transform: translate(1.5px, -2.5px) rotate(8deg); }
  25%   { transform: translate(3px, -5px) rotate(-4deg); }
  37.5% { transform: translate(4px, -7.5px) rotate(8deg); opacity: 1; }
  50%   { transform: translate(5px, -10px) rotate(-2deg); opacity: 0; }
  62.5% { transform: translate(-4px, 6px) scale(0.6); opacity: 0; }
  75%   { transform: translate(-2.5px, 3.5px) scale(0.8); opacity: 1; }
  87.5% { transform: translate(-1px, 1px) scale(1.1) rotate(-6deg); }
  100%  { transform: none; opacity: 1; }
}

/* ---------- bomba · Bombardeo de notas ---------- */
.pb-fall { animation: pb-fall 2.4s steps(1, end) infinite; }
.pb-p  { opacity: 0; animation: 2.4s steps(1, end) infinite; }
.pb-p1 { opacity: 1; animation-name: pb-p1; } .pb-p2 { animation-name: pb-p2; }
.pb-p3 { animation-name: pb-p3; } .pb-p4 { animation-name: pb-p4; }
@keyframes pb-fall {
  0%, 100% { transform: none; }
  20%    { transform: translateY(1.5px) rotate(-1.5deg); }
  40%    { transform: translateY(3px) rotate(1deg); }
  60%    { transform: translateY(4.5px) rotate(-1deg); }
  80%    { transform: translateY(6px) scale(1.04, 0.96); }
  86.66% { transform: translateY(-3px) rotate(1deg); }
  93.33% { transform: translateY(-1.5px); }
}
@keyframes pb-p1 { 0%, 80% { opacity: 1; } 86.66%, 100% { opacity: 0; } }
@keyframes pb-p2 { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 86.66%, 100% { opacity: 0; } }
@keyframes pb-p3 { 0% { opacity: 0; } 40%, 80% { opacity: 1; } 86.66%, 100% { opacity: 0; } }
@keyframes pb-p4 { 0% { opacity: 0; } 60%, 80% { opacity: 1; } 86.66%, 100% { opacity: 0; } }

/* ---------- nota · Próximamente ---------- */
.pz-hop { transform-box: fill-box; transform-origin: 50% 100%; animation: pz-hop 1.8s steps(1, end) infinite; }
.pz-sp  { transform-box: fill-box; transform-origin: 50% 50%; animation: po-sp 1.2s steps(1, end) infinite; }
.pz-sp2 { animation-delay: 0.6s; }
@keyframes pz-hop {
  0%, 66.66%, 100% { transform: none; }
  11.11% { transform: translateY(-3px) rotate(-3deg); }
  22.22% { transform: translateY(-6px) rotate(2deg); }
  33.33% { transform: translateY(-3.5px) rotate(-1deg); }
  44.44% { transform: scale(1.07, 0.93); }
  55.55% { transform: scale(0.98, 1.02); }
}

/* ---------- Cuándo se anima ----------
   (Igual que en iconos.css; se repite aquí para que este archivo funcione solo.)
   En reposo las piezas quedan en pausa en su postura; al pasar el ratón,
   enfocar o pulsar la tarjeta, la animación sigue desde donde estaba. */
svg.ico :not(.ico-idle) { animation-play-state: var(--ico-play, paused); }
.game-card:focus-visible, a.game-card:active { --ico-play: running; }
@media (hover: hover) and (pointer: fine) {
  a.game-card:hover { --ico-play: running; }
}

/* Reducir movimiento: iconos quietos */
@media (prefers-reduced-motion: reduce) {
  svg.ico, svg.ico * { animation: none !important; }
  .ico .pb-p2 { opacity: 1; }
}

/* Fluidez: el «respirar» de iconos.css movía piezas dentro de la tarjeta y obligaba
   a redibujar su sombra en cada fotograma. Ahora se mueve el icono entero en su capa. */
svg.ico .ico-idle { animation: none; }
svg:is(.ico-rosco, .ico-bingo) {
  will-change: transform;
  transform-origin: 50% 60%;
  animation: pp-boil 2.4s steps(1, end) infinite;
  animation-delay: calc(var(--i, 0) * -0.7s);
}
@media (prefers-reduced-motion: reduce) { svg.ico { animation: none !important; } }

/* ---------- mundo · Músicos del mundo ----------
   Globo de papel que se balancea en su pie, corchea que salta a su alrededor
   y estrellitas que parpadean. Solo transform/opacity, a fotogramas (steps). */
svg.ico-mundo {
  will-change: transform;
  transform-origin: 50% 60%;
  animation: pp-boil 2.4s steps(1, end) infinite;
  animation-delay: calc(var(--i, 0) * -0.7s);
}
.pw-globe { transform-box: view-box; transform-origin: 44px 46px; animation: pw-globe 1.6s steps(1, end) infinite; }
.pw-note  { transform-box: view-box; transform-origin: 44px 46px; animation: pw-note 2.4s steps(1, end) infinite; }
.pw-sp    { transform-box: fill-box; transform-origin: 50% 50%; animation: pw-sp 1.2s steps(1, end) infinite; }
.pw-sp2   { animation-delay: 0.6s; }
@keyframes pw-globe {
  0%, 100% { transform: none; }
  25% { transform: rotate(-4deg); }
  50% { transform: rotate(1deg); }
  75% { transform: rotate(4deg); }
}
@keyframes pw-note {
  0%, 100% { transform: none; }
  16.66% { transform: rotate(-14deg) translateY(-1.5px); }
  33.33% { transform: rotate(-28deg); }
  50% { transform: rotate(-40deg) translateY(-1px); opacity: 1; }
  58.33% { transform: rotate(-48deg) scale(0.8); opacity: 0; }
  75% { transform: rotate(10deg) scale(0.8); opacity: 0; }
  83.33% { transform: rotate(6deg) scale(1.08); opacity: 1; }
  91.66% { transform: rotate(2deg); }
}
@keyframes pw-sp { 0%, 100% { transform: none; opacity: 1; } 33.33% { transform: scale(1.25) rotate(18deg); } 66.66% { transform: scale(0.8) rotate(-8deg); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { svg.ico-mundo, svg.ico-mundo * { animation: none !important; } }

/* Estrella de cartulina con las partidas terminadas en este aparato */
.game-card { position: relative; }
.game-badge {
  --star: polygon(50% 0, 62% 33%, 98% 35%, 69% 57%, 80% 93%, 50% 72%, 20% 93%, 31% 57%, 2% 35%, 38% 33%);
  position: absolute; top: 10px; right: 12px; z-index: 3; isolation: isolate;
  display: grid; place-items: center; width: 54px; height: 54px; padding-top: 6px;
  font: 900 16px/1 var(--font, "Outfit Local", sans-serif); color: #3a2208; font-variant-numeric: tabular-nums;
  rotate: 10deg; pointer-events: none;
}
.game-badge::before, .game-badge::after { content: ""; position: absolute; clip-path: var(--star); }
.game-badge::before { inset: 0; z-index: -1; background: #f2c94c url("papel/cart-mostaza.jpg") 0 0 / 90px 90px; }
.game-badge::after { inset: -4px; z-index: -2; background: #fffdf7; translate: 1px 2px; }
html.halloween .game-badge { color: #1d1326; }
html.halloween .game-badge::before { background-color: #f07a1a; background-blend-mode: multiply; }