:root{--font-display: "Baloo 2", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--ink: #3d3450;--ink-soft: #6b6280;--accent: #ff8a3d;--accent-deep: #f26d1d;--good: #4cc26e;--bad: #f0566a;--glass: rgba(255, 255, 255, .62);--glass-strong: rgba(255, 255, 255, .82);--glass-border: rgba(255, 255, 255, .55);--shadow-soft: 0 6px 24px rgba(61, 52, 80, .16);--shadow-pop: 0 10px 32px rgba(61, 52, 80, .22);--r-lg: 22px;--r-md: 16px;--r-sm: 12px;--ease-spring: cubic-bezier(.34, 1.56, .64, 1)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:var(--font-body);color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:none}body{background:linear-gradient(170deg,#ffe3c8,#ffb99b);transition:background .6s ease}body.scene-menu{background:linear-gradient(170deg,#ffe3c8,#ff9d7e)}body.scene-sandbox{background:linear-gradient(175deg,#dfe6f7,#cfd4ee 60%,#c3c4e4)}#app{position:fixed;inset:0}#game,#game canvas{position:absolute;inset:0}#ui{position:absolute;inset:0;pointer-events:none;z-index:10}#ui>*{pointer-events:auto}.glass{background:var(--glass);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border:1px solid var(--glass-border);box-shadow:var(--shadow-soft)}button{font-family:var(--font-display);border:none;cursor:pointer;color:var(--ink);background:none;transition:transform .12s var(--ease-spring),background .15s ease,color .15s ease,box-shadow .15s ease}button:active{transform:scale(.93)}#menu{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px}#menu .title{font-family:var(--font-display);font-weight:800;font-size:clamp(56px,13vw,128px);letter-spacing:.02em;line-height:1;text-shadow:0 6px 0 rgba(61,52,80,.12);animation:title-in .7s var(--ease-spring) both}#menu .title span{display:inline-block;animation:letter-bob 3.2s ease-in-out infinite}#menu .tagline{font-family:var(--font-display);font-weight:600;font-size:clamp(15px,2.6vw,21px);color:var(--ink-soft);margin-bottom:28px;animation:rise-in .6s .15s var(--ease-spring) both}#menu .menu-buttons{display:flex;flex-direction:column;gap:14px;animation:rise-in .6s .28s var(--ease-spring) both}.btn-big{font-size:21px;font-weight:700;padding:16px 52px;border-radius:999px;background:var(--glass-strong);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-soft);min-width:270px}.btn-big:hover{box-shadow:var(--shadow-pop);transform:translateY(-2px)}.btn-big:active{transform:scale(.95)}.btn-big.primary{background:var(--accent);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.12)}.btn-big .soon{font-size:12px;font-weight:600;background:#3d345024;color:var(--ink-soft);border-radius:999px;padding:3px 10px;margin-left:10px;vertical-align:middle}#menu .footer{position:absolute;bottom:18px;font-size:12px;color:var(--ink-soft);opacity:.75}#menu .menu-gear{position:absolute;top:calc(16px + env(safe-area-inset-top));right:16px;width:46px;height:46px;border-radius:var(--r-md)}#dock{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--r-lg);animation:rise-in .45s var(--ease-spring) both}.dock-sep{width:1px;height:30px;background:#3d345024;border-radius:1px}.tool-btn{width:50px;height:50px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:var(--ink-soft)}.tool-btn svg{width:24px;height:24px}.tool-btn:hover{background:#ffffffb3;color:var(--ink)}.tool-btn.active{background:var(--accent);color:#fff;box-shadow:0 4px 14px #f26d1d73}.tool-btn:disabled{opacity:.35;cursor:default}.tool-btn:disabled:hover{background:none;color:var(--ink-soft)}.tool-btn.create-btn{background:var(--ink);color:#fff}.tool-btn.create-btn:hover{background:#524968;color:#fff}.tool-btn.play-btn{background:var(--good);color:#fff;border-radius:50%;box-shadow:0 4px 16px #4cc26e80}.tool-btn.play-btn:hover{background:#43b562;color:#fff}.tool-btn.play-btn.playing{background:var(--bad);box-shadow:0 4px 16px #f0566a80}.tool-btn.play-btn.playing:hover{background:#e2465b}#palette{position:absolute;bottom:calc(86px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px;border-radius:var(--r-lg);transform-origin:50% 100%;animation:pop-in .28s var(--ease-spring) both}#palette.hidden{display:none}.palette-item{display:flex;flex-direction:column;align-items:center;gap:6px;width:86px;padding:12px 6px 10px;border-radius:var(--r-md);font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--ink-soft)}.palette-item svg{width:30px;height:30px;color:var(--ink)}.palette-item:hover{background:#ffffffbf;color:var(--ink)}.palette-item:disabled{opacity:.35;cursor:default}.palette-item:disabled:hover{background:none}#selbar{position:absolute;bottom:calc(86px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-radius:var(--r-md);animation:pop-in .22s var(--ease-spring) both}#selbar.hidden{display:none}#selbar .profile-chips{display:flex;gap:4px}#selbar .chip{padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ink-soft);background:#3d34500f}#selbar .chip:hover{background:#fffc;color:var(--ink)}#selbar .chip.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px #f26d1d66}#selbar .sel-actions{display:flex;gap:6px}#selbar .sel-actions button{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink-soft)}#selbar .sel-actions button svg{width:18px;height:18px}#selbar .sel-actions button:hover{background:#ffffffbf;color:var(--ink)}#selbar .sel-actions button.danger:hover{background:#f0566a24;color:var(--bad)}#selbar .sel-actions button.highlight{color:var(--accent-deep)}#selbar .sel-actions button.highlight:hover{background:#ff8a3d24}#selbar .sel-actions button.on{background:var(--good);color:#fff}#selbar .sel-actions button.on:hover{background:#43b562;color:#fff}.joint-picker{position:absolute;display:flex;flex-direction:column;gap:3px;padding:7px;border-radius:var(--r-md);z-index:30;animation:pop-in-place .2s var(--ease-spring) both}.joint-option{display:flex;flex-direction:column;align-items:flex-start;padding:7px 16px 7px 12px;border-radius:10px;text-align:left}.joint-option b{font-family:var(--font-display);font-size:14.5px;color:var(--ink)}.joint-option span{font-size:11.5px;color:var(--ink-soft)}.joint-option:hover{background:#fffc}.picker-title{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink-soft);padding:2px 12px 4px}@keyframes pop-in-place{0%{opacity:0;transform:scale(.75)}60%{opacity:1;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}#playhud{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;display:flex;gap:8px;padding:6px;border-radius:var(--r-md);animation:pop-in .25s var(--ease-spring) both}#playhud.hidden{display:none}#playhud .tool-btn{width:44px;height:44px}#topbar{position:absolute;top:calc(14px + env(safe-area-inset-top));left:14px;display:flex;align-items:center;gap:8px;padding:6px;border-radius:var(--r-md);animation:rise-in-plain .45s var(--ease-spring) both}#topbar .tool-btn{width:44px;height:44px}#topbar .scene-name{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink-soft);padding:0 12px 0 4px}#toasts{position:absolute;top:calc(16px + env(safe-area-inset-top));left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}.toast{padding:10px 22px;border-radius:999px;font-family:var(--font-display);font-weight:600;font-size:15px;background:var(--glass-strong);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-soft);animation:pop-in .3s var(--ease-spring) both}.toast.leaving{animation:toast-out .25s ease both}@keyframes pop-in{0%{opacity:0;transform:translate(-50%) scale(.7)}60%{opacity:1;transform:translate(-50%) scale(1.04)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes rise-in{0%{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%)}}#menu .tagline,#menu .menu-buttons{transform:none}#menu .tagline,#menu .menu-buttons{animation-name:rise-in-plain}@keyframes rise-in-plain{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes title-in{0%{opacity:0;transform:scale(.6) rotate(-3deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes letter-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes toast-out{to{opacity:0;transform:translate(0) scale(.85) translateY(-8px)}}.share-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:14px;width:min(400px,90vw);padding:20px;border-radius:24px;animation:pop-in-center .35s var(--ease-spring) both;z-index:40}.share-head{display:flex;align-items:center;justify-content:space-between}.share-title{font-family:var(--font-display);font-weight:800;font-size:21px;color:var(--ink)}.share-head .tool-btn{width:38px;height:38px}.share-name{font-family:var(--font-body);font-size:15px;padding:11px 14px;border:none;outline:none;border-radius:var(--r-sm);background:#ffffffbf;color:var(--ink)}.share-name:focus{box-shadow:0 0 0 3px #ff8a3d66}.share-buttons{display:flex;gap:8px}.share-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px 11px;border-radius:var(--r-md);font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--ink);background:#fff9}.share-btn svg{width:24px;height:24px;color:var(--accent-deep)}.share-btn:hover{background:#fff;box-shadow:var(--shadow-soft)}.share-btn:disabled{opacity:.4;cursor:default}.share-btn:disabled:hover{background:#fff9;box-shadow:none}.share-hint{font-size:12.5px;color:var(--ink-soft);text-align:center;line-height:1.5}#worldselect{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:20px}.ws-header{position:absolute;top:calc(14px + env(safe-area-inset-top));left:14px;right:14px;display:flex;align-items:center;gap:12px}.ws-header .tool-btn{border-radius:var(--r-md)}.ws-title{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--ink);text-shadow:0 2px 0 rgba(255,255,255,.35)}.ws-strip{display:flex;gap:14px;max-width:100%;overflow-x:auto;padding:12px 20px;scrollbar-width:none}.world-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:150px;padding:20px 16px 14px;border-radius:var(--r-lg);animation:pop-in-place .35s var(--ease-spring) both}.world-card .wc-emoji{font-size:34px;margin-bottom:4px}.world-card .wc-name{font-family:var(--font-display);font-weight:800;font-size:19px;color:var(--ink)}.world-card .wc-tag{font-size:11.5px;color:var(--ink-soft)}.world-card .wc-progress{margin-top:8px;font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--accent-deep)}.world-card.active{outline:3px solid var(--accent);transform:scale(1.04)}.world-card.locked{opacity:.55;filter:saturate(.4)}.world-card .wc-lock{position:absolute;top:10px;right:12px;font-size:16px}.level-bubbles{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:720px}.level-bubble{display:flex;flex-direction:column;align-items:center;gap:2px;width:104px;padding:14px 8px 10px;border-radius:var(--r-lg);animation:pop-in-place .3s var(--ease-spring) both}.level-bubble .lb-num{font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--ink)}.level-bubble .lb-name{font-size:11.5px;font-weight:600;color:var(--ink-soft)}.level-bubble .lb-stars{margin-top:4px;font-size:13px;color:#f0b429;letter-spacing:2px}.level-bubble:hover{transform:translateY(-3px);box-shadow:var(--shadow-pop)}.level-bubble.done .lb-num{color:var(--good)}#levelhud{position:absolute;top:calc(14px + env(safe-area-inset-top));left:14px;display:flex;align-items:center;gap:6px;padding:6px;border-radius:var(--r-md);animation:rise-in-plain .4s var(--ease-spring) both}#levelhud .tool-btn{width:44px;height:44px}#levelhud .scene-name{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink-soft);padding:0 8px}#tapstart{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;pointer-events:none}#tapstart .tap-instructions{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,4.5vw,40px);color:var(--ink);text-shadow:0 3px 0 rgba(255,255,255,.4);animation:rise-in-plain .5s var(--ease-spring) both}#tapstart .tap-hint{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink-soft);animation:letter-bob 1.6s ease-in-out infinite}.level-instructions{position:absolute;top:calc(18px + env(safe-area-inset-top));left:50%;transform:translate(-50%);padding:10px 24px;border-radius:999px;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink);animation:pop-in .35s var(--ease-spring) both;transition:opacity .6s ease}.level-instructions.faded{opacity:0}.start-fab{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;padding:14px 34px;border-radius:999px;font-size:19px;font-weight:700;color:#fff;background:var(--good);box-shadow:0 6px 20px #4cc26e80;animation:pop-in .4s var(--ease-spring) both}.start-fab svg{width:22px;height:22px}.start-fab:hover{background:#43b562}#endscreen{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;padding:34px 44px 28px;border-radius:28px;animation:pop-in-center .45s var(--ease-spring) both;max-width:min(430px,88vw);text-align:center}@keyframes pop-in-center{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}#endscreen .end-title{font-family:var(--font-display);font-weight:800;font-size:34px;color:var(--ink)}#endscreen .end-stars{display:flex;gap:10px;font-size:46px}#endscreen .star{color:#3d34502e;animation:star-pop .5s var(--ease-spring) both}#endscreen .star.filled{color:#f0b429;text-shadow:0 3px 10px rgba(240,180,41,.5)}@keyframes star-pop{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.35) rotate(8deg)}to{transform:scale(1) rotate(0)}}#endscreen .end-time{font-family:var(--font-display);font-weight:700;color:var(--ink-soft)}#endscreen .end-sub{font-size:14.5px;color:var(--ink-soft);max-width:300px}#endscreen .end-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;justify-content:center}#endscreen .btn-big{min-width:0;padding:12px 26px;font-size:17px}.settings-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:14px;width:min(360px,88vw);padding:20px;border-radius:24px;animation:pop-in-center .35s var(--ease-spring) both;z-index:45}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:14.5px;font-weight:600;color:var(--ink)}.settings-row input[type=range]{flex:1;max-width:180px;accent-color:var(--accent);height:22px}.touch-controls{position:absolute;inset:0;pointer-events:none}.tc-cluster{position:absolute;bottom:calc(90px + env(safe-area-inset-bottom));display:flex;gap:12px;pointer-events:auto}.tc-left{left:18px}.tc-right{right:18px}.tc-btn{width:64px;height:64px;border-radius:50%;font-size:24px;color:var(--ink);background:#ffffff8c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow-soft);touch-action:none;-webkit-user-select:none;user-select:none}.tc-btn:active{background:var(--accent);color:#fff;transform:scale(.92)}#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:60}#flash.on{animation:flash-pop .45s ease-out}@keyframes flash-pop{0%{opacity:.75}to{opacity:0}}#fader{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .28s ease;z-index:50}#fader.on{opacity:1;pointer-events:auto}@media(max-width:560px){.tool-btn{width:44px;height:44px}.palette-item{width:74px}}