/* Belongings use the same cold steel, lamplight, and fine framing as the HUD. */
.modal.inventory-modal {
  --inventory-surface: #101e29;
  --inventory-deep: #09131c;
  --inventory-line: #b5a07140;
  --inventory-text: #d4d9d8;
  --inventory-muted: #9caeaf;
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1040px, calc(100vw - 48px));
  min-width: 0;
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: hidden;
  text-align: left;
  color: var(--inventory-text);
  background: #0c1822f5;
  border: 1px solid #a48d5e80;
  box-shadow: 0 24px 100px #000b, inset 0 0 0 5px #080f16, inset 0 0 0 6px #b5a0711c;
}
.inventory-modal::before, .inventory-modal::after {
  content: '';
  position: absolute;
  z-index: 2;
  width: 13px;
  height: 13px;
  pointer-events: none;
  border-color: #cfb580a6;
  border-style: solid;
}
.inventory-modal::before { left: 5px; top: 5px; border-width: 1px 0 0 1px; }
.inventory-modal::after { right: 5px; bottom: 5px; border-width: 0 1px 1px 0; }
.inventory-modal > .eyebrow {
  flex: none;
  margin: 24px 28px 6px;
  padding: 0;
  color: #ac9b75;
  font-size: 12px;
  letter-spacing: 2.5px;
  background: none;
  border: 0;
}
.inventory-modal h2 {
  flex: none;
  margin: 0;
  padding: 0 28px 18px;
  border-bottom: 1px solid var(--inventory-line);
  color: #e3d2ae;
  font-size: 30px;
  letter-spacing: 2px;
  line-height: 1.3;
  background: none;
}
.inventory-modal .inventory-crowns {
  position: absolute;
  right: 28px;
  top: 29px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  max-width: 40%;
  font-variant-numeric: tabular-nums;
}
.inventory-modal .inventory-crowns[hidden] { display: none; }
.inventory-crowns strong { font: 500 24px var(--serif); color: #dfc58c; overflow-wrap: anywhere; }
.inventory-crowns span { color: #b4a17a; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.inventory-modal #modal-content {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #617078 #0b151e;
  scrollbar-width: thin;
  padding: 20px 28px 22px;
}
.inventory-layout { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 28px; }
.inventory-character, .inventory-belongings { min-width: 0; }
.inventory-modal h3 { margin: 0; color: #c8b993; font: 500 15px var(--serif); letter-spacing: 1px; }
.inventory-modal .equipment-view {
  overflow: hidden;
  background: var(--inventory-surface);
  border: 1px solid #69808d33;
  box-shadow: inset 0 0 50px #020b135c;
}
.inventory-identity { padding: 17px 12px 0; text-align: center; }
.inventory-modal .inventory-identity h3 { font-size: 22px; color: #e2d4b6; letter-spacing: .8px; }
.inventory-modal .inventory-identity p { font-size: 12px; color: var(--inventory-muted); margin: 5px 0 0; line-height: 1.5; }
.inventory-portrait-stage { height: clamp(210px, 29dvh, 285px); }
.inventory-modal .warden-portrait { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: normal; }
.inventory-modal .inventory-portrait-placeholder { height: 100%; display: grid; place-items: center; padding: 20px; margin: 0; font-size: 14px; color: var(--inventory-muted); text-align: center; }
.inventory-equipment { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px; border-top: 1px solid #697b872b; background: #0a151db3; }
.inventory-modal .equipment-slot { display: flex; align-items: center; min-width: 0; gap: 9px; }
.equipment-slot > div:last-child { min-width: 0; }
.equipment-slot span { display: block; font-size: 12px; color: #b4a583; letter-spacing: 1px; text-transform: uppercase; }
.equipment-slot strong { display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; font-weight: 400; color: #a8b6b8; overflow-wrap: anywhere; }
.inventory-modal .equipment-slot .gear-tile, .inventory-modal .empty-equipment { width: 48px; height: 58px; flex: 0 0 48px; }
.empty-equipment { display: grid; place-items: center; color: #8b9b9f; font-size: 12px; border: 1px dashed #6e81885c; background: #0a141d; }
.inventory-attributes { margin-top: 18px; }
.inventory-attributes h3 { padding-bottom: 10px; border-bottom: 1px solid var(--inventory-line); }
.inventory-attributes dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; margin: 8px 0 0; }
.inventory-attributes dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 5px; padding: 7px 0; font-size: 14px; }
.inventory-attributes dt { color: #a6b4b7; }
.inventory-attributes dd { margin: 0; color: #e1e1d6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inventory-attributes small { font-size: 12px; color: #879ba3; }
.inventory-attributes .vitality-stat dd { color: #efada8; }
.inventory-attributes .essence-stat dd { color: #8ed1e5; }
.inventory-pouch { margin-top: 22px; }
.inventory-modal .pouch-icon { position: absolute; inset: 22%; color: var(--food-color); }
.inventory-modal .pouch-count { position: absolute; right: 4px; bottom: 2px; color: #e1e1d6; font-size: 12px; line-height: 1.2; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #000; }
.inventory-modal .pouch-tile[aria-disabled="true"] .pouch-icon { opacity: .45; }
.inventory-modal .pouch-guidance, .inventory-modal .pouch-regen, .inventory-modal .inventory-empty-message { margin: 10px 2px 0; font-size: 12px; line-height: 1.5; color: var(--inventory-muted); }
.inventory-modal .pouch-regen { color: #94d4ca; }
.inventory-bag-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 0 13px; }
.inventory-bag-heading > span { font-size: 12px; color: var(--inventory-muted); }
.inventory-satchel, .inventory-pouch { container-type: inline-size; }
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 5px;
  padding: 8px;
  max-height: 244px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #617078 #0b151e;
  background: #08121b;
  border: 1px solid #73818a42;
  box-shadow: inset 0 0 20px #02070c99;
}
.inventory-modal .gear-tile, .inventory-modal .empty-cell {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  background: #12222e;
  border: 1px solid #5066745c;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 #bbc8c70a, inset 0 0 12px #020b1370;
}
.inventory-grid > * { width: 100%; aspect-ratio: 1; }
.inventory-modal .empty-cell { background: #0d1b26; border-color: #4d657342; }
.inventory-modal .gear-tile img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; mix-blend-mode: normal; }
.inventory-modal .gear-tile .legacy-item-art { mix-blend-mode: screen; }
.inventory-modal .gear-art-label { position: absolute; inset: 4px; display: grid; place-items: center; color: #afbdc0; font-size: 12px; letter-spacing: 0; text-transform: capitalize; overflow-wrap: anywhere; }
.inventory-modal .gear-tile.uncommon { background: #182d28; border-color: #66895a8c; }
.inventory-modal .gear-tile.rare { background: #172e3c; border-color: #6a9bb899; }
.inventory-modal .gear-tile.legendary { background: #322a20; border-color: #bf955e99; }
.inventory-modal .gear-tile:hover, .inventory-modal .gear-tile.selected { border-color: #dcc493; box-shadow: inset 0 0 0 1px #dcc4936b, 0 0 10px #cdb47812; background-color: #29343a; }
.inventory-modal .gear-tile:focus-visible { outline: 2px solid #fae0a3; outline-offset: -4px; }
.inventory-modal .gear-equipped { position: absolute; right: 3px; bottom: 2px; color: #e8cea0; font: 10px var(--serif); text-shadow: 0 1px 3px #000; }
.inventory-detail { position: fixed; inset: auto; margin: 0; padding: 18px; width: min(340px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto; overscroll-behavior: contain; color: var(--inventory-text); background: #101e28; border: 1px solid #9b987a80; box-shadow: 0 12px 36px #0009; text-align: left; overflow-wrap: anywhere; }
.inventory-detail[hidden] { display: none; }
.inventory-detail::backdrop { background: transparent; pointer-events: none; }
.item-detail-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.inventory-detail .item-rarity { color: #9bacb2; font-size: 12px; letter-spacing: 1.3px; text-transform: uppercase; }
.item-equipped-status { color: #ceba8c; font-size: 12px; white-space: nowrap; }
.inventory-modal .inventory-detail h3 { margin-top: 10px; color: #e2d6b9; font-size: 21px; line-height: 1.4; letter-spacing: 0; }
.inventory-modal .inventory-detail.uncommon h3 { color: #b6d5a0; }
.inventory-modal .inventory-detail.rare h3 { color: #a7d5e9; }
.inventory-modal .inventory-detail.legendary h3 { color: #edc48a; }
.inventory-modal .inventory-detail [data-preview-food] h3 { color: var(--food-color); }
.inventory-modal .inventory-detail p { font-size: 16px; line-height: 1.55; color: #a8b6ba; margin: 7px 0 12px; }
.inventory-detail .item-bonus { color: #cbbb94; font-size: 14px; line-height: 1.6; }
.item-comparison { margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--inventory-line); }
.item-comparison h4 { margin: 0; color: #cbd4d4; font-size: 14px; line-height: 1.5; font-weight: 500; }
.inventory-modal .item-comparison .item-compared-with { font-size: 12px; margin: 5px 0 12px; }
.item-comparison dl { display: grid; gap: 10px; margin: 13px 0 0; }
.item-stat-change { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.5; }
.item-stat-change dt { color: #a6b7bb; }
.item-stat-change dd { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px 14px; margin: 0; font-variant-numeric: tabular-nums; }
.item-stat-change strong { font-weight: 500; white-space: nowrap; }
.item-stat-values { color: #c5cecf; min-width: 50px; text-align: right; white-space: nowrap; }
.item-stat-change.better strong { color: #afd69a; }
.item-stat-change.worse strong { color: #efaaa1; }
.item-stat-change.unchanged strong { color: #9caeaf; font-weight: 400; }
.inventory-modal .modal-actions { position: relative; z-index: 1; display: flex; flex: none; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 28px; border-top: 1px solid var(--inventory-line); background: #0a141d; }
.modal.inventory-modal .inventory-hint { margin: 0; color: #91a4ab; font-size: 12px; line-height: 1.8; }
.inventory-modal .inventory-hint kbd { font-size: 12px; color: #c8d0cc; background: #14232d; border-color: #81909a52; }
.inventory-touch-hint { display: none; }
.modal.inventory-modal .primary-button { flex: none; width: auto; min-height: 46px; margin: 0; padding: 12px 20px; font-size: 14px; letter-spacing: .5px; color: #e9d4a5; border: 1px solid #b6a06b9c; background: #323326; box-shadow: inset 0 0 0 3px #10181f8c; }
.modal.inventory-modal .primary-button:hover { background: #444333; border-color: #d1bc84; }
.inventory-modal .primary-button:focus-visible { outline-offset: 3px; }
@media (min-width: 900px) and (max-height: 820px) {
  .inventory-modal > .eyebrow { margin-top: 17px; }
  .inventory-modal h2 { padding-bottom: 12px; }
  .inventory-modal .inventory-crowns { top: 22px; }
  .inventory-modal #modal-content { padding-top: 16px; padding-bottom: 16px; }
  .inventory-identity { padding-top: 12px; }
  .inventory-portrait-stage { height: 180px; }
  .inventory-equipment { padding: 10px 14px; }
  .inventory-attributes dl > div { padding: 5px 0; }
  .inventory-modal .modal-actions { padding-top: 10px; padding-bottom: 10px; }
}
@media (hover: none) { .inventory-pointer-hint { display: none; } .inventory-touch-hint { display: inline; } }
@media (max-width: 899px) {
  .modal.inventory-modal { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
  .modal-shade:has(.inventory-modal) { padding: 12px; }
  .inventory-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .inventory-portrait-stage { height: 280px; }
  .inventory-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); max-height: 330px; }
  .inventory-pouch .empty-cell:nth-child(n + 7) { display: none; }
  .inventory-attributes dl { column-gap: 32px; }
  .inventory-modal .modal-actions { flex-wrap: wrap; gap: 12px; }
  .modal.inventory-modal .primary-button { width: 100%; }
  .modal.inventory-modal .inventory-hint { width: 100%; text-align: center; }
}
@media (max-width: 560px) {
  .inventory-modal > .eyebrow { margin: 21px 18px 7px; font-size: 12px; letter-spacing: 1.7px; }
  .inventory-modal h2 { padding: 0 18px 16px; font-size: 26px; }
  .inventory-modal .inventory-crowns { top: 26px; right: 18px; }
  .inventory-crowns strong { font-size: 20px; }
  .inventory-modal #modal-content { padding: 16px 16px 20px; }
  .inventory-portrait-stage { height: 250px; }
  .inventory-equipment { gap: 10px; padding: 12px; }
  .inventory-attributes dl { column-gap: 16px; }
  .inventory-grid { padding: 6px; gap: 4px; }
  .inventory-detail { padding: 16px; }
  .inventory-modal .inventory-detail h3 { font-size: 20px; }
  .item-stat-change { flex-wrap: wrap; gap: 3px; }
  .item-stat-change dd { margin-left: auto; }
  .inventory-modal .modal-actions { padding: 12px 18px 16px; }
}
@media (max-width: 359px) {
  .inventory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .inventory-pouch .empty-cell:nth-child(n + 5) { display: none; }
  .inventory-equipment { grid-template-columns: 1fr; }
  .inventory-attributes dl { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .inventory-modal *, .inventory-modal *::before, .inventory-modal *::after { animation: none; transition: none; scroll-behavior: auto; }
}