/* Ministrikes Command Center v2
   Final cascade for the lobby, navigation and deployment flow. The original
   gameplay bindings remain intact; this layer gives them one coherent shell. */

:root{
  --cc-bg:#070907;
  --cc-surface:#10140f;
  --cc-surface-2:#171d16;
  --cc-surface-3:#20281e;
  --cc-line:rgba(222,235,211,.16);
  --cc-line-strong:rgba(222,235,211,.32);
  --cc-text:#f5f7ef;
  --cc-muted:#90998b;
  --cc-dim:#5f685c;
  --cc-primary:#e9ff45;
  --cc-primary-deep:#9daf19;
  --cc-cyan:#63edf0;
  --cc-danger:#ff5a4f;
  --cc-success:#67eca3;
  --cc-shadow:0 24px 70px rgba(0,0,0,.56);
  --cc-display:"Bahnschrift Condensed","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --cc-body:"Segoe UI",Inter,Roboto,Arial,sans-serif;
  --cc-cut:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}

body{font-family:var(--cc-body);background:var(--cc-bg)}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}

/* Full-screen command shell */
#menu{
  --menu-edge:clamp(8px,1.25vw,22px);
  padding:12px;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(5,7,5,.98),rgba(5,7,5,.62) 43%,rgba(5,7,5,.9)),
    linear-gradient(0deg,rgba(5,7,5,.9),transparent 48%),
    url("assets/maps/blackwood.webp") center 52%/cover no-repeat;
}
#menu::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.44;
  background:
    linear-gradient(rgba(233,255,69,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(233,255,69,.026) 1px,transparent 1px),
    radial-gradient(circle at 71% 22%,rgba(99,237,240,.09),transparent 28%);
  background-size:64px 64px,64px 64px,auto;
}
#menu::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;
  background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(255,255,255,.018) 3px 4px);
}
#menu .lobby,#menu .lobby:has(#playPanel.on){
  position:relative;z-index:1;
  width:min(1660px,calc(100vw - 24px));
  height:min(960px,calc(100dvh - 24px));
  min-height:620px;
  display:grid;
  grid-template-rows:78px 54px minmax(0,1fr) 82px;
  gap:0;padding:0;overflow:hidden;
  color:var(--cc-text);
  background:linear-gradient(132deg,rgba(10,13,10,.985),rgba(15,19,14,.97) 55%,rgba(7,9,7,.99));
  border:1px solid var(--cc-line-strong);
  box-shadow:var(--cc-shadow),inset 0 0 0 1px rgba(255,255,255,.025);
  clip-path:var(--cc-cut);
}
#menu .lobby::before{
  content:"";position:absolute;z-index:4;inset:0;pointer-events:none;
  border-top:2px solid rgba(233,255,69,.72);
  background:linear-gradient(90deg,rgba(233,255,69,.8),transparent 19%) top left/45% 1px no-repeat;
}

/* Compact identity and primary navigation */
#menu .lobbyTop{
  position:relative;z-index:3;min-height:0;height:78px;padding:9px var(--menu-edge);
  display:grid;grid-template-columns:minmax(230px,300px) minmax(280px,1fr) auto;align-items:center;gap:clamp(14px,2vw,32px);
  background:linear-gradient(96deg,rgba(7,9,7,.99),rgba(20,25,18,.98) 52%,rgba(9,11,9,.99));
  border:0;border-bottom:1px solid var(--cc-line);box-shadow:0 10px 30px rgba(0,0,0,.32);
}
#menu .lobbyTop::after{content:"";position:absolute;left:var(--menu-edge);right:var(--menu-edge);bottom:-1px;height:1px;background:linear-gradient(90deg,var(--cc-primary),rgba(233,255,69,.08) 26%,transparent 60%,rgba(99,237,240,.3))}
#menu .lobbyBrand{min-height:56px;padding-right:20px;border-right:1px solid var(--cc-line)}
#menu .lobbyBrand::before{background:none!important;border:0!important;box-shadow:none!important}
#menu .lobbyBrand::after{display:none}
#menu .x0Logo{gap:11px;font-family:var(--cc-display)}
#menu .x0Emblem{width:50px;height:50px;background:#111711!important;border:1px solid rgba(233,255,69,.38)!important;box-shadow:0 0 0 3px #070907,0 0 24px rgba(233,255,69,.12)!important;clip-path:polygon(50% 0,94% 17%,86% 78%,50% 100%,14% 78%,6% 17%)}
#menu .x0Emblem img{filter:saturate(.65) sepia(.3) drop-shadow(0 0 9px rgba(233,255,69,.3))}
#menu .x0WordLine{font-size:clamp(20px,1.65vw,30px);letter-spacing:.5px}
#menu .x0WordX{color:var(--cc-primary)!important}#menu .x0WordStrikes{color:#fff!important}
#menu .x0Descriptor{margin-top:5px;color:var(--cc-muted)!important;font-size:7px;letter-spacing:2.4px}
#menu .lobbyPitch{min-width:0;padding-left:0;border:0}
#menu .homeEyebrow{display:block;margin-bottom:5px;color:var(--cc-cyan);font:800 8px/1 var(--cc-display);letter-spacing:2.3px}
#menu .lobbyPitch h2{margin:0;color:#fff;font:900 clamp(20px,1.55vw,29px)/.95 var(--cc-display);letter-spacing:.6px;text-transform:uppercase}
#menu .lobbyPitch p{display:none}
#menu .lobbyAccount{align-items:center;gap:8px}
#menu .profileChip{min-width:210px;height:54px;padding:6px 8px;background:linear-gradient(135deg,#1d251c,#0d110d);border:1px solid var(--cc-line-strong);box-shadow:none;clip-path:var(--cc-cut)}
#menu .profileChip:hover{border-color:var(--cc-primary);transform:translateY(-1px)}
#menu .profileAvatar{background:linear-gradient(145deg,var(--cc-primary),#879512);color:#11140d;border:1px solid #f7ffac}
#menu .profileMeta b{color:#fff;font-family:var(--cc-display);letter-spacing:.8px}
#menu .profileMeta>span{color:var(--cc-muted)}
#menu .profileXp{background:#080a08;border-color:#262e25}#menu .profileXp i{background:linear-gradient(90deg,var(--cc-primary-deep),var(--cc-primary))}
#menu .levelHex{color:#10140c;background:var(--cc-primary);border-color:#f8ffb4;clip-path:polygon(50% 0,94% 22%,88% 78%,50% 100%,12% 78%,6% 22%)}
#menu .currency{background:#121712;border-color:var(--cc-line);color:#dce3d7}
#menu .lobbyStatus{position:absolute;left:var(--menu-edge);bottom:-45px;z-index:5;display:flex;align-items:center;gap:7px;color:var(--cc-muted);font:700 7px/1 var(--cc-display);letter-spacing:1px;pointer-events:none}
#menu .lobbyStatus b{color:var(--cc-success);font-size:7px}#menu .lobbyStatus b::before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;animation:ccSignal 2.2s ease-in-out infinite}

