/* mp-0110 BAG HUD: Marwans assetpakket (assets-src/bag-hud, gebouwd door tools/assets/build_bag_hud.py).
   Eén blad voor alle tas-art; bag-phone.css houdt alleen positie en badges. Spec docs/superpowers/afgewerkte-mds/2026-10-01-mp-0110-bag-hud-design.md. */
@font-face { font-family: 'JorMar Cinzel'; src: url('../../assets/ui/fonts/Cinzel-Variable.ttf') format('truetype'); font-weight: 400 900; font-display: swap; }
:root {
  --bag-hud-window: url(../../assets/ui/bag/hud-window.webp);
  --bag-hud-window-blank: url(../../assets/ui/bag/hud-window-blank.webp);
  --bag-hud-close: url(../../assets/ui/bag/button-close.webp);
  --bag-hud-tab-equipment: url(../../assets/ui/bag/tab-equipment.webp);
  --bag-hud-tab-equipment-pressed: url(../../assets/ui/bag/tab-equipment-pressed.webp);
  --bag-hud-tab-materials: url(../../assets/ui/bag/tab-materials.webp);
  --bag-hud-tab-materials-pressed: url(../../assets/ui/bag/tab-materials-pressed.webp);
  --bag-hud-tab-quest: url(../../assets/ui/bag/tab-quest.webp);
  --bag-hud-tab-quest-pressed: url(../../assets/ui/bag/tab-quest-pressed.webp);
  --bag-hud-slot: url(../../assets/ui/bag/slot.webp);
  --bag-hud-slot-selected: url(../../assets/ui/bag/slot-selected.webp);
  --bag-hud-track: url(../../assets/ui/bag/scrollbar-track.webp);
  --bag-hud-thumb: url(../../assets/ui/bag/scrollbar-thumb.webp);
  --bag-hud-action: url(../../assets/ui/bag/button-action.webp);
  --bag-hud-action-pressed: url(../../assets/ui/bag/button-action-pressed.webp);
  --bag-hud-divider: url(../../assets/ui/bag/divider.webp);
}

/* Venster voor alle drie de panelen: Marwans paneel als border-image, kop = var(--cw-tap) (B3, B21). */
#bagOverlay.open #bagPanel, #bagOverlay.open #bagInfoDrawer, #equipmentPanel {
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
  --bag-rim: calc(var(--cw-tap) * 54 / 132); /* gouden zijrand van het venster op de hoogte van de kop */
  border-image: var(--bag-hud-window) 132 54 54 355 fill / var(--cw-tap) var(--bag-rim) var(--bag-rim) calc(var(--cw-tap) * 355 / 132) stretch;
}
#bagOverlay.open #bagInfoDrawer, #equipmentPanel { border-image-source: var(--bag-hud-window-blank); }
#bagOverlay.open #bagPanel { padding: 0; --bag-gap: 8px; --bag-scroll-w: 20px; --bag-foot: 48px; }
/* Telefoon: 3 px gap en 6 px foot houden rij 3 en track boven de gouden onderlijn (goudrand = ceil(tap * 21 / 132) = 7 px bij tap 44, plus 2 px speling; 4 px padding onder #bagContent blijft). */
@media (max-height:520px) { #bagOverlay.open #bagPanel { --bag-gap: 3px; --bag-scroll-w: 12px; --bag-foot: 6px; } }

/* Kop: geschilderde BAG-titel uit hud-window; #bagTitle blijft voor schermlezers (B20). */
#bagHeader { padding-right: 14px; }
#bagTitle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Close (BAG, GEAR en ITEM INFO): tapbox var(--cw-tap), de art op 106/132 van de kophoogte zodat hij binnen de goudlijn blijft. */
#bagPanel .cwClose, #equipmentPanel .cwClose, #bagInfoDrawer .cwClose {
  width: var(--cw-tap); height: var(--cw-tap); min-width: var(--cw-tap); padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: var(--bag-hud-close) center / calc(100% * 106 / 132) no-repeat; font-size: 0; color: transparent;
}

