*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Inter,system-ui,Arial,sans-serif;background:#111827;color:white;touch-action:none}#game{position:fixed;inset:0}canvas{display:block;width:100%;height:100%}
#hud{position:fixed;left:14px;top:12px;z-index:5;display:flex;gap:14px;align-items:flex-start;pointer-events:none}.brand{font-weight:1000;letter-spacing:.5px;line-height:.95;background:linear-gradient(135deg,#ec4899,#8b5cf6);padding:10px 12px;border-radius:14px;box-shadow:0 8px 24px #0005}.brand span{font-size:12px;letter-spacing:2px}.stats{display:flex;gap:8px;flex-wrap:wrap}.stats>div{background:#111827cc;backdrop-filter:blur(10px);border:1px solid #ffffff22;border-radius:12px;padding:9px 12px;font-size:14px;box-shadow:0 8px 20px #0003}
.icon-btn{position:fixed;right:14px;top:12px;z-index:8;border:0;border-radius:13px;width:46px;height:46px;background:#111827cc;color:white;font-size:23px;box-shadow:0 8px 24px #0004}.overlay{position:fixed;inset:0;z-index:20;background:linear-gradient(180deg,#111827cc,#020617e8);display:none;align-items:center;justify-content:center;padding:22px}.overlay.show{display:flex}.panel{width:min(92vw,430px);padding:26px;border-radius:28px;background:linear-gradient(180deg,#ffffff18,#ffffff0c);border:1px solid #ffffff2f;backdrop-filter:blur(18px);text-align:center;box-shadow:0 30px 80px #0009}.panel.small{max-width:340px}.panel h1,.panel h2{margin:8px 0 10px}.panel p{color:#dbeafe;line-height:1.55}.panel small{display:block;color:#cbd5e1;margin-top:14px;line-height:1.4}.logoBall{margin:auto;width:84px;height:84px;display:grid;place-items:center;border-radius:26px;background:linear-gradient(135deg,#f472b6,#7c3aed,#22d3ee);font-weight:1000;font-size:32px;box-shadow:0 15px 35px #7c3aed55}.character-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.char{border:2px solid transparent;background:#ffffff10;color:white;border-radius:16px;padding:14px;font-size:34px}.char span{display:block;font-size:13px;font-weight:800;margin-top:6px}.char.active{border-color:#f0abfc;background:#c026d322}.primary,.secondary,.ghost{width:100%;border:0;border-radius:15px;padding:14px 16px;margin-top:9px;font-weight:900;font-size:15px}.primary{background:linear-gradient(135deg,#ec4899,#7c3aed);color:white;box-shadow:0 10px 25px #7c3aed55}.secondary{background:#ffffff18;color:white}.ghost{background:transparent;color:#cbd5e1;border:1px solid #ffffff22}.trophy{font-size:70px}
#toast{position:fixed;z-index:30;left:50%;top:90px;transform:translate(-50%,-20px);background:#111827e8;border:1px solid #ffffff2a;padding:10px 16px;border-radius:999px;opacity:0;transition:.25s;pointer-events:none;font-weight:800;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%,0)}
#mobileControls{position:fixed;z-index:10;inset:auto 0 14px 0;display:flex;justify-content:space-between;align-items:flex-end;padding:0 18px;pointer-events:none}.joystick{width:116px;height:116px;border-radius:50%;background:#ffffff14;border:2px solid #ffffff22;backdrop-filter:blur(8px);position:relative;pointer-events:auto}.joystick:after{content:"";position:absolute;inset:26px;border-radius:50%;border:1px dashed #ffffff33}.joystick #stick{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#f472b6,#8b5cf6);box-shadow:0 6px 18px #0007;position:absolute;left:33px;top:33px}#jumpBtn{width:92px;height:92px;border-radius:50%;pointer-events:auto;border:2px solid #ffffff33;background:linear-gradient(135deg,#22d3eeaa,#3b82f6cc);color:white;font-size:26px;font-weight:1000;box-shadow:0 10px 25px #0005}#jumpBtn span{display:block;font-size:9px;letter-spacing:1px}
@media (hover:hover) and (pointer:fine){#mobileControls{opacity:.35}.joystick,#jumpBtn{pointer-events:auto}}
@media (max-width:620px){#hud{left:9px;top:9px;gap:8px}.brand{font-size:12px;padding:9px}.stats{max-width:180px}.stats>div{font-size:11px;padding:7px 9px}.icon-btn{right:9px;top:9px;width:42px;height:42px}.panel{padding:21px}}