/* Xilofone dos bichos: palco com cortinas e holofotes; cinco bichos em fila, cada um em cima da sua tecla. */
.play-xilofone .toy-scene{background:#3a2a52}
.xilofone-back{position:absolute;inset:0;background:radial-gradient(ellipse 70% 45% at 50% 30%,#6a4f93,#3a2a52 70%),#3a2a52}
.xilofone-back::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#ffffff55 1.2px,transparent 1.6px);background-size:28px 28px;opacity:.5}
.xilofone-lights{position:absolute;inset:0 0 50% 0;pointer-events:none;overflow:hidden}
.xilofone-lights i{position:absolute;top:-10%;width:34cqw;height:60cqh;left:var(--x);translate:-50% 0;transform-origin:50% 0;background:linear-gradient(#fff6c8aa,#fff6c800 85%);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);animation:xilofone-beam 5s ease-in-out infinite alternate;mix-blend-mode:screen}
.xilofone-lights i:nth-child(1){--x:20%;animation-delay:-1s}.xilofone-lights i:nth-child(2){--x:50%;background:linear-gradient(#ffc8ecaa,#ffc8ec00 85%);animation-delay:-3s}.xilofone-lights i:nth-child(3){--x:80%;background:linear-gradient(#c8f0ffaa,#c8f0ff00 85%)}
.xilofone-party .xilofone-lights i{animation-duration:.6s}
.xilofone-stage{position:absolute;left:0;right:0;bottom:50%;height:calc(var(--rise) + 9cqw);background:linear-gradient(#c98b55,#a8693f);box-shadow:inset 0 6px 0 #dfa673,0 8px 0 #7a4a2b}
.xilofone-stage::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 12cqw,#00000018 12cqw 12.4cqw)}
/* Degrau de trás da bancada, onde ficam os cantores das colunas pares. */
.xilofone-riser{position:absolute;left:0;right:0;top:0;height:calc(100% - var(--rise) + 1cqw);background:linear-gradient(#d99a62,#b97a4a);box-shadow:inset 0 5px 0 #eab47e,0 6px 0 #8a5531}
.play-xilofone .toy-scene{--rise:29cqw}
.xilofone-curtain{position:absolute;top:0;height:50%;width:15%;z-index:6;pointer-events:none;animation:xilofone-curtain 4s ease-in-out infinite alternate}
.xilofone-curtain svg{display:block;width:100%;height:100%}
.xilofone-curtain-l{left:-3%;transform-origin:0 0}
.xilofone-curtain-r{right:-3%;transform-origin:100% 0;animation-delay:-2s}
.xilofone-curtain-r svg{transform:scaleX(-1)}
.xilofone-valance{position:absolute;left:0;right:0;top:0;height:5%;z-index:9;background:radial-gradient(circle at 50% 0,#e0434f 60%,transparent 62%) 0 0/14cqw 200%,#c8323f;box-shadow:0 4px 0 #ffc23a;pointer-events:none}
.xilofone-choir,.xilofone-xylo{--xl:2%;--xw:96%}
.xilofone-choir{position:absolute;inset:0;z-index:7;pointer-events:none}
/* Cada cantor: na coluna da sua tecla, de pé num tapetinho da mesma cor, logo acima da tecla. */
/* Cada cantor: na coluna da sua tecla, de pé num tapetinho da mesma cor. Colunas pares no degrau
   de trás (mais alto), ímpares na frente: assim cabem grandes, inteiros e sem encostar. */
.xilofone-singer{position:absolute;left:calc(var(--xl) + (var(--i) + .5) * var(--xw) / 5);bottom:51.5%;width:27cqw;aspect-ratio:1;translate:-50% 0;transform-origin:50% 100%;animation:xilofone-sway 1.8s ease-in-out infinite alternate}
.xilofone-singer.back{bottom:calc(51.5% + var(--rise))}
.xilofone-singer.lit .xilofone-animal{animation:xilofone-lit .5s ease-in-out infinite alternate}
.xilofone-animal{position:absolute;inset:0}
.xilofone-animal .art-img{filter:drop-shadow(0 4px 3px rgba(0,0,0,.25))}
.xilofone-spot{position:absolute;left:10%;right:10%;bottom:-7%;height:15%;border-radius:50%;background:var(--c);box-shadow:0 3px 0 #0003,0 0 18px var(--c);opacity:.95;transition:box-shadow .3s}
.xilofone-singer.lit .xilofone-spot{box-shadow:0 3px 0 #0003,0 0 30px 10px var(--c)}
.xilofone-xylo{position:absolute;left:var(--xl);right:var(--xl);top:52%;bottom:3%;z-index:8;display:grid;grid-template-columns:repeat(5,1fr);align-items:start;touch-action:none}
.xilofone-xylo::before{content:"";position:absolute;left:0;right:0;top:-1.5%;height:3%;border-radius:99px;background:linear-gradient(#b67a48,#8a5a3b);box-shadow:0 3px 0 #5e3a22;pointer-events:none}
.xilofone-rail{position:absolute;left:-1%;right:-1%;height:3.4%;border-radius:99px;background:linear-gradient(#b67a48,#8a5a3b);box-shadow:0 4px 0 #5e3a22;pointer-events:none}
.xilofone-rail.top{top:18%}.xilofone-rail.bottom{top:66%;transform:rotate(-3deg);transform-origin:0 50%}
.xilofone-key{position:relative;height:100%;border:0;padding:0 2px;background:transparent;display:flex;align-items:flex-start;justify-content:center;touch-action:none;-webkit-tap-highlight-color:transparent}
.xilofone-bar{position:relative;display:block;width:100%;height:var(--len);border-radius:16px;background:linear-gradient(90deg,#ffffff50,transparent 40%),var(--c);box-shadow:inset 0 -8px 0 #0002,0 6px 0 #0004;pointer-events:none;transition:filter .3s,box-shadow .3s,opacity .3s}
.xilofone-bar i{position:absolute;left:50%;width:24%;max-width:14px;aspect-ratio:1;border-radius:50%;translate:-50% 0;background:#ffffffcc;box-shadow:inset 0 -2px 0 #0002}
.xilofone-bar i:first-child{top:12%}.xilofone-bar i:last-child{bottom:12%}
/* Musiquinha guiada: as teclas apagam um pouco e a próxima nota brilha, pulsando. */
.xilofone-song .xilofone-key:not(.lit) .xilofone-bar{filter:brightness(.6)}
.xilofone-key.lit .xilofone-bar{filter:brightness(1.18);box-shadow:inset 0 -8px 0 #0002,0 0 0 5px #fff,0 0 28px 10px var(--c);animation:xilofone-lit .7s ease-in-out infinite alternate}
.xilofone-finale .xilofone-bar{filter:none!important}
.xilofone-notes{position:absolute;inset:0;z-index:12;pointer-events:none}
.xilofone-note{position:absolute;width:min(11cqw,46px);aspect-ratio:4/5;filter:drop-shadow(0 2px 0 #fff) drop-shadow(0 0 2px #fff)}
.xilofone-note svg{display:block;width:100%;height:100%}
.xilofone-note.rain{top:0;width:min(9cqw,40px)}
@keyframes xilofone-beam{from{rotate:-14deg}to{rotate:14deg}}
@keyframes xilofone-curtain{from{scale:1 1}to{scale:.94 1}}
@keyframes xilofone-sway{from{rotate:-3deg}to{rotate:3deg}}
@keyframes xilofone-lit{from{translate:0 0}to{translate:0 -6px}}
@container (orientation:landscape){
  .play-xilofone .toy-scene{--rise:0px}
  .xilofone-stage{bottom:auto;top:30%;height:16%}
  .xilofone-riser{display:none}
  .xilofone-singer,.xilofone-singer.back{bottom:56%;width:min(14cqw,34cqh)}
  .xilofone-choir,.xilofone-xylo{--xl:12%;--xw:76%}
  .xilofone-xylo{top:46%;bottom:3%}
  .xilofone-curtain{width:11%;height:56%}
}