/* Tabs: zes beelden, pressed via aria-selected; tekst blijft in de DOM (B18). Longhands, zodat het id-beeld de .cwTab-regel wint. */
#bagCategoryBar { padding: 0 18px; }
#bagCategoryTabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bag-gap); min-height: 0; margin: 0 0 var(--bag-gap); }
#bagCategoryTabs .cwTab {
  height: var(--cw-tap); min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background-color: transparent;
  background-position: center; background-size: contain; background-repeat: no-repeat; font-size: 0; color: transparent;
}
#bagCategoryEquipment { background-image: var(--bag-hud-tab-equipment); }
#bagCategoryEquipment[aria-selected="true"] { background-image: var(--bag-hud-tab-equipment-pressed); }
#bagCategorySupplies { background-image: var(--bag-hud-tab-materials); }
#bagCategorySupplies[aria-selected="true"] { background-image: var(--bag-hud-tab-materials-pressed); }
#bagCategoryQuest { background-image: var(--bag-hud-tab-quest); }
#bagCategoryQuest[aria-selected="true"] { background-image: var(--bag-hud-tab-quest-pressed); }

/* Grid 4x3: tegelmaat uit de container, gecentreerd, 3 rijen zichtbaar, snap per rij (B15, B16, B17). */
#bagOverlay.open #bagContent { container-type: size; padding: 0 18px 18px; box-sizing: border-box; }
@media (max-height:520px) { #bagOverlay.open #bagContent { padding-bottom: 4px; } }
#bagOverlay.open #bagGrid, #bagOverlay.open #bagSupplies, #bagOverlay.open #bagQuestItems {
  --bag-tile-h-fit: min((100cqw - 2 * var(--bag-scroll-w) - 3 * var(--bag-gap)) / 4 / 1.043, (100cqh - var(--bag-foot) - 2 * var(--bag-gap)) / 3, 64px);
  --bag-tile-h: max(44px, var(--bag-tile-h-fit));
  --bag-tile-w: calc(var(--bag-tile-h) * 1.043);
  width: calc(4 * var(--bag-tile-w) + 3 * var(--bag-gap)); margin-inline: auto;
  max-height: calc(3 * var(--bag-tile-h) + 2 * var(--bag-gap)); overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory; scrollbar-width: none;
}
#bagGrid::-webkit-scrollbar, #bagSupplies::-webkit-scrollbar, #bagQuestItems::-webkit-scrollbar { display: none; }
#bagOverlay.open #bagGrid, #bagOverlay.open #bagSupplies, #bagOverlay.open .bagQuestSlotGrid {
  display: grid; grid-template-columns: repeat(4, var(--bag-tile-w)); grid-auto-rows: var(--bag-tile-h);
  gap: var(--bag-gap); justify-content: center; padding: 0;
}
#bagGrid > *, #bagSupplies > *, .bagQuestSlotGrid > * { scroll-snap-align: start; }
#bagOverlay.open #bagGrid .bagSlot, #bagOverlay.open #bagSupplies .bagSlot, #bagOverlay.open .bagQuestSlotGrid .bagSlot, #bagOverlay.open .bagFiller {
  width: var(--bag-tile-w); height: var(--bag-tile-h); aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none;
  background: var(--bag-hud-slot) center / 100% 100% no-repeat;
}
#bagOverlay.open .bagFiller { opacity: .45; pointer-events: none; }
#bagOverlay.open #bagGrid .bagSlot.selected, #bagOverlay.open #bagSupplies .bagSlot.selected { background-image: var(--bag-hud-slot-selected); }

/* Saldo en hint (B22). Telefoon: in de kopband; elders onder het grid. */
#bagResources { flex: 0 0 auto; padding: 4px 18px 0; font: 700 var(--cw-fs-label)/1.3 'JorMar Cinzel', serif; color: var(--cw-parchment); text-align: center; }
#bagHint { padding: 3px 18px 0; font-size: var(--cw-fs-label); white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
#bagHint[hidden] { display: none; }
/* B39: saldo onder het grid ook op MATERIALS en QUEST (de DOM zet #bagSupplies erachter); de hint blijft de laatste regel. */
#bagResources { order: 1; }
#bagHint { order: 2; }
@media (max-height:520px) {
  #bagOverlay.open #bagResources {
    position: absolute; top: 0; right: calc(var(--cw-tap) + 18px); height: var(--cw-tap); padding: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  }
  #bagOverlay.open .bagBalanceSep { display: none; }
  #bagOverlay.open #bagPanel:has(#bagHint:not([hidden])) { border-image-source: var(--bag-hud-window-blank); }
  #bagOverlay.open #bagPanel:has(#bagHint:not([hidden])) #bagResources { visibility: hidden; }
  #bagOverlay.open #bagHint {
    position: absolute; top: 0; margin: 0; border: 0; border-radius: 0; left: var(--bag-rim); right: calc(var(--cw-tap) + 14px); height: var(--cw-tap); padding: 9px 0 0; letter-spacing: -0.03em; box-sizing: border-box;
    background: transparent; color: var(--cw-parchment); text-shadow: 0 1px 2px var(--cw-wood-deep), 0 0 3px var(--cw-wood-deep); z-index: 1;
  }
}

