/* THE MUSIC ROOM — a little studio. The bells on the wall are the focal
   point and stay big; everything else is arranged around them. See music-room.js. */
#scMusic{justify-content:flex-start;padding:0;overflow:hidden}
.mu-room{position:absolute;inset:0;z-index:0;overflow:hidden}
.mu-wall{position:absolute;left:0;right:0;top:0;height:60%;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 22px,transparent 22px 52px),linear-gradient(180deg,#FFF0F6 0%,#FFE3ED 100%)}
.mu-wall::after{content:'';position:absolute;left:0;right:0;bottom:0;height:12px;background:linear-gradient(180deg,#F5D3DE,#E6B9C7);box-shadow:0 4px 8px rgba(59,42,30,.14)}
.mu-floor{position:absolute;left:0;right:0;top:60%;bottom:0;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 48px),linear-gradient(180deg,#E9C89A 0%,#D6AE78 100%)}
.mu-rug{position:absolute;left:50%;width:46%;top:66%;height:16%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,#C9A0F0 0%,#B58BE0 40%,#8A6BD8 41%,#9E7FE0 70%,#6E51BC 71%);opacity:.7}
.mu-lights{position:absolute;left:0;right:0;top:calc(var(--pad-top) + 6px);height:22px;display:flex;justify-content:space-evenly;z-index:2;pointer-events:none}
.mu-lights i{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FFF6C9,#FFCE3D 70%);box-shadow:0 0 14px 4px rgba(255,206,61,.55);animation:muTwinkle 2.4s ease-in-out infinite}
.mu-lights i:nth-child(2n){animation-delay:.8s;background:radial-gradient(circle at 40% 35%,#FFE0EA,#FF8FA6 70%);box-shadow:0 0 14px 4px rgba(255,143,166,.5)}
.mu-lights i:nth-child(3n){animation-delay:1.5s;background:radial-gradient(circle at 40% 35%,#E4F5FF,#6EC6F0 70%);box-shadow:0 0 14px 4px rgba(110,198,240,.5)}
@keyframes muTwinkle{0%,100%{opacity:.75}50%{opacity:1}}
.mu-notes{position:absolute;left:0;right:0;top:0;height:75%;pointer-events:none;overflow:hidden;z-index:8}
.mu-float{position:absolute;bottom:0;font-size:clamp(22px,6vw,34px);font-weight:900;opacity:0;animation:muFloat 2.2s ease-out forwards;pointer-events:none}
@keyframes muFloat{0%{transform:translateY(0) rotate(-8deg);opacity:0}15%{opacity:1}100%{transform:translateY(-52vh) rotate(10deg);opacity:0}}

/* ---- the bells: the focal point, full width ---- */
.mu-chimes{position:absolute;left:5%;right:5%;top:calc(var(--pad-top) + 52px);height:31%;z-index:3;
  display:flex;justify-content:center;align-items:flex-start;gap:clamp(6px,2vw,14px)}
.mu-chimes::before{content:'';position:absolute;left:-2%;right:-2%;top:-7px;height:13px;border-radius:7px;
  background:linear-gradient(180deg,#C99A5C,#8E5F2B);box-shadow:0 5px 12px rgba(59,42,30,.28)}
.mu-bar{flex:1;max-width:11%;border:0;cursor:pointer;padding:0;border-radius:10px 10px 14px 14px;
  background:linear-gradient(90deg,rgba(255,255,255,.38),transparent 40%,rgba(0,0,0,.08)),var(--bc);
  box-shadow:0 8px 0 rgba(0,0,0,.14),0 12px 20px rgba(59,42,30,.22),inset 0 2px 0 rgba(255,255,255,.5);
  position:relative;transform-origin:50% 0;transition:transform .12s ease;-webkit-tap-highlight-color:transparent}
.mu-bar::before{content:'';position:absolute;left:50%;top:-14px;width:3px;height:16px;background:#6B4A12;transform:translateX(-50%)}
.mu-bar::after{content:'';position:absolute;left:50%;bottom:16%;width:9px;height:9px;border-radius:50%;background:rgba(0,0,0,.2);transform:translateX(-50%)}
.mu-bar b{position:absolute;left:50%;top:14px;transform:translateX(-50%);color:#fff;font-size:clamp(18px,5vw,26px);text-shadow:0 2px 0 rgba(0,0,0,.2)}
.mu-bar.hit{animation:muHit .35s var(--spring)}
@keyframes muHit{0%{transform:rotate(0)}30%{transform:rotate(-6deg) scaleY(.97)}60%{transform:rotate(5deg)}100%{transform:rotate(0)}}
.mu-bar.glow{box-shadow:0 0 0 4px #fff,0 0 24px 8px rgba(255,206,61,.85),0 12px 20px rgba(59,42,30,.22)}
/* the three sound knobs, under the bells on the left; the songbook on the right */
.mu-top{position:absolute;left:5%;top:calc(var(--pad-top) + 52px + 31% + 12px);display:flex;gap:10px;z-index:3}
.mu-sound{width:clamp(46px,13vw,60px);height:clamp(46px,13vw,60px);border-radius:50%;border:0;cursor:pointer;padding:0;
  background:#fff;box-shadow:var(--lift-2),var(--gloss);display:grid;place-items:center;position:relative;transition:transform .2s var(--spring)}
.mu-sound::before{content:'';position:absolute;inset:0;border-radius:50%;padding:3px;
  background:linear-gradient(135deg,var(--a1,var(--sun)),var(--a2,var(--sky)));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.mu-sound svg{width:60%;height:60%}
.mu-sound.on{transform:scale(1.12);box-shadow:0 0 0 4px var(--sun),var(--lift-2)}
.mu-sound.nudge{animation:muNudge 1s var(--spring) 3}
@keyframes muNudge{0%,100%{transform:scale(1)}40%{transform:scale(1.16) rotate(-6deg)}}
.mu-book{position:absolute;right:5%;top:calc(var(--pad-top) + 52px + 31% + 4px);width:36%;max-width:170px;border:0;background:none;padding:0;cursor:pointer;z-index:3;text-align:left}
.mu-book .bk{display:block;background:linear-gradient(180deg,#FFF8EC,#FFF1D8);border-radius:10px;padding:8px 10px 8px 12px;
  box-shadow:0 0 0 3px #E2C89A,0 8px 16px rgba(59,42,30,.18);position:relative}
.mu-book .bk::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:4px;background:#C9862A;border-radius:2px}
.mu-book .bk-title{display:flex;align-items:center;gap:8px;font-size:clamp(12px,3.4vw,15px);font-weight:800;color:var(--deep);line-height:1.1}
.mu-book .bk-title svg{width:26px;height:26px;flex:none}
.mu-book .bk-sub{display:block;margin-top:3px;font-size:clamp(10px,2.8vw,12px);color:var(--ink-soft);font-weight:700}
.mu-book .bk-next{position:absolute;right:8px;bottom:6px;font-size:11px;color:#C9862A;font-weight:800}
.mu-book.playing .bk{box-shadow:0 0 0 3px var(--sun),0 0 18px rgba(255,206,61,.7),0 8px 16px rgba(59,42,30,.18)}
.mu-book.playing .bk-title svg{animation:muNudge 1s var(--spring) infinite}

/* ---- the instrument shelf on the wall ---- */
.mu-shelf{position:absolute;left:4%;right:4%;top:59%;height:10px;border-radius:5px;
  background:linear-gradient(180deg,#D9B27C,#B98A50);box-shadow:0 6px 12px rgba(59,42,30,.24);z-index:3}
.mu-inst{position:absolute;border:0;background:none;padding:0;cursor:pointer;z-index:4;-webkit-tap-highlight-color:transparent;transition:transform .35s var(--spring)}
.mu-inst svg{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(3px 6px 6px rgba(59,42,30,.24))}
.mu-inst.playing{transform:translateY(-10px) scale(1.14);z-index:7}
.mu-inst.playing svg{filter:drop-shadow(0 0 16px rgba(255,206,61,.9)) drop-shadow(3px 6px 6px rgba(59,42,30,.24))}
.mu-inst.hit svg{animation:muInst .4s var(--spring)}
@keyframes muInst{0%{transform:scale(1)}35%{transform:scale(1.08) rotate(-4deg)}70%{transform:scale(.98) rotate(3deg)}100%{transform:scale(1)}}
.mu-cello{left:3%;width:12%;top:calc(59% - 21vw)}
.mu-trumpet{left:24%;width:20%;top:calc(59% - 14vw)}
.mu-didge{left:46%;width:26%;top:calc(59% - 12vw)}
.mu-maracas{left:72%;width:17%;top:calc(59% - 17vw)}
.mu-triangle{right:2%;width:11%;top:calc(var(--pad-top) + 52px + 31% + 4px + 19vw)}

/* ---- the floor: the drum kit on the left, the two of them on the rug ---- */
.mu-kit{position:absolute;left:2%;top:62%;width:47%;height:20%;z-index:4}
.mu-kit button{position:absolute;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mu-kit button svg{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(3px 6px 6px rgba(59,42,30,.22))}
.mu-kick{left:18%;bottom:0;width:62%}
.mu-snare{left:0;top:6%;width:38%}
.mu-cymbal{right:0;top:0;width:36%}
.mu-kit button.hit svg{animation:muDrum .28s var(--spring)}
@keyframes muDrum{0%{transform:scaleY(1)}40%{transform:scaleY(.9) translateY(4px)}100%{transform:scaleY(1)}}
.mu-cymbal.hit svg{animation:muCym .5s ease-out}
@keyframes muCym{0%{transform:rotate(0)}30%{transform:rotate(-7deg) translateY(2px)}60%{transform:rotate(5deg)}100%{transform:rotate(0)}}
.mu-cast{position:absolute;left:52%;right:3%;top:60%;height:24%;display:flex;align-items:flex-end;justify-content:center;gap:5%;z-index:5}
.mu-cast .char{width:58%;max-width:150px;cursor:pointer}
.mu-cast .char.pip{width:36%;max-width:96px}
.mu-cast .char svg{width:100%;height:auto;display:block;overflow:visible}

/* ---- the piano: a strip of eight big keys along the bottom ---- */
.mu-piano{position:absolute;left:3%;right:3%;top:84.5%;height:12%;z-index:6;border-radius:12px;padding:6px 6px 8px;
  background:linear-gradient(180deg,#8A6BD8,#6E51BC);box-shadow:0 8px 18px rgba(59,42,30,.28),inset 0 2px 0 rgba(255,255,255,.25);
  display:flex;gap:4px}
.mu-key{flex:1;border:0;border-radius:4px 4px 8px 8px;cursor:pointer;padding:0;position:relative;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg,#FFFDF7,#F3E9D4);box-shadow:0 4px 0 #CDB88F;transition:transform .08s ease}
.mu-key::after{content:'';position:absolute;left:14%;right:14%;bottom:8px;height:26%;border-radius:4px;background:var(--bc);opacity:.9}
.mu-key b{position:absolute;left:50%;top:6px;transform:translateX(-50%);font-size:clamp(11px,3vw,14px);color:#8A6A44}
.mu-key.hit{transform:translateY(3px);box-shadow:0 1px 0 #CDB88F;background:linear-gradient(180deg,#FFF3C4,#FFE79A)}
.mu-hint{position:absolute;left:50%;top:calc(var(--pad-top) + 26px);transform:translateX(-50%);z-index:8;
  font-size:clamp(13px,3.6vw,16px);font-weight:700;color:var(--ink-soft);background:rgba(255,255,255,.88);padding:6px 14px;border-radius:16px;opacity:0;transition:opacity .4s}
.mu-hint.on{opacity:1}
body.no-asking #scMusic .mu-hint{display:none}

/* turn the page */
.mu-page{position:absolute;right:5%;top:calc(var(--pad-top) + 52px + 31% + 4px + 78px);border:0;cursor:pointer;z-index:3;
  display:flex;align-items:center;gap:6px;padding:6px 10px 6px 12px;border-radius:14px;background:#fff;color:#C9862A;font:800 clamp(11px,3vw,13px) var(--font);
  box-shadow:0 0 0 2px #E2C89A,0 6px 12px rgba(59,42,30,.16)}
.mu-page b{font-size:20px;line-height:1}
.mu-page.flip{animation:muNudge .5s var(--spring)}
#scMusic .corner-btn{z-index:9}

/* a thing Mo has asked about glows; Pip toppled by the cymbal */
#scMusic .asked{animation:muAsked 1.2s ease-in-out infinite}
@keyframes muAsked{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3) drop-shadow(0 0 10px #FFCE3D)}}
.mu-cast .char.pip{transition:transform .5s var(--spring)}
.mu-cast .char.pip.topple{transform:rotate(80deg) translate(10px,10px)}