#menu .lobbyNav,#menu .lobby:has(#playPanel.on) .lobbyNav{
  position:relative;z-index:2;height:54px;min-height:54px;margin:0;padding:0 var(--menu-edge);display:flex;align-items:stretch;gap:0;overflow-x:auto;overflow-y:hidden;
  background:rgba(7,9,7,.97);border:0;border-bottom:1px solid var(--cc-line);box-shadow:0 8px 20px rgba(0,0,0,.22);scrollbar-width:thin;scrollbar-color:var(--cc-primary-deep) #0a0d0a;
}
#menu .lobbyNav .lobbyTab{position:relative;flex:0 0 auto;min-width:112px;min-height:53px;margin:0;padding:10px 16px;color:#7f897b;background:transparent;border:0;border-right:1px solid rgba(255,255,255,.045);font:850 clamp(8px,.62vw,11px)/1 var(--cc-display);letter-spacing:1.25px;text-transform:uppercase;clip-path:none;transition:color .18s ease,background .18s ease}
#menu .lobbyNav .lobbyTab::before{content:"";position:absolute;left:17px;right:17px;bottom:0;height:3px;background:var(--cc-primary);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
#menu .lobbyNav .lobbyTab:hover{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.035),transparent);transform:none}
#menu .lobbyNav .lobbyTab.on{color:#fff;background:linear-gradient(180deg,rgba(233,255,69,.105),rgba(233,255,69,.012));box-shadow:none}
#menu .lobbyNav .lobbyTab.on::before{transform:scaleX(1)}
#menu .adminLobbyLink{flex:0 0 auto;min-width:82px;min-height:53px;margin:0;display:grid;place-items:center;color:#818a7c;background:transparent;border:0;border-left:1px solid rgba(255,255,255,.055);font:800 8px/1 var(--cc-display);letter-spacing:1.2px;clip-path:none}
#menu .adminLobbyLink:first-of-type{margin-left:auto}#menu .adminLobbyLink:hover{color:#11140c;background:var(--cc-primary)}

/* Deployment workspace: operator stage + match configuration */
#menu .lobbyPanel{min-height:0}
#menu .lobbyPanel.on:not(#playPanel){height:100%;padding:clamp(13px,1.2vw,22px);overflow:auto;background:linear-gradient(135deg,rgba(16,20,15,.98),rgba(8,11,8,.99));border:0}
#menu #playPanel.on{height:100%;min-height:0;padding:0;display:grid;grid-template-columns:minmax(0,1.22fr) minmax(430px,.78fr);grid-template-rows:minmax(0,1fr);overflow:hidden;background:#090c09}
#menu .homeStage{height:auto;min-height:0;padding:clamp(14px,1.5vw,26px);display:grid;grid-template-columns:clamp(108px,8vw,142px) minmax(0,1fr) clamp(108px,8vw,142px);gap:clamp(10px,1vw,18px);overflow:hidden;isolation:isolate;background:linear-gradient(90deg,rgba(7,10,7,.98),rgba(24,31,21,.55) 28%,rgba(21,28,19,.32) 66%,rgba(8,11,8,.97)),url("assets/maps/blackwood.webp") center 53%/cover no-repeat;border:0;border-right:1px solid var(--cc-line);box-shadow:inset 0 -90px 110px rgba(0,0,0,.56)}
#menu .homeStage::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(rgba(233,255,69,.027) 1px,transparent 1px),linear-gradient(90deg,rgba(233,255,69,.027) 1px,transparent 1px),radial-gradient(ellipse at 50% 82%,rgba(233,255,69,.13),transparent 36%);background-size:54px 54px,54px 54px,auto;animation:ccGridDrift 18s linear infinite}
#menu .homeStage::after{content:"OPERATOR READY";position:absolute;left:50%;bottom:18px;z-index:2;transform:translateX(-50%);padding:5px 12px;color:#11140c;background:var(--cc-primary);font:900 7px/1 var(--cc-display);letter-spacing:1.5px;box-shadow:0 0 22px rgba(233,255,69,.18)}
#menu .homeRail{z-index:3;justify-content:center;gap:8px}
#menu .homeNavBtn,#menu .homeNavBtn.lobbyTab,#menu .homeRailRight .homeNavBtn{position:relative;width:100%;min-width:0;min-height:55px;margin:0;padding:8px 8px 8px 42px;display:block;color:#e9ede5;background:linear-gradient(135deg,rgba(27,34,25,.95),rgba(10,14,10,.96));border:1px solid var(--cc-line);box-shadow:0 8px 18px rgba(0,0,0,.22);clip-path:var(--cc-cut);text-align:left;text-shadow:none;transition:transform .15s ease,border-color .15s ease,background .15s ease}
#menu .homeRailRight .homeNavBtn{padding:8px 42px 8px 8px;text-align:right}
#menu .homeNavBtn:hover,#menu .homeNavBtn.lobbyTab:hover{transform:translateX(3px);filter:none;border-color:rgba(233,255,69,.7);background:linear-gradient(135deg,#293324,#121812)}
#menu .homeRailRight .homeNavBtn:hover{transform:translateX(-3px)}
#menu .homeNavBtn b{font:900 9px/1 var(--cc-display);letter-spacing:.8px}#menu .homeNavBtn small{margin-top:5px;color:var(--cc-muted);font:750 6px/1 var(--cc-display);letter-spacing:.65px}
#menu .homeIcon,#menu .homeRailRight .homeIcon{position:absolute;left:7px;right:auto;top:9px;width:28px;height:32px;display:grid;place-items:center;color:#11140c;background:var(--cc-primary);border:1px solid #f8ffb1;box-shadow:none;font:900 11px/1 var(--cc-display)}
#menu .homeRailRight .homeIcon{left:auto;right:7px}
#menu .heroShowcase{min-width:0;z-index:2;justify-content:flex-end;background:linear-gradient(90deg,rgba(4,6,4,.52),rgba(13,18,12,.08) 32%,rgba(13,18,12,.08) 68%,rgba(4,6,4,.52));border:1px solid rgba(233,255,69,.08);overflow:hidden}
#menu .heroShowcase::before{border-color:rgba(233,255,69,.18);background:radial-gradient(ellipse at 50% 72%,rgba(233,255,69,.14),rgba(84,106,63,.08) 48%,transparent 72%)}
#menu .operatorBayFrame::after{background:linear-gradient(90deg,transparent,var(--cc-primary),var(--cc-cyan),var(--cc-primary),transparent)}
#menu .operatorBayCode,#menu .operatorBayMode{color:var(--cc-muted)}
#menu .seasonStamp{top:17px;left:17px;color:#fff;background:rgba(8,11,8,.88);border:1px solid var(--cc-line);border-left:3px solid var(--cc-primary)}#menu .seasonStamp b{color:var(--cc-primary)}
#menu .lobbyIdleTag{color:var(--cc-success);background:rgba(8,11,8,.82);border-color:rgba(103,236,163,.3)}
#menu .lobbyHeroCanvas{width:min(100%,430px);height:min(54vh,500px)}
#menu .heroPlate{min-width:min(94%,430px);height:52px;margin-bottom:28px;background:linear-gradient(98deg,#161d15,#232c20 52%,#141a13);border:1px solid rgba(233,255,69,.32);box-shadow:0 8px 22px rgba(0,0,0,.4);clip-path:var(--cc-cut)}
#menu .rankShield{color:#11140c!important;background:var(--cc-primary)!important}#menu .powerStat b{color:var(--cc-cyan)}
#menu .heroRotateHint{color:#fff;background:rgba(7,9,7,.9);border-color:rgba(233,255,69,.4)}

