*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#app{width:100%;height:100%;overflow:hidden;background:#2a1f45;font-family:Nunito,Segoe UI,system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none}#game-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}#hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}#hud *{pointer-events:auto}.hud-top{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.light-jar{background:linear-gradient(180deg,#fff8e7,#ffe4a8);border:4px solid #f0c060;border-radius:24px;padding:10px 16px;min-width:140px;box-shadow:0 6px #d4a040,0 10px 24px #00000040}.light-jar-label{font-size:13px;font-weight:800;color:#8a6020;letter-spacing:.04em;text-transform:uppercase}.light-jar-bar{margin-top:6px;height:18px;background:#f5e6c0;border-radius:999px;overflow:hidden;border:2px solid #e8c878}.light-jar-fill{height:100%;width:0%;background:linear-gradient(90deg,#ffd76a,#fff0b0,#ffe066);border-radius:999px;transition:width .35s ease;box-shadow:0 0 12px #ffd76a}.light-jar-count{margin-top:4px;font-size:18px;font-weight:900;color:#6b4810}.stars{display:flex;gap:6px;background:#ffffffd9;border-radius:20px;padding:8px 12px;border:3px solid #c9b8e8;box-shadow:0 4px #a890d0}.star{font-size:28px;filter:grayscale(1) opacity(.35);transition:filter .3s,transform .3s}.star.lit{filter:none;transform:scale(1.15)}.pip-bubble{position:absolute;top:90px;left:50%;transform:translate(-50%);max-width:min(340px,90vw);background:#fff;color:#3d2a5c;font-size:18px;font-weight:700;padding:14px 20px;border-radius:22px;border:4px solid #b8a0e0;box-shadow:0 8px #8a70c0,0 12px 28px #0003;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s;z-index:20}.pip-bubble.show{opacity:1}.pip-bubble:after{content:"";position:absolute;bottom:-14px;left:50%;transform:translate(-50%);border:10px solid transparent;border-top-color:#b8a0e0}.hud-bottom{position:absolute;bottom:16px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}.btn-row{display:flex;gap:10px;flex-wrap:wrap}.kid-btn{min-width:72px;min-height:72px;border:none;border-radius:22px;font-size:15px;font-weight:800;color:#3d2a5c;background:linear-gradient(180deg,#fff,#f0e8ff);border:4px solid #c9b8e8;box-shadow:0 6px #a890d0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .1s,box-shadow .1s}.kid-btn:active,.kid-btn.pressed{transform:translateY(4px);box-shadow:0 2px #a890d0}.kid-btn.active{background:linear-gradient(180deg,#ffe9a0,#ffd060);border-color:#e0a830;box-shadow:0 6px #c88820}.kid-btn .icon{font-size:28px;line-height:1}.joystick-zone{position:relative;width:130px;height:130px;border-radius:50%;background:#ffffff38;border:4px solid rgba(255,255,255,.45);touch-action:none}.joystick-knob{position:absolute;width:56px;height:56px;border-radius:50%;background:linear-gradient(180deg,#fff,#e8d8ff);border:3px solid #b8a0e0;box-shadow:0 4px 12px #00000040;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}.action-btns{display:flex;flex-direction:column;gap:10px;align-items:flex-end}.action-btn{width:80px;height:80px;border-radius:50%;border:4px solid #fff;font-size:14px;font-weight:900;color:#fff;cursor:pointer;box-shadow:0 6px #00000040;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.action-btn:active,.action-btn.pressed{transform:translateY(4px);box-shadow:0 2px #00000040}.btn-jump{background:linear-gradient(180deg,#7ec8ff,#4a9fe0)}.btn-glow{background:linear-gradient(180deg,#ffe066,#f0a020);position:relative}.charge-ring{position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border-radius:50%;border:5px solid transparent;border-top-color:#fff;opacity:0;pointer-events:none}.charge-ring.charging{opacity:1;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.build-panel{position:absolute;bottom:160px;left:50%;transform:translate(-50%);display:none;gap:8px;padding:12px;background:#ffffffeb;border-radius:24px;border:4px solid #c9b8e8;box-shadow:0 8px 24px #0003;z-index:25}.build-panel.open{display:flex}.tile-btn{width:64px;height:64px;border-radius:16px;border:3px solid #ddd;cursor:pointer;font-size:28px;display:flex;align-items:center;justify-content:center;background:#f8f4ff}.tile-btn.selected{border-color:#f0a020;background:#fff3d0;box-shadow:0 0 0 3px #ffe080}.map-panel,.inv-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(180deg,#fffef8,#f5eeff);border:5px solid #b8a0e0;border-radius:28px;padding:24px;min-width:280px;max-width:90vw;box-shadow:0 16px 40px #0000004d;display:none;z-index:30;text-align:center}.map-panel.open,.inv-panel.open{display:block}.map-panel h2,.inv-panel h2{color:#5a3d8a;margin-bottom:12px;font-size:24px}.map-panel p,.inv-panel p{color:#5a4a70;font-size:16px;line-height:1.5;margin-bottom:8px}.close-x{position:absolute;top:8px;right:12px;background:#ff8a8a;border:none;width:36px;height:36px;border-radius:50%;font-size:20px;font-weight:900;color:#fff;cursor:pointer;box-shadow:0 3px #d06060}.title-screen{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#6b5b95,#c9a86c,#e8c878);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;gap:16px}.title-screen.hidden{display:none}.title-screen h1{font-size:clamp(36px,8vw,56px);color:#fff;text-shadow:0 4px 0 #5a3d8a,0 8px 24px rgba(0,0,0,.3);text-align:center;padding:0 16px}.title-screen .subtitle{font-size:18px;color:#fff8e0;font-weight:700;text-align:center;max-width:320px}.play-btn{margin-top:20px;padding:18px 48px;font-size:28px;font-weight:900;color:#5a3d8a;background:linear-gradient(180deg,#fff,#ffe9a0);border:5px solid #fff;border-radius:999px;box-shadow:0 8px #c88820,0 16px 32px #00000040;cursor:pointer}.play-btn:active{transform:translateY(4px);box-shadow:0 4px #c88820}.hint{position:absolute;bottom:200px;left:50%;transform:translate(-50%);background:#ffffffe6;padding:8px 16px;border-radius:16px;font-size:14px;font-weight:700;color:#5a3d8a;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}.hint.show{opacity:1}@media(max-width:600px){.kid-btn{min-width:60px;min-height:60px;font-size:12px}.kid-btn .icon{font-size:22px}.action-btn{width:68px;height:68px}.joystick-zone{width:110px;height:110px}}