:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#070b12;color:#edf6ff}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;touch-action:none}body{background:radial-gradient(circle at 30% 10%,rgba(74,173,255,.16),transparent 35%),linear-gradient(180deg,#101d30,#06101b)}#app{position:relative}canvas{display:block;width:100%;height:100%}button{font:inherit}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;-webkit-user-select:none;user-select:none;display:grid;grid-template-rows:auto 1fr;padding:22px}.title-card{justify-self:center;align-self:start;padding:12px 22px 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:linear-gradient(180deg,#07101cb8,#07101c70);box-shadow:0 20px 56px #00000047,inset 0 1px #ffffff1f;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.title-card h1{margin:0;color:#fff7ef;font-size:clamp(22px,3vw,38px);font-weight:900;letter-spacing:-.05em;line-height:1;text-shadow:0 2px 18px rgba(255,82,82,.34)}.crosshair{position:absolute;top:50%;left:50%;width:20px;height:20px;transform:translate(-50%,-50%);opacity:.82}.crosshair:before,.crosshair:after{content:"";position:absolute;background:#ffffffc2;border-radius:999px}.crosshair:before{left:9px;top:0;width:2px;height:20px}.crosshair:after{left:0;top:9px;width:20px;height:2px}.touch-controls{position:absolute;inset:auto 0 0 0;pointer-events:none;display:flex;align-items:end;justify-content:space-between;gap:clamp(18px,5vw,72px);padding:0 clamp(18px,4vw,46px) clamp(18px,4vw,42px)}.joystick{position:relative;pointer-events:auto;width:clamp(132px,18vw,184px);height:clamp(132px,18vw,184px);border-radius:50%;cursor:grab;touch-action:none;filter:drop-shadow(0 22px 42px rgba(0,0,0,.4))}.joystick.active{cursor:grabbing}.joystick-ring{position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid rgba(255,255,255,.2);border-radius:inherit;background:radial-gradient(circle,#ffffff29 0,#ffffff29 28%,#ffffff12 29%,#ffffff12 54%,#07101c85 55%,#07101c85),linear-gradient(145deg,#69abff38,#101c2c70);box-shadow:inset 0 0 34px #94d8ff1f,inset 0 -10px 24px #0000003d;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.joystick-stick{position:absolute;left:50%;top:50%;width:58%;height:58%;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.28);border-radius:inherit;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.5),transparent 28%),linear-gradient(145deg,#ff4e4e,#9f1d1d);box-shadow:0 12px 30px #8009096b,inset 0 -8px 16px #2a040457;transition:transform 90ms ease-out}.joystick.active .joystick-stick{transition:none}.action-pad{pointer-events:auto;display:grid;grid-template-columns:repeat(4,clamp(68px,8vw,96px));grid-template-rows:repeat(2,clamp(58px,7vw,82px));gap:clamp(9px,1.5vw,14px);align-items:center;justify-content:end}.game-button{position:relative;min-width:0;min-height:0;width:100%;height:100%;border:1px solid rgba(255,255,255,.16);border-radius:22px;color:#fff;cursor:pointer;touch-action:manipulation;overflow:hidden;box-shadow:0 16px 34px #00000052,inset 0 1px #ffffff38,inset 0 -7px #00000038;transform:translateZ(0);transition:transform .12s ease,filter .12s ease,opacity .12s ease}.game-button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 36% 18%,rgba(255,255,255,.46),transparent 34%);opacity:.78}.game-button span{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;padding:8px;font-size:clamp(13px,1.6vw,18px);font-weight:950;letter-spacing:-.04em;line-height:1.05;text-shadow:0 2px 10px rgba(0,0,0,.38)}.game-button.pressed,.game-button:active{transform:translateY(4px) scale(.96);filter:brightness(1.16) saturate(1.12);box-shadow:0 8px 18px #0000004d,inset 0 1px #ffffff2e,inset 0 -3px #00000047}.game-button.cooling{opacity:.48;filter:grayscale(.35) brightness(.82)}.game-button.super{border-color:#ffd95c57}.game-button.skill{background:linear-gradient(145deg,#2b9dff,#1552c9)}.game-button.utility{background:linear-gradient(145deg,#27364c,#111a29)}.game-button.meteor{grid-column:1 / 2;grid-row:1;background:linear-gradient(145deg,#ff7b20,#b72118)}.game-button.blizzard{grid-column:2 / 3;grid-row:1;background:linear-gradient(145deg,#b7f7ff,#1685d6)}.game-button.katana{grid-column:3 / 4;grid-row:1;background:linear-gradient(145deg,#ff7aa2,#8e1bff)}.game-button.melee{grid-column:1 / 2;grid-row:2}.game-button.projectile{grid-column:2 / 3;grid-row:2;background:linear-gradient(145deg,#ffc857,#f36b19)}.game-button.shockwave{grid-column:3 / 4;grid-row:2;background:linear-gradient(145deg,#48ffe0,#1777d7)}.game-button.sprint{grid-column:4 / 5;grid-row:1}.game-button.jump{grid-column:4 / 5;grid-row:2;background:linear-gradient(145deg,#63ef7a,#1f8a38)}@media (max-width: 760px){.hud{padding:14px}.title-card{padding:10px 16px 12px}.touch-controls{align-items:end;padding:0 14px 16px;gap:12px}.joystick{width:126px;height:126px}.action-pad{grid-template-columns:repeat(4,minmax(54px,1fr));grid-template-rows:repeat(2,54px);gap:8px;flex:1;max-width:330px}.game-button{border-radius:17px}.game-button span{font-size:12px}}@media (max-width: 560px){.title-card h1{font-size:20px}.touch-controls{display:grid;grid-template-columns:116px 1fr}.joystick{width:112px;height:112px}.action-pad{grid-template-columns:repeat(4,minmax(44px,1fr));grid-template-rows:repeat(2,48px);gap:6px;max-width:none}}