#menu .homeMatchStrip{height:auto;min-height:0;padding:16px;display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:12px;overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(145deg,#111610,#080b08);border:0;border-left:1px solid rgba(255,255,255,.025);box-shadow:inset 16px 0 38px rgba(0,0,0,.2);scrollbar-width:thin;scrollbar-color:var(--cc-primary-deep) #090c09}
#menu .matchSetupGroup{min-height:0;padding:10px;background:linear-gradient(145deg,#171d16,#0c100c);border:1px solid var(--cc-line);border-top:2px solid rgba(99,237,240,.62);box-shadow:0 9px 24px rgba(0,0,0,.2);clip-path:var(--cc-cut)}
#menu .matchSetupGroup.homeModes{border-top-color:var(--cc-primary)}
#menu .matchSetupHead{height:45px;margin-bottom:9px;background:linear-gradient(90deg,#20281e,#111611);border:1px solid var(--cc-line);box-shadow:none}
#menu .matchStep{width:42px;color:#11140c;background:var(--cc-cyan);border:0;font-family:var(--cc-display)}#menu .homeModes .matchStep{background:var(--cc-primary)}
#menu .matchSetupTitle b{color:#fff;font:900 11px/1 var(--cc-display);letter-spacing:1.1px}#menu .matchSetupTitle small{color:var(--cc-muted);font-size:6px;letter-spacing:1px}
#menu .matchOptionCount{color:var(--cc-primary);background:#090c09;border:1px solid var(--cc-line);font-family:var(--cc-display)}
#menu .modeGrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0}
#menu .homeMatchStrip .modeBtn{position:relative;min-height:67px;height:auto;padding:9px 8px 9px 45px;background:linear-gradient(135deg,#1c231a,#10150f);border:1px solid var(--cc-line);box-shadow:none;clip-path:var(--cc-cut);transition:transform .16s ease,border-color .16s ease,background .16s ease}
#menu .homeMatchStrip .modeBtn::after{width:3px;background:var(--mode);opacity:.85}
#menu .homeMatchStrip .modeBtn:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--mode) 72%,white);box-shadow:0 8px 18px rgba(0,0,0,.24)}
#menu .homeMatchStrip .modeBtn.on{background:linear-gradient(110deg,color-mix(in srgb,var(--mode) 18%,#20271d),#121712);border-color:var(--mode);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mode) 26%,transparent),0 0 18px color-mix(in srgb,var(--mode) 10%,transparent)}
#menu .modeIndex{left:8px;top:9px;width:28px;height:28px;color:#10140d;background:#dbe0d2;border:1px solid #fff;font-family:var(--cc-display)}
#menu .modeCopy b{font:900 9px/1.05 var(--cc-display);letter-spacing:.6px}#menu .modeCopy small{margin-top:5px;color:var(--cc-muted);font-size:5px;line-height:1.2}
#menu .modeType{right:7px;bottom:6px;padding:3px 5px;color:#aeb6a8;background:#0b0e0b;border:1px solid var(--cc-line);font-size:5px}
#menu .matchRulePanel{margin-top:8px;padding:7px;background:#111710;border:1px solid var(--cc-line);border-left:3px solid var(--cc-primary);box-shadow:none}
#menu .matchRuleCopy b{font-family:var(--cc-display)}#menu .matchRuleBtn{min-height:28px;color:#aeb6a8;background:#1b221a;border:1px solid var(--cc-line);box-shadow:none;font:900 7px/1 var(--cc-display)}#menu .matchRuleBtn.on,#menu .matchRuleValues .matchRuleBtn.on{color:#10140c;background:var(--cc-primary);border-color:#f7ffad;box-shadow:none}
#menu #mapGrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;align-content:start}
#menu .homeMatchStrip .mapBtn{min-height:92px;height:auto;padding:0;background:#0e120e;border:1px solid var(--cc-line);box-shadow:none;clip-path:var(--cc-cut);overflow:hidden;transition:transform .16s ease,border-color .16s ease}
#menu .homeMatchStrip .mapBtn:hover{transform:translateY(-2px);border-color:var(--map);box-shadow:0 8px 18px rgba(0,0,0,.28)}
#menu .homeMatchStrip .mapBtn.on{border-color:var(--map);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--map) 28%,transparent),0 0 16px color-mix(in srgb,var(--map) 10%,transparent)}
#menu .homeMatchStrip .mapBtnArt img{filter:saturate(.78) contrast(1.12) brightness(.72);transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .2s ease}
#menu .homeMatchStrip .mapBtn:hover .mapBtnArt img,#menu .homeMatchStrip .mapBtn.on .mapBtnArt img{transform:scale(1.07);filter:saturate(1.08) contrast(1.1) brightness(.9)}
#menu .homeMatchStrip .mapBtnCopy{padding:8px;background:linear-gradient(90deg,rgba(6,8,6,.96),rgba(6,8,6,.56) 78%,transparent);border-left:3px solid var(--map)}
#menu .homeMatchStrip .mapBtn b{font:900 9px/1 var(--cc-display)}#menu .homeMatchStrip .mapBtn small{margin-top:4px;color:#d7ded2;font-size:6px}#menu .homeMatchStrip .mapMeta{margin-top:4px;color:var(--cc-muted);font-size:5px}

/* Persistent deployment bar */
#menu .lobbyFooter{position:relative;z-index:3;min-height:82px;height:82px;margin:0;padding:8px var(--menu-edge);display:grid;grid-template-columns:minmax(260px,.8fr) minmax(300px,1.2fr) minmax(220px,310px);align-items:center;gap:12px;background:linear-gradient(90deg,#080b08,#171d16 62%,#0b0f0b);border:0;border-top:1px solid rgba(233,255,69,.34);box-shadow:0 -12px 30px rgba(0,0,0,.28)}
#menu .partyDock{min-width:0;background:rgba(12,16,12,.78);border:1px solid var(--cc-line);clip-path:var(--cc-cut)}
#menu .partyDockHead b{color:var(--cc-primary)}#menu .partyDockHead small{color:var(--cc-muted)}
#menu .partyMiniAction{color:#d9dfd5;background:#171d16;border-color:var(--cc-line)}
#menu .partyMiniAction.alert{color:#11140c;background:var(--cc-primary)}
#menu .lobbyFooter #selectionSummary{justify-self:stretch;min-width:0;min-height:58px;padding:10px 15px;display:flex;flex-direction:column;justify-content:center;color:#aab2a5;background:linear-gradient(90deg,#181f17,#0e120e);border:1px solid var(--cc-line);border-left:3px solid var(--cc-cyan);font:800 8px/1.45 var(--cc-display);letter-spacing:1px;clip-path:var(--cc-cut)}
#menu .lobbyFooter #selectionSummary::before{content:"DEPLOYMENT CONFIGURATION";display:block;margin-bottom:5px;color:var(--cc-cyan);font-size:6px;letter-spacing:1.5px}
#menu .lobbyFooter #selectionSummary b{color:#fff;font-size:10px}
#menu .lobbyFooter #playBtn{position:relative;justify-self:stretch;width:100%;min-width:0;min-height:60px;padding:12px 24px;overflow:hidden;color:#10140c;background:linear-gradient(105deg,#f6ff96,var(--cc-primary) 45%,#bfd521);border:1px solid #f8ffb0;box-shadow:0 5px 0 #596608,0 0 28px rgba(233,255,69,.16);clip-path:var(--cc-cut);font:900 clamp(16px,1.25vw,22px)/1 var(--cc-display);letter-spacing:1px;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
#menu .lobbyFooter #playBtn::before{content:"";position:absolute;inset:-35% auto -35% -40%;width:28%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);transform:skewX(-18deg);animation:ccButtonSweep 3.6s ease-in-out infinite}
#menu .lobbyFooter #playBtn::after{content:"FIND OR CREATE MATCH";position:relative;display:block;margin-top:6px;color:#53600a;font:900 6px/1 var(--cc-display);letter-spacing:1.45px}
#menu .lobbyFooter #playBtn:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 7px 0 #596608,0 0 36px rgba(233,255,69,.24)}
#menu .lobbyFooter #playBtn:active{transform:translateY(3px);box-shadow:0 2px 0 #596608}

