:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#eef6ff;background:#05080c;--blue:#5ad7ff;--red:#ff6a6a;--glass:rgba(9,17,28,.72)}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:#05080c}canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block}.hud-panel{position:absolute;background:linear-gradient(180deg,rgba(17,30,45,.78),rgba(6,11,18,.78));border:1px solid rgba(167,220,255,.17);backdrop-filter:blur(8px);box-shadow:0 10px 40px rgba(0,0,0,.25)}#scanlines{pointer-events:none;position:absolute;inset:0;opacity:.08;background:repeating-linear-gradient(to bottom,#fff0 0,#fff0 3px,#fff 4px,#fff0 5px);mix-blend-mode:overlay}.overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,rgba(17,36,58,.78),rgba(0,0,0,.9));z-index:20}.overlay.show{display:flex}.card{width:min(720px,92vw);padding:38px 42px 34px;background:linear-gradient(180deg,rgba(12,21,31,.96),rgba(5,9,14,.96));border:1px solid rgba(117,202,255,.28);box-shadow:0 40px 120px rgba(0,0,0,.55),inset 0 0 50px rgba(71,163,255,.05);clip-path:polygon(0 0,96% 0,100% 8%,100% 100%,4% 100%,0 92%)}.card h1{font-size:clamp(52px,8vw,94px);line-height:.88;margin:8px 0 18px;letter-spacing:.04em}.card p{color:#a9bac8;font-size:17px;line-height:1.5;max-width:620px}.eyebrow{color:var(--blue);font-size:12px;letter-spacing:.22em;font-weight:800}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px 0}.grid div{padding:12px 14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);display:flex;justify-content:space-between;gap:12px}.grid b{color:#fff}.grid span{color:#7f93a3}button{width:100%;padding:16px 20px;border:0;background:linear-gradient(90deg,#44c8ff,#7de5ff);color:#042033;font-weight:900;letter-spacing:.14em;font-size:15px;cursor:pointer;box-shadow:0 0 34px rgba(68,200,255,.25)}button:hover{filter:brightness(1.08)}.foot{font-size:11px;color:#6f7f8c;margin-top:14px}.small-card{max-width:520px;text-align:center}.small-card h2{font-size:42px}
#topbar{top:18px;left:50%;transform:translateX(-50%);min-width:min(760px,80vw);height:48px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 18px;border-radius:2px}.team{display:flex;align-items:center;gap:10px;font-size:13px}.team:last-child{justify-content:flex-end}.team b{font-size:12px;letter-spacing:.14em}.team span:not(.dot){font-size:22px;font-weight:900}.team.blue{color:var(--blue)}.team.red{color:var(--red)}.dot{width:8px;height:8px;background:currentColor;box-shadow:0 0 12px currentColor}#mode{font-size:10px;color:#8198a8;letter-spacing:.2em;padding:0 26px}.fullscreen-btn{position:absolute;top:78px;right:18px;z-index:10;width:auto;padding:9px 12px;background:rgba(8,17,27,.8);border:1px solid rgba(117,202,255,.35);color:#b9eaff;font-size:10px;box-shadow:none}
#objectiveStrip{position:absolute;top:78px;left:50%;transform:translateX(-50%);display:flex;gap:12px}.obj{width:42px;height:42px;border:1px solid rgba(255,255,255,.18);background:rgba(5,10,16,.78);display:grid;place-items:center;position:relative;font-weight:900}.obj::after{content:'';position:absolute;bottom:0;left:0;height:3px;width:var(--p,0%);background:currentColor}.obj.blue{color:var(--blue)}.obj.red{color:var(--red)}.obj.neutral{color:#dce7ef}.obj.contested{box-shadow:0 0 18px rgba(255,255,255,.2)}
#leftHud{left:22px;bottom:24px;width:240px;padding:14px 16px}.label{font-size:10px;letter-spacing:.2em;color:#7390a4}.row{display:flex;justify-content:space-between;align-items:center;margin:4px 0}.row b{letter-spacing:.08em}.row span{font-size:11px;color:#88a1b2}.bar{height:9px;margin:10px 0 7px;background:#111923;border:1px solid rgba(255,255,255,.07)}#hpBar{height:100%;width:100%;background:linear-gradient(90deg,#4fddff,#8ff1ff);transition:width .15s}.small{font-size:11px}.small b{color:#fff}
#rightHud{right:22px;bottom:24px;width:210px;padding:13px 16px;text-align:right}.ammo b{font-size:40px;line-height:1}.ammo span{color:#6d8598}.weapon{font-size:10px;letter-spacing:.15em;color:#86a0b3;margin-top:2px}#reloadText{color:#ffd27a;font-size:11px;margin-top:5px;min-height:14px}
#minimapWrap{right:22px;top:84px;padding:6px;width:194px;height:194px}#minimap{width:180px;height:180px;background:rgba(2,7,12,.75)}
#crosshair{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);pointer-events:none}#crosshair i{position:absolute;background:#e8f8ff;opacity:.82}#crosshair i:nth-child(1),#crosshair i:nth-child(2){width:8px;height:1px;top:16px}#crosshair i:nth-child(1){left:0}#crosshair i:nth-child(2){right:0}#crosshair i:nth-child(3),#crosshair i:nth-child(4){width:1px;height:8px;left:16px}#crosshair i:nth-child(3){top:0}#crosshair i:nth-child(4){bottom:0}#crosshair span{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;left:15.5px;top:15.5px}
#message{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);font-weight:900;letter-spacing:.14em;text-shadow:0 2px 8px #000;opacity:0;transition:opacity .2s}.hit{animation:hit .12s}@keyframes hit{50%{transform:translate(-50%,-50%) scale(1.5)}}
@media(max-width:800px){#minimapWrap{display:none}#topbar{min-width:94vw}#leftHud{left:10px;bottom:10px;width:210px}#rightHud{right:10px;bottom:10px;width:160px}.grid{grid-template-columns:1fr 1fr}.card{padding:28px 24px}.card h1{font-size:52px}}

#killfeed{position:absolute;right:22px;top:290px;width:300px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;pointer-events:none}.feed{font-size:12px;padding:7px 10px;background:rgba(4,9,15,.72);border-right:2px solid #8ddfff;box-shadow:0 5px 18px rgba(0,0,0,.28);animation:feedin .18s ease-out}.feed.red{border-right-color:#ff777b}.feed b{color:#fff}.feed span{color:#8fa7b7}@keyframes feedin{from{opacity:0;transform:translateX(15px)}to{opacity:1;transform:none}}
#eventBanner{position:absolute;left:50%;top:18%;transform:translateX(-50%);padding:9px 22px;font-size:13px;font-weight:900;letter-spacing:.16em;background:rgba(5,11,18,.78);border:1px solid rgba(120,214,255,.28);opacity:0;transition:opacity .25s;pointer-events:none}.class-name{margin-top:7px;font-size:10px;font-weight:900;letter-spacing:.18em;color:#77dfff}#abilityText{color:#92b9ca;font-size:10px;letter-spacing:.09em;margin-top:5px}.pickup-label{position:absolute}
#crosshair.confirm i,#crosshair.confirm span{background:#7dff9d!important}#crosshair.confirm{transform:translate(-50%,-50%) scale(1.25)}

#supportText{color:#ffd27a;font-size:9px;letter-spacing:.055em;margin-top:6px;line-height:1.35} .class-name{transition:color .2s} 

#damageFlash{position:absolute;inset:0;pointer-events:none;z-index:8;opacity:0;box-shadow:inset 0 0 0 0 rgba(255,64,72,0)}
#damageFlash.pulse{animation:damagePulse .28s ease-out}
@keyframes damagePulse{0%{opacity:.78;box-shadow:inset 0 0 105px 28px rgba(255,58,69,.55)}100%{opacity:0;box-shadow:inset 0 0 35px 0 rgba(255,58,69,0)}}

#classAbilityText{color:#73e8ff;font-size:10px;letter-spacing:.08em;margin-top:4px}


/* Live leaderboard */
.leaderboard-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(920px,94vw);max-height:72vh;overflow:hidden;background:linear-gradient(180deg,rgba(7,14,23,.96),rgba(3,7,12,.96));border:1px solid rgba(123,211,255,.25);box-shadow:0 28px 90px rgba(0,0,0,.58),inset 0 0 50px rgba(73,184,255,.04);z-index:14;opacity:0;visibility:hidden;transition:opacity .12s;pointer-events:none}
.leaderboard-panel.show{opacity:1;visibility:visible}.leaderboard-head{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.08);font-size:12px;font-weight:900;letter-spacing:.18em;color:#bfeeff}.leaderboard-head small{font-size:10px;color:#6e8799;border:1px solid rgba(255,255,255,.11);padding:4px 7px}.leaderboard-columns,.leader-row{display:grid;grid-template-columns:42px minmax(145px,1.7fr) 82px 112px 48px 48px 58px 58px 70px;align-items:center;gap:6px;padding:0 14px}.leaderboard-columns{height:30px;font-size:9px;letter-spacing:.12em;color:#617c90;background:rgba(255,255,255,.025);border-bottom:1px solid rgba(255,255,255,.05)}#leaderboardRows{max-height:calc(72vh - 78px);overflow:auto}.leader-row{height:34px;font-size:11px;border-bottom:1px solid rgba(255,255,255,.04)}.leader-row.blue{border-left:2px solid #5ad7ff}.leader-row.red{border-left:2px solid #ff6a6a}.leader-row.player{background:rgba(90,215,255,.08);box-shadow:inset 0 0 22px rgba(90,215,255,.035)}.leader-row .rank{color:#7991a3;font-weight:800}.leader-row .name{font-weight:850;color:#eef8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leader-row .team-blue{color:#5ad7ff}.leader-row .team-red{color:#ff7a7d}.leader-row .role{color:#98adbc;font-size:10px;letter-spacing:.07em}.leader-row .num{text-align:center;font-variant-numeric:tabular-nums}.leader-row .pts{text-align:right;font-weight:900;color:#fff}.final-board{margin:18px -18px 20px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.2);text-align:left;max-height:310px;overflow:auto}.final-board .leaderboard-columns,.final-board .leader-row{grid-template-columns:34px minmax(105px,1.5fr) 62px 88px 34px 34px 42px 42px 54px;padding-left:8px;padding-right:8px;gap:3px}.final-board .leaderboard-columns{font-size:8px}.final-board .leader-row{font-size:9px;height:28px}.small-card{max-width:660px}
@media(max-width:760px){.leaderboard-columns,.leader-row{grid-template-columns:32px minmax(120px,1.6fr) 64px 84px 34px 34px 44px 44px 52px;padding:0 7px;gap:2px}.leader-row{font-size:9px}.leader-row .role{font-size:8px}.leaderboard-columns{font-size:7px}.leaderboard-panel{width:97vw}}