*{margin:0;padding:0;box-sizing:border-box}body{overflow:hidden;background:#0a0a1a;font-family:Segoe UI,system-ui,sans-serif}canvas{display:block}#hud{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:16px 24px;z-index:10;pointer-events:none;opacity:0;transition:opacity .5s}#hud.visible{opacity:1}.hud-box{background:#0000008c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px 18px;color:#fff}.hud-box .label{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:#ffffff80}.hud-box .value{font-size:34px;font-weight:800;background:linear-gradient(135deg,#fff,#ccc);-webkit-background-clip:text;-webkit-text-fill-color:transparent}#progress-wrap{position:fixed;right:18px;top:50%;transform:translateY(-50%);width:8px;height:260px;background:#ffffff14;border-radius:4px;z-index:10;overflow:hidden;opacity:0;transition:opacity .5s}#progress-wrap.visible{opacity:1}#progress-fill{position:absolute;bottom:0;width:100%;background:linear-gradient(to top,#4caf50,#8bc34a,#cddc39);border-radius:4px;transition:height .3s ease;box-shadow:0 0 12px #4caf5080}.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;transition:opacity .4s}.screen.hidden{opacity:0;pointer-events:none}#menu-screen{background:radial-gradient(ellipse at center,#0a0a28e6,#000000f2)}#gameover-screen,#win-screen{background:#000000e0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.title{font-size:clamp(36px,8vw,64px);font-weight:900;color:#fff;letter-spacing:-1px;margin-bottom:8px}.title span{background:linear-gradient(135deg,#ff6d00,#ff9100,#ffc107);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.subtitle{font-size:16px;color:#ffffff73;margin-bottom:40px;text-align:center;max-width:340px}.btn{padding:16px 52px;font-size:18px;font-weight:700;border:none;border-radius:60px;cursor:pointer;color:#fff;text-transform:uppercase;letter-spacing:3px;transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn-play{background:linear-gradient(135deg,#ff6d00,#ff9100);box-shadow:0 6px 30px #ff6d0059}.btn-retry{background:linear-gradient(135deg,#4caf50,#8bc34a);box-shadow:0 6px 30px #4caf5059}.final-score{font-size:56px;font-weight:900;color:#fff;margin:8px 0 32px}.title-win span{background:linear-gradient(135deg,#4caf50,#8bc34a,#cddc39);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.title-go span{background:linear-gradient(135deg,#f44336,#ff5252,#ff8a80);-webkit-background-clip:text;-webkit-text-fill-color:transparent}#controls-hint{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:10;pointer-events:none;color:#ffffff4d;font-size:12px;display:flex;gap:16px;align-items:center;opacity:0;transition:opacity .5s}#controls-hint.visible{opacity:1}.key-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid rgba(255,255,255,.2);border-radius:6px;font-size:14px;background:#ffffff0d}#mobile-pad{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:20;display:none}#mobile-pad.visible{display:block}.dpad{display:grid;grid-template-areas:". up ." "left down right";grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,58px);gap:6px}.dpad-btn{width:58px;height:58px;background:#ffffff1a;border:1.5px solid rgba(255,255,255,.2);border-radius:14px;color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none}.dpad-btn:active{background:#ffffff40}.dpad-up{grid-area:up}.dpad-down{grid-area:down}.dpad-left{grid-area:left}.dpad-right{grid-area:right}#damage-flash{position:fixed;inset:0;z-index:50;background:radial-gradient(ellipse,transparent 40%,rgba(255,0,0,.3));pointer-events:none;opacity:0;transition:opacity .1s}#damage-flash.active{opacity:1}#spawn-notification{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);z-index:60;font-size:clamp(28px,6vw,48px);font-weight:900;color:#fff;text-shadow:0 3px 12px rgba(0,0,0,.5),0 0 40px rgba(255,180,0,.3);pointer-events:none;opacity:0;transition:opacity .3s,transform .3s;white-space:nowrap}#spawn-notification.show{opacity:1;transform:translate(-50%,-50%) scale(1);animation:notif-pop 1.5s ease-out forwards}@keyframes notif-pop{0%{opacity:1;transform:translate(-50%,-50%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}25%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-60%) scale(.9)}}