/* The deployment bar belongs to Play and Matchmaking only. Secondary pages get
   the full workspace instead of competing with an unrelated Start button. */
#menu .lobby:has(.lobbyPanel.on:not(#playPanel):not(#roomsPanel)){grid-template-rows:78px 54px minmax(0,1fr) 0}
#menu .lobby:has(.lobbyPanel.on:not(#playPanel):not(#roomsPanel))>.lobbyFooter{display:none}

/* Settings command center */
#menu #settingsPanel.on{padding:12px;display:flex;flex-direction:column;gap:10px;overflow:hidden;background:linear-gradient(135deg,#10150f,#080b08)}
#menu .settingsHero{position:relative;flex:0 0 auto;min-height:88px;margin:0;padding:15px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px;overflow:hidden;color:#fff;background:linear-gradient(90deg,rgba(8,11,8,.98),rgba(23,31,21,.9)),url("assets/maps/neon-facility.webp") center 53%/cover;border:1px solid var(--cc-line-strong);border-left:4px solid var(--cc-primary);box-shadow:0 8px 24px rgba(0,0,0,.22);clip-path:var(--cc-cut)}
#menu .settingsHero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,8,6,.94),rgba(6,8,6,.58) 55%,rgba(6,8,6,.82));pointer-events:none}
#menu .settingsHero::after{content:"";position:absolute;right:11%;top:-130%;width:150px;height:360%;border:1px solid rgba(99,237,240,.2);transform:rotate(23deg);box-shadow:28px 0 rgba(99,237,240,.035),56px 0 rgba(233,255,69,.025)}
#menu .settingsHeroCopy,#menu .settingsHeroStatus{position:relative;z-index:1}
#menu .settingsHeroEyebrow{display:block;color:var(--cc-primary);font:850 7px/1 var(--cc-display);letter-spacing:2px}
#menu .settingsHero h2{margin-top:7px;color:#fff;font:900 clamp(23px,1.7vw,32px)/.9 var(--cc-display);letter-spacing:.8px}
#menu .settingsHero p{max-width:720px;margin-top:7px;color:#a7b0a1;font:650 9px/1.35 var(--cc-body)}
#menu .settingsHeroStatus{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
#menu .settingsHeroStatus span{min-width:100px;padding:8px 10px;color:#c6cec0;background:rgba(8,11,8,.82);border:1px solid var(--cc-line);text-align:center;font:850 6px/1 var(--cc-display);letter-spacing:1px}
#menu .settingsHeroStatus span::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--cc-success);box-shadow:0 0 9px currentColor}
#menu #settingsSaveIndicator[data-state="saving"]::before{background:var(--cc-primary)}#menu #settingsSaveIndicator[data-state="error"]::before{background:var(--cc-danger)}
#menu .settingsWorkspace{min-height:0;flex:1;display:grid;grid-template-columns:220px minmax(0,1fr);gap:10px;overflow:hidden}
#menu .settingsSidebar{min-height:0;padding:12px;display:flex;flex-direction:column;background:linear-gradient(180deg,#151b14,#0b0e0b);border:1px solid var(--cc-line);clip-path:var(--cc-cut)}
#menu .settingsSidebarTitle{padding:3px 4px 11px;border-bottom:1px solid var(--cc-line)}
#menu .settingsSidebarTitle small{display:block;color:var(--cc-primary);font:800 6px/1 var(--cc-display);letter-spacing:1.6px}#menu .settingsSidebarTitle b{display:block;margin-top:5px;color:#fff;font:900 12px/1 var(--cc-display);letter-spacing:1px}
#menu .settingsCategoryNav{display:grid;gap:5px;margin-top:10px}
#menu .settingsCategoryNav button{position:relative;min-height:52px;padding:8px 8px 8px 49px;color:#858f81;background:#111611;border:1px solid var(--cc-line);text-align:left;clip-path:var(--cc-cut);font:850 9px/1 var(--cc-display);letter-spacing:.8px;transition:background .15s ease,border-color .15s ease,transform .15s ease}
#menu .settingsCategoryNav button>span{position:absolute;left:7px;top:8px;width:31px;height:34px;display:grid;place-items:center;color:#10140c;background:#8e9988;border:1px solid #b8c0b4;font:900 8px/1 var(--cc-display)}
#menu .settingsCategoryNav button small{display:block;margin-top:5px;color:#5f695c;font:750 5px/1 var(--cc-display);letter-spacing:.85px}
#menu .settingsCategoryNav button:hover{color:#fff;border-color:rgba(233,255,69,.56);transform:translateX(2px)}
#menu .settingsCategoryNav button.on{color:#fff;background:linear-gradient(100deg,rgba(233,255,69,.15),#151b14);border-color:rgba(233,255,69,.62);box-shadow:inset 3px 0 var(--cc-primary)}
#menu .settingsCategoryNav button.on>span{color:#11140c;background:var(--cc-primary);border-color:#f7ffad}#menu .settingsCategoryNav button.on small{color:#b8c1b2}
#menu .settingsDeviceStatus{margin-top:auto;padding:10px;background:#0a0d0a;border:1px solid var(--cc-line)}
#menu .settingsDeviceStatus>span{display:flex;align-items:center;color:var(--cc-muted);font:800 6px/1 var(--cc-display);letter-spacing:1px}.settingsDeviceStatus i{width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--cc-success);box-shadow:0 0 8px var(--cc-success)}
#menu .settingsDeviceStatus b{display:block;margin-top:7px;color:#fff;font:900 9px/1 var(--cc-display)}#menu .settingsDeviceStatus small{display:block;margin-top:5px;color:var(--cc-dim);font-size:6px;line-height:1.35}
#menu .settingsContent{min-height:0;padding:0 5px 12px 0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--cc-primary-deep) #090c09}
#menu .settingsCategory{margin-bottom:12px;padding:11px;background:linear-gradient(145deg,#141a13,#0b0f0b);border:1px solid var(--cc-line);clip-path:var(--cc-cut);animation:ccSettingsIn .26s ease both}
#menu .settingsCategory[hidden]{display:none!important}
#menu .settingsGroup{min-height:42px;margin:0 0 10px;padding:0 4px;display:flex;align-items:center;gap:10px;color:#fff;background:transparent;border:0;border-bottom:1px solid var(--cc-line);box-shadow:none}
#menu .settingsGroup::before{content:attr(data-settings-icon);width:31px;height:31px;display:grid;place-items:center;flex:0 0 auto;color:#10140c;background:var(--group-accent,var(--cc-primary));border:1px solid rgba(255,255,255,.6);font:900 6px/1 var(--cc-display)}
#menu .settingsGroup::after{display:none}
#menu .settingsGroup>span{display:grid;gap:3px}.settingsGroup b{font:900 11px/1 var(--cc-display);letter-spacing:1px}.settingsGroup small{color:var(--cc-muted);font:650 7px/1.25 var(--cc-body)}
#menu .settingsGroup em{margin-left:auto;padding:5px 7px;color:var(--group-accent,var(--cc-primary));background:#0a0e0a;border:1px solid var(--cc-line);font:850 5px/1 var(--cc-display);font-style:normal;letter-spacing:.8px}
#menu .settingsCategoryGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#menu #settingsPanel .setting{position:relative;min-height:112px;padding:13px 13px 12px 59px;overflow:hidden;background:linear-gradient(145deg,#1c241b,#10150f);border:1px solid var(--cc-line);box-shadow:none;clip-path:var(--cc-cut);transition:transform .15s ease,border-color .15s ease,background .15s ease}
#menu #settingsPanel .setting::before{content:attr(data-setting-icon);position:absolute;left:12px;top:13px;width:32px;height:32px;display:grid;place-items:center;color:#10140c;background:var(--setting-accent,var(--cc-primary));border:1px solid rgba(255,255,255,.55);font:900 7px/1 var(--cc-display)}
#menu #settingsPanel .setting::after{content:"";position:absolute;left:0;bottom:0;width:3px;height:100%;background:var(--setting-accent,var(--cc-primary));opacity:.48}
#menu #settingsPanel .setting:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--setting-accent,var(--cc-primary)) 58%,#313a2e);background:linear-gradient(145deg,#222b20,#121812)}
#menu #settingsPanel .setting label{margin:0 0 11px;display:flex;justify-content:space-between;gap:10px;color:#fff;font:850 9px/1 var(--cc-display);letter-spacing:.8px;text-transform:uppercase}
#menu #settingsPanel .setting label span{padding:4px 6px;color:#10140c;background:var(--setting-accent,var(--cc-primary));border:0;font:900 6px/1 var(--cc-display);letter-spacing:.6px}
#menu #settingsPanel .setting .hint{display:block;margin-top:8px;color:#748070;font:600 6px/1.35 var(--cc-body);letter-spacing:.2px}
#menu #settingsPanel .setting input[type=range]{--setting-progress:50%;width:100%;height:18px;margin:1px 0 0;appearance:none;background:transparent;outline:0;cursor:pointer}
#menu #settingsPanel .setting input[type=range]::-webkit-slider-runnable-track{height:7px;background:linear-gradient(90deg,var(--setting-accent,var(--cc-primary)) 0 var(--setting-progress),#090c09 var(--setting-progress) 100%);border:1px solid #30382e}
#menu #settingsPanel .setting input[type=range]::-webkit-slider-thumb{width:17px;height:17px;margin-top:-6px;appearance:none;background:#fff;border:2px solid #0a0d0a;border-radius:0;box-shadow:0 0 12px color-mix(in srgb,var(--setting-accent,var(--cc-primary)) 50%,transparent)}
#menu #settingsPanel .toggleRow{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;background:#090c09;border:1px solid var(--cc-line)}
#menu #settingsPanel .toggleBtn{min-height:34px;padding:8px;color:#7f8a7b;background:#171d16;border:0;box-shadow:none;font:900 7px/1 var(--cc-display);letter-spacing:.9px}
#menu #settingsPanel .toggleBtn:hover{color:#fff;background:#273025}#menu #settingsPanel .toggleBtn.on{color:#10140c;background:var(--setting-accent,var(--cc-success));box-shadow:inset 0 -3px rgba(0,0,0,.14)}#menu #settingsPanel .toggleBtn[data-value="off"].on{color:#fff;background:#b43e4c}#menu #settingsPanel .toggleBtn.on::before{content:"✓";margin-right:5px}
#menu #settingsPanel .setting select{width:100%;height:36px;padding:0 34px 0 10px;appearance:none;color:#fff;background:linear-gradient(45deg,transparent 50%,var(--cc-cyan) 50%) calc(100% - 14px) 14px/6px 6px no-repeat,linear-gradient(135deg,var(--cc-cyan) 50%,transparent 50%) calc(100% - 8px) 14px/6px 6px no-repeat,#0b0f0b;border:1px solid var(--cc-line-strong);outline:0;font:850 7px/1 var(--cc-display);letter-spacing:.65px}
#menu #settingsPanel .setting .pauseToggle,#menu #settingsPanel .settingStatus{min-height:36px;margin:0;padding:9px 12px;color:#10140c;background:var(--setting-accent,var(--cc-cyan));border:1px solid rgba(255,255,255,.52);box-shadow:none;font:900 7px/1 var(--cc-display);letter-spacing:.8px}
#menu #settingsPanel #lobbyMuteBtn.muted{color:#fff;background:var(--cc-danger)}
#menu .musicConsole{min-height:94px;margin-bottom:8px;padding:11px;display:grid;grid-template-columns:minmax(210px,1fr) auto 80px;align-items:center;gap:12px;background:radial-gradient(circle at 12% 15%,rgba(99,237,240,.12),transparent 37%),linear-gradient(135deg,#101710,#1b2419);border:1px solid var(--cc-line);box-shadow:none;clip-path:var(--cc-cut)}
#menu .musicBadge{color:#11140c;background:var(--cc-primary);border-color:#f8ffb0}.musicNow small{color:var(--cc-cyan)}.musicNow b{color:#fff;font-family:var(--cc-display)}.musicNow em{color:var(--cc-muted)}
#menu .musicTransport{display:flex;gap:5px}.musicControl{min-width:64px;min-height:35px;color:#cbd2c6;background:#20281e;border:1px solid var(--cc-line);box-shadow:none;font:850 6px/1 var(--cc-display)}.musicControl.primary{color:#10140c;background:var(--cc-primary);border-color:#f7ffac}.musicControl.on{color:#10140c;background:var(--cc-cyan)}
#menu .musicBars i{background:linear-gradient(180deg,var(--cc-cyan),var(--cc-primary))}
#menu .settingsInfoStrip{min-height:39px;margin-top:8px;padding:8px 11px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--cc-muted);background:#090c09;border:1px solid var(--cc-line);font:750 6px/1.3 var(--cc-display);letter-spacing:.7px}.settingsInfoStrip b{color:var(--cc-primary);letter-spacing:1.2px}
#menu .settingsInfoCard{min-height:70px;margin-top:8px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(90deg,rgba(167,121,255,.12),#111611);border:1px solid var(--cc-line);border-left:3px solid #a779ff;clip-path:var(--cc-cut)}
#menu .settingsInfoCard b{display:block;color:#fff;font:900 10px/1 var(--cc-display);letter-spacing:1px}.settingsInfoCard small{display:block;margin-top:6px;color:var(--cc-muted);font-size:7px}.settingsInfoCard strong{color:#d9c7ff;font:900 7px/1.2 var(--cc-display);letter-spacing:.7px;text-align:right}
#menu .settingsInputProfiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#menu .settingsInputProfiles article{min-height:118px;padding:13px;display:grid;grid-template-columns:45px 1fr;align-items:start;gap:11px;background:linear-gradient(145deg,#1d241b,#10150f);border:1px solid var(--cc-line);clip-path:var(--cc-cut)}
#menu .settingsInputProfiles article>span{width:43px;height:43px;display:grid;place-items:center;color:#10140c;background:#ffb84d;border:1px solid #ffe0a9;font:900 8px/1 var(--cc-display)}
#menu .settingsInputProfiles b{display:block;color:#fff;font:900 10px/1 var(--cc-display);letter-spacing:.8px}.settingsInputProfiles small{display:block;margin-top:8px;color:#8d9788;font:700 6px/1.55 var(--cc-body);letter-spacing:.25px}
#menu .settingsActions{min-height:64px;padding:11px 13px;display:flex;align-items:center;gap:12px;color:#fff;background:linear-gradient(90deg,#171e16,#10140f);border:1px solid var(--cc-line);border-left:3px solid var(--cc-primary);clip-path:var(--cc-cut)}
#menu .settingsActions::before{content:"!";width:32px;height:32px;display:grid;place-items:center;flex:0 0 auto;color:#10140c;background:var(--cc-primary);font:900 12px/1 var(--cc-display)}
#menu .settingsActions span{margin-right:auto}.settingsActions b{display:block;font:900 9px/1 var(--cc-display)}.settingsActions small{display:block;margin-top:5px;color:var(--cc-muted);font-size:6px}
#menu .settingsActions button{min-width:142px;min-height:38px;color:#10140c;background:var(--cc-primary);border:1px solid #f8ffb1;font:900 7px/1 var(--cc-display);letter-spacing:.8px}
#menu #settingsResetBtn[data-confirm-reset="true"],#pause #pauseResetSettingsBtn[data-confirm-reset="true"]{color:#fff;background:var(--cc-danger);border-color:#ffb0a6;box-shadow:0 0 0 3px rgba(255,92,75,.14)}

