/* игра «Музыка» (music): стили только этой игры. Селекторы без #s-music действуют на всю страницу — новые правила пишите через #s-music. */
/* ---------- music v5 (10.2026): the INSTRUMENT is the main thing; on the stage the child dances with the family, the animals watch from the hall ----------
   every band is placed by fitStage() in music.js from the height that is really visible (Safari's vh is taller); here only the looks */
/* the instrument */
.mu-play{position:absolute;left:3vmin;width:70vw;top:45%;height:40%;display:flex;justify-content:center;align-items:center;gap:1.1vw;z-index:4;touch-action:none;user-select:none;-webkit-user-select:none}
.mk{position:relative;flex:1;height:100%;max-width:16vmin;touch-action:none}
.mk:before{content:"";position:absolute;left:50%;top:-6.5vmin;width:6vmin;height:6vmin;translate:-50% 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 L62 36 L94 38 L69 58 L78 90 L50 72 L22 90 L31 58 L6 38 L38 36 Z' fill='%23ffd23f' stroke='%23e0a800' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;pointer-events:none;z-index:2}
.mk.lit:before{opacity:1;animation:mu-arrow .6s ease-in-out infinite alternate}
@keyframes mu-arrow{to{translate:-50% 1.6vmin;scale:1.15}}
@keyframes mu-glow{from{box-shadow:0 0 0 .8vmin #fff,0 0 3vmin 1vmin var(--c)}to{box-shadow:0 0 0 1.4vmin #fff,0 0 6vmin 3vmin var(--c)}}
/* piano: white keys with a coloured tip in a red case */
.k-piano{background:linear-gradient(#e2513f,#a52a1f);border-radius:3vmin;padding:4.5vmin 1.6vmin 1.6vmin;gap:.7vmin;box-shadow:0 1.2vmin 0 #7a1d14,0 2vmin 3vmin rgba(0,0,0,.35)}
.k-piano .mk{max-width:none;background:linear-gradient(#fff 0 58%,transparent 58%),linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0) 85%),var(--c);border-radius:0 0 2.4vmin 2.4vmin;box-shadow:inset 0 -1.4vmin 0 rgba(0,0,0,.14),0 .6vmin 0 #8a2419;transition:translate .06s}
.k-piano .mk.hit{translate:0 .9vmin;filter:brightness(.93);box-shadow:inset 0 -.6vmin 0 rgba(0,0,0,.14)}
.k-piano .mk.lit{animation:mu-glow .6s ease-in-out infinite alternate;z-index:1}
.mk-black{position:absolute;left:1.6vmin;right:1.6vmin;top:4.5vmin;height:52%;pointer-events:none;z-index:2}
.mk-black b{position:absolute;top:0;width:6.5%;height:100%;translate:-50% 0;background:linear-gradient(#444,#111);border-radius:0 0 1vmin 1vmin;box-shadow:0 .5vmin 0 #000}
/* xylophone: rainbow bars on two rails */
.k-xylo{background:linear-gradient(transparent 22%,#a8673a 22% 27%,transparent 27% 73%,#a8673a 73% 78%,transparent 78%)}
.k-xylo .mk{max-width:19vmin;background:linear-gradient(90deg,rgba(255,255,255,.35),transparent 30%),radial-gradient(circle at 50% 10%,#fff 0 1.1vmin,transparent 1.3vmin),radial-gradient(circle at 50% 90%,#fff 0 1.1vmin,transparent 1.3vmin),var(--c);border-radius:2.4vmin;box-shadow:0 .9vmin 0 rgba(0,0,0,.25),0 1.4vmin 2vmin rgba(0,0,0,.25);transition:transform .08s}
.k-xylo .mk:nth-child(1){height:100%}
.k-xylo .mk:nth-child(2){height:94%}
.k-xylo .mk:nth-child(3){height:88%}
.k-xylo .mk:nth-child(4){height:82%}
.k-xylo .mk:nth-child(5){height:76%}
.k-xylo .mk:nth-child(6){height:70%}
.k-xylo .mk:nth-child(7){height:64%}
.k-xylo .mk:nth-child(8){height:58%}
.k-xylo .mk.hit{transform:scale(.94);filter:brightness(1.2)}
.k-xylo .mk.lit,.k-dudka .mk.lit,.k-drums .mk.lit,.k-choir .mk.lit{animation:mu-glow .6s ease-in-out infinite alternate}
/* bells */
.k-bells{align-items:flex-end;padding-bottom:2vmin}
.k-bells .mk{height:auto;max-width:none;aspect-ratio:100/130;max-height:100%;transform-origin:50% 0}
.k-bells .mk svg{width:100%;height:100%;filter:drop-shadow(0 1vmin 1vmin rgba(0,0,0,.3))}
.k-bells .mk.hit{animation:mu-ring .5s}
.k-bells .mk.lit svg{animation:mu-bglow .6s ease-in-out infinite alternate}
@keyframes mu-ring{25%{rotate:16deg}60%{rotate:-11deg}85%{rotate:5deg}}
@keyframes mu-bglow{from{filter:drop-shadow(0 0 1vmin #fff) drop-shadow(0 0 2vmin var(--c))}to{filter:drop-shadow(0 0 2vmin #fff) drop-shadow(0 0 5vmin var(--c))}}
/* recorder: a wooden pipe with coloured holes */
.k-dudka{padding:3vmin 4vmin 3vmin 13vmin;transform-origin:50% 50%;gap:1.6vmin;background:linear-gradient(#f3c98f,#d5965a 55%,#b2733d);border-radius:12vmin 14vmin 14vmin 12vmin;box-shadow:inset 0 1vmin 0 rgba(255,255,255,.4),0 1.2vmin 0 #8a5426,0 2vmin 3vmin rgba(0,0,0,.35)}
.k-dudka:before{content:"";position:absolute;left:2.5vmin;top:50%;translate:0 -50%;width:9vmin;height:4vmin;border-radius:2vmin;background:#6b3d1b;box-shadow:inset 0 .6vmin 0 rgba(0,0,0,.3)}
.k-dudka .mk{flex:none;width:var(--dh,12vmin);height:auto;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#3a2010 0 36%,var(--c) 38% 100%);box-shadow:0 .6vmin 0 rgba(0,0,0,.25);transition:transform .08s}
.k-dudka .mk.hit{transform:scale(.9);background:radial-gradient(circle,#fff6c8 0 36%,var(--c) 38% 100%)}
.k-dudka .mk:before{top:-7.5vmin}
/* guitar: strings over a sound hole */
.k-guitar{display:block}
.k-guitar .gt{position:absolute;pointer-events:none;filter:drop-shadow(0 1.2vmin 1.4vmin rgba(0,0,0,.35))}
.k-guitar .gt img,.k-guitar .gt svg{position:absolute;inset:0;width:100%;height:100%}
.k-guitar .gt .glow{opacity:0}
.k-guitar .gt .st{transform-box:view-box}
.k-guitar .gt .st.lit .glow{opacity:.9;animation:mu-sglow .6s ease-in-out infinite alternate}
.k-guitar .gt .st.pluck{animation:mu-pluck .5s linear}
@keyframes mu-pluck{0%,20%,40%,60%,80%{transform:translateY(16px)}10%,30%,50%,70%,90%{transform:translateY(-16px)}100%{transform:none}}
/* НЕАКТИВНО (перекрыто более поздним @keyframes mu-sglow, строка 882 старого style.css — побеждает последнее определение): @keyframes mu-sglow{from{opacity:.45}to{opacity:1}} */
.k-guitar .mk{position:absolute;flex:none;max-width:none;pointer-events:none}
.k-guitar .mk:before{left:-6.5vmin;top:50%;translate:0 -50%}
.k-guitar .mk.lit:before{animation:mu-arrowx .6s ease-in-out infinite alternate}
@keyframes mu-arrowx{to{translate:1.4vmin -50%;scale:1.15}}
@keyframes mu-sglow{to{box-shadow:0 0 1vmin #fff,0 0 3vmin 1vmin var(--c)}}
/* drums: real pictures */
.k-drums{gap:2vmin;flex-wrap:wrap;align-content:center}
.k-drums .mk{flex:none;width:min(calc((var(--kw,100vw) - 11vmin) / 6),calc(var(--kh,50vmin) - 2vmin));height:auto;max-width:none;aspect-ratio:1;border-radius:50%;transition:transform .07s}
.k-drums .mk:after{content:"";position:absolute;left:12%;right:12%;bottom:-2%;height:12%;border-radius:50%;background:rgba(0,0,0,.25);z-index:-1}
.k-drums .mk img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.k-drums .mk.hit{transform:scale(.88)}
.k-drums .mk.hit img{filter:brightness(1.15)}
.k-drums .mk.beat img,.k-choir .mk.beat img{animation:mu-beat .25s}
@keyframes mu-beat{40%{scale:1.05}}
/* animal choir: the animals are the keys; the baton sings all together */
.k-choir{gap:1vw}
.k-choir .mk{max-width:none;display:flex;align-items:flex-end;justify-content:center;border-radius:4vmin}
.k-choir .mk:after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:14%;border-radius:50%;background:radial-gradient(var(--c),transparent 70%);opacity:.75;z-index:-1}
.k-choir .mk img{max-width:100%;max-height:88%;object-fit:contain;transform-origin:50% 100%;pointer-events:none;animation:breathe 2.6s ease-in-out infinite}
.k-choir .mk:nth-child(2n) img{animation-delay:-1.3s}
.k-choir .mk.hit img{animation:sing .42s}
.k-choir .mk.lit{background:radial-gradient(ellipse at 50% 62%,rgba(255,255,255,.9),rgba(255,255,255,.35) 55%,transparent 72%);animation:mu-glow .6s ease-in-out infinite alternate}
#s-music .k-choir .mk:before{top:-2vmin;width:8vmin;height:8vmin}
.k-choir .mk.lit img{animation:mu-arrow2 .6s ease-in-out infinite alternate}
@keyframes mu-arrow2{to{scale:1.07;translate:0 -1.4vh}}
.mu-all{position:absolute;right:-1vmin;top:-2vmin;width:13vmin;height:13vmin;border-radius:50%;background:linear-gradient(#b89cff,#7b5cf0);box-shadow:0 .8vmin 0 #5d3fb8,0 1.2vmin 2vmin rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;z-index:3}
.mu-all svg{width:66%;height:66%}
.mu-all:active{translate:0 .5vmin}

/* mode buttons: a column on the right (landscape) or a row next to home and the stars (portrait, class row) */
.mu-side{position:absolute;right:calc(2vmin + env(safe-area-inset-right));top:2vmin;display:flex;flex-direction:column;gap:var(--g,2.2vmin);z-index:6}
#s-music .mu-side.row{flex-direction:row;right:auto}
.mu-btn{width:var(--bs,16vmin);height:var(--bs,16vmin);max-width:104px;max-height:104px;border-radius:50%;background:#fff;border:none;padding:calc(var(--bs,16vmin) * .1);box-shadow:0 .8vmin 0 #e0a800,0 1.2vmin 2vmin rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;transition:transform .12s}
.mu-btn img,.mu-btn svg{width:100%;height:100%;object-fit:contain;pointer-events:none}
.mu-btn:nth-child(2){box-shadow:0 .8vmin 0 #ff7ac8,0 1.2vmin 2vmin rgba(0,0,0,.28)}
.mu-btn:nth-child(3){box-shadow:0 .8vmin 0 #3fa3ff,0 1.2vmin 2vmin rgba(0,0,0,.28)}
.mu-btn:nth-child(4){box-shadow:0 .8vmin 0 #5fd068,0 1.2vmin 2vmin rgba(0,0,0,.28)}
.mu-btn.on{background:#fff6c4;outline:1vmin solid #ffd23f;animation:pulse 1.2s ease-in-out infinite}
.mu-btn:active{transform:translateY(.6vmin) scale(.95)}
/* portrait: the stars stand next to home, in the same row as the mode buttons (the stage gets the height) */
@media (orientation:portrait){#app:has(#s-music.active) .lvl-badge{left:calc(17vmin + env(safe-area-inset-left));top:calc(3.5vmin + env(safe-area-inset-top))}}
#s-music .mu-safe{position:absolute;left:0;bottom:0;width:0;height:env(safe-area-inset-bottom);pointer-events:none}
/* the stage: dancers (fam3d poses), shadows under their feet */
#s-music .mu-stage{position:absolute;inset:0;z-index:3;pointer-events:none}
#s-music .mu-floor{position:absolute;border-radius:1.4vmin;background:linear-gradient(#f6cf8e,#d9a05c var(--fh,4vmin),#a8622c var(--fh,4vmin),#7d4520);box-shadow:inset 0 .4vmin 0 rgba(255,255,255,.45),0 1vmin 1.6vmin rgba(0,0,0,.35)}
#s-music .mu-floor:after{content:"";position:absolute;left:3%;right:3%;top:calc(var(--fh,4vmin) + .5vmin);height:1vmin;background:radial-gradient(circle,#fff6b0 0 35%,transparent 40%) 0 0/4vmin 100% repeat-x;opacity:.9}
#s-music .mu-dn{position:absolute;pointer-events:none}
#s-music .mu-dn:before{content:"";position:absolute;left:28%;right:28%;bottom:-1%;height:6%;border-radius:50%;background:radial-gradient(rgba(40,20,10,.45),rgba(40,20,10,0) 70%)}
#s-music .mu-dmv{position:absolute;inset:0;transform-origin:50% 98%;animation:mu-dsway 3.4s ease-in-out infinite}
#s-music .mu-dn:nth-child(2n) .mu-dmv{animation-delay:-1.7s}
#s-music .mu-dmv img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .1s;pointer-events:none;-webkit-user-drag:none}
#s-music .mu-dmv img.mu-on{opacity:1}
#s-music .mu-dmv.mu-hop{animation:mu-dhop .3s ease-out}
#s-music .mu-dmv.mu-jmp{animation:mu-djmp .65s cubic-bezier(.3,1.4,.5,1)}
#s-music .mu-dmv.mu-spn{animation:mu-dspn .7s ease-in-out}
#s-music .mu-dhit{position:absolute;left:30%;right:30%;top:4%;bottom:2%;pointer-events:auto;border-radius:40% 40% 20% 20%}
@keyframes mu-dsway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
@keyframes mu-dhop{40%{transform:translateY(-4%) scale(1.04,.96)}}
@keyframes mu-djmp{40%{transform:translateY(-13%) scale(.95,1.06)}75%{transform:translateY(0) scale(1.05,.95)}}
@keyframes mu-dspn{50%{transform:translateY(-7%) scaleX(-1)}}
/* the hall: one row of animals seen from behind; a tapped one jumps up, turns round and cheers */
#s-music .mu-aud{position:absolute;z-index:5;display:flex;justify-content:space-around;align-items:flex-end;pointer-events:none}
#s-music.mu-choir .mu-aud{display:none}
#s-music .mu-au{position:relative;height:100%;aspect-ratio:.82;pointer-events:auto;transform-origin:50% 100%;animation:mu-ausway 3s ease-in-out infinite;transition:rotate .2s}
#s-music .mu-au:nth-child(2n){animation-delay:-1.5s}
#s-music .mu-au.mu-l{rotate:-5deg}
#s-music .mu-au img{position:absolute;bottom:0;left:50%;translate:-50% 0;height:100%;width:auto;max-width:none;pointer-events:none;transform-origin:50% 100%;-webkit-user-drag:none}
#s-music .mu-au .ch{height:120%;opacity:0}
#s-music .mu-au.mu-up .sit{opacity:0}
#s-music .mu-au.mu-up .ch{opacity:1;animation:mu-auup .9s cubic-bezier(.3,1.5,.5,1)}
@keyframes mu-ausway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes mu-auup{0%{transform:translateY(18%) scale(.9)}35%{transform:translateY(-14%) scale(1.04)}70%{transform:none}}
/* little surprises over the stage: note-butterflies, a spotlight, a falling star, fireworks, a rabbit from a hat, soap bubbles */
#s-music .mu-fx{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}
#s-music .mu-f{position:absolute;pointer-events:none}
#s-music .mu-fly{font-size:7vmin;font-weight:900;line-height:1;text-shadow:0 0 1vmin #fff,0 .4vmin 0 rgba(0,0,0,.3)}
#s-music .mu-spot{width:34vmin;translate:-50% 0;background:linear-gradient(rgba(255,255,255,.15),var(--c));clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);mix-blend-mode:screen;opacity:0;animation:mu-spot 1.3s ease-in-out forwards}
@keyframes mu-spot{25%{opacity:.7}70%{opacity:.55}100%{opacity:0}}
#s-music .mu-fstar svg{width:100%;height:100%;filter:drop-shadow(0 0 1.4vmin #fff6a8)}
#s-music .mu-hat{translate:-50% 0;transform-origin:50% 100%;animation:mu-hat 2.6s ease-in-out forwards}
#s-music .mu-hat img{width:100%;height:100%;object-fit:contain}
@keyframes mu-hat{0%{transform:translateY(30%) scale(.2);opacity:0}14%{transform:translateY(-8%) scale(1.08);opacity:1}24%{transform:none}82%{transform:none;opacity:1}100%{transform:translateY(25%) scale(.3);opacity:0}}
#s-music .mu-bub{border-radius:50%;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 10%,rgba(190,230,255,.3) 28%,rgba(255,190,240,.22) 70%,rgba(255,255,255,.75) 100%);border:.4vmin solid rgba(255,255,255,.85);box-shadow:inset 0 0 1.4vmin rgba(160,220,255,.9),0 0 1vmin rgba(255,255,255,.5)}
/* the bar between the stage and the instrument: the song's picture rides along the notes to the star, or the dance meter (height --bh from fitStage) */
.mu-bar{position:absolute;left:50%;translate:-50% 0;top:30%;height:var(--bh,10vmin);width:max-content;display:none;align-items:center;gap:1vmin;padding:0 1.6vmin;background:linear-gradient(#fffdf2,#fff3c8);border:.5vmin solid #ffd23f;border-radius:calc(var(--bh,10vmin) / 2);box-shadow:0 .6vmin 0 #e0a800,0 1vmin 2vmin rgba(0,0,0,.25);z-index:7;pointer-events:none;box-sizing:border-box}
.mu-bar.song,.mu-bar.dance{display:flex}
#s-music .mu-bar.song{width:100%}
.mu-bar .trk{position:relative;flex:1;height:100%;display:flex;align-items:center;justify-content:space-between;gap:.4vmin;margin:0 calc(var(--bh) * .45)}
.mu-bar .trk:before{content:"";position:absolute;left:0;right:0;top:50%;height:calc(var(--bh) * .14);translate:0 -50%;border-radius:1vmin;background:repeating-linear-gradient(90deg,#b7a6e6 0 2vmin,transparent 2vmin 3vmin)}
.mu-bar .trk img{position:absolute;left:0;top:50%;height:calc(var(--bh) * 1.15);width:auto;translate:-50% -50%;transition:left .3s cubic-bezier(.3,1.5,.5,1);z-index:2;filter:drop-shadow(0 .4vmin .4vmin rgba(0,0,0,.25))}
.mu-bar i{position:relative;flex:1 1 0;max-width:calc(var(--bh) * .34);min-width:1px;height:calc(var(--bh) * .38);border-radius:50%;background:#cfc2f2;box-shadow:inset 0 0 0 .3vmin #a995e0}
.mu-bar i.on{animation:goodt .35s}
.mu-bar i.pulse{scale:1.4}
.mu-bar .fin{flex:none;width:calc(var(--bh) * .95);height:calc(var(--bh) * .95);animation:pulse 1.2s ease-in-out infinite;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 L62 36 L94 38 L69 58 L78 90 L50 72 L22 90 L31 58 L6 38 L38 36 Z' fill='%23ffd23f' stroke='%23e0a800' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.mu-bar.dance{gap:1.2vmin;padding:0 2.4vmin}
.mu-bar.dance i{flex:none;max-width:none;width:calc(var(--bh) * .62);height:calc(var(--bh) * .62);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 L62 36 L94 38 L69 58 L78 90 L50 72 L22 90 L31 58 L6 38 L38 36 Z' fill='%23e6e1f2'/%3E%3C/svg%3E") center/contain no-repeat;border-radius:0}
.mu-bar.dance i.on{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 L62 36 L94 38 L69 58 L78 90 L50 72 L22 90 L31 58 L6 38 L38 36 Z' fill='%23ffd23f' stroke='%23e0a800' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E")}
.mu-bar .beat{width:calc(var(--bh) * .72);height:calc(var(--bh) * .72);border-radius:50%;background:radial-gradient(#ff8fc8,#ff4f9a);margin-right:1vmin;flex:none}
.mu-bar .beat.go{animation:mu-go .25s}
@keyframes mu-go{30%{scale:1.35;filter:brightness(1.3)}}
/* big pictures to choose from */
.mu-pick{position:absolute;inset:0;z-index:60;display:none;flex-wrap:wrap;align-content:center;justify-content:center;gap:3vmin;padding:15vmin 4vw 4vmin;background:rgba(25,30,90,.6)}
.mu-pick.show{display:flex}
.mu-card{width:min(24vmin,21vw);height:min(24vmin,21vw);border-radius:5vmin;background:#fff;border:1vmin solid var(--c);box-shadow:0 1vmin 0 var(--c),0 1.6vmin 3vmin rgba(0,0,0,.3);padding:1.8vmin;display:flex;align-items:center;justify-content:center;animation:pop-in .4s backwards}
.mu-card img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.mu-card.on{background:#fff6c4}
.mu-card:active{transform:scale(.94)}
@media (orientation:portrait){
  .mk{max-width:none}
  .k-piano{padding:4vmin 1.4vmin 1.4vmin;gap:.6vmin}
  .mu-all{top:auto;bottom:2vmin;right:1vmin}
  .mu-pick{padding:16vmin 3vw 4vmin}
  .mu-card{width:27vmin;height:27vmin}
}
@media (orientation:landscape){.mu-pick{padding-right:calc(min(16vmin,104px) + 7vmin)}}   /* the mode buttons stand on the right: the cards do not cover them */
/* two rows (class two, fitKeys): drums 3 + 3, bells 4 + 4, the choir 3 + 2 */
#s-music .k-drums.two{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;align-content:center;gap:2vmin 3vmin}
#s-music .k-drums.two .mk{width:min(calc((var(--kw,100vw) - 7vmin) / 3),calc((var(--kh,100vmin) - 2vmin) / 2 - 1vmin))}
#s-music .k-bells.two{flex-wrap:wrap;align-content:space-around;padding-bottom:0}
#s-music .k-bells.two .mk{flex:0 0 23.5%;height:46%;aspect-ratio:auto;max-width:none}
#s-music .k-choir.two{flex-wrap:wrap;align-content:center;gap:2vmin}
#s-music .k-choir.two .mk{flex:0 0 30%;height:46%}
@keyframes sing{40%{translate:0 -4vh;scale:1.08 .94}}
#s-music .helper.fam3d.hp-r .hp-bub{top:var(--mu-bt,2%)}
/* the helper dances on the stage on the right (helper.place from fitStage); its bubble opens to the left of its head; --hpi = the pictures' size */
#s-music .helper.fam3d{z-index:4}
#s-music .hp-it{width:var(--hpi,12vmin);height:var(--hpi,12vmin)}
#s-music .helper:not(.fam3d){width:18vmin;height:18vmin;z-index:8;bottom:auto}
#s-music .helper:not(.fam3d) .hp-bub{left:auto;right:calc(100% + 4vmin);translate:none;top:0;bottom:auto;flex-direction:row;transform-origin:100% 50%}
#s-music .helper:not(.fam3d) .hp-bub:before{left:auto;right:-2.8vmin;top:6vmin;bottom:auto}
#s-music .helper:not(.fam3d) .hp-bub:after{left:auto;right:-5.2vmin;top:10vmin;bottom:auto}
/* ===== polish 14.10: juice (music.js → FX). Only transform/opacity; nothing here catches a touch ===== */
.mu-sp{position:fixed;left:0;top:0;z-index:980;pointer-events:none;border-radius:50%;will-change:transform,opacity}
.mu-sp.star{border-radius:0;clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 96%,50% 74%,20% 96%,30% 60%,0 38%,38% 36%)}
.mu-plus{position:fixed;z-index:981;pointer-events:none;font-weight:900;font-size:min(7vmin,40px);line-height:1;color:#ffd23f;-webkit-text-stroke:.9vmin #b36b00;paint-order:stroke fill;text-shadow:0 .6vmin 0 #b36b00;border-radius:0;background:none}
.mu-plus.mu-sp{width:auto;height:auto;clip-path:none}
#s-music .mu-word{position:absolute;z-index:8;pointer-events:none;white-space:nowrap;font-weight:900;line-height:1;font-size:min(9vmin,56px);color:#fff;letter-spacing:.02em;padding:.9vmin 3vmin 1.2vmin;border-radius:5vmin;background:linear-gradient(180deg,#ffb347,#ff7a59);border:.7vmin solid #fff;box-shadow:0 1vmin 0 #c4532b,0 1.6vmin 2.6vmin rgba(0,0,0,.28);text-shadow:0 .5vmin 0 rgba(0,0,0,.18)}
#s-music .mu-word.k2{background:linear-gradient(180deg,#ff8fc8,#e0509a);box-shadow:0 1vmin 0 #a02468,0 1.6vmin 2.6vmin rgba(0,0,0,.28)}
#s-music .mu-word.k3{background:linear-gradient(180deg,#b89cff,#7a55e0);box-shadow:0 1vmin 0 #4d2fa8,0 1.6vmin 2.6vmin rgba(0,0,0,.28)}
#s-music .mu-word.k4{background:linear-gradient(180deg,#6fd98b,#2fa857);box-shadow:0 1vmin 0 #1b7a3a,0 1.6vmin 2.6vmin rgba(0,0,0,.28)}
#s-music .mu-word.rec{font-size:min(7.5vmin,46px);background:linear-gradient(180deg,#ffe36a,#ffb300);color:#7a3d00;text-shadow:0 .4vmin 0 rgba(255,255,255,.6);box-shadow:0 1vmin 0 #b87400,0 0 5vmin 1.5vmin rgba(255,210,60,.85)}
#s-music .mu-word.rec:before{content:"⭐ "}#s-music .mu-word.rec:after{content:" ⭐"}
@media (orientation:landscape) and (max-height:520px){#s-music .mu-word{font-size:min(6.5vmin,40px);padding:.6vmin 2.4vmin .9vmin}#s-music .mu-word.rec{font-size:min(5.6vmin,34px)}}   /* the stage is low in landscape: a smaller plate leaves the dancers' faces */
#s-music .mu-fx-pulse{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 40%,rgba(255,226,140,.75),rgba(255,226,140,0) 68%)}
#s-music .mu-fx-flash{position:absolute;inset:0;z-index:40;pointer-events:none;opacity:0;background:#fff}
#s-music .mu-fx-veil{position:absolute;inset:0;z-index:45;pointer-events:none;background:#fff6e6}
#s-music .mu-fx-rb{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;opacity:0}
#s-music .mu-fx-rb i{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;opacity:.38;background:conic-gradient(#ff5b6e,#ffc531,#4fc36b,#3fa3ff,#b26cff,#ff8fc8,#ff5b6e);animation:mu-rb 9s linear infinite;will-change:transform}
@keyframes mu-rb{to{transform:rotate(360deg)}}
/* the stage is alive */
#s-music .mu-fx-amb{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
#s-music .mu-mote{position:absolute;font-style:normal;font-weight:900;font-size:5vmin;line-height:1;opacity:0;animation:mu-mote 12s ease-in-out infinite;will-change:transform,opacity;text-shadow:0 0 1.4vmin #fff}
@keyframes mu-mote{0%{opacity:0;transform:translate(0,0) scale(.6) rotate(-8deg)}25%{opacity:.5}60%{opacity:.42;transform:translate(3vmin,-8vmin) scale(1.05) rotate(8deg)}100%{opacity:0;transform:translate(-2vmin,-16vmin) scale(.7) rotate(-6deg)}}
#s-music .mu-ray{position:absolute;left:28%;top:-20%;width:15vmin;height:90%;transform-origin:50% 0;rotate:12deg;background:linear-gradient(180deg,rgba(255,244,200,.45),rgba(255,244,200,0) 80%);opacity:.4;animation:mu-ray 7s ease-in-out infinite alternate;will-change:transform,opacity}
#s-music .mu-ray.r2{left:62%;width:10vmin;rotate:-10deg;animation-duration:9s;animation-delay:-3s}
@keyframes mu-ray{from{opacity:.12;transform:translateX(-2vmin)}to{opacity:.45;transform:translateX(3vmin)}}
#s-music.mu-hid .mu-mote,#s-music.mu-hid .mu-ray,#s-music.mu-hid .mu-fx-rb i{animation-play-state:paused}
#s-music .mu-inset{position:absolute;left:0;top:0;width:0;height:0;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
/* squash & spring: pivots, buttons and cards press in and spring back */
.k-piano .mk{transform-origin:50% 0}
#s-music .mu-dn{transform-origin:50% 98%}
#s-music .mu-au{will-change:transform}
.mu-btn{transition:transform .32s cubic-bezier(.3,1.6,.5,1)}
.mu-btn:active{transform:translateY(.8vmin) scale(.9)}
.mu-card{transition:transform .28s cubic-bezier(.3,1.6,.5,1)}
.mu-card:active{transform:scale(.9)}
.mu-all{transition:translate .25s cubic-bezier(.3,1.6,.5,1)}
@media (prefers-reduced-motion:reduce){#s-music .mu-mote,#s-music .mu-ray,#s-music .mu-fx-rb i{animation:none}#s-music .mu-mote{opacity:0}}