/* Equipment occupies the hangar's existing four edges; the mech stays in view. */
#main-menu[data-loadout-editor] { --editor-accent:var(--ui-cyan); }
#main-menu[data-loadout-editor=weapons] { --editor-accent:var(--ui-action); }
#main-menu[data-loadout-editor=mounts] { --editor-accent:var(--ui-warn); }
#main-menu[data-loadout-editor] #menu-lobby {
  height:100dvh; min-height:0; grid-template-rows:76px minmax(0,1fr) 176px;
}
#main-menu[data-loadout-editor] :is(.lobby-brand,.pilot-license-group,.career-last,.mech-roster,.daily-quests,.mech-arrow,.mech-unlock-panel),
#main-menu[data-loadout-editor] .lobby-bottom > :is(.tutorial-btn,.menu-mode) { display:none; }
#main-menu[data-loadout-editor] .hangar-loadout { position:absolute; inset:0; display:block; margin:0; pointer-events:none; z-index:4; }
#main-menu[data-loadout-editor] .loadout-callout { display:none; }
#main-menu.loadout-motion .loadout-leader { opacity:0; }
/* Slide offsets must not enlarge the menu's scrollable area. */
#main-menu.loadout-motion #menu-lobby { overflow:clip; }
#main-menu[data-loadout-editor] .mech-inspection { grid-column:2; grid-row:2; }
.loadout-editor-panel { box-sizing:border-box; min-width:0; min-height:0; z-index:3; border:1px solid #52757088; border-top:2px solid var(--editor-accent); border-radius:3px; background:linear-gradient(145deg,#173139ee,#091a20f5 65%); box-shadow:0 18px 40px #0005; scrollbar-width:thin; scrollbar-color:#547777 transparent; }
#loadout-editor-preview { grid-column:1; grid-row:2; display:flex; flex-direction:column; overflow-y:auto; }
.loadout-editor-heading { flex:none; display:flex; align-items:center; padding:16px; border-bottom:1px solid #52757066; }
#main-menu #loadout-editor-back { grid-column:1; grid-row:1; align-self:start; display:flex; align-items:center; gap:18px; min-height:68px; padding:10px 20px; border:1px solid #628582; border-left:3px solid var(--editor-accent); border-radius:2px; color:var(--ui-text); background:#10282eed; font:900 36px/1 var(--ui-display); letter-spacing:.06em; cursor:pointer; z-index:3; }
#loadout-editor-back span { font:32px/1 var(--ui-font); color:var(--editor-accent); }
#main-menu #loadout-editor-back:hover { color:var(--editor-accent); border-color:var(--editor-accent); background:#203b40; }
.loadout-editor-heading h2 { margin:0; color:var(--ui-text); font:900 28px var(--ui-display); text-transform:uppercase; }
#loadout-editor-art { flex:none; }
#loadout-editor-art .shop-stage { height:clamp(140px,23vh,240px); }
#loadout-editor-art .shop-stage img { box-sizing:border-box; padding:18px 4px; }
#loadout-editor-art .shop-stage-label { top:12px; left:14px; right:14px; font-size:8px; }
#loadout-editor-art .shop-stage-caption { display:none; }
.loadout-editor-caption { flex:none; display:grid; gap:7px; padding:0 16px 18px; }
.loadout-editor-caption strong { color:var(--ui-text); font:650 20px/1.2 var(--ui-font); }
.loadout-editor-caption > span { color:var(--editor-accent); font:10px var(--ui-mono); letter-spacing:.06em; }
#loadout-editor-preview .shop-upgrade-path { flex:1 0 200px; width:100%; box-sizing:border-box; display:flex; flex-direction:column; border-inline:0; border-bottom:0; background:#0a1b2099; }
#loadout-editor-preview .upgrade-path-header { padding:14px; }
#loadout-editor-preview .upgrade-steps { flex:1; min-height:150px; max-height:300px; }
#loadout-editor-preview .upgrade-steps > li { grid-template-columns:24px minmax(0,1fr); gap:7px; }
#loadout-editor-preview .upgrade-steps > li::after { left:11px; top:40px; }
#loadout-editor-preview .upgrade-step-marker { width:22px; height:24px; margin-top:22px; font-size:10px; }
#loadout-editor-preview .upgrade-step-body { height:auto; min-height:68px; padding:10px; grid-template-columns:minmax(0,1fr); gap:8px; }
#loadout-editor-preview .upgrade-step-effect { font-size:13px; }
#loadout-editor-preview .upgrade-step-badge { font-size:9px; }
#loadout-editor-preview .upgrade-step-locked { flex-direction:row; justify-content:space-between; }
#loadout-editor-preview .upgrade-step-locked svg { width:16px; height:16px; }
#main-menu #loadout-editor-preview #shop-item-upgrade { flex-direction:row; justify-content:space-between; min-height:44px; width:100%; min-width:0; padding:8px; font-size:12px; }
#loadout-editor-rack { padding:4px 14px 18px; }
#loadout-editor-rack > p { margin:10px 0 0; color:var(--ui-muted); font:11px var(--ui-font); }
#loadout-editor-slots { margin-top:12px; }
#main-menu #loadout-editor-slots .loadout-mount-slot:disabled { cursor:default; opacity:.4; }
#loadout-editor-detail { grid-column:3; grid-row:2; overflow-y:auto; --item-color:var(--editor-accent); }
#loadout-editor-detail .shop-item-info { display:block; padding:20px 18px; border:0; }
#main-menu #loadout-editor-detail :is(.shop-item-meta,.shop-fit,.shop-hint,.shop-actions) { display:none; }
#loadout-editor-detail .shop-item-meta { display:grid; gap:8px; line-height:1.4; }
#loadout-editor-detail #shop-item-name { margin:14px 0; font:900 34px/1.05 var(--ui-display); overflow-wrap:anywhere; }
#loadout-editor-detail #shop-item-summary { font:13px/1.6 var(--ui-font); margin-bottom:18px; }
#loadout-editor-detail .shop-detail { border:0; padding:0; margin-top:18px; }
#loadout-editor-detail .shop-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
#loadout-editor-detail .shop-stats dd { font-size:15px; }
#loadout-editor-detail .shop-equipment-progress { margin:20px 0 0; }
#loadout-editor-detail .shop-actions button { width:100%; min-width:0; }
#loadout-editor-detail .shop-hint { margin-top:18px; line-height:1.5; text-align:left; }
#loadout-editor-roster { grid-column:1 / 3; grid-row:3; min-width:0; min-height:0; z-index:3; align-self:end; }
.loadout-editor-roster-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.loadout-editor-roster-heading h2 { margin:0; color:var(--ui-text); font:650 13px var(--ui-font); }
.loadout-editor-roster-heading > span { color:var(--ui-muted); font:9px var(--ui-mono); letter-spacing:.08em; }
#loadout-editor-list .shop-products { display:flex; flex-direction:row; gap:10px; overflow-x:auto; overflow-y:hidden; padding:28px 0 8px; scroll-snap-type:x proximity; }
/* Match the chassis roster: wide plates, artwork above the rim, bottom labels. */
#loadout-editor-list .shop-product { display:block; flex:0 0 196px; width:196px; min-height:0; height:110px; overflow:visible; border:1px solid #547273aa; border-bottom-width:3px; border-radius:0; background:#0d252c; scroll-snap-align:start; cursor:pointer; box-sizing:border-box; }
#loadout-editor-list .shop-product.inspecting { border-color:var(--editor-accent); box-shadow:inset 0 0 0 1px var(--editor-accent),0 8px 22px #0008; }
#loadout-editor-list .shop-product-art { display:block; width:100%; height:100%; min-height:0; border:0; overflow:visible; background:radial-gradient(ellipse at center,#28434c,#0c191e); }
#loadout-editor-list .shop-product-art img { inset:auto; left:-15%; bottom:-1px; width:130%; height:145%; padding:0; box-sizing:border-box; object-fit:cover; object-position:center; pointer-events:none; filter:drop-shadow(0 9px 7px #0009); }
#loadout-editor-list .shop-product.locked .shop-product-art img { filter:grayscale(1) sepia(1) saturate(5) hue-rotate(140deg) brightness(1.45) drop-shadow(0 0 8px #39c9ff88); }
#loadout-editor-list .dual-weapon-art > img:not(.dual-weapon-copy) { transform:translate(-6%,-12%) scale(.72); }
#loadout-editor-list .dual-weapon-art > img.dual-weapon-copy { transform:translate(6%,12%) scale(.72); }
#main-menu[data-loadout-editor=backpacks] #loadout-editor-list .shop-product-art img,
#main-menu[data-loadout-editor=mounts] #loadout-editor-list .shop-product-art img { left:-5%; width:110%; object-fit:contain; }
#loadout-editor-list .shop-product-copy { display:contents; }
#loadout-editor-list .shop-product strong { position:absolute; z-index:3; left:0; right:0; bottom:0; min-height:0; padding:12px 24px 8px 10px; background:linear-gradient(transparent,#08141cf2 25%); font:650 13px/1.15 var(--ui-font); text-transform:uppercase; }
#loadout-editor-list .shop-product small { position:absolute; z-index:4; top:5px; right:5px; margin:0; padding:3px 4px; border:0; background:#182024e8; font:9px var(--ui-mono); color:var(--ui-warn); }
#loadout-editor-list .shop-product:not([data-price=true]):not([data-stock=true]) small { display:none; }
#loadout-editor-list .shop-product-check { z-index:4; top:auto; bottom:8px; right:10px; color:var(--editor-accent); }
#loadout-editor-list :is(.shop-product-role,.shop-product-cooldown,.shop-product-index) { display:none; }
#main-menu[data-loadout-editor] .lobby-bottom { grid-column:3; grid-row:3; align-self:end; position:static; display:flex; flex-direction:column; gap:0; min-width:0; z-index:3; }
#loadout-editor-actions { display:grid; gap:6px; width:100%; box-sizing:border-box; }
#main-menu .loadout-editor-action { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:50px; padding:12px 16px; border:1px solid #628582; border-radius:2px; background:#10282eed; color:var(--ui-text); font:700 16px/1.2 var(--ui-font); letter-spacing:.03em; cursor:pointer; box-sizing:border-box; }
#main-menu .loadout-editor-action:hover:not(:disabled) { background:#29433e; border-color:var(--editor-accent); }
#main-menu #loadout-buy { border-color:#b79550; background:#322f20ed; color:#ffedbf; }
#main-menu #loadout-buy-cost { font:600 12px var(--ui-font); }
#main-menu .loadout-editor-action:disabled { opacity:.5; cursor:default; }
#main-menu #loadout-equip { justify-content:flex-start; }
#main-menu #loadout-equip[data-equipped=true] { border-color:#5faaa0; color:var(--ui-cyan); background:#143431ed; opacity:1; }
#main-menu #loadout-equip[data-equipped=true]::after { content:'✓'; margin-left:auto; }
#loadout-editor-feedback { margin:0; color:var(--ui-warn); font:12px/1.4 var(--ui-font); }
#loadout-editor-feedback:empty { display:none; }
#main-menu[data-loadout-editor] :is(#loadout-editor-back,.loadout-editor-action,.shop-product,.shop-secondary,.shop-purchase):focus-visible { outline:2px solid var(--editor-accent); outline-offset:-3px; }
@media (min-width:560px) and (max-height:700px), (min-width:560px) and (max-width:1099px) {
  #main-menu[data-loadout-editor] #menu-lobby { grid-template-columns:clamp(180px,24vw,250px) minmax(80px,1fr) clamp(200px,25vw,280px); grid-template-rows:46px minmax(0,1fr) 150px; gap:10px; padding:14px; }
  #loadout-editor-art .shop-stage { height:130px; }
  #main-menu #loadout-editor-back { min-height:46px; padding:8px 14px; font-size:26px; }
  #loadout-editor-back span { font-size:24px; }
  .loadout-editor-heading { padding:12px; }
  .loadout-editor-heading h2 { font-size:23px; }
  .loadout-editor-caption { padding:0 12px 14px; }
  .loadout-editor-caption strong { font-size:17px; }
  #loadout-editor-detail .shop-item-info { padding:14px 12px; }
  #loadout-editor-detail #shop-item-name { font-size:27px; }
  #loadout-editor-list .shop-products { padding-top:22px; }
  #loadout-editor-list .shop-product { height:90px; flex-basis:160px; width:160px; }
  #loadout-editor-list .shop-product strong { padding:10px 22px 6px 7px; font-size:11px; }
  .loadout-editor-roster-heading { margin-bottom:6px; }
  .loadout-editor-roster-heading > span { display:none; }
  #main-menu .loadout-editor-action { min-height:44px; padding-block:10px; font-size:14px; }
}
@media (max-width:559px) {
  #main-menu[data-loadout-editor] { scroll-padding-bottom:110px; }
  #main-menu[data-loadout-editor] #menu-lobby { height:auto; min-height:100dvh; grid-template-columns:minmax(0,1fr); grid-template-rows:auto; gap:14px; padding:16px; }
  #main-menu[data-loadout-editor] #menu-lobby > .lobby-brand { grid-row:1; }
  #main-menu[data-loadout-editor] #menu-lobby > .lobby-resources { grid-row:2; }
  #main-menu[data-loadout-editor] .mech-inspection { position:relative; grid-column:1; grid-row:3; height:160px; min-height:0; margin:0; order:0; }
  #loadout-editor-preview { grid-column:1; grid-row:4; max-height:440px; }
  #loadout-editor-art .shop-stage { height:180px; }
  #loadout-editor-roster { grid-column:1; grid-row:5; }
  #loadout-editor-detail { grid-column:1; grid-row:6; }
  #main-menu[data-loadout-editor] #menu-lobby > .lobby-bottom { grid-column:1; grid-row:7; order:0; margin:0; position:sticky; bottom:0; }
  #loadout-editor-actions { grid-template-columns:1fr 1fr; gap:6px; background:#0b1d23; }
  #loadout-editor-feedback { grid-column:1 / -1; }
  #main-menu .loadout-editor-action { padding:12px; font-size:14px; }
  #main-menu #loadout-buy { flex-wrap:wrap; gap:2px 6px; }
  #main-menu #loadout-buy-cost { font-size:10px; }
}