:root{color-scheme:dark;font-family:Inter,Manrope,Arial,sans-serif;color:#eef8f6;background:#09131d;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,input{font:inherit}button{cursor:pointer}#game{position:fixed;inset:0;width:100%;height:100%;display:block;outline:0;touch-action:none}.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 43%,transparent 30%,rgba(4,12,21,.48) 100%)}.topbar{position:fixed;z-index:4;top:0;left:0;right:0;height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:linear-gradient(#0a151fbf,transparent)}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:900;font-size:21px;letter-spacing:-.04em;line-height:1}.brand small{display:block;font-size:8px;letter-spacing:.32em;color:#b5d2d2;margin-top:6px}.brand-icon{position:relative;display:grid;place-items:center;width:41px;height:41px;color:#99eff2;border:1px solid #e8c77f;border-radius:12px;background:#1e3540;box-shadow:0 0 18px #55d7d048;font-size:24px}.brand-icon i{position:absolute;font-size:11px;right:5px;top:10px;color:#ebd496;font-style:normal}.match-head{display:flex;align-items:center;gap:13px;color:#bdd4d6;font-size:10px;letter-spacing:.23em;font-weight:800}.match-head strong{font-size:19px;letter-spacing:.08em;color:#fff}.live-dot{width:7px;height:7px;background:#81f8e6;border-radius:50%;box-shadow:0 0 11px #76ffe4}.divider{opacity:.3;font-size:20px}.top-actions{display:flex;align-items:center;gap:9px}.subtle-button,.round-button{border:1px solid #8ab1bd50;background:#1a2c39b8;color:#e9faf7;backdrop-filter:blur(16px)}.subtle-button{border-radius:10px;padding:11px 14px;font-size:12px;font-weight:800}.round-button{width:39px;height:39px;border-radius:50%;font-size:18px}.subtle-button:hover,.round-button:hover{border-color:#9aeae1}.scoreboard{position:fixed;z-index:3;right:30px;top:103px;width:265px;padding:18px;background:#12232ce3;border:1px solid #9ec6c342;border-radius:17px;backdrop-filter:blur(24px);box-shadow:0 20px 70px #04111c75}.score-title,.score-foot{display:flex;justify-content:space-between;align-items:center}.score-title{font-size:10px;font-weight:900;letter-spacing:.23em;color:#b4d2d3}.score-title strong{color:#f4d08c;font-size:12px;letter-spacing:.1em}.score-list{padding:12px 0;min-height:70px}.empty-score{color:#86a7ad;font-size:12px}.score-row{display:grid;grid-template-columns:20px minmax(0,1fr) 28px 28px;gap:8px;align-items:center;padding:8px 0;border-top:1px solid #aac9c025;font-size:12px}.score-row:first-child{border-top:0}.score-row.me{color:#fff}.score-row .dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 9px currentColor}.score-row .player-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-row .kills{text-align:right;font-weight:900;color:#f5d190}.score-row .deaths{text-align:right;color:#91aeb3}.score-foot{border-top:1px solid #aac9c025;padding-top:12px;color:#85abb1;font-size:9px;font-weight:800;letter-spacing:.12em}.crosshair{position:fixed;z-index:2;left:50%;top:50%;width:24px;height:24px;transform:translate(-50%,-50%);pointer-events:none;opacity:.65}.crosshair i{position:absolute;background:#f7fbec;box-shadow:0 0 5px #fff}.crosshair i:nth-child(1){width:1px;height:7px;left:11px;top:0}.crosshair i:nth-child(2){width:1px;height:7px;left:11px;bottom:0}.crosshair i:nth-child(3){width:7px;height:1px;left:0;top:11px}.crosshair i:nth-child(4){width:7px;height:1px;right:0;top:11px}.hit-marker{position:fixed;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);color:#ffd684;pointer-events:none;opacity:0;font-size:32px;transition:opacity .16s,transform .16s}.hit-marker.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.kill-feed{position:fixed;z-index:4;left:30px;top:107px;display:grid;gap:5px;max-width:380px}.feed-item{background:#0d202bc9;border:1px solid #d8ede647;border-radius:7px;padding:8px 11px;font-size:12px;animation:feed-in .25s both}.feed-item strong{color:#f5d391}.match-tip{position:fixed;z-index:3;left:50%;top:107px;transform:translateX(-50%);background:#142b33b5;border:1px solid #93c3bd49;padding:9px 15px;border-radius:50px;color:#c9e3e1;font-size:11px;letter-spacing:.04em;white-space:nowrap;backdrop-filter:blur(18px)}.hud{position:fixed;z-index:3;left:30px;right:30px;bottom:58px;display:flex;align-items:end;justify-content:space-between;pointer-events:none}.vitals{display:flex;gap:9px}.vital,.weapon-hud,.ammo-hud{background:#112732e6;border:1px solid #9ecac34a;border-radius:13px;backdrop-filter:blur(20px);box-shadow:0 15px 50px #06101771}.vital{width:132px;padding:13px 14px}.vital span,.ammo-hud span,.weapon-kicker{display:block;font-size:9px;font-weight:900;letter-spacing:.19em;color:#9dbbc0}.vital strong{display:block;font-size:27px;line-height:1.05;margin:6px 0 8px}.meter{height:5px;border-radius:5px;background:#65868e4f;overflow:hidden}.meter i{display:block;width:100%;height:100%;background:#f0a49c;transition:width .2s}.armor .meter i{background:#7be8e0}.weapon-hud{min-width:220px;padding:13px 18px;text-align:center}.weapon-kicker b{color:#ebc781;margin-left:8px}.weapon-hud strong{display:block;font-size:23px;margin:5px 0}.weapon-hud>span:last-child{color:#7fa6ac;font-size:9px;font-weight:800;letter-spacing:.13em}.ammo-hud{width:125px;text-align:right;padding:13px 15px}.ammo-hud strong{display:block;font-size:29px;margin:5px 0}.ammo-hud small{font-size:7px;color:#8fb2b5;letter-spacing:.08em}.weapon-strip{position:fixed;z-index:4;bottom:184px;left:50%;transform:translateX(-50%);display:flex;gap:5px;padding:6px;border:1px solid #99bdbe47;border-radius:11px;background:#122633a8;backdrop-filter:blur(15px)}.weapon-button{width:34px;height:36px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid transparent;border-radius:6px;background:transparent;color:#9cbbc0}.weapon-button.active{background:#385660;border-color:#9fece1;color:#fff}.weapon-button:hover{background:#29434e}.weapon-button i{width:7px;height:7px;border-radius:50%;background:var(--gun-color);box-shadow:0 0 8px var(--gun-color)}.weapon-button b{font-size:9px}.desktop-hint{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);color:#b2cdcf;font-size:10px;font-weight:800;letter-spacing:.04em;white-space:nowrap;text-shadow:0 1px 7px #000}.desktop-hint span{display:inline-block;width:1px;height:10px;background:#a0bcbd61;margin:0 10px}.toast{position:fixed;z-index:20;left:50%;top:83px;transform:translateX(-50%);padding:10px 17px;border-radius:10px;background:#223943;color:#f7f6e8;border:1px solid #e4c99092;font-size:12px;font-weight:800;box-shadow:0 15px 60px #001}.overlay{position:fixed;z-index:10;inset:0;display:grid;place-items:center;padding:20px;background:#07131cb5;backdrop-filter:blur(12px)}.overlay[hidden]{display:none}.lobby-card,.modal-card{width:min(100%,620px);border:1px solid #aedbd05c;border-radius:24px;background:linear-gradient(145deg,#203740f4,#10232df7);box-shadow:0 25px 100px #0009;padding:38px 42px;max-height:calc(100vh - 40px);overflow:auto}.lobby-eyebrow,.color-label{font-size:10px;letter-spacing:.21em;font-weight:900;color:#c8ddce}.eyebrow-line{display:inline-block;width:16px;height:2px;background:#efc983;vertical-align:middle;margin-right:7px}.lobby-card h1{font-size:clamp(38px,7vw,67px);line-height:1;margin:22px 0 14px;letter-spacing:-.065em}.lobby-card h1 em{color:#f1cc8b;font-style:normal}.lobby-lead{color:#b9d0d1;line-height:1.55;font-size:15px;max-width:510px;margin-bottom:25px}.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.lobby-grid label{display:grid;gap:9px;color:#9dbdc0;font-size:9px;letter-spacing:.15em;font-weight:900}.lobby-grid input{width:100%;background:#0c1e29;border:1px solid #a2c5c14c;border-radius:9px;padding:13px 14px;color:#fff;outline:0;font-size:14px;font-weight:700;letter-spacing:0}.lobby-grid input:focus{border-color:#91e8db;box-shadow:0 0 0 3px #6be6d230}.color-label{margin:24px 0 12px}.color-picks{display:flex;gap:11px}.color-pick{width:38px;height:38px;border-radius:50%;border:2px solid transparent;background:var(--pick);box-shadow:0 0 14px var(--pick);opacity:.8}.color-pick.selected{outline:2px solid #f2e7c7;outline-offset:4px;opacity:1}.lobby-actions{display:flex;gap:11px;margin-top:28px}.primary-button,.ghost-button{border-radius:10px;padding:14px 20px;font-weight:900;font-size:14px}.primary-button{background:#f2ca88;border:1px solid #f6dda9;color:#122730;box-shadow:0 7px 25px #f2c37730;flex:1;text-align:left}.primary-button span{float:right}.primary-button:hover{background:#ffe0a6}.ghost-button{border:1px solid #a7cbcb64;background:#243b43;color:#d9eeee}.ghost-button:hover{background:#304b56}.lobby-status{min-height:17px;color:#abc6c8;font-size:12px;margin:14px 0 19px}.lobby-status.error{color:#ffb3a6}.lobby-bottom{display:flex;justify-content:space-between;border-top:1px solid #a4c8c446;padding-top:18px;color:#8fb1b2;font-size:9px;font-weight:900;letter-spacing:.08em}.modal{z-index:15}.modal-card{max-width:460px;position:relative}.modal-card h2{font-size:32px;margin:17px 0}.modal-card p{font-size:14px;line-height:1.55;color:#b8d0d0}.modal-card .primary-button{width:100%;margin-top:12px}.close-button{position:absolute;top:18px;right:18px;width:32px;height:32px;background:#2e4650;border:1px solid #9abebe78;color:#fff;border-radius:7px;font-size:20px}.loading{position:fixed;z-index:30;inset:0;display:grid;place-content:center;gap:11px;text-align:center;background:#101f2a;color:#fff;transition:opacity .5s}.loading strong{font-size:37px;letter-spacing:-.05em}.loading span{color:#b9d5d4;font-size:11px;font-weight:900;letter-spacing:.2em}.loading.done{opacity:0;pointer-events:none}.mobile-controls{display:none}@keyframes feed-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:850px){.topbar{height:68px;padding:0 15px}.match-head{gap:7px;font-size:8px}.top-actions .subtle-button span{display:none}.scoreboard{right:12px;top:79px;width:165px;padding:11px}.score-title{font-size:8px}.score-foot{font-size:7px}.score-row{font-size:10px;grid-template-columns:12px minmax(0,1fr) 19px 19px;gap:3px;padding:6px 0}.match-tip{top:79px;left:12px;transform:none;max-width:calc(100% - 200px);white-space:normal;font-size:9px}.kill-feed{left:12px;top:150px;max-width:170px}.feed-item{font-size:9px}.hud{left:12px;right:12px;bottom:83px}.vital{width:76px;padding:8px}.vital span,.ammo-hud span{font-size:7px}.vital strong{font-size:20px}.vitals{gap:4px}.weapon-hud{min-width:105px;padding:8px;text-align:center}.weapon-hud strong{font-size:16px}.weapon-kicker,.weapon-hud>span:last-child{font-size:7px}.ammo-hud{width:68px;padding:8px}.ammo-hud strong{font-size:21px}.ammo-hud small{display:none}.weapon-strip{bottom:155px;max-width:calc(100% - 24px);overflow:auto}.weapon-button{flex:0 0 27px;width:27px;height:31px}.desktop-hint{display:none}.mobile-controls{display:flex;position:fixed;z-index:5;bottom:12px;left:12px;right:12px;justify-content:space-between;align-items:end;pointer-events:none}.mobile-controls button{pointer-events:auto;touch-action:none;border:1px solid #b8dbd172;background:#1b3545da;color:#eef9f4;border-radius:10px;font-weight:900;min-width:42px;height:39px;box-shadow:0 8px 18px #0006}.move-pad{display:grid;justify-items:center;gap:2px}.move-pad>div{display:flex;gap:2px}.mobile-actions{display:flex;gap:7px}.mobile-actions #mobile-fire{background:#e8bd77;color:#18323a;border-color:#f6dba3;min-width:87px}.lobby-card{padding:25px 22px}.lobby-card h1{margin:16px 0 8px}.lobby-lead{font-size:13px;margin-bottom:18px}.lobby-grid{gap:8px}.lobby-bottom{font-size:7px;gap:8px}.lobby-actions{margin-top:20px}.color-label{margin:17px 0 10px}}
@media(max-width:470px){.brand{font-size:16px}.brand-icon{width:34px;height:34px;font-size:19px}.brand small{font-size:6px}.match-head{position:absolute;top:65px;left:50%;transform:translateX(-50%);background:#152b35bf;padding:6px 10px;border-radius:7px}.scoreboard{top:101px}.match-tip{top:101px}.hud{bottom:96px}.weapon-strip{bottom:169px}.mobile-controls{bottom:14px}.lobby-card{padding:22px 19px}.lobby-grid{grid-template-columns:1fr}.lobby-card h1{font-size:43px}.lobby-actions{flex-direction:column}.lobby-bottom{flex-wrap:wrap}.color-pick{width:32px;height:32px}}

/* Match setup and mode selection. */
.title-overlay{background:linear-gradient(115deg,#06141fe9,#0a2335c7 55%,#08232aad);backdrop-filter:blur(7px)}
.title-card{width:min(100%,900px);max-height:calc(100dvh - 32px);overflow:auto;padding:clamp(24px,5vw,56px);border:1px solid #b9e3dc73;border-radius:28px;background:linear-gradient(145deg,#142c38f0,#0c1d2be8);box-shadow:0 30px 100px #000a}
.title-card h1{margin:24px 0 16px;font-size:clamp(52px,8vw,105px);line-height:.91;letter-spacing:-.07em}
.title-card h1 em{font-style:normal;color:#f4ce8b}
.title-card .lobby-lead{max-width:690px;font-size:clamp(14px,1.6vw,18px)}
.mode-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:32px}
.mode-card{display:grid;justify-items:start;gap:13px;min-height:225px;padding:24px;text-align:left;border:1px solid #a5d3d36a;border-radius:18px;background:linear-gradient(140deg,#24414ddc,#142a38ec);color:#f3faf8;transition:transform .16s,border-color .16s,background .16s}
.mode-card:hover,.mode-card:focus-visible{transform:translateY(-3px);border-color:#f5d797;background:linear-gradient(140deg,#315560,#1a3543)}
.mode-card .mode-icon{display:grid;place-items:center;width:45px;height:45px;border-radius:13px;background:#d8b77e;color:#15313b;font-size:24px;font-weight:900}
.mode-card[data-mode="teams"] .mode-icon{background:linear-gradient(90deg,#e97877 50%,#77c6e8 50%);font-size:16px}
.mode-card strong{font-size:clamp(21px,2.5vw,28px);line-height:1.1;letter-spacing:-.035em}
.mode-card small{color:#b8d0d2;font-size:13px;line-height:1.45}
.mode-enter{margin-top:auto;color:#f4d092;font-size:11px;font-weight:900;letter-spacing:.14em}
.title-foot{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px;color:#9dbdbf;font-size:10px;font-weight:900;letter-spacing:.1em}
.title-foot span{color:#e9c582}
.back-button{padding:0;margin:0 0 22px;border:0;background:transparent;color:#c5e0dc;font-size:12px;font-weight:900;letter-spacing:.08em}
.back-button:hover{color:#f6d69a}
.lobby-grid select{width:100%;appearance:none;background:#0c1e29;border:1px solid #a2c5c14c;border-radius:9px;padding:13px 34px 13px 14px;color:#fff;outline:0;font-size:14px;font-weight:700;background-image:linear-gradient(45deg,transparent 50%,#e8cb93 50%),linear-gradient(135deg,#e8cb93 50%,transparent 50%);background-position:calc(100% - 19px) 19px,calc(100% - 13px) 19px;background-size:6px 6px;background-repeat:no-repeat}
.lobby-grid select:focus{border-color:#91e8db;box-shadow:0 0 0 3px #6be6d230}
.lobby-grid .map-field{grid-column:1/-1}
.team-scores{display:flex;justify-content:space-between;border-top:1px solid #aac9c025;padding-top:12px;font-size:10px;font-weight:900;letter-spacing:.08em}
.team-scores[hidden]{display:none}
.team-scores span:first-child{color:#f58d90}.team-scores span:last-child{color:#8bd7f4}
.team-scores b{font-size:16px;margin-left:6px}
.score-row.team-red{border-left:2px solid #ee7978;padding-left:4px}.score-row.team-blue{border-left:2px solid #78c6e8;padding-left:4px}
.touch-joystick{display:grid;justify-items:center;align-content:center;gap:2px;width:112px;height:112px;pointer-events:auto;touch-action:none;user-select:none}
.joystick-ring{display:grid;place-items:center;width:92px;height:92px;border:1px solid #b6dcd17d;border-radius:50%;background:#183645b9;box-shadow:inset 0 0 20px #6ddcd22b,0 8px 20px #0007}
.joystick-ring:before{content:"";position:absolute;width:54px;height:54px;border:1px dashed #b5dad37a;border-radius:50%}
.joystick-knob{position:relative;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f6dca9,#d49f5f);border:2px solid #ffe8b9;box-shadow:0 4px 18px #0009;transition:transform .035s}
.touch-joystick>span,.aim-hint{color:#d1e4df;font-size:8px;font-weight:900;letter-spacing:.1em;text-shadow:0 1px 6px #000;text-align:center}
.mobile-actions{pointer-events:none;align-items:end}.mobile-actions>*{pointer-events:auto}
.mobile-actions #mobile-fire{width:90px;height:90px;border-radius:50%;font-size:13px;box-shadow:0 0 0 5px #e8bd772a,0 8px 28px #000a}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #f5d393;outline-offset:3px}
@media(max-width:720px){.mode-cards{grid-template-columns:1fr;gap:10px;margin-top:22px}.mode-card{min-height:145px;padding:18px;gap:7px}.mode-card .mode-icon{width:35px;height:35px;font-size:18px}.title-card{padding:24px}.title-card h1{font-size:clamp(49px,11vw,72px)}.title-card .lobby-lead{margin-bottom:8px}.title-foot{font-size:8px;gap:7px}.lobby-card{max-height:calc(100dvh - 24px)}.lobby-grid{grid-template-columns:1fr 1fr}.top-actions #menu span{display:none}}
@media(max-width:470px){.lobby-grid{grid-template-columns:1fr 1fr;gap:9px}.lobby-grid label{font-size:8px}.lobby-grid input,.lobby-grid select{padding:11px 9px;font-size:12px}.lobby-grid select{padding-right:20px;background-position:calc(100% - 14px) 16px,calc(100% - 9px) 16px;background-size:5px 5px}.lobby-card h1{font-size:39px}.title-card{padding:20px}.title-card h1{margin:18px 0 12px;font-size:48px}.mode-card{min-height:128px}.mode-card strong{font-size:21px}.mode-card small{font-size:11px}.title-foot{line-height:1.4}.topbar{padding:0 10px}.top-actions{gap:4px}.top-actions .subtle-button{padding:9px 10px}.top-actions #share{display:none}}
@media(pointer:coarse){.mobile-controls{display:flex;bottom:calc(12px + env(safe-area-inset-bottom));left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right))}.desktop-hint{display:none}.hud{bottom:calc(130px + env(safe-area-inset-bottom))}.weapon-strip{bottom:calc(210px + env(safe-area-inset-bottom));max-width:calc(100% - 24px);overflow:auto}.weapon-button{flex:0 0 33px;width:33px;height:36px}.mobile-actions #mobile-fire{min-width:90px}}
@media(max-width:850px){.hud{bottom:calc(130px + env(safe-area-inset-bottom))}.weapon-strip{bottom:calc(210px + env(safe-area-inset-bottom))}.mobile-controls{bottom:calc(12px + env(safe-area-inset-bottom))}.scoreboard{max-height:160px;overflow:auto}.match-tip{max-width:calc(100% - 205px)}.aim-hint{font-size:7px}.mobile-actions #mobile-fire{height:78px;width:78px;min-width:78px}}
@media(max-height:620px) and (pointer:coarse){.scoreboard{max-height:105px}.hud{bottom:calc(105px + env(safe-area-inset-bottom))}.weapon-strip{bottom:calc(175px + env(safe-area-inset-bottom))}.touch-joystick{width:90px;height:90px}.joystick-ring{width:76px;height:76px}.mobile-actions #mobile-fire{height:68px;width:68px;min-width:68px}}
.armory-link{display:inline-flex;align-items:center;justify-content:center;margin:18px auto 0;padding:11px 16px;border:1px solid #76cbd1;border-radius:999px;background:#12333cbf;color:#ccfff4;font-size:12px;font-weight:850;text-decoration:none;box-shadow:0 0 22px #45e6dd22;transition:transform .18s,background .18s}.armory-link:hover,.armory-link:focus-visible{background:#235a63;transform:translateY(-2px);outline:2px solid #a8fff3;outline-offset:2px}@media(max-width:600px){.armory-link{font-size:11px;padding:10px 12px;margin-top:12px}}
.weapon-button.locked{opacity:.38;filter:grayscale(.85);cursor:not-allowed;background:#0a1822}.weapon-button.locked:hover{background:#172832}.weapon-button.locked i{box-shadow:none}.weapon-button.locked::after{content:'×';position:absolute;font-size:17px;line-height:1;color:#dce8e5;opacity:.75;transform:translate(9px,-8px)}.weapon-button{position:relative}
.class-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:20px 0 10px;font-size:10px;font-weight:900;letter-spacing:.16em;color:#f1d39a}.class-heading small{font-size:8px;color:#9fc8c7;letter-spacing:.06em}.class-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.class-card{display:flex;align-items:flex-start;gap:9px;min-width:0;min-height:124px;padding:10px;text-align:left;color:#eaf7f3;border:1px solid #799ba68a;border-radius:13px;background:linear-gradient(145deg,#29434bda,#0e2530e8);transition:border-color .16s,transform .16s,background .16s}.class-card:hover{transform:translateY(-2px);border-color:var(--class-color)}.class-card.selected{border-color:var(--class-color);background:linear-gradient(145deg,#34525cf0,#142f3bee);box-shadow:inset 0 0 0 1px var(--class-color),0 0 22px color-mix(in srgb,var(--class-color) 30%,transparent)}.class-avatar{position:relative;flex:none;display:grid;place-items:center;width:35px;height:48px;border-radius:17px 17px 9px 9px;background:linear-gradient(150deg,#c1d8d7,#304a58 55%,#182f3c);border:1px solid #ddf5ee8a;box-shadow:0 0 12px color-mix(in srgb,var(--class-color) 45%,transparent)}.class-avatar:before{content:"";position:absolute;top:-5px;width:21px;height:19px;border-radius:50%;background:linear-gradient(135deg,#e2eee9,#58828b);border:1px solid #ddf8f7}.class-avatar i{position:absolute;top:7px;width:17px;height:6px;border-radius:100%;background:var(--class-color);box-shadow:0 0 11px var(--class-color)}.class-avatar b{position:absolute;bottom:7px;font-size:15px;color:var(--class-color);text-shadow:0 0 8px var(--class-color)}.class-copy{min-width:0;display:grid;gap:4px}.class-copy small{font-size:8px;font-weight:900;letter-spacing:.15em;color:var(--class-color)}.class-copy strong{font-size:14px;line-height:1.06}.class-copy>span{font-size:9px;line-height:1.27;color:#b9d2d2}.class-copy>span b{color:#f6da9c}.class-copy .class-super{color:#dfe9e0}.class-copy .class-super b{color:var(--class-color)}.power-hud{position:fixed;z-index:4;left:50%;bottom:236px;transform:translateX(-50%);display:flex;align-items:stretch;gap:5px;padding:5px;border:1px solid #8fbfc35c;border-radius:12px;background:#102633da;backdrop-filter:blur(14px);box-shadow:0 12px 30px #0008}.power-identity{display:grid;align-content:center;min-width:92px;padding:4px 8px}.power-identity span{font-size:8px;font-weight:900;letter-spacing:.13em;color:#a2d8d3}.power-identity strong{font-size:12px;white-space:nowrap}.power-button{position:relative;overflow:hidden;display:grid;gap:3px;min-width:115px;padding:7px 10px;border:1px solid #8dbbc282;border-radius:8px;background:#25444c;color:#e8fbf6;text-align:left}.power-button>span,.power-button>strong{position:relative;z-index:1}.power-button>span{font-size:9px;white-space:nowrap}.power-button>span b{color:#f9dc9d}.power-button>strong{font-size:10px;letter-spacing:.06em;color:#aef2cf}.power-button:disabled{opacity:.6;cursor:default}.super-button{border-color:#e4b76e95;background:#4a3c36}.super-button i{position:absolute;left:0;bottom:0;height:100%;width:0;background:linear-gradient(90deg,#b3704b77,#f1d08599);transition:width .2s}.super-button:not(:disabled){box-shadow:0 0 15px #facd6677}.mobile-power{display:none}@media(max-width:720px){.class-card{min-height:134px}.power-hud{bottom:252px}.power-identity{min-width:75px}.power-button{min-width:92px}}@media(max-width:470px){.class-heading{display:grid;gap:4px}.class-card{padding:8px;gap:6px;min-height:166px}.class-avatar{width:27px;height:37px}.class-avatar:before{width:17px;height:15px}.class-avatar i{width:14px}.class-avatar b{font-size:12px}.class-copy strong{font-size:13px}.class-copy>span{font-size:10px;line-height:1.2}.power-hud{left:12px;right:12px;bottom:225px;transform:none;justify-content:center}.power-identity{min-width:70px;padding:4px}.power-identity strong{font-size:9px}.power-button{min-width:0;flex:1;padding:5px}.power-button>span,.power-button>strong{font-size:8px}}@media(max-width:850px){.mobile-actions .mobile-power{display:block;min-width:48px;width:48px;height:48px;border-radius:50%;background:#325c63;border-color:#8de3db;font-size:12px;color:#eafff8}.mobile-actions #mobile-super{background:#6a4b38;border-color:#e8bd77}.mobile-actions .mobile-power:disabled{opacity:.5}.mobile-actions .aim-hint{display:none}}@media(pointer:coarse){.mobile-actions .mobile-power{display:block;min-width:48px;width:48px;height:48px;border-radius:50%;background:#325c63;border-color:#8de3db;font-size:12px;color:#eafff8}.mobile-actions #mobile-super{background:#6a4b38;border-color:#e8bd77}.mobile-actions .mobile-power:disabled{opacity:.5}.mobile-actions .aim-hint{display:none}}@media(max-height:620px) and (pointer:coarse){.power-hud{bottom:196px}.power-identity{display:none}.mobile-actions .mobile-power{width:40px;height:40px;min-width:40px;font-size:10px}}@media(prefers-reduced-motion:reduce){.class-card,.super-button i{transition:none}}
/* Magazine and reserve ammunition */
.ammo-hud{width:158px;pointer-events:auto;text-align:left}
.ammo-count{display:flex;align-items:baseline;gap:7px;margin:5px 0 4px;white-space:nowrap}
.ammo-count strong{display:inline;margin:0;font-size:28px;color:#fff}
.ammo-count b{font-size:17px;color:#759ca3}
.ammo-count em{font-size:18px;font-style:normal;font-weight:800;color:#c0ddd4}
.reload-button{width:100%;padding:6px 5px;border:1px solid #90d8d063;border-radius:7px;background:#315760;color:#edfff8;font-size:9px;font-weight:900;letter-spacing:.05em;cursor:pointer}
.reload-button:disabled{opacity:.48;cursor:default}
#reload-status{display:block;margin-top:5px;color:#9acbc8;font-size:8px;letter-spacing:.04em}
@media(max-width:850px){.ammo-hud{width:87px;text-align:center;padding:8px 5px}.ammo-hud span{font-size:6px;letter-spacing:.08em}.ammo-count{justify-content:center;gap:3px;margin:4px 0}.ammo-count strong{font-size:19px}.ammo-count b{font-size:12px}.ammo-count em{font-size:13px}.reload-button{display:none}#reload-status{font-size:7px;line-height:1.1;letter-spacing:0;margin-top:3px}.mobile-actions #mobile-reload{background:#3b5267;border-color:#a6c9ed}}
@media(max-width:470px){.ammo-hud{width:83px}.mobile-actions{gap:5px}.mobile-actions .mobile-power{width:43px;min-width:43px;height:43px}.mobile-actions #mobile-fire{min-width:70px;font-size:11px}}
/* Class portraits echo the six distinct 3D silhouettes. */
.class-card .class-avatar::after{content:"";position:absolute;pointer-events:none}
.class-card[data-class-id="assault_dash"] .class-avatar::after{width:53px;height:28px;top:17px;left:-10px;background:linear-gradient(135deg,transparent 21%,#ec9b75 22% 35%,transparent 36% 64%,#ec9b75 65% 78%,transparent 79%);clip-path:polygon(0 25%,50% 85%,100% 25%,80% 100%,20% 100%);opacity:.8}
.class-card[data-class-id="assault_overdrive"] .class-avatar{width:42px;border-radius:15px 15px 9px 9px;box-shadow:0 0 0 4px #c76a7666,0 0 15px #f4737488}.class-card[data-class-id="assault_overdrive"] .class-avatar::after{width:16px;height:16px;border-radius:50%;background:#f47374;bottom:4px;left:50%;transform:translateX(-50%);box-shadow:0 0 11px #ff7373}
.class-card[data-class-id="medic_pulse"] .class-avatar::before{border:2px solid #83ebbb;box-shadow:0 0 10px #77e8bc}.class-card[data-class-id="medic_pulse"] .class-avatar::after{content:"✚";display:grid;place-items:center;width:17px;height:17px;border-radius:5px;background:#d6f5e3;color:#3e8876;font-size:13px;bottom:3px;left:50%;transform:translateX(-50%)}
.class-card[data-class-id="medic_field"] .class-avatar::after{width:40px;height:25px;left:-3px;bottom:1px;background:linear-gradient(90deg,#6fcbbf 0 17%,transparent 17% 38%,#7ad5c5 38% 61%,transparent 61% 83%,#6fcbbf 83%);border-radius:8px;opacity:.85}
.class-card[data-class-id="support_armor"] .class-avatar{width:42px;border-radius:13px 13px 8px 8px;box-shadow:0 0 0 3px #78a9d576,0 0 13px #8bbcf98a}.class-card[data-class-id="support_armor"] .class-avatar::after{width:22px;height:19px;left:50%;bottom:2px;transform:translateX(-50%);background:#9bc7e1a8;clip-path:polygon(50% 0,100% 23%,91% 74%,50% 100%,9% 74%,0 23%)}
.class-card[data-class-id="support_ammo"] .class-avatar::after{width:40px;height:26px;left:-3px;bottom:0;background:linear-gradient(90deg,#ae95d9 0 19%,transparent 19% 80%,#ae95d9 80%);border-radius:9px}.class-card[data-class-id="support_ammo"] .class-avatar{box-shadow:0 -7px 0 -5px #c5aaf0,0 0 12px #c5aaf08a}
@media(max-width:470px){.class-card[data-class-id="assault_overdrive"] .class-avatar,.class-card[data-class-id="support_armor"] .class-avatar{width:32px}.class-card[data-class-id="assault_dash"] .class-avatar::after{width:41px;left:-7px}}
.class-avatar b{z-index:1}
.heroes-link{display:inline-flex;align-items:center;margin:11px 0 17px;padding:9px 12px;border:1px solid #9cdbd478;border-radius:9px;color:#d7fff7;background:#1c4549a8;font-size:11px;font-weight:850;text-decoration:none}.heroes-link:hover,.heroes-link:focus-visible{border-color:#b5fff1;background:#255b60;outline:none}@media(max-width:470px){.heroes-link{font-size:10px;margin:8px 0 13px}}

/* Control scheme is selected in the lobby or help panel, independent of viewport width. */
.device-detection{margin:9px 0 0;color:#a7d7cf;font-size:11px;font-weight:750;letter-spacing:.02em}
.hit-confirm{position:fixed;z-index:4;left:50%;top:calc(50% + 28px);transform:translateX(-50%) translateY(5px);pointer-events:none;color:#b8ffe7;font-size:12px;font-weight:950;letter-spacing:.12em;text-shadow:0 2px 8px #001;opacity:0;transition:opacity .15s,transform .15s}
.hit-confirm.show{opacity:1;transform:translateX(-50%) translateY(0)}
.hit-confirm.headshot{color:#ffd98c;font-size:15px}
.help-control-label{display:grid;gap:8px;color:#b9d8d4;font-size:10px;font-weight:850;letter-spacing:.1em;margin-top:16px}
.help-control-label select{width:100%;padding:12px 14px;border:1px solid #9fc9c568;border-radius:9px;background:#102a35;color:#f2fbf7;font:inherit;letter-spacing:0}
body[data-control-scheme="desktop"] .mobile-controls{display:none}
body[data-control-scheme="touch"] .mobile-controls{display:flex;position:fixed;z-index:5;bottom:calc(12px + env(safe-area-inset-bottom));left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));justify-content:space-between;align-items:end;pointer-events:none}
body[data-control-scheme="touch"] .mobile-actions{display:flex;gap:7px}
body[data-control-scheme="touch"] .mobile-controls button{pointer-events:auto;touch-action:none;border:1px solid #b8dbd172;background:#1b3545da;color:#eef9f4;border-radius:10px;font-weight:900;min-width:42px;height:39px;box-shadow:0 8px 18px #0006}
body[data-control-scheme="touch"] .mobile-actions #mobile-fire{height:90px;min-width:90px;background:#e8bd77;color:#18323a;border-color:#f6dba3}
body[data-control-scheme="touch"] .mobile-actions .mobile-power{display:block;min-width:48px;width:48px;height:48px;border-radius:50%;background:#325c63;border-color:#8de3db;font-size:12px;color:#eafff8}
body[data-control-scheme="touch"] .mobile-actions #mobile-super{background:#6a4b38;border-color:#e8bd77}
body[data-control-scheme="touch"] .mobile-actions .mobile-power:disabled{opacity:.5}
body[data-control-scheme="touch"] .mobile-actions .aim-hint{display:none}
body[data-control-scheme="touch"] .desktop-hint{display:none}
body[data-control-scheme="touch"] .hud{bottom:calc(130px + env(safe-area-inset-bottom))}
body[data-control-scheme="touch"] .weapon-strip{bottom:calc(210px + env(safe-area-inset-bottom));max-width:calc(100% - 24px);overflow:auto}
@media(max-width:850px){body[data-control-scheme="desktop"] .hud{bottom:58px}body[data-control-scheme="desktop"] .weapon-strip{bottom:155px}body[data-control-scheme="desktop"] .desktop-hint{display:block;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis}}
@media(max-width:470px){body[data-control-scheme="touch"] .mobile-actions .mobile-power{width:43px;min-width:43px;height:43px}body[data-control-scheme="touch"] .mobile-actions #mobile-fire{width:70px;min-width:70px;height:70px}}
@media(max-height:620px){body[data-control-scheme="touch"] .mobile-actions .mobile-power{width:40px;min-width:40px;height:40px;font-size:10px}body[data-control-scheme="touch"] .hud{bottom:calc(105px + env(safe-area-inset-bottom))}body[data-control-scheme="touch"] .weapon-strip{bottom:calc(175px + env(safe-area-inset-bottom))}}

/* One equipped weapon and discoverable public matches. */
.equipped-weapon{display:flex;align-items:center;gap:11px;min-width:200px;padding:9px 14px;border:1px solid color-mix(in srgb,var(--gun-color) 70%,#fff);border-radius:12px;background:linear-gradient(120deg,#102734e8,#214048e8);box-shadow:0 0 20px color-mix(in srgb,var(--gun-color) 30%,transparent);color:#f8fffa}
.equipped-weapon::before{content:'✦';font-size:20px;color:var(--gun-color);text-shadow:0 0 12px var(--gun-color)}
.equipped-weapon strong{font-size:12px;white-space:nowrap}.equipped-weapon span{font-size:9px;color:#b6d8d5;max-width:155px;line-height:1.2}
.public-rooms-panel{margin:18px 0 0;padding:15px;border:1px solid #71ccd983;border-radius:15px;background:linear-gradient(145deg,#16404add,#112833e8);box-shadow:inset 0 1px #bff5eb21,0 12px 28px #0004}
.public-rooms-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.public-rooms-heading span{font-size:9px;font-weight:900;letter-spacing:.15em;color:#6de8d5}.public-rooms-heading h2{margin:3px 0 0;font-size:20px;color:#f2fffa}.public-rooms-heading button{padding:8px 12px;font-size:10px}
#public-rooms-status{margin:10px 0;color:#b5dad8;font-size:11px}.public-rooms-list{display:grid;gap:8px;max-height:230px;overflow:auto}
.public-room{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:1px solid #7eb6ba70;border-radius:10px;background:#12333aaf}.public-room strong{display:block;font-size:13px;color:#fff}.public-room small{display:block;margin-top:3px;color:#aad2d0;font-size:10px;line-height:1.4}.public-room .room-capacity{font-weight:900;color:#b8f9df}.public-room.full .room-capacity{color:#ffd19d}.public-room button{padding:8px 11px;border:1px solid #a1eddb;border-radius:8px;background:#28655f;color:#f5fffa;font-size:10px;font-weight:900;cursor:pointer}.public-room button:hover:not(:disabled),.public-room button:focus-visible{background:#3e887d;outline:2px solid #d4fff0;outline-offset:2px}.public-room button:disabled{opacity:.5;cursor:default}
@media(max-width:540px){.public-rooms-panel{padding:11px}.public-rooms-heading h2{font-size:16px}.public-room{grid-template-columns:1fr auto}.public-room small{font-size:9px}.equipped-weapon{min-width:0;max-width:220px;padding:7px 9px;gap:6px}.equipped-weapon span{font-size:8px;max-width:105px}}

/* Compact combat HUD: one weapon readout, aligned vitals and ability controls. */
.topbar{height:64px;padding:0 18px}
.brand{font-size:18px;gap:8px}.brand-icon{width:34px;height:34px;font-size:19px}
.top-actions{gap:5px}.top-actions .subtle-button{padding:8px 10px;font-size:10px}.top-actions .round-button{width:34px;height:34px;font-size:15px}
.scoreboard{top:76px;right:18px;width:220px;padding:11px 13px;border-radius:12px}.score-list{padding:6px 0;min-height:35px}.score-row{padding:5px 0}.score-foot{padding-top:7px}
.score-list{max-height:min(42vh,350px);overflow-y:auto;scrollbar-width:thin}.team-scores small{font-size:10px;color:#d9e8e5;font-weight:800;letter-spacing:0}
@media(max-width:850px){.score-list{max-height:min(31vh,220px)}}
.match-tip{top:77px;padding:6px 10px;font-size:10px}.kill-feed{top:76px;left:18px;max-width:270px}
.hud{left:18px;right:18px;bottom:44px;display:grid;grid-template-columns:auto minmax(128px,190px) auto;align-items:end;gap:8px}
.vitals{gap:5px}.vital{width:86px;padding:8px 9px}.vital span,.ammo-hud span,.weapon-kicker{font-size:7px;letter-spacing:.09em}.vital strong{font-size:21px;margin:4px 0 5px}.meter{height:4px}
.stamina .meter i{background:linear-gradient(90deg,#f3c87e,#fff0ac)}.stamina.depleted .meter i{background:#ef897f}.stamina strong{color:#f8dda1}
.weapon-hud{min-width:0;padding:8px 10px}.weapon-hud strong{font-size:17px;margin:3px 0}.weapon-hud>span:last-child{font-size:7px;letter-spacing:.04em}
.ammo-hud{width:120px;padding:8px 9px}.ammo-count{margin:3px 0}.ammo-count strong{font-size:23px}.ammo-count em{font-size:15px}.reload-button{padding:4px;font-size:8px}
.weapon-strip{display:none}.power-hud{bottom:151px;gap:4px;padding:4px}.power-identity{min-width:75px;padding:2px 5px}.power-identity strong{font-size:10px}.power-button{min-width:95px;padding:5px 7px;gap:2px}.power-button>span{font-size:8px}.power-button>strong{font-size:9px}
.desktop-hint{bottom:11px;font-size:9px;letter-spacing:0}.desktop-hint span{margin:0 5px}
body[data-control-scheme="touch"] .mobile-controls{bottom:calc(8px + env(safe-area-inset-bottom));left:calc(8px + env(safe-area-inset-left));right:calc(8px + env(safe-area-inset-right));align-items:end}
body[data-control-scheme="touch"] .mobile-actions{display:grid;grid-template-columns:repeat(3,42px) 66px;grid-template-rows:42px 42px;gap:4px;align-items:center}
body[data-control-scheme="touch"] .mobile-actions .aim-hint{display:none}
body[data-control-scheme="touch"] .mobile-actions .mobile-power{width:42px;min-width:42px;height:42px;border-radius:10px;font-size:13px}
body[data-control-scheme="touch"] #mobile-ability{grid-column:1;grid-row:1}
body[data-control-scheme="touch"] #mobile-super{grid-column:2;grid-row:1}
body[data-control-scheme="touch"] #mobile-reload{grid-column:3;grid-row:1}
body[data-control-scheme="touch"] #mobile-sprint{grid-column:1;grid-row:2;background:#35666c;border-color:#83e4dc}
body[data-control-scheme="touch"] #mobile-jump{grid-column:2;grid-row:2;background:#4a6074;border-color:#a4d0f1}
body[data-control-scheme="touch"] .mobile-actions #mobile-fire{grid-column:4;grid-row:1 / 3;width:66px;min-width:66px;height:76px;border-radius:50%;font-size:10px}
body[data-control-scheme="touch"] .mobile-actions .pressed{background:#6ab4af!important;box-shadow:0 0 14px #a8fff0a8}
body[data-control-scheme="touch"] .touch-joystick{width:88px;height:88px}.touch-joystick .joystick-ring{width:72px;height:72px}.touch-joystick .joystick-knob{width:34px;height:34px}
body[data-control-scheme="touch"] .hud{bottom:calc(106px + env(safe-area-inset-bottom))}
body[data-control-scheme="touch"] .power-hud{bottom:calc(195px + env(safe-area-inset-bottom))}
@media(max-width:850px){.topbar{height:57px;padding:0 9px}.brand{font-size:15px}.brand-icon{width:30px;height:30px;font-size:17px}.match-head{font-size:8px;gap:5px}.match-head strong{font-size:14px}.top-actions .subtle-button{padding:7px}.top-actions .round-button{width:30px;height:30px}.scoreboard{top:66px;right:8px;width:154px;padding:7px;max-height:130px}.match-tip{top:67px;left:8px;transform:none;max-width:calc(100% - 174px);white-space:normal;font-size:8px}.kill-feed{top:118px;left:8px;max-width:148px}.hud{left:8px;right:8px;grid-template-columns:auto minmax(80px,1fr) auto;gap:4px}.vitals{gap:3px}.vital{width:65px;padding:5px}.vital span{font-size:6px;letter-spacing:0}.stamina span{font-size:5px}.vital strong{font-size:17px}.weapon-hud{padding:5px}.weapon-hud strong{font-size:13px}.weapon-hud>span:last-child{display:none}.ammo-hud{width:66px;padding:5px}.ammo-count strong{font-size:16px}.ammo-count em{font-size:11px}.ammo-hud span{font-size:5px}.reload-button{display:none}#reload-status{font-size:6px}.power-hud{bottom:137px}.power-identity{display:none}.power-button{min-width:88px}.desktop-hint{display:none}}
@media(max-width:470px){.match-head{top:54px;left:50%;transform:translateX(-50%);padding:4px 7px}.scoreboard{top:87px}.match-tip{top:88px}.top-actions #share{display:none}.hud{grid-template-columns:auto minmax(73px,1fr) auto}.vital{width:55px;padding:4px}.vital strong{font-size:15px}.vital span{font-size:5px}.stamina span{font-size:4.5px}.weapon-hud strong{font-size:12px}.ammo-hud{width:61px}.ammo-count{gap:2px}.ammo-count strong{font-size:15px}.ammo-count em{font-size:10px}.power-hud{left:50%;right:auto;transform:translateX(-50%);bottom:128px}.power-button{min-width:85px}}
@media(max-width:470px){body[data-control-scheme="touch"] .hud{bottom:calc(104px + env(safe-area-inset-bottom))}body[data-control-scheme="touch"] .power-hud{bottom:calc(183px + env(safe-area-inset-bottom))}}
@media(max-height:620px){body[data-control-scheme="touch"] .hud{bottom:calc(97px + env(safe-area-inset-bottom))}body[data-control-scheme="touch"] .power-hud{bottom:calc(173px + env(safe-area-inset-bottom))}}
/* Keep the middle of the screen clear for aiming and the jumping character. */
.power-hud{top:113px;bottom:auto}
body[data-control-scheme="touch"] .power-hud{top:113px;bottom:auto}
@media(max-width:850px){.power-hud,body[data-control-scheme="touch"] .power-hud{top:111px;bottom:auto}}
@media(max-width:470px){.power-hud,body[data-control-scheme="touch"] .power-hud{top:130px;bottom:auto;left:8px;right:auto;transform:none}.kill-feed{top:182px}}
@media(max-width:470px){.vital{width:60px}.stamina span{font-size:6px;letter-spacing:-.05em}}

/* Match openings and endings are visual only; the server controls match phase. */
.cinematic{position:fixed;z-index:8;inset:0;display:grid;place-items:center;overflow:hidden;pointer-events:none;text-align:center;color:#fff}
.cinematic[hidden]{display:none}
.cinematic-kicker{display:block;color:#cae8df;font-size:clamp(10px,1vw,13px);font-weight:900;letter-spacing:.31em}
.cinematic-rule{display:block;width:min(68vw,350px);height:2px;margin:17px auto;background:linear-gradient(90deg,transparent,#a8f5eb,#f3d290,transparent);box-shadow:0 0 18px #9ef4e1}
.cinematic-start{background:radial-gradient(ellipse at center,#132c3e7a 0%,#061521ad 80%);animation:start-veil 2.3s ease-out both}
.cinematic-start:before,.cinematic-start:after{content:"";position:absolute;width:75vmax;height:75vmax;border:1px solid #9de9e377;border-radius:50%;box-shadow:0 0 75px #87efe13c,inset 0 0 70px #8ee9df33;animation:start-ring 2.3s cubic-bezier(.15,.55,.3,1) both}
.cinematic-start:after{animation-delay:.12s;border-color:#f3d59766}
.cinematic-start-card{position:relative;z-index:1;width:min(90vw,720px);padding:26px 10px;text-shadow:0 4px 30px #07111e;animation:start-card 2.3s ease-out both}
.cinematic-start-card strong{display:block;font-size:clamp(76px,14vw,170px);font-weight:1000;line-height:.86;letter-spacing:-.075em;color:#fff4d2;text-shadow:0 0 32px #f9ca73a8,0 6px 28px #07111e}
.cinematic-map{font-size:clamp(13px,1.6vw,19px);font-weight:900;letter-spacing:.2em;color:#b3fff0}
.cinematic-result{--result-color:#ded0ff;background:radial-gradient(ellipse at center,#1f2948e8 0%,#07111fee 75%);animation:result-veil .7s ease-out both}
.cinematic-result[data-outcome="victory"]{--result-color:#ffe4a0;background:radial-gradient(ellipse at center,#526649e3 0%,#0c2235ec 77%)}
.cinematic-result[data-outcome="defeat"]{--result-color:#ff9e9d;background:radial-gradient(ellipse at center,#563138e6 0%,#0b1422ee 78%)}
.result-rays{position:absolute;inset:-55%;background:repeating-conic-gradient(from 0deg,transparent 0deg 15deg,color-mix(in srgb,var(--result-color) 17%,transparent) 18deg 20deg,transparent 23deg 45deg);opacity:.58;animation:result-rays 20s linear infinite}
.result-card{position:relative;z-index:1;width:min(88vw,760px);padding:40px 36px 44px;border:1px solid color-mix(in srgb,var(--result-color) 55%,transparent);border-radius:27px;background:linear-gradient(155deg,#142f40eb,#0d1e2ceb);box-shadow:0 0 90px color-mix(in srgb,var(--result-color) 35%,transparent),0 25px 90px #0008;animation:result-card .75s cubic-bezier(.18,.85,.25,1.15) both}
.result-card strong{display:block;margin:11px 0 4px;color:var(--result-color);font-size:clamp(50px,10vw,112px);font-weight:1000;line-height:.95;letter-spacing:-.065em;text-shadow:0 0 35px color-mix(in srgb,var(--result-color) 65%,transparent)}
.result-card #result-subtitle{display:block;font-size:clamp(15px,2vw,22px);font-weight:800;color:#e4f6f3}
.result-card b{display:block;font-size:clamp(19px,3vw,31px);letter-spacing:.09em}
.result-card small{display:block;margin-top:22px;color:#9bc6c5;font-size:10px;font-weight:900;letter-spacing:.13em}
.result-particles{position:absolute;inset:0}
.result-particles i{position:absolute;top:-8%;left:calc(8% + var(--n)*8%);width:7px;height:18px;border-radius:3px;background:var(--result-color);box-shadow:0 0 12px var(--result-color);animation:result-fall calc(3s + var(--n)*.18s) linear infinite;animation-delay:calc(var(--n)*-.23s)}
.result-particles i:nth-child(1){--n:0}.result-particles i:nth-child(2){--n:1}.result-particles i:nth-child(3){--n:2}.result-particles i:nth-child(4){--n:3}.result-particles i:nth-child(5){--n:4}.result-particles i:nth-child(6){--n:5}.result-particles i:nth-child(7){--n:6}.result-particles i:nth-child(8){--n:7}.result-particles i:nth-child(9){--n:8}.result-particles i:nth-child(10){--n:9}.result-particles i:nth-child(11){--n:10}.result-particles i:nth-child(12){--n:11}
.cinematic-result[data-outcome="defeat"] .result-particles{opacity:.25}.cinematic-result[data-outcome="draw"] .result-particles{opacity:.55}
.title-overlay:not([hidden]) .title-card{animation:title-enter .8s cubic-bezier(.2,.8,.25,1) both}
.title-overlay:not([hidden]) .mode-card{animation:title-enter .7s cubic-bezier(.2,.8,.25,1) both}.title-overlay:not([hidden]) .mode-card:nth-child(1){animation-delay:.13s}.title-overlay:not([hidden]) .mode-card:nth-child(2){animation-delay:.23s}
.loading strong{animation:loading-glow 1.3s ease-in-out infinite alternate}
@keyframes start-veil{0%{opacity:0}12%{opacity:1}72%{opacity:1}100%{opacity:0}}
@keyframes start-ring{0%{transform:scale(.18);opacity:0}15%{opacity:.9}85%{opacity:.45}100%{transform:scale(1.6);opacity:0}}
@keyframes start-card{0%{transform:scale(.65) translateY(40px);opacity:0}17%{transform:scale(1.08);opacity:1}30%{transform:scale(1)}74%{transform:scale(1);opacity:1}100%{transform:scale(1.08);opacity:0}}
@keyframes result-veil{from{opacity:0}to{opacity:1}}
@keyframes result-card{from{transform:translateY(42px) scale(.84);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes result-rays{to{transform:rotate(360deg)}}
@keyframes result-fall{to{transform:translate3d(18vw,118vh,0) rotate(540deg)}}
@keyframes title-enter{from{transform:translateY(30px) scale(.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes loading-glow{to{text-shadow:0 0 22px #a8f5e8,0 0 45px #75d9d3}}
@media(max-width:600px){.result-card{padding:28px 17px 31px}.result-card strong{font-size:clamp(37px,11vw,62px)}.result-card small{font-size:8px;line-height:1.4}.cinematic-rule{margin:12px auto}.result-particles i{width:5px;height:12px}}
@media(prefers-reduced-motion:reduce){.cinematic,.cinematic:before,.cinematic:after,.cinematic-start-card,.result-rays,.result-card,.result-particles i,.title-overlay:not([hidden]) .title-card,.title-overlay:not([hidden]) .mode-card,.loading strong{animation:none!important}}
.revive-status{position:fixed;z-index:5;left:50%;bottom:122px;transform:translateX(-50%);max-width:min(88vw,460px);padding:9px 14px;border:1px solid #f4d77d9c;border-radius:10px;background:#203c40ea;color:#fff3cb;box-shadow:0 12px 34px #0009;font-size:11px;font-weight:900;letter-spacing:.07em;text-align:center;pointer-events:none}.revive-status[hidden],#mobile-revive[hidden]{display:none!important}.mobile-actions #mobile-revive{background:#4f765b;border-color:#baf7bf;color:#efffed}@media(max-width:700px){.revive-status{bottom:calc(113px + env(safe-area-inset-bottom));font-size:9px;padding:7px 10px;max-width:75vw}}
.lobby-grid label[hidden]{display:none!important}

/* Premium arena identity: dark lacquer, restrained gold, and bright signal cyan. */
:root{--premium-ink:#080f1e;--premium-panel:#101c2be8;--premium-panel-strong:#0a1726f2;--premium-line:#bfcfda42;--premium-gold:#e9c88b;--premium-gold-light:#fff0c6;--premium-cyan:#8ee3e1;--premium-muted:#a9c1cc}
body{background:var(--premium-ink)}
.vignette{background:radial-gradient(ellipse at 50% 40%,transparent 22%,#060c19b8 100%)}
.title-overlay{background:radial-gradient(circle at 13% 10%,#3569805c 0,transparent 37%),radial-gradient(circle at 91% 84%,#d6ac6342 0,transparent 35%),linear-gradient(120deg,#050d1aea,#0a1b2ae5 50%,#081320e9);backdrop-filter:blur(12px)}
.title-overlay:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.24;background-image:linear-gradient(#b9d4df11 1px,transparent 1px),linear-gradient(90deg,#b9d4df11 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.title-card{position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,.8fr);column-gap:clamp(28px,4vw,62px);row-gap:18px;width:min(100%,1180px);max-height:calc(100dvh - 44px);padding:clamp(28px,4vw,58px);border:1px solid #d2e0e870;border-radius:26px;background:linear-gradient(142deg,#1a3040f4 0%,#0d1d2ef7 48%,#091725f4 100%);box-shadow:0 35px 100px #000b,0 0 0 1px #050a11,inset 0 1px #ffffff3a;isolation:isolate;scrollbar-color:#9dc6cf78 transparent}
.title-card:before{content:"";position:absolute;inset:8px;border:1px solid #cae0e422;border-radius:20px;pointer-events:none;z-index:-1}
.title-card:after{content:"";position:absolute;left:38px;top:0;width:98px;height:2px;background:linear-gradient(90deg,transparent,var(--premium-gold-light),transparent);box-shadow:0 0 23px #f3d69999;pointer-events:none}
.title-main{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.title-card .lobby-eyebrow{color:#b8d6df;line-height:1.5;font-size:9px;letter-spacing:.19em}
.title-card h1{position:relative;margin:clamp(18px,3.5vw,42px) 0 16px;font-size:clamp(56px,7.8vw,102px);line-height:.89;font-weight:900;letter-spacing:-.072em;text-wrap:balance;text-shadow:0 9px 32px #010915b3}
.title-card h1 em{display:inline-block;margin-top:8px;color:var(--premium-gold-light);text-shadow:0 0 32px #f3cf8d58}
.title-card .lobby-lead{max-width:580px;margin:8px 0 24px;color:#c0d5db;font-size:clamp(13px,1.3vw,16px);line-height:1.65}
.mode-cards{width:100%;gap:12px;margin-top:auto}
.mode-card{position:relative;isolation:isolate;overflow:hidden;min-height:206px;padding:20px;border:1px solid #b3cdd16b;border-radius:14px;background:linear-gradient(155deg,#2c4652ef,#172b3bf4 65%,#102435f6);box-shadow:inset 0 1px #ffffff23,0 14px 32px #0004;transition:transform .2s,border-color .2s,box-shadow .2s}
.mode-card:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 45%,#ffffff0a 50%,transparent 55%),radial-gradient(circle at 100% 0,#9ddce329,transparent 45%);pointer-events:none;z-index:-1}
.mode-card:after{content:"";position:absolute;bottom:0;left:18px;right:18px;height:2px;background:linear-gradient(90deg,var(--premium-gold),transparent);opacity:.5;transition:opacity .2s}
.mode-card[data-mode="teams"]:after{background:linear-gradient(90deg,#e9847d,#86d7ed,transparent)}
.mode-card:hover,.mode-card:focus-visible{transform:translateY(-4px);border-color:var(--premium-gold-light);box-shadow:inset 0 1px #ffffff48,0 20px 42px #0008,0 0 28px #e5c38825;background:linear-gradient(155deg,#355967,#193448 65%,#102a3a)}
.mode-card:hover:after,.mode-card:focus-visible:after{opacity:1}
.mode-card .mode-icon{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,#f7e3ad,#b9945a);box-shadow:0 4px 18px #eac98944}
.mode-card[data-mode="teams"] .mode-icon{background:linear-gradient(120deg,#f19089 45%,#9dd9eb 55%);box-shadow:0 4px 18px #8dd4e750}
.mode-card strong{font-size:clamp(19px,1.8vw,25px);letter-spacing:-.04em}
.mode-card small{font-size:12px;color:#bdd4d8}
.mode-enter{align-self:end;color:var(--premium-gold-light);font-size:10px;font-weight:900;letter-spacing:.19em}
.armory-link{margin-top:22px;color:#a5e3de;text-decoration-color:#a5e3de80;text-underline-offset:5px;font-size:11px;font-weight:800}
.armory-link:hover{color:#f3ead6}
.title-foot{grid-column:1/-1;margin-top:4px;padding-top:18px;border-top:1px solid #d9e5e52b;color:#9bb8c2;font-size:9px;letter-spacing:.15em}
.title-foot span{color:var(--premium-gold)}

.leaderboard-panel{align-self:stretch;display:flex;flex-direction:column;min-width:0;padding:20px;border:1px solid #accbd35e;border-radius:15px;background:linear-gradient(180deg,#213b49d9,#0b1b2ae8 60%,#0a1927f2);box-shadow:inset 0 1px #ffffff33,0 18px 44px #0005}
.leaderboard-heading{position:relative;padding:1px 0 18px;border-bottom:1px solid #e0d1a34a}
.leaderboard-heading:after{content:"✦";position:absolute;right:0;top:0;color:var(--premium-gold);font-size:23px;text-shadow:0 0 17px #f5d28d77}
.leaderboard-kicker,.identity-kicker{font-size:9px;font-weight:900;letter-spacing:.23em;color:var(--premium-gold)}
.leaderboard-heading h2{margin:9px 20px 6px 0;font-size:clamp(21px,2.2vw,27px);letter-spacing:-.045em;line-height:1.05}
.leaderboard-heading p{margin:0;color:#adc5cb;font-size:11px;line-height:1.4}
.leaderboard-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:18px 0 16px;padding:4px;border:1px solid #a7c4cc3d;border-radius:10px;background:#081725b8}
.leaderboard-tab{min-width:0;padding:9px 5px;border:1px solid transparent;border-radius:7px;background:transparent;color:#aac3ca;font-size:11px;font-weight:850;white-space:nowrap}
.leaderboard-tab.active,.leaderboard-tab[aria-selected="true"]{border-color:#e8d39f69;background:linear-gradient(145deg,#574c38,#3f3c36);color:#fff2cd;box-shadow:inset 0 1px #ffecb83d}
.leaderboard-tab:hover:not(.active){color:#fff;background:#26414a}
.leaderboard-columns{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;color:#85a8b3;font-size:8px;font-weight:900;letter-spacing:.15em}
.leaderboard-rows{flex:1;min-height:180px;max-height:min(42vh,355px);overflow:auto;scrollbar-color:#92c2c36b transparent}
.leaderboard-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:9px;align-items:center;min-height:44px;padding:7px 0;border-top:1px solid #b5d0d223;color:#e9f5f5}
.leaderboard-row:first-child{border-top:0}
.leaderboard-row:nth-child(-n+3) .leaderboard-rank{color:var(--premium-gold-light);border-color:#f1d8998a;background:#b99a542b}
.leaderboard-row.self{margin:3px 0;padding:7px 6px;border:1px solid #95e0dc79;border-radius:7px;background:#4cbcb426}
.leaderboard-rank{display:grid;place-items:center;width:26px;height:26px;border:1px solid #a5c5c854;border-radius:7px;color:#9db9c1;font-size:10px;font-weight:900}
.leaderboard-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:800}
.leaderboard-points{color:#f4d99f;font-size:14px;font-weight:900;font-variant-numeric:tabular-nums}
.leaderboard-meta{grid-column:2/-1;display:block;margin-top:-4px;color:#89aeb7;font-size:9px;font-weight:600}
.leaderboard-empty{margin:16px 0;color:#a9c6ca;font-size:12px;line-height:1.5}
.leaderboard-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid #bdd1cd31;color:#8fb4bb;font-size:10px;line-height:1.4}
.leaderboard-refresh{flex:none;width:29px;height:29px;border:1px solid #b5d0cb73;border-radius:8px;background:#203b46;color:#e8efdd;font-size:18px}
.leaderboard-refresh:hover{background:#345867;border-color:#f1d495}

.lobby-card,.modal-card{border-color:#cfdfde73;border-radius:21px;background:linear-gradient(145deg,#203947f8,#101e30f9 50%,#0b1a2af9);box-shadow:0 28px 90px #000b,inset 0 1px #ffffff38}
.lobby-card{width:min(100%,720px);scrollbar-color:#92bec476 transparent}
.lobby-card h1 em{color:var(--premium-gold-light)}
.lobby-grid input,.lobby-grid select{border-color:#a7cbd055;background-color:#0a1b2bd9}
.lobby-grid input:focus,.lobby-grid select:focus{border-color:var(--premium-gold);box-shadow:0 0 0 3px #f0ce8630}
.class-card{border-color:#9bc5c375;background:linear-gradient(145deg,#2b4852e6,#112536ee)}
.class-card.selected{box-shadow:inset 0 0 0 1px var(--class-color),0 0 22px color-mix(in srgb,var(--class-color) 30%,transparent)}
.public-rooms-panel{border-color:#aecdc861;background:linear-gradient(145deg,#1e3e4ae6,#101f30ee)}
.primary-button{border-color:#ffe7b0;background:linear-gradient(145deg,#ffe8b3,#e7bc77);box-shadow:inset 0 1px #fff5d0,0 10px 27px #d8ab5638}
.primary-button:hover{background:linear-gradient(145deg,#fff1cb,#f1ca8d)}
.ghost-button{border-color:#a7c7cb6b;background:#213948}
.ghost-button:hover{background:#325463}
.lobby-card button:focus-visible,.title-card button:focus-visible,.modal-card button:focus-visible,.title-card a:focus-visible{outline:2px solid #f9e1a3;outline-offset:3px}

.identity-panel{margin:20px 0 0;padding:17px 18px;border:1px solid #e0ce9a72;border-radius:14px;background:linear-gradient(140deg,#3c3d38c7,#162d3adf 43%,#102433ed);box-shadow:inset 0 1px #fff2c034,0 10px 29px #0004}
.identity-heading{display:flex;align-items:center;gap:12px}
.identity-emblem{display:grid;place-items:center;flex:none;width:37px;height:37px;border:1px solid #f3d69e8c;border-radius:11px;background:#e6c98820;color:#ffe5a5;font-size:23px;box-shadow:0 0 18px #f2d1822e}
.identity-heading h2{margin:4px 0 0;font-size:19px;line-height:1.15;letter-spacing:-.025em}
.identity-name{margin-left:auto;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 8px;border:1px solid #f1d7977a;border-radius:7px;background:#e9c88924;color:#fff0c7;font-size:11px;font-weight:900}
.identity-status{margin:12px 0;color:#c0d4d5;font-size:11px;line-height:1.55}
.identity-status.error{color:#ffb9ac}
.identity-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.identity-claim,.identity-copy-code,.identity-recovery-fields button{min-height:34px;padding:7px 12px;border:1px solid #f3d59a;border-radius:8px;background:#ddbd7e;color:#19252e;font-size:11px;font-weight:900}
.identity-copy-code{border-color:#a8d7d1;background:#284653;color:#e9f7f1}
.identity-claim:hover,.identity-recovery-fields button:hover{background:#ffe4ad}
.identity-copy-code:hover{background:#3c6871}
.identity-code{max-width:100%;overflow:auto;padding:8px 11px;border:1px solid #e3d6ad73;border-radius:7px;background:#091824;color:#fff1c9;font-size:11px;font-weight:850;letter-spacing:.08em;user-select:all}
.identity-recovery{margin-top:12px;border-top:1px solid #b9cdd144;padding-top:12px}
.identity-recovery summary{width:fit-content;color:#acdfe1;font-size:11px;font-weight:800;cursor:pointer}
.identity-recovery summary:hover{text-decoration:underline;text-underline-offset:3px}
.identity-recovery-fields{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-top:12px}
.identity-recovery-fields label{grid-column:1/-1;color:#9ec3c8;font-size:8px;font-weight:900;letter-spacing:.15em}
.identity-recovery-fields input{width:100%;min-width:0;padding:9px 10px;border:1px solid #9fc2c86b;border-radius:7px;background:#0a1b2b;color:#fff;font-size:12px}
.identity-recovery-fields input:focus{outline:2px solid #f1d392;outline-offset:1px}
.identity-panel [hidden]{display:none!important}

.topbar{border-bottom:1px solid #c2d9da24;background:linear-gradient(#0b1625ed,#0d1b29c9 75%,#0d1b2900)}
.brand-icon{border-color:#f3d393a3;background:linear-gradient(145deg,#294e60,#102536);box-shadow:0 0 17px #72dbda2b,inset 0 1px #ffffff49}
.scoreboard,.vital,.weapon-hud,.ammo-hud,.power-hud{border-color:#b5cfd052;background:linear-gradient(145deg,#1c3443e9,#0c1b2be9);box-shadow:inset 0 1px #ffffff23,0 12px 36px #0006}
.score-title strong,.weapon-kicker b,.score-row .kills{color:var(--premium-gold-light)}
.power-button{border-color:#9cc9cb70;background:#254653}
.super-button{border-color:#e4bd787d;background:#564334}
.match-tip{border-color:#b3d3ce4d;background:#102838d6;color:#e3f0ed}

@media(max-width:1050px){.title-card{grid-template-columns:minmax(0,1fr) 305px;column-gap:26px;padding:34px}.title-card h1{font-size:clamp(55px,7.5vw,78px)}.mode-card{padding:15px;min-height:183px;gap:9px}.mode-card strong{font-size:20px}}
@media(max-width:850px){.title-card{grid-template-columns:1fr;width:min(100%,640px);max-height:calc(100dvh - 20px);padding:24px;row-gap:20px}.leaderboard-panel{min-height:0}.leaderboard-rows{min-height:120px;max-height:230px}.title-foot{margin-top:0}.title-card h1{font-size:clamp(53px,11vw,78px)}.mode-card{min-height:150px}.title-overlay{padding:10px}}
@media(max-width:540px){.title-card{padding:19px;border-radius:18px}.title-card:before{inset:5px;border-radius:14px}.title-card .lobby-eyebrow{font-size:8px;letter-spacing:.12em}.title-card h1{margin:17px 0 11px;font-size:clamp(45px,11.6vw,63px)}.title-card h1 em{margin-top:4px}.title-card .lobby-lead{font-size:12px;margin-bottom:17px}.mode-cards{gap:8px}.mode-card{min-height:123px;padding:13px;gap:6px}.mode-card .mode-icon{width:28px;height:28px;font-size:16px}.mode-card strong{font-size:18px}.mode-card small{font-size:10px}.mode-enter{font-size:9px}.leaderboard-panel{padding:14px}.leaderboard-heading h2{font-size:20px}.leaderboard-tab{font-size:10px}.leaderboard-rows{max-height:185px}.title-foot{font-size:8px;line-height:1.4}.identity-panel{padding:13px}.identity-heading h2{font-size:16px}.identity-recovery-fields{grid-template-columns:1fr}.identity-recovery-fields button{width:100%}}
@media(max-height:610px) and (max-width:850px){.title-card{max-height:calc(100dvh - 10px);padding:15px}.title-card .lobby-lead{margin-bottom:10px}.mode-card{min-height:108px}.leaderboard-rows{max-height:140px}.title-overlay{padding:5px}}
@media(prefers-reduced-motion:reduce){.mode-card,.mode-card:after,.leaderboard-tab{transition:none!important}.title-overlay:before{animation:none}}