@import"https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Inter:wght@500;700;900&display=swap";:root{--pink: #ff3fa4;--cyan: #38e8ff;--gold: #ffd166;--panel-bg: rgba(12, 14, 28, .72);--glass-border: rgba(255, 255, 255, .18)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;overflow:hidden;background:#050611;color:#fff;font-family:Inter,system-ui,sans-serif}#gameCanvas{position:fixed;top:0;left:0;width:100vw;height:100vh;display:block;touch-action:none;outline:none}#hud{position:fixed;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:10;gap:12px}.hud-left,.hud-right{border:1px solid var(--glass-border);background:linear-gradient(135deg,#111630c7,#080a168c);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:20px;box-shadow:0 16px 48px #0000004d,inset 0 0 32px #38e8ff0d}.hud-left{padding:16px 20px;max-width:min(380px,55vw)}.brand{margin-bottom:6px}.brand-sub{display:block;color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:.2em;margin-bottom:2px}.brand h1{font-family:Black Han Sans,sans-serif;font-size:clamp(28px,5.5vw,56px);line-height:.95;margin:0;text-shadow:0 0 16px rgba(255,63,164,.6),0 4px 0 rgba(0,0,0,.25)}.status-text{color:#ffffffc7;font-size:13px;font-weight:700;margin-top:4px}.hud-right{display:flex;gap:8px;padding:12px}.stat-box{padding:10px 16px;border-radius:14px;background:#ffffff14;text-align:center;min-width:72px}.stat-label{display:block;font-size:9px;font-weight:900;letter-spacing:.14em;color:#ffffff80}.stat-value{display:block;font-size:22px;font-weight:900;margin-top:2px}#controls{position:fixed;left:20px;right:20px;bottom:max(20px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:flex-end;z-index:20;pointer-events:none;gap:16px}.joystick-area{display:flex;align-items:flex-end;gap:16px;pointer-events:auto}.joystick{position:relative;width:160px;height:88px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:radial-gradient(circle at 36% 30%,#ffffff38,#38e8ff14 50%,#0a0d1ecc);box-shadow:0 16px 50px #00000080,inset 0 0 30px #38e8ff1f;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none}.joystick.joystick-vertical{width:88px;height:160px}.joystick-ring{position:absolute;border:2px dashed rgba(255,255,255,.16);border-radius:999px}.joystick .joystick-ring{left:16px;right:16px;top:50%;height:24px;transform:translateY(-50%)}.joystick.joystick-vertical .joystick-ring{top:16px;bottom:16px;left:50%;width:24px;height:auto;transform:translate(-50%)}.joystick-knob{position:absolute;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,var(--cyan) 40%,#0aa6ff);box-shadow:0 6px 16px #0006,0 0 24px #38e8ffb3;transition:transform .08s ease-out;will-change:transform}.joystick-label{position:absolute;bottom:-24px;left:0;right:0;text-align:center;color:#fff9;font-size:10px;font-weight:900;letter-spacing:.1em;white-space:nowrap}.drop-button{pointer-events:auto;width:150px;height:150px;border:0;border-radius:50%;color:#fff;cursor:pointer;background:radial-gradient(circle at 34% 28%,#fff3,#ff6bbe 30%,#db1676 64%,#700a42);box-shadow:0 20px 60px #ff3fa459,inset 0 -10px 24px #00000059,inset 0 0 16px #ffffff2e;text-shadow:0 2px 0 rgba(0,0,0,.3);-webkit-user-select:none;user-select:none;touch-action:manipulation;transition:filter .2s,transform .15s}.drop-button:active:not(:disabled){transform:scale(.94)}.drop-button:disabled{filter:grayscale(.7) brightness(.7);cursor:not-allowed}.drop-button strong{display:block;font-size:28px;font-weight:1000;letter-spacing:.04em}.drop-button small{display:block;margin-top:2px;font-weight:900;font-size:13px;opacity:.85}.toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);padding:20px 28px;border-radius:24px;background:#060814d1;border:1px solid var(--glass-border);box-shadow:0 20px 60px #00000080,0 0 60px #ff3fa440;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff;font-size:30px;font-weight:1000;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:30}.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.game-over-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.game-over-overlay h2{font-family:Black Han Sans,sans-serif;font-size:clamp(36px,8vw,72px);text-shadow:0 0 20px var(--pink);margin-bottom:12px}.game-over-overlay p{font-size:20px;margin-bottom:24px;color:#fffc}.game-over-overlay button{padding:14px 40px;border:2px solid var(--cyan);border-radius:999px;background:transparent;color:var(--cyan);font-size:18px;font-weight:900;letter-spacing:.08em;cursor:pointer;transition:background .2s,color .2s}.game-over-overlay button:hover{background:var(--cyan);color:#050611}@media(max-width:720px){#hud{top:10px;left:10px;right:10px;flex-direction:column}.hud-left{max-width:100%;padding:12px 14px}.hud-right{width:100%;padding:8px}.stat-box{flex:1;padding:8px 10px;min-width:0}#controls{left:12px;right:12px;bottom:max(14px,env(safe-area-inset-bottom));gap:10px}.joystick-area{gap:10px}.joystick{width:120px;height:68px}.joystick.joystick-vertical{width:68px;height:120px}.joystick-knob{width:42px;height:42px}.joystick-label{bottom:-20px;font-size:8px}.drop-button{width:120px;height:120px}.drop-button strong{font-size:22px}.drop-button small{font-size:11px}}@media(max-width:400px){.joystick{width:100px;height:56px}.joystick.joystick-vertical{width:56px;height:100px}.joystick-knob{width:36px;height:36px}.drop-button{width:100px;height:100px}.drop-button strong{font-size:18px}}