/* Overlay-scrollbar (B25-B29): Marwans track en thumb, alleen zichtbaar bij overflow; rechts naast het grid.
   Trackart: 70% van de breedte, pijlkappen 75 px bron (gemeten), dus vertikaal 0,7 * w * 75 / 61. Thumb: kap 44 = halve bronbreedte 87. */
#bagScrollTrack {
  position: absolute; width: var(--bag-scroll-w); box-sizing: border-box; z-index: 1; touch-action: none;
  border-style: solid; border-width: calc(var(--bag-scroll-w) * 0.7 * 75 / 61) 0;
  border-image: var(--bag-hud-track) 75 0 fill / calc(var(--bag-scroll-w) * 0.7 * 75 / 61) 15% stretch;
}
#bagScrollTrack[hidden] { display: none; }
#bagScrollThumb {
  position: absolute; left: 15%; width: 70%; box-sizing: border-box; cursor: grab;
  border-style: solid; border-width: calc(var(--bag-scroll-w) / 2) 0;
  border-image: var(--bag-hud-thumb) 44 0 fill / calc(var(--bag-scroll-w) / 2) 0 stretch;
}
/* Onzichtbaar tapvlak: begint aan de rechterrand van kolom 4 (de track sluit er direct op aan; de 15 % groefmarge hoort bij de thumb), tap-breed; #bagPanel knipt de rest af (B11). */
#bagScrollThumb::after { content: ''; position: absolute; left: calc(var(--bag-scroll-w) * -0.15); width: var(--cw-tap); inset-block: calc(var(--bag-scroll-w) / -2); }

