@font-face {
  font-family: "Exocet Light";
  src: url("/assets/fonts/EXL_____.woff") format("woff"),
       url("/assets/fonts/EXL_____.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.armory-gui {
  font-family: "Exocet Light", Georgia, serif;
}

.game-window {
  border: 2px solid #050403;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(48, 38, 27, .96), rgba(11, 9, 7, .98)),
    radial-gradient(circle at 50% 0, rgba(155, 36, 20, .2), transparent 420px);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .82), inset 0 0 0 1px rgba(217, 164, 65, .18);
  color: #c9b08a;
  overflow: hidden;
}

.game-window-title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  min-height: 54px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(217, 164, 65, .28);
  background: linear-gradient(180deg, #201610, #090706);
  text-align: center;
}

.game-window-title span {
  color: #8c7657;
  font-size: .86rem;
}

.game-window-title strong {
  color: #f2c978;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  font-weight: 400;
  text-shadow: 0 0 18px rgba(207, 43, 31, .55);
}

.game-window-body {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(360px, 1fr) minmax(300px, 400px);
  gap: 0;
  min-height: 620px;
  overflow-x: hidden;
}

.game-stats-panel,
.game-paperdoll-panel,
.game-inventory-panel {
  padding: 18px;
  border-right: 1px solid rgba(217, 164, 65, .18);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .42)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 5px);
}

.game-inventory-panel {
  border-right: 0;
  min-width: 0;
}

.game-paperdoll-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(145, 29, 18, .18), transparent 180px),
    linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .46));
}

.game-window h2 {
  margin: 0 0 12px;
  color: #d8a94d;
  font-size: 1.05rem;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(207, 43, 31, .42);
}

.game-stat-list {
  display: grid;
  gap: 4px;
  margin: 0 0 18px;
}

.game-stat-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 28px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgba(217, 164, 65, .12);
  background: rgba(0, 0, 0, .3);
  line-height: 1.15;
}

.game-stat-list dt {
  color: #9c8564;
  font-size: .9rem;
}

.game-stat-list dd {
  margin: 0;
  color: #f2d59a;
  font-size: .95rem;
  text-align: right;
}

.resist-list dd {
  color: #87d7ff;
}

.game-achievements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 430px);
  margin-top: auto;
}

.game-achievements div {
  min-height: 58px;
  padding: 9px;
  border: 1px solid rgba(217, 164, 65, .16);
  background: rgba(0, 0, 0, .28);
  text-align: center;
}

.game-achievements strong {
  display: block;
  color: #e0b85f;
  font-size: .94rem;
}

.game-achievements span {
  color: #9d8768;
  font-size: .82rem;
}

.armory-stage {
  display: grid;
  grid-template-columns: minmax(380px, .9fr) minmax(360px, 1fr);
  gap: 22px;
  align-items: start;
}

.armory-paperdoll {
  position: relative;
  width: 400px;
  height: 250px;
  margin: 8px auto 24px;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(217, 164, 65, .14), transparent 116px),
    radial-gradient(ellipse at 50% 52%, rgba(0, 0, 0, .42), transparent 180px);
}

.armory-slot,
.armory-item {
  position: absolute;
  border: 1px solid #050403;
  border-radius: 4px;
  box-shadow: inset 0 0 10px #000, 0 8px 18px rgba(0, 0, 0, .35);
}

.armory-slot {
  z-index: 1;
  opacity: .86;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(3, 3, 8, .56);
}

.armory-item {
  z-index: 2;
  display: grid;
  place-items: center;
  background: rgba(5, 5, 18, .78);
  cursor: help;
}

.armory-item:hover {
  border-color: #f1d18a;
  z-index: 30;
}

.armory-item img {
  max-width: calc(100% - 2px);
  max-height: calc(100% - 2px);
  object-fit: contain;
  image-rendering: auto;
}

.armory-item.ethereal img {
  opacity: .62;
}

.armory-location-1,
.armory-backdrop-1 {
  top: 0;
  left: 172px;
  width: 56px;
  height: 56px;
}

.armory-backdrop-1 {
  background-image: url("/assets/armory/helm.png");
}

.armory-location-2,
.armory-backdrop-2 {
  top: 28px;
  left: 240px;
  width: 28px;
  height: 28px;
}

.armory-backdrop-2,
.armory-backdrop-6,
.armory-backdrop-7 {
  background-image: url("/assets/armory/inv_ring_amulet.png");
}

.armory-location-3,
.armory-backdrop-3 {
  top: 70px;
  left: 172px;
  width: 56px;
  height: 84px;
}

.armory-backdrop-3 {
  background-image: url("/assets/armory/inv_armor.png");
}

.armory-location-4,
.armory-backdrop-4,
.armory-location-11,
.armory-backdrop-11 {
  top: 39px;
  left: 59px;
  width: 56px;
  height: 111px;
}

.armory-location-5,
.armory-backdrop-5,
.armory-location-12,
.armory-backdrop-12 {
  top: 39px;
  left: 287px;
  width: 56px;
  height: 111px;
}

.armory-backdrop-4,
.armory-backdrop-5,
.armory-backdrop-11,
.armory-backdrop-12 {
  background-image: url("/assets/armory/inv_weapons.png");
}

