/* One scrollable menu, with deployment above equally readable squad boards. */
#menu{padding:20px clamp(12px,2.5vw,44px)}
#menu>.card{width:min(1600px,100%);max-height:calc(var(--app-viewport-height) - 40px);display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"header" "deployment" "settings" "rankings" "lan";gap:0;padding:clamp(18px,2.2vw,32px)}
#menu .menu-header{grid-area:header;padding:0 52px 20px;border-bottom:0}
#menu .deployment-panel{grid-area:deployment;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"name actions" "squads actions";column-gap:clamp(22px,4vw,64px);row-gap:10px;margin:0;padding:18px 22px}
.deployment-panel .name-field{grid-area:name}
.deployment-panel .name-field>span{font-size:11px;margin-bottom:7px;color:#a9c4c5}
.deployment-panel #name{min-height:48px;font-size:17px}
.deployment-panel #squad-discovery{grid-area:squads;margin:0;min-height:38px}
.deployment-panel #squad-detail{font-size:12px}
.deployment-actions{grid-area:actions;align-self:center;min-width:0}
.deployment-panel #deploy,.deployment-panel #training-launch{min-height:52px;margin-top:0}
.deployment-panel .alternate-actions{gap:8px;margin-top:10px}
.deployment-panel .alternate-actions button{min-height:44px;padding:0 15px;border:1px solid #394756;border-radius:7px;background:#151e2b;color:#b9cbd7;text-decoration:none;font-size:11px;letter-spacing:.65px}
.deployment-panel .alternate-actions button:hover{border-color:#728b92;color:#fff}
.deployment-panel #training-replay{min-height:44px;padding:0 15px}
.deployment-panel #invite-note{grid-column:1/-1;margin:0}
.deployment-panel #menu-error{grid-column:1/-1;margin:0;min-height:0}
.deployment-panel #menu-error:empty{display:none}
#menu #lan-hint{grid-area:lan;margin:12px 0 0;font-size:11px}
#menu #lan-hint:empty{display:none}
.team-leaderboard{grid-area:rankings;min-width:0;margin-top:20px;padding:22px;border:1px solid #354853;border-radius:12px;background:linear-gradient(150deg,#13232c,#0d1722);color:#dce9ed}
.team-board-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}
.team-board-kicker{font-size:10px;letter-spacing:.16em;color:#9bdbca;font-weight:800}
.team-board-heading h2{margin:5px 0 0;font-size:26px;letter-spacing:-.03em;color:#e9f7f3}
.team-board-location{margin:7px 0 13px;color:#93b1bd;font-size:12px}
.team-board-more,.team-board-retry{border:1px solid #49636b;background:#193039;color:#c8e6e5;border-radius:7px;padding:10px 14px;font-size:12px;font-weight:750;cursor:pointer;min-height:44px}
.team-board-more{flex-shrink:0}
.team-board-more:disabled{opacity:.55;cursor:default}
.team-board-message{margin:0 0 16px;color:#9cb8c3;font-size:12px;line-height:1.5}
.team-board-retry{margin:0 0 12px}
.team-board-retry[hidden]{display:none}
.team-board-groups{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.team-board-group{min-width:0;border:1px solid #344d59;background:#10212b;border-radius:9px;overflow:hidden}
.team-board-featured{border-color:#4b8a7d;background:linear-gradient(120deg,#17312f,#101f2a)}
.team-group-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid #344d59}
.team-group-heading h3{margin:0;font-size:18px;font-weight:800;color:#dcebf0}
.team-group-heading>span{font-size:10px;color:#a6c2cc;font-weight:800;letter-spacing:.05em;background:#223944;padding:5px 8px;border-radius:4px}
.team-board-featured .team-group-heading{border-color:#36584f}
.team-board-featured h3{color:#d3f2df}
.team-board-featured .team-group-heading>span{color:#a4dcc4;background:#294d3e}
.team-record-table{display:block;width:100%;border-collapse:collapse;text-align:left}
.team-record-table thead,.team-record-table tbody{display:block}
.team-record,.team-column-headings{display:grid;grid-template-columns:30px minmax(0,1fr) repeat(3,minmax(70px,9%));align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid #2c424c}
.team-column-headings{padding-top:10px;padding-bottom:10px;background:#0e1c25;color:#9bb8c4;font-size:11px}
.team-column-headings th{font-weight:650;min-width:0;text-align:left}
.team-column-headings .team-column-0{text-align:center}
.team-record:last-child{border-bottom:0}
.team-record-rank{display:flex;align-items:center;justify-content:center;border-radius:5px;color:#afd0d7;font-size:13px;font-weight:800;min-height:30px;background:#243d49}
.team-board-featured .team-record-rank{background:#284c44;color:#bbecd5}
.team-record-names{font-size:15px;line-height:1.5;font-weight:650;overflow-wrap:anywhere;min-width:0}
.team-record-value{font-size:16px;font-weight:700;color:#d2e7e8;font-variant-numeric:tabular-nums;min-width:0}
.team-board-empty{padding:22px 18px;margin:0;color:#a5c0c7;font-size:13px;line-height:1.6}
.team-board-rules{margin:16px 0 0;color:#91a8b6;font-size:11px;line-height:1.65}
/* Native disclosure keeps the gear accessible without a modal. */
#menu .menu-settings-disclosure{grid-area:settings;display:block;margin:0;padding:0;border:0;background:none;min-width:0}
#menu .menu-settings-disclosure>summary{position:absolute;top:24px;right:24px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;border:1px solid #3d505f;border-radius:9px;background:#18232f;color:#b7cbd4;cursor:pointer;list-style:none}
.menu-settings-disclosure>summary::-webkit-details-marker{display:none}
.menu-settings-disclosure>summary svg{width:22px;height:22px;fill:currentColor}
#menu .menu-settings-disclosure[open]{margin-top:16px;padding:18px 22px;border:1px solid #3d505f;border-radius:10px;background:#121d2a}
#menu .menu-settings-disclosure[open]>summary{color:#d8f3e6;border-color:#8ebfab;background:#263c3a}
/* Keep both exits on screen even after the long controls guide is scrolled. */
#menu>.card:has(#menu-settings[open]){backdrop-filter:none;-webkit-backdrop-filter:none}
#menu .menu-settings-disclosure[open]>summary{position:fixed;top:max(12px,var(--app-safe-area-top));right:calc(max(12px,var(--app-safe-area-right)) + 52px);z-index:60;width:44px;height:44px}
#menu-settings:not([open])>#menu-settings-close{display:none}
.menu-settings-disclosure .controls{padding:0 0 16px;margin:0;border:0;background:none;grid-area:auto}
.menu-settings-disclosure .control-grid{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}
.menu-settings-disclosure .control-grid>div{min-height:60px}
.menu-settings-disclosure .control-grid span{font-size:12px}
.menu-look-settings{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid #2a3a48}
.menu-look-settings .sens-row{width:100%;max-width:700px}
.menu-look-settings .settings-availability{font-size:9px}
.field-controls-disclosure{margin-top:13px;padding-top:12px;border-top:1px solid #30424c}
.field-controls-disclosure>summary{cursor:pointer;color:#b7cad1;font-size:12px;font-weight:750;padding:4px 0;min-height:24px}
#game-settings{max-height:calc(var(--app-viewport-height) - 80px);overflow:auto}
#game-settings .controls{margin:10px 0 0;padding:0;border:0;background:none}
#game-settings .control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#game-settings .control-grid>div{min-height:48px;padding:7px}
#game-settings .control-grid kbd{font-size:10px}
#game-settings .control-grid span,#game-settings .controls-footer{font-size:10px}
#game-settings .controls-footer b{font-size:9px}
#game-settings .controls .section-heading{font-size:12px;margin:8px 0}
.team-leaderboard :is(button,a):focus-visible,.menu-settings-disclosure>summary:focus-visible,.field-controls-disclosure>summary:focus-visible,.deployment-actions button:focus-visible{outline:2px solid #a4dfca;outline-offset:3px}
@media(max-width:700px){
  #menu{padding:10px}
  #menu>.card{padding:16px;max-height:calc(var(--app-viewport-height) - 20px)}
  #menu .menu-header{padding:4px 38px 18px}
  #menu .menu-kicker{display:none}
  #menu .logo{font-size:clamp(25px,6vw,36px);letter-spacing:1px}
  #menu .vs-row{font-size:9px;letter-spacing:.7px;gap:6px}
  #menu .vs-row .f-alien::before,#menu .vs-row .f-fed::after{display:none}
  #menu .deployment-panel{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "squads" "actions";padding:15px;gap:10px}
  .deployment-panel #squad-discovery{grid-template-columns:1fr;padding:8px 10px;gap:5px}
  .deployment-panel #squad-detail{text-align:left;line-height:1.4}
  .deployment-panel .alternate-actions button{flex:1 1 120px;padding:0 10px}
  .team-leaderboard{margin-top:16px;padding:14px}
  .team-board-heading{gap:10px}
  .team-board-heading h2{font-size:21px}
  .team-board-more{max-width:114px;padding:8px 10px;font-size:11px}
  .team-group-heading{padding:12px}
  .team-group-heading h3{font-size:17px}
  .team-record,.team-column-headings{grid-template-columns:27px repeat(3,minmax(0,1fr));gap:9px 10px;padding:12px}
  .team-column-headings{font-size:10px;padding-top:9px;padding-bottom:9px}
  .team-column-1,.team-record-names{grid-column:2/-1}
  .team-column-2,.team-record-value:nth-child(3){grid-column:2}
  .team-record-rank{min-height:27px;align-self:start}
  .team-record-names{font-size:14px}
  .team-record-value{font-size:14px}
  #menu .menu-settings-disclosure>summary{top:14px;right:14px;width:40px;height:44px}
  #menu .menu-settings-disclosure[open]{padding:14px}
  .menu-settings-disclosure .control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field-controls-disclosure>summary{min-height:36px}
}