/* GEAR (B31-B34): zelfde venster zonder BAG-titel, Marwans slotframe, titel in Cinzel. */
/* Spec 2.9: icon-header-gear naast de titel. Alleen onder 800 px breed is het GEAR-paneel (26 % van --bag-w) te smal voor icoon, titel, SKIN en close; daar vervalt het icoon. */
#equipmentHeader { padding: 0 14px; gap: 4px; }
#equipmentHeader .bagHeadIcon { flex: 0 0 auto; width: 22px; height: 22px; }
@media (max-width: 799.98px) { #equipmentHeader .bagHeadIcon { display: none; } }
#equipmentTitle, #bagInfoHeader span {
  font: 600 var(--cw-fs-title)/1 'JorMar Cinzel', serif; letter-spacing: 0.01em; text-transform: uppercase;
  background: linear-gradient(var(--cw-parchment), var(--cw-gold)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* SKIN: button-action is 140x132 met slice 66; de caps blijven onvervormd bij capbreedte = knophoogte / 2. Zichtbaar 0,64 x tap, het tapvlak is via ::after tap hoog. */
#skinOverlayBtn {
  --skin-h: calc(var(--cw-tap) * 0.64); --skin-cap: calc(var(--skin-h) / 2);
  position: relative; flex: 0 0 auto; height: var(--skin-h); padding: 0; border-style: solid; border-width: 0 var(--skin-cap); border-radius: 0; box-shadow: none; background: none;
  border-image: var(--bag-hud-action) 0 66 fill / 0 var(--skin-cap) stretch;
  font: 600 var(--cw-fs-label)/1 'JorMar Cinzel', serif; letter-spacing: 0.01em; text-transform: uppercase; color: var(--cw-parchment);
}
#skinOverlayBtn::after { content: ''; position: absolute; inset-block: calc((var(--skin-h) - var(--cw-tap)) / 2); inset-inline: calc(var(--skin-cap) * -1); }
/* Gear-slots: één slotframe voor de hele tas (B32), met en zonder open tas; de icon-gear-silhouetten liggen als bovenste laag over het frame. */
#equipmentPanel .equipmentSlot { position: relative; border: 0; border-radius: 0; box-shadow: none; background: var(--bag-hud-slot) center / 100% 100% no-repeat; }
#equipmentPanel .equipmentSlot { touch-action: none; } /* mp-0110-02: sleep naar de hotbar; een scrollend #equipmentPanel (hoog scherm) pakt anders de touch-pan en annuleert de pointer */
#equipmentPanel .equipmentSlot.dropTarget { background-image: var(--bag-hud-slot-selected); }
#equipmentPanel .equipmentSlot:not(.filled, .dropTarget)[data-gear-slot="helmet"] { background-image: url(../../assets/ui/bag/icon-gear-helmet.webp), var(--bag-hud-slot); background-size: 50% auto, 100% 100%; background-position: center, center; }
#equipmentPanel .equipmentSlot:not(.filled, .dropTarget)[data-gear-slot="armor"] { background-image: url(../../assets/ui/bag/icon-gear-chest.webp), var(--bag-hud-slot); background-size: 50% auto, 100% 100%; background-position: center, center; }
#equipmentPanel .equipmentSlot:not(.filled, .dropTarget)[data-gear-slot="boots"] { background-image: url(../../assets/ui/bag/icon-gear-boots.webp), var(--bag-hud-slot); background-size: 50% auto, 100% 100%; background-position: center, center; }
#equipmentPanel .equipmentWeaponSlot:not(.filled, .dropTarget) { background-image: url(../../assets/ui/bag/icon-gear-sword.webp), var(--bag-hud-slot); background-size: 50% auto, 100% 100%; background-position: center, center; }
/* Leeg slot: gedimde hint uit de assetpack; de ghost van de common-variant vervalt. */
#equipmentPanel .gearSlotGhost { display: none; }
/* Ringslot (besluit 18): het kader van helm/armor/boots, ook vergrendeld. Alleen het ringicoon dimt, met de .42 van .gearSlotLocked. */
#equipmentPanel .ringEquipmentSlot::before { content: ""; position: absolute; inset: 0; background: url(../../assets/ui/bag/icon-gear-ring.webp) center / 50% auto no-repeat; }
#equipmentPanel .equipmentSlot.gearSlotLocked { opacity: 1; }
#equipmentPanel .gearSlotLocked::before { opacity: .42; }
/* GEAR zonder tas (chip #playerPower) op telefoon liggend: de desktopregel zet het paneel van onderaf, 456px hoog valt dat boven het beeld. Zelfde boven- en onderrand als naast de open tas; de plaatsing met open tas (hogere specificiteit) blijft ongemoeid. */
@media (max-height:520px) {
  #equipmentPanel { top: calc(10px + var(--sai-t)); bottom: max(82px, calc(env(safe-area-inset-bottom) + 72px), var(--hotbar-clearance, 82px)); max-height: none; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; }
  /* Binnenlayout is die van GEAR naast de tas (bag-phone.css, ook solo). Solo staat de stat- en PLAYER POWER-tekst ook in het paneel, dus krijgt het grid
     een vaste hoogte (vier vierkante slots van 36px, zoals de 37px naast de tas op 832x331) en scrolt het lijf binnen de goudrand; de kop blijft staan. */
  /* Dezelfde breedte als GEAR naast de tas (26 % van --bag-w, bag-phone.css), zodat het hetzelfde paneel is; het blijft gecentreerd. */
  #bagOverlay:not(.open)~#equipmentOverlay #equipmentPanel { --bag-w: calc(100vw - 20px - var(--sai-l) - var(--sai-r)); width: calc(var(--bag-w) * .26); padding: 0; }
  /* Het lijf (equipment- en skinweergave) is de enige scroller en eindigt boven de gouden onderlijn: goudrand = --bag-rim * 21 / 54 (7 px bij tap 44) plus 2 px speling. */
  #bagOverlay:not(.open)~#equipmentOverlay :is(#gearEquipmentView, #skinEquipmentView):not([hidden]) { overflow-y: auto; margin-bottom: calc(var(--bag-rim) * 21 / 54 + 2px); }
  #bagOverlay:not(.open)~#equipmentOverlay #gearEquipmentView .equipmentGrid { flex: 0 0 auto; height: calc(4 * 36px + 3 * var(--equipment-gap)); }
}
/* Desktop zonder tas: vierkante slots in plaats van kolommen die de breedte van het paneel delen. */
#equipmentPanel #gearEquipmentView .equipmentGrid { grid-template-columns: repeat(3, 60px); grid-auto-rows: 60px; justify-content: center; }
#equipmentPanel #gearEquipmentView .equipmentSlot { min-height: 0; }

/* ITEM INFO (B35-B38): zelfde venster als BAG en GEAR (regel bovenaan), geen padding zodat kop en lijf in de goudrand blijven. De drawer
   bestaat alleen binnen #bagOverlay, dus de art hangt aan de drawer zelf, niet aan de open tas. */
#bagOverlay.open #bagInfoDrawer { padding: 0; }
#bagInfoHeader { box-sizing: border-box; height: var(--cw-tap); min-height: var(--cw-tap); margin: 0; padding: 0 8px 0 10px; gap: 4px; }
#bagInfoHeaderIcon { flex: 0 0 auto; width: 22px; height: 22px; }
#bagInfoHeader span { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
#bagInfoDrawer .bagInfoImage { box-sizing: border-box; padding: 4px; border: 0; border-radius: 0; box-shadow: none; background: var(--bag-hud-slot) center / 100% 100% no-repeat; }
#bagInfoDrawer .bagInfoImage img { display: block; box-sizing: border-box; width: 100%; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
#bagInfoContent[data-info-sig="placeholder"] { padding-top: 56px; background: var(--bag-hud-slot) left 8px top 4px / 48px 48px no-repeat; }
#bagInfoDrawer .bagInfoDivider, #bagInfoDrawer .bagInfoFacts::before { display: block; height: 6px; border: 0; background: var(--bag-hud-divider) center / 100% 100% no-repeat; }
/* Knoppen: button-action is 140x132 met slice 66; de caps zijn de halve knophoogte breed (onvervormd) en liggen deels over de tekstbox, zodat drie knoppen in het smalle paneel passen. */
#bagInfoDrawer .bagActionBtn, #bagInfoDrawer .bagUpgradeBtn {
  position: relative; isolation: isolate; box-sizing: border-box; min-height: var(--cw-tap); padding: 0 6px; border-style: solid; border-width: 0;
  border-radius: 0; box-shadow: none; background: none; font: 600 var(--cw-fs-label)/1.1 'JorMar Cinzel', serif; letter-spacing: 0.01em; text-transform: uppercase;
}
#bagInfoDrawer .bagActionBtn { border-image: var(--bag-hud-action) 0 66 fill / 0 calc(var(--cw-tap) / 2) stretch; color: var(--cw-parchment); }
#bagInfoDrawer .bagUpgradeBtn { border-image: var(--bag-hud-action-pressed) 0 66 fill / 0 calc(var(--cw-tap) / 2) stretch; color: var(--cw-parchment); }
#bagInfoDrawer .bagActionBtn.active::after {
  content: ""; position: absolute; inset: 4px -4px; border-radius: var(--cw-r-md);
  background: var(--cw-danger); opacity: .45; z-index: -1;
}
/* Onder de goudrand: vaste ruimte rond lijf en acties; telefoon houdt zijn eigen, krappere zijpadding. */
#bagInfoActions { padding-bottom: 10px; }
#bagInfoDrawer #bagManage { gap: 4px; border: 0; border-radius: 0; background: none; }
#bagInfoDrawer #bagManage > .bagActionBtn { flex: 1 1 0; }
@media (min-height: 521px) {
  #bagInfoContent { padding: 8px 14px 4px; }
  #bagInfoActions { padding: 4px 14px 10px; }
  #bagOverlay.open~#equipmentOverlay #gearEquipmentView .equipmentGrid { --equipment-cell: clamp(44px, calc((100cqh - 108px) / 3), 60px); }
  #bagInfoContent { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; column-gap: 8px; }
  #bagInfoContent > * { grid-column: 1 / -1; }
  #bagInfoContent > .bagInfoImage { grid-column: 1; grid-row: 1 / span 3; width: 52px; height: 52px; }
  #bagInfoContent:has(> .bagInfoImage) > :is(.bagInfoName, .bagInfoTier, .bagInfoSlot) { grid-column: 2; }
}

