/* Orquesta de Pipo. Built on top of ../_peque/peque.css (base, Pipo, prize, album). */
body {
  --pipo: #7c4dff;
  --pipo2: #c3a6ff;
  --cw: clamp(14px, 4.5vw, 64px); /* side curtains */
  --top: calc(env(safe-area-inset-top, 0px) + 74px);
  background: #2a1450;
}
#fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 60;
}
.scr {
  position: absolute;
  inset: 0;
  overflow: hidden;
  overflow: clip; /* nothing (not even focus) may scroll the stage sideways */
}
button {
  touch-action: manipulation;
}
.rbtn {
  flex: none;
}

/* ---------- Pipo the conductor ---------- */
.conductor {
  position: relative;
  width: 100%;
}
.conductor .pq-pipo {
  width: 100%;
}
.conductor .tie {
  position: absolute;
  left: 50%;
  top: 70%;
  width: 34%;
  transform: translateX(-50%);
}
.conductor .baton {
  position: absolute;
  right: -26%;
  top: 22%;
  width: 46%;
  transform-origin: 12% 88%;
  animation: baton-idle 3s ease-in-out infinite;
}
.conductor.on .baton,
.hero-pipo.conduct .baton {
  animation: baton 0.55s ease-in-out infinite alternate;
}
.conductor.on .pq-pipo .arm.r,
.hero-pipo.conduct .pq-pipo .arm.r {
  animation: pq-wave-r 0.55s ease-in-out infinite alternate;
}
@keyframes baton-idle {
  50% {
    transform: rotate(-8deg);
  }
}
@keyframes baton {
  from {
    transform: rotate(-30deg);
  }
  to {
    transform: rotate(18deg);
  }
}

