/* ── Dance: a music box that opens to a twirling ballerina ── */
.popup[data-theme="musicbox"]{width:auto;background:transparent;box-shadow:none;opacity:1;transform:none!important;transition:none!important;overflow:visible;--close-color:#8a5a3b}
.popup[data-theme="musicbox"] .popup-content{padding:0;overflow:visible}
.popup[data-theme="musicbox"] .popup-close{top:4px;right:-6px;background:#fff8ee;box-shadow:0 2px 6px rgba(90,58,30,.2);transition:opacity .2s ease,transform .35s var(--spring)}
.popup[data-theme="musicbox"]:has(.mbx.is-opening) .popup-close,.popup[data-theme="musicbox"].is-closing .popup-close{opacity:0;pointer-events:none}

.mbx{--W:400px;--D:170px;--F:140px;--wood:#dbb584;--wood-dk:#c99d68;--rim:#eddcc0;--body:#d4a083;--body-dk:#bf8a6d;--band:#e7cdb6;--velvet:#b95f74;
  position:relative;display:flex;flex-direction:column;align-items:center;width:440px;padding:calc(var(--D) + 40px) 0 6px;perspective:1000px;perspective-origin:50% -35%;transform-origin:50% 50%}

.mbx-box{position:relative;width:var(--W);height:var(--F);transform-style:preserve-3d}
.mbx-box>*{position:absolute}

/* Front of the box */
.mbx-front{inset:0;border-radius:4px 4px 10px 10px;background:var(--body);background-image:var(--mbx-noise,none),linear-gradient(90deg,rgba(0,0,0,.06),transparent 12%,transparent 88%,rgba(0,0,0,.08));box-shadow:inset 0 -6px 0 var(--body-dk),inset 0 3px 0 rgba(255,255,255,.18),0 16px 24px -10px rgba(58,36,23,.45)}
.mbx-band{left:0;right:0;top:22px;height:44px;background:var(--band);-webkit-mask:radial-gradient(circle 22px at 50% 100%,#000 98%,#0000) 0 22px/44px 44px repeat-x,linear-gradient(#000 0 0) 0 0/100% 23px no-repeat;mask:radial-gradient(circle 22px at 50% 100%,#000 98%,#0000) 0 22px/44px 44px repeat-x,linear-gradient(#000 0 0) 0 0/100% 23px no-repeat}
.mbx-key{left:50%;top:78px;width:20px;height:26px;margin-left:-10px;border-radius:50% 50% 4px 4px;background:radial-gradient(circle at 50% 38%,#5a3a22 0 3px,transparent 3.5px),linear-gradient(#5a3a22,#5a3a22) 50% 70%/3px 9px no-repeat,linear-gradient(145deg,#f7dc8c,#c79a3a);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.mbx-front .dm-sound{position:absolute;top:auto;bottom:14px;right:14px;border-color:rgba(90,58,30,.25);background:rgba(255,255,255,.35);color:#5b3a1e;font-size:.7rem;padding:4px 10px}
.mbx-front .dm-sound:hover{background:rgba(255,255,255,.6)}
.mbx-front .dm-sound.is-off{color:#6b5643;border-color:rgba(90,58,30,.2)}

/* Inside of the box, seen from above (a plane lying flat behind the front) */
.mbx-well{left:0;right:0;bottom:100%;height:var(--D);transform-origin:50% 100%;transform:rotateX(90deg);border-radius:6px;background:var(--rim);box-shadow:inset 0 0 0 12px var(--rim),inset 0 0 0 14px #d9c2a0,inset 0 0 26px 16px rgba(90,30,45,.55);background-image:radial-gradient(ellipse at 50% 50%,#c96f84,var(--velvet) 70%)}

/* Lid: hinged on the back edge of the box */
.mbx-lid{left:0;right:0;bottom:100%;height:var(--D);transform-origin:50% 100%;transform-style:preserve-3d;transform:translateZ(calc(var(--D) * -1)) translateY(0) rotateX(14deg)}
.mbx-lid-in,.mbx-lid-out{position:absolute;inset:0;border-radius:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mbx-lid-in{display:grid;place-items:center;background:var(--wood);box-shadow:inset 0 0 0 10px var(--rim),inset 0 0 0 12px #d9c2a0}
.mbx-lid-out{transform:rotateX(180deg);display:grid;place-items:center;background:var(--wood);background-image:linear-gradient(rgba(255,255,255,.12),transparent 40%);box-shadow:inset 0 0 0 8px var(--wood-dk)}
.mbx-lid-oval{width:44%;height:62%;border-radius:50%;background:var(--band);box-shadow:inset 0 0 0 5px var(--rim)}
/* Lid thickness: a strip along the lid's free edge */
.mbx-lid::after{content:'';position:absolute;left:0;right:0;top:0;height:22px;transform-origin:50% 0;transform:rotateX(90deg);border-radius:0 0 6px 6px;background:var(--wood-dk);background-image:linear-gradient(rgba(255,255,255,.15),transparent)}
.mbx-mirror{position:relative;width:46%;height:78%;overflow:hidden;border-radius:50%;background:linear-gradient(160deg,#f4eee6,#d9d4d0 45%,#eeeae4 60%,#c9c4c2);box-shadow:inset 0 0 0 4px #e8c889,inset 0 0 0 6px #b98f47,inset 0 4px 12px rgba(0,0,0,.2)}
.mbx-reflection{position:absolute;left:50%;bottom:-6%;width:34%;margin-left:-17%;opacity:.4;filter:blur(.4px) sepia(.2);transform:scaleX(-1);animation:mbxTwirl 2.2s linear infinite reverse}
.mbx-glint{position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.65) 48%,transparent 56%);animation:mbxGlint 4s ease-in-out infinite}
@keyframes mbxGlint{0%,55%{transform:translateX(-60%)}100%{transform:translateX(60%)}}

/* Ballerina on her spindle, in the middle of the box */
.mbx-dancer{left:50%;bottom:100%;width:80px;height:150px;margin:0 0 -4px -40px;transform:translateZ(calc(var(--D) * -.5));transform-style:preserve-3d}
.mbx-ballerina{position:absolute;left:0;bottom:6px;width:100%;transform-origin:50% 50%;animation:mbxTwirl 2.2s linear infinite}
.mbx-stand{position:absolute;left:50%;bottom:0;width:40px;height:14px;margin-left:-20px;border-radius:50%;background:radial-gradient(ellipse at 45% 35%,#fbe7a6,#c79a3a 70%);box-shadow:0 2px 3px rgba(0,0,0,.3)}
@keyframes mbxTwirl{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}

/* Music notes drifting up while the tune plays */
.mbx-notes{left:0;right:0;bottom:100%;height:1px;transform:translateZ(calc(var(--D) * -.3));pointer-events:none}
.mbx-notes i{position:absolute;bottom:0;font:700 1.5rem/1 serif;font-style:normal;color:#b95f74;opacity:0;animation:mbxNote 3.2s ease-out infinite}
.mbx-notes i:nth-child(1){left:22%}
.mbx-notes i:nth-child(2){left:68%;animation-delay:.8s;color:#c79a3a}
.mbx-notes i:nth-child(3){left:36%;animation-delay:1.6s;color:#8a5a3b}
.mbx-notes i:nth-child(4){left:78%;animation-delay:2.4s}
@keyframes mbxNote{0%{opacity:0;transform:translate(0,0) rotate(-10deg)}15%{opacity:.9}100%{opacity:0;transform:translate(18px,-120px) rotate(14deg)}}
.mbx.is-quiet .mbx-notes,.mbx.is-opening .mbx-notes,.mbx.is-closing .mbx-notes{display:none}

/* Drawer that slides out of the front */
.mbx-drawer-slot{position:relative;width:calc(var(--W) - 36px);margin-top:-10px;padding-top:10px;overflow:hidden;border-radius:0 0 10px 10px}
.mbx-drawer{position:relative;transform:translateY(calc(-100% + 40px));transition:transform .9s cubic-bezier(.3,.9,.3,1)}
.mbx.is-drawer-open .mbx-drawer{transform:translateY(0)}
.mbx-tray{transition:opacity .3s ease .05s}
.mbx:not(.is-drawer-open) .mbx-tray{opacity:0;transition-delay:.55s}
.mbx-tray{padding:10px 12px 0;background:var(--velvet);background-image:radial-gradient(ellipse at 50% 0,rgba(0,0,0,.35),transparent 60%);box-shadow:inset 8px 0 0 var(--body),inset -8px 0 0 var(--body)}
.mbx-card{padding:16px 18px 18px;background:#fffaf1;border-radius:6px 6px 0 0;box-shadow:0 -2px 8px rgba(0,0,0,.2);text-align:center;color:#3a2417}
.popup-content .mbx-card .dance-title{margin:0 0 4px;color:#8a5a3b;font-size:2.5rem}
.popup-content .mbx-card p{margin:0;color:#6b5643;font-size:.86rem;line-height:1.55}
.mbx-card .dm-stats{margin:12px 0 10px;gap:6px}
.mbx-card .dm-stat{padding:8px 4px;background:#f6ebdc;border-color:#ead9c2}
.mbx-card .dm-stat b{color:#8a5a3b}
.mbx-card .dm-stat span{color:#8a735f;font-size:.66rem}
.mbx-card .dm-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:0 0 14px}
.mbx-card .dm-chips span{padding:3px 9px;font-size:.7rem;color:#8a5a3b;border-color:rgba(138,90,59,.35)}
.mbx-card .dm-chips span:hover{background:#f6ebdc}
.popup[data-theme="musicbox"] .mbx-card a.btn{background:#b95f74;color:#fff;padding:10px 18px;font-size:.86rem}
.popup[data-theme="musicbox"] .mbx-card a.btn:hover{background:#9c4a5f}
.mbx-drawer-front{position:relative;height:40px;border-radius:0 0 10px 10px;background:var(--body);box-shadow:inset 0 -5px 0 var(--body-dk),inset 0 2px 0 rgba(255,255,255,.2),0 10px 18px -8px rgba(58,36,23,.45)}
/* The tiny + that says "this can be opened" */
.mbx-hint{position:absolute;left:calc(50% + 20px);top:50%;width:22px;height:22px;margin-top:-11px;padding:0;border:0;border-radius:50%;background:#fffaf1;color:#b95f74;font:700 17px/22px Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 1px 3px rgba(58,36,23,.35);transition:transform .35s var(--spring),opacity .3s ease}
.mbx-hint span{display:block;transition:transform .35s var(--spring)}
.mbx-hint::before{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid #fffaf1;opacity:0;pointer-events:none;animation:mbxPing 1.8s ease-out infinite}
.mbx-hint:hover{transform:scale(1.18)}
.mbx-hint:focus-visible{outline:2px solid #fff;outline-offset:3px}
.mbx.is-drawer-open .mbx-hint span{transform:rotate(45deg)}
.mbx.is-drawer-open .mbx-hint::before{animation:none;opacity:0}
.mbx:not(.is-open) .mbx-hint{opacity:0;pointer-events:none}
@keyframes mbxPing{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.mbx-knob{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-11px 0 0 -9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#d9ad4f 55%,#9c7428);box-shadow:0 2px 3px rgba(0,0,0,.35)}

/* ── Open / close sequence ── */
.mbx.is-opening{animation:mbxFly 1.7s both}
.mbx.is-opening .mbx-lid{animation:mbxLid 1.7s both}
.mbx.is-opening .mbx-dancer{animation:mbxRise 1.7s both}
.mbx.is-opening .mbx-reflection{animation:mbxTwirl 2.2s linear infinite reverse,mbxFadeRef 1.7s both}
@keyframes mbxFadeRef{0%,55%{opacity:0}100%{opacity:.4}}
.mbx.is-closing{animation:mbxFly 1.3s both reverse}
.mbx.is-closing .mbx-lid{animation:mbxLid 1.3s both reverse}
.mbx.is-closing .mbx-dancer{animation:mbxRise 1.3s both reverse}
.mbx.is-closing .mbx-front .dm-sound{opacity:0}
.mbx.is-opening .mbx-front .dm-sound{animation:mbxFadeIn 1.7s both}
@keyframes mbxFly{
  0%{transform:translate(var(--fx),var(--fy)) scale(var(--fs)) rotate(-6deg);animation-timing-function:cubic-bezier(.25,.8,.3,1)}
  30%{transform:none}
  100%{transform:none}
}
@keyframes mbxLid{
  0%,28%{transform:translateZ(calc(var(--D) * -1)) translateY(-4px) rotateX(-90deg);animation-timing-function:cubic-bezier(.3,0,.3,1)}
  50%{transform:translateZ(calc(var(--D) * -1)) translateY(0) rotateX(22deg);animation-timing-function:ease-in-out}
  58%,100%{transform:translateZ(calc(var(--D) * -1)) translateY(0) rotateX(14deg)}
}
@keyframes mbxRise{
  0%,36%{transform:translateZ(calc(var(--D) * -.5)) translateY(135px);animation-timing-function:cubic-bezier(.3,1.4,.5,1)}
  62%,100%{transform:translateZ(calc(var(--D) * -.5)) translateY(0)}
}
}
@keyframes mbxFadeIn{0%,55%{opacity:0}100%{opacity:1}}

@media (prefers-reduced-motion: reduce){
  .mbx-ballerina,.mbx-reflection,.mbx-glint,.mbx-notes i,.mbx-hint::before{animation:none}
  .mbx-drawer,.mbx-tray{transition:none}
}