:root{--ink: #2a1846;--cream: #fff8e6;--gold: #ffd23f;--purple: #7b4bd6;--sky: #7cc6ff;--jump: #4cc764;--grab: #3d8bff;--slap: #ff8a3d;--safe-t: env(safe-area-inset-top, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--btn: clamp(58px, 12.5vmin, 92px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#7cc6ff;color:var(--cream);font-family:Nunito,system-ui,sans-serif;touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}canvas#game{position:fixed;inset:0;width:100vw;height:100dvh;display:block;outline:none}canvas#game.retro{image-rendering:pixelated}.hidden{display:none!important}#hud{position:fixed;inset:0;pointer-events:none;z-index:5}#hud-left,#hud-center,#hud-right{position:absolute;top:calc(10px + var(--safe-t));display:flex;align-items:center;gap:10px}#hud-left{left:calc(14px + var(--safe-l));flex-direction:column;align-items:flex-start;gap:4px}#hud-center{left:50%;transform:translate(-50%)}#hud-right{right:calc(14px + var(--safe-r))}.hud-text,#lives,#garibs,#ball-form{font-family:Lilita One,Nunito,sans-serif;font-size:clamp(18px,4.2vmin,28px);color:#fff;text-shadow:0 2px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink),0 4px 6px rgba(0,0,0,.25);letter-spacing:.5px}#lives{display:flex;align-items:center;gap:4px}.glove-icon{font-size:.95em;filter:drop-shadow(0 2px 0 var(--ink))}#hearts{display:flex;gap:3px}.heart{width:clamp(18px,3.8vmin,26px);height:clamp(18px,3.8vmin,26px);fill:#ff4d6d;stroke:var(--ink);stroke-width:2.2;overflow:visible}.heart.empty{fill:#2a184659}#garibs{display:flex;align-items:center;gap:8px}.garib-icon{width:clamp(16px,3.6vmin,24px);height:clamp(16px,3.6vmin,24px);background:linear-gradient(135deg,#fff6a8,var(--gold) 50%,#ff9f1c);transform:rotate(45deg);border:2px solid var(--ink);border-radius:4px}#garibs.bump{animation:bump .25s ease-out}@keyframes bump{0%{transform:scale(1.35)}to{transform:scale(1)}}#ball-form{font-size:clamp(14px,3.2vmin,20px);opacity:.95}#pause-btn{pointer-events:auto;width:clamp(40px,8vmin,52px);height:clamp(40px,8vmin,52px);border-radius:50%;border:3px solid var(--ink);background:#ffffffd9;color:var(--ink);font-weight:900;font-size:clamp(14px,3vmin,18px);cursor:pointer}#sign{position:absolute;left:50%;bottom:calc(18px + var(--safe-b));transform:translate(-50%);max-width:min(560px,62vw);background:var(--cream);color:var(--ink);border:4px solid var(--ink);border-radius:16px;padding:10px 16px;font-size:clamp(14px,3.4vmin,19px);font-weight:800;line-height:1.3;text-align:center;box-shadow:0 6px #2a184659}body.touch-mode #sign{bottom:auto;top:calc(56px + var(--safe-t))}.key{display:inline-block;min-width:1.6em;padding:0 .4em;border-radius:6px;background:var(--ink);color:#fff;font-size:.85em;line-height:1.5em;text-align:center}.key.jump{background:var(--jump)}.key.grab{background:var(--grab)}.key.slap{background:var(--slap)}#toast{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%) scale(.6);font-family:Lilita One,sans-serif;font-size:clamp(26px,7vmin,52px);color:var(--gold);text-shadow:0 3px 0 var(--ink),3px 0 0 var(--ink),-3px 0 0 var(--ink),0 -3px 0 var(--ink),0 8px 10px rgba(0,0,0,.25);opacity:0;white-space:nowrap;transition:opacity .2s,transform .25s cubic-bezier(.2,1.6,.4,1)}#toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}#toast .sub{display:block;font-size:.45em;color:#fff;text-align:center;margin-top:4px}#ball-arrow{position:absolute;width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:26px solid #9fe6ff;filter:drop-shadow(0 0 2px var(--ink)) drop-shadow(0 0 1px var(--ink));transform-origin:50% 60%}#touch{position:fixed;inset:0;z-index:6;pointer-events:none}#stick-base{position:absolute;width:128px;height:128px;margin:-64px 0 0 -64px;border-radius:50%;background:#ffffff2e;border:3px solid rgba(255,255,255,.55)}#stick-knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:#ffffffd9;border:3px solid var(--ink)}#stick-hint{position:absolute;left:calc(48px + var(--safe-l));bottom:calc(48px + var(--safe-b));width:110px;height:110px;border-radius:50%;border:3px dashed rgba(255,255,255,.5);display:grid;place-items:center;font-family:Lilita One,sans-serif;color:#ffffffbf;font-size:16px;text-shadow:0 1px 2px rgba(0,0,0,.4)}#stick-hint.used{opacity:0;transition:opacity .6s}.tbtn{position:absolute;pointer-events:auto;width:var(--btn);height:var(--btn);border-radius:50%;border:4px solid var(--ink);color:#fff;font-family:Lilita One,sans-serif;font-size:calc(var(--btn) * .2);letter-spacing:.5px;text-shadow:0 2px 0 rgba(0,0,0,.35);box-shadow:0 5px #2a18468c,inset 0 -6px #00000026;opacity:.88;touch-action:none}.tbtn.down{transform:translateY(3px) scale(.95);box-shadow:0 2px #2a18468c,inset 0 -3px #00000026}#btn-jump{background:var(--jump);width:calc(var(--btn) * 1.18);height:calc(var(--btn) * 1.18);right:calc(22px + var(--safe-r));bottom:calc(22px + var(--safe-b));font-size:calc(var(--btn) * .24)}#btn-grab{background:var(--grab);right:calc(32px + var(--btn) * 1.18 + var(--safe-r));bottom:calc(18px + var(--safe-b))}#btn-slap{background:var(--slap);right:calc(26px + var(--safe-r));bottom:calc(36px + var(--btn) * 1.18 + var(--safe-b))}.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));text-align:center}#pause,#complete,#gameover{background:#2a1846b8;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}#title{background:linear-gradient(180deg,#2a184600,#2a184626 55%,#2a18468c)}.logo{line-height:.85;transform:rotate(-4deg)}.logo-top,.logo-bottom{font-family:Lilita One,sans-serif;font-size:clamp(54px,15vmin,120px);color:#fff;text-shadow:0 6px 0 var(--ink),5px 0 0 var(--ink),-5px 0 0 var(--ink),0 -5px 0 var(--ink),4px 4px 0 var(--ink),-4px 4px 0 var(--ink),4px -4px 0 var(--ink),-4px -4px 0 var(--ink),0 14px 18px rgba(0,0,0,.3)}.logo-bottom{color:var(--gold);margin-left:.8em}.tagline{font-weight:900;font-size:clamp(14px,3.2vmin,18px);color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.4)}h2{margin:0 0 4px;font-family:Lilita One,sans-serif;font-weight:400;font-size:clamp(36px,9vmin,64px);color:var(--gold);text-shadow:0 4px 0 var(--ink),3px 0 0 var(--ink),-3px 0 0 var(--ink),0 -3px 0 var(--ink)}.big-btn,.menu-btn{font-family:Lilita One,sans-serif;border:4px solid var(--ink);border-radius:999px;cursor:pointer;box-shadow:0 6px 0 var(--ink);pointer-events:auto}.big-btn{background:var(--gold);color:var(--ink);font-size:clamp(24px,6vmin,36px);padding:8px 44px 10px;animation:pulse 1.6s ease-in-out infinite}.big-btn:active,.menu-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}@keyframes pulse{50%{transform:scale(1.05)}}.menu-btn{background:var(--cream);color:var(--ink);font-size:clamp(16px,3.8vmin,22px);padding:6px 26px 8px;min-width:220px}.controls-help{font-size:clamp(12px,2.8vmin,15px);font-weight:800;color:#fff;opacity:.95;line-height:1.7;text-shadow:0 1px 3px rgba(0,0,0,.5);max-width:560px}.small{font-size:clamp(13px,3vmin,16px);font-weight:800;opacity:.9}#rotate-hint{display:none;font-weight:900;font-size:15px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}@media (orientation: portrait) and (pointer: coarse){#rotate-hint{display:block}}#complete-stats{background:var(--cream);color:var(--ink);border:4px solid var(--ink);border-radius:18px;padding:12px 26px;font-weight:900;font-size:clamp(16px,3.8vmin,22px);line-height:1.6;min-width:260px}#complete-stats .row{display:flex;justify-content:space-between;gap:24px}#fade{position:fixed;inset:0;z-index:20;background:#fff;opacity:0;pointer-events:none;transition:opacity .35s}#fade.on{opacity:1}#prompt{position:absolute;left:0;top:0;transform:translate(-50%,-100%);background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:12px;padding:4px 10px 5px;font-weight:900;font-size:clamp(13px,3vmin,17px);white-space:nowrap;box-shadow:0 4px #2a184659;animation:bob 1s ease-in-out infinite}#prompt:after{content:"";position:absolute;left:50%;bottom:-10px;margin-left:-8px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:9px solid var(--ink)}@keyframes bob{50%{margin-top:-5px}}.tbtn.hint{animation:glow .9s ease-in-out infinite}@keyframes glow{50%{box-shadow:0 5px #2a18468c,0 0 0 8px #ffffff8c;transform:scale(1.06)}}#select{background:#2a18468c;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}#level-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,2vmin,16px);width:min(880px,100%)}@media (max-aspect-ratio: 1/1){#level-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}.level-card{--card: #62c73e;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:clamp(8px,2vmin,14px) 6px;border:4px solid var(--ink);border-radius:18px;background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--card) 70%,#2a1846));color:#fff;cursor:pointer;box-shadow:0 6px 0 var(--ink);font-family:Nunito,sans-serif;pointer-events:auto;transition:transform .12s}.level-card:not(.locked):hover{transform:translateY(-3px) rotate(-1deg)}.level-card:not(.locked):active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}.level-card.locked{filter:grayscale(.9) brightness(.7);cursor:default}.card-icon{font-size:clamp(26px,7vmin,46px);line-height:1.1;filter:drop-shadow(0 3px 0 rgba(0,0,0,.25))}.card-num{font-weight:900;font-size:clamp(11px,2.4vmin,13px);opacity:.9;text-transform:uppercase;letter-spacing:1px}.card-name{font-family:Lilita One,sans-serif;font-size:clamp(15px,3.6vmin,22px);text-shadow:0 2px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink);line-height:1.1;text-align:center}.card-status{margin-top:4px;background:#2a18468c;border-radius:999px;padding:1px 10px;font-weight:900;font-size:clamp(11px,2.4vmin,14px)}.level-card.done .card-status{background:var(--gold);color:var(--ink)}.btn-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.btn-row .menu-btn{min-width:160px}