*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#030713;font-family:Impact,'Arial Black',system-ui,sans-serif;touch-action:none}body{display:flex;align-items:center;justify-content:center}button{cursor:pointer;font-family:inherit}#frame{position:relative;width:min(100vw,177.7778vh);height:min(100vh,56.25vw);background:#06162e;border:2px solid #294c9e;overflow:hidden;box-shadow:0 0 24px #105dcc55}#game{display:block;width:100%;height:100%;image-rendering:auto}
[hidden]{display:none!important}.overlay{position:absolute;inset:0;z-index:25;display:flex;align-items:center;justify-content:center;background:linear-gradient(100deg,#030914ef,#06152cc9,#07091de9);color:#fff}.panel{width:min(850px,97%);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:9px}.eyebrow{color:#ffdc76;font-size:clamp(10px,1.1vw,15px);letter-spacing:.13em}.panel h1{margin:0;line-height:1;font-style:italic;font-size:clamp(37px,5.9vw,68px);text-shadow:3px 4px #060a11,6px 8px #b22019;white-space:nowrap}.panel h1 span{display:block;background:linear-gradient(#fff780,#ffc719 57%,#ff371b 88%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px #371921}.panel h1 em{font-style:italic;display:block;color:#ff2026;font-size:.66em;letter-spacing:.04em}.intro{margin:0;color:#cadbff;font:800 clamp(8px,1.1vw,13px) system-ui,sans-serif}.heroGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:95%;max-width:750px}.hero{padding:4px;border:3px solid #3375bb;background:linear-gradient(#24345d,#080c20);border-radius:6px;color:white;display:flex;flex-direction:column;align-items:center;min-width:0;touch-action:manipulation}.hero.active{border-color:#ffdc27;box-shadow:0 0 12px #f6aa1b9c}.hero img{width:100%;height:clamp(57px,15vh,114px);object-fit:cover;image-rendering:pixelated}.hero strong{font-size:clamp(10px,1.5vw,17px)}.hero small{font:600 clamp(8px,.9vw,10px) system-ui,sans-serif;color:#bcd9ff}.bigButton{background:linear-gradient(#ffec67,#dc8d14);border:2px solid #fff6b5;border-radius:5px;color:#241606;padding:9px 35px;font:900 clamp(16px,2.2vw,22px) Impact,system-ui;box-shadow:0 4px #140e07;touch-action:manipulation}.bigButton:active{transform:translateY(2px)}.bigButton.secondary{background:linear-gradient(#b6d1ff,#375b9b);color:white}.footnote{margin:1px;font:600 clamp(8px,.9vw,11px) system-ui,sans-serif;color:#9bafd2}.panel.narrow{gap:20px}.panel.narrow h2{font-size:42px;color:#ffe46c;margin:0}#hudActions{position:absolute;right:1.2%;top:1.4%;z-index:21;display:flex;gap:5px}#hudActions button{height:35px;min-width:38px;background:#0a2648c9;color:#fff;font-size:19px;border:1px solid #a0cfffaa;border-radius:6px;touch-action:manipulation}#controls{position:absolute;inset:0;z-index:15;pointer-events:none;touch-action:none}#stick{position:absolute;left:2.1%;bottom:2.7%;height:clamp(100px,25vh,148px);width:clamp(100px,25vh,148px);border:2px solid #a2cafe88;box-shadow:0 0 0 3px #213e64a0,inset 0 0 25px #4e99e84b;background:#153d7471;border-radius:50%;pointer-events:auto;touch-action:none;display:grid;place-items:center}.stickRing{font-size:63px;color:#d1e6ff35;pointer-events:none}#stickDot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:45%;height:45%;border-radius:50%;border:3px solid #d4ecff;background:radial-gradient(circle at 30% 25%,#e5f7ff,#4b93db 60%,#183d77);box-shadow:0 3px 7px #04152c;pointer-events:none}#padButtons{position:absolute;right:1.9%;bottom:2.4%;width:clamp(194px,38vh,275px);height:clamp(105px,24vh,157px);pointer-events:none}.power{position:absolute;width:29%;height:49%;border-radius:50%;display:grid;place-items:center;color:white;border:2px solid #fffc;box-shadow:inset 0 5px #ffffff55,0 3px 0 #04102cb2;font:900 clamp(13px,2.2vw,22px) Impact,system-ui;opacity:.68;pointer-events:auto;touch-action:none;text-shadow:1px 2px #0f122b}.power:active,.power.down{opacity:.96;transform:scale(.9);filter:brightness(1.3)}.power.e1{top:0;left:1%;background:linear-gradient(#edc54b,#926708)}.power.e2{top:0;left:35%;background:linear-gradient(#60d677,#17683e)}.power.magic{top:0;right:0;background:linear-gradient(#f78ced,#9820c9);font-size:24px}.power.punch{bottom:0;left:22%;background:linear-gradient(#ffab53,#c6281b)}.power.kick{bottom:0;right:12%;background:linear-gradient(#72b7ff,#1943b6)}#toast{position:absolute;z-index:24;top:19%;left:50%;transform:translateX(-50%);color:#ffe96c;text-shadow:2px 3px #070b12;background:#060d22e9;opacity:0;pointer-events:none;padding:6px 14px;border:1px solid #6da2eb88;border-radius:5px;font-size:clamp(12px,2vw,23px);transition:opacity .12s;white-space:nowrap;max-width:95%;overflow:hidden;text-overflow:ellipsis}#toast.show{opacity:1}#orient{display:none}
@media (orientation:portrait) and (pointer:coarse){#frame{width:100vw;height:min(56.25vw,98vh)}#orient{display:block;position:fixed;bottom:9%;left:5%;right:5%;text-align:center;font:800 15px system-ui,sans-serif;color:#ffe286}}
@media(max-height:380px){.panel{gap:3px;padding:3px}.eyebrow{font-size:9px}.panel h1{font-size:clamp(24px,5vw,45px)}.intro,.footnote{display:none}.hero img{height:47px}.hero small{display:none}.bigButton{padding:6px 25px;font-size:15px}#stick{height:94px;width:94px}#padButtons{height:108px;width:200px}}