*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}:root{--pink:#ff6b9d;--pink-light:#ffb3ce;--pink-pale:#fff5f9;--purple:#c77dff;--yellow:#ffd93d;--mint:#6bcb77;--sky:#74c0fc;--coral:#ff6b6b;--dark:#2d2d2d;--radius:16px}html,body{background:var(--pink-pale);touch-action:none;width:100%;height:100%;font-family:Nunito,system-ui,-apple-system,sans-serif;overflow:hidden}#app{width:100vw;height:100dvh;position:relative;overflow:hidden}#game-canvas{display:block;position:absolute;inset:0}#ui-layer{pointer-events:none;position:absolute;inset:0}#ui-layer>*{pointer-events:auto}.toolbar{border-top:3px solid var(--pink-light);height:80px;padding:0 16px;padding-bottom:env(safe-area-inset-bottom);z-index:10;background:#fff;border-radius:24px 24px 0 0;justify-content:space-around;align-items:center;display:flex;position:absolute;bottom:0;left:0;right:0}.toolbar-btn{cursor:pointer;border-radius:var(--radius);color:#999;background:0 0;border:none;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;font-size:11px;font-weight:700;transition:background .15s;display:flex}.toolbar-btn.active{background:var(--pink-pale);color:var(--pink)}.toolbar-btn svg{width:28px;height:28px}.item-tray{border-top:3px solid var(--pink-light);scrollbar-width:none;background:#fff;gap:10px;padding:12px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);display:flex;position:absolute;bottom:80px;left:0;right:0;overflow:auto hidden;transform:translateY(100%)}.item-tray.open{transform:translateY(0)}.item-tray::-webkit-scrollbar{display:none}.tray-item{background:var(--pink-pale);border-radius:var(--radius);cursor:pointer;border:2px solid #0000;flex-shrink:0;justify-content:center;align-items:center;width:72px;height:72px;transition:border-color .15s,transform .15s;display:flex}.tray-item:active{border-color:var(--pink);transform:scale(.92)}.tray-item svg{width:52px;height:52px}.speech-bubble{border:3px solid var(--dark);text-align:center;cursor:text;background:#fff;border-radius:18px;outline:none;min-width:80px;max-width:160px;min-height:36px;padding:8px 12px;font-size:13px;font-weight:700;position:absolute}.speech-bubble:after{content:"";border:7px solid #0000;border-top-color:var(--dark);position:absolute;bottom:-14px;left:20px}.speech-bubble:before{content:"";z-index:1;border:5px solid #0000;border-top-color:#fff;position:absolute;bottom:-10px;left:22px}.night-overlay{opacity:0;pointer-events:none;z-index:5;background:linear-gradient(#07091e 0%,#0e1535 45%,#1a1040 100%);transition:opacity 1.2s;position:absolute;inset:0}.night-overlay.active{opacity:.78}.night-overlay:before{content:"";opacity:0;background:#fffde0;border-radius:50%;width:38px;height:38px;transition:opacity 1.2s .3s;position:absolute;top:7%;right:14%;box-shadow:10px -5px #07091e,0 0 18px 4px #fff07859}.night-overlay.active:before{opacity:1}.night-star{opacity:0;background:#fff;border-radius:50%;transition:opacity 1s;animation:2s ease-in-out infinite twinkle;position:absolute}.night-overlay.active .night-star{opacity:1}@keyframes twinkle{0%,to{opacity:.25;transform:scale(1)}50%{opacity:1;transform:scale(1.6)}}.day-night-btn{top:calc(16px + env(safe-area-inset-top));cursor:pointer;z-index:50;background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:22px;line-height:1;transition:transform .15s,box-shadow .15s;display:flex;position:absolute;right:16px;box-shadow:0 2px 10px #00000026}.day-night-btn:active{transform:scale(.88);box-shadow:0 1px 4px #00000026}.night-overlay.aurora{opacity:1;background:0 0;animation:3s ease-in-out infinite aurora-shift}@keyframes aurora-shift{0%{background:linear-gradient(160deg,#00e66473 0%,#6400ff59 50%,#00b4ff4d 100%)}33%{background:linear-gradient(160deg,#ff50b466 0%,#00c89659 50%,#b400ff4d 100%)}66%{background:linear-gradient(160deg,#0096ff66 0%,#ffc8004d 50%,#00dc6459 100%)}to{background:linear-gradient(160deg,#00e66473 0%,#6400ff59 50%,#00b4ff4d 100%)}}.shooting-star{transform-origin:0;background:linear-gradient(90deg,#fff,#0000);border-radius:2px;width:80px;height:2px;animation:.8s ease-out forwards shoot;position:absolute}@keyframes shoot{0%{opacity:1;transform:rotate(-35deg)scaleX(0)}60%{opacity:1}to{opacity:0;transform:rotate(-35deg)scaleX(1)translate(120px)}}.confetti-piece{pointer-events:none;z-index:1050;border-radius:2px;animation:1.6s ease-in forwards confetti-fall;position:absolute;top:-10px}@keyframes confetti-fall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:0;transform:translateY(105vh)rotate(720deg)}}.secret-toast{color:#fff;white-space:nowrap;opacity:0;pointer-events:none;z-index:1100;background:linear-gradient(135deg,#c77dff,#ff6b9d);border-radius:100px;padding:10px 22px;font-size:15px;font-weight:800;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .35s;position:absolute;bottom:96px;left:50%;transform:translate(-50%)translateY(20px);box-shadow:0 6px 20px #c77dff73}.secret-toast.visible{opacity:1;transform:translate(-50%)translateY(0)}.unlock-toast{border:3px solid var(--pink);color:var(--dark);white-space:nowrap;opacity:0;pointer-events:none;z-index:1100;background:#fff;border-radius:100px;padding:10px 20px;font-size:14px;font-weight:700;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .4s;position:absolute;top:16px;left:50%;transform:translate(-50%)translateY(-80px);box-shadow:0 6px 20px #00000026}.unlock-toast.visible{opacity:1;transform:translate(-50%)translateY(0)}.unlock-toast-star{margin-right:4px}.swatch-new{position:relative}.swatch-new:after{content:"✨";font-size:12px;line-height:1;position:absolute;top:-8px;right:-8px}.bubble-close{background:var(--coral);color:#fff;cursor:pointer;z-index:1;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:14px;line-height:1;display:flex;position:absolute;top:-10px;right:-10px;box-shadow:0 2px 4px #0003}.modal-overlay{z-index:1000;background:#0006;align-items:flex-end;display:flex;position:fixed;inset:0}.modal-sheet{width:100%;max-height:80dvh;padding:20px;padding-bottom:calc(20px + env(safe-area-inset-bottom));background:#fff;border-radius:24px 24px 0 0;overflow-y:auto}.modal-handle{background:#ddd;border-radius:2px;width:40px;height:4px;margin:0 auto 16px}#splash{z-index:200;background:linear-gradient(160deg,#ff6b9d 0%,#c77dff 100%);flex-direction:column;justify-content:center;align-items:center;gap:16px;transition:opacity .5s,transform .5s;display:flex;position:fixed;inset:0}#splash.hidden{opacity:0;pointer-events:none;transform:scale(1.05)}#splash h1{color:#fff;text-shadow:3px 3px #0000001f;letter-spacing:-1px;font-size:52px;font-weight:900}#splash p{color:#ffffffd9;font-size:16px;font-weight:600}.splash-emoji{font-size:72px;line-height:1}.btn-primary{color:var(--pink);cursor:pointer;background:#fff;border:none;border-radius:100px;margin-top:8px;padding:14px 36px;font-size:18px;font-weight:900;transition:transform .1s,box-shadow .1s;box-shadow:0 4px #0000001f}.btn-primary:active{transform:translateY(2px);box-shadow:0 2px #0000001f}.scene-picker{flex-direction:column;gap:16px;display:flex}.scene-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.scene-card{background:var(--pink-pale);border-radius:var(--radius);cursor:pointer;border:3px solid #0000;flex-direction:column;padding:0;transition:border-color .15s,transform .15s;display:flex;overflow:hidden}.scene-card:active{transform:scale(.97)}.scene-card.selected{border-color:var(--pink)}.scene-thumb{aspect-ratio:4/3;background:#eee;width:100%;overflow:hidden}.scene-thumb svg{width:100%;height:100%;display:block}.scene-card-label{color:var(--dark);text-align:center;padding:8px;font-size:13px;font-weight:800}.scene-object-delete{background:var(--coral);color:#fff;cursor:pointer;z-index:10;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:18px;line-height:1;display:flex;position:absolute;top:-10px;right:-10px;box-shadow:0 2px 6px #0003}.char-creator{flex-direction:column;gap:14px;display:flex}.creator-preview{justify-content:center;padding:8px 0 4px;display:flex}.creator-preview svg{filter:drop-shadow(0 4px 8px #00000026);width:96px;height:96px}.creator-section{flex-direction:column;gap:8px;display:flex}.creator-label{text-transform:uppercase;letter-spacing:.06em;color:#aaa;font-size:12px;font-weight:800}.creator-swatches{flex-wrap:wrap;gap:10px;display:flex}.swatch{cursor:pointer;border:3px solid #0000;border-radius:50%;width:36px;height:36px;transition:transform .12s,border-color .12s;box-shadow:0 2px 4px #00000026}.swatch:active{transform:scale(.9)}.swatch.selected{border-color:var(--dark);transform:scale(1.1)}.creator-styles{gap:8px;display:flex}.style-btn{border:2px solid var(--pink-light);background:var(--pink-pale);color:#888;cursor:pointer;border-radius:12px;flex:1;padding:8px 4px;font-size:13px;font-weight:700;transition:background .12s,color .12s,border-color .12s}.style-btn.selected{background:var(--pink);border-color:var(--pink);color:#fff}.creator-place-btn{width:100%;margin-top:4px;font-size:17px}