/* ---------- Home: the map ---------- */
.home {
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 70% at 50% 0%, #8a5cff 0%, #5b2fd6 45%, #2e1a7a 100%);
}
.home-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.home-bg::before,
.home-bg::after {
  content: "";
  position: absolute;
  top: -10%;
  width: 60%;
  height: 120%;
  background: linear-gradient(180deg, rgba(255, 246, 190, 0.35), rgba(255, 246, 190, 0));
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  animation: spot 7s ease-in-out infinite alternate;
}
.home-bg::before {
  left: -14%;
  transform: rotate(-18deg);
}
.home-bg::after {
  right: -14%;
  transform: rotate(18deg);
  animation-delay: -3.5s;
}
.home-bg i {
  position: absolute;
  bottom: -40px;
  font-style: normal;
  color: rgba(255, 255, 255, 0.35);
  font-size: 30px;
  animation: float-up 12s linear infinite;
}
.home-bg i::before {
  content: "♪";
}
.home-bg i:nth-child(even)::before {
  content: "♫";
}
.home-bg i:nth-child(1) { left: 6%; animation-delay: -1s; }
.home-bg i:nth-child(2) { left: 18%; animation-delay: -7s; font-size: 22px; }
.home-bg i:nth-child(3) { left: 33%; animation-delay: -4s; }
.home-bg i:nth-child(4) { left: 49%; animation-delay: -10s; font-size: 40px; }
.home-bg i:nth-child(5) { left: 63%; animation-delay: -2.5s; font-size: 24px; }
.home-bg i:nth-child(6) { left: 76%; animation-delay: -8.5s; }
.home-bg i:nth-child(7) { left: 88%; animation-delay: -5.5s; font-size: 36px; }
.home-bg i:nth-child(8) { left: 95%; animation-delay: -11s; font-size: 20px; }
@keyframes float-up {
  0% {
    transform: translate(0, 0) rotate(-10deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(24px, -55vh) rotate(10deg);
  }
  100% {
    transform: translate(-10px, -110vh) rotate(-10deg);
    opacity: 0;
  }
}
@keyframes spot {
  from {
    transform: rotate(-22deg);
  }
  to {
    transform: rotate(-6deg);
  }
}
.home-bg::after {
  animation-name: spot2;
}
@keyframes spot2 {
  from {
    transform: rotate(22deg);
  }
  to {
    transform: rotate(6deg);
  }
}
.corner {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  display: flex;
  gap: 10px;
  z-index: 5;
}
.corner.l {
  left: 12px;
}
.corner.r {
  right: 12px;
}
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: calc(env(safe-area-inset-top, 0px) + 70px) 16px 0;
  z-index: 2;
}
.title {
  margin: 0;
  font-size: min(12.5vw, 9vh, 70px);
  font-weight: 800;
  line-height: 0.98;
  text-align: center;
}
.title .line {
  display: block;
  white-space: nowrap;
}
.title span span {
  display: inline-block;
  color: #fff;
  -webkit-text-stroke: 2px rgba(42, 31, 92, 0.3);
  text-shadow: 0 5px 0 var(--c, #ff5fa2), 0 10px 16px rgba(20, 8, 60, 0.45);
  animation: pq-wave 2.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.09s);
}
.title .sp {
  width: 0.25em;
}
.hero-pipo {
  width: min(26vw, 15vh, 130px);
  flex: none;
  margin-right: 4%;
}
.map {
  position: relative;
  flex: 1;
  margin: 4px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  min-height: 0;
  z-index: 2;
}
.map-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.map-path .road {
  fill: none;
  stroke: rgba(20, 8, 60, 0.35);
  stroke-width: 26;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.map-path .dash {
  fill: none;
  stroke: #ffd23f;
  stroke-width: 6;
  stroke-dasharray: 2 16;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: dash 1.6s linear infinite;
}
@keyframes dash {
  to {
    stroke-dashoffset: -36;
  }
}
.node {
  --node: min(25vw, 15vh, 132px);
  position: absolute;
  width: var(--node);
  height: var(--node);
  transform: translate(-50%, -50%);
}
.node .disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  padding: 7%;
  box-shadow: 0 7px 0 rgba(20, 8, 60, 0.45), 0 14px 24px rgba(20, 8, 60, 0.35);
  animation: pq-in 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) both, pq-float 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.1s), calc(var(--i) * 0.5s);
  transition: filter 0.4s;
}
.node .disc svg {
  width: 100%;
  height: 100%;
  display: block;
}
.node:active .disc {
  transform: scale(0.94);
}
.node .stars {
  position: absolute;
  left: 50%;
  bottom: -12%;
  transform: translateX(-50%);
  display: flex;
  background: rgba(20, 8, 60, 0.55);
  border-radius: 999px;
  padding: 2px 6px;
}
.node .stars:empty {
  display: none;
}
.node .stars svg {
  width: calc(var(--node) * 0.2);
  height: calc(var(--node) * 0.2);
}
.node .lock {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  pointer-events: none;
}
.node .lock > svg {
  width: 42%;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.3));
}
.node .lock span {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: -4%;
  background: #fff;
  color: #2a1f5c;
  font-weight: 800;
  font-size: calc(var(--node) * 0.17);
  line-height: 1;
  border-radius: 999px;
  padding: 2px 9px 2px 4px;
  box-shadow: 0 3px 0 rgba(20, 8, 60, 0.35);
}
.node .lock span svg {
  width: 1.2em;
  height: 1.2em;
}
.node.locked .disc {
  filter: grayscale(0.85) brightness(0.75);
}
.node.locked .lock {
  display: flex;
}
.node.next::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 6px solid #ffd23f;
  animation: pq-ring 1.2s ease-out infinite;
}
.node.unlocking .lock {
  display: flex;
  animation: unlock 0.7s ease-in forwards;
}
.node.unlocking .disc {
  filter: none;
}
@keyframes unlock {
  40% {
    transform: scale(1.3) rotate(-10deg);
  }
  100% {
    transform: scale(0) rotate(30deg);
    opacity: 0;
  }
}
.node.shake {
  animation: pq-shake 0.55s ease-in-out;
}

