@font-face{font-family:"BpmfHuninn";src:url(fonts/bpmf.woff2) format("woff2");font-display:block}
:root{font-family:"BpmfHuninn",ui-rounded,"PingFang TC",sans-serif;font-weight:700;color:#4a2d6b;--gold:#ffc83d;--u:min(1vw,.75vh)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#2b1d52;user-select:none;-webkit-user-select:none;touch-action:none}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}button:active{transform:translateY(2px)}button:disabled{opacity:.35}
h1,h2,p{margin:0}
#app{position:relative;width:100%;max-width:820px;height:100vh;height:100dvh;margin:auto;overflow:hidden;background:linear-gradient(#5b3fa0,#f7a8d0)}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(8px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom));gap:8px}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}span.bg{display:none}
.ph{display:inline-grid;place-items:center;line-height:1}
.art{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}
/* header */
.top{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:8px;min-height:56px}
.ttl{min-width:0;font-size:clamp(20px,5.5vw,32px);color:#fff;text-shadow:0 2px 0 #7a3c9c;text-align:center;white-space:nowrap}
.round{width:56px;height:56px;border-radius:50%;background:#fffffff0;font-size:26px;box-shadow:0 4px 0 #0003;display:grid;place-items:center}
.purse,.starcount{display:flex;align-items:center;gap:4px;background:#fff;border-radius:28px;padding:6px 12px;font-size:22px;box-shadow:0 3px 0 #0002}
.starcount{color:#e09b00}
.coin{display:inline-block;width:1em;height:1em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6c2,#ffd23f 45%,#e0a100);border:2px solid #b87a00;vertical-align:-.12em}
.big{min-height:64px;border-radius:24px;padding:10px 22px;font-size:clamp(20px,5.5vw,28px);box-shadow:0 6px 0 #0003;white-space:nowrap}
.primary{background:linear-gradient(#ffe27a,#ffbf2e);color:#6b3a00}.secondary{background:#fff;color:#7a3c9c}.poor{filter:grayscale(.6)}
.actions{display:flex;gap:12px;justify-content:center;flex-shrink:0}.actions .big{flex:1 1 0;max-width:340px;padding:10px 8px;font-size:clamp(18px,5vw,28px)}
/* princess */
.princess{position:relative;height:100%;width:100%;margin:auto}.princess .psvg{width:100%;height:100%}
.princess.real .layer{position:absolute;inset:0;width:100%;height:100%}
.princess{animation:sway 3s ease-in-out infinite}@keyframes sway{50%{transform:translateY(-3%)}}
/* title */
.title{align-items:center;justify-content:center;gap:16px}.title h1{font-size:clamp(34px,10vw,64px);color:#fff;text-shadow:0 4px 0 #b4479a}.title .hero{flex:1;min-height:0;width:100%}.title .big{min-width:60%}
/* home */
.home-main{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}.mini-pr{flex:1 1 20%;min-height:60px}
.tiles{flex:3;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:8px}
.tile{background:#ffffffe6;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;box-shadow:0 5px 0 #0003;font-size:clamp(14px,3.6vw,22px);min-height:0;overflow:hidden}
.tile .ph,.tile .art{font-size:clamp(30px,9vw,64px);flex:1;min-height:0}.tile .st{color:#ffb700;font-style:normal;font-size:14px;min-height:14px}.tile.special{background:#fff3c4}
@media (max-aspect-ratio:3/5){.tiles{grid-template-columns:repeat(4,1fr)}}
/* audience */
.audience{position:relative;flex:0 0 auto;height:clamp(64px,12vh,130px);display:flex;justify-content:space-around;align-items:flex-end;background:linear-gradient(#0000,#2b1d5299);border-radius:20px 20px 0 0}
.aud{position:relative;height:80%;aspect-ratio:1;display:grid;place-items:end center;animation:none}
.aud>.ph,.aud>.art{position:absolute;inset:0;font-size:clamp(34px,9vw,72px);display:none}.aud>.aud-neutral{display:grid}
.aud[data-state]>.aud-neutral{display:none}.aud[data-state=clap]>.aud-clap,.aud[data-state=cheer]>.aud-cheer,.aud[data-state=wow]>.aud-wow,.aud[data-state=glowstick]>.aud-glowstick{display:grid}
.aud[data-state=clap]{animation:clap .35s ease-in-out infinite;animation-delay:calc(var(--i)*.07s)}
.aud[data-state=clap] .hands::after{content:"👏";position:absolute;top:-10%;right:-10%;font-size:24px}
.aud[data-state=cheer]{animation:jump .5s ease-in-out infinite;animation-delay:calc(var(--i)*.09s)}.aud[data-state=cheer] .hands::after{content:"🙌";position:absolute;top:-25%;font-size:26px}
.aud[data-state=glowstick] .hands::after{content:"🪄";position:absolute;top:-30%;font-size:28px;animation:wave .5s ease-in-out infinite alternate;filter:drop-shadow(0 0 6px #ff0)}
.aud[data-state=wow] .hands::after{content:"🎉";position:absolute;top:-25%;font-size:26px}
.audience[data-level="3"] .aud{transform:translateY(-12%) scale(1.12)}.audience[data-level="3"]{background:linear-gradient(#ffd23f33,#ff5fa266)}
@keyframes clap{50%{transform:scale(1.06) translateY(-4%)}}@keyframes jump{50%{transform:translateY(-22%)}}@keyframes wave{to{transform:rotate(-35deg)}}
.chant{position:absolute;left:50%;top:-40%;transform:translateX(-50%);font-size:clamp(22px,6vw,40px);color:#fff;text-shadow:0 3px 0 #d6336c;white-space:nowrap;animation:chant .6s ease-in-out infinite alternate;pointer-events:none}
.chant:empty{display:none}@keyframes chant{to{transform:translateX(-50%) scale(1.15)}}
.fx{position:absolute;left:0;right:0;bottom:0;height:300%;pointer-events:none;overflow:hidden}.fx i{position:absolute;bottom:0;font-style:normal;font-size:26px;animation:toss 2.2s ease-out both}
@keyframes toss{0%{transform:translateY(0) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(-250%) rotate(540deg);opacity:0}}
/* result */
.res-main{flex:1;min-height:0;display:flex;align-items:center;gap:8px}.res-pr{flex:1;height:100%;min-height:0}.res-info{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px}
.bigstars span{font-size:clamp(40px,12vw,80px);color:#ffffff66}.bigstars span.on{color:#ffc83d;text-shadow:0 0 12px #fff8}
.gain{font-size:clamp(28px,8vw,48px);color:#fff;display:flex;align-items:center;gap:6px}.unlock{background:#fff;border-radius:20px;padding:6px 12px;display:flex;gap:6px;align-items:center;font-size:20px}
/* games */
.g-main{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:8px}.g-pr{flex:1 1 30%;min-height:0;width:100%}
.prog{display:flex;gap:6px;justify-content:center;flex-wrap:nowrap;min-height:14px}.prog i{width:14px;height:14px;border-radius:50%;background:#fff6}.prog i.done{background:var(--gold)}
.choices{flex:1 1 40%;min-height:0;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.choice{background:#fff;border-radius:28px;box-shadow:0 6px 0 #0003;font-size:clamp(60px,18vw,130px);display:grid;place-items:center;min-height:0}
.choice.right{background:#b6f5c9;animation:pop .4s}.choice.nope{animation:shake .4s}
.g-ctl{display:flex;justify-content:center}
.beat-star{flex:1 1 45%;min-height:0;aspect-ratio:1;max-width:90%;border-radius:50%;background:radial-gradient(#fff9c4,#ffd23f);box-shadow:0 0 0 8px #fff6,0 8px 0 #0003;font-size:clamp(80px,25vw,180px);display:grid;place-items:center}
.beat-star.pulse{box-shadow:0 0 0 18px #fff,0 0 40px 20px #ffe066}.beat-star.hit{transform:scale(1.08)}
.bells{flex:1 1 40%;min-height:0;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bell{background:var(--c);border-radius:28px;font-size:clamp(44px,12vw,90px);box-shadow:0 6px 0 #0003;min-height:0}.bell.lit{filter:brightness(1.35);transform:scale(1.07);box-shadow:0 0 30px 10px #fff}
@keyframes pop{50%{transform:scale(1.1)}}@keyframes shake{25%{transform:translateX(8px)}75%{transform:translateX(-8px)}}
/* wardrobe */
.wr-main{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}.wr-pr{flex:0 0 34%;position:relative;min-height:0}@media (min-aspect-ratio:4/5){.wr-main{flex-direction:row}.wr-pr{flex:0 0 38%}}.wr-pet{position:absolute;right:0;bottom:0;font-size:44px}
.wr-side{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0}
.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.tab{background:#fff9;border-radius:14px;min-height:56px;font-size:clamp(13px,3.4vw,20px);padding:2px}.tab.on{background:#fff;box-shadow:0 0 0 3px var(--gold)}
.grid-wrap{flex:1;min-height:0;display:flex;align-items:center;gap:4px}.pg{width:44px;height:64px;border-radius:16px;flex-shrink:0;font-size:20px}
.grid{flex:1;height:100%;display:grid;grid-template-columns:repeat(var(--cols,2),1fr);grid-auto-rows:minmax(0,96px);gap:6px;align-content:center}
.cell{background:#fff;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 0 #0002;padding:4px;min-height:0;overflow:hidden}
.cell.on{box-shadow:0 0 0 4px var(--gold)}.cell .shopic{font-size:40px;height:56px;width:56px}.cell svg{width:100%;height:100%}.price{font-size:16px;display:flex;align-items:center;gap:2px}.cell.own .price{color:#2b8a3e}
/* stage */
.stage-main{flex:1;min-height:0;position:relative;display:flex;align-items:flex-end;justify-content:center}.spot{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#fff6,#0000 60%)}
.st-pr{height:100%;width:70%}.st-pet{position:absolute;left:4%;bottom:4%;font-size:52px}
.magic{position:absolute;right:2%;bottom:6%;width:clamp(96px,26vw,170px);height:clamp(96px,26vw,170px);border-radius:50%;background:radial-gradient(#fff9c4,#ffd23f);font-size:clamp(54px,14vw,100px);box-shadow:0 0 30px 8px #fff8;animation:glow 1s ease-in-out infinite alternate}
.magic.pop{animation:pop .25s}@keyframes glow{to{box-shadow:0 0 40px 18px #ffe066}}
/* modal */
.modal{position:absolute;inset:0;z-index:50;background:#2b1d52cc;display:grid;place-items:center;padding:16px}
.card{background:#fff;border-radius:30px;padding:16px;width:100%;max-width:520px;max-height:100%;display:flex;flex-direction:column;gap:10px;align-items:center}
.photo{position:relative;width:100%;aspect-ratio:3/4;max-height:60vh;border:8px solid var(--gold);border-radius:16px;overflow:hidden;background:linear-gradient(#5b3fa0,#f7a8d0)}.photo .psvg{height:100%;width:100%}.frame-t{position:absolute;bottom:6px;left:0;right:0;text-align:center;color:#fff;font-size:22px}
.intro-art{position:relative;width:100%;height:min(34vh,300px);display:grid;place-items:center}.iart.big{font-size:min(22vh,180px)}
.iname{font-size:clamp(40px,11vw,64px)}.how{font-size:clamp(18px,4.6vw,26px);text-align:center;line-height:1.5}
.hand{position:absolute;font-size:60px;left:50%;top:55%;pointer-events:none}
.hint-tap{animation:htap 1s ease-in-out infinite}.hint-swipe{animation:hswipe 1.4s ease-in-out infinite}.hint-bow{animation:hbow 1.2s ease-in-out infinite}
.hint-hold{animation:hhold 1.6s ease-in-out infinite}.hint-shake{animation:hshake .35s ease-in-out infinite}
@keyframes htap{50%{transform:translate(-50%,-25%) scale(.9)}0%,100%{transform:translate(-50%,0)}}
@keyframes hswipe{0%{transform:translateX(-140%)}100%{transform:translateX(80%)}}@keyframes hbow{0%,100%{transform:translateX(-120%)}50%{transform:translateX(60%)}}
@keyframes hhold{0%,100%{transform:translate(-50%,0)}20%,80%{transform:translate(-50%,-20%) scale(.85)}}@keyframes hshake{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(20deg)}}
/* instrument room */
.inst-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:8px}
@media (max-aspect-ratio:5/7){.inst-grid{grid-template-columns:repeat(2,1fr)}}
.itile{background:#ffffffe8;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 5px 0 #0003;font-size:clamp(16px,4.2vw,24px);min-height:0;overflow:hidden}
.itile .iart{font-size:clamp(34px,10vw,72px);flex:1;min-height:0}.itile .st,.itile .lock{font-style:normal;font-size:14px;color:#c78a00}.itile.locked{filter:grayscale(.85);opacity:.75}
.play{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;touch-action:none}
.lit{box-shadow:0 0 0 6px #fff,0 0 30px 14px #ffe066!important;filter:brightness(1.2)}.bump{animation:pop .2s}
.drums{width:100%;height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:12px}
.pad img.padart{width:78%;height:78%;object-fit:contain;min-width:0;min-height:0;pointer-events:none}
.pad{border-radius:50%;background:radial-gradient(#fffaf0,#f1d9b5);border:10px solid #d6336c;display:grid;place-items:center;font-size:clamp(40px,12vw,90px);aspect-ratio:1;max-height:100%;max-width:100%;min-height:0;overflow:hidden;margin:auto;width:100%}
.drum-bass{grid-column:1/3;width:auto;height:100%}
.piano{position:relative;width:100%;height:min(100%,70vw);display:flex;gap:3px}.wkey{flex:1;background:#fff;border-radius:0 0 14px 14px;box-shadow:inset 0 -10px 0 #ddd}
.bkey{position:absolute;top:0;width:9%;height:60%;background:#222;border-radius:0 0 10px 10px;z-index:2}.bkey.lit{background:#7048e8}
.xylo{width:100%;height:100%;display:flex;gap:6px;align-items:center}.bar{flex:1;height:var(--h);background:var(--c);border-radius:14px;box-shadow:0 6px 0 #0003}
.tamb-wrap{position:relative;height:100%;width:100%;display:grid;place-items:center}.tamb{width:min(80%,60vh);aspect-ratio:1;border-radius:50%;background:radial-gradient(#fff,#f3e3c3 60%,#c08a3e 62%);display:grid;place-items:center;font-size:clamp(60px,20vw,140px)}
#motion{position:absolute;right:0;top:0}#motion.on{background:#b6f5c9}
.guitar,.harp{position:relative;width:100%;height:100%;display:flex;justify-content:space-around;align-items:stretch;border-radius:30px;background:linear-gradient(90deg,#d9a066,#b57434);padding:0 4%}
.ghole{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#3b2412}
.gstr{position:relative;width:var(--w);background:linear-gradient(90deg,#ccc,#fff,#999);z-index:1}.gstr::before,.hstr::before{content:"";position:absolute;inset:0 -14px}
.harp{background:linear-gradient(135deg,#f6d365,#fda085)}.hstr{position:relative;width:5px;height:var(--l);align-self:flex-end;background:var(--c)}
.twang{animation:twang .3s}@keyframes twang{25%{transform:translateX(3px)}75%{transform:translateX(-3px)}}
.violin{position:relative;width:100%;height:100%;display:flex;flex-direction:column;gap:6px;background:linear-gradient(90deg,#2b1a10 40%,#8b4a1f 40%);border-radius:24px;padding:6px}
.vrow{flex:1;display:flex;align-items:center;min-height:0}.fb{flex:0 0 40%;display:flex;justify-content:space-around;align-items:center}
.fdot{width:clamp(36px,10vw,64px);aspect-ratio:1;border-radius:50%;background:#fff3;border:3px solid #fff8}.fdot.held{background:var(--gold)}
.vstr{flex:1;height:4px;background:#eee;border-radius:2px}.vstr.sound{height:7px;background:#ffe066;box-shadow:0 0 12px #ffe066}.vrow:has(.vstr.lit) .vstr{height:7px}
.bow{position:absolute;left:50%;top:50%;font-size:50px;pointer-events:none;transform:translate(0,0)}
.flute{width:100%;height:100%;display:flex;align-items:center;gap:8px}.blow{flex:0 0 26%;aspect-ratio:1;border-radius:50%;background:#e7f5ff;font-size:clamp(40px,11vw,80px);box-shadow:0 5px 0 #0003}.blow.on{background:#a5d8ff;box-shadow:0 0 24px 8px #a5d8ff}
.fbody{flex:1;height:clamp(80px,22vw,160px);background:linear-gradient(#f8f9fa,#adb5bd,#f1f3f5);border-radius:40px;display:flex;justify-content:space-around;align-items:center;padding:0 3%}
.hole{width:clamp(40px,11vw,80px);aspect-ratio:1;border-radius:50%;background:#343a40;border:4px solid #868e96}.hole.held{background:var(--gold)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}}