:root{--ink:#101c22;--paper:#edf1e9;--muted:#a6b5b6;--cyan:#84efdb;--orange:#ff9c55}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}[hidden]{display:none!important}#game{position:fixed;inset:0;width:100%;height:100%;display:block}#vignette{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 140px #07141975}#damage{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 100px #ff463b;opacity:0;z-index:2}.screen{position:fixed;inset:0;padding:36px 4.5vw;background:linear-gradient(90deg,#091b22ed 0%,#102129b5 36%,transparent 74%)}header,footer{display:flex;justify-content:space-between;align-items:center}.wordmark{font-weight:900;font-size:29px;letter-spacing:-2px;color:var(--paper);text-decoration:none}.wordmark span{font:10px monospace;letter-spacing:2px;vertical-align:middle;margin-left:16px}.build{font:10px monospace;letter-spacing:2px}.build i,.mode i{display:inline-block;width:6px;height:6px;background:var(--cyan);border-radius:50%;margin-left:10px;box-shadow:0 0 12px var(--cyan)}.hero{position:absolute;top:24%;left:4.5vw}.eyebrow{font:11px monospace;letter-spacing:3px;color:var(--cyan);margin-bottom:20px}.eyebrow>span{display:inline-block;width:24px;height:1px;background:var(--cyan);vertical-align:middle;margin-right:10px}h1{position:relative;font-size:clamp(64px,8.4vw,140px);line-height:.81;letter-spacing:-.065em;font-weight:900;margin:0 0 30px}h1 em{font-style:normal;color:var(--orange)}h1 sup{position:absolute;font:11px monospace;top:8px;right:-29px;color:var(--cyan);letter-spacing:0}.intro{font-size:14px;line-height:1.7;color:#bcc9ca;margin:0 0 25px}.actions{width:330px;max-width:80vw}.primary,.secondary{width:100%;border:0;padding:18px 20px;text-align:left;font-size:12px;letter-spacing:1.6px;font-weight:800;display:flex;justify-content:space-between;align-items:center;transition:background .15s,transform .15s}.primary{color:#122327;background:var(--cyan)}.primary:hover{background:#c6fff2;transform:translateY(-1px)}.primary span{font-size:21px;line-height:13px}.secondary{margin-top:10px;color:var(--paper);background:#183039cc;border:1px solid #809d9d55}.secondary:hover{background:#2f4953}.mode{font:10px monospace;letter-spacing:1px;margin-top:18px}.mode i{margin:0 7px 1px 0;width:5px;height:5px}.mode span{color:#8ba3a9;margin-left:10px}.mapcard{position:absolute;right:4.5vw;bottom:110px;background:#0d222bd9;border:1px solid #9fc2bf33;backdrop-filter:blur(12px);width:300px;padding:24px;border-top:2px solid var(--orange)}.tag{font:9px monospace;letter-spacing:2px;color:var(--orange)}.mapcard h2{font-size:28px;letter-spacing:-1px;margin:15px 0 6px}.mapcard p{font-size:11px;color:var(--muted)}.maplines{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:20px;border-top:1px solid #ffffff22;padding-top:16px;font:10px monospace;letter-spacing:1px}.maplines b{color:var(--cyan);font-size:13px}.maplines span{text-align:right;color:#acbec1}footer{position:absolute;bottom:30px;left:4.5vw;right:4.5vw;border-top:1px solid #ffffff28;padding-top:20px;font:9px monospace;letter-spacing:1px;color:#adc0c2}footer b{color:var(--orange);margin-left:12px}kbd{border:1px solid #87a6ac66;padding:4px 5px;color:#edf1e9;font-size:9px}#hud{pointer-events:none;position:fixed;inset:0;padding:28px 36px;text-shadow:0 2px 8px #000}.hud-top,.hud-bottom{display:flex;justify-content:space-between;align-items:flex-start}.location{display:flex;gap:12px;font:bold 12px monospace;letter-spacing:2px}.location small,small{display:block;font:11px monospace;letter-spacing:1.5px}.location small{margin-top:6px;color:#c9d8d8}.diamond{font-size:32px;color:var(--cyan)}.matchclock{text-align:center;background:#12232ab8;padding:10px 28px;border-top:2px solid var(--cyan)}.matchclock strong{display:block;font:34px monospace;margin-top:5px;letter-spacing:2px}.matchclock small{font-size:8px}.score{display:flex;gap:28px;text-align:right;padding-right:24px}.score b{font:28px monospace;display:block;margin-top:8px}.score small{font-size:8px}.hud-bottom{position:absolute;left:36px;right:36px;bottom:30px;align-items:flex-end}.vitals strong,.ammo strong{font-size:48px;font-weight:700;letter-spacing:-2px}.vitals span,.ammo span{font:14px monospace;color:#c2d2d3;margin-left:9px}.vitals small,.ammo small,.dash small{color:#c5d8d6}.health-track{width:180px;height:5px;background:#112930;margin-top:7px}.health-track i,.dash-track i{display:block;width:100%;height:100%;background:var(--cyan)}.dash{text-align:center;font:9px monospace}.dash-track{width:120px;height:4px;background:#10282d;margin:11px auto}.dash small{font-size:8px}.ammo{text-align:right}.ammo p{font:9px monospace;color:var(--cyan);margin:6px 0}.pause-button{pointer-events:auto;position:absolute;top:28px;right:16px;border:0;background:transparent;color:white;font-size:16px}#crosshair{position:absolute;left:50%;top:50%;width:0;height:0;filter:drop-shadow(0 0 2px black)}#crosshair i{background:#dafff6;position:absolute}#crosshair i:nth-child(1){width:2px;height:6px;left:-1px;top:-12px}#crosshair i:nth-child(2){width:2px;height:6px;left:-1px;top:6px}#crosshair i:nth-child(3){height:2px;width:6px;left:-12px;top:-1px}#crosshair i:nth-child(4){height:2px;width:6px;left:6px;top:-1px}#hitmarker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:45px monospace;opacity:0;color:var(--orange)}#feed{position:absolute;right:35px;top:128px;font:10px monospace;line-height:2;color:var(--cyan);text-align:right}#notice{position:absolute;top:25%;left:0;right:0;text-align:center;font:11px monospace;letter-spacing:2px;color:var(--cyan)}.overlay{position:fixed;inset:0;background:#06151bbb;backdrop-filter:blur(12px);z-index:10;display:grid;place-items:center;padding:20px}.panel{width:440px;max-width:100%;padding:32px;background:#13262eed;border:1px solid #78999555;border-top:3px solid var(--cyan);max-height:95vh;overflow-y:auto}.panel h2{font-size:32px;letter-spacing:-1.5px;margin:0 0 16px}.panel p{font-size:13px;line-height:1.7;color:#b5c7c9;margin-bottom:25px}.panel .primary{margin-top:23px}.text-button{display:block;width:100%;border:0;background:transparent;color:#b5c7c9;font:10px monospace;letter-spacing:1px;padding:20px 4px 0}.panel label{display:flex;align-items:center;justify-content:space-between;margin:22px 0;font:12px monospace;gap:15px}.panel input[type=range]{width:160px;accent-color:var(--cyan)}.panel input[type=checkbox]{accent-color:var(--cyan);width:18px;height:18px}.panel select{background:#203940;border:1px solid #789995;color:white;padding:7px}.resultstats{display:flex;justify-content:space-between;border-block:1px solid #ffffff22;padding:22px 0;margin-bottom:18px}.resultstats b{font-size:42px;color:var(--cyan)}.resultstats small{font-size:8px;margin-top:7px}.results-panel>small{font-size:8px;color:#99abaa}.death-card{position:fixed;left:50%;top:27%;transform:translateX(-50%);min-width:min(340px,86vw);max-width:86vw;padding:20px 40px 22px;text-align:center;pointer-events:none;text-shadow:none;background:#10222ae6;border-top:3px solid var(--orange)}.death-card small{font-size:12px;letter-spacing:3px;color:var(--orange)}.death-card strong{display:block;font-size:40px;line-height:1.1;letter-spacing:-1px;margin:10px 0 6px;overflow-wrap:anywhere}.death-card>span{display:block;min-height:18px;font:13px monospace;letter-spacing:1px;color:#c9d8d8}.death-card em{display:block;margin-top:12px;font:15px monospace;font-style:normal;color:var(--cyan)}#touch{position:fixed;inset:0;touch-action:none;pointer-events:none}#lookzone{position:absolute;inset:18% 0 0 45%;pointer-events:auto}#stick{position:absolute;left:25px;bottom:105px;width:110px;height:110px;border:1px solid #ffffff55;border-radius:50%;background:#142f3644;pointer-events:auto}#stick i{position:absolute;left:35px;top:35px;width:40px;height:40px;background:#a9e8d988;border-radius:50%;pointer-events:none}#touch button{position:absolute;border:1px solid #ffffff66;border-radius:50%;color:white;background:#142f3699;pointer-events:auto;font:11px monospace;width:52px;height:52px}.touch-fire{right:30px;bottom:132px;width:76px!important;height:76px!important;background:#d88e4277!important}.touch-jump{right:115px;bottom:100px}.touch-dash{right:98px;bottom:210px}.touch-reload{right:29px;bottom:55px}.touch-switch{right:160px;bottom:170px}@media(max-height:700px){.hero{top:23%}h1{font-size:80px;margin-bottom:20px}.intro{font-size:12px;margin-bottom:16px}.primary,.secondary{padding:13px 18px}.mapcard{bottom:90px}.screen{padding-top:20px}footer{bottom:20px}.mode{margin-top:12px}}@media(max-width:800px){.mapcard{display:none}.hero{top:24%}h1{font-size:clamp(64px,14vw,100px)}footer>span:last-child{display:none}.build{font-size:8px}.wordmark span{font-size:8px}.hud-top .location{display:none}#hud{padding:15px}.hud-bottom{left:18px;right:18px;bottom:18px}.vitals strong,.ammo strong{font-size:36px}.health-track{width:120px}.matchclock{padding:8px 15px}.matchclock strong{font-size:24px}.score{gap:14px}.dash{display:none}footer{font-size:8px;line-height:2}#feed{top:95px;font-size:9px}.panel{padding:24px}.panel h2{font-size:28px}}@media(max-height:480px){.hero{top:22%}h1{font-size:60px;margin-bottom:12px}.intro{display:none}.actions{width:280px}.mode{font-size:8px}.mapcard{display:block;width:240px;bottom:75px;padding:16px}.maplines{margin-top:10px;gap:6px}.screen header{margin-top:-6px}footer{bottom:12px;padding-top:8px}.panel{padding:18px}.panel label{margin:12px 0}}
@media(pointer:coarse){.hud-top .location,.hud-bottom .dash{display:none}#hud{padding:14px max(18px,env(safe-area-inset-right))}.hud-bottom{left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}.vitals strong,.ammo strong{font-size:30px}.vitals small,.ammo small{font-size:8px}.health-track{width:110px}.ammo p{font-size:8px}.matchclock{padding:7px 16px}.matchclock strong{font-size:24px}.score b{font-size:23px}.score{gap:18px}.touch-reload{right:175px;bottom:55px}.touch-switch{right:175px;bottom:120px}.touch-jump{right:108px;bottom:125px}.touch-dash{right:110px;bottom:215px}.touch-fire{right:25px;bottom:145px}#notice{top:26%;font-size:9px}#feed{top:90px;font-size:8px}}

/* Velocity update */
#fps{position:absolute;top:106px;left:36px;font:10px monospace;color:#b1d8cc}#abilityinfo{position:absolute;bottom:125px;left:0;right:0;text-align:center;font:9px monospace;letter-spacing:1px;color:#d9eae4}#damagearrow{position:absolute;left:50%;top:50%;width:220px;height:220px;text-align:center;color:#ff995d;font-size:25px;opacity:0;transform-origin:center;pointer-events:none}.touch-sprint{left:150px;bottom:145px}.touch-slide{left:150px;bottom:80px}.touch-grenade{right:175px;bottom:185px}@media(pointer:coarse){#abilityinfo{bottom:8px;font-size:7px}#fps{top:78px;left:18px;font-size:8px}}

#touch button.active{background:#84efdb;color:#10262c;border-color:#84efdb}

#hitdamage{position:absolute;left:50%;top:calc(50% + 35px);transform:translateX(-50%);font:bold 12px monospace;letter-spacing:1px;color:#ffce72;text-shadow:0 1px 4px #000}

/* Arena update: setup stays accessible on desktop and touch screens. */
.hero{top:17%}h1{font-size:clamp(64px,7.2vw,116px);margin-bottom:20px}.intro{margin-bottom:16px}
.matchsetup{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;width:330px;max-width:80vw;margin-bottom:14px}.matchsetup label{font:9px monospace;letter-spacing:1.5px;color:var(--cyan)}.matchsetup select{display:block;width:100%;margin-top:7px;padding:11px 8px;background:#142d35;color:var(--paper);border:1px solid #809d9d88;border-radius:0;font:bold 12px Arial;letter-spacing:0}.matchsetup p{grid-column:1/-1;margin:0;color:#bdcbca;font:10px monospace;line-height:1.5;min-height:15px}
@media(max-height:740px){.hero{top:16%}h1{font-size:78px;margin-bottom:16px}.eyebrow{margin-bottom:14px}.mode{margin-top:12px}}
@media(max-width:800px) and (min-height:481px){.hero{top:18%}h1{font-size:clamp(64px,14vw,96px)}.mapcard{display:none}}
@media(max-height:540px) and (min-width:650px){.hero{top:22%;right:4.5vw;display:grid;grid-template-columns:minmax(280px,1fr) 300px;column-gap:30px}.hero>.eyebrow{grid-column:1;grid-row:1}.hero>h1{grid-column:1;grid-row:2/4;font-size:68px}.hero>.intro{display:none}.matchsetup{grid-column:2;grid-row:1/3;width:300px;margin:0 0 10px}.actions{grid-column:2;grid-row:3;width:300px}.mode{grid-column:2;grid-row:4;font-size:8px;letter-spacing:0}.mapcard{display:none}.primary,.secondary{padding:12px 16px}.secondary{margin-top:7px}}
@media(max-width:649px) and (max-height:640px){#menu{overflow-y:auto}.hero{position:relative;top:auto;left:auto;margin-top:28px;padding-bottom:80px}h1{font-size:60px}.intro{display:none}#menu footer{display:none}.build{letter-spacing:0}.wordmark span{letter-spacing:0}}

/* Progression update */
.menu-tools{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px}.menu-tools .secondary{font-size:11px;padding-left:8px;padding-right:8px;justify-content:center;letter-spacing:.6px}
.progress-panel{width:760px}.progress-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.progress-heading .secondary{width:auto;margin:0;padding:12px 20px}.progress-heading .eyebrow{margin-bottom:10px}.progress-panel h3{font-size:12px;letter-spacing:1.5px;margin:24px 0 12px}.progress-panel h3 small{font-size:8px;color:var(--muted);margin-top:7px}.xp-track{height:7px;background:#071e25;margin:12px 0}.xp-track i{display:block;height:100%;background:var(--cyan)}.progress-panel #nextUnlock{font:10px monospace;color:var(--orange);margin:12px 0}.progress-panel #careerStats{font:10px monospace;line-height:1.8;margin:15px 0}#challengeList{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.challenge{border:1px solid #597079;padding:14px 12px;background:#0c2028}.challenge b,.challenge span{display:block}.challenge b{font:11px monospace;color:var(--paper)}.challenge span{font-size:11px;line-height:1.5;color:var(--muted);margin:8px 0}.challenge small{font-size:8px;color:var(--orange);letter-spacing:.5px}.challenge.completed{border-color:#84efdb77}.challenge.completed small{color:var(--cyan)}#skinList{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.skin{background:#11232b;border:1px solid #597079;color:var(--paper);padding:12px 8px;border-top:6px solid var(--swatch);text-align:left}.skin b{font:10px monospace}.skin small{font-size:8px;margin-top:8px;letter-spacing:.4px}.skin[aria-pressed=true]{background:#27474a;border-color:var(--cyan);border-top-color:var(--swatch)}.skin:disabled{opacity:.5;cursor:default}.progress-panel .progress-help{font-size:11px;margin:20px 0 12px}.progress-panel #saveStatus{font-size:8px;line-height:1.7;color:var(--muted)}.reward{padding:14px;background:#0c2028;border-left:2px solid var(--cyan);margin-bottom:16px}.reward>b{font:24px monospace;color:var(--cyan)}.reward #rewardDetail{font:10px monospace;line-height:1.7;margin:8px 0 0}
@media(max-width:600px){#challengeList{grid-template-columns:1fr 1fr}#skinList{grid-template-columns:1fr 1fr}.progress-panel{padding:20px}.progress-panel h2{font-size:28px}.build{letter-spacing:.5px}}
.progress-panel{width:min(760px,calc(100vw - 40px));min-width:0}#challengeList{grid-template-columns:repeat(3,minmax(0,1fr))}#skinList{grid-template-columns:repeat(4,minmax(0,1fr))}.progress-panel #careerStats{overflow-wrap:anywhere}@media(max-width:600px){#challengeList,#skinList{grid-template-columns:repeat(2,minmax(0,1fr))}}

.friends-link{text-decoration:none}.friends-link span{font:11px monospace;letter-spacing:1px;color:var(--muted)}@media(max-height:540px) and (min-width:650px){.hero>.mode{grid-row:4}}

.account-nav{color:var(--cyan);font:13px monospace;letter-spacing:1px;text-decoration:none;margin-left:auto;margin-right:24px;padding:8px 14px;border:1px solid #84efdb66}.account-nav:hover{background:#84efdb22}@media(max-width:600px){.screen .build{display:none}.account-nav{margin-right:0}}

/* Solo menu: room server reachability, set by src/online-status.js after a real /health check. */
.friends-link span.online{color:var(--cyan)}

/* v0.17: readability, aiming and kill attribution.
   Nothing on screen is smaller than 11px (10px on phones), and HUD text sits on plates so it
   reads against the bright arena. */
*{scrollbar-width:thin;scrollbar-color:#4d6a70 transparent}
.wordmark span,.build{font-size:12px}.eyebrow{font-size:12px}.intro{font-size:15px}
.matchsetup,.actions{width:400px}.matchsetup label{font-size:11px}.matchsetup select{font-size:14px}.matchsetup p{font-size:12px;min-height:18px}
.primary,.secondary{font-size:13px}.mode{font-size:12px}.mode span{color:#a9bcc0}
.tag{font-size:11px}.mapcard p{font-size:13px}.maplines{font-size:12px}.maplines b{font-size:14px}
kbd{font:11px monospace}footer{font-size:12px;color:#d5e3e2;text-shadow:0 1px 3px #0009}.keys{display:flex;flex-wrap:wrap;gap:8px 18px}.keys>span{white-space:nowrap}.keys-touch{display:none}
.panel p{font-size:14px}.panel label{font-size:13px}.text-button{font-size:12px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.text-button:hover{color:var(--paper)}
.resultstats small,.results-panel>small{font-size:11px}.reward #rewardDetail{font-size:12px}
.progress-panel{width:min(840px,calc(100vw - 40px))}.progress-panel>small{font-size:12px}.progress-panel h3{font-size:13px}.progress-panel h3 small{font-size:11px}.progress-panel #nextUnlock,.progress-panel #careerStats{font-size:12px}.challenge b{font-size:12px}.challenge span{font-size:13px}.challenge small{font-size:11px}.skin b{font-size:12px}.skin small{font-size:11px}.progress-panel .progress-help{font-size:13px}.progress-panel #saveStatus{font-size:11px}
/* How to play, also used by the room page's match menu */
.howto-panel{width:min(720px,calc(100vw - 40px))}.controls{list-style:none;margin:20px 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 24px;font-size:13px;color:#d5e3e2}.controls li{display:flex;align-items:center;gap:12px}.controls kbd{flex:none;min-width:98px;text-align:center;padding:5px 6px}.tips{margin:0;padding:16px 0 0 18px;border-top:1px solid #ffffff22;font-size:13px;line-height:1.75;color:#b5c7c9}
/* HUD plates and sizes */
#hud{text-shadow:0 1px 3px #000}.hud-plate{background:#10222ac7;border:1px solid #9fc2bf22;padding:10px 14px}
.location{font-size:14px;align-items:center}.diamond{font-size:26px;line-height:1}.matchclock small{font-size:11px}
.score{margin-right:38px;padding-right:14px}.score small{font-size:11px}
.vitals small,.ammo small,.dash small{font-size:12px;color:#d5e3e2}.dash{font-size:12px}.ammo p{font-size:12px}
.pause-button{top:28px;right:16px;width:38px;height:38px;font-size:18px;background:#10222ac7;border:1px solid #9fc2bf22}
#fps{top:112px;font-size:11px}#hitdamage{font-size:14px}
#feed{font-size:13px;line-height:1.9;white-space:pre-line}#feed:not(:empty){background:#10222ac7;padding:4px 12px}
#notice,#abilityinfo{width:fit-content;max-width:90vw;margin:0 auto}#notice:not(:empty),#abilityinfo:not(:empty){background:#10222ac7;padding:7px 14px}
#notice{font:bold 15px monospace}#abilityinfo{bottom:128px;font-size:12px}
/* Aiming: the crosshair tightens; the Arc Lance replaces it with a scope */
#crosshair i{transition:transform .08s}#crosshair.aim i:nth-child(1){transform:translateY(5px)}#crosshair.aim i:nth-child(2){transform:translateY(-5px)}#crosshair.aim i:nth-child(3){transform:translateX(5px)}#crosshair.aim i:nth-child(4){transform:translateX(-5px)}#crosshair.scoped,#scope.on~#abilityinfo,#scope.on~.hud-bottom #desktopHelp{opacity:0}
#scope{--r:min(38vh,38vw);position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .08s}#scope.on{opacity:1}
#scope::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent calc(var(--r) - 3px),#9ff5e3 calc(var(--r) - 2px),#9ff5e3 var(--r),#061419f5 calc(var(--r) + 1px))}
#scope i{position:absolute;background:#0b1a20;box-shadow:0 0 0 1px #d9fff555}
#scope i:nth-child(1){left:calc(50% - var(--r));width:calc(var(--r) - 16px);top:calc(50% - 1px);height:2px}#scope i:nth-child(2){left:calc(50% + 16px);width:calc(var(--r) - 16px);top:calc(50% - 1px);height:2px}#scope i:nth-child(3){top:calc(50% - var(--r));height:calc(var(--r) - 16px);left:calc(50% - 1px);width:2px}#scope i:nth-child(4){top:calc(50% + 16px);height:calc(var(--r) - 16px);left:calc(50% - 1px);width:2px}
#scope b{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 1px #0b1a20}
#touch button{font-size:11px}
@media(max-height:820px){footer .keys>span:nth-child(n+7){display:none}}
@media(max-height:740px){.intro{display:none}.matchsetup p{min-height:0}}
@media(max-width:800px){footer{font-size:11px}.build,.wordmark span{font-size:10px}.matchsetup,.actions{width:min(400px,90vw)}.controls{grid-template-columns:1fr}}
@media(max-height:540px) and (min-width:650px){.hero{grid-template-columns:minmax(260px,1fr) 330px}.matchsetup,.actions{width:330px}.actions .friends-link{font-size:11px;letter-spacing:.8px}.friends-link span{font-size:10px}.menu-tools .secondary{font-size:10px;letter-spacing:0;padding:12px 4px}}
@media(max-height:480px){.mode{display:none}}
@media(pointer:coarse){.keys{display:none}.keys-touch{display:block}.hud-plate{padding:6px 9px}.vitals small,.ammo small,.ammo p,.score small,.matchclock small{font-size:10px}.score{margin-right:44px}#abilityinfo{bottom:6px;font-size:10px}#fps{top:84px;font-size:10px}#notice{font-size:12px}#feed{font-size:11px}.death-card{padding:14px 22px 16px}.death-card strong{font-size:28px}}

/* v0.18: phones play in landscape (src/landscape.js); gyro aiming and a solo AIM button */
.touch-aim{right:30px;bottom:232px}

/* v0.18.1: nothing in the game can be text-selected. A long press on a phone must never open
   the selection handles, magnifier or copy menu. Form fields stay editable. */
html{touch-action:manipulation}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}input,textarea{-webkit-user-select:text;user-select:text}
canvas,button,a,img{-webkit-user-drag:none}

/* v0.19: touch settings, the button editor, and one complete compact layout for phones.
   Phones always show the game in landscape (src/landscape.js), so "phone" here means a
   touch screen at most 540px tall. Text floor on phones: 10px. Touch targets: 34px or more. */
.touch-only,.touch-inline{display:none}
@media(pointer:coarse){.touch-inline{display:inline}.touch-only{display:block}.touch-only.touch-settings{display:grid}.mouse-only{display:none!important}}
.touch-settings{grid-template-columns:1fr 1fr;gap:8px 24px;align-items:center;margin-top:6px}.touch-settings .secondary{justify-content:center;margin-top:0}.panel .touch-settings label{margin:0}.panel .touch-settings p{grid-column:1/-1;margin:0;font-size:13px;color:var(--cyan)}
/* Customised controls: see-through level, faded while the player is down, and the editor */
#touch button,#stick{opacity:var(--touch-opacity,1);transform-origin:center}#touch.dead button,#touch.dead #stick{opacity:.18}
.layout-editing{background:#06151bb3;pointer-events:auto!important}.layout-editing [data-layout]{outline:1px dashed #84efdbaa;outline-offset:3px;touch-action:none}.layout-editing .layout-selected{outline:2px solid var(--cyan)}
.layout-bar{position:fixed;z-index:40;top:6px;left:50%;transform:translateX(-50%);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px 12px;width:max-content;max-width:calc(100vw - 12px);padding:7px 12px;background:#10222af5;border-top:2px solid var(--cyan);font:11px monospace;color:#d5e3e2}.layout-bar[hidden]{display:none}
.layout-bar b{font:bold 12px Arial,Helvetica,sans-serif;letter-spacing:1px;color:var(--paper)}.layout-bar span{flex-basis:100%;order:9;text-align:center;color:#c9d8d8}.layout-bar label{display:flex;align-items:center;gap:6px}.layout-bar input{width:84px;accent-color:var(--cyan)}.layout-bar button{width:auto;margin:0;padding:8px 14px;font-size:11px}
@media(pointer:coarse) and (max-height:540px){
 /* menu: title left, setup and buttons right, nothing else */
 .screen{padding:10px 18px}#menu{overflow:hidden}
 .wordmark{font-size:20px;letter-spacing:-1px}.account-nav{font-size:11px;padding:5px 10px;margin-right:12px}.build{font-size:10px;letter-spacing:1px}
 .hero{position:absolute;top:46px;left:18px;right:18px;bottom:8px;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) min(320px,50%);grid-template-rows:auto auto;column-gap:16px;align-content:center;align-items:center}
 .hero>.eyebrow{grid-column:1;grid-row:1;align-self:end;margin:0 0 6px;font-size:10px;letter-spacing:2px}
 .hero>h1{grid-column:1;grid-row:2;align-self:start;font-size:clamp(30px,7.2vw,54px);margin:0}h1 sup{display:none}
 .hero>.intro,.hero>.mode,.mapcard,#menu footer{display:none}
 .hero>.matchsetup{grid-column:2;grid-row:1;width:100%;max-width:none;margin:0 0 6px;gap:5px 8px}.hero>.actions{grid-column:2;grid-row:2;width:100%;max-width:none}
 .matchsetup label{font-size:10px;letter-spacing:1px}.matchsetup select{margin-top:3px;padding:7px 6px;font-size:12px}.matchsetup p{font-size:10px;min-height:0;line-height:1.3}
 .primary,.secondary{padding:10px 14px;font-size:11px;letter-spacing:1.1px}.primary span{font-size:16px;line-height:10px}.secondary{margin-top:6px}
 .actions .friends-link{font-size:11px;letter-spacing:.4px;padding:10px 12px;white-space:nowrap}.friends-link span{font-size:10px;letter-spacing:0}
 .menu-tools{gap:6px;grid-template-columns:1fr 1fr 1.3fr}.menu-tools .secondary{font-size:10px;letter-spacing:0;padding:9px 2px;white-space:nowrap}
 /* panels */
 .overlay{padding:8px}.panel{padding:14px 18px;max-height:calc(100vh - 16px)}
 .panel h2{font-size:20px;letter-spacing:-.5px;margin:0 0 6px}.panel .eyebrow{font-size:10px;letter-spacing:2px;margin-bottom:6px}
 .panel p{font-size:12px;line-height:1.5;margin:0 0 8px}.panel .primary{margin-top:8px}.panel label{font-size:12px;margin:8px 0}
 .text-button{font-size:11px;padding-top:10px}.panel select{padding:5px}.panel input[type=range]{width:130px}
 .results-panel{width:min(640px,96vw);display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-items:start}.results-panel>.eyebrow{display:none}
 .results-panel>h2{grid-column:1;grid-row:1}#resultMatch{grid-column:1;grid-row:2}.resultstats{grid-column:1;grid-row:3;padding:8px 0;margin:0 0 8px}.resultstats b{font-size:26px}.resultstats small{font-size:10px;margin-top:4px}
 #resultnote{grid-column:1;grid-row:4}.results-panel>small{grid-column:1;grid-row:5;font-size:10px}
 .reward{grid-column:2;grid-row:1/3;margin:0 0 8px;padding:10px}.reward>b{font-size:18px}.reward #rewardDetail{font-size:11px;margin-top:4px}
 #again{grid-column:2;grid-row:3;margin-top:0;align-self:end}#resultProgress{grid-column:2;grid-row:4}#home{grid-column:2;grid-row:5}
 .progress-panel{width:min(760px,96vw);padding:10px 16px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:18px;align-items:start}
 .progress-panel>.progress-heading{grid-column:1;grid-row:1}.progress-heading .secondary{padding:8px 14px}.progress-heading .eyebrow{margin-bottom:4px}
 .progress-panel>#xpLabel{grid-column:1;grid-row:2;font-size:11px}.progress-panel>.xp-track{grid-column:1;grid-row:3;margin:4px 0;height:5px}
 .progress-panel #nextUnlock{grid-column:1;grid-row:4;font-size:11px;margin:2px 0}.progress-panel #careerStats{grid-column:1;grid-row:5;font-size:11px;line-height:1.4;margin:2px 0}
 .progress-panel h3{font-size:12px;margin:4px 0}.progress-panel h3 small{font-size:10px;margin-top:3px}
 .progress-panel>h3:nth-of-type(1){grid-column:2;grid-row:1}#challengeList{grid-column:2;grid-row:2/8;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .challenge{padding:5px 8px}.challenge b{font-size:11px}.challenge span{font-size:11px;margin:2px 0;line-height:1.25}.challenge small{font-size:10px}
 .progress-panel>h3:nth-of-type(2){grid-column:1;grid-row:6}#skinList{grid-column:1;grid-row:7;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .skin{padding:4px 6px;border-top-width:4px}.skin b{font-size:11px}.skin small{font-size:10px;margin-top:3px}
 .progress-panel .progress-help{grid-column:1/-1;grid-row:8;font-size:11px;line-height:1.35;margin:4px 0 1px}.progress-panel #saveStatus{grid-column:1/-1;grid-row:9;font-size:10px}
 .howto-panel{width:min(640px,96vw)}.tips{padding-top:8px;font-size:12px;line-height:1.55}
 #settings .panel{width:min(700px,96vw);display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-items:center}#settings .panel>.eyebrow{display:none}
 #settings .panel>h2,#settings .panel>.primary,#settings .touch-settings{grid-column:1/-1}#settings .panel label{margin:6px 0}.touch-settings{gap:6px 24px}.panel .touch-settings p{font-size:11px}
 /* HUD */
 #hud{padding:8px 12px}.hud-plate{padding:4px 8px}
 .matchclock{padding:4px 10px}.matchclock strong{font-size:18px;margin-top:2px;letter-spacing:1px}.matchclock small{font-size:10px}
 .score{gap:12px;margin-right:42px;padding-right:8px}.score b{font-size:18px;margin-top:2px}.score small{font-size:10px}
 .pause-button{top:8px;right:10px;width:34px;height:34px;font-size:15px}
 .hud-bottom{left:12px;right:12px;bottom:8px}.vitals strong,.ammo strong{font-size:24px;letter-spacing:-1px}.vitals span,.ammo span{font-size:11px;margin-left:5px}.vitals small,.ammo small{font-size:10px}
 .health-track{width:90px;height:4px;margin-top:3px}.ammo p{margin:2px 0 0;font-size:10px}
 #fps{top:12px;left:122px;font-size:10px}#feed{top:56px;left:12px;right:auto;text-align:left;font-size:10px;line-height:1.6}
 #notice{top:20%;font-size:11px;letter-spacing:1px}#notice:not(:empty){padding:5px 10px}#abilityinfo{bottom:6px;font-size:10px}#abilityinfo:not(:empty){padding:4px 10px}#hitdamage{font-size:12px}
 .death-card{top:13%;min-width:0;padding:8px 20px 10px}.death-card small{font-size:10px;letter-spacing:2px}.death-card strong{font-size:20px;margin:4px 0 2px}.death-card>span{font-size:11px;min-height:0}.death-card em{font-size:12px;margin-top:4px}
 /* solo controls: one cluster per thumb, clear of the health and ammo plates */
 #stick{left:16px;bottom:66px;width:96px;height:96px}#stick i{left:30px;top:30px;width:36px;height:36px}
 #touch button{width:46px;height:46px;font-size:10px}
 .touch-fire{right:16px;bottom:70px;width:66px!important;height:66px!important}.touch-aim{right:26px;bottom:146px}
 .touch-jump{right:92px;bottom:64px}.touch-dash{right:92px;bottom:120px}
 .touch-switch{right:148px;bottom:36px}.touch-grenade{right:148px;bottom:92px}.touch-reload{right:148px;bottom:148px}
 .touch-sprint{left:126px;bottom:118px}.touch-slide{left:126px;bottom:64px}
}
@media(pointer:coarse) and (max-height:540px) and (max-width:620px){.actions .friends-link{letter-spacing:0;padding:10px 10px;gap:8px}.friends-link span{font-size:10px}.hero{column-gap:12px}}

/* v0.20: icons on the touch controls, the icon legend, and the weapon lists */
#touch button svg,.touch-actions button svg,#touchMenu svg{display:block;width:58%;height:58%;margin:auto;pointer-events:none}
.touch-legend{list-style:none;margin:10px 0;padding:0;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;font-size:10px;color:#d5e3e2;text-align:center}.touch-legend li{display:grid;justify-items:center;gap:3px}.touch-legend svg{width:22px;height:22px;color:var(--cyan)}
@media(pointer:coarse){.touch-only.touch-legend{display:grid}}
.matchsetup select:disabled,.matchsetup option:disabled{color:#8ba3a9}
@media(pointer:coarse) and (max-height:540px){.touch-legend{margin:6px 0}.touch-legend svg{width:20px;height:20px}.hero>.matchsetup{gap:4px 8px}}
@media(pointer:coarse) and (max-height:540px){.howto-panel .eyebrow{display:none}.howto-panel p{margin:0 0 6px}.howto-panel .tips{line-height:1.42;padding-top:6px}.howto-panel .touch-legend{margin:4px 0}}

/* v0.20: peek buttons (solo) */
.touch-lean-left{left:20px;bottom:230px}.touch-lean-right{left:84px;bottom:230px}
@media(pointer:coarse) and (max-height:540px){.touch-lean-left{left:16px;bottom:172px}.touch-lean-right{left:70px;bottom:172px}.touch-legend{grid-template-columns:repeat(12,minmax(0,1fr))}}
.touch-legend{grid-template-columns:repeat(12,minmax(0,1fr))}
@media(pointer:coarse) and (max-height:370px){.howto-panel .tips{font-size:11px;line-height:1.36}.howto-panel p{font-size:11px;line-height:1.4}}

/* v0.21: in-game lists instead of the phone's own dropdowns (src/touch-select.js) */
.touch-select{position:relative;display:inline-block;min-width:104px;vertical-align:middle}
.touch-select select{position:absolute!important;inset:0;width:100%!important;height:100%;margin:0!important;opacity:0;pointer-events:none}
.touch-select-button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:7px 8px;background:#203940;border:1px solid #789995;border-radius:0;color:#fff;font:bold 12px Arial,Helvetica,sans-serif;text-align:left;white-space:nowrap;overflow:hidden}
.touch-select-button::after{content:'';flex:none;margin-top:5px;border:5px solid transparent;border-top-color:currentColor}
.matchsetup .touch-select{display:block;margin-top:3px}.matchsetup .touch-select-button{background:#142d35;border-color:#809d9d88;color:var(--paper)}
.touch-select-backdrop{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:10px;background:#06151bd9}
.touch-select-list{min-width:230px;max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);overflow-y:auto;padding:6px 6px 2px;background:#13262e;border:1px solid #78999588;border-top:3px solid var(--cyan)}
.touch-select-list b{display:block;padding:6px 10px 8px;font:11px monospace;letter-spacing:2px;color:var(--cyan)}
.touch-select-list button{display:block;width:100%;padding:11px 12px;background:transparent;border:0;border-top:1px solid #ffffff14;color:var(--paper);font:bold 13px Arial,Helvetica,sans-serif;text-align:left}
.touch-select-list button[aria-selected=true]{color:var(--cyan);background:#84efdb14}.touch-select-list button:disabled{color:#7f9396}

/* v0.22: scope zoom button and its pick list */
.ammo #scopelabel{margin:2px 0 0;color:#d5e3e2}
#touch .touch-scope{right:30px;bottom:292px;font:bold 13px Arial,Helvetica,sans-serif}
.scope-menu{position:fixed;z-index:45;display:flex;gap:4px;padding:4px;background:#10222af2;border-top:2px solid var(--cyan)}
.scope-menu button{min-width:44px;min-height:40px;padding:0 8px;background:#183039;border:1px solid #809d9d66;color:var(--paper);font:bold 14px Arial,Helvetica,sans-serif}.scope-menu button[aria-selected=true]{background:var(--cyan);color:#10232c;border-color:var(--cyan)}
@media(pointer:coarse) and (max-height:540px){#touch .touch-scope{right:26px;bottom:200px;font-size:13px}}