/* ---------- The stage ---------- */
.show {
  background: #2a1450;
}
.set {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 21%;
}
.set .backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.set .tw {
  transform-box: fill-box;
  transform-origin: center;
  animation: pq-breathe 1.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.3s);
}
.show[data-stage="nieve"] .set::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #fff 0 2px, transparent 3px), radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 1.5px, transparent 2.5px);
  background-size: 60px 60px, 90px 90px;
  background-position: 0 0, 30px 20px;
  animation: snow 9s linear infinite;
  pointer-events: none;
}
@keyframes snow {
  to {
    background-position: 20px 600px, 50px 920px;
  }
}
.floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 21.5%;
  background: linear-gradient(180deg, rgba(60, 20, 0, 0.45), rgba(60, 20, 0, 0) 30%), repeating-linear-gradient(90deg, #a8652d 0 3px, #d08d4f 3px 70px, #c47f41 70px 73px, #dc9a5c 73px 140px);
  border-top: 8px solid #7a3e14;
  box-shadow: 0 -4px 0 #ffcf6e inset;
}
.floor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(40, 10, 0, 0.35));
}
.lights {
  position: absolute;
  left: var(--cw);
  right: var(--cw);
  bottom: calc(21.5% - 7px);
  height: 8px;
  display: flex;
  justify-content: space-around;
  z-index: 1;
}
.lights i {
  width: 12px;
  height: 8px;
  border-radius: 8px 8px 0 0;
  background: #fff6c2;
  box-shadow: 0 0 14px 6px rgba(255, 230, 120, 0.7);
}
.spots i {
  position: absolute;
  top: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 250, 210, 0.42), rgba(255, 250, 210, 0.04));
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  pointer-events: none;
  z-index: 1;
}
.spots i:first-child {
  left: -12%;
  animation: spot 8s ease-in-out infinite alternate;
}
.spots i:last-child {
  right: -12%;
  animation: spot2 8s ease-in-out infinite alternate;
  animation-delay: -4s;
}
.curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--cw);
  z-index: 8;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 30%, rgba(255, 255, 255, 0.08) 50%, transparent 70%, rgba(0, 0, 0, 0.35)), repeating-linear-gradient(90deg, #a3122d 0 6px, #d62845 6px 14px, #b81a36 14px 20px);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.curtain.l {
  left: 0;
  border-bottom-right-radius: 60% 18%;
}
.curtain.r {
  right: 0;
  border-bottom-left-radius: 60% 18%;
}
.valance {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(env(safe-area-inset-top, 0px) + 40px);
  z-index: 9;
  background: repeating-linear-gradient(90deg, #a3122d 0 8px, #d62845 8px 18px, #b81a36 18px 26px);
  pointer-events: none;
}
.valance::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  height: 22px;
  background: radial-gradient(circle at 50% 0, #c41e3a 0 17px, #ffcf3f 17px 21px, transparent 22px) 0 0 / 44px 22px repeat-x;
}
.drape {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51%;
  z-index: 12;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.3)), repeating-linear-gradient(90deg, #a3122d 0 14px, #e0304e 14px 30px, #b81a36 30px 44px);
  transition: transform 1s cubic-bezier(0.6, 0, 0.3, 1);
  pointer-events: none;
}
.drape.l {
  left: 0;
}
.drape.r {
  right: 0;
}
.show.open .drape.l {
  transform: translateX(-100%);
}
.show.open .drape.r {
  transform: translateX(100%);
}
.bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 4px;
}
.pq-progress.progress {
  gap: min(1vw, 6px);
  padding: 5px 10px;
}
.pq-progress.progress svg {
  width: min(7.4vw, 36px);
  height: min(7.4vw, 36px);
}
.dock {
  position: absolute;
  left: max(4px, calc(var(--cw) - 20px));
  bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  width: min(22vw, 12.5vh, 112px);
  z-index: 21;
}
.caption {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 40;
  max-width: min(80vw, 520px);
  background: rgba(255, 255, 255, 0.94);
  border-radius: 18px;
  padding: 6px 16px;
  font-size: min(4.6vw, 22px);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.area {
  position: absolute;
  top: var(--top);
  bottom: 0;
  left: var(--cw);
  right: var(--cw);
  z-index: 3;
}
.round {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: min(2vh, 16px);
  padding: 0 4px calc(min(12.5vh, 112px) + env(safe-area-inset-bottom, 0px));
}
.round.out {
  animation: pq-round-out 0.5s ease-in forwards;
}
.pop-in {
  animation: pq-in 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) both;
  animation-delay: calc(var(--d, 0) * 1s + 0.25s);
}

