/* One sizing scale for the four-hero roster, ability art and controls. */
#select.menu-shell {
  --menu-icon:clamp(54px,4.6vw,68px);
  grid-template-columns:minmax(0,1fr) 320px;
  grid-template-rows:82px minmax(min-content,1fr) auto 52px;
  column-gap:clamp(32px,5vw,76px);
  padding-inline:max(28px,calc((100vw - 1180px)/2));
  background:linear-gradient(90deg,#070e1af0,#0a1627a6 60%,#091422dc),url('assets/menu/moonfall-arena.png') center/cover;
}
.menu-top { border-bottom-color:#e3c28130; padding-right:100px; }
.wordmark { color:#fff1d4; letter-spacing:4px; text-shadow:0 2px 20px #dfb87340; }
.wordmark small { color:#ddbf83; }
.roster-section { padding-block:28px; }
.hero-focus { min-height:190px; margin-bottom:28px; gap:28px; }
.selected-portrait { width:148px; height:148px; flex-basis:148px; border-radius:20px; border:1px solid #c4aa7680; box-shadow:0 0 0 5px #b7d2ed08,0 0 0 6px #b7d2ed12,0 15px 65px color-mix(in srgb,var(--hero-color) 18%,transparent),inset 0 0 25px #0007; }
#select #selected-hero { font-size:clamp(36px,4vw,58px); margin:10px 0; }
#hero-summary { font-size:13px; line-height:1.7; max-width:270px; }
#select .classes { grid-template-columns:repeat(6,minmax(0,1fr)); max-width:600px; gap:12px; }
#select .card { display:flex;flex-direction:column;align-items:center;gap:0;min-width:0; border:1px solid #c1cee822; border-radius:10px; padding:13px 8px 11px; background:linear-gradient(150deg,#25334880,#0b1422c9); transition:border-color .15s,background .15s; }
#select .card.selected { border-color:var(--class-color); background:linear-gradient(150deg,color-mix(in srgb,var(--class-color) 18%,#152132),#101b2ce8); box-shadow:inset 0 -3px var(--class-color),0 8px 25px #0004; }
.hero-mark { width:clamp(60px,5.4vw,80px); height:auto; aspect-ratio:1; border-radius:8px; }
#select .card .name { font-size:11px; margin-top:9px; letter-spacing:.4px; color:#bcc9d9; }
.ability-section { margin-top:24px; padding-top:18px; border-top-color:#d9bf8230; }
.hero-detail { display:flex; flex-wrap:wrap; gap:10px; }
.menu-ability { position:relative; width:var(--menu-icon); height:var(--menu-icon); border-radius:8px; border-color:#afc3d755; box-shadow:0 3px 12px #0005,inset 0 0 0 1px #060d16; }
.menu-ability i { inset:3px; border-radius:5px; }
.menu-ability kbd { font-size:10px; line-height:18px; border:1px solid #ffffff22; bottom:3px; left:3px; }
.play-panel { padding:26px; border-radius:12px; border:1px solid #c9af765e; border-top:2px solid #e8c785; background:linear-gradient(145deg,#233147f2,#0b1525f2); box-shadow:0 20px 65px #0007,inset 0 1px #fff1; }
.play-heading { color:#fff1d4; font-size:25px; margin-bottom:20px; }
.primary-action { border:1px solid #f6d99b; border-radius:7px; background:linear-gradient(110deg,#e7cf95,#caa569); color:#1c2130; box-shadow:0 5px 22px #c29d4c22; }
.primary-action:hover:not(:disabled) { background:linear-gradient(110deg,#ffe6ac,#dfbb7f); }
.mode-choice.on { color:#ffe6ae; border-color:#dcbf7755; background:#c6a8691c; }
.menu-shell #local-arena { border-radius:7px!important; border-color:#b4c7df30!important; padding:10px!important; }
.menu-footer { gap:20px; border-color:#d9bf8230; }
.creator-credit { margin-left:auto; color:#acb9ca; font-size:11px; letter-spacing:.5px; }
.menu-footer>a { color:#d6bd89; }
#select.in-lobby { grid-template-rows:82px auto auto auto 52px; }
.in-lobby #classes { max-width:600px; margin-inline:auto; }
.in-lobby .hero-detail { justify-content:center; }
.combat-dock .slot { flex-shrink:0; aspect-ratio:1; isolation:isolate; }
.combat-dock .slot .icon { background-repeat:no-repeat; }
@media(max-width:1050px) {
  #select.menu-shell { grid-template-columns:minmax(0,1fr) 290px; column-gap:28px; padding-inline:28px; }
  .hero-focus { gap:20px; }.selected-portrait { width:116px;height:116px;flex-basis:116px; }
  #select .classes { gap:8px; }.hero-mark { width:60px; }.play-panel { padding:20px; }
  #select #selected-hero { font-size:38px; }
}
@media(max-width:760px) {
  #select.menu-shell { --menu-icon:clamp(34px,calc((100vw - 74px)/7),52px); display:flex; flex-direction:column; align-items:stretch; padding:0 18px; gap:0; }
  .menu-top { min-height:76px; padding-right:0; flex-wrap:wrap; gap:8px; }
  .wordmark { font-size:19px; }.wordmark small { font-size:9px;margin-left:5px; }
  .menu-tools { margin-left:auto;gap:2px; }.menu-tools .secondary-action { padding:9px 6px; font-size:10px!important; }#language { padding:8px 5px; }
  .roster-section { order:1;padding:24px 0; }.hero-focus { min-height:0;gap:18px;margin-bottom:22px; }
  .selected-portrait { width:86px;height:86px;flex-basis:86px;border-radius:12px; }
  #select #selected-hero { font-size:32px;margin:7px 0; }#selected-role { font-size:9px; }#hero-summary { font-size:11px;line-height:1.5; }
  #select .card { padding:10px 5px; }.hero-mark { width:54px; }#select .card .name { font-size:10px; }
  .hero-detail { gap:6px; }.ability-section { margin-top:18px;padding-top:14px; }
  .menu-ability kbd { font-size:8px;line-height:14px;padding-inline:3px; }
  .home-layout { order:2;padding:0 0 24px; }.play-panel { padding:20px; }
  .lobby-view { order:2; }.netstatus { order:3; }.menu-footer { order:4;min-height:50px;gap:12px;flex-shrink:0; }
  .menu-controls { font-size:8px; }.creator-credit { font-size:10px; }
  body:has(#select:not(.hidden)) #fullscreen-toggle { top:auto;bottom:12px;right:12px; }
}
@media(min-width:761px) and (max-height:760px) {
  #select.menu-shell { grid-template-rows:64px minmax(min-content,1fr) auto 40px; }
  .roster-section,.home-layout { padding-block:18px; }.hero-focus { min-height:140px;margin-bottom:20px; }
  .selected-portrait { width:116px;height:116px;flex-basis:116px; }.play-panel { padding:18px 22px; }
  .play-heading { margin-bottom:14px; }.local-actions { margin-top:18px;padding-top:14px; }
}

@media(max-width:800px){#select .classes{grid-template-columns:repeat(3,minmax(0,1fr));}}