.armory-location-6,
.armory-backdrop-6 {
  top: 171px;
  left: 127px;
  width: 28px;
  height: 28px;
}

.armory-location-7,
.armory-backdrop-7 {
  top: 171px;
  left: 245px;
  width: 28px;
  height: 28px;
}

.armory-backdrop-6,
.armory-backdrop-7 {
  background-image: url("/assets/armory/ring.png");
}

.armory-location-8,
.armory-backdrop-8 {
  top: 171px;
  left: 169px;
  width: 62px;
  height: 33px;
}

.armory-backdrop-8 {
  background-image: url("/assets/armory/inv_belt.png");
}

.armory-location-9,
.armory-backdrop-9 {
  top: 171px;
  left: 287px;
  width: 56px;
  height: 56px;
}

.armory-backdrop-9 {
  background-image: url("/assets/armory/inv_boots.png");
}

.armory-location-10,
.armory-backdrop-10 {
  top: 171px;
  left: 59px;
  width: 56px;
  height: 56px;
}

.armory-backdrop-10 {
  background-image: url("/assets/armory/inv_helm_glove.png");
}

.armory-swap-0 .armory-location-11,
.armory-swap-0 .armory-backdrop-11,
.armory-swap-0 .armory-location-12,
.armory-swap-0 .armory-backdrop-12,
.armory-swap-1 .armory-location-4,
.armory-swap-1 .armory-backdrop-4,
.armory-swap-1 .armory-location-5,
.armory-swap-1 .armory-backdrop-5 {
  display: none;
}

.armory-swap-tabs {
  display: flex;
  justify-content: space-between;
  gap: 140px;
  width: 320px;
  margin: 0 auto 8px;
}

.armory-swap-tabs button,
.armory-tabs button {
  border: 1px solid rgba(217, 164, 65, .28);
  border-radius: 4px;
  background: rgba(0, 0, 0, .38);
  color: #a99373;
  cursor: pointer;
  font-family: "Exocet Light", Georgia, serif;
}

.armory-swap-tabs button {
  width: 28px;
  height: 28px;
}

.armory-swap-tabs button.is-active,
.armory-tabs button.is-active {
  color: #ffe3a3;
  border-color: rgba(255, 138, 36, .62);
  background: rgba(111, 24, 16, .52);
}

.armory-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}

.armory-tabs button {
  min-height: 36px;
  padding: 8px 13px;
}

.armory-pane {
  display: none;
}

.armory-pane.is-active {
  display: block;
}

.armory-grid {
  --cols: 10;
  --rows: 4;
  position: relative;
  width: calc(var(--cols) * 28px);
  height: calc(var(--rows) * 28px);
  max-width: 100%;
  margin: 0 auto;
  background-image: url("/assets/armory/inv_grid.png");
  background-repeat: repeat;
  border: 1px solid #050403;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .72), 0 16px 38px rgba(0, 0, 0, .42);
}

.armory-grid .armory-item {
  left: calc(var(--x, 0) * 28px);
  top: calc(var(--y, 0) * 28px);
  width: calc(var(--w, 1) * 28px);
  height: calc(var(--h, 1) * 28px);
}

.armory-tooltip {
  position: fixed;
  left: var(--armory-tooltip-left, 50vw);
  top: var(--armory-tooltip-top, 50vh);
  z-index: 9999;
  width: max-content;
  max-width: min(320px, 86vw);
  max-height: calc(100vh - 16px);
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(217, 164, 65, .45);
  border-radius: 4px;
  background: rgba(3, 3, 8, .96);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .72);
  color: #c2c2c2;
  font-family: Georgia, serif;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.armory-item:hover .armory-tooltip,
.armory-item:focus-within .armory-tooltip {
  opacity: 1;
  visibility: visible;
}

.armory-tooltip strong {
  display: block;
  margin-bottom: 3px;
  font-size: 15px;
}

.armory-tooltip .tooltip-type,
.armory-tooltip .tooltip-req,
.armory-tooltip li {
  display: block;
  font-size: 13px;
  line-height: 1.28;
}

.armory-tooltip ul {
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
  color: #9ed3ff;
}

.armory-quality-magic .armory-tooltip strong {
  color: #5050ff;
}

.armory-quality-rare .armory-tooltip strong {
  color: #d6b665;
}

.armory-quality-set .armory-tooltip strong {
  color: #19fa00;
}

.armory-quality-unique .armory-tooltip strong,
.armory-quality-runeword .armory-tooltip strong {
  color: #948065;
}

@media (max-width: 1180px) {
  .armory-stage {
    grid-template-columns: 1fr;
  }

  .game-window-body {
    grid-template-columns: 1fr;
    overflow-x: visible;
  }

  .game-stats-panel,
  .game-paperdoll-panel,
  .game-inventory-panel {
    border-right: 0;
    border-bottom: 1px solid rgba(217, 164, 65, .18);
  }
}

@media (max-width: 480px) {
  .game-window-title {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .armory-paperdoll {
    transform: scale(.86);
    transform-origin: top center;
    margin-bottom: -34px;
  }
}