/* SKRIM menu: bronze, ink and champion colour. This file owns menu sizing. */
#select.menu-shell {
  --gold:#d7ba81; --menu-icon:60px;
  display:grid; grid-template-columns:minmax(0,1fr) 310px;
  grid-template-rows:100px minmax(min-content,1fr) auto 48px;
  align-items:center; gap:0 48px;
  padding:0 max(32px,calc((100vw - 1380px)/2));
  background:linear-gradient(90deg,#050e13f5 0%,#08151bec 35%,#0a1c23b0 70%,#07141add),url('assets/menu/moonfall-arena.png') center/cover fixed;
  color:#eee9dd; font-family:Inter,ui-sans-serif,system-ui,sans-serif;
}
#select.menu-shell.hidden{display:none}
#select .menu-top{grid-column:1/-1;grid-row:1;min-height:100px;padding-right:110px;border-bottom:1px solid #c8b58b30;gap:20px}
#select .wordmark{display:flex;align-items:center;flex-shrink:0}
#select .wordmark img{width:220px;height:82px;object-fit:contain;filter:drop-shadow(0 4px 20px #0008)}
#select .menu-tools{margin-left:auto;gap:14px}
#select .menu-tools .secondary-action{font:550 12px system-ui!important;padding:10px;color:#b9c8c9}
#select #language{border:1px solid #a8bcb82b;border-radius:3px;background:#0c1b22;font:600 11px system-ui;padding:9px}
#select .roster-section{grid-column:1;grid-row:2;min-width:0;padding:28px 0}
#select .hero-focus{--focus-icon-size:156px;position:relative;display:grid;grid-template-columns:var(--focus-icon-size) minmax(0,1fr);align-items:center;min-height:220px;gap:28px;margin:0 0 24px;padding:26px 30px;overflow:hidden;border:1px solid #b9ba9d27;border-left:2px solid var(--hero-color);border-radius:3px;background:linear-gradient(115deg,#102328c9,#08151b3b);box-shadow:0 20px 70px #0003}
#select .hero-focus::after{content:none}
#select .hero-intro{grid-column:2;grid-row:1;position:relative;min-width:0}
#select .selected-portrait{grid-column:1;grid-row:1;position:relative;width:var(--focus-icon-size);height:var(--focus-icon-size);aspect-ratio:1;flex:none;align-self:center;justify-self:center;border:0;border-radius:0;background-color:transparent;background-repeat:no-repeat;box-shadow:none;filter:drop-shadow(0 6px 12px #0006)}
#select #selected-role{font:650 10px/1.5 system-ui;letter-spacing:2px;color:var(--hero-color);text-transform:uppercase}
#select #selected-hero{font:500 clamp(42px,4.6vw,76px)/1.05 Georgia,serif;letter-spacing:1px;margin:14px 0 18px;color:#f1ead8;text-shadow:0 3px 20px #0008}
#select #hero-summary{font:400 13px/1.7 system-ui;max-width:290px;color:#a9bebc;margin:0}
#select .classes{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;max-width:none}
#select .card{--class-icon-size:clamp(52px,4.5vw,72px);position:relative;display:grid;grid-template-rows:var(--class-icon-size) 16px;align-content:center;justify-items:center;align-items:center;min-width:0;min-height:110px;padding:12px 4px 10px;gap:7px;border:1px solid #8ba6a329;border-radius:3px;background:linear-gradient(150deg,#18303980,#0a171de6);box-shadow:none;transition:border-color .18s,background .18s,transform .18s}
#select .card:hover{border-color:#d8c59188;background:#1b3139;transform:translateY(-3px)}
#select .card.selected{border-color:var(--class-color);background:linear-gradient(160deg,color-mix(in srgb,var(--class-color) 14%,#12242a),#0b181e);box-shadow:inset 0 -2px var(--class-color),0 5px 20px #0005}
#select .hero-mark{display:block;width:var(--class-icon-size);height:var(--class-icon-size);flex:none;min-width:0;margin:0;border:0;border-radius:0;background-repeat:no-repeat}
#select .card .name{font:600 11px/1.3 system-ui;margin:0;color:#ced9d5;letter-spacing:.2px}
#select .card-role{display:none}
#select .hero-check{display:none;position:absolute;right:6px;top:5px;font:12px system-ui;color:var(--class-color)}
#select .selected .hero-check{display:block}
#select .ability-section{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:start;gap:12px 20px;margin-top:24px;padding-top:18px;border-top:1px solid #c5b78e30}
#select .ability-section h2{grid-column:1/-1;margin:0 0 4px;font:650 9px system-ui;letter-spacing:2px;color:#9aafa9}
#select .hero-detail{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;justify-content:flex-start}
#select .menu-ability{position:relative;flex:0 0 var(--menu-icon);width:var(--menu-icon);height:calc(var(--menu-icon) + 32px);padding:0;border:0;border-radius:0;background:none;box-shadow:none;cursor:help}
#select .menu-ability i{position:absolute;inset:0 auto auto 0;width:var(--menu-icon);height:var(--menu-icon);box-sizing:border-box;border:1px solid #b8a77580;border-radius:4px;box-shadow:0 3px 12px #0008;background-repeat:no-repeat}
#select .menu-ability:hover i,#select .menu-ability:focus-visible i{border-color:#f5d99c;box-shadow:0 0 0 2px #d8c39533}
#select .menu-ability kbd{position:absolute;top:calc(var(--menu-icon) - 21px);left:3px;bottom:auto;min-width:16px;border:1px solid #b7c3b94d;border-radius:2px;padding:0 3px;background:#071116ed;font:700 9px/16px system-ui;color:#f3eddd}
#select .menu-ability-name{position:absolute;top:calc(var(--menu-icon) + 7px);left:-4px;right:-4px;color:#9eafab;text-align:center;font:500 9px/1.3 system-ui}
#select .shared-detail{--menu-icon:42px;grid-column:1;grid-row:2;display:flex;align-items:center;gap:8px;padding:9px 18px 9px 0;margin:0;border:0;border-right:1px solid #b7b78b30}
#select .shared-detail .shared-medallion{height:42px}
#select .shared-detail>div{display:none}
#select .home-layout{grid-column:2;grid-row:2;width:100%;padding:28px 0;align-self:center}
#select .play-panel{position:relative;padding:26px;border:1px solid #c9b58155;border-top:2px solid #dac18c;border-radius:3px;background:linear-gradient(150deg,#193039ed,#09191ff7);box-shadow:0 24px 60px #0007,inset 0 1px #ffffff09}
#select .play-heading{font:500 34px/1.1 Georgia,serif;letter-spacing:.5px;color:#f1e1bd;margin:0 0 25px}
#select .field-label{font:500 10px system-ui;letter-spacing:.5px;color:#a8b7b0;margin-bottom:8px}
#select input:not([type=checkbox]),#select #local-arena{height:44px;padding:10px 12px;font:450 12px system-ui;border-radius:3px;background:#07151c!important;border-color:#aebda72b!important;color:#dfdfcd}
#select .mode-options{margin:16px 0;padding:3px;gap:3px;border:1px solid #9eae9d24;border-radius:3px;background:#08181f}
#select .mode-choice{height:39px;padding:8px;font:650 14px system-ui!important;border-radius:2px;background:none;border-color:transparent;color:#8fa69e}
#select .mode-choice.on{border-color:#d8c29170;background:#c3ac711c;color:#f2dca6}
#select .primary-action{min-height:49px;background:linear-gradient(110deg,#ecd39a,#bb985b);border:1px solid #f0d6a1;border-radius:3px;box-shadow:0 5px 22px #c4a55c20;color:#162329;font:750 13px system-ui!important;letter-spacing:.2px}
#select .primary-action:hover:not(:disabled){background:linear-gradient(110deg,#f9e6b8,#d1b075)}
#select .secondary-action{min-height:39px;border-radius:3px;border-color:#9cafaa2e;background:#9bb7a607;color:#c0d0c9;font:550 11px system-ui!important}
#select .secondary-action:hover:not(:disabled){border-color:#c8bb8a80;background:#abc3a912}
#select .join-row{gap:7px;margin-top:10px}
#select .local-actions{gap:8px;margin-top:20px;padding-top:18px;border-color:#acb79725}
#select .difficulty{gap:20px;margin-top:13px}#select .opt{font-size:10px}
#select .menu-footer{grid-column:1/-1;min-height:48px;border-top:1px solid #c0b78c30;font-size:10px;gap:20px}
#select .menu-controls{font-size:9px;letter-spacing:.5px;color:#7f9996}#select .creator-credit{font-size:11px;color:#b6c4b9}#select .menu-footer>a{color:#e0c894}
#select.in-lobby{grid-template-rows:100px auto auto auto 48px}
#select.in-lobby .lobby-view{grid-column:1/-1;grid-row:2}
#select.in-lobby .roster-section{grid-column:1/-1;grid-row:3;padding:22px 0}
#select.in-lobby .hero-focus{display:none}#select.in-lobby .classes{max-width:850px;margin-inline:auto}
#select.in-lobby .ability-section{max-width:850px;margin-inline:auto}
#select.in-lobby .team-panel{border-radius:3px;background:#0c2029ed;border-color:#adc4c333}
@media(min-width:951px) and (max-width:1200px){
 #select.menu-shell{--menu-icon:52px;column-gap:28px;grid-template-columns:minmax(0,1fr) 280px;padding-inline:28px}
 #select .hero-focus{--focus-icon-size:120px;padding:22px;min-height:200px;gap:20px}#select .card{--class-icon-size:52px;min-height:94px}#select .play-panel{padding:22px}
 #select .hero-detail{gap:8px}#select .ability-section{column-gap:12px}#select .shared-detail{padding-right:12px}
}
@media(max-width:950px){
 #select.menu-shell{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0 24px}
 #select .menu-top{min-height:90px;padding-right:0;flex-shrink:0}#select .wordmark img{width:190px;height:74px}#select .menu-tools{gap:6px}
 #select .roster-section{order:1;padding:24px 0}#select .home-layout{order:2;padding:0 0 24px}#select .lobby-view{order:2}#select .netstatus{order:3}#select .menu-footer{order:4;flex-shrink:0}
 #select .hero-focus{--focus-icon-size:140px;min-height:210px}#select #selected-hero{font-size:58px}
 body:has(#select:not(.hidden)) #fullscreen-toggle{top:auto;bottom:10px;right:10px}
}
@media(max-width:600px){
 #select.menu-shell{--menu-icon:48px;padding-inline:16px}#select .menu-top{min-height:112px;flex-wrap:wrap;justify-content:center;gap:0;padding:6px 0}
 #select .wordmark img{width:175px;height:66px}#select .menu-tools{width:100%;justify-content:center;margin:0;gap:14px}#select .menu-tools .secondary-action{min-height:30px;padding:4px 8px}#select #language{padding:6px 8px}
 #select .hero-focus{--focus-icon-size:86px;min-height:170px;padding:18px 14px;gap:14px;margin-bottom:18px}#select #selected-hero{font-size:34px;margin:9px 0 12px}#select #selected-role{font-size:8px;letter-spacing:1px}#select #hero-summary{font-size:11px;line-height:1.55}
 #select .classes{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}#select .card{--class-icon-size:52px;min-height:87px;padding:9px 3px}#select .card .name{font-size:10px}
 #select .ability-section{grid-template-columns:1fr;gap:12px;margin-top:20px}#select .hero-detail{grid-column:1;grid-row:3;gap:9px}#select .shared-detail{grid-row:2;width:max-content;border:0;padding:0}#select .play-panel{padding:22px}
 #select .menu-footer{gap:10px}#select .menu-controls{font-size:8px}#select .creator-credit{font-size:10px}
}
@media(min-width:951px) and (max-height:800px){
 #select.menu-shell{grid-template-rows:78px minmax(min-content,1fr) auto 38px;--menu-icon:52px}
 #select .menu-top{min-height:78px}#select .wordmark img{width:190px;height:70px}#select .hero-focus{--focus-icon-size:120px;min-height:190px;margin-bottom:18px;padding-block:18px}
 #select #selected-hero{font-size:54px}#select .roster-section,#select .home-layout{padding-block:18px}#select .card{--class-icon-size:55px;min-height:94px;padding-block:10px}
 #select .ability-section{margin-top:18px;padding-top:14px}#select .play-panel{padding:22px}#select .play-heading{margin-bottom:18px}#select .menu-footer{min-height:38px}
}
@media(prefers-reduced-motion:reduce){#select .card{transition:none}}