:root{--bg:#1d1f24;--panel:#2b2748;--panel-2:#36315a;--border:#4a4474;--text:#f3f1ff;--muted:#a9a3cf;--accent:#4da3ff;--part:#ff9f1c;--creature:#b9b3dd;--go:#2fbf71;--danger:#ef476f;--btn:64px;--gap:8px;color:var(--text);font-family:system-ui,sans-serif;font-size:14px}html,body{background:var(--bg);overscroll-behavior:none;height:100%;margin:0;overflow:hidden}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;display:flex}input[type=text]{-webkit-user-select:text;user-select:text}#sidebar,#preview-panel{gap:var(--gap);width:calc(2 * var(--btn) + var(--gap) + 20px);padding:10px;padding-top:max(10px, env(safe-area-inset-top));padding-bottom:max(10px, env(safe-area-inset-bottom));box-sizing:border-box;background:var(--panel);flex-direction:column;flex:none;display:flex;overflow-y:auto}#sidebar{border-right:2px solid var(--border);padding-left:max(10px, env(safe-area-inset-left))}#preview-panel{border-left:2px solid var(--border);padding-right:max(10px, env(safe-area-inset-right))}.rail-grid{grid-template-columns:repeat(2, var(--btn));gap:var(--gap);display:grid}.rail-spacer{flex:1;min-height:8px}.rail-sep{background:var(--border);border-radius:1px;height:2px;margin:4px 0}#game-wrap{flex:1;min-width:0;height:100%;position:relative}#game{touch-action:none;width:100%;height:100%;position:absolute;inset:0}button{font:inherit;color:var(--text);cursor:pointer;touch-action:manipulation}button.big,button.choice,.swatch{background:var(--panel-2);border:3px solid #0000;place-items:center;padding:0;transition:transform 80ms,background .15s,border-color .15s;display:grid}button.big{width:var(--btn);height:var(--btn);border-radius:18px}button.big .icon{width:44px;height:44px}button.big:active:not(:disabled),button.choice:active:not(:disabled),.swatch:active{transform:scale(.9)}button.big.active,button.big.open,button.choice.active{border-color:var(--accent);background:#34507c}button:disabled{opacity:.3;cursor:default}@media (hover:hover){button.big:hover:not(:disabled),button.choice:hover:not(:disabled){border-color:var(--muted)}button.big.active:hover,button.choice.active:hover{border-color:var(--accent)}}button.walk{background:var(--go);grid-column:span 2;width:auto}button.walk.stop{background:var(--danger)}button.danger .icon{color:#ffb3c4}button.quiet{color:var(--muted);background:0 0}button>*,label.swatch>*{pointer-events:none}label.swatch>input{pointer-events:auto}.icon{width:36px;height:36px;display:block;overflow:visible}.icon .b{fill:var(--creature)}.icon .bl{fill:none;stroke:var(--creature);stroke-width:5px;stroke-linecap:round}.icon .p{fill:var(--part);stroke:none}.icon .pl{fill:none;stroke:var(--part);stroke-width:5px;stroke-linecap:round;stroke-linejoin:round}.icon .sl{fill:none;stroke:currentColor;stroke-width:5px;stroke-linecap:round;stroke-linejoin:round}.icon .w{fill:#fff;stroke:var(--part);stroke-width:3px}.icon .w0{fill:#fff}.icon .d{fill:#231f3a}.icon .edge{stroke:#ffffff59;stroke-width:1.5px}button.walk .w{stroke:none}.emoji{font-size:38px;line-height:1}button.choice .emoji{font-size:34px}#style-bar{left:50%;bottom:max(12px, env(safe-area-inset-bottom));gap:var(--gap);border:2px solid var(--border);background:#2b2748eb;border-radius:24px;align-items:center;padding:8px;display:flex;position:absolute;transform:translate(-50%);box-shadow:0 6px 24px #00000059}.sel-icon{width:var(--btn);height:var(--btn);border:3px dashed var(--accent);box-sizing:border-box;background:#1f1c36;border-radius:50%;place-items:center;display:grid}.sel-icon.empty{border-color:var(--border)}.sel-icon .icon{width:40px;height:40px}#view-reset{position:absolute;top:calc(33.3333% + 12px);right:12px}#view-reset[hidden]{display:none}#view-reset button.big{background:#36315aeb;box-shadow:0 4px 16px #00000059}.popup{z-index:10;box-sizing:border-box;background:var(--panel);border:2px solid var(--border);border-radius:22px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);padding:14px 56px 14px 14px;animation:.12s ease-out pop-in;position:fixed;overflow-y:auto;box-shadow:0 10px 40px #00000080}.popup[hidden]{display:none}@keyframes pop-in{0%{opacity:0;transform:scale(.94)}}.popup-close{background:var(--panel-2);width:44px;height:44px;color:var(--muted);border:none;border-radius:50%;place-items:center;padding:0;display:grid;position:absolute;top:8px;right:8px}.popup-close .icon{width:22px;height:22px}.style-popup,.rail-popup{width:max-content}.popup-row{margin:12px 0}.popup-row[hidden]{display:none}.popup-row:first-of-type{margin-top:0}.choices{gap:var(--gap);flex-wrap:wrap;display:flex}.faces{grid-template-columns:repeat(3,auto);display:grid}button.choice{border-radius:16px;width:60px;height:60px;position:relative}button.choice .icon{width:44px;height:44px}.arrows button.choice{width:48px;height:48px;color:var(--text)}.arrows button.choice .icon{width:28px;height:28px}button.choice.locked .choice-icon{filter:grayscale()opacity(.4)}.lock-icon{width:18px;height:18px;color:var(--muted);background:#2b2748d9;border-radius:50%;place-items:center;display:none;position:absolute;top:2px;right:2px}.choice .lock-icon .icon{width:12px;height:12px}button.choice.locked .lock-icon{display:grid}.need-badge{white-space:nowrap;background:#2b2748d9;border-radius:8px;padding:0 4px;font-size:10px;font-weight:700;line-height:1.5;display:none;position:absolute;bottom:2px;left:2px}button.choice.locked .need-badge:not(:empty){display:block}@keyframes choice-shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}button.choice.shake{animation:.4s choice-shake}.swatches{grid-template-columns:repeat(7,44px);gap:7px;display:grid}.style-popup .swatches{grid-template-columns:repeat(11,44px)}.swatch{box-sizing:border-box;background:var(--c);cursor:pointer;border-width:2px;border-color:#fff3;border-radius:50%;width:44px;height:44px}.swatch.active{box-shadow:0 0 0 3px var(--accent);border:4px solid #fff}.swatch:disabled,.swatch.disabled{opacity:.3}.swatch.custom{background:var(--c,conic-gradient(#ff4d4d, #ffd23f, #5fd068, #3a86ff, #8338ec, #ff4d4d));position:relative}.swatch.custom input{opacity:0;cursor:pointer;border:none;width:100%;height:100%;padding:0;position:absolute;inset:0}.slider{color:var(--muted);align-items:center;gap:8px;display:flex}.slider.disabled{opacity:.3}.slider-end .icon{width:30px;height:30px}.slider input[type=range]{appearance:none;touch-action:none;background:0 0;flex:1;height:44px;margin:0}.slider input[type=range]::-webkit-slider-runnable-track{background:var(--panel-2);border-radius:7px;height:14px}.slider input[type=range]::-moz-range-track{background:var(--panel-2);border-radius:7px;height:14px}.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);border:4px solid #fff;border-radius:50%;width:40px;height:40px;margin-top:-13px}.slider input[type=range]::-moz-range-thumb{background:var(--accent);border:4px solid #fff;border-radius:50%;width:32px;height:32px}.grownups{width:300px}.grownups h1{margin:4px 0 8px;font-size:18px}.grownups h2{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:16px 0 6px;font-size:11px}.grownups button,.grownups select,.grownups input[type=text]{color:var(--text);background:var(--panel-2);border:1px solid var(--border);font:inherit;border-radius:10px;padding:10px 12px}.grownups input[type=text],.grownups select{box-sizing:border-box;width:100%;margin:4px 0}.grownups input[type=range]{width:100%;accent-color:var(--accent);height:32px;margin:0}.grownups label{color:var(--muted);align-items:center;gap:8px;padding:6px 0;display:flex}.grownups input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent)}.hint{color:var(--muted);margin:6px 0;font-size:12px;line-height:1.4}.row{flex-wrap:wrap;gap:6px;margin:6px 0;display:flex}.field{flex-direction:column;gap:2px;margin:6px 0;display:flex}.field span{color:var(--muted);font-size:12px}.field-row{justify-content:space-between;display:flex}kbd{color:var(--muted);font-family:ui-monospace,monospace;font-size:10px}@media (max-height:720px),(max-width:760px){:root{--btn:52px;--gap:6px}button.big .icon{width:36px;height:36px}.emoji{font-size:30px}.style-popup .swatches{grid-template-columns:repeat(7,44px)}}.sound-popup{max-width:min(560px,100vw - 16px)}.sound-sets button.choice.wide{width:auto;min-width:60px;padding:0 14px;font-size:16px;font-weight:600}.sound-edit{gap:var(--gap);align-items:center;display:flex}.sound-name{box-sizing:border-box;height:48px;color:var(--text);background:var(--panel-2);border:2px solid var(--border);border-radius:14px;flex:1;padding:0 12px;font-size:17px}.sound-slots{gap:var(--gap);grid-template-columns:repeat(2,auto);display:grid}.sound-slots[hidden]{display:none}.sound-slot{background:var(--panel-2);border-radius:18px;align-items:center;gap:6px;padding:6px 8px;display:flex}.sound-slot .sound-what{text-align:center;width:48px}.sound-slot .sound-what .emoji{font-size:34px}.sound-slot.empty .sound-what{opacity:.5}.sound-slot button.choice{background:var(--panel);width:52px;height:52px}.sound-slot button.choice .emoji{font-size:26px}.sound-slot button.choice.small{border-radius:12px;width:36px;height:36px}.sound-slot button.choice.small .emoji{font-size:16px}.sound-slot button.rec.active{border-color:var(--danger);animation:.8s ease-in-out infinite alternate rec-pulse}@keyframes rec-pulse{to{background:#7a2a3c}}.sound-status:empty{display:none}.sound-bottom{gap:calc(3 * var(--gap));flex-wrap:wrap;align-items:center;display:flex}.game-mode #sidebar,.game-mode #preview-panel,.game-mode #style-bar,.game-mode #view-reset{display:none}#hud{top:max(12px, env(safe-area-inset-top));left:max(12px, env(safe-area-inset-left));pointer-events:none;gap:12px;display:flex;position:absolute}.hud-count{color:#3a2f25;background:#ffffffd9;border-radius:999px;padding:6px 14px;font-size:26px;font-weight:700;box-shadow:0 2px 6px #00000026}.hud-count[hidden]{display:none}.hud-join{right:max(16px, env(safe-area-inset-right));bottom:max(16px, env(safe-area-inset-bottom));pointer-events:none;background:#ffffffd9;border-radius:999px;align-items:center;gap:6px;padding:8px 16px;font-size:40px;line-height:1;animation:.9s ease-in-out infinite alternate hud-bounce;display:flex;position:absolute;box-shadow:0 2px 6px #00000026}.hud-join .pad-badge{position:static}.hud-join[hidden]{display:none}#hud-home{pointer-events:none;flex-direction:column;align-items:center;gap:12px;display:flex;position:absolute;top:4%;left:50%;transform:translate(-50%)}.hud-party{font-size:96px;line-height:1;animation:.9s ease-in-out infinite alternate hud-bounce}.hud-party-row{align-items:center;gap:24px;display:flex}.hud-jar{filter:drop-shadow(0 2px 4px #00000040);width:84px;height:100px}.hud-jar svg{width:100%;height:100%;overflow:visible}.jar-berries{fill:#ff4d6d;transform-box:fill-box;transform:translateY(calc(29% + (1 - var(--fill,0)) * 66%));transition:transform .25s ease-out}.hud-jar.pop{animation:.6s ease-out jar-pop}@keyframes jar-pop{30%{transform:scale(1.3)rotate(-8deg)}60%{transform:scale(.95)rotate(6deg)}}.hud-flyer{z-index:20;pointer-events:none;margin:-24px 0 0 -24px;font-size:48px;line-height:1;transition-property:transform;transition-timing-function:cubic-bezier(.45,-.3,.6,1);position:fixed}.bump{animation:.3s ease-out bump}@keyframes bump{40%{transform:scale(1.25)}}.hud-choices{pointer-events:auto;gap:20px;display:flex}.hud-rewards{background:#ffffffe6;border-radius:28px;align-items:center;gap:10px;padding:8px 16px;animation:.9s ease-in-out infinite alternate hud-bounce;display:flex;box-shadow:0 2px 6px #00000026}.hud-rewards[hidden]{display:none}.hud-gift{font-size:48px;line-height:1}.hud-reward .icon{width:56px;height:56px}button.big.hud-choice{background:#2b2748e6;border-radius:24px;width:88px;height:88px;position:relative}button.big.hud-choice .icon{width:52px;height:52px}.pad-badge{color:#fff;border-radius:50%;place-items:center;width:30px;height:30px;font-size:17px;font-weight:800;display:grid;position:absolute;bottom:-8px;right:-8px;box-shadow:0 2px 4px #0000004d}#hud-home[hidden]{display:none}button.big.hud-pause{top:max(12px, env(safe-area-inset-top));right:max(12px, env(safe-area-inset-right));background:#2b274899;position:absolute}button.hud-pause[hidden]{display:none}#pause-card{background:#1412288c;place-items:center;display:grid;position:absolute;inset:0}#pause-card[hidden]{display:none}@keyframes hud-bounce{0%{transform:translateY(0)scale(1)}to{transform:translateY(-14px)scale(1.08)}}.menu-mode #sidebar,.menu-mode #preview-panel,.menu-mode #style-bar,.menu-mode #view-reset{display:none}#menu{pointer-events:none;position:absolute;inset:0}.menu-screen{padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left));box-sizing:border-box;flex-direction:column;align-items:center;display:flex;position:absolute;inset:0}.menu-screen[hidden]{display:none}.menu-screen>*{pointer-events:auto}.menu-home{justify-content:center;padding-bottom:38vh}.menu-row{flex-wrap:wrap;justify-content:center;gap:clamp(16px,4vw,40px);display:flex}.menu-bar{align-self:stretch;align-items:center;gap:var(--gap);display:flex}button.menu-card{background:var(--panel);border:4px solid #ffffffe6;border-radius:32px;place-items:center;width:clamp(120px,20vw,190px);height:clamp(120px,20vw,190px);padding:0;transition:transform 80ms;display:grid;position:relative;box-shadow:0 6px 16px #00000040}button.menu-card:active{transform:scale(.93)}button.menu-card .icon{width:70%;height:70%}button.menu-card.play{background:var(--go)}button.menu-card.play .icon .w{stroke:none}button.menu-card.workshop{background:#ffb347}button.menu-card.gallery{background:#8d7ae6}button.menu-card.draw{background:#52b788}button.menu-card.level.new-level{background:var(--go);color:#fff}button.menu-card.level.new-level .icon{width:50%;height:50%}.my-level-badge{width:28%;position:absolute;top:5%;right:5%}button.menu-card.home{color:#fff;background:#4da3ff}button.menu-card.level{background:#8fd0f0;overflow:hidden}button.menu-card.level .icon{border-radius:18%;width:64%;height:64%}.size-range{width:56%;position:absolute;bottom:8%}.level-badge{filter:drop-shadow(0 1px 2px #00000059);width:24%;position:absolute;bottom:5%;right:5%}.level-finished{filter:drop-shadow(0 1px 2px #00000059);width:20%;position:absolute;top:4%;left:4%}.level-pips{pointer-events:none;justify-content:center;align-items:center;gap:2px;display:flex;position:absolute;left:6%;right:6%}.level-stars{top:4%}.level-babies{top:17%}svg.level-pip{filter:drop-shadow(0 1px 1px #00000059);flex:none;width:10px;height:10px}span.level-pip.level-baby{flex:none;font-size:11px;line-height:1}button.big.menu-back{background:#2b2748d9}@media (max-width:1100px){.menu-levels button.menu-card.level{width:clamp(100px,26vw,150px);height:clamp(100px,26vw,150px)}.menu-levels .menu-row{gap:clamp(10px,3vw,24px)}}.menu-gallery .gallery-grid{flex:1;grid-template-columns:repeat(auto-fill,minmax(clamp(110px,16vw,160px),1fr));align-content:start;align-self:stretch;gap:18px;padding:18px 8px 24px;display:grid;overflow-y:auto}button.menu-card.gallery-card{aspect-ratio:1;width:100%;height:auto;color:var(--panel);background:#ffffffd9}button.menu-card.gallery-card.plus{background:var(--go);color:#fff}button.menu-card.gallery-card.surprise{color:#fff;background:#ff70a6}button.menu-card.gallery-card.active{border-color:var(--accent);border-width:6px}button.menu-card.gallery-card img{object-fit:contain;width:90%;height:90%}.blank-card{border:5px dashed #b9b3dd;border-radius:24px;width:60%;height:60%}.grownups button.danger-text{color:#ffb3c4}.pad-focus{outline-offset:6px;z-index:1;outline:6px solid #ffd23f;animation:.55s ease-in-out infinite alternate pad-focus}@keyframes pad-focus{0%{transform:scale(1)}to{transform:scale(1.07)}}.menu-choose .choose-players{align-items:center;margin-top:4px}.choose-level{background:#2b2748d9;border-radius:16px;place-items:center;width:clamp(90px,14vw,140px);height:44px;display:grid}.choose-level .size-range{width:80%;position:static}button.menu-card.player-card{border-color:var(--player);opacity:.75;background:#ffffffd9;border-width:4px}button.menu-card.player-card.active{opacity:1;border-width:8px;box-shadow:0 0 0 4px #fff,0 6px 16px #00000040}button.menu-card.player-card img{object-fit:contain;width:86%;height:86%}.player-marker{width:34px;position:absolute;top:-18px;left:50%;transform:translate(-50%)}button.menu-card.pencil,button.menu-card.go{width:clamp(90px,14vw,130px);height:clamp(90px,14vw,130px)}.menu-choose .gallery-grid{flex:1;grid-template-columns:repeat(auto-fill,minmax(clamp(96px,13vw,140px),1fr));align-content:start;align-self:stretch;gap:16px;padding:18px 8px 24px;display:grid;overflow-y:auto}.menu-choose button.menu-card.gallery-card.active{border-color:var(--player);border-width:7px}.size-change{place-items:center;width:34%;height:34%;display:grid;position:absolute;bottom:4%;right:4%}button.menu-card .size-change .icon{width:100%;height:100%}.draw-mode #style-bar,.draw-mode #view-reset{display:none}.draw-mode #preview-panel button.big.walk{width:100%}.draw-mode button.big.wand{background:#7b5cff;width:100%;animation:.9s ease-in-out infinite alternate hud-bounce}.draw-mode button.big.wand[hidden]{display:none}.draw-mode button.big.world{padding:4px}.draw-mode button.big.world .icon,.draw-mode button.big.world svg{border-radius:10px;width:100%;height:100%}