/* F137: tas op telefoon liggend. Drie panelen naast elkaar: GEAR | BAG | ITEM INFO (spec 4.4, besluiten 9.11 en 9.12).
   Alles onder één query. De selectors dragen dezelfde #bagOverlay.open-prefix als de desktopregels in index.html en
   winnen door laadvolgorde (dit bestand staat na de inline stijl). De vlakken krijgen hun beeld uit assets/ui/bag/
   (spec 11); verloop, schaduw en gloed komen onder deze query niet terug. */
@media (max-height:520px) {
  /* Besluit 22: GEAR 26 %, 2 % ruimte, BAG 42 %, 2 % ruimte, ITEM INFO 26 % van --bag-w, de breedte na aftrek van de
     10px-rand en de safe-area links en rechts (spec 4.4: 10px + safe-area, additief zoals de HUD). Rest 2 % plus de rechterrand:
     740 zonder uitsparing eindigt op 715,6 (10 + .98 * 720); met 34px links op 716,3 (44 + .98 * 686), beide binnen innerWidth - 10. */
  #bagOverlay.open~#equipmentOverlay #equipmentPanel { left: calc(10px + var(--sai-l)); right: auto; width: calc(var(--bag-w) * .26); }
  #bagOverlay.open #bagPanel { left: calc(10px + var(--sai-l) + var(--bag-w) * .28); right: auto; width: calc(var(--bag-w) * .42); }
  #bagOverlay.open #bagInfoDrawer { left: calc(10px + var(--sai-l) + var(--bag-w) * .72); right: auto; width: calc(var(--bag-w) * .26); display: flex; flex-direction: column; opacity: 1; transform: none; pointer-events: auto; }
  /* Vensterbeeld als border-image: de kopband (art-rij 0-79 van 686) blijft --cw-tap hoog en valt samen met de kop; alleen
     het lijf rekt mee. Met background-size 100% 100% werd de band 27-30px en liep de 44px-kop eroverheen. */
  #bagOverlay.open #bagPanel, #bagOverlay.open #bagInfoDrawer, #bagOverlay.open~#equipmentOverlay #equipmentPanel {
    --bag-w: calc(100vw - 20px - var(--sai-l) - var(--sai-r));
    top: calc(10px + var(--sai-t)); bottom: max(82px, calc(env(safe-area-inset-bottom) + 72px), var(--hotbar-clearance, 82px));
    max-height: none; padding: 0; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column;
    transform: none;
  }
  /* Minimap en knoppen rechtsboven staan in de weg; #hudTopCenter blijft (besluit 9.6). */
  .hud:has(#bagOverlay.open) #hudTopRight { visibility: hidden; }

  /* Kop: één rij van --cw-tap-hud per paneel, icoon links, titel, .cwClose rechts. */
  #bagHeader, #equipmentHeader, #bagInfoHeader {
    box-sizing: border-box; flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
    height: var(--cw-tap); min-height: var(--cw-tap); margin: 0; padding: 0 4px 0 8px;
    font: 950 var(--cw-fs-title)/1 Inter, system-ui, sans-serif; letter-spacing: .08em; color: var(--cw-gold);
  }
  #bagHeading { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; }
  #bagTitle, #equipmentTitle { font: inherit; letter-spacing: inherit; }
  #equipmentTitle, #bagInfoHeader span { flex: 1 1 auto; min-width: 0; }

  /* Telbadge zonder verloop (desktopregel in index.html behoudt zijn gradient). */
  #bagGrid .bagSlot .bagLevel, #bagSupplies .bagSlot .bagLevel { background: var(--cw-wood-deep); }
  /* Telbadge rechtsonder in de tegel (spec 4.4, besluit 15: geen naamplaat), op dezelfde afstand van de rand als .bagLevel; de %-badge van potions neemt de vrije hoek rechtsboven. */
  #bagGrid .bagSlot .bagStackCount, #bagSupplies .bagSlot .bagStackCount, .bagQuestSlotGrid .bagSlot .bagStackCount { top: auto; bottom: 3px; }
  #bagSupplies .bagSlot .bagConsumableBadge { top: 4px; }
  /* Tegel t/m 66px (dezelfde drempel als het verborgen typelabel; 740: 55px, 844: 64px): %-badge rechtsboven en telbadge rechtsonder houden op deze breedte 2px afstand tot de rand. Zelfde font, geen verticale padding. */
  @container (max-width:66px) {
    #bagSupplies .bagSlot .bagConsumableBadge { top: 2px; padding: 0 3px; }
    #bagSupplies .bagSlot .bagStackCount { bottom: 2px; padding: 0 3px; }
  }

  /* GEAR: slotkolom links (helmet, armor, boots, onderaan weapon + ring), silhouetvlak rechts. Geen legs-slot. */
  :is(#bagOverlay.open~#equipmentOverlay,#equipmentOverlay) #gearEquipmentView:not([hidden]), :is(#bagOverlay.open~#equipmentOverlay,#equipmentOverlay) #skinEquipmentView:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 0 8px 6px; box-sizing: border-box; overflow: hidden; }
  /* Het grid krijgt van de flexkolom wat na kop en statregel overblijft en deelt dat zelf in vier rijen: een slot is een kwart
     van de eigen gridhoogte min drie tussenruimtes (hoogstens 56px). Zo kan het grid niet meer onder #equipmentStats doorlopen. */
  :is(#bagOverlay.open~#equipmentOverlay,#equipmentOverlay) #gearEquipmentView .equipmentGrid {
    --equipment-gap: 4px;
    container-type: size; flex: 1 1 auto; min-height: 0; justify-content: stretch; align-content: start; gap: var(--equipment-gap);
    grid-template-columns: auto auto minmax(0, 1fr); grid-auto-rows: auto;
    grid-template-areas: 'helmet sil sil' 'armor sil sil' 'boots sil sil' 'weapon ring .';
  }
  :is(#bagOverlay.open~#equipmentOverlay,#equipmentOverlay) #gearEquipmentView .equipmentSlot { width: min(calc((100cqh - 3 * var(--equipment-gap)) / 4), 56px); aspect-ratio: 1; }
  :is(#bagOverlay.open~#equipmentOverlay,#equipmentOverlay) #gearEquipmentView .equipmentGrid::before { content: ""; grid-area: sil; border-radius: var(--cw-r-lg); background: var(--cw-wood-deep) url(../../assets/ui/bag/gear-character-silhouette.webp) center / contain no-repeat; }
  :is(#bagOverlay.open~#equipmentOverlay,#equipmentOverlay) .equipmentFistsLabel { position: absolute; left: 0; right: 0; bottom: 2px; font-size: var(--cw-fs-label); letter-spacing: 0; }
  /* Besluit 21: labels voluit, hoogstens twee regels; min-height 2.4em (2 x line-height 1.2) houdt die hoogte vrij, zodat
     het grid erboven nooit onder de tweede regel doorloopt. Besluit 23: onder 800 px is de GEAR-kolom te smal voor twee regels, dus drie. */
  :is(#bagOverlay.open~#equipmentOverlay,#equipmentOverlay) #equipmentStats { flex: 0 0 auto; min-height: 2.4em; margin: 4px 0 0; padding: 0; border: 0; background: none; font-size: var(--cw-fs-label); line-height: 1.2; text-align: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  @media (max-width: 799.98px) { :is(#bagOverlay.open~#equipmentOverlay,#equipmentOverlay) #equipmentStats { min-height: 3.6em; -webkit-line-clamp: 3; } }

  /* ITEM INFO: beeldkader en naam naast elkaar, scheidingslijnen, statrijen label links en waarde rechts, cursieve omschrijving.
     Kader 48px: met 64px viel bij een wapen op 832x331 de laatste statrij 17px onder het lijf (besluit 9.17). */
  #bagInfoContent { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 8px; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; row-gap: 4px; font-size: var(--cw-fs-body); }
  #bagInfoContent > * { grid-column: 1 / -1; }
  #bagInfoContent:has(> .bagInfoImage) { grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; }
  #bagInfoContent:has(> .bagInfoImage) > :is(.bagInfoName, .bagInfoTier, .bagInfoSlot) { grid-column: 2; }
  #bagInfoContent > .bagInfoImage { grid-column: 1; grid-row: 1 / span 3; box-sizing: border-box; width: 48px; height: 48px; }
  .bagInfoImage img { display: block; width: 100%; height: 100%; object-fit: contain; }
  /* Zonder selectie blijft het kader zichtbaar, leeg (beeld in bag-hud.css). */
  .bagInfoName { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: normal; word-break: normal; hyphens: manual; font-size: var(--cw-fs-title); }
  .bagInfoTier, .bagInfoSlot { margin-top: 0; }
  .bagInfoSlot { color: var(--cw-parchment-dim); font-size: var(--cw-fs-label); }
  .bagInfoFacts::before { content: ""; margin-bottom: 4px; }
  .bagInfoStats { margin-top: 0; padding-top: 0; border-top: 0; }
  .bagInfoValue { display: flex; align-items: center; gap: 6px; }
  .bagInfoValue img { height: 14px; width: auto; }
  .bagInfoValueAmount { margin-left: auto; }
  .bagInfoDescription { margin-top: 4px; font-style: italic; color: var(--cw-parchment-dim); }
  /* De primaire knop (EQUIP, UNEQUIP, OPEN GIFTBOX) verhuist via renderBagInfoPanel naar #bagInfoActions, vóór DROP en REMOVE.
     Eén rij in DOM-volgorde, kolommen naar tekstlengte (de artrand is 6px binnenmarge; rijpadding 7px = goudrand, gap 0: in de f137b-opstelling (drawer 178,4 px) is 164 px aan knoppen alles wat past), elke knop --cw-tap hoog (besluit 9.17; de tas is niet gezoomd). */
  #bagInfoActions { flex: 0 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: stretch; gap: 0; margin: 0; padding: 4px 7px; }
  #bagManage { display: contents; }
  #bagInfoActions .bagActionBtn { min-width: var(--cw-tap); height: var(--cw-tap); letter-spacing: 0; }
  #bagInfoContent .bagUpgradeRow:empty { display: none; }
  #bagInfoActions .bagUpgradeBtn { min-width: var(--cw-tap); height: var(--cw-tap); margin: 0; letter-spacing: 0; white-space: normal; }
}