/* Let long item names, stat values and action labels fit their own panel. */
#bagInfoContent, #equipmentPanel .equipmentInfo { min-width: 0; overflow-wrap: anywhere; }
#bagInfoContent > *, #equipmentInfo > *, .bagInfoStats > span, .bagInfoStats b { min-width: 0; max-width: 100%; }
#bagInfoDrawer .bagInfoName { overflow-wrap: anywhere; word-break: normal; }
.bagInfoStats > span { display: flex; gap: 6px; align-items: flex-start; }
.bagInfoStats > span > b:first-child { flex: 1 1 45%; }
.bagInfoStats > span > b:last-child { flex: 1 1 55%; text-align: right; white-space: normal; }
#bagInfoDrawer .bagInfoValue { display: flex; align-items: center; gap: 6px; }
#bagInfoDrawer .bagInfoValue img { width: 18px; height: 18px; object-fit: contain; }
#bagInfoDrawer .bagInfoValueAmount { margin-left: auto; }
#bagInfoDrawer .bagInfoDescription { margin-top: 4px; }
#bagInfoDrawer #bagInfoActions { display: flex; flex-wrap: wrap; gap: 3px; }
#bagInfoDrawer #bagInfoActions > .bagUpgradeBtn { flex: 1 1 100%; }
#bagInfoDrawer #bagManage { display: flex; flex: 1 1 100%; min-width: 0; }
#bagInfoDrawer #bagInfoActions button { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
#bagInfoHeader span, #equipmentTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#equipmentPanel #equipmentHeader { min-width: 0; }
#equipmentPanel #equipmentTitle { min-width: 0; }

