@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}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}body{background:#66bb4e;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))}.tempo,.debug{font-size:13px;color:#fff;background:#2b234080;padding:4px 9px;border-radius:999px}.debug{font:600 13px/1.2 ui-monospace,Consolas,monospace}.reset{margin-left: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{width:18px;height:18px}.reset:active{transform:scale(.95)}.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:#c8ecff}.scenery{position:absolute;inset:0;z-index:0;pointer-events:none}.scenery svg{display:block;width:100%;height:100%}.sun{transform-box:fill-box;transform-origin:center;transform:scale(calc(1 + var(--pulse) * .08))}.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}.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{font-size:11px}.reset{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: 359px){.tempo{display:none}}@media (display-mode: standalone){:root{--pwa-top-extra: 16px}}@media (display-mode: standalone) and (orientation: portrait){:root{--safe-top-min: 20px}}