/* Secondary lobby panels inherit the same tactical component system. */
#menu .sectionTitle{color:#fff;font:900 clamp(19px,1.4vw,27px)/1 var(--cc-display);letter-spacing:.7px;text-transform:uppercase}.sectionTitle::before{content:"// ";color:var(--cc-primary)}
#menu .sectionHint{color:var(--cc-muted)}
#menu .utilityHead,#menu .operatorToolbar,#menu .roomPaneHead{background:linear-gradient(90deg,#1e261c,#10150f);border:1px solid var(--cc-line);border-left:3px solid var(--cc-primary);box-shadow:none;clip-path:var(--cc-cut)}
#menu .roomsShell{gap:10px}.roomPane{background:linear-gradient(145deg,#151b14,#0b0f0b);border-color:var(--cc-line);box-shadow:none;clip-path:var(--cc-cut)}
#menu .roomFlowCard{background:linear-gradient(120deg,rgba(233,255,69,.1),#111711);border-color:var(--cc-line);border-left-color:var(--cc-primary)}.roomQuickPlay,.roomCreateForm button,.roomAction:not(.danger){color:#10140c!important;background:var(--cc-primary)!important;border-color:#f8ffb0!important}.roomNetworkBadge{color:var(--cc-success);background:#0a0d0a;border-color:var(--cc-line)}
#menu .roomCustomBlock,#menu .roomList,#menu .roomLobbyEmpty,#menu .roomLobbyView{background:#0d110d;border-color:var(--cc-line)}
#menu .roomCard,#menu .roomOperatorCard,#menu .roomClassCard{background:#171d16;border-color:var(--cc-line)}
#menu .roomCard.live{border-color:rgba(214,45,74,.55)}#menu .roomCardMeta .roomLiveBadge{color:#fff;background:#d62d4a;border-color:#ff8aa0}#menu .roomCardMeta .roomElapsed{color:#ffd21c;background:#0d110d;border-color:rgba(255,210,28,.22)}
#menu .roomClassChoice[aria-checked="true"],#menu .roomClassChoice.on{color:#10140c;background:var(--cc-primary);border-color:#f8ffad}
#menu .operatorFilter.on,#menu .storeFilter.on{color:#10140c;background:var(--cc-primary);border-color:#f8ffad;box-shadow:none}
#menu .operatorFactionGrid .operator,#menu .storeOperatorCard,#menu .skinSwatch{background:linear-gradient(145deg,#1b2219,#0e120e);border-color:var(--cc-line);box-shadow:none;clip-path:var(--cc-cut)}
#menu .operatorFactionGrid .operator:hover,#menu .operatorFactionGrid .operator.on,#menu .storeOperatorCard:hover,#menu .skinBtn.on .skinSwatch{border-color:var(--cc-primary);box-shadow:inset 0 0 0 1px rgba(233,255,69,.22),0 10px 24px rgba(0,0,0,.22)}
#menu .bpHero,#menu .profileHeroCard,#menu .profileEditor,#menu .operatorStoreHero{border-color:var(--cc-line);box-shadow:none;clip-path:var(--cc-cut)}
#menu .bpPremiumButton,#menu .bpClaimAll,#menu .bpTrackClaim,#menu .profileNameForm button,#menu .profileCrateShelf button{color:#10140c;background:var(--cc-primary);border-color:#f8ffad}

