/* Desktop menu layout (entry gate + deployment dock), loaded last.
   One grid per menu state instead of stacked absolute/flex overrides, so the
   masthead, the play column, the island picker and the community spotlight never
   overlap and always fit the window from 1024x640 up. Narrow/touch layouts keep
   their existing rules (map-selection.css, spotlight.css). */
@media (min-width:961px) and (min-height:601px){
 /* ---------- Entry: "Click to enter" ---------- */
 #menu.ssr-interim:has(#entry-gate:not([hidden])){
  --menu-pad-y:clamp(16px,3.2vh,44px);--menu-pad-x:clamp(20px,4vw,64px);
  display:grid;
  grid-template-columns:minmax(340px,min(38vw,500px)) minmax(0,1fr);
  grid-template-rows:auto auto auto minmax(0,1fr);
  grid-template-areas:"brand badge" "brand spot" "gate spot" "credit spot";
  column-gap:clamp(28px,4vw,80px);row-gap:clamp(10px,1.8vh,20px);
  padding:var(--menu-pad-y) var(--menu-pad-x);
  align-content:stretch;justify-content:stretch;overflow:hidden auto;box-sizing:border-box
 }
 #menu.ssr-interim:has(#entry-gate:not([hidden]))>.deployment-heading{display:contents}
 #menu.ssr-interim:has(#entry-gate:not([hidden]))>.deployment-heading>h1{grid-area:brand;align-self:start;justify-self:start;font-size:clamp(40px,min(6.6vw,9vh),96px);margin:0 0 6px}
 #menu.ssr-interim:has(#entry-gate:not([hidden]))>.deployment-heading>p{grid-area:badge;justify-self:end;align-self:start;margin:0;white-space:nowrap}
 #menu.ssr-interim:has(#entry-gate:not([hidden]))>#entry-gate{grid-area:gate;align-self:start;margin:0;width:100%;max-width:none;box-sizing:border-box;min-height:0}
 #menu.ssr-interim:has(#entry-gate:not([hidden]))>.entry-project-credit{grid-area:credit;align-self:end;max-width:none;order:0}
 #menu.ssr-interim:has(#entry-gate:not([hidden]))>#community-spotlight{grid-area:spot;position:static;inset:auto;width:100%;max-width:none;margin:0;align-self:start;min-height:0;max-height:100%;overflow:hidden auto;scrollbar-width:thin;order:0}
 #menu.ssr-interim:has(#entry-gate:not([hidden])) #entry-gate>h2{font-size:clamp(24px,min(2.6vw,4.4vh),38px);margin:0 0 clamp(10px,1.8vh,18px)}
 #menu.ssr-interim:has(#entry-gate:not([hidden])) #entry-gate>button{display:flex;align-items:center;width:min(100%,320px);min-width:0;min-height:44px;margin-top:clamp(6px,1.1vh,12px);box-sizing:border-box}
 #menu.ssr-interim:has(#entry-gate:not([hidden])) #entry-gate>h2+button{margin-top:0}
 #menu.ssr-interim:has(#entry-gate:not([hidden])) #entry-gate>#enter{min-height:clamp(52px,8vh,68px)}
 #menu.ssr-interim:has(#entry-gate:not([hidden])) #entry-gate #loading{min-height:0;margin:clamp(8px,1.4vh,14px) 0 0}
 #menu.ssr-interim:has(#entry-gate:not([hidden])) #entry-gate>.leaderboard-menu-link{margin-top:clamp(8px,1.4vh,12px);white-space:nowrap}
 /* island picker + spotlight in the right column */
 #menu.ssr-interim:has(#entry-gate:not([hidden])) #community-spotlight .map-selection{margin:0 0 clamp(12px,2.2vh,26px)}
 #menu.ssr-interim:has(#entry-gate:not([hidden])) #community-spotlight .map-card{height:clamp(112px,20vh,236px)}
 #menu.ssr-interim:has(#entry-gate:not([hidden])) #community-spotlight .spotlight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #menu.ssr-interim:has(#entry-gate:not([hidden])) #community-spotlight .spotlight-card{height:clamp(150px,24vh,250px)}
 #menu.ssr-interim:has(#entry-gate:not([hidden])) #community-spotlight .spotlight-image{height:clamp(44px,7vh,110px)}
 #menu.ssr-interim:has(#entry-gate:not([hidden])) #community-spotlight .spotlight-heading{margin-bottom:clamp(6px,1.2vh,12px)}
}
/* short desktop windows: the credit joins the right column so the play column never scrolls */
@media (min-width:961px) and (min-height:601px) and (max-height:920px){
 #menu.ssr-interim:has(#entry-gate:not([hidden])){
  grid-template-rows:auto auto minmax(0,1fr) auto;
  grid-template-areas:"brand badge" "brand spot" "gate spot" "gate credit"
 }
}
@media (min-width:961px) and (min-height:601px) and (max-height:780px){
 #menu.ssr-interim:has(#entry-gate:not([hidden])) #community-spotlight .map-selection-note,
 #menu.ssr-interim:has(#entry-gate:not([hidden])) #community-spotlight .spotlight-hint,
 #menu.ssr-interim:has(#entry-gate:not([hidden])) #community-spotlight .spotlight-image{display:none}
}
@media (min-width:961px) and (min-height:601px) and (max-height:740px){
 #menu.ssr-interim:has(#entry-gate:not([hidden]))>.deployment-heading>h1{font-size:clamp(38px,7.6vh,96px)}
 #menu.ssr-interim:has(#entry-gate:not([hidden]))>#entry-gate{padding:14px 16px}
 #menu.ssr-interim:has(#entry-gate:not([hidden])) #entry-gate>button{min-height:42px;padding-block:8px}
}
/* Spotlight cards (entry and deployment): long copy is clamped inside the card body
   instead of spilling over the badge row or the attribution footer. */