/* ---------- Musicians ---------- */
.mus,
.ccard,
.slot,
.sticker {
  --ani: min(30vw, 22vh, 200px);
}
.mus {
  position: relative;
  width: var(--ani);
  height: calc(var(--ani) * 1.2);
  flex: none;
}
.ani {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.ani .whole,
.ani .eyes,
.ani .head,
.ani .inst-in,
.ani .sing,
.ani .stick,
.ani .bell,
.ani .paw {
  transform-box: fill-box;
}
.ani .whole {
  transform-origin: 50% 100%;
  animation: idle 2.4s ease-in-out infinite;
}
.ani .eyes {
  transform-origin: 50% 50%;
  animation: blink 4.4s infinite;
}
.mus:nth-child(2) .ani .whole,
.mus:nth-child(2) .ani .eyes {
  animation-delay: -0.8s, -1.7s;
}
.mus:nth-child(3) .ani .whole,
.mus:nth-child(3) .ani .eyes {
  animation-delay: -1.5s, -3s;
}
.mus:nth-child(4) .ani .whole,
.mus:nth-child(4) .ani .eyes {
  animation-delay: -0.4s, -0.9s;
}
.ani .head {
  transform-origin: 50% 90%;
}
.ani .inst {
  transform-box: fill-box;
}
.ani .inst-in {
  transform-origin: 50% 50%;
}
.ani .sing {
  transform-origin: 50% 50%;
  transform: scale(0);
}
.ani .stick {
  transform-origin: 0% 100%;
}
.ani .stick.l {
  transform-origin: 100% 100%;
}
.playing .ani .sing {
  animation: pq-talk 0.22s ease-in-out infinite alternate;
}
.playing .ani .head {
  animation: head-tilt 0.7s ease-in-out infinite alternate;
}
.playing .ani .stick {
  animation: stick 0.22s ease-in-out infinite alternate;
}
.playing .ani .stick.l {
  animation-delay: -0.11s;
}
.playing .ani .inst-in {
  animation: inst-wiggle 0.3s ease-in-out infinite alternate;
}
.playing .ani .i-tambor .inst-in,
.playing .ani .i-piano .inst-in,
.playing .ani .i-xilofono .inst-in {
  animation: inst-hit 0.25s ease-in-out infinite alternate;
}
.playing .ani .bell {
  transform-origin: 0% 50%;
  animation: bell 0.3s ease-in-out infinite alternate;
}
.playing .ani .paw {
  animation: paw 0.25s ease-in-out infinite alternate;
}
.playing .ani .trunk {
  animation: none;
}
.beat .ani .whole {
  animation: squash 0.3s ease-out;
}
@keyframes idle {
  0%,
  100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.025, 0.975);
  }
}
@keyframes blink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.1);
  }
}
@keyframes head-tilt {
  from {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(5deg);
  }
}
@keyframes stick {
  from {
    transform: rotate(-14deg);
  }
  to {
    transform: rotate(10deg);
  }
}
@keyframes inst-wiggle {
  from {
    transform: rotate(-7deg);
  }
  to {
    transform: rotate(7deg);
  }
}
@keyframes inst-hit {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(3px) scale(1.04, 0.96);
  }
}
@keyframes bell {
  to {
    transform: scale(1.15);
  }
}
@keyframes paw {
  to {
    transform: translateY(-4px);
  }
}
@keyframes squash {
  0% {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(1.08, 0.9) translateY(0);
  }
  60% {
    transform: scale(0.95, 1.06) translateY(-5%);
  }
  100% {
    transform: scale(1, 1);
  }
}

/* feedback */
.hint::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 40%;
  border: 6px solid #ffd23f;
  box-shadow: 0 0 22px rgba(255, 210, 63, 0.9);
  animation: pq-ring 1s ease-out infinite;
  pointer-events: none;
}
.mus.hint,
.ccard.hint {
  filter: drop-shadow(0 0 14px rgba(255, 220, 90, 0.95));
}
.mus.hint {
  border-radius: 40%;
  background: radial-gradient(circle at 50% 60%, rgba(255, 244, 170, 0.85), rgba(255, 220, 90, 0.35) 55%, transparent 70%);
}
.good {
  animation: pq-good 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) !important;
  z-index: 3;
}
.shake {
  animation: pq-shake 0.55s ease-in-out !important;
}
.dim {
  opacity: 0.35;
  filter: grayscale(0.7);
  transition: opacity 0.4s, filter 0.4s;
}