/* Combat HUD: compact information zones with a stable z-index contract. */
#hud{--z-hud:40;--hud-accent:var(--cc-primary);z-index:var(--z-hud);font-family:var(--cc-body)}
#hud .glass{background:linear-gradient(135deg,rgba(13,17,13,.94),rgba(5,7,5,.91));border:1px solid rgba(233,255,69,.22);border-radius:0;box-shadow:0 12px 32px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.035);clip-path:var(--cc-cut)}
#topBar{border-top-color:var(--cc-primary);font-family:var(--cc-display)}#topBar .you,#wName,#cashValue{color:var(--cc-primary)}
#minimap{border-color:var(--cc-line-strong);border-top-color:var(--cc-primary);clip-path:var(--cc-cut)}
#healthBox{border-left-color:var(--cc-primary)}#hpBar{background:linear-gradient(90deg,#d64c42,#ed9a27 46%,var(--cc-primary))}#aimFocusBar{background:linear-gradient(90deg,var(--cc-primary-deep),var(--cc-primary))}
#ammoBox{border-right-color:var(--cc-primary)}.slot.on{color:#10140c;background:var(--cc-primary)}
#killfeed{z-index:43}.kf{background:rgba(10,13,10,.93);border-color:var(--cc-line);border-right:3px solid var(--cc-primary);clip-path:var(--cc-cut)}
#interactionPrompt{border-left-color:var(--cc-primary);clip-path:var(--cc-cut)}#interactionPrompt kbd{color:#10140c;background:var(--cc-primary)}

/* Pause and system overlays */
#pause{--z-overlay:70;z-index:var(--z-overlay);background:rgba(3,5,3,.86);backdrop-filter:blur(9px)}
#pause .matchMenu{background:linear-gradient(145deg,#1b2219,#0a0d0a);border:1px solid var(--cc-line-strong);box-shadow:0 30px 90px rgba(0,0,0,.72);clip-path:var(--cc-cut)}
#pause .matchMenuHeader{background:linear-gradient(90deg,#242d21,#121712);border-bottom-color:var(--cc-line);border-left:4px solid var(--cc-primary)}
#pause .matchMenuTitle h1{font-family:var(--cc-display)}#pause .matchMenuTitle h1 span,#pause .matchMenuTitle small{color:var(--cc-primary)}
#pause .matchMenuNav{background:linear-gradient(180deg,#141a13,#090c09);border-right-color:var(--cc-line)}
#pause .pauseNavBtn{color:#929c8e;background:#171d16;border:1px solid var(--cc-line);font-family:var(--cc-display)}#pause .pauseNavBtn.on,#pause .pauseNavBtn.resume{color:#10140c;background:var(--cc-primary);border-color:#f8ffad;box-shadow:none}
#pause .matchMenuContent{background:radial-gradient(circle at 88% 8%,rgba(233,255,69,.045),transparent 30%)}
#pause .pauseSetting,#pause .matchOverviewCard{background:#151b14;border-color:var(--cc-line);box-shadow:none;clip-path:var(--cc-cut)}
#pause .matchMenuFooter{background:#080b08;border-top-color:var(--cc-line)}#pause .matchAction.return{color:#10140c;background:var(--cc-primary);border-color:#f8ffad}
#loading{background:linear-gradient(90deg,rgba(5,7,5,.96),rgba(5,7,5,.42),rgba(5,7,5,.9)),url("assets/maps/blackwood.webp") center/cover no-repeat}#loading .loadPanel{background:rgba(8,11,8,.91);border-left-color:var(--cc-primary);clip-path:var(--cc-cut)}#loading .loadMap,#loadPct{color:var(--cc-primary)}.loadTrack div{background:linear-gradient(90deg,var(--cc-primary-deep),var(--cc-primary))}
#over .panel,#exitScreen .exitPanel{background:linear-gradient(145deg,#1b2219,#090c09);border-color:var(--cc-line);border-top-color:var(--cc-primary);clip-path:var(--cc-cut)}#over .btn,#exitScreen .btn{color:#10140c;background:var(--cc-primary);border-color:#f8ffad}

