@font-face {
  font-family: "Wicked Arcon";
  src: url("../game-ui/card/fonts/Arcon-Regular.otf") format("opentype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Wicked Marcellus";
  src: url("../game-ui/card/fonts/MarcellusSC-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --wicked-card-text: #cbcccf;
  --wicked-card-name: #fff;
  --wicked-card-muted: #888;
  --wicked-card-subhead: #ccc;
  --wicked-card-value: #79a7ea;
  --wicked-card-exalted: #e5d07c;
  --wicked-card-standard: #fff;
  --wicked-card-magical: #6688b2;
  --wicked-card-plagued: #a35175;
  --wicked-card-unique: #b4964b;
  --wicked-enchant-magical: #558cac;
  --wicked-enchant-plagued: #ac4e76;
  --wicked-enchant-unique: #f2e6a0;
  --wicked-enchant-negative: #d45342;
  --wicked-facet: #62c4a0;
  --wicked-facet-bright: #a9efd4;
  --wicked-upside: #3d8e39;
  --wicked-downside: #f80000;
}

.wicked-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  background-image: url("../game-ui/card/1766218809449.webp");
  background-repeat: no-repeat;
}

.wicked-icon--intelligence { background-image: url("../game-ui/attributes/intelligence.png"); background-position: center; background-size: 64px 64px; }
.wicked-icon--focus-cost { background-position: -325px 0; }
.wicked-icon--stamina { background-image: url("../game-ui/attributes/stamina.png"); background-position: center; background-size: 64px 64px; }
.wicked-icon--weight { background-position: -520px -65px; }
.wicked-icon--stat-weight { background-position: -455px -130px; }
.wicked-icon--strength { background-image: url("../game-ui/attributes/strength.png"); background-position: center; background-size: 64px 64px; }
.wicked-icon--damage { background-position: -65px -195px; }
.wicked-icon--poise-damage { background-position: -390px -195px; }
.wicked-icon--poise-defense { background-position: -390px -130px; }
.wicked-icon--stat-equip-load { background-position: -130px -260px; }
.wicked-icon--durability { background-position: -195px -260px; }
.wicked-icon--armor { background-position: -325px -260px; }
.wicked-icon--critical { background-position: -390px -260px; }
.wicked-icon--speed,
.wicked-icon--movement-speed { background-position: -520px -260px; }
.wicked-icon--focus { background-image: url("../game-ui/attributes/focus.png"); background-position: center; background-size: 64px 64px; }
.wicked-icon--stat-health { background-position: -65px -390px; }
.wicked-icon--stat-stamina { background-position: -130px -390px; }
.wicked-icon--health { background-image: url("../game-ui/attributes/health.png"); background-position: center; background-size: 64px 64px; }
.wicked-icon--faith { background-image: url("../game-ui/attributes/faith.png"); background-position: center; background-size: 64px 64px; }
.wicked-icon--dexterity { background-image: url("../game-ui/attributes/dexterity.png"); background-position: center; background-size: 64px 64px; }
.wicked-icon--equip-load { background-image: url("../game-ui/attributes/equip-load.png"); background-position: center; background-size: 64px 64px; }
.wicked-icon--enchant-unique { width: 40px; height: 40px; background-position: -557px -520px; }
.wicked-icon--enchant-negative { width: 40px; height: 40px; background-position: 0 -585px; }

.wicked-icon-wrap,
.wicked-attribute-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  background: url("../game-ui/card/iconItemAttribute.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 2px #000);
}

.wicked-icon-wrap > .wicked-icon,
.wicked-attribute-icon > .wicked-icon {
  position: absolute;
  top: 2px;
  left: 2px;
  transform: scale(.375);
  transform-origin: left top;
}

.wicked-attribute-icon[data-attribute="focus"] > .wicked-icon { top: 3px; }
.wicked-attribute-icon[data-attribute="strength"] > .wicked-icon { top: 4px; }
.wicked-attribute-icon.is-unmet { filter: drop-shadow(0 0 2px var(--wicked-downside)); }

.wicked-attribute {
  position: relative;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 5px;
  padding-left: 34px;
  color: var(--wicked-card-text);
  white-space: nowrap;
}

.wicked-attribute::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  background: url("../game-ui/card/iconItemAttribute.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 2px #000);
}

.wicked-attribute > .wicked-icon {
  position: absolute;
  top: 2px;
  left: 2px;
  transform: scale(.375);
  transform-origin: left top;
}

.wicked-attribute:has(.wicked-icon--focus) > .wicked-icon { top: 3px; }
.wicked-attribute:has(.wicked-icon--strength) > .wicked-icon { top: 4px; }
.wicked-attribute__label { color: var(--wicked-card-muted); font-weight: 400; }
.wicked-attribute__value { color: var(--wicked-card-text); font-weight: 400; }

.planner-attribute > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.planner-attribute > span .wicked-attribute-icon {
  margin: -4px 0;
}

.wicked-card {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: 350px;
  min-width: 0;
  overflow: visible;
  border: 1px solid #333;
  border-radius: 0;
  background-position: -6px -3px;
  background-repeat: no-repeat;
  background-size: 362px calc(100% + 10px);
  box-shadow: 0 0 4px #000;
  color: var(--wicked-card-text);
  font-family: "Wicked Arcon", "Microsoft YaHei UI", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 18.75px;
  text-align: left;
}

.wicked-card--standard { background-image: url("../game-ui/card/itemPanelStandard.webp"); }
.wicked-card--magical { background-image: url("../game-ui/card/itemPanelMagical.webp"); }
.wicked-card--plagued { background-image: url("../game-ui/card/itemPanelPlagued.webp"); }
.wicked-card--unique { border-color: #4f4429; background-image: url("../game-ui/card/itemPanelUnique.webp"); }

.wicked-card__card-top {
  position: relative;
  box-sizing: border-box;
  height: 110px;
  min-height: 110px;
  padding-top: 16px;
}

.wicked-card__card-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: min(206px, 100%);
  background-position: -6px -3px;
  background-repeat: no-repeat;
  background-size: 362px 100%;
  pointer-events: none;
}

.wicked-card--standard .wicked-card__card-top::before { background-image: url("../game-ui/card/itemPanelTopStandard.webp"); }
.wicked-card--magical .wicked-card__card-top::before { background-image: url("../game-ui/card/itemPanelTopMagical.webp"); }
.wicked-card--plagued .wicked-card__card-top::before { background-image: url("../game-ui/card/itemPanelTopPlagued.webp"); }
.wicked-card--unique .wicked-card__card-top::before { background-image: url("../game-ui/card/itemPanelTopUnique.webp"); }

.wicked-card__icon-frame {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  width: 80px;
  height: 80px;
  background: url("../game-ui/card/invSlotBg.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 1px #000);
}

.wicked-card__item-icon {
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 0 2px #000);
}

.wicked-card__item-icon--empty::before {
  content: "";
  position: absolute;
  inset: 24px;
  background: url("../game-ui/card/itemRuneBg.webp") center / contain no-repeat;
  opacity: .5;
}

.wicked-card__header {
  position: relative;
  z-index: 1;
  min-height: 94px;
  margin-left: 108px;
  padding-right: 66px;
}

.wicked-card__title {
  margin: 5px 0 0;
  color: var(--wicked-card-name);
  font: inherit;
  font-size: 18.75px;
  font-weight: 400;
  line-height: 22.5px;
}

.wicked-card__subtitle { margin-top: 4px; color: var(--wicked-card-muted); }
.wicked-card__rarity { display: none; }

.wicked-card__tier {
  position: absolute;
  top: 2px;
  right: 0;
  z-index: 1;
  display: flex;
  width: 62px;
  height: 62px;
  align-items: center;
  justify-content: center;
  background: url("../game-ui/card/itemTierBg.webp") center / 100% 100% no-repeat;
  color: var(--wicked-card-text);
  font-size: 26.25px;
}

.wicked-card__tier::before,
.wicked-card__tier::after {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.wicked-card__tier::before { background-image: url("../game-ui/card/itemTierFill.webp"); }
.wicked-card__tier::after { top: -2px; width: 61px; height: 64px; background-image: url("../game-ui/card/itemTierOverlay.webp"); }
.wicked-card__tier > span { position: relative; z-index: 1; padding-bottom: 2px; }

.wicked-card__body { position: relative; }
.wicked-card__divider {
  width: 98%;
  height: 4px;
  margin: 0 auto;
  background: url("../game-ui/card/itemPanelSeparator.webp") center / 100% 4px no-repeat;
}

.wicked-card__section { position: relative; padding: 4px 18.75px 6px; }
.wicked-card__section-title { margin: 0 0 4px; color: var(--wicked-card-subhead); font: inherit; }
.wicked-card__section--stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
.wicked-card__section--stats .wicked-card__section-title { grid-column: 1 / -1; }
.wicked-card__section--stats > .wicked-card__row { grid-column: 1 / -1; }

.wicked-card__stat {
  position: relative;
  display: grid;
  min-height: 24px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
}

.wicked-card__stat-icon { position: relative; width: 18px; height: 18px; }
.wicked-card__stat-icon > .wicked-icon {
  position: absolute;
  top: -3px;
  left: -4px;
  transform: scale(.4375);
  transform-origin: left top;
  filter: drop-shadow(0 0 1px #000);
}
.wicked-card__stat-label { overflow: hidden; color: var(--wicked-card-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.wicked-card__stat-value { color: var(--wicked-card-value); font-size: 17px; font-weight: 400; }

.wicked-card__row {
  display: flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 0;
}
.wicked-card__row + .wicked-card__row { border-top: 1px solid rgba(255,255,255,.05); }
.wicked-card__row > .wicked-card__label { flex: 0 0 105px; color: var(--wicked-card-muted); }
.wicked-card__row > .wicked-card__value { min-width: 0; flex: 1; }
.wicked-card__row--damage > .wicked-card__value {
  padding: 7px;
  background: rgba(55, 155, 255, .075);
  box-shadow: 0 0 4px #000;
  color: var(--wicked-card-text);
}

.wicked-card__attributes { display: flex; align-items: center; gap: 3px; }
.wicked-card__attributes .wicked-attribute { width: 28px; padding-left: 28px; }
.wicked-card__attributes .wicked-attribute__label,
.wicked-card__attributes .wicked-attribute__value { display: none; }

.wicked-card__rune-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 8px; }
.wicked-card__rune-link {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 28px;
  align-items: center;
  color: var(--wicked-card-standard);
  text-decoration: none;
}
.wicked-card__rune-link:hover { text-decoration: underline 1.6px; text-underline-offset: 2.5px; }
.wicked-card__rune-link > span:last-child { overflow: hidden; padding: 4px 0 4px 28px; text-overflow: ellipsis; white-space: nowrap; }
.wicked-card__rune-icon {
  position: absolute;
  top: 2px;
  left: 0;
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 0 2px #000);
}
.wicked-card__rune-icon--empty {
  top: -2px;
  left: -3px;
  width: 32px;
  height: 32px;
  background: url("../game-ui/card/itemRuneBg.webp") center / 100% no-repeat;
}
.wicked-card__rune-link--empty { color: var(--wicked-card-muted); }

.wicked-card__section--enchants { padding: 0 18.75px 5px; }
.wicked-card__section--enchants .wicked-card__section-title { position: relative; z-index: 1; margin: 8px 0 2px; }
.wicked-card__enchant-panel {
  position: relative;
  margin: -27px -1px 0;
  padding: 34px 8px 7px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: 0 0 4px #000;
}
.wicked-card--standard .wicked-card__enchant-panel,
.wicked-card--magical .wicked-card__enchant-panel { background-image: url("../game-ui/card/enchantPanelStandard.webp"); }
.wicked-card--plagued .wicked-card__enchant-panel { background-image: url("../game-ui/card/enchantPanelPlagued.webp"); }
.wicked-card--unique .wicked-card__enchant-panel { background-image: url("../game-ui/card/enchantPanelUnique.webp"); }
.wicked-card__enchant { position: relative; display: grid; min-height: 24px; grid-template-columns: 28px minmax(0, 1fr); padding: 2px 0; }
.wicked-card__enchant-icon { position: relative; width: 18px; height: 18px; }
.wicked-card__enchant-icon .wicked-icon { position: absolute; top: 1px; left: 2px; transform: scale(.45); transform-origin: left top; }
.wicked-card__enchant-text { color: var(--wicked-enchant-magical); }
.wicked-card--plagued .wicked-card__enchant-text { color: var(--wicked-enchant-plagued); }
.wicked-card--unique .wicked-card__enchant-text { color: var(--wicked-enchant-unique); }
.wicked-card__enchant--cost .wicked-card__enchant-text { color: var(--wicked-enchant-negative); }
.wicked-card__enchant-roll { grid-column: 2; color: #fff; }

.wicked-card__section--facets { padding: 4px 18.75px 7px; }
.wicked-card__section--facets .wicked-card__section-title { color: var(--wicked-facet-bright); }
.wicked-card__facet-panel {
  position: relative;
  overflow: hidden;
  border-left: 2px solid var(--wicked-facet);
  background: linear-gradient(90deg, rgba(36, 112, 88, .2), rgba(13, 31, 28, .08) 72%, transparent);
  box-shadow: inset 0 1px rgba(159, 234, 205, .08), inset 0 -1px rgba(10, 18, 16, .45);
}
.wicked-card__facet {
  position: relative;
  display: grid;
  min-height: 28px;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  padding: 3px 8px;
}
.wicked-card__facet-icon {
  position: relative;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  transform: rotate(45deg);
  border: 1px solid rgba(169, 239, 212, .68);
  background: radial-gradient(circle, rgba(169, 239, 212, .78) 0 13%, rgba(57, 153, 119, .48) 14% 43%, rgba(12, 43, 35, .88) 45%);
  box-shadow: 0 0 5px rgba(84, 201, 157, .4), inset 0 0 4px rgba(169, 239, 212, .28);
}
.wicked-card__facet-icon::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(210, 255, 237, .55);
}
.wicked-card__facet-text { min-width: 0; color: var(--wicked-facet); }
.wicked-card__facet-text strong,
.wicked-card__facet-text small { display: block; font-weight: 400; }
.wicked-card__facet-text small { margin-top: 1px; color: var(--wicked-facet-bright); font-size: 11px; line-height: 1.35; }

.wicked-card__gem { position: relative; display: grid; min-height: 32px; grid-template-columns: 30px minmax(0, 1fr); align-items: start; }
.wicked-card__gem-icon { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 0 2px #000); }
.wicked-card__gem > span { min-width: 0; }
.wicked-card__gem strong,
.wicked-card__gem small { display: block; font-weight: 400; }
.wicked-card__gem strong { color: #fff; }
.wicked-card__gem small { color: var(--wicked-card-muted); font-size: 12px; }

.wicked-card__requirements { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.wicked-card__requirement .wicked-attribute__label { display: none; }
.wicked-card__requirement--unmet .wicked-attribute::before { filter: drop-shadow(0 0 2px var(--wicked-downside)); }
.wicked-card__requirement--unmet .wicked-attribute__value { color: var(--wicked-downside); }

.wicked-card__description { padding: 11px 18.75px 8px; color: var(--wicked-card-text); }
.wicked-card__bottom {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 22px;
  padding: 7px 18.75px;
  background: rgba(255,255,255,.1);
}
.wicked-card__bottom-metric { display: inline-flex; min-width: 105px; align-items: center; gap: 7px; }
.wicked-card__bottom-icon { position: relative; width: 18px; height: 18px; }
.wicked-card__bottom-icon > .wicked-icon { position: absolute; top: -4px; left: -4px; transform: scale(.4375); transform-origin: left top; }
.wicked-card__bottom .wicked-card__label { color: var(--wicked-card-muted); }
.wicked-card__bottom strong { color: var(--wicked-card-text); font-weight: 400; }
.wicked-card__resource { display: inline-flex; align-items: center; gap: 5px; }
.wicked-card__resource + .wicked-card__resource { margin-left: 10px; }
.wicked-card__weapon-class { display: inline; }
.wicked-card__weapon-class + .wicked-card__weapon-class::before { content: " · "; color: #666; }

.wicked-card--compact { width: 100%; min-height: 110px; }
.wicked-card--compact .wicked-card__body,
.wicked-card--compact .wicked-card__bottom { display: none; }
.wicked-card--compact .wicked-card__card-top::before { height: 110px; }

.catalog-grid:has(.wicked-card) { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); justify-items: center; }
.catalog-game-card,
.game-card-entry { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 10px; }
.catalog-game-card > .recipe-block,
.game-card-entry > .recipe-block,
.game-card-entry__extra { width: min(350px, 100%); }
.game-card-entry__extra { padding: 10px 12px; border: 1px solid #34302a; background: rgba(10, 11, 13, .72); }

.entity-preview:has(.wicked-card) {
  width: min(374px, calc(100vw - 16px));
  max-height: calc(100dvh - 24px);
  padding: 12px;
  overflow: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.entity-preview:has(.wicked-card) .wicked-card { max-width: 100%; }

.planner-editor-dialog { width: min(1210px, calc(100% - 24px)); }
.planner-editor-layout {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.planner-game-preview { position: sticky; top: 0; z-index: 2; min-width: 0; padding: 28px 0 12px; }
.planner-editor-config { min-width: 0; }
.planner-game-preview .wicked-card { margin-inline: auto; }

@media (max-width: 900px) {
  .planner-editor-layout { grid-template-columns: 1fr; }
  .planner-game-preview { position: relative; padding-top: 4px; }
}

.planner-slot-icon {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: #111 url("../game-ui/card/invSlotBg.webp") center / 100% 100% no-repeat;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, .5);
}

.planner-slot-icon::before,
.planner-slot-icon::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.planner-slot.rarity-magic .planner-slot-icon::before,
.planner-slot.rarity-magical .planner-slot-icon::before,
.planner-slot.rarity-plagued .planner-slot-icon::before,
.planner-slot.rarity-unique .planner-slot-icon::before {
  inset: -3px -4px -4px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.planner-slot.rarity-magic .planner-slot-icon::before,
.planner-slot.rarity-magical .planner-slot-icon::before { background-image: url("../game-ui/card/invSlotRarityMagical.webp"); }
.planner-slot.rarity-plagued .planner-slot-icon::before { background-image: url("../game-ui/card/invSlotRarityPlagued.webp"); }
.planner-slot.rarity-unique .planner-slot-icon::before { background-image: url("../game-ui/card/invSlotRarityUnique.webp"); }
.planner-slot.is-exalted .planner-slot-icon::after {
  inset: -4px;
  background: url("../game-ui/card/invSlotExceptional.webp") center / 100% 100% no-repeat;
}

.planner-slot.active-loadout[data-slot*="Hand"] .planner-slot-icon {
  box-shadow: 0 0 6px rgba(121, 167, 234, .5), 0 0 4px 1px rgba(0, 0, 0, .5);
}

.planner-slot:hover .planner-slot-icon { outline: 1px solid #e3ba6b; }

.planner-option:has(input[data-option-kind="rune"]) img,
.planner-option:has(input[data-option-kind="utility"]) img {
  box-sizing: border-box;
  width: 52px;
  height: 52px;
  padding: 6px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.planner-option:has(input[data-option-kind="rune"]),
.planner-option:has(input[data-option-kind="utility"]) { grid-template-columns: auto 52px minmax(0, 1fr) auto; }
.planner-option:has(input[data-option-kind="rune"]) img { background-image: url("../game-ui/runes/weapon-slot.png"); }
.planner-option:has(input[data-option-kind="utility"]) img { background-image: url("../game-ui/runes/utility-slot.png"); }
.planner-option:has(input[data-option-kind="rune"]:checked) img,
.planner-option:has(input[data-option-kind="utility"]:checked) img { filter: drop-shadow(0 0 4px rgba(121,167,234,.55)); }

.planner-picker-item img {
  box-sizing: border-box;
  padding: 5px;
  background: #111 url("../game-ui/card/invSlotBg.webp") center / 100% 100% no-repeat;
}

.wicked-slot-placeholder {
  width: 48px;
  height: 30px;
  margin: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .4;
}

.wicked-slot-placeholder--main { background-image: url("../game-ui/card/invIconMainHand.webp"); }
.wicked-slot-placeholder--off { background-image: url("../game-ui/card/invIconOffHand.webp"); }
.wicked-slot-placeholder--armor { background-image: url("../game-ui/card/invIconArmor.webp"); }
.wicked-slot-placeholder--trinket { background-image: url("../game-ui/card/invIconTrinket.webp"); }

@media (max-width: 420px) {
  .wicked-card { max-width: 100%; }
  .wicked-card__card-top { height: 96px; min-height: 96px; padding-top: 12px; }
  .wicked-card__icon-frame,
  .wicked-card__item-icon { width: 64px; height: 64px; }
  .wicked-card__icon-frame { top: 12px; left: 12px; }
  .wicked-card__header { min-height: 80px; margin-left: 86px; padding-right: 50px; }
  .wicked-card__title { display: -webkit-box; overflow: hidden; font-size: 16px; line-height: 19px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .wicked-card__subtitle { display: -webkit-box; overflow: hidden; font-size: 13px; line-height: 16px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .wicked-card__tier { width: 48px; height: 48px; }
}