/* Inventory extends the town's wood and parchment HUD. */
.hud-inventory { left: 50%; right: auto; bottom: max(20px, env(safe-area-inset-bottom)); width: max-content; transform: translateX(-50%); }
#edit-town { position: absolute; right: 0; bottom: calc(100% + 10px); }
.quick-access { display: flex; align-items: center; gap: 12px; }
.quickbar { position: relative; display: flex; gap: 5px; padding: 7px; }
.quick-slot, .bag-cell {
  --item-size: 44px;
  position: relative; display: grid; place-items: center; min-width: 0; padding: 0;
  border: 2px solid #a57543; border-radius: 2px; color: #64462c;
  background: #f3dcad; box-shadow: inset 0 2px 0 #c59a61, inset 2px 0 0 #dfb97d;
  cursor: pointer;
}
.quick-slot { --item-size: clamp(28px, 3.6vw, 44px); width: clamp(38px, 5.5vw, 58px); aspect-ratio: 1; }
.quick-slot kbd, .bag-toggle kbd {
  position: absolute; bottom: 2px; right: 4px; color: #5d3b22;
  font: 700 10px BeVietnam, sans-serif; line-height: 1.2; pointer-events: none;
}
.quick-slot:hover, .bag-cell:hover { background-color: #fff0ca; }
.quick-slot[aria-pressed='true'], .bag-cell[aria-pressed='true'] {
  border-color: #6e7843; background-color: #fbe8b3; outline: 2px solid #fff4d3; outline-offset: -5px;
}
.quick-slot:disabled { opacity: .5; cursor: wait; }
.item-art { position: relative; display: grid; place-items: center; width: var(--item-size); height: var(--item-size); pointer-events: none; }
.item-art img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.item-art-hoe { display: block; overflow: hidden; }
.item-art-hoe img { position: absolute; left: -16%; top: -16%; width: 132%; height: 132%; max-width: none; }
.bag-toggle { position: relative; display: grid; place-items: center; width: 58px; height: 58px; padding: 5px; cursor: pointer; }
.bag-toggle img { display: block; width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; }
.map-shell.is-focused .hud-camera { top: 16px; right: 18px; bottom: auto; }
:is(#hoe-help, #paving-help, #edit-help) { bottom: calc(100% + 65px); }
.map-shell.is-focused :is(#hoe-help, #paving-help) { right: auto; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); max-width: calc(100vw - 28px); }
.bag-dialog { width: min(440px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); margin: auto; padding: 16px; overflow: auto; scrollbar-color: #a77a49 #f5dcad; }
.bag-dialog::backdrop { background: #213a2a91; backdrop-filter: none; }
.bag-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.bag-header h2 { margin: 0; color: #684629; font-size: 23px; line-height: 1.2; }
.bag-header span { display: block; margin-top: 5px; font-size: 10px; color: #79552f; }
#bag-close { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 2px solid #ae8454; background: #efd3a1; color: #67472c; font-size: 24px; line-height: 1; }
.bag-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; padding: 8px; background: #d6ae73; border: 2px solid #9a6d3d; }
.bag-cell { aspect-ratio: 1; }
.bag-cell:not([data-item]) { background: #e3c38e; box-shadow: inset 0 2px 0 #bc945f, inset 2px 0 0 #d0aa74; }
.bag-description { min-height: 34px; margin: 8px 1px; font-size: 10px; line-height: 1.7; color: #65472d; }
.bag-quick-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 8px 0 8px; font-size: 11px; font-weight: 700; }
#bag-unassign { padding: 0; border: 0; background: transparent; color: #78512f; text-decoration: underline; text-underline-offset: 3px; font-size: 9px; cursor: pointer; }
#bag-unassign[hidden] { display: none; }
.bag-quickbar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.bag-quickbar .quick-slot { width: 100%; --item-size: 36px; }
.bag-hint { margin: 8px 0 0; color: #79552f; font-size: 9px; line-height: 1.7; }
.bag-dialog :focus-visible, .quick-access :focus-visible { outline: 3px solid #4a663f; outline-offset: 2px; }
/* The destination tray expands above the quickbar. */
.hud-destinations .destination-nav[hidden],
#destinations-toggle[aria-expanded='false'] .destination-collapse-icon,
#destinations-toggle[aria-expanded='true'] .destination-grid-icon { display: none; }
.hud-destinations #destinations-toggle {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
}
.hud-destinations:has(#destinations-toggle[aria-expanded='true']) {
  bottom: max(110px, calc(env(safe-area-inset-bottom) + 90px));
}
@media (max-width: 600px) {
  .hud-inventory { bottom: max(14px, env(safe-area-inset-bottom)); }
  .hud-destinations { right: auto; bottom: max(80px, calc(env(safe-area-inset-bottom) + 66px)); }
  .hud-destinations:has(#destinations-toggle[aria-expanded='true']) { right: 11px; bottom: max(80px, calc(env(safe-area-inset-bottom) + 66px)); }
  .map-shell:not(.is-focused) .hud-camera { bottom: max(80px, calc(env(safe-area-inset-bottom) + 66px)); }
  .map-shell:has(#destinations-toggle[aria-expanded='true']):not(.is-focused) .hud-camera { bottom: max(147px, calc(env(safe-area-inset-bottom) + 133px)); }
  .quick-access { gap: 8px; }
  .quickbar { padding: 5px; gap: 3px; }
  .quick-slot { width: 38px; }
  .bag-toggle { width: 48px; height: 48px; }
  .bag-toggle img { width: 34px; height: 34px; }
  .map-shell.is-focused .hud-camera { top: 12px; right: 12px; }
  .bag-dialog { padding: 12px; }
  .bag-grid, .bag-quickbar { gap: 5px; }
  .bag-grid { padding: 6px; }
  .bag-cell { --item-size: 32px; }
  .bag-quickbar .quick-slot { --item-size: 30px; }
}
@media (max-width: 350px) {
  .quick-slot { width: 33px; --item-size: 25px; }
  .quick-access { gap: 5px; }
  .bag-toggle { width: 40px; height: 44px; }
  .bag-cell, .bag-quickbar .quick-slot { --item-size: 25px; }
}