:root{--ink:#392640;--cream:#fff6dd;--coral:#ff7657;--berry:#d54867;--mint:#83d6b2;--sky:#8ed8e8;--bubu:#c47b47;--dudu:#f1c6a8;--panel:#fffaf0;--shadow:#4b3158}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#241b35;font-family:"Trebuchet MS",Arial,sans-serif;touch-action:none;user-select:none}button{font:inherit;color:inherit;border:0;cursor:pointer}#app,#game-shell{width:100%;height:100%;position:relative;overflow:hidden}#game-shell{background:radial-gradient(circle at 50% 20%,#695278,#241b35 70%)}#game-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges}.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) max(80px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(80px,env(safe-area-inset-left));background:linear-gradient(135deg,rgba(52,34,68,.72),rgba(52,34,68,.25));backdrop-filter:blur(5px);z-index:20}.screen.active{display:flex}.logo-card,.panel{position:relative;text-align:center;background:var(--panel);border:5px solid var(--ink);box-shadow:0 9px 0 var(--shadow),0 18px 40px #160f22aa;border-radius:28px;padding:18px 34px;max-width:min(640px,78vw);color:var(--ink)}.logo-card:before,.logo-card:after{content:'✦';position:absolute;color:#f1b53e;font-size:26px;animation:twinkle 1.5s steps(2) infinite}.logo-card:before{left:18px;top:16px}.logo-card:after{right:18px;bottom:16px;animation-delay:.5s}@keyframes twinkle{50%{transform:scale(.6);opacity:.45}}.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--berry);margin:0 0 4px}.logo-card h1{font-size:clamp(34px,6vw,66px);line-height:.9;margin:3px;text-shadow:3px 3px 0 #ffd569}.logo-card h2{font-size:clamp(18px,2.8vw,29px);margin:8px;color:var(--coral)}.logo-card p:not(.eyebrow){font-size:clamp(12px,1.4vw,16px);margin:7px 0 12px}.pixel-friends{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px}.mini-bear{display:grid;place-items:center;position:relative;width:52px;height:48px;border:4px solid var(--ink);border-radius:16px 16px 20px 20px;box-shadow:inset 0 -7px #0002;font-weight:900}.mini-bear:before,.mini-bear:after{content:'';position:absolute;top:-9px;width:15px;height:15px;border:4px solid var(--ink);background:inherit;border-radius:6px;z-index:-1}.mini-bear:before{left:1px}.mini-bear:after{right:1px}.mini-bear i:before,.mini-bear i:after{content:'';position:absolute;top:16px;width:5px;height:6px;background:var(--ink)}.mini-bear i:before{left:12px}.mini-bear i:after{right:12px}.mini-bear em{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);width:17px;height:10px;background:var(--cream);border-radius:6px}.mini-bear em:after{content:'';position:absolute;left:6px;top:2px;width:5px;height:4px;background:var(--ink)}.bubu-art{background:var(--bubu)}.dudu-art{background:var(--dudu)}.heart{font-size:26px;color:var(--berry)}.primary,.secondary,#install-button{min-width:210px;padding:10px 20px;border:3px solid var(--ink);border-radius:14px;margin:5px;background:var(--coral);color:white;box-shadow:0 5px 0 var(--ink);font-weight:900}.primary:active,.secondary:active,#install-button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}.secondary{background:var(--cream);color:var(--ink)}#menu-install{font-size:12px}.panel h2{margin:3px 0 10px}.level-panel{max-width:760px}.level-list{display:flex;gap:12px;margin:10px 0}.level-card{position:relative;width:190px;min-height:125px;padding:12px;border:3px solid var(--ink);border-radius:18px;background:#fff;box-shadow:0 5px 0 #dec9a6;text-align:left}.level-card b{display:block;font-size:16px}.level-card small{display:block;color:#786a77;margin-top:4px}.level-card .level-icon{font-size:30px}.level-card.locked{filter:grayscale(1);opacity:.62}.level-card.locked:after{content:'🔒';position:absolute;right:10px;top:10px}.best{color:var(--berry)!important}.howto-grid{display:flex;gap:12px}.howto-grid>div{flex:1;border:3px solid #e7d7bd;border-radius:15px;padding:9px;text-align:left;font-size:13px}.howto-grid p{margin:3px 0}.avatar-dot{display:inline-block;width:15px;height:15px;border-radius:5px;border:2px solid var(--ink);vertical-align:middle;margin-right:5px}.bubu-dot{background:var(--bubu)}.dudu-dot{background:var(--dudu)}.revive-note{font-size:13px;background:#fde4e8;padding:8px;border-radius:10px}.compact{display:flex;flex-direction:column;align-items:center;min-width:340px}.result-stars{font-size:38px;color:#f4b832;text-shadow:2px 2px var(--ink)}#hud{position:absolute;z-index:10;left:50%;top:max(8px,env(safe-area-inset-top));transform:translateX(-50%);display:none;align-items:center;gap:10px;filter:drop-shadow(0 3px 0 #4d3156)}body.playing #hud{display:flex}.player-pill,.food-pill{background:#fff8e7;border:3px solid var(--ink);border-radius:13px;padding:4px 11px;font-size:12px;color:var(--ink)}.player-pill{display:flex;gap:7px}.player-pill.bubu{border-color:#81502f}.player-pill.dudu{border-color:#b7796b}.player-pill b{color:var(--berry);letter-spacing:1px}.food-pill{text-align:center;min-width:92px}.food-pill span,.food-pill small{display:block}.icon-button{display:none;position:absolute;z-index:11;top:max(8px,env(safe-area-inset-top));width:36px;height:36px;border:3px solid var(--ink);border-radius:11px;background:#fff8e7;box-shadow:0 3px 0 var(--ink)}body.playing .icon-button{display:block}#pause-button{right:max(12px,env(safe-area-inset-right))}#sound-button{right:max(54px,calc(env(safe-area-inset-right) + 42px))}#install-button{position:absolute;z-index:30;right:12px;bottom:12px;min-width:auto;font-size:12px}body.playing #install-button{display:none!important}.touch-controls{display:none;position:absolute;z-index:12;bottom:max(12px,env(safe-area-inset-bottom));gap:7px;align-items:flex-end}.touch-controls.left{left:max(12px,env(safe-area-inset-left))}.touch-controls.right{right:max(12px,env(safe-area-inset-right))}body.playing .touch-controls{display:flex}.touch-controls button{width:58px;height:58px;border-radius:17px;background:#fff8e7bb;border:3px solid var(--ink);box-shadow:0 5px 0 #3d2949;color:var(--ink);font-size:22px;backdrop-filter:blur(3px)}.touch-controls button.jump{width:65px;height:65px;background:#ffd867;color:#a94a59}.touch-controls button.attack{width:58px;height:58px;background:#c9edf2;color:#5e4970}.touch-controls button.pressed{transform:translateY(4px);box-shadow:0 1px 0 #3d2949;background:#fff}#toast{position:absolute;z-index:30;left:50%;bottom:95px;transform:translate(-50%,20px);background:var(--ink);color:white;padding:10px 16px;border-radius:12px;font-size:13px;opacity:0;transition:.2s;pointer-events:none;max-width:calc(100% - 32px);white-space:normal;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}#rotate-device{display:none;position:fixed;inset:0;z-index:100;background:#241b35;color:white;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}.phone-icon{font-size:60px;color:#ffd867}#rotate-device h2{margin:8px}.phone-icon{animation:rotatehint 1.8s ease-in-out infinite}@keyframes rotatehint{50%{transform:rotate(90deg)}}@media(orientation:portrait) and (max-width:900px){#rotate-device{display:flex}}@media(max-height:470px){.logo-card,.panel{padding:10px 22px;border-width:4px}.logo-card h1{font-size:36px}.logo-card h2{font-size:19px}.mini-bear{width:39px;height:36px}.level-card{min-height:105px}.touch-controls button{width:52px;height:52px}.touch-controls button.jump{width:58px;height:58px}}@media(pointer:fine){.touch-controls{opacity:.85}}