/* ---------- ¿Quién toca? ---------- */
.ear,
.mbox {
  position: relative;
  width: min(26vw, 14vh, 128px);
  height: min(26vw, 14vh, 128px);
  border-radius: 50%;
  flex: none;
  filter: drop-shadow(0 7px 0 rgba(20, 8, 60, 0.35)) drop-shadow(0 12px 18px rgba(20, 8, 60, 0.3));
}
.ear svg,
.mbox svg {
  width: 100%;
  height: 100%;
}
.ear .waves path {
  opacity: 0.25;
  transition: opacity 0.2s;
}
.ear.sounding .waves path {
  opacity: 1;
  animation: wave 0.6s ease-in-out infinite alternate;
}
.ear.sounding .waves .w2 {
  animation-delay: -0.3s;
}
@keyframes wave {
  to {
    opacity: 0.3;
  }
}
.ear.beat,
.mbox.beat {
  animation: beat 0.25s ease-out;
}
@keyframes beat {
  40% {
    transform: scale(1.12);
  }
}
.mbox.sounding svg {
  animation: gift 0.3s ease-in-out infinite alternate;
}
@keyframes gift {
  from {
    transform: rotate(-6deg);
  }
  to {
    transform: rotate(6deg) scale(1.05);
  }
}
.cast {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: min(3vw, 18px) min(4vw, 26px);
  max-width: 100%;
}
.cast.n2 .mus {
  --ani: min(40vw, 30vh, 250px);
}
.cast.n3 .mus {
  --ani: min(27vw, 25vh, 210px);
}
.cast.n4 {
  display: grid;
  grid-template-columns: repeat(2, auto);
}
.cast.n4 .mus {
  --ani: min(36vw, 20vh, 190px);
}
@media (min-aspect-ratio: 5/4) {
  .cast.n4 {
    grid-template-columns: repeat(4, auto);
  }
  .cast.n4 .mus {
    --ani: min(19vw, 32vh, 210px);
  }
}