@keyframes ccSettingsIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

@keyframes ccSignal{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
@keyframes ccGridDrift{from{background-position:0 0,0 0,center}to{background-position:54px 54px,54px 54px,center}}
@keyframes ccButtonSweep{0%,58%{left:-42%}84%,100%{left:132%}}

@media (max-width:1180px){
  #menu #playPanel.on{grid-template-columns:minmax(0,1fr) minmax(390px,.82fr)}
  #menu .homeStage{grid-template-columns:96px minmax(0,1fr) 96px;padding:12px;gap:8px}
  #menu .homeNavBtn,#menu .homeNavBtn.lobbyTab,#menu .homeRailRight .homeNavBtn{min-height:49px;padding-left:36px}
  #menu .homeRailRight .homeNavBtn{padding-left:6px;padding-right:36px}
  #menu .homeIcon,#menu .homeRailRight .homeIcon{width:24px;height:28px;font-size:9px}
  #menu .lobbyNav .lobbyTab{min-width:96px;padding-inline:10px}
}

@media (max-width:900px),(max-height:560px){
  #menu{padding:0;align-items:stretch;overflow:hidden}
  #menu .lobby,#menu .lobby:has(#playPanel.on){width:100vw;height:100dvh;min-height:0;border:0;clip-path:none;grid-template-rows:54px 44px minmax(0,1fr) 60px}
  #menu .lobbyTop{height:54px;padding:5px max(8px,env(safe-area-inset-left));grid-template-columns:minmax(165px,230px) 1fr auto;gap:8px}
  #menu .lobbyBrand{min-height:42px;padding-right:8px}.x0Emblem{width:38px!important;height:38px!important}.x0WordLine{font-size:18px!important}.x0Descriptor{font-size:5px!important}
  #menu .lobbyPitch{display:none}#menu .profileChip{min-width:150px;height:43px}.profileMeta>span:not(.profileXp),#menu .currencyStack{display:none}#menu .levelHex{width:29px;height:29px}
  #menu .lobbyStatus{display:none}
  #menu .lobbyNav,#menu .lobby:has(#playPanel.on) .lobbyNav{height:44px;min-height:44px;padding:0;overflow-x:auto}
  #menu .lobbyNav .lobbyTab{min-width:100px;min-height:44px;padding:8px 9px;font-size:8px}
  #menu .adminLobbyLink{min-width:68px;min-height:44px;font-size:6px}
  #menu #playPanel.on{grid-template-columns:minmax(270px,.74fr) minmax(360px,1.26fr)}
  #menu .homeStage{grid-template-columns:1fr;padding:5px;border-right:1px solid var(--cc-line)}
  #menu .homeRail{display:none}
  #menu .heroShowcase{height:100%;border:0}.operatorBayFrame,.heroVitals,.lobbyIdleTag,.heroRotateHint{display:none!important}
  #menu .seasonStamp{top:7px;left:7px;font-size:6px}
  #menu .lobbyHeroCanvas{width:100%;height:100%}
  #menu .heroPlate{position:absolute;left:7px;right:7px;bottom:5px;min-width:0;width:auto;height:37px;margin:0;grid-template-columns:34px 1fr 46px}
  #menu .heroPlate>span:nth-child(2)>b{font-size:9px}#menu .heroPlate small{font-size:5px}
  #menu .homeStage::after{bottom:47px;font-size:5px}
  #menu .homeMatchStrip{padding:6px;gap:6px;grid-template-columns:1fr 1fr;grid-template-rows:1fr;overflow:auto}
  #menu .matchSetupGroup{padding:5px;min-width:0}.matchSetupHead{height:31px;margin-bottom:4px}.matchStep{width:30px}.matchSetupTitle b{font-size:7px}.matchSetupTitle small,.matchOptionCount{font-size:4px}
  #menu .modeGrid{gap:3px}.homeMatchStrip .modeBtn{min-height:52px!important;padding:6px 5px 6px 32px!important}.modeIndex{left:4px!important;top:6px!important;width:22px!important;height:22px!important;font-size:7px!important}.modeCopy b{font-size:8px!important}.modeCopy small,.modeType{display:none!important}
  #menu .matchRulePanel{margin-top:4px;padding:3px}.matchRuleCopy{display:none}.matchRuleBtn{min-height:32px!important;padding:4px!important;font-size:5px!important}
  #menu #mapGrid{gap:3px}.homeMatchStrip .mapBtn{min-height:54px!important}.homeMatchStrip .mapBtnCopy{padding:6px!important}.homeMatchStrip .mapBtn b{font-size:8px!important}.homeMatchStrip .mapBtn small,.homeMatchStrip .mapMeta{display:none!important}
  #menu .lobbyFooter{height:60px;min-height:60px;padding:4px max(7px,env(safe-area-inset-right));grid-template-columns:minmax(0,1fr) minmax(170px,230px);gap:6px}
  #menu .partyDock{display:none}.lobbyFooter #selectionSummary{min-height:49px!important;padding:6px 9px!important;font-size:7px!important}.lobbyFooter #selectionSummary::before{margin-bottom:3px!important;font-size:5px!important}.lobbyFooter #selectionSummary b{font-size:9px!important}
  #menu .lobbyFooter #playBtn{min-height:49px;font-size:14px}.lobbyFooter #playBtn::after{margin-top:4px!important;font-size:4px!important}
  #menu .lobby:has(.lobbyPanel.on:not(#playPanel):not(#roomsPanel)){grid-template-rows:54px 44px minmax(0,1fr) 0}
  #menu #settingsPanel.on{padding:5px;gap:5px}
  #menu .settingsHero{min-height:52px;padding:8px 10px}.settingsHeroEyebrow,.settingsHero p,.settingsHeroStatus>span:first-child{display:none!important}.settingsHero h2{margin:0!important;font-size:16px!important}.settingsHeroStatus span{min-width:82px!important;padding:6px!important;font-size:5px!important}
  #menu .settingsWorkspace{grid-template-columns:1fr;grid-template-rows:52px minmax(0,1fr);gap:5px}
  #menu .settingsSidebar{padding:3px;display:block;overflow:hidden;clip-path:none}.settingsSidebarTitle,.settingsDeviceStatus{display:none!important}
  #menu .settingsCategoryNav{height:46px;margin:0;display:flex;gap:3px;overflow-x:auto;scrollbar-width:none}.settingsCategoryNav button{flex:0 0 120px;min-height:44px!important;padding:6px 5px 5px 36px!important;font-size:6px!important}.settingsCategoryNav button>span{left:4px!important;top:4px!important;width:27px!important;height:34px!important;font-size:6px!important}.settingsCategoryNav button small{font-size:4px!important;margin-top:3px!important}
  #menu .settingsContent{padding:0 2px 7px 0}.settingsCategory{margin-bottom:6px;padding:6px;clip-path:none}.settingsGroup{min-height:31px!important;margin-bottom:5px!important}.settingsGroup::before{width:24px!important;height:24px!important;font-size:5px!important}.settingsGroup b{font-size:7px!important}.settingsGroup small,.settingsGroup em{display:none!important}
  #menu .settingsCategoryGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.settingsCategoryGrid .setting{min-height:98px!important;padding:8px 7px 7px 41px!important;clip-path:none}.settingsCategoryGrid .setting::before{left:7px!important;top:8px!important;width:27px!important;height:27px!important;font-size:6px!important}.settingsCategoryGrid .setting label{margin-bottom:7px!important;font-size:8px!important}.settingsCategoryGrid .setting label span{font-size:6px!important}.settingsCategoryGrid .setting .hint{display:none!important}.settingsCategoryGrid .toggleBtn{min-height:44px!important;padding:7px!important;font-size:7px!important}.settingsCategoryGrid .pauseToggle,.settingsCategoryGrid select{min-height:44px!important;height:44px!important;font-size:7px!important}.settingsCategoryGrid input[type=range]{height:30px!important}
  #menu .musicConsole{min-height:60px;margin-bottom:4px;padding:6px;grid-template-columns:1fr auto;gap:5px;clip-path:none}.musicBars{display:none}.musicNow small,.musicNow em{font-size:4px!important}.musicNow b{font-size:7px!important}.musicTransport{gap:2px}.musicControl{min-width:43px!important;min-height:27px!important;padding:4px!important;font-size:4px!important}
  #menu .settingsInfoStrip{min-height:29px;margin-top:4px;padding:5px;font-size:4px}.settingsInfoCard{min-height:49px;margin-top:4px;padding:6px}.settingsInfoCard b{font-size:6px}.settingsInfoCard small{font-size:4px}.settingsInfoCard strong{font-size:4px}
  #menu .settingsInputProfiles{grid-template-columns:1fr;gap:4px}.settingsInputProfiles article{min-height:52px;padding:6px;grid-template-columns:32px 1fr;gap:6px;clip-path:none}.settingsInputProfiles article>span{width:30px;height:30px;font-size:5px}.settingsInputProfiles b{font-size:6px}.settingsInputProfiles small{margin-top:4px;font-size:4px;line-height:1.3}
  #menu .settingsActions{min-height:45px;padding:6px}.settingsActions::before{width:27px;height:27px}.settingsActions b{font-size:6px}.settingsActions small{display:none}.settingsActions button{min-width:105px;min-height:29px;font-size:5px}
  #hud #ammoBox{top:calc(var(--mobile-safe-top) + 48px)!important;right:var(--mobile-safe-right)!important;bottom:auto!important;width:clamp(150px,24vw,188px)!important}
  #hud #killfeed{top:calc(var(--mobile-safe-top) + 148px)!important;right:var(--mobile-safe-right)!important;max-width:190px!important}
  #pause .matchMenu{width:100vw;height:100dvh;border:0;clip-path:none}
  #pause .matchMenuHeader{min-height:43px;padding:6px 10px}.matchMenuTitle h1{font-size:18px!important}.matchMenuTitle small{display:none!important}
  #pause .matchMenuBody{min-height:0;display:grid;grid-template-columns:1fr!important;grid-template-rows:43px minmax(0,1fr)}
  #pause .matchMenuNav{min-height:43px;padding:4px!important;display:flex!important;gap:3px;overflow-x:auto;overflow-y:hidden;border:0;border-bottom:1px solid var(--cc-line);scrollbar-width:none}
  #pause .pauseNavBtn{flex:0 0 101px!important;min-height:34px!important;padding:5px!important;font-size:6px!important;line-height:1!important;white-space:nowrap}#pause .pauseNavBtn::before{font-size:8px!important;margin-right:4px!important}
  #pause .matchMenuContent{min-height:0;padding:8px!important;overflow-y:auto}.pausePageHead{margin-bottom:6px!important}.pausePageHead h2{font-size:16px!important}.pausePageHead p{font-size:6px!important}.pauseSettingsGrid{grid-template-columns:1fr 1fr!important;gap:5px!important}.pauseSetting{min-height:64px!important;padding:7px!important}.pauseSetting label{font-size:6px!important}
  #pause .matchMenuFooter{min-height:38px;padding:4px 8px}.matchAction{min-height:30px!important;padding:5px 12px!important;font-size:6px!important}
}

@media (max-width:700px) and (orientation:portrait){
  /* The desktop shell centres the lobby inside the flex column. A portrait phone lobby is
     taller than the viewport, so centring pushed the header and the tab row above the
     scrollable area where no scroll could reach them. Anchor it to the top instead. */
  #menu{overflow-y:auto;align-items:flex-start;justify-content:flex-start}
  #menu .lobby,#menu .lobby:has(#playPanel.on){height:auto;min-height:100dvh;grid-template-rows:58px 44px auto 68px;overflow:visible}
  /* The narrow-width layer in index.html drops the account chip to grid-row 2, which on a
     58px header lands it on top of the tab row. Keep brand and chip on the single header row. */
  #menu .lobbyTop{height:58px;grid-template-columns:1fr auto;align-items:center}.lobbyAccount{grid-column:2;grid-row:1;justify-self:end;align-self:center}#menu .lobbyBrand{min-height:0;align-self:center;padding-bottom:0}#menu .x0Logo{min-height:0;padding:0}.profileChip{min-width:132px!important}.profileMeta{display:none}.profileChip{grid-template-columns:36px 31px!important}
  #menu #playPanel.on{min-height:760px;display:grid;grid-template-columns:1fr;grid-template-rows:330px auto}
  #menu .homeStage{grid-row:1}.heroPlate{bottom:10px!important}.homeStage::after{bottom:53px!important}
  #menu .homeMatchStrip{grid-row:2;min-height:430px;grid-template-columns:1fr;grid-template-rows:auto auto;overflow:visible;padding:9px}.matchSetupGroup{padding:8px!important}.matchSetupHead{height:38px!important}.modeGrid,#mapGrid{gap:6px!important}.homeMatchStrip .modeBtn{min-height:58px!important}.homeMatchStrip .mapBtn{min-height:82px!important}.homeMatchStrip .mapBtn small{display:block!important}
  #menu .lobbyFooter{position:sticky;bottom:0;z-index:12;height:68px;min-height:68px;grid-template-columns:1fr 145px}
  #menu .lobby:has(.lobbyPanel.on:not(#playPanel):not(#roomsPanel)){grid-template-rows:58px 44px auto 0}
  #menu #settingsPanel.on{min-height:calc(100dvh - 102px)}
  #menu .settingsWorkspace{grid-template-rows:52px auto}.settingsContent{overflow:visible}.settingsCategoryGrid{grid-template-columns:1fr!important}.settingsCategoryGrid .setting{min-height:94px!important}.settingsInputProfiles{grid-template-columns:1fr!important}
}

@media (prefers-reduced-motion:reduce){
  #menu .homeStage::before,#menu .lobbyFooter #playBtn::before,#menu .lobbyStatus b::before{animation:none!important}
  #menu .homeNavBtn,#menu .homeMatchStrip :is(.modeBtn,.mapBtn),#menu .lobbyFooter #playBtn,#menu .settingsCategory,#menu .settingsCategoryNav button{animation:none!important;transition:none!important}
}