@font-face{font-family:Mochiy Logo;src:url(../fonts/mochiy-logo.woff2) format("woff2");font-display:block}:root{--bg: #2a1f4a;--bg2: #3b2c66;--floor: #4b3a80;--panel: #fff7ec;--panel-edge: #f0dfc6;--ink: #2b2340;--text-on-dark: #fff;--pulse: 0;--font-logo: "Mochiy Logo", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", sans-serif;--cols: var(--slots, 7);--rows: 1;--pcols: var(--icons-half, 10);--icon-max: 72px;--topbar-h: 48px;--pwa-top-extra: 0px;--safe-top-min: 0px;--safe-top: max(env(safe-area-inset-top, 0px), var(--safe-top-min));--slot-extra: 72px;color-scheme:light;--sky-top: #6ec1f3;--sky-bottom: #c8ecff;--cloud: #fff;--hills: #aab9ee;--grass-1: #92d673;--grass-2: #78c95c;--grass-3: #66bb4e;--tufts: #5aab43;--sun-halo: #fff6c4;--sun-core: #fff1a8;--page-bg: #66bb4e}.night{--sky-top: #0e1830;--sky-bottom: #3b3566;--cloud: #5f5c86;--hills: #2f3660;--grass-1: #2f6344;--grass-2: #255237;--grass-3: #1e452e;--tufts: #183a24;--sun-halo: #ff8a7a;--sun-core: #f3c6b0;--page-bg: #1e452e;--panel: #2b2340;--panel-edge: #1a1530}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}body{background:var(--page-bg);transition:background 1s;color:var(--ink);font-family:"M PLUS Rounded 1c",Hiragino Maru Gothic ProN,BIZ UDPGothic,Yu Gothic UI,Meiryo,system-ui,sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}#app{position:relative;height:100vh;height:100dvh;display:grid;grid-template-rows:1fr auto;padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.topbar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:10px;height:calc(var(--topbar-h) + var(--safe-top) + var(--pwa-top-extra));padding:calc(var(--safe-top) + var(--pwa-top-extra)) 16px 0;pointer-events:none}.topbar>*{pointer-events:auto;white-space:nowrap;flex-shrink:0}.logo{margin:0;font-family:var(--font-logo);font-weight:400;font-size:clamp(14px,4.3vw,20px);letter-spacing:.05em;color:#fff;filter:drop-shadow(0 3px 0 rgba(43,35,64,.35))}.debug{font:600 13px/1.2 ui-monospace,Consolas,monospace;color:#fff;background:#2b234080;padding:4px 9px;border-radius:999px}.tempo{display:flex;align-items:center;gap:5px;border:0;border-radius:999px;padding:6px 12px 6px 10px;background:var(--speed, #35c98e);color:#fff;font-weight:700;font-size:13px;line-height:1.3;box-shadow:0 3px #2b234040;text-shadow:0 1px 0 rgba(43,35,64,.3)}.tempo[data-speed=slow]{--speed: #4fb3ff}.tempo[data-speed=fast]{--speed: #ff9f43}.tempo:active{transform:scale(.95)}.tempo-note{font-size:15px}.tempo-bpm{font-weight:400;font-size:11px;opacity:.9}.tempo.changed{animation:tempo-pop .3s cubic-bezier(.3,1.6,.5,1)}@keyframes tempo-pop{0%{transform:scale(.8)}}.auto{margin-left:auto}.mood{width:36px;height:36px;padding:7px;border:0;border-radius:50%;background:#fff;color:#ff9f43;box-shadow:0 3px #2b234040;transition:background .4s,color .4s}.mood svg{display:block;width:100%;height:100%}.mood .moon-icon,.night .mood .sun-icon{display:none}.night .mood .moon-icon{display:block}.night .mood{background:#3b2c66;color:#ffe9a8;box-shadow:0 3px #0006}.mood:active{transform:scale(.92)}.reset,.auto{display:flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:7px 14px 7px 10px;background:#fff;color:var(--ink);font-weight:700;font-size:14px;box-shadow:0 3px #2b234040}.reset svg,.auto svg{width:18px;height:18px}.reset:active,.auto:active{transform:scale(.95)}.auto.is-on{background:#ff7ac6;color:#fff;box-shadow:0 3px #c74f95,0 0 0 3px #ff7ac659}.auto.is-on svg{animation:auto-wiggle 1.6s ease-in-out infinite}@keyframes auto-wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(12deg)}75%{transform:rotate(-12deg)}}.stage{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-end;padding:calc(var(--topbar-h) + var(--safe-top) + var(--pwa-top-extra)) 12px 10px;min-height:0;overflow:hidden;background:var(--sky-bottom);transition:background 1s}.scenery{position:absolute;inset:0;z-index:0;pointer-events:none}.scenery svg{display:block;width:100%;height:100%}.sky-top{stop-color:var(--sky-top)}.sky-bottom{stop-color:var(--sky-bottom)}.cloud{fill:var(--cloud)}.hills{fill:var(--hills)}.grass-1{fill:var(--grass-1)}.grass-2{fill:var(--grass-2)}.grass-3{fill:var(--grass-3)}.tufts{stroke:var(--tufts)}.sky-top,.sky-bottom,.cloud,.hills,.grass-1,.grass-2,.grass-3,.tufts,.sun circle,.stars{transition:fill 1s,stroke 1s,stop-color 1s,opacity 1s}.sun{transform-box:fill-box;transform-origin:center;transform:scale(calc(1 + var(--pulse) * .08))}.sun .halo{fill:var(--sun-halo);opacity:.35}.sun .core{fill:var(--sun-core)}.sun .bite{fill:url(#sky);opacity:0}.night .sun .halo{opacity:.2}.fog{fill:#cfd6ff;opacity:0;transition:opacity 1.5s}.night .fog{opacity:.16}.night .fog ellipse{animation:fog-drift 18s ease-in-out infinite alternate}.night .fog ellipse:nth-child(2n){animation-duration:24s;animation-direction:alternate-reverse}@keyframes fog-drift{0%{transform:translate(-80px)}to{transform:translate(80px)}}.night .sun .bite{opacity:1}.stars{fill:#fff;opacity:0}.night .stars{opacity:.9}.night .stars circle{animation:twinkle 2.6s ease-in-out infinite}.night .stars circle:nth-child(3n){animation-delay:-.9s}.night .stars circle:nth-child(3n+1){animation-delay:-1.7s}@keyframes twinkle{50%{opacity:.35}}.char-anim{transition:filter 1s}.night .char-anim{filter:brightness(.68) saturate(.7)}.night .is-quiet .char-anim{filter:grayscale(.7) brightness(.68)}.palette{transition:background 1s,border-color 1s}.cloud{animation:drift 40s ease-in-out infinite alternate}.cloud.c2{animation-duration:55s;animation-direction:alternate-reverse}.cloud.c3{animation-duration:47s}@keyframes drift{0%{transform:translate(-60px)}to{transform:translate(60px)}}.slot{position:relative;z-index:1;flex:0 0 calc(100% / var(--cols));display:flex;flex-direction:column;align-items:center;padding:2px 4px;min-width:0}.char{position:relative;width:min(100%,260px,var(--char-max, 150px));aspect-ratio:100 / 124;cursor:pointer;border-radius:24px;outline:none;transition:transform .15s}.is-empty .char{cursor:default}.char-anim{width:100%;height:100%;transform-origin:50% 92%;will-change:transform}.char-anim svg,.char-img{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}.char-img{object-fit:contain}.mouth{transform-box:fill-box;transform-origin:50% 30%;transition:transform .06s}.sing .mouth{transform:scale(.9,2.1)}.mouth.swap .m-open,.sing .mouth.swap .m-closed{display:none}.sing .mouth.swap{transform:none}.sing .mouth.swap .m-open{display:inline}.is-empty .char-anim{animation:breathe 2.4s ease-in-out infinite;opacity:.85}@keyframes breathe{50%{transform:scale(1.03,.97)}}.going-home{position:absolute;inset:0;z-index:2;pointer-events:none;transform-origin:50% 92%;animation:go-home 1s ease-in both}.going-home svg{display:block;width:100%;height:100%;overflow:visible}@keyframes go-home{0%{transform:none;opacity:1}15%{transform:translate(calc(var(--dir) * 6%),-14%) scale(.95)}30%{transform:translate(calc(var(--dir) * 12%),-4%) scale(.85,.8)}50%{transform:translate(calc(var(--dir) * 20%),-20%) scale(.72);opacity:1}65%{transform:translate(calc(var(--dir) * 28%),-14%) scale(.6,.56)}to{transform:translate(calc(var(--dir) * 45%),-42%) scale(.3);opacity:0}}.idle-in .char-anim>svg{animation:idle-in .5s ease-out .7s both}@keyframes idle-in{0%{opacity:0;transform:scale(.85)}}@media (prefers-reduced-motion: reduce){.going-home{animation-duration:.01s}}.zzz{animation:zzz 2.4s ease-in-out infinite}@keyframes zzz{0%,to{transform:translateY(0);opacity:.5}50%{transform:translateY(-5px);opacity:1}}.is-pending .char-anim{animation:wobble .18s ease-in-out infinite alternate}@keyframes wobble{0%{transform:rotate(-4deg) scale(.96)}to{transform:rotate(4deg) scale(.96)}}.is-empty .label{visibility:hidden}.is-pending .label:after{content:"…"}.pop .char{animation:pop .35s cubic-bezier(.3,1.6,.5,1)}@keyframes pop{0%{transform:scale(.4)}}.drop-target .char{transform:scale(1.08);background:radial-gradient(circle at 50% 60%,rgba(255,255,255,.35),transparent 70%)}.is-quiet .char-anim{filter:grayscale(.7);opacity:.45}.label{margin-top:3px;padding:1px 9px;border-radius:999px;background:#2b234080;color:#fff;font-weight:700;font-size:clamp(11px,1.6vw,15px);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.ctrls{display:flex;gap:6px;margin-top:4px;visibility:hidden}.slot:not(.is-empty) .ctrls{visibility:visible}.ctrls button{width:34px;height:34px;padding:7px;border:0;border-radius:50%;background:#2b234073;color:#fff}.ctrls svg{width:100%;height:100%;display:block}.btn-mute .cross{display:none}.is-muted .btn-mute{background:#ff5a5f}.is-muted .btn-mute .cross{display:inline}.is-muted .btn-mute .wave{display:none}.is-solo .btn-solo{background:#ffc23d;color:var(--ink)}.palette{display:grid;grid-template-columns:repeat(var(--pcols),minmax(0,var(--icon-max)));justify-content:center;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--panel);border-top:4px solid var(--panel-edge);border-radius:20px 20px 0 0}.icon{position:relative;aspect-ratio:1;padding:0;border:0;border-radius:14px;background:var(--cat);box-shadow:inset 0 -4px #0000002e;touch-action:none;overflow:hidden;transition:transform .1s,opacity .2s,filter .2s}.icon:active:not(.used){transform:scale(.92)}.icon-face{position:absolute;inset:10% 14% 2%;pointer-events:none}.icon-face svg{width:100%;height:100%}.icon .shadow{display:none}.icon.used{filter:grayscale(1);opacity:.3;cursor:not-allowed}.icon.dragging{opacity:.4}.drag-ghost{position:fixed;left:0;top:0;z-index:50;width:96px;height:120px;margin:-60px 0 0 -48px;pointer-events:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.35))}.drag-ghost svg{width:100%;height:100%}.start{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px 16px 22vh;background:#c8ecff;overflow:hidden;transition:opacity .4s,visibility .4s}.start.hidden{opacity:0;visibility:hidden}.start-card{position:relative;z-index:1;text-align:center;color:var(--ink)}.start-title{margin:0;font-size:clamp(38px,11vw,80px);line-height:1.15;font-family:var(--font-logo);font-weight:400;letter-spacing:.04em;color:#fff;filter:drop-shadow(0 6px 0 rgba(43,35,64,.3))}.rainbow .ch{position:relative;z-index:0;display:inline-block;color:var(--c);transform:rotate(var(--r))}.rainbow .ch:before{content:attr(data-ch);position:absolute;left:0;top:0;z-index:-1;color:var(--ink);-webkit-text-stroke:.2em var(--ink)}.start-title .ch{animation:letter-wave 1.8s ease-in-out infinite;animation-delay:calc(var(--i) * .09s)}@keyframes letter-wave{0%,60%,to{transform:rotate(var(--r)) translateY(0)}30%{transform:rotate(var(--r)) translateY(-14%)}}@media (prefers-reduced-motion: reduce){.start-title .ch{animation:none}}.start-title .line{display:block}.start-title .line:first-child{font-size:.72em}.start-card p{display:inline-block;margin:14px 0 6px;padding:8px 18px;font-size:16px;font-weight:700;line-height:1.7;background:#ffffffbf;border-radius:18px}.start-btn{width:120px;height:120px;margin:14px auto 6px;display:grid;place-items:center;border:4px solid var(--ink);border-radius:50%;background:#35c98e;color:#fff;box-shadow:0 8px #1f8f63,0 14px 24px #2b234040;animation:bob 1.2s ease-in-out infinite}.start-btn svg{width:56px;height:56px;margin-left:6px}.start-btn:active{transform:translateY(6px);box-shadow:0 2px #1f8f63}@keyframes bob{50%{transform:translateY(-6px)}}.start-card p.hint{margin:0;padding:2px 12px;font-size:13px;font-weight:400;background:#ffffff8c}.credits{position:absolute;left:0;right:0;bottom:max(4px,env(safe-area-inset-bottom));z-index:2;margin:0 auto;width:fit-content;max-width:calc(100% - 16px);padding:2px 10px;font-size:10px;line-height:1.5;text-align:center;color:var(--ink);background:#fff9;border-radius:8px}.start-crew{position:absolute;left:0;right:0;bottom:3vh;display:flex;justify-content:center;gap:clamp(8px,4vw,48px);pointer-events:none}.crew{width:clamp(64px,14vh,130px);aspect-ratio:100 / 124;transform-origin:50% 92%;animation:hop .5s ease-in-out infinite alternate}.crew svg{width:100%;height:100%;overflow:visible}@keyframes hop{0%{transform:translateY(0) scale(1.04,.96)}to{transform:translateY(-10%) scale(.98,1.02)}}@media (orientation: portrait){:root{--cols: min(var(--slots, 7), 4);--rows: var(--rows-portrait, 2);--pcols: var(--pcols-portrait, 5);--icon-max: 84px;--slot-extra: 60px}.palette{gap:7px;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}.ctrls button{width:30px;height:30px;padding:6px}}@media (orientation: portrait) and (max-height: 620px){:root{--icon-max: 84px;--topbar-h: 40px;--slot-extra: 36px}.logo{font-size:16px}.tempo{padding:5px 10px 5px 8px;font-size:12px}.reset,.auto{padding:5px 11px 5px 8px;font-size:13px}.palette{gap:5px;padding:7px 8px calc(7px + env(safe-area-inset-bottom))}.icon{aspect-ratio:auto;height:46px}.icon-face{inset:6% 0 2%}.label{display:none}.ctrls{gap:4px;margin-top:2px}.ctrls button{width:26px;height:26px;padding:5px}}@media (max-height: 480px) and (orientation: landscape){:root{--pcols: var(--icons-half, 10);--icon-max: 54px;--topbar-h: 38px;--slot-extra: 56px}.logo{font-size:16px}.palette{gap:6px;padding:6px 12px calc(6px + env(safe-area-inset-bottom))}.ctrls button{width:28px;height:28px;padding:5px}}@media (prefers-reduced-motion: reduce){.start-btn,.crew,.is-empty .char-anim{animation:none}}@media (max-width: 559px){.reset span,.auto span{display:none}.reset,.auto{padding:7px 9px}}@media (max-width: 479px){.topbar{gap:8px}.logo,.tempo-bpm{display:none}}@media (min-width: 360px) and (max-width: 479px){.reset span,.auto span{display:inline}.reset,.auto{padding:7px 14px 7px 10px}}@media (display-mode: standalone){:root{--pwa-top-extra: 16px}}@media (display-mode: standalone) and (orientation: portrait){:root{--safe-top-min: 20px}}