/* ---------- Contrasts ---------- */
.duo {
  display: flex;
  gap: min(4vw, 30px);
  justify-content: center;
  align-items: flex-end;
}
.ccard {
  --ani: min(36vw, 26vh, 230px);
  position: relative;
  width: calc(var(--ani) * 1.08);
  padding: 10px 6px 34px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.5), 0 10px 20px rgba(20, 8, 60, 0.2);
  transition: background 0.3s;
}
.ccard .ani {
  height: calc(var(--ani) * 1.15);
}
.ccard.side-b .ani {
  transform: scale(0.82);
  transform-origin: 50% 100%;
}
.ccard .badge {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  width: min(17vw, 76px);
  height: min(11vw, 50px);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 5px 0 rgba(20, 8, 60, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ccard .badge svg {
  width: 70%;
  height: 70%;
  overflow: visible;
}
.ccard.spot {
  background: radial-gradient(circle at 50% 40%, rgba(255, 246, 180, 0.95), rgba(255, 220, 90, 0.55));
  box-shadow: inset 0 0 0 4px #ffd23f, 0 0 40px rgba(255, 220, 90, 0.8);
}
.ccard.hint::after {
  border-radius: 32px;
}
.r-agudo .ccard.side-b .ani,
.r-rapido .ccard.side-b .ani {
  transform: none;
}

/* ---------- Statues ---------- */
.dance-row .mus {
  --ani: min(27vw, 26vh, 210px);
}
.dancing .ani .whole {
  animation: dance 0.45s ease-in-out infinite alternate;
}
.dancing .mus:nth-child(2) .ani .whole {
  animation-delay: -0.22s;
}
.dancing .ani .inst-in {
  animation: inst-wiggle 0.3s ease-in-out infinite alternate;
}
.frozen .ani {
  filter: grayscale(0.85) brightness(1.15) contrast(0.9);
  transition: filter 0.25s;
}
.frozen .ani .whole,
.frozen .ani .eyes {
  animation: none;
}
.frozen .mus:nth-child(1) .ani .whole {
  transform: rotate(-8deg);
}
.frozen .mus:nth-child(3) .ani .whole {
  transform: rotate(8deg);
}
@keyframes dance {
  from {
    transform: rotate(-9deg) translateY(0);
  }
  to {
    transform: rotate(9deg) translateY(-7%);
  }
}
.hand {
  position: relative;
  width: min(36vw, 19vh, 160px);
  height: min(36vw, 19vh, 160px);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffef9a, #ffc21a);
  box-shadow: 0 8px 0 #c98a00, 0 14px 24px rgba(20, 8, 60, 0.35), inset 0 0 0 6px #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.hand svg {
  width: 74%;
  height: 74%;
}
.hand:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 #c98a00, inset 0 0 0 6px #fff;
}
.hand.hint::after {
  border-radius: 50%;
}

/* ---------- Rhythm ---------- */
.rit-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(3vw, 20px);
}
.teacher {
  --ani: min(44vw, 27vh, 230px);
}
.dots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: min(36vw, 200px);
  justify-content: center;
}
.dots i {
  width: min(9vw, 44px);
  height: min(9vw, 44px);
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 0 rgba(20, 8, 60, 0.25);
  transition: background 0.15s, transform 0.15s;
}
.dots i.bear {
  background: #b47c4f;
  transform: scale(1.12);
}
.dots i.kid {
  background: #ff4f5e;
  border-color: #ffd23f;
  animation: pq-star-get 0.5s cubic-bezier(0.3, 1.8, 0.5, 1);
}
.bigdrum {
  position: relative;
  width: min(62vw, 27vh, 300px);
  aspect-ratio: 120 / 90;
  flex: none;
  filter: drop-shadow(0 10px 0 rgba(20, 8, 60, 0.3));
  transition: opacity 0.3s, filter 0.3s;
}
.bigdrum svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.bigdrum .stick {
  display: none;
}
.bigdrum .skin {
  transform-box: fill-box;
  transform-origin: 50% 70%;
}
.bigdrum.hit .skin {
  animation: drum-hit 0.25s ease-out;
}
.bigdrum.wait {
  opacity: 0.55;
  filter: grayscale(0.5);
}
.bigdrum.yourturn {
  animation: yourturn 0.9s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.bigdrum.hint::after {
  border-radius: 50%;
}
@keyframes drum-hit {
  30% {
    transform: scale(1.06, 0.9);
  }
}
@keyframes yourturn {
  30% {
    transform: scale(1.15) rotate(-4deg);
  }
  60% {
    transform: scale(0.97) rotate(3deg);
  }
}

/* ---------- Xylophone and song ---------- */
.song-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.band {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: min(2vw, 14px);
}
.band .mus.mini {
  --ani: min(22vw, 14vh, 130px);
}
.band.big .mus.mini {
  --ani: min(20vw, 15vh, 140px);
}
.track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  max-width: 96%;
  background: rgba(20, 8, 60, 0.35);
  border-radius: 999px;
  padding: 6px 12px;
}
.track i {
  width: min(4.2vw, 20px);
  height: min(4.2vw, 20px);
  border-radius: 50%;
  background: var(--c);
  opacity: 0.3;
  transition: opacity 0.2s, transform 0.2s;
}
.track i.on {
  opacity: 1;
  transform: scale(1.15);
  box-shadow: 0 0 0 2px #fff;
}
.track i.peek {
  opacity: 0.85;
}
.xylo {
  position: relative;
  width: min(100%, 680px);
  height: min(36vh, 300px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(1.6vw, 10px);
  padding: 0 min(3vw, 18px);
  flex: none;
}
.xylo .rail {
  position: absolute;
  left: 0;
  right: 0;
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(180deg, #c98a4b, #8a4f22);
  box-shadow: 0 5px 0 rgba(20, 8, 60, 0.35);
}
.xylo .rail.t {
  top: 24%;
  transform: rotate(3deg);
}
.xylo .rail.b {
  bottom: 24%;
  transform: rotate(-3deg);
}
.xbar {
  position: relative;
  flex: 1;
  max-width: 76px;
  height: var(--h);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.25), transparent 40%, rgba(0, 0, 0, 0.12)), linear-gradient(180deg, var(--c), var(--d));
  box-shadow: 0 6px 0 var(--d), 0 10px 14px rgba(20, 8, 60, 0.35);
  transition: transform 0.08s, filter 0.15s;
}
.xbar .nail {
  position: absolute;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #c8c8d8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.xbar .nail.t {
  top: 14%;
}
.xbar .nail.b {
  bottom: 14%;
}
.xbar .shine {
  position: absolute;
  left: 18%;
  top: 6%;
  bottom: 6%;
  width: 14%;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.35);
}
.xbar.hit {
  transform: translateY(5px) scale(0.97);
  box-shadow: 0 1px 0 var(--d), 0 4px 8px rgba(20, 8, 60, 0.35);
  filter: brightness(1.25);
}
.xbar.lit {
  filter: brightness(1.35) drop-shadow(0 0 16px var(--c));
  transform: translateY(-6px) scale(1.05);
}
.xbar.next {
  z-index: 2;
  animation: next 0.9s ease-in-out infinite;
  box-shadow: 0 6px 0 var(--d), 0 0 0 5px #fff, 0 0 30px 10px var(--c);
}
.xbar.next::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -46px;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  background: radial-gradient(circle at 40% 35%, #fff6b0, #ffc21a 70%);
  border-radius: 50%;
  box-shadow: 0 4px 0 #c98a00;
  animation: mallet 0.9s ease-in-out infinite;
}
.xbar.wiggle {
  animation: pq-shake 0.6s ease-in-out 2;
}
@keyframes next {
  50% {
    transform: translateY(-6px) scale(1.04);
    filter: brightness(1.2);
  }
}
@keyframes mallet {
  50% {
    transform: translateY(14px);
  }
}
.finale .xylo {
  animation: pq-float 0.8s ease-in-out infinite;
}