/* Portrait phones: details below BAG/GEAR, with a full-width action row. */
@media (max-width: 520px) and (min-height: 521px) {
  #bagOverlay { --bag-portrait-info: clamp(180px, 26vh, 240px); }
  #bagOverlay.open #bagPanel, #bagOverlay.open~#equipmentOverlay #equipmentPanel {
    bottom: calc(max(82px, var(--hotbar-clearance, 82px)) + var(--bag-portrait-info, clamp(180px, 26vh, 240px)) + 8px);
  }
  #bagOverlay.open~#equipmentOverlay #equipmentPanel { display: flex; flex-direction: column; padding: 0; box-sizing: border-box; overflow: hidden; }
  #bagOverlay.open #bagInfoDrawer {
    left: 10px; right: 10px; width: auto; top: auto; height: var(--bag-portrait-info);
    bottom: max(82px, var(--hotbar-clearance, 82px)); max-height: none;
  }
  #bagOverlay.open #bagPanel { --bag-gap: 4px; --bag-scroll-w: 12px; --bag-foot: 0px; }
  #bagOverlay.open #bagPanel #bagContent { padding: 0 10px 10px; }
  #bagOverlay.open #bagGrid, #bagOverlay.open #bagSupplies, #bagOverlay.open #bagQuestItems {
    max-height: min(100cqh, calc(2 * var(--bag-tile-h) + var(--bag-gap)));
  }
  #bagOverlay.open #bagResources { position: absolute; top: 0; right: calc(var(--cw-tap) + 12px); height: var(--cw-tap); padding: 0; display: flex; flex-direction: column; justify-content: center; font-size: 8px; }
  #bagOverlay.open .bagBalanceSep { display: none; }
  #bagInfoDrawer #bagInfoActions > .bagUpgradeBtn { flex: 1 1 30%; }
  #bagInfoDrawer #bagManage { flex: 2 1 60%; }
  #bagOverlay.open~#equipmentOverlay #equipmentHeader { display: grid; grid-template-columns: minmax(0, 1fr) var(--cw-tap); height: auto; gap: 0; padding: 0 6px; margin: 0; }
  #bagOverlay.open~#equipmentOverlay #equipmentTitle { grid-column: 1; grid-row: 1; font-size: 10px; }
  #bagOverlay.open~#equipmentOverlay #equipmentCloseBtn { grid-column: 2; grid-row: 1; }
  #bagOverlay.open~#equipmentOverlay #skinOverlayBtn { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin: 4px 0 8px; }
  #bagOverlay.open~#equipmentOverlay #gearEquipmentView { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 4px 8px; }
  #bagOverlay.open~#equipmentOverlay #gearEquipmentView .equipmentGrid { grid-template-columns: repeat(2, minmax(0, 44px)); grid-template-areas: 'helmet weapon' 'armor ring' 'boots .'; grid-auto-rows: 44px; gap: 4px; }
  #bagOverlay.open~#equipmentOverlay #gearEquipmentView .equipmentSlot { width: 44px; height: 44px; min-height: 0; }
  #bagOverlay.open~#equipmentOverlay .gearSlotVisual, #bagOverlay.open~#equipmentOverlay .equipmentWeaponVisual { width: 36px; height: 36px; flex-basis: 36px; }
}