:root{
  --safe-top: env(safe-area-inset-top,0px);
  --safe-right: env(safe-area-inset-right,0px);
  --safe-bottom: env(safe-area-inset-bottom,0px);
  --safe-left: env(safe-area-inset-left,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body,#game-shell,#game{margin:0;width:100%;height:100%;overflow:hidden;background:#0b1219;touch-action:none;user-select:none;-webkit-user-select:none;font-family:Arial,sans-serif}
canvas{display:block}
button{font-family:inherit}
.hidden{display:none!important}
.screen{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:calc(18px + var(--safe-top)) calc(18px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(18px + var(--safe-left));background:linear-gradient(180deg,#071019f7,#0a111af2);color:#fff}
.select-panel{width:min(820px,96vw)}
.eyebrow{font-size:11px;font-weight:900;letter-spacing:1.2px;color:#67cbff}.select-panel h1{margin:5px 0 3px;font-size:30px}.select-panel p{margin:0 0 14px;color:#a8bac7;font-size:11px}
.legend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.legend-card{background:#111d28;border:1px solid #ffffff18;border-radius:16px;padding:12px;color:#fff;min-height:170px}.legend-card.selected{border:2px solid #60cbff;box-shadow:0 0 22px #42c9ff2f}.legend-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-weight:1000;font-size:21px;margin-bottom:8px}.legend-card h3{margin:0 0 5px}.legend-card p{font-size:9px;line-height:1.45;margin:0;color:#aebdc8}.primary-btn{width:100%;height:46px;margin-top:14px;border:0;border-radius:12px;background:#55c2ff;color:#071019;font-weight:1000}
.hud{position:fixed;inset:0;z-index:20;color:#fff;pointer-events:none;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}
.topbar{position:absolute;top:calc(10px + var(--safe-top));left:50%;transform:translateX(-50%);display:flex;gap:8px;white-space:nowrap;padding:8px 13px;border-radius:15px;background:#080d14df;border:1px solid #ffffff18;font-size:11px;font-weight:900;backdrop-filter:blur(8px)}
#status{color:#62caff}#kills{color:#ffd45e}.hero-card{position:absolute;left:calc(12px + var(--safe-left));top:calc(56px + var(--safe-top));padding:9px 10px;border-radius:13px;background:#080d14df;border:1px solid #ffffff18}.hero-name{font-size:14px;font-weight:1000}#hero-meta{font-size:9px;color:#afbdc8;margin-top:2px}.xp-track,.portal-track{height:5px;background:#27313b;border-radius:8px;overflow:hidden;margin-top:5px}.xp-track{width:145px}#xp-fill{height:100%;background:#8e71ff}.portal-meter{margin-top:6px;font-size:9px;font-weight:900;color:#dfd2ff}.portal-track{width:170px}#portal-fill{height:100%;background:#c8a4ff}.banner{position:absolute;left:50%;top:calc(65px + var(--safe-top));transform:translateX(-50%);opacity:0;transition:.15s;padding:9px 16px;border-radius:12px;background:#08101ae8;border:1px solid #ffffff18;font-size:12px;font-weight:1000;white-space:nowrap}.weapon-card{position:absolute;right:calc(12px + var(--safe-right));bottom:calc(154px + var(--safe-bottom));min-width:165px;text-align:right;background:#080d14e8;border:1px solid #ffffff18;border-radius:14px;padding:10px 12px}.weapon-card>div:first-child{font-size:15px;font-weight:1000}#weapon-class{font-size:9px;color:#71d0ff;margin-top:2px}#ammo{font-size:12px;color:#bdc9d2;margin-top:4px}.vitals{position:absolute;left:calc(12px + var(--safe-left));bottom:calc(18px + var(--safe-bottom));width:215px;background:#080d14e8;border:1px solid #ffffff18;border-radius:14px;padding:9px 10px;pointer-events:auto}.label{font-size:9px;font-weight:1000}.hp-label{margin-top:6px}.bar{height:8px;background:#26303a;border-radius:8px;overflow:hidden;margin-top:4px}.bar>div{height:100%}#shield-fill{background:#45baff}#hp-fill{background:#55df69}
.stick-pad{position:absolute;left:calc(20px + var(--safe-left));bottom:calc(88px + var(--safe-bottom));width:132px;height:132px;border-radius:50%;background:#ffffff0d;border:2px solid #ffffff24;pointer-events:auto}.stick-pad.aim{left:auto;right:calc(16px + var(--safe-right));bottom:calc(86px + var(--safe-bottom));width:142px;height:142px}.stick-knob{position:absolute;width:56px;height:56px;left:50%;top:50%;margin:-28px;border-radius:50%;background:#ffffff28;border:2px solid #ffffff4b}.round-btn{position:absolute;border-radius:50%;color:#fff;background:#172332e8;border:2px solid #ffffff48;font-weight:1000;pointer-events:auto}.fire{right:calc(48px + var(--safe-right));bottom:calc(176px + var(--safe-bottom));width:68px;height:68px;background:#ed554cca;border:3px solid #ffffffa8}.slide{right:calc(168px + var(--safe-right));bottom:calc(145px + var(--safe-bottom));width:49px;height:49px;font-size:8px}.jump{right:calc(168px + var(--safe-right));bottom:calc(91px + var(--safe-bottom));width:49px;height:49px;font-size:9px}.ability{right:calc(82px + var(--safe-right));bottom:calc(18px + var(--safe-bottom));width:58px;height:58px}.ult{right:calc(14px + var(--safe-right))}
#minimap{position:absolute;right:calc(12px + var(--safe-right));top:calc(12px + var(--safe-top));width:128px;height:128px;border-radius:13px;border:2px solid #ffffff24;background:#101820d9}
@media(max-width:700px){.legend-grid{grid-template-columns:repeat(3,1fr)}.legend-card{padding:8px;min-height:150px}.legend-card h3{font-size:12px}.legend-card p{font-size:8px}.select-panel h1{font-size:24px}}