.br-rarity-guide {
  --rarity-ink: #233b4a;
  --rarity-muted: #46616d;
  --rarity-line: #d5dfdf;
  color: var(--rarity-ink);
  margin-block: 14px 24px;
  container: br-rarity / inline-size;
}

.br-rarity-guide .br-rarity-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 166px;
  padding: clamp(18px, 3vw, 32px);
  overflow: hidden;
  border: 1px solid #40616a;
  border-radius: 12px;
  background: #19373e;
}

.br-rarity-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #132f37 4%, #16333bef 40%, #17353cb0 64%, #17353c18);
}

.br-rarity-guide .br-rarity-banner {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% 45%;
}

.br-rarity-guide .br-rarity-copy { max-width: 365px; }

.br-rarity-guide .br-rarity-copy h3 {
  margin: 0;
  color: #fff3d9;
  font-family: var(--guide-serif, var(--font-display, Georgia, serif));
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.08;
}

/* The client's typography reset otherwise forces every h3 and h4 to body size. */
html[data-pwro-refinement] #br-guide .br-rarity-copy h3 {
  font-size: clamp(25px, 3.5vw, 36px) !important;
}

html[data-pwro-refinement] #br-guide .br-rarity-guide h4 {
  font-size: 16px !important;
}

.br-rarity-guide .br-rarity-copy p {
  margin: 9px 0 0;
  color: #eff6f2;
  font-size: 14px;
  line-height: 1.5;
}

.br-rarity-guide .br-rarity-tiers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
  padding: 0;
  list-style: none;
}

.br-rarity-guide .br-rarity-basic { --loot-light: #edece3; --loot-text: #3f515c; --loot-halo: 42px; }
.br-rarity-guide .br-rarity-common { --loot-light: #9fe17e; --loot-text: #325e38; --loot-halo: 48px; }
.br-rarity-guide .br-rarity-rare {
  --loot-light: #80bfff; --loot-text: #235b89; --loot-halo: 53px; --loot-beam: 53px; --loot-glow: .59;
}
.br-rarity-guide .br-rarity-epic {
  --loot-light: #d49aff; --loot-text: #643c84; --loot-halo: 57px; --loot-beam: 68px; --loot-glow: .68;
}
.br-rarity-guide .br-rarity-legendary {
  --loot-light: #ffdd83; --loot-text: #75501b; --loot-halo: 62px; --loot-beam: 86px; --loot-glow: .78;
}

.br-rarity-guide .br-rarity-tier {
  overflow: hidden;
  border: 1px solid var(--rarity-line);
  border-radius: 9px;
  background: #fdfbf5;
}

.br-rarity-guide figure { margin: 0; }

.br-rarity-guide .br-rarity-scene {
  position: relative;
  isolation: isolate;
  height: 112px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 79%, #57705255, transparent 65%),
    repeating-linear-gradient(155deg, #c7d4a709 0 1px, transparent 1px 10px),
    linear-gradient(165deg, #203a3b, #142f2b 60%, #243c34);
}

.br-rarity-guide .br-rarity-scene img {
  position: absolute;
  z-index: 2;
  bottom: 24px;
  left: 50%;
  width: 37px;
  height: 37px;
  object-fit: contain;
  transform: translateX(-50%);
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 2px #081915);
}

.br-rarity-guide .br-rarity-halo {
  position: absolute;
  z-index: 1;
  bottom: 20px;
  left: 50%;
  width: var(--loot-halo);
  height: 14px;
  transform: translateX(-50%);
  border: 1px solid var(--loot-light);
  border-radius: 50%;
  background: var(--loot-light);
  box-shadow: 0 0 17px var(--loot-light);
  opacity: .83;
}

.br-rarity-guide .br-rarity-halo::after {
  content: "";
  position: absolute;
  inset: 2px 4px;
  border-radius: 50%;
  background: #183c35;
  opacity: .65;
}

.br-rarity-guide .br-rarity-legendary .br-rarity-halo::before {
  content: "";
  position: absolute;
  inset: -4px -9px;
  border: 1px solid var(--loot-light);
  border-radius: 50%;
}

.br-rarity-guide .br-rarity-beam {
  position: absolute;
  bottom: 27px;
  left: 50%;
  width: 28px;
  height: var(--loot-beam);
  transform: translateX(-50%);
  background: linear-gradient(0deg, var(--loot-light) 14%, transparent);
  clip-path: polygon(5% 100%, 41% 0, 59% 0, 95% 100%);
  opacity: var(--loot-glow);
}

.br-rarity-guide .br-rarity-tier figcaption {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 10px 9px 11px;
  border-top: 2px solid var(--loot-light);
  line-height: 1.35;
}

.br-rarity-guide .br-rarity-tier h4,
.br-rarity-guide .br-rarity-tip h4 {
  margin: 0;
  color: var(--rarity-ink);
  font-size: 16px;
  line-height: 1.23;
}

.br-rarity-guide .br-rarity-tier figcaption > span {
  color: var(--loot-text);
  font-size: 11px;
  font-weight: 700;
}

.br-rarity-guide .br-rarity-tier p,
.br-rarity-guide .br-rarity-tip p {
  margin: 0;
  color: var(--rarity-muted);
  font-size: 12px;
  line-height: 1.44;
}

.br-rarity-guide .br-rarity-tip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr));
  gap: 8px;
}

.br-rarity-guide .br-rarity-tip > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 13px;
  border: 1px solid var(--rarity-line);
  border-radius: 8px;
  background: #edf4f4;
}

.br-rarity-guide .br-rarity-tip .br-rarity-mimic {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  border-color: #e1d5b8;
  background: #faf3e3;
}

.br-rarity-guide .br-rarity-mimic img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  image-rendering: pixelated;
}

.br-rarity-guide .br-rarity-mimic p { margin-block: 4px 6px; }

.br-rarity-guide .br-rarity-mimic a.br-rarity-link {
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #215c83;
  font-size: 12px;
  font-weight: 700;
  text-align: start;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.br-rarity-guide .br-rarity-rules {
  margin-top: 10px;
  padding: 10px 13px;
  border: 1px solid var(--rarity-line);
  border-radius: 8px;
  background: #fdfbf5;
}

.br-rarity-guide .br-rarity-rules summary {
  color: #215c83;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.br-rarity-guide .br-rarity-rules ul {
  display: grid;
  gap: 6px;
  margin: 9px 0 2px;
  padding-inline-start: 18px;
  color: var(--rarity-muted);
  font-size: 13px;
  line-height: 1.5;
}

@container br-rarity (max-width: 585px) {
  .br-rarity-guide .br-rarity-tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .br-rarity-guide .br-rarity-legendary {
    grid-column: 1 / -1;
  }

  .br-rarity-guide .br-rarity-legendary figure {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 112px;
  }

  .br-rarity-guide .br-rarity-legendary .br-rarity-scene {
    height: auto;
  }

  .br-rarity-guide .br-rarity-legendary figcaption {
    align-content: center;
    border-top: 0;
    border-inline-start: 2px solid var(--loot-light);
  }
}

@container br-rarity (max-width: 440px) {
  .br-rarity-hero::after {
    background: linear-gradient(90deg, #132f37f5 2%, #16333cda 65%, #17353c8c);
  }
}