/* Keep native tab faces, with fixed borders and a full-width labelled surface. */
.tab-scroll,
.menu-main {
  overflow-anchor: none;
}
.native-storage .storage-label.storage-tabs {
  left: 14px;
  right: 14px;
  top: 7px;
  height: 28px;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.native-storage .storage-label.vendor-categories {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.native-storage .storage-label.storage-tabs button {
  height: 28px;
  min-height: 28px;
  padding: 0 3px;
  line-height: 26px;
  font-size: 11px;
  background-image: var(--control-art) !important;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 0;
  border-image: none;
  box-shadow: inset 0 0 0 1px #887553 !important;
}
.economy-page .paper-title {
  background-image: var(--native-stone);
  background-size: auto;
  border: 1px solid #92794b;
  box-shadow: inset 0 0 0 2px #181611;
  padding: 3px 9px;
  margin-top: 6px;
  margin-bottom: 0;
  height: 30px;
  min-height: 30px;
}
.economy-page .armory-storage-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}
.economy-page .armory-storage-tabs button {
  min-width: 0;
  font-size: 11px;
  padding-inline: 3px;
}
.grid-item,
.paper-slot,
.result-item {
  --rarity: #b9b9b9;
}
[data-quality="magic"] {
  --rarity: #6969ff;
}
[data-quality="rare"] {
  --rarity: #ffff77;
}
[data-quality="set"] {
  --rarity: #00c000;
}
[data-quality="unique"],
[data-quality="runeword"] {
  --rarity: #c7b377;
}
[data-quality="crafted"] {
  --rarity: #ffa14d;
}
[data-quality="superior"],
[data-quality="low"] {
  --rarity: #aaa;
}
.grid-item:not(.vendor-offer):not(.gamble-offer),
.paper-slot.equipped {
  border-color: color-mix(in srgb, var(--rarity) 35%, #24231d);
  background-color: color-mix(in srgb, var(--rarity) 9%, #07110b);
}
.grid-item:is(:hover, .selected, :focus-visible),
.paper-slot:is(:hover, .selected, :focus-visible) {
  border-color: var(--rarity) !important;
  background-color: color-mix(in srgb, var(--rarity) 18%, #090b08) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rarity) 55%, transparent);
}
.grid-item .item-sockets,
.paper-slot .item-sockets,
.result-item .item-sockets {
  display: grid !important;
  visibility: hidden !important;
  opacity: 0;
  pointer-events: none;
  grid-template-columns: repeat(var(--socket-cols, 2), 24px);
  gap: 2px;
}
.grid-item:is(:hover, .selected, :focus-visible) > .item-sockets,
.paper-slot:is(:hover, .selected, :focus-visible) > .item-sockets,
.result-item:is(:hover, .selected, :focus-visible) > .item-sockets {
  visibility: visible !important;
  opacity: 1;
}
.item-sockets .item-socket {
  position: relative;
  width: 24px;
  height: 24px;
  pointer-events: auto;
  cursor: grab;
}
.item-sockets .item-socket .socket-hole {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px !important;
  height: 24px !important;
  max-width: none;
  opacity: 1;
}
.item-sockets .item-socket .socket-material {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 14px !important;
  height: 14px !important;
  max-width: none;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px #000);
}
#diablo-tooltip[popover] {
  margin: 0;
  inset: auto;
  position: fixed;
  pointer-events: none;
  max-width: min(350px, calc(100vw - 16px));
}
#diablo-tooltip {
  border-color: var(--rarity, #786746);
  background: color-mix(in srgb, var(--rarity, #000) 4%, #050505f5);
  color: #ddd;
}
#diablo-tooltip .item-tip > strong {
  color: var(--rarity, #ddd);
  font-size: 16px;
}
#diablo-tooltip .item-tip small {
  color: #b8b8b8;
}
#diablo-tooltip .magic-stat {
  color: #6969ff;
}
#diablo-tooltip .item-value {
  color: #c7b377;
}
.gamble-offer .unidentified-mark {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font: bold 14px Georgia;
  color: #c7b377;
  text-shadow: 0 1px #000;
}
.active-picker-panel .diablo-select {
  flex: 1;
  min-width: 0;
  max-width: none;
  width: auto;
}
.gamble-label .subtle-button {
  position: absolute;
  right: 5px;
  top: 1px;
  width: 26px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  font-size: 17px;
}
.active-picker-panel .select-trigger {
  height: 54px;
  min-height: 54px;
  padding-left: 7px;
}
.active-picker-panel .select-trigger > img {
  width: 40px;
  height: 40px;
}
.active-picker-panel .select-trigger:hover {
  filter: brightness(1.18);
}
.select-options button:is(:hover, :focus-visible) {
  border-color: #d0b77b;
  background-color: #61502f;
  color: #fff0c5;
}
.lobby-entry-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.lobby-entry-buttons .enter-button {
  min-width: 0;
  width: 100%;
  padding: 8px 12px;
  font-size: 15px;
}
.party-hud {
  position: fixed;
  left: 18px;
  top: 83px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 174px;
  pointer-events: none;
}
.party-member {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 7px;
  align-items: center;
  background: #080806ca;
  padding: 4px;
  border: 1px solid #746444;
}
.party-member > img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border: 1px solid #998452;
}
.party-member small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #c9b988;
  font-size: 11px;
}
.party-life {
  height: 6px;
  border: 1px solid #4f3f32;
  background: #15100e;
  margin-top: 5px;
}
.party-life i {
  display: block;
  height: 100%;
  background: #a52c24;
}
.party-member.dead {
  opacity: 0.5;
}
@media (max-width: 700px) {
  .party-hud {
    left: 7px;
    top: 70px;
    width: 140px;
  }
  .lobby-entry-buttons .enter-button {
    font-size: 12px;
  }
}