/* ---------- Concert ---------- */
.concierto {
  justify-content: space-evenly;
}
.concierto .xylo {
  height: min(28vh, 240px);
}
.tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(3vw, 18px);
}
.bigdrum.small {
  width: min(30vw, 15vh, 160px);
}
.tool {
  width: min(16vw, 9vh, 76px);
  height: min(16vw, 9vh, 76px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 0 rgba(20, 8, 60, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: opacity 0.3s;
}
.tool svg {
  width: 82%;
  height: 82%;
}
.tool:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 rgba(20, 8, 60, 0.35);
}
.tool.on.rec {
  animation: rec 1s ease-in-out infinite;
}
.tool.playb.off {
  opacity: 0.45;
}
.tool.playb.on {
  box-shadow: 0 6px 0 rgba(20, 8, 60, 0.35), 0 0 0 6px #7cf06b;
}
.tool.done {
  width: min(20vw, 11vh, 96px);
  height: min(20vw, 11vh, 96px);
  background: linear-gradient(180deg, #8cf57a, #2fbf4f);
  box-shadow: 0 7px 0 #1d8a37, 0 12px 20px rgba(0, 0, 0, 0.3);
  animation: pq-breathe 1.6s ease-in-out infinite;
}
.tool.yourturn {
  animation: yourturn 0.9s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes rec {
  50% {
    box-shadow: 0 6px 0 rgba(20, 8, 60, 0.35), 0 0 0 10px rgba(255, 61, 94, 0.45);
  }
}
.concierto.recording::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 24px;
  border: 5px solid rgba(255, 61, 94, 0.8);
  animation: rec-border 1s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rec-border {
  50% {
    border-color: rgba(255, 61, 94, 0.25);
  }
}
.mus.bow .ani .whole {
  animation: bow 1.2s ease-in-out;
}
@keyframes bow {
  40%,
  60% {
    transform: rotate(0) scale(1, 0.86) translateY(4%);
  }
}

/* ---------- Prize and album ---------- */
.pack {
  border-radius: 50%;
}
.won-star {
  position: relative;
  width: min(22vw, 12vh, 100px);
  animation: pq-star-get 1s cubic-bezier(0.3, 1.8, 0.5, 1) both, pq-breathe 1.4s ease-in-out 1s infinite;
  filter: drop-shadow(0 0 16px rgba(255, 210, 63, 0.9));
}
.won-star svg {
  width: 100%;
  height: 100%;
}
.sticker {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fff 0 55%, #fff4c2 56% 100%);
  box-shadow: 0 0 0 8px #fff, 0 0 0 13px var(--gold), 0 18px 30px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pq-sticker-in 0.9s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
.sticker .ani {
  width: 74%;
  height: 86%;
}
.album-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (min-aspect-ratio: 5/4) {
  .album-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .pq-album.album {
    width: min(94vw, 720px);
  }
}
.slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px dashed rgba(160, 110, 40, 0.35);
  background: rgba(255, 255, 255, 0.5);
}
.slot .ani {
  width: 76%;
  height: 88%;
}
.slot.got {
  border: 0;
  background: #fff;
  box-shadow: 0 0 0 5px #fff, 0 0 0 8px var(--gold), 0 8px 12px rgba(0, 0, 0, 0.2);
  transform: rotate(var(--r, 0deg));
}
.slot.got.new {
  animation: pq-sticker-in 0.9s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
.slot.miss .ani {
  filter: grayscale(1) brightness(0.25);
  opacity: 0.18;
}
.slot .ani .whole {
  animation: none;
}
.slot.playing .ani .whole,
.slot.beat .ani .whole {
  animation: squash 0.3s ease-out;
}

/* ---------- Landscape phones: everything must fit the short height ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  body {
    --top: calc(env(safe-area-inset-top, 0px) + 58px);
  }
  .hero {
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  }
  .title {
    font-size: min(9vh, 44px);
  }
  .title .line {
    display: inline-block;
    margin: 0 0.15em;
  }
  .hero-pipo {
    width: min(16vh, 80px);
  }
  .node {
    --node: min(22vh, 17vw, 120px);
  }
  .pq-round-btn {
    width: 48px;
    height: 48px;
  }
  .round {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-evenly;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    padding-left: min(15vh, 90px);
  }
  .valance {
    height: calc(env(safe-area-inset-top, 0px) + 28px);
  }
  .dock {
    width: min(15vh, 80px);
  }
  .xylo {
    height: min(42vh, 220px);
    width: min(70%, 520px);
  }
  .concierto .xylo {
    height: min(34vh, 200px);
    width: min(60%, 480px);
  }
  .song-head {
    width: auto;
  }
  .track {
    max-width: 40vw;
  }
  .cast.n4 {
    grid-template-columns: repeat(4, auto);
  }
  .cast.n4 .mus,
  .cast.n3 .mus,
  .dance-row .mus {
    --ani: min(17vw, 36vh, 180px);
  }
  .cast.n2 .mus {
    --ani: min(26vw, 42vh, 220px);
  }
  .ccard {
    --ani: min(20vw, 38vh, 200px);
  }
  .teacher {
    --ani: min(20vw, 38vh, 180px);
  }
  .bigdrum {
    width: min(34vw, 46vh, 280px);
  }
  .bigdrum.small {
    width: min(20vw, 28vh, 140px);
  }
  .band .mus.mini,
  .band.big .mus.mini {
    --ani: min(12vw, 22vh, 110px);
  }
  .tool {
    width: min(9vw, 16vh, 70px);
    height: min(9vw, 16vh, 70px);
  }
  .tool.done {
    width: min(11vw, 19vh, 84px);
    height: min(11vw, 19vh, 84px);
  }
  .ear,
  .mbox,
  .hand {
    width: min(14vw, 26vh, 130px);
    height: min(14vw, 26vh, 130px);
  }
}
@media (orientation: landscape) and (max-height: 520px) {
  .round.r-cancion,
  .round.concierto {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    gap: 2px;
  }
  .r-cancion .song-head {
    flex-direction: row;
    gap: 14px;
  }
  .r-cancion .band .mus.mini,
  .concierto .band .mus.mini {
    --ani: min(10vw, 17vh, 90px);
  }
  .r-cancion .xylo {
    height: min(46vh, 220px);
  }
  .r-cancion .track {
    max-width: 52vw;
    gap: 4px;
  }
  .r-cancion .track i {
    width: min(2.2vw, 16px);
    height: min(2.2vw, 16px);
  }
  .concierto .xylo {
    height: min(32vh, 190px);
  }
  .concierto .bigdrum.small {
    width: min(18vw, 20vh, 120px);
  }
  .concierto .tool {
    width: min(9vw, 14vh, 64px);
    height: min(9vw, 14vh, 64px);
  }
  .concierto .tool.done {
    width: min(11vw, 17vh, 76px);
    height: min(11vw, 17vh, 76px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-bg i,
  .map-path .dash,
  .spots i,
  .home-bg::before,
  .home-bg::after {
    animation: none;
  }
}

.pq-album-count svg {
  width: 34px;
  height: 34px;
}