/* Shared catalogue tiles and item profiles. */
.v5-cardpic {
  flex: 0 0 clamp(76px, 13vw, 112px);
  width: clamp(76px, 13vw, 112px);
  height: auto;
  aspect-ratio: 1;
  align-self: center;
}

.v5-weapon-card {
  min-height: 140px;
}

.lc-item-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 16px;
  align-items: start;
}

.lc-item-grid > * {
  min-width: 0;
}

.lc-item-visual .v5-heroart-img {
  min-height: 0;
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.35;
  padding: 16px;
  background: radial-gradient(ellipse at center, #173957, #091c30 72%);
  border-radius: 9px;
  overflow: hidden;
}

.lc-item-visual .v5-heroart-img img {
  position: static;
  display: block;
  width: min(70%, 230px);
  height: auto;
  max-height: 240px;
  aspect-ratio: 1;
  object-fit: contain;
  image-rendering: pixelated;
}

.lc-item-visual > p,
.lc-item-note p {
  margin: 12px 0 0;
  color: #c6ddeb;
}

.lc-item-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(145px, 100%), 1fr));
  gap: 8px;
  margin: 12px 0;
}

.lc-item-facts > div {
  padding: 9px 12px;
  border-radius: 8px;
  background: #112c45;
}

.lc-item-facts dt,
.lc-item-english {
  color: #afcde1;
  font-size: .86rem;
}

.lc-item-facts dd {
  margin: 2px 0 0;
  font-weight: 700;
}

.lc-item-english {
  display: block;
  overflow-wrap: anywhere;
}

.lc-enchantments {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.lc-enchantments li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 0;
  border-bottom: 1px solid #294560;
}

.lc-item-note {
  margin-top: 16px;
}

.lc-item-note [dir=ltr] {
  color: #b0cfe5;
  font-size: .9rem;
}

.lc-recipe-panel {
  grid-column: 1 / -1;
}

.lc-recipe-layout {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(64px, 112px);
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 3vw, 30px);
}

.lc-recipe-board {
  padding: 9px;
  background: #0e2842;
  border: 1px solid #417c9f;
  border-radius: 12px;
}

.lc-recipe-board img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  border-radius: 4px;
}

.lc-recipe-result {
  display: grid;
  justify-items: center;
  gap: 6px;
  color: #bbd9ef;
  text-align: center;
  font-size: .85rem;
}

.lc-recipe-result img {
  display: block;
  width: min(100%, 74px);
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
}

.lc-recipe-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px 16px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.lc-recipe-actions a {
  color: #92e8ff;
}

img[data-item-sprite="3489"] { clip-path: inset(0 33% 0 0); }
img[data-item-sprite="3494"] { clip-path: inset(0 42% 0 0); }
img[data-item-sprite="3496"] { clip-path: inset(0 15% 7% 0); }
img[data-item-sprite="3498"] { clip-path: inset(0 0 15% 0); }
img[data-item-sprite="3501"] { clip-path: inset(0 0 11% 0); }
img[data-item-sprite="3506"] { clip-path: inset(0 23% 12% 0); }
img[data-item-sprite="3510"] { clip-path: inset(0 0 15% 0); }
img[data-item-sprite="3511"] { clip-path: inset(0 0 11% 0); }
img[data-item-sprite="3528"] { clip-path: polygon(0 0, 73% 0, 73% 67%, 66% 72%, 66% 83%, 0 83%); }

@media (max-width: 690px) {
  .lc-item-grid { grid-template-columns: minmax(0, 1fr); }
  .lc-item-visual .v5-heroart-img { aspect-ratio: 1.55; }
  .lc-item-visual .v5-heroart-img img { max-height: 175px; }
}

.lc-item-grid > .v5-panel:not(.lc-item-visual) {
  padding: 0 clamp(12px, 2vw, 22px) 18px;
}

.lc-item-grid > .v5-panel > h2 {
  margin-inline: calc(-1 * clamp(12px, 2vw, 22px));
}

.lc-item-visual .v5-heroart-img img.v8-matching-art {
  inset: auto !important;
  position: static !important;
  width: min(76%, 230px) !important;
  height: auto !important;
  max-height: 230px !important;
  object-fit: contain !important;
}

.lc-recipe-actions .v5-zoom {
  width: auto;
  margin: 0;
}

@media (max-width: 690px) {
  .lc-item-visual .v5-heroart-img img.v8-matching-art {
    max-height: 165px !important;
  }
}
