/* Character-first lobby. The map and character share the game's WebGL renderer;
   only the match options scroll, and the deploy button always stays reachable. */
#menu{
 --lobby-panel:300px;--lobby-gap:24px;--lobby-accent:#9af2df;
 display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:22px;
 width:100%;height:100vh;height:100dvh;min-height:0;overflow:hidden;
 padding:max(22px,env(safe-area-inset-top)) max(32px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(32px,env(safe-area-inset-left));
 background:linear-gradient(0deg,#081b32cd 0%,#102f4200 48%),linear-gradient(180deg,#071c358f,transparent 28%);
}
#menu .topbar{display:flex;align-items:center;gap:30px;min-width:0;pointer-events:auto;position:relative;z-index:5}
#menu .wordmark{flex-shrink:0;font-size:19px;gap:10px;letter-spacing:2px}
#menu .wordmark small{font-size:6px;letter-spacing:1.65px;margin-top:5px}
#menu .brand-mark{width:38px;height:42px;font-size:31px;border-radius:10px;transform:skew(-6deg);box-shadow:0 0 25px #7af2d826}
#menu .lobby-nav{display:flex;align-items:center;gap:7px}
#menu .lobby-tab{padding:13px 19px;font-weight:400;font-size:13px;font-family:'Big Black Bear',Impact,'Arial Black',sans-serif;font-style:normal;font-synthesis:none;line-height:1.2;letter-spacing:.025em;border:0;border-radius:7px;background:transparent;color:#e2f4fc;min-height:44px}
#menu .lobby-tab:hover{background:#e6fcff20}
#menu .lobby-tab.active{background:#eefaff;color:#133146;box-shadow:0 4px 14px #071b3724;transform:skew(-5deg)}
#menu .lobby-tab.active>span{display:inline-block;transform:skew(5deg)}
#menu .top-actions{display:flex;gap:7px;margin-left:auto;min-width:0;flex-wrap:nowrap}
#menu .icon-btn{width:42px;min-width:42px;min-height:42px;justify-content:center;background:#12314769;border-color:#c0edff28;font-size:19px;border-radius:8px}
#menu .menu-body{display:block;position:relative;width:100%;height:100%;min-height:0;max-width:none;margin:0 auto;padding:0;overflow:visible}
#menu .lobby-map-info{position:absolute;left:0;top:clamp(8px,3vh,40px);width:var(--lobby-panel);pointer-events:none;text-shadow:0 3px 20px #091e3670}
#menu .lobby-eyebrow{font-size:8px;font-weight:800;letter-spacing:2.2px;color:#c1e4ee}
#menu .lobby-map-info h1{font-size:clamp(32px,3.8vw,54px);font-weight:950;line-height:.98;letter-spacing:-1.8px;margin:14px 0;text-wrap:balance;max-width:10ch;text-transform:uppercase;font-style:italic}
#menu .lobby-map-info p{font-size:11px;line-height:1.7;letter-spacing:.2px;max-width:31ch;color:#d1e8f0;margin:0}
#menu .lobby-live{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;margin-top:17px;background:#173b4963;border:1px solid #b8f9e52e;border-radius:5px;font-size:7px;font-weight:800;letter-spacing:1.5px;color:#cffce8}
#menu .lobby-live i,#menu .lobby-player-tag small i{width:5px;height:5px;border-radius:50%;background:#9affcf;box-shadow:0 0 10px #86ffb7}
#menu #lobbyStage{position:absolute;left:0;right:0;top:0;bottom:140px;pointer-events:none}
#menu .lobby-player-tag{position:absolute;left:50%;top:14%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;white-space:nowrap;text-shadow:0 2px 8px #082b45;background:transparent;border:0;padding:8px 11px}
#menu .lobby-player-mark{display:grid;place-items:center;width:28px;height:30px;border:1px solid #acffe8aa;background:#17394ccc;color:#b7ffe9;clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%);font-size:13px;font-weight:900;font-style:italic}
#menu .lobby-player-tag strong{font-size:11px;letter-spacing:1.5px}
#menu .lobby-player-tag small{display:flex;align-items:center;gap:5px;font-size:7px;letter-spacing:1.4px;font-weight:800;color:#b2ffe6;margin-top:5px}
#menu .deploy-panel{position:absolute;left:auto;right:0;bottom:0;width:var(--lobby-panel);height:auto;max-height:none;display:block;padding:18px;overflow:visible;border:1px solid #a6dbe530;border-radius:14px;background:linear-gradient(145deg,#142f48ed,#0d243aea);box-shadow:0 12px 40px #06172639;backdrop-filter:blur(16px);pointer-events:auto;z-index:3}
#menu .panel-kicker{display:flex;margin:0 0 12px;padding:0;font-size:8px;letter-spacing:1.4px}
#menu .deploy-panel h2{margin:0 0 15px;font-size:24px;font-weight:950;line-height:1.05;letter-spacing:-.7px;font-style:italic}
#menu .lobby-mapline{font-size:9px;color:#b8d7e3;letter-spacing:1.2px;margin:9px 0 16px}
#menu .lobby-setup{margin:0;position:static}
#menu .lobby-setup summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;min-height:42px;padding:11px 13px;border:1px solid #b1ddec30;border-radius:7px;background:#d6f2ff0c;font-size:9px;letter-spacing:1px;font-weight:900}
#menu .lobby-setup summary::-webkit-details-marker{display:none}
#menu .lobby-setup summary:hover,#menu .lobby-setup[open] summary{border-color:#9af2df8c;background:#9af2df16}
#menu .setup-chevron{font-size:17px;transition:transform .2s}
#menu .lobby-setup[open] .setup-chevron{transform:rotate(180deg)}
#menu .lobby-content{position:absolute;bottom:calc(100% + 10px);left:-1px;width:calc(100% + 2px);max-height:calc(100dvh - 360px);min-height:90px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:17px;border:1px solid #b8e9ec55;border-radius:12px;background:#112b40f7;box-shadow:0 12px 45px #06152566;scrollbar-width:thin;scrollbar-color:#7194a4 #102b3d;z-index:8}
#menu .lobby-options-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:1.5px;margin:0 0 12px}
#menu .lobby-options-heading button{border:0;background:#cceaff14;border-radius:5px;color:#d1ebf6;width:32px;height:32px}
#menu .mode-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0}
#menu .mode{width:auto;min-height:48px;min-width:0;padding:10px 7px;font-size:9px;text-align:left;border-radius:6px}
#menu .mode small{font-size:8px;line-height:1.35;white-space:normal;margin-top:5px}
#menu .mode.br-mode{grid-column:1/-1}
#menu .arena-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:15px}
#menu .arena-options>label{min-width:0;font-size:8px;gap:7px}
#menu .arena-options>label:first-child,#menu .difficulty-option,#menu #brVariantOptions{grid-column:1/-1}
#menu .arena-options select{min-width:0;min-height:42px;width:100%;font-size:11px;padding:8px;color:#e5f3f9;background:#1d3c50;border:1px solid #b8e3f22a;border-radius:6px}
#menu .arena-options small{font-size:9px;line-height:1.5;letter-spacing:0;color:#9fbfcd}
#menu #brTeamSizeOption{display:block;margin-top:12px;font-size:10px;font-weight:900;letter-spacing:.09em;color:#8eefff}
#menu #brTeamSizeOption[hidden]{display:none!important}
#menu #brTeamSizeOption select{display:block;width:100%;min-height:43px;margin-top:7px;padding:9px 12px;background:#183c50;border:1px solid #55d5f09c;border-radius:6px;color:#effcff;font-size:12px;font-weight:900}
#menu #brTeamSizeOption small{display:block;margin-top:6px;font-size:9px;line-height:1.4;letter-spacing:0;color:#b1d4e2}
#menu #brTeamFillOption{display:block;margin-top:9px;font-size:10px;font-weight:900;letter-spacing:.09em;color:#a6f8dc}
#menu #brTeamFillOption[hidden]{display:none!important}
#menu #brTeamFillOption select{display:block;width:100%;min-height:43px;margin-top:7px;padding:9px 12px;background:#183c50;border:1px solid #5ce6b79c;border-radius:6px;color:#effcff;font-size:12px;font-weight:900}
#menu #brTeamFillOption small{display:block;margin-top:6px;font-size:9px;line-height:1.4;letter-spacing:0;color:#b1d4e2}
#menu #brVariantOptions{display:flex;flex-direction:column;align-items:stretch}
#menu .replay-record-option{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:16px 0 0;font-size:8px;letter-spacing:.7px;line-height:1.4}
#menu .replay-record-option small{font-size:8px;color:#9bbdcc;letter-spacing:0}
#menu .deploy-actions{padding:0;border:0;background:none}
#menu #deploy{margin:13px 0 0;min-height:55px;width:100%;padding:15px 16px;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:950;letter-spacing:.7px;border:1px solid #daffe6;border-radius:9px;background:linear-gradient(110deg,#c2ffdf,#74ead4);color:#123445;box-shadow:0 5px 24px #7bffe61b}
#menu #deploy:hover{filter:brightness(1.08);transform:translateY(-1px)}
#menu #deploy:disabled{opacity:.55;cursor:wait}
#menu .deploy-note{display:block;font-size:8px;line-height:1.6;letter-spacing:.1px;color:#a7c8d4;margin:10px 0 0;max-width:34ch}
#menu .lobby-loadout{position:absolute;left:0;right:auto;bottom:0;width:var(--lobby-panel);pointer-events:auto;z-index:2}
#menu .loadout-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;color:#def5ff;font-size:9px;letter-spacing:1.3px}
#menu .loadout-heading .text-btn{font-size:8px;margin:0;padding:3px;color:#b4ffe2}
#menu .menu-loadout{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
#menu .mini-weapon{display:grid;width:100%;position:relative;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto;gap:4px 12px;align-items:center;min-width:0;min-height:clamp(100px,14vh,132px);padding:15px 16px;background:linear-gradient(115deg,#15374cde,#0e293fc9);border:1px solid #d6eeff36;border-radius:9px;text-align:left;box-shadow:0 5px 20px #09253626}
#menu .mini-weapon:first-child{border-color:#9af2df87;background:linear-gradient(115deg,#1a4a59e8,#153248d9)}
#menu .mini-weapon:hover{border-color:#b5ffe5;transform:translateY(-2px)}
#menu .mini-weapon .slot-num{position:static;grid-column:1/-1;font-size:8px;letter-spacing:1px;color:#b4d4df}
#menu .mini-weapon :is(svg,.weapon-art){grid-column:2;grid-row:2/4;width:100%;height:60px;margin:0;max-width:100%}
#menu .mini-weapon strong{grid-column:1;grid-row:2;font-size:13px;line-height:1.3;margin:0;letter-spacing:.1px;overflow-wrap:anywhere}
#menu .mini-weapon small{grid-column:1;grid-row:3;font-size:9px;line-height:1.4;letter-spacing:0;color:#b3d2dd}
#menu .lobby-inspect-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:9px 2px 0;font-size:8px;letter-spacing:.6px;color:#c1dbe6}
#menu #lobbyInspect{background:transparent;border:0;color:#c9fff0;padding:5px;font-size:8px;font-weight:900;letter-spacing:1px;white-space:nowrap}
#menu .menu-footer{display:flex;align-items:center;gap:20px;padding-top:12px;border-top:1px solid #c4e8f523;font-size:7px;letter-spacing:1px;color:#c2dce7;pointer-events:none}
#menu .footer-version{margin-left:auto}
#menu button:focus-visible,#menu summary:focus-visible,#menu select:focus-visible,#menu .lobby-content:focus-visible{outline:2px solid #c2ffe3;outline-offset:3px}
@media(min-width:1600px){#menu{--lobby-panel:320px;padding-left:50px;padding-right:50px}#menu .deploy-panel{padding:20px}#menu .lobby-content{max-height:calc(100dvh - 350px)}#menu #lobbyStage{bottom:146px}}
@media(max-width:1100px){#menu{--lobby-panel:270px;gap:17px;padding-left:22px;padding-right:22px}#menu .topbar{gap:18px}#menu .lobby-tab{padding:12px 14px}#menu .wordmark{font-size:16px}#menu .wordmark small{display:none}#menu .mini-weapon :is(svg,.weapon-art){height:50px}#menu .deploy-panel{padding:17px}#menu .deploy-panel h2{font-size:22px}#menu .menu-footer{gap:12px}}
@media(max-width:760px) and (orientation:portrait){
 #menu{--lobby-panel:100%;gap:12px;grid-template-rows:auto minmax(0,1fr);padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:linear-gradient(0deg,#081b32ed,#102f4200 60%,#071c359e)}
 #menu .topbar{gap:10px;flex-wrap:wrap}#menu .wordmark{font-size:16px}#menu .brand-mark{width:29px;height:32px;font-size:24px}#menu .top-actions{gap:5px}#menu .icon-btn{width:34px;min-width:34px;min-height:34px;font-size:17px}
 #menu .lobby-nav{order:3;flex-basis:100%;gap:6px}#menu .lobby-tab{flex:1;padding:10px 9px;min-height:38px;font-size:10px}
 #menu .lobby-map-info{top:4px;width:auto;right:0}#menu .lobby-map-info h1{font-size:21px;letter-spacing:-.6px;max-width:100%;margin:0}#menu .lobby-eyebrow,#menu .lobby-map-info p,#menu .lobby-live{display:none}
 #menu #lobbyStage{left:0;right:0;top:0;bottom:300px}#menu .lobby-player-tag{top:10%;padding:7px 9px;gap:7px}#menu .lobby-player-mark{width:25px;height:28px;font-size:12px}#menu .lobby-player-tag strong{font-size:10px;letter-spacing:1px}
 #menu .lobby-loadout{bottom:170px;width:min(270px,100%)}#menu .loadout-heading{font-size:8px;margin-bottom:6px}#menu .menu-loadout{gap:7px}#menu .mini-weapon{min-height:60px;padding:7px 10px;gap:2px 10px}#menu .mini-weapon .slot-num{font-size:7px}#menu .mini-weapon :is(svg,.weapon-art){height:31px}#menu .mini-weapon strong{font-size:10px}#menu .mini-weapon small{font-size:7px}#menu .lobby-inspect-row{margin-top:3px;font-size:7px}
 #menu .deploy-panel{width:min(270px,100%);padding:13px 15px;border-radius:12px}#menu .panel-kicker{display:none}#menu .deploy-panel h2{font-size:21px;margin-bottom:10px}#menu .lobby-mapline{margin:5px 0 8px;font-size:8px}#menu .lobby-setup summary{min-height:34px;padding:7px 10px;font-size:8px}#menu #deploy{min-height:44px;padding:11px 13px;margin-top:8px;font-size:11px}#menu .deploy-note{font-size:7px;margin-top:5px;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #menu .lobby-content{max-height:calc(100dvh - 300px);padding:14px;bottom:calc(100% + 8px)}#menu .menu-footer{display:none}
}
@media(max-height:740px) and (max-width:760px) and (orientation:portrait){#menu #lobbyStage{bottom:265px}#menu .lobby-player-tag{top:14px}#menu .lobby-loadout{bottom:145px}#menu .lobby-inspect-row{display:none}#menu .mini-weapon{min-height:52px;padding:6px 10px}#menu .mini-weapon small{display:none}#menu .mini-weapon :is(svg,.weapon-art){grid-row:2;height:23px}#menu .lobby-mapline{display:none}#menu .deploy-panel h2{font-size:20px;margin-bottom:9px}#menu .deploy-note{margin-top:5px}#menu .lobby-content{max-height:calc(100dvh - 265px)}}
@media(max-height:590px) and (orientation:landscape){
 #menu{--lobby-panel:230px;gap:9px;padding:10px 18px;grid-template-rows:auto minmax(0,1fr)}#menu .topbar{gap:14px}#menu .wordmark{font-size:13px}#menu .wordmark small{display:none}#menu .brand-mark{width:27px;height:30px;font-size:22px}#menu .lobby-tab{padding:8px 10px;min-height:34px;font-size:9px}#menu .icon-btn{min-width:32px;width:32px;min-height:32px;font-size:16px}#menu .menu-footer{display:none}
 #menu .lobby-map-info{top:8px}#menu .lobby-map-info h1{font-size:26px;margin:0;letter-spacing:-1px}#menu .lobby-eyebrow,#menu .lobby-map-info p,#menu .lobby-live{display:none}
 #menu #lobbyStage{left:0;right:0;top:0;bottom:90px}#menu .lobby-player-tag{top:8px;padding:5px 8px;gap:6px}#menu .lobby-player-mark{width:25px;height:27px;font-size:12px}#menu .lobby-player-tag strong{font-size:10px}
 #menu .deploy-panel{padding:13px;max-height:none}#menu .panel-kicker{display:none}#menu .deploy-panel h2{font-size:21px}#menu .lobby-mapline{margin:7px 0 10px;font-size:8px}#menu .lobby-setup summary{min-height:34px;padding:7px 10px;font-size:8px}#menu #deploy{margin-top:8px;min-height:42px;padding:11px;font-size:9px}#menu .deploy-note{margin-top:5px;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#menu .lobby-content{max-height:calc(100dvh - 248px);min-height:68px;padding:12px;bottom:calc(100% + 6px)}
 #menu .lobby-loadout{bottom:0}#menu .loadout-heading{font-size:7px;margin-bottom:5px}#menu .menu-loadout{gap:7px}#menu .mini-weapon{min-height:56px;padding:7px 10px;gap:2px 10px}#menu .mini-weapon .slot-num{font-size:6px}#menu .mini-weapon strong{font-size:9px}#menu .mini-weapon :is(svg,.weapon-art){height:26px;grid-row:2}#menu .mini-weapon small,#menu .lobby-inspect-row{display:none}
}
@media(max-width:360px){#menu{padding-left:12px;padding-right:12px}#menu .wordmark{font-size:14px}#menu .mini-weapon strong{font-size:9px}}
@media(prefers-reduced-motion:reduce){#menu *,#menu *::before,#menu *::after{animation:none!important;transition:none!important}}

#menu .lobby-setup:not([open]) .lobby-content{display:none}