.npc-shop {
  position: fixed; right: calc(190px * var(--classic-rx)); top: 0; z-index: 9;
  width: 190px; height: 429px; transform-origin: top right; pointer-events: auto;
  --panel-text-rx: var(--classic-rx, 1); --panel-text-ry: var(--classic-ry, 1);
  color: #eee; background-color: #111214;
  background-image: var(--storage-frame-top), var(--storage-frame-bottom), var(--storage-frame-left), var(--storage-frame-right), var(--storage-surface);
  background-size: 190px 64px, 190px 45px, 21px 320px, 21px 320px, 190px 429px;
  background-position: center top, center bottom, left top 64px, right top 64px, center top;
  background-repeat: no-repeat;
}
.npc-shop[hidden], .npc-service-overlay[hidden] { display: none; }
.npc-shop h2, .npc-shop-tax { position: absolute; left: 0; width: calc(190px * var(--panel-text-rx)); margin: 0; color: #dcdcdc; text-align: center; white-space: nowrap; letter-spacing: 0; font: 700 12px/calc(10px * var(--panel-text-ry)) Tahoma, Arial, sans-serif; transform: scale(calc(1 / var(--panel-text-rx)), calc(1 / var(--panel-text-ry))); transform-origin: left top; }
.npc-shop h2 { top: 12px; }
.npc-shop-tax { top: 27px; }
.npc-shop .storage-grid { top: 50px; }
.npc-shop-exit { display: none; }
.npc-shop-exit:active { background-position: 0 -29px; }
.npc-shop-repair, .npc-shop-repair-all { background-image: var(--npc-repair-button); }
.npc-shop-repair { left: 54px; }
.npc-shop-repair-all { left: 98px; }
.npc-shop-repair:active, .npc-shop-repair-all:active, .npc-shop-repair[aria-pressed="true"] { background-position: 0 -29px; }
.npc-shop-repair-money { position: absolute; left: 10px; top: 355px; width: 170px; height: 24px; background: var(--npc-repair-money) left top / 170px 24px no-repeat; color: #ffdc96; font: 700 11px/1 Tahoma, Arial, sans-serif; }
.npc-shop-repair-money[hidden] { display: none; }
.npc-shop-repair-money > span { position: absolute; top: 7px; white-space: nowrap; transform: scale(calc(1 / var(--panel-text-rx)), calc(1 / var(--panel-text-ry))); transform-origin: left top; }
.npc-shop-repair-money > span:first-child { left: 10px; }
.npc-shop-repair-cost { left: 90px; font-variant-numeric: tabular-nums; }
.npc-shop-count { position: absolute; top: 1px; left: calc(100% - 6px); width: 0; height: 11.2px; z-index: 3; pointer-events: none; transform: scale(.82); transform-origin: right top; filter: sepia(.8) saturate(1.25) brightness(.88); }
.npc-shop-digit { position: absolute; top: 0; width: 8.4px; height: 11.2px; background-image: url('assets/interface/native/numbers/newui_number1.png'); background-size: 84px 11.2px; background-repeat: no-repeat; }
.npc-service-overlay { position: absolute; inset: 0; z-index: 60; pointer-events: auto; }
.npc-service-window { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); width: min(94%, calc(230px * var(--service-rx))); max-height: 70%; padding: calc(18px * var(--service-ry)) calc(20px * var(--service-rx)); box-sizing: border-box; color: #eee; font: 12px/1.5 Tahoma, Arial, sans-serif; letter-spacing: 0; text-align: center; overflow-y: auto; isolation: isolate; }
.npc-service-window::before { content: ''; position: absolute; z-index: -2; inset: 2% 3.5% 4% 0; background: #111214 var(--storage-surface) left top / cover; pointer-events: none; }
.npc-service-window::after { content: ''; position: absolute; z-index: -1; inset: 0; background-image: var(--service-top), var(--service-bottom), var(--service-middle); background-position: center top, center bottom, center; background-size: 100% calc(67px * var(--service-ry)), 100% calc(50px * var(--service-ry)), 100% calc(15px * var(--service-ry)); background-repeat: no-repeat, no-repeat, repeat-y; pointer-events: none; }
.npc-service-window h2 { margin: 0 0 6px; color: #ff9c35; font: 700 12px/1.5 Tahoma, Arial, sans-serif; }
.npc-service-window p { margin: 0 0 20px; overflow-wrap: anywhere; white-space: pre-line; }
.npc-service-window .npc-service-price { color: #80b3ff; font-variant-numeric: tabular-nums; }
.npc-service-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(10px * var(--service-ry)); }
.npc-service-options.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(7px * var(--service-ry)) calc(12px * var(--service-rx)); }
.npc-service-window button { min-height: 32px; height: calc(25px * var(--service-ry)); border: 0; border-radius: 0; padding: 5px 8px; background: transparent var(--service-button) left top / 100% 300% no-repeat; color: #eee; font: inherit; letter-spacing: 0; cursor: pointer; overflow-wrap: anywhere; }
.npc-service-window button:hover { background-position: 0 50%; }
.npc-service-window button:active { background-position: 0 100%; }
.npc-service-window button:disabled { opacity: .55; cursor: default; }
.npc-service-window :focus-visible, .npc-shop :focus-visible { outline: 1px solid #d1ab62; outline-offset: 1px; }
.npc-service-back { width: 60%; margin-top: calc(15px * var(--service-ry)); }
.npc-service-status { color: #ffc2b8; min-height: 18px; margin-top: 8px; }
@media (max-width: 600px) {
  .npc-service-window { top: 10%; width: min(94%, 410px); max-height: 80%; padding: 25px; }
  .npc-service-options { gap: 10px; }
  .npc-service-window button { min-height: 44px; height: auto; }
}
.npc-service-window:is(.npc-service-jewel-home, .npc-service-trainer) {
  left: calc(50% - 115px * var(--service-rx));
  width: 230px;
  max-height: none;
  padding: 0;
  overflow: hidden;
  transform: scale(var(--service-rx), var(--service-ry));
  transform-origin: top left;
  color: #fff;
  font: 6px/15px Tahoma, Arial, sans-serif;
}
.npc-service-window.npc-service-jewel-home { top: calc(100px * var(--service-ry)); height: 192px; }
.npc-service-window.npc-service-trainer { top: calc(60px * var(--service-ry)); height: 222px; }
.npc-service-window:is(.npc-service-jewel-home, .npc-service-trainer)::before {
  inset: 2px 8px 8px 0;
  background: var(--storage-surface) left top / 100% 100% no-repeat;
}
.npc-service-window:is(.npc-service-jewel-home, .npc-service-trainer)::after {
  background-image: var(--service-top), var(--service-bottom);
  background-position: left top, left bottom;
  background-size: 230px 67px, 230px 50px;
  background-repeat: no-repeat;
}
.npc-service-window.npc-service-trainer::after { background-image: var(--service-trainer-top), var(--service-bottom); }
.npc-service-window:is(.npc-service-jewel-home, .npc-service-trainer) .npc-service-middle {
  position: absolute;
  left: 0;
  top: 67px;
  width: 230px;
  height: 75px;
  z-index: -1;
  background: var(--service-middle) left top / 230px 15px repeat-y;
  pointer-events: none;
}
.npc-service-window.npc-service-trainer .npc-service-middle { height: 105px; }
.npc-service-window:is(.npc-service-jewel-home, .npc-service-trainer) h2,
.npc-service-window:is(.npc-service-jewel-home, .npc-service-trainer) p {
  position: absolute;
  left: 10px;
  width: calc(210px * var(--service-rx));
  margin: 0;
  overflow-wrap: normal;
  white-space: pre;
  line-height: calc(12px * var(--service-ry));
  font-size: 12.4px;
  transform: scale(calc(1 / var(--service-rx)), calc(1 / var(--service-ry)));
  transform-origin: left top;
}
.npc-service-window.npc-service-jewel-home h2 { top: 17px; color: #ff8000; font: 700 12.4px/calc(12px * var(--service-ry)) Tahoma, Arial, sans-serif; }
.npc-service-window.npc-service-jewel-home p { top: 28px; -webkit-text-stroke: .2px currentColor; }
.npc-service-window.npc-service-trainer h2 { top: 10px; color: #fff; font: 700 12.4px/calc(12px * var(--service-ry)) Tahoma, Arial, sans-serif; }
.npc-service-window.npc-service-trainer p { top: 43px; line-height: calc(18px * var(--service-ry)); -webkit-text-stroke: .2px currentColor; }
.npc-service-window:is(.npc-service-jewel-home, .npc-service-trainer) .npc-service-options { display: block; }
.npc-service-window:is(.npc-service-jewel-home, .npc-service-trainer) button {
  position: absolute;
  width: 108px;
  height: 29px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-size: 108px 87px;
  font: 400 6px/29px Tahoma, Arial, sans-serif;
  white-space: nowrap;
}
.npc-service-window:is(.npc-service-jewel-home, .npc-service-trainer) button > .npc-service-label {
  display: block;
  width: calc(100% * var(--service-rx));
  height: calc(29px * var(--service-ry));
  font: 400 12.4px/calc(29px * var(--service-ry)) Tahoma, Arial, sans-serif;
  transform: scale(calc(1 / var(--service-rx)), calc(1 / var(--service-ry)));
  transform-origin: left top;
  -webkit-text-stroke: .2px currentColor;
  white-space: nowrap;
}
.npc-service-window:is(.npc-service-jewel-home, .npc-service-trainer) .npc-service-options button { left: 61px; }
.npc-service-window.npc-service-jewel-home .npc-service-options button:first-child { top: 60px; }
.npc-service-window.npc-service-jewel-home .npc-service-options button:nth-child(2) { top: 100px; }
.npc-service-window.npc-service-trainer .npc-service-options button:first-child { top: 85px; width: 128px; left: 51px; background-size: 128px 87px; }
.npc-service-window.npc-service-trainer .npc-service-options button:nth-child(2) { top: 120px; width: 128px; left: 51px; background-size: 128px 87px; }
.npc-service-window:is(.npc-service-jewel-home, .npc-service-trainer) .npc-service-back {
  left: 83px;
  width: 64px;
  background-image: var(--service-button-small);
  background-size: 64px 87px;
}
.npc-service-window.npc-service-jewel-home .npc-service-back { top: 140px; }
.npc-service-window.npc-service-trainer .npc-service-back { top: 173px; }
.npc-service-window:is(.npc-service-jewel-home, .npc-service-trainer) .npc-service-status { display: none; }
.npc-service-window.npc-service-high-value {
  left: calc(50% - 115px * var(--service-rx));
  top: calc(100px * var(--service-ry));
  width: 230px;
  height: 132px;
  max-height: none;
  padding: 0;
  overflow: visible;
  transform: scale(var(--service-rx), var(--service-ry));
  transform-origin: top left;
}
.npc-service-window.npc-service-high-value::before {
  inset: 2px 8px 8px 0;
  background: var(--storage-surface) left top / 225px 512px no-repeat;
}
.npc-service-window.npc-service-high-value::after {
  background-image: var(--service-top), var(--service-bottom);
  background-position: left top, left bottom;
  background-size: 230px 67px, 230px 50px;
  background-repeat: no-repeat;
}
.npc-service-high-value .npc-service-middle {
  position: absolute;
  left: 0;
  top: 67px;
  width: 230px;
  height: 15px;
  z-index: -1;
  background: var(--service-middle) left top / 230px 15px no-repeat;
  pointer-events: none;
}
.npc-service-high-value h2,
.npc-service-high-value p {
  position: absolute;
  left: 60px;
  width: calc(170px * var(--service-rx));
  margin: 0;
  overflow-wrap: normal;
  white-space: pre;
  font: 700 12.4px/calc(11px * var(--service-ry)) Tahoma, Arial, sans-serif;
  transform: scale(calc(1 / var(--service-rx)), calc(1 / var(--service-ry)));
  transform-origin: left top;
}
.npc-service-high-value h2 { top: 35px; color: #f00; }
.npc-service-high-value p { top: 46px; color: #ffb200; }
.npc-service-item { display: none; }
.npc-service-high-value .npc-service-item {
  display: block;
  position: absolute;
  left: 30px;
  top: 30px;
  width: 40px;
  height: 40px;
  pointer-events: none;
}
.npc-service-high-value .npc-service-item > .inventory-item {
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
}
.npc-service-high-value-item {
  position: absolute;
  left: calc(50% - 85px * var(--service-rx));
  top: calc(130px * var(--service-ry));
  width: 40px;
  height: 40px;
  z-index: 10;
  overflow: visible;
  pointer-events: none;
  transform: scale(var(--service-rx), var(--service-ry));
  transform-origin: top left;
}
.npc-service-high-value-item[hidden] { display: none; }
.npc-service-high-value-item > .npc-service-item-image:not([src]) { visibility: hidden; }
.npc-service-high-value-item > .npc-service-item-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  pointer-events: none;
}
.npc-service-high-value-item > .inventory-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
}
.npc-service-high-value .npc-service-options > button,
.npc-service-high-value .npc-service-back {
  position: absolute;
  top: 82px;
  width: 54px;
  height: 30px;
  min-height: 0;
  margin: 0;
  padding: 0;
  background-size: 54px 90px;
  white-space: nowrap;
}
.npc-service-high-value .npc-service-options > button {
  left: 30.5px;
  background-image: var(--service-button-ok);
}
.npc-service-high-value .npc-service-back {
  left: 145.5px;
  background-image: var(--service-button-cancel);
}
.npc-service-high-value .npc-service-label { display: none; }
.npc-service-high-value .npc-service-status {
  position: absolute;
  top: 132px;
  left: 0;
  width: 230px;
  min-height: 0;
  margin: 0;
  font: 700 12px Tahoma, Arial, sans-serif;
}
#mundo .npc-shop, #mundo .npc-shop *, #mundo .npc-service-overlay, #mundo .npc-service-overlay * { cursor: url(assets/cursor/mano.png) 2 2, default; }
#mundo .npc-shop:active, #mundo .npc-shop:active *, #mundo .npc-service-overlay:active, #mundo .npc-service-overlay:active * { cursor: url(assets/cursor/push.png) 2 2, default; }
