/* Nameplates leave the mech clear; opening one reveals its equipment card. */
#main-menu .hangar-loadout { position:absolute; inset:0; z-index:3; pointer-events:none; }
#main-menu .hangar-loadout.is-switching { visibility:hidden; }
#main-menu .loadout-callout {
  --loadout-accent:var(--ui-cyan); position:absolute; box-sizing:border-box;
  left:var(--callout-x,63%); top:var(--callout-y,19%); width:max-content; max-width:222px;
  padding:0;
  pointer-events:auto; text-align:left; color:var(--ui-text);
  border:1px solid #64817e99; border-left:3px solid var(--loadout-accent); border-radius:2px 9px 2px 9px;
  background:linear-gradient(125deg,#1a3036f2,#09171df5); box-shadow:0 5px 18px #0005;
  backdrop-filter:blur(12px); transition:border-color .15s,box-shadow .15s;
}
#main-menu .loadout-callout[open] { width:222px; z-index:2; border-color:#6e8e8bb3; border-left-color:var(--loadout-accent); box-shadow:0 14px 32px #0008,inset 0 0 0 3px #ffffff07; }
#main-menu .loadout-card-name { display:flex; align-items:center; gap:12px; list-style:none; box-sizing:border-box; min-height:44px; padding:10px 12px; cursor:pointer; }
.loadout-card-name::-webkit-details-marker { display:none; }
#main-menu .loadout-card-name strong, #main-menu .loadout-card-name #back-equipped { flex:1; min-width:0; margin:0; color:#edf5f4; font:650 13px/1.25 var(--ui-font); overflow-wrap:anywhere; }
.loadout-card-name::after { content:''; flex:none; width:6px; height:6px; border-right:1.5px solid var(--loadout-accent); border-bottom:1.5px solid var(--loadout-accent); transform:rotate(45deg) translateY(-2px); }
[open] > .loadout-card-name::after { transform:rotate(225deg) translate(-1px,-1px); }
#main-menu .loadout-card-name:focus-visible { outline:2px solid var(--loadout-accent); outline-offset:3px; border-radius:2px; }
#main-menu .loadout-callout[open] > .loadout-card-name { background:linear-gradient(100deg,#ffffff0c,transparent); border-bottom:1px solid #72908b66; }
.loadout-card-body { padding:9px; }
.loadout-card-art { position:relative; display:grid; place-items:center; height:116px; margin-top:8px; border:1px solid #61797788; border-radius:2px 7px 2px 7px; overflow:hidden; background:radial-gradient(ellipse at 50% 65%,#31454b,#0a151a 75%); box-shadow:inset 0 0 18px #0008; }
.loadout-card-art::before { content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,#b0cbc605 0 1px,transparent 1px 4px),linear-gradient(135deg,transparent 48%,#ffffff05 49%,transparent 50%); }
.loadout-card-art::after { content:''; position:absolute; inset:6px; pointer-events:none; background:linear-gradient(var(--loadout-accent),var(--loadout-accent)) top left / 16px 2px no-repeat,linear-gradient(var(--loadout-accent),var(--loadout-accent)) bottom right / 16px 2px no-repeat; opacity:.65; }
.loadout-card-art img { position:relative; width:90%; height:108px; object-fit:contain; transform:scale(1.75); filter:drop-shadow(0 8px 5px #000a); }
.backpack-callout .loadout-card-art img { transform:scale(1.35); }
.loadout-card-level { display:block; width:max-content; max-width:100%; margin:-1px auto 8px; padding:5px 12px; position:relative; border:1px solid #61797788; border-top:2px solid var(--loadout-accent); border-radius:0 0 5px 5px; background:#16282e; color:#d4e4e1; text-align:center; font:10px/1.2 var(--ui-mono); }
#main-menu .weapon-callout { --loadout-accent:var(--ui-action); left:var(--callout-x,26%); top:var(--callout-y,41%); }
#main-menu .mount-callout { --loadout-accent:var(--ui-warn); left:var(--callout-x,36%); top:var(--callout-y,20%); width:222px; padding:4px; }
.loadout-mount-slots { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; }
#main-menu .loadout-mount-slot { position:relative; display:grid; place-items:center; min-width:0; height:44px; margin:0; padding:0; border:1px dashed #52767488; border-radius:3px; background:#091b20; color:#8ca49e; font:20px var(--ui-mono); cursor:pointer; touch-action:manipulation; }
.loadout-mount-slot img { width:36px; max-width:100%; height:36px; object-fit:contain; filter:drop-shadow(0 2px 2px #0008); }
.loadout-mount-slot b { position:absolute; right:2px; bottom:0; min-width:12px; text-align:center; border-radius:2px; background:#08171c; color:var(--ui-warn); font:600 10px var(--ui-font); }
#main-menu .loadout-mount-slot.is-equipped { border-style:solid; border-color:#c7a95988; background:linear-gradient(135deg,#344038,#102329); }
#main-menu .loadout-mount-slot:hover { border-color:var(--ui-warn); background:#354339; color:var(--ui-warn); }
#main-menu .loadout-mount-slot:focus-visible { outline:2px solid var(--ui-warn); outline-offset:1px; }
#main-menu .loadout-callout:hover, #main-menu .loadout-callout:focus-within,
#main-menu .loadout-callout:has(button[aria-expanded=true]) { border-color:var(--loadout-accent); background:#17353af5; box-shadow:0 12px 32px #0008,0 0 20px #71d8ce18; }
.loadout-callout-label { display:flex; align-items:center; justify-content:space-between; gap:7px; color:var(--loadout-accent); font:8px/1.2 var(--ui-mono); letter-spacing:.08em; }
.loadout-callout-label > span { color:#a6bdbc; font-size:7px; letter-spacing:.04em; }
.loadout-actions { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:6px; margin-top:5px; }
.loadout-actions.mount-loadout-actions { grid-template-columns:1fr; }
#main-menu .loadout-actions .loadout-swap { display:grid; place-items:center; }
.loadout-swap svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#main-menu .loadout-actions button { min-height:44px; min-width:0; padding:6px 3px; border:1px solid #658a8866; border-radius:2px; color:var(--loadout-accent); background:#173238; font:600 12px var(--ui-font); cursor:pointer; }
#main-menu .loadout-actions button:hover, #main-menu .loadout-actions button:focus-visible { border-color:var(--loadout-accent); background:#244449; }
#main-menu .loadout-actions .equipment-upgrade-button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:#173238; border-color:#658a8899; color:#edf5f4; }
#main-menu .loadout-actions .equipment-upgrade-button:hover, #main-menu .loadout-actions .equipment-upgrade-button:focus-visible { border-color:var(--ui-cyan); background:#244449; }
.loadout-actions .equipment-gold { font-size:10px; }
#main-menu .loadout-actions .equipment-upgrade-button:disabled { opacity:.55; cursor:default; border-color:#658a8855; background:#12282d; }
.loadout-upgrade-feedback { margin:8px 0 0; color:var(--ui-action); font:11px/1.4 var(--ui-font); }
#main-menu #panel-mount-inventory { box-sizing:border-box; width:360px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); margin:auto; padding:0; border:1px solid #557773; border-top:2px solid var(--ui-warn); border-radius:3px; color:var(--ui-text); background:#0b1c22; box-shadow:0 24px 80px #000a; }
#panel-mount-inventory[open] { display:flex; flex-direction:column; }
#panel-mount-inventory::backdrop { background:#020b104f; }
.mount-inventory-header { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px 8px 14px; border-bottom:1px solid #395554; }
.mount-inventory-header h2 { margin:0; font:650 16px var(--ui-font); }
#main-menu #mount-inventory-close { flex:none; width:44px; height:44px; padding:0; border:0; color:var(--ui-muted); background:transparent; font:24px var(--ui-font); cursor:pointer; }
#mount-inventory-list { min-height:0; overflow:auto; padding:8px 12px; overscroll-behavior:contain; }
.mount-inventory-row { display:grid; grid-template-columns:44px minmax(0,1fr) 76px; align-items:center; gap:10px; min-height:64px; border-bottom:1px solid #39555466; }
.mount-inventory-row:last-child { border:0; }
.mount-inventory-row img { width:44px; height:44px; object-fit:contain; }
.mount-inventory-row strong { display:block; font:650 13px/1.3 var(--ui-font); }
.mount-inventory-row span { display:block; margin-top:4px; color:var(--ui-cyan); font:12px var(--ui-font); }
#main-menu .mount-inventory-row button, #main-menu #btn-mount-inventory-shop { min-height:44px; padding:8px; border:1px solid #648581; border-radius:2px; color:var(--ui-text); background:#173238; font:600 12px var(--ui-font); cursor:pointer; }
#main-menu .mount-inventory-row button:hover, #main-menu #btn-mount-inventory-shop:hover { border-color:var(--ui-warn); background:#29403c; }
#main-menu .mount-inventory-row button:disabled { opacity:.5; cursor:default; }
#main-menu .mount-inventory-row button:focus-visible, #main-menu #btn-mount-inventory-shop:focus-visible, #main-menu #mount-inventory-close:focus-visible { outline:2px solid var(--ui-warn); outline-offset:2px; }
.mount-inventory-empty { margin:16px 0; color:var(--ui-muted); font:13px var(--ui-font); }
#panel-mount-inventory footer { flex:none; padding:12px; border-top:1px solid #395554; }
#main-menu #btn-mount-inventory-shop { width:100%; color:var(--ui-warn); }
#mount-inventory-feedback { margin:0; padding:0 12px 12px; color:var(--ui-action); font:12px var(--ui-font); }
#main-menu .loadout-leader, #main-menu #back-leader { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; color:var(--ui-cyan); }
#main-menu .weapon-leader { color:var(--ui-action); }
#main-menu .mount-leader { color:var(--ui-warn); }
#main-menu .loadout-leader path { fill:none; stroke:currentColor; stroke-width:1; opacity:.8; }
#main-menu .loadout-leader circle { fill:#0a1c20; stroke:currentColor; stroke-width:1.5; }

#main-menu #panel-chassis.quick-loadout {
  inset:auto; left:var(--picker-x,50%); top:var(--picker-y,12px); margin:0;
  width:344px; max-width:calc(100vw - 24px); height:auto; max-height:calc(100dvh - 24px);
  border:1px solid #668b8799; border-top:2px solid var(--ui-cyan); border-radius:5px;
  background:#0a1b20f7; box-shadow:0 24px 90px #000a; overflow:hidden;
}
#panel-chassis.quick-loadout::backdrop { background:#020b104f; }
.quick-loadout .shop-header { min-height:52px; padding:9px 12px; gap:12px; background:transparent; }
#main-menu .quick-loadout .shop-back { order:3; padding:0; margin-left:auto; min-width:32px; width:32px; height:32px; justify-content:center; border:0; }
.quick-loadout .shop-back-label { display:none; }
.quick-loadout .shop-back-arrow { font-size:24px; }
.quick-loadout .shop-heading { order:0; border:0; padding:0; }
.quick-loadout .shop-heading h2 { margin:0; font:650 16px/1.2 var(--ui-font); letter-spacing:0; }
#main-menu .quick-loadout .shop-content { flex:0 1 auto; min-height:0; display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; scroll-snap-type:none; }
.quick-loadout .shop-mechs, .quick-loadout .shop-catalog-heading, .quick-loadout .shop-intro,
.quick-loadout .shop-earn, .quick-loadout .shop-stage, .quick-loadout .shop-footer,
.quick-loadout .shop-fit, .quick-loadout .shop-item-meta, .quick-loadout #shop-item-name,
.quick-loadout .shop-hint, .quick-loadout .shop-heading .shop-eyebrow,
.quick-loadout .shop-wallet, .quick-loadout .shop-categories, .quick-loadout .shop-stats,
.quick-loadout #back-system-detail, .quick-loadout .shop-product-role,
.quick-loadout #shop-item-summary, .quick-loadout .shop-detail,
.quick-loadout #shop-detail-toggle { display:none; }
#main-menu .quick-loadout .shop-catalog { flex:none; width:auto; height:auto; padding:10px 10px 12px; border:0; overflow:visible; background:transparent; }
#main-menu .quick-loadout .shop-products { display:flex; flex-direction:column; flex:none; gap:5px; padding:0; overflow:visible; }
#main-menu .quick-loadout .shop-product { min-height:60px; grid-template-columns:60px minmax(0,1fr); border-radius:3px; }
.quick-loadout .shop-product-art { min-height:58px; border:0; }
.quick-loadout .shop-product-art img { padding:4px; }
.quick-loadout .shop-product-index, .quick-loadout .shop-product-cooldown { display:none; }
.quick-loadout .shop-product-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:8px; padding:8px 10px 8px 3px; }
.quick-loadout .shop-product strong { font-size:13px; }
.quick-loadout .shop-product small { align-self:center; text-align:right; border:0; margin:0; padding:0; font-size:9px; }
.quick-loadout .shop-product-check { display:none; }
#main-menu .quick-loadout .shop-inspector { position:sticky; bottom:0; z-index:1; flex:none; width:auto; height:auto; min-height:0; border:0; overflow:visible; background:#0b1d22; }
.quick-loadout .shop-item-info { padding:10px; border-top:1px solid #395554; }
.quick-loadout .shop-purchase { min-height:44px; font-size:12px; border-radius:2px; }
.quick-loadout .shop-feedback { font-size:11px; }
.quick-loadout .shop-price strong { font-size:24px; }
.quick-loadout .shop-price-status { font-size:12px; margin-bottom:10px; }
.quick-loadout .shop-product[data-price="true"] small { font-size:12px; font-weight:650; }

@media(max-width:1099px), (max-height:700px) {
  #main-menu .loadout-actions .equipment-upgrade-button { font-size:11px; }
  #main-menu .hangar-loadout { position:relative; inset:auto; grid-column:3; grid-row:3; align-self:start; display:grid; align-items:start; gap:7px; }
  #main-menu .loadout-callout, #main-menu .loadout-callout[open] { position:static; width:100%; max-width:none; }
  #main-menu .loadout-card-name strong, #main-menu .loadout-card-name #back-equipped { font-size:12px; }
  .loadout-card-art { height:100px; }
  .loadout-card-art img { height:92px; }
  #main-menu .loadout-leader { display:none; }
}
@media(max-height:700px) and (min-width:560px), (min-width:560px) and (max-width:700px) {
  #main-menu .hangar-loadout { grid-row:2; align-self:end; gap:5px; }
  #main-menu .mech-spec #mech-stat-role { display:none; }
  #main-menu .mech-stat-row { margin-top:4px; }
  #main-menu .loadout-card-name { padding:8px 10px; }
  .loadout-card-art { height:76px; }
  .loadout-card-art img { height:70px; }
}
@media(max-height:700px) {
  .upgrade-loadout .upgrade-steps { max-height:240px; }
  .upgrade-loadout .upgrade-path-header { padding:12px; }
}
@media(max-width:559px) {
  #main-menu .hangar-loadout { grid-column:1; grid-row:4; order:3; align-self:start; grid-template-columns:1fr 1fr; gap:8px; margin-top:174px; }
  #main-menu #menu-lobby > .mech-roster { grid-row:5; padding-top:0; }
  #main-menu .mount-callout { grid-column:1 / -1; }
  #main-menu .loadout-card-name { padding:9px; gap:8px; }
  #main-menu .loadout-card-name strong, #main-menu .loadout-card-name #back-equipped { font-size:11px; }
  .loadout-callout-label { font-size:7px; letter-spacing:0; }
  .loadout-callout-label > span { font-size:6px; }
  #main-menu #panel-chassis.quick-loadout { left:12px; top:auto; bottom:12px; width:calc(100vw - 24px); max-height:calc(100dvh - 24px); }
}