#community-spotlight .spotlight-card-body{justify-content:safe center;overflow:hidden}
#community-spotlight .spotlight-headline{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
#community-spotlight .spotlight-quote{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;margin-left:0;padding-left:.5em}
#community-spotlight .spotlight-quote::before{right:auto;left:0}
#community-spotlight #map-selection-title{text-shadow:0 2px 10px #06182bd9,0 1px 2px #06182b}
@media (max-height:780px){
 #community-spotlight .spotlight-headline,#community-spotlight .spotlight-quote{-webkit-line-clamp:2}
 #community-spotlight .spotlight-card-footer{margin-top:8px;padding-top:7px}
}
/* ---------- Deployment dock: after a fighter is chosen ---------- */
@media (min-width:961px) and (min-height:601px){
 #menu.ssr-interim:has(#deployment-controls:not([hidden])){
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
  row-gap:clamp(10px,1.8vh,20px);padding:clamp(14px,2.6vh,36px) clamp(20px,4vw,64px);overflow:hidden auto;box-sizing:border-box
 }
 #menu.ssr-interim:has(#deployment-controls:not([hidden]))>.deployment-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;min-width:0}
 #menu.ssr-interim:has(#deployment-controls:not([hidden]))>.deployment-heading>p{margin:0;white-space:nowrap}
 #menu.ssr-interim:has(#deployment-controls:not([hidden]))>#deployment-controls{
  align-self:end;min-height:0;max-height:100%;box-sizing:border-box;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,26vw,400px);grid-template-rows:minmax(0,1fr) auto auto;
  grid-template-areas:"brief actions" "brief options" "credit credit";
  gap:clamp(10px,1.6vh,16px) clamp(20px,2.6vw,44px);padding:clamp(14px,2vh,24px)
 }
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls>.deployment-brief{grid-area:brief;align-self:stretch;min-width:0;min-height:0;overflow:hidden auto;scrollbar-width:thin;container-type:inline-size}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls>.deployment-actions{grid-area:actions;align-self:start;min-width:0}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls>.deployment-options{grid-area:options;align-self:end;min-width:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0;padding:0;border:0}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls>.deployment-options>button{grid-column:span 2;min-width:0;padding-inline:6px;white-space:nowrap}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls>.deployment-options>#menu-controls{grid-column:span 2}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls>.deployment-options>.leaderboard-menu-link{grid-column:span 4;min-width:0;white-space:nowrap;padding-inline:8px}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls>.deployment-options>span:not(:empty),#menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls>.deployment-options>p:not([hidden]){grid-column:1/-1}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls>.project-credit{grid-area:credit;margin:0}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls #community-spotlight[data-mode=deployment]{max-width:none;width:100%;margin:0 0 clamp(8px,1.4vh,16px)}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls #community-spotlight[data-mode=deployment] .map-selection{margin:0 0 clamp(10px,1.8vh,20px)}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls #community-spotlight[data-mode=deployment] .map-card{height:clamp(112px,18vh,210px)}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls #community-spotlight[data-mode=deployment] .spotlight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls #community-spotlight[data-mode=deployment] .spotlight-card{height:clamp(140px,16vh,180px)}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls>.deployment-brief>h2{margin:0 0 6px}
}
/* wide docks: islands and spotlight side by side instead of one tall column */
@container (min-width:900px){
 #community-spotlight[data-mode=deployment]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:clamp(20px,2.4vw,40px);align-items:start}
 #community-spotlight[data-mode=deployment]>.map-selection{grid-column:1;grid-row:1/3;margin:0}
 #community-spotlight[data-mode=deployment]>.spotlight-heading{grid-column:2;grid-row:1}
 #community-spotlight[data-mode=deployment]>.spotlight-grid{grid-column:2;grid-row:2}
}
/* shorter windows: one-line wordmark, the map card already names the island */
@media (min-width:961px) and (min-height:601px) and (max-height:900px){
 #menu.ssr-interim:has(#deployment-controls:not([hidden]))>.deployment-heading>h1{font-size:clamp(30px,5vh,44px);line-height:1}
 #menu.ssr-interim:has(#deployment-controls:not([hidden]))>.deployment-heading>h1>span{display:inline-block;margin-right:.22em}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls>.deployment-brief>h2,#menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls>.deployment-brief>p{display:none}
}
@media (min-width:961px) and (min-height:601px) and (max-height:720px){
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls #username-status{display:none}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls>.deployment-actions{gap:6px}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls>.deployment-actions>button{min-height:42px;padding-block:8px}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) #deployment-controls #community-spotlight[data-mode=deployment] .map-selection-note{display:none}
}