*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101831;color:#edfaff;font-family:system-ui,sans-serif}button,a{touch-action:manipulation}button{font:inherit;font-weight:800;color:#ecffff;background:#253659;border:1px solid #65819e;border-radius:14px;min-height:46px;padding:10px 15px;cursor:pointer}button:hover{filter:brightness(1.2)}button:focus-visible,a:focus-visible{outline:3px solid #ffe78a;outline-offset:3px}button:disabled{opacity:.45;cursor:default}canvas{position:absolute;width:100%;height:100%}header{position:absolute;top:env(safe-area-inset-top,0);left:0;right:0;display:flex;align-items:center;gap:8px;padding:10px;background:linear-gradient(#101831ee,transparent)}#status{flex:1;text-align:center;font-size:13px;font-weight:800}#mute{font-size:11px;padding:8px}#hint{position:absolute;top:74px;left:12px;right:12px;text-align:center;font-size:13px;color:#cdebf7;text-shadow:0 2px 4px #000;pointer-events:none}footer{position:absolute;bottom:env(safe-area-inset-bottom,0);left:0;right:0;padding:12px;display:flex;justify-content:center;gap:8px;background:linear-gradient(transparent,#101831)}[hidden]{display:none!important}#hook{background:#91f5cb;color:#102d36;min-width:110px}#boost{background:#f5c478;color:#302137}#release{font-size:11px}#back{padding:10px}#targets{position:absolute;inset:0;pointer-events:none}.target{position:absolute;width:52px;height:52px;border-radius:50%;padding:0;background:#112d43cc;border:2px solid #87f4d1;color:#aeffe2;pointer-events:auto;transform:translate(-50%,-50%);box-shadow:0 0 20px #71efbc33;font-size:21px}.target.selected{border-color:#ffe19a;box-shadow:0 0 0 5px #ffe19a22}.target.storm{border-color:#ff91b2;color:#ffb9ce;background:#572b50cc}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#09112499;backdrop-filter:blur(6px);padding:18px}.panel{width:100%;max-width:540px;max-height:100%;overflow:auto;background:linear-gradient(140deg,#233556,#14233c);border:1px solid #7794b0;border-radius:26px;padding:25px;box-shadow:0 20px 80px #050c26}.eyebrow{letter-spacing:3px;color:#8ff2cd;font-size:11px;font-weight:800}h1{font-size:clamp(30px,7vw,48px);line-height:1;margin:12px 0;color:#efffff}h2{margin:10px 0}p{color:#c2d4e3;font-size:14px;line-height:1.5}.big{background:#98f6cc;color:#163441;width:100%;font-size:18px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.grid button{font-size:12px;padding:10px 4px}.row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.row button{flex:1}a{color:#a8eadf;display:inline-block;margin-top:16px}.paint{border:3px solid transparent}.paint.chosen{border-color:#fff}@media(max-height:480px){.panel{padding:16px;max-width:700px}h1{font-size:30px}.grid{margin:8px 0}p{margin:8px 0}header{padding:5px}#hint{top:57px}footer{padding:6px}.target{width:46px;height:46px}button{min-height:44px}}@media(prefers-reduced-motion:reduce){#overlay{backdrop-filter:none}}
@media(max-width:500px){footer{padding:10px 6px;gap:5px}footer button{padding:9px 6px;font-size:12px}#back{width:34px;min-width:34px;padding:6px}#hook{min-width:100px;flex:1}#boost{width:72px}#release{width:66px;font-size:10px}}