/* v5 music: concert stage + header + drum kit */
#p-music.m5{background:url(art/dr/stage_l.webp) center/cover no-repeat,#1a0b3d!important}
@media (max-aspect-ratio:3/4){#p-music.m5{background-image:url(art/dr/stage_p.webp)!important}}
#p-music.m5 .stagefx .spk{display:none}
#p-music.m5 #music>h2{display:flex;align-items:center;justify-content:center;gap:.35em;margin:0!important;font:900 clamp(26px,5.6vh,50px)/1.05 "Arial Rounded MT Bold","Baloo 2",system-ui,sans-serif!important}
#p-music.m5 .mmt{background:linear-gradient(#fff6b0,#ffd23a 45%,#ff9d0a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.5px #7a2bd6;filter:drop-shadow(0 3px 0 #4a148c) drop-shadow(0 0 10px #ffb21c99)}
#p-music.m5 .nt{font-style:normal;font-size:1.1em;color:#ffd23a;text-shadow:0 0 12px #ffb21c;-webkit-text-stroke:0}
#p-music.m5 .nt.n2{color:#4fd8ff;text-shadow:0 0 12px #22aaff}
#p-music.m5 #music>.sub{color:#fff;font-weight:800;text-shadow:0 2px 0 #0008;margin:2px 0 4px!important}
#p-music.m5 #itabs{background:none!important;border:0!important;box-shadow:none!important;gap:clamp(8px,1.6vw,22px);justify-content:center}
#p-music.m5 #itabs button{border-radius:999px!important;padding:clamp(5px,1.1vh,10px) clamp(16px,2.4vw,30px)!important;font:900 clamp(14px,2.4vh,21px) "Arial Rounded MT Bold",system-ui,sans-serif!important;color:#fff!important;background:linear-gradient(#a54dff,#6a1fd0)!important;border:3px solid #e9b6ff!important;box-shadow:0 0 14px #c35cff,0 4px 0 #3a0a7a,inset 0 3px 0 #ffffff55!important}
#p-music.m5 #itabs button[aria-selected=true]{color:#3a1500!important;background:linear-gradient(#fff3a0,#ffc21a 55%,#ff9a00)!important;border-color:#fff7c8!important;box-shadow:0 0 18px #ffc83d,0 4px 0 #9a5200,inset 0 3px 0 #fff9!important}
/* drums mode */
#p-music.isdr .mbox{background:none!important;border:0!important;box-shadow:none!important;overflow:visible!important}
#p-music.isdr #mcanvas,#p-music.isdr #oct{display:none!important}
#p-music.isdr #mfall{display:flex!important;padding:0!important;align-items:center;justify-content:center;height:100%}
.dkit{position:relative;height:100%;max-height:100%;aspect-ratio:2.05/1;max-width:100%;margin:0 auto;container-type:size}
@supports not (container-type:size){.dkit{width:min(100%,60vh)}}
.dring{position:absolute;left:14%;right:14%;bottom:0;height:22%;border-radius:50%;border:3px solid #ff7cf3;box-shadow:0 0 22px #ff4fd8,inset 0 0 22px #b04dff;background:radial-gradient(closest-side,#c35cff55,transparent);pointer-events:none}
.dk{position:absolute;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0;min-height:0!important;border-radius:0!important;cursor:pointer;touch-action:none;transform-origin:50% 80%;-webkit-tap-highlight-color:transparent}
.dk img{width:100%;height:auto;display:block;pointer-events:none;filter:drop-shadow(0 6px 6px #0008);-webkit-user-drag:none}
.dk b{position:absolute;left:0;right:0;text-align:center;font:900 clamp(10px,3.2cqh,26px) "Arial Black","Arial Rounded MT Bold",system-ui,sans-serif;color:#2b1760;-webkit-text-stroke:1px #fff;paint-order:stroke;text-shadow:0 2px 0 #fff,0 0 6px #fff;pointer-events:none;letter-spacing:.02em}
.dk-hat{left:3%;top:3%;width:24%;z-index:1}.dk-crash{right:3%;top:3%;width:25%;z-index:1}
.dk-hat b,.dk-crash b{top:20%;transform:rotate(-6deg)}.dk-crash b{transform:rotate(6deg)}
.dk-hat img{transform:rotate(-8deg)}.dk-crash img{transform:scaleX(-1) rotate(-8deg)}
.dk-tom1{left:31%;top:0;width:17%;z-index:2}.dk-tom2{left:51%;top:0;width:17%;z-index:2}
.dk-tom1 b,.dk-tom2 b{top:13%}
.dk-snare{left:12%;top:40%;width:22%;z-index:3}.dk-tom3{right:12%;top:40%;width:22%;z-index:3}
.dk-snare b,.dk-tom3 b{top:15%}
.dk-kick{left:35.5%;top:26%;width:29%;z-index:4}.dk-kick b{top:42%;font-size:clamp(14px,6.4cqh,46px)}
.dk.hit{animation:dsq .22s ease-out}.dk-hat.hit,.dk-crash.hit{animation:dwob .5s ease-out}
.dk.hit img{filter:drop-shadow(0 0 14px #fff) drop-shadow(0 0 26px #ffd23a)}
@keyframes dsq{0%{transform:scale(1)}30%{transform:scale(1.08,.9)}60%{transform:scale(.97,1.04)}100%{transform:scale(1)}}
@keyframes dwob{0%{transform:rotate(0)}20%{transform:rotate(-9deg)}45%{transform:rotate(6deg)}70%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
#p-music.isdr #mnote{display:block!important;color:#fff;font:900 clamp(13px,2.3vh,20px) "Arial Rounded MT Bold",system-ui,sans-serif!important;text-shadow:0 2px 0 #0009;margin:2px 0 0!important}
#p-music.isdr #keyhint{display:block!important;width:max-content;max-width:96%;margin:3px auto 4px!important;padding:3px 14px 3px 6px;border-radius:999px;background:#2a0b62e6;border:2px solid #b45cff;color:#fff;font:800 clamp(11px,1.7vh,14px) system-ui,sans-serif!important;box-shadow:0 0 10px #9a3cff}
#p-music.isdr #keyhint::before{content:"i";display:inline-grid;place-items:center;width:1.4em;height:1.4em;margin-right:6px;border-radius:50%;background:#ffc83d;color:#3a1500;font-weight:900}
/* Make a Song bar */
#p-music.m5 .rhead{display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap;position:relative}
#p-music.m5 .rhead h3{display:flex!important;align-items:center;gap:8px;margin:0;font:900 clamp(15px,2.8vh,26px) "Arial Rounded MT Bold",system-ui,sans-serif!important;color:#fff}
#p-music.m5 .mic{font-size:1.25em;filter:drop-shadow(0 0 6px #7fe3ff)}
#p-music.m5 .rhead .eq{margin-left:auto!important}
#p-music.m5 .dot{display:inline-block;width:.7em;height:.7em;border-radius:50%;background:#ffc83d;vertical-align:-.05em}
.rtog{border-radius:999px!important;padding:5px 14px!important;font:900 14px "Arial Rounded MT Bold",system-ui,sans-serif!important;color:#3a1500!important;background:linear-gradient(#fff3a0,#ffc21a)!important;border:2px solid #fff!important;box-shadow:0 3px 0 #9a5200!important;cursor:pointer}
#p-music:not(.recmini) .rtog{display:none}
#p-music.recmini .rec{border:3px solid #ff7cf3!important;box-shadow:0 0 20px #d94dff,inset 0 0 14px #b04dff66!important;background:linear-gradient(90deg,#2a0b62f0,#3b1290f0)!important;padding:8px 16px!important;flex:0 0 auto}
#p-music.recmini .rhead .sub{display:block!important;flex:1 1 60%;order:3;margin:0!important;color:#fff;font:700 clamp(11px,1.8vh,15px) system-ui,sans-serif!important}
#p-music.recmini .rhead .eq{order:2;height:clamp(22px,4.5vh,42px)!important}
#p-music.recmini .rhead .eq i{width:clamp(6px,.8vw,11px)!important}
#p-music.recmini .rhead .rtog{order:4}
#p-music.recmini .rec:not(.open) #lanes,#p-music.recmini .rec:not(.open) .rbar{display:none!important}
#p-music.recmini .rec.open{position:fixed!important;left:50%;bottom:8px;transform:translateX(-50%);width:min(96vw,900px);z-index:30;max-height:calc(100dvh - 16px);overflow:auto}
/* phone portrait */
@media (max-width:700px){#p-music.isdr #music>.sub{display:none!important}
 #p-music.isdr .dkit{aspect-ratio:auto;width:100%;height:auto;max-height:none;aspect-ratio:1.25/1}
 #p-music.isdr .dk-hat{left:0;top:2%;width:30%}#p-music.isdr .dk-crash{right:0;top:2%;width:31%}
 #p-music.isdr .dk-tom1{left:29%;top:0;width:21%}#p-music.isdr .dk-tom2{left:50%;top:0;width:21%}
 #p-music.isdr .dk-snare{left:2%;top:38%;width:30%}#p-music.isdr .dk-tom3{right:2%;top:38%;width:30%}
 #p-music.isdr .dk-kick{left:28%;top:30%;width:44%}
 #p-music.recmini .rhead .eq{display:none!important}#p-music.recmini .rhead .sub{font-size:11px!important}}
/* phone landscape */
@media (max-height:500px){#p-music.isdr .sec{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)!important}
 #p-music.recmini .rhead .eq{display:none!important}#p-music.isdr #mnote{display:none!important}#p-music.isdr #keyhint{display:none!important}
 #p-music.recmini .rec{align-self:end}}
.dk b{font-size:clamp(11px,5.2cqh,30px)}.dk-kick b{font-size:clamp(16px,9.5cqh,54px)}
#p-music.m5 .mmt{-webkit-text-stroke:0;filter:drop-shadow(0 2px 0 #7a2bd6) drop-shadow(0 4px 0 #3a0a7a) drop-shadow(0 0 10px #ffb21c99)}
#p-music.drsides .side{top:64px;bottom:auto;height:min(40dvh,330px)!important}
#p-music.drsides .side.l{left:max(4px,calc(50% - 600px))}#p-music.drsides .side.r{right:max(4px,calc(50% - 600px))}
@media (max-width:700px){#p-music.drsides .side{top:auto;bottom:auto;top:96px;height:15dvh!important}#p-music.drsides .side.l{left:-8px}#p-music.drsides .side.r{right:-8px}}
@media (max-height:500px){#p-music.drsides .side{top:auto;bottom:0;height:36dvh!important}}