/* Badges tab (bg-*): the trophy case, shelves of corner-cut plates each holding a badge's banner (core.js banner,
   .j-banner in journey.css), and the side column (collection count, spotlight, closest next). Prestige hooks:
   [data-prestige] on each .bg-plate, .bg-frame and .j-banner, the empty .j-banner__trim layer, and --bg-rim (the
   frame's metal), which a prestige level can set on .bg-frame[data-prestige]. */

.bg {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}

.bg-side {
  display: grid;
  gap: 16px;
  min-width: 0;
}

/* ---------- Collection board ---------- */

.bg-board {
  min-height: 460px;
}

/* ---------- Shelves ---------- */

.bg-case {
  display: grid;
  gap: 22px;
  margin-top: 6px;
}

.bg-shelf__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-muted);
}

.bg-shelf--owned .bg-shelf__title {
  color: var(--j-gold-200);
}

/* The count on a small keycap. */
.bg-shelf__count {
  min-width: 26px;
  padding: 2px 7px 3px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(var(--j-white-rgb), 0.1), rgba(var(--j-white-rgb), 0.02)), var(--j-coal-700);
  box-shadow: inset 0 1px 0 rgba(var(--j-white-rgb), 0.18), 0 2px 0 var(--j-coal-950);
  font-family: var(--j-display);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-align: center;
  color: var(--j-text);
}

.bg-shelf--owned .bg-shelf__count {
  color: var(--j-gold-50);
  box-shadow: inset 0 1px 0 rgba(var(--j-white-rgb), 0.18), 0 2px 0 var(--j-coal-950), 0 3px 0 rgba(var(--j-gold-rgb), 0.35);
}

.bg-shelf__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--j-line-mid), rgba(var(--j-white-rgb), 0));
}

.bg-shelf--owned .bg-shelf__rule {
  background: linear-gradient(90deg, rgba(var(--j-gold-rgb), 0.45), rgba(var(--j-gold-rgb), 0));
}

/* Earned plates are the largest. */
.bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 18px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bg-shelf--owned .bg-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.bg-hint {
  margin: 18px 0 0;
  text-align: center;
  color: var(--j-dim);
}

/* ---------- Plates ---------- */

.bg-plate {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform var(--j-dur) var(--j-ease-out);
  animation: j-reveal 0.5s var(--j-ease-out) backwards;
  animation-delay: var(--d, 0ms);
}

/* Hover only where there is a pointer, so a tapped plate on a phone does not stay lifted. */
@media (hover: hover) {
  .bg-plate:hover {
    transform: translateY(-4px);
  }

  .bg-plate:hover .bg-frame::before {
    opacity: 0.85;
  }
}

.bg-plate:focus-visible {
  outline: none;
}

.bg-plate__name {
  margin-top: 6px;
  font-family: var(--j-display);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--j-text);
}

.bg-plate--owned .bg-plate__name {
  font-size: 15.5px;
  color: var(--j-gold-50);
}

.bg-plate--locked .bg-plate__name {
  color: var(--j-muted);
}

.bg-plate__note {
  font-size: 11px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-dim);
}

.bg-plate--owned .bg-plate__note {
  color: var(--j-gold-300);
}

.bg-plate--near .bg-plate__note {
  font-family: var(--j-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--j-gold-100);
}

/* ---------- Frame: the corner-cut square, rimmed 2px in --bg-rim, a gunmetal face holding the banner ---------- */

.bg-frame {
  --frame: polygon(12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%);
  --bg-rim: linear-gradient(160deg, rgba(var(--j-white-rgb), 0.22), rgba(var(--j-white-rgb), 0.06) 50%, rgba(var(--j-white-rgb), 0.14));
  --bg-face:
    linear-gradient(160deg, rgba(var(--j-white-rgb), 0.1), rgba(var(--j-white-rgb), 0) 40%),
    radial-gradient(closest-side at 50% 45%, var(--j-coal-700), var(--j-coal-900));
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 2px;
  clip-path: var(--frame);
  background: var(--bg-rim);
}

/* Hover and focus light the rim gold (a bright rim layer fading in under the face). */
.bg-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--j-gold-25), var(--j-gold-200) 50%, var(--j-gold-400));
  opacity: 0;
  transition: opacity var(--j-dur-fast) var(--j-ease-std);
}

.bg-plate:focus-visible .bg-frame::before {
  opacity: 0.85;
}

.bg-frame--near {
  --bg-rim: linear-gradient(160deg, rgba(var(--j-gold-rgb), 0.5), rgba(var(--j-gold-rgb), 0.14) 50%, rgba(var(--j-gold-rgb), 0.32));
}

.bg-frame--owned {
  --bg-rim: var(--j-metal-gold);
  --bg-face:
    linear-gradient(160deg, rgba(var(--j-white-rgb), 0.14), rgba(var(--j-white-rgb), 0) 40%),
    radial-gradient(closest-side at 50% 42%, rgba(var(--j-gold-rgb), 0.32), rgba(var(--j-gold-rgb), 0.08) 65%, rgba(var(--j-gold-rgb), 0)),
    radial-gradient(closest-side at 50% 45%, var(--j-coal-700), var(--j-coal-900));
}

.bg-frame--locked {
  --bg-face:
    linear-gradient(160deg, rgba(var(--j-white-rgb), 0.06), rgba(var(--j-white-rgb), 0) 40%),
    radial-gradient(closest-side at 50% 45%, var(--j-coal-750), var(--j-coal-950));
}

.bg-plate.is-picked .bg-frame {
  --bg-rim: linear-gradient(160deg, var(--j-gold-25), var(--j-gold-200) 50%, var(--j-gold-400));
}

/* The face's size is the banner's reference (cqw), so the banner scales with the plate. */
.bg-frame__face {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: var(--frame);
  container-type: inline-size;
  background: var(--bg-face);
}

/* The banner hangs from the top of the face, half its width. */
.bg-frame .j-banner {
  --bw: 50cqw;
  margin-top: 9cqw;
}

/* The face already glows gold behind an owned banner. */
.bg-frame .j-banner--owned::after {
  opacity: 0.6;
}

/* Not started: a silhouette with a faint rim of light. */
.bg-frame .j-banner--locked .j-banner-img {
  opacity: 0.65;
  filter: brightness(0) drop-shadow(0 0 1px rgba(var(--j-white-rgb), 0.28));
}

/* Owned: a slow light crossing the face every 8 seconds, staggered by the plate's entry delay. */
.bg-frame__sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(105deg, rgba(var(--j-white-rgb), 0) 38%, rgba(var(--j-white-rgb), 0.16) 50%, rgba(var(--j-white-rgb), 0) 62%);
  opacity: 0;
  transform: translateX(-110%);
  pointer-events: none;
}

.bg-frame--owned .bg-frame__sheen {
  opacity: 1;
  animation: bg-sheen 8s ease-in-out infinite;
  animation-delay: calc(var(--d, 0ms) * 9);
}

@keyframes bg-sheen {
  0%, 70% { transform: translateX(-110%); }
  92%, 100% { transform: translateX(110%); }
}

/* Firefox runs a moving transform on the compositor only when nothing above it has a clip-path, and does not retry one
   it refused (journey.css, the banner sway). So in Firefox the rim and the face are octagons on layers behind the
   banner instead of clips around it, which lets the banner sway (--j-banner-sway). The light cannot cross the face
   without a clip above it, so there it glows in place, cut to the face. */
@supports (-moz-appearance: none) {
  .bg-frame {
    --j-banner-sway: j-banner-sway;
    isolation: isolate;
    clip-path: none;
    background: none;
  }

  .bg-frame::before,
  .bg-frame::after,
  .bg-frame__face::before {
    z-index: -1;
    clip-path: var(--frame);
  }

  .bg-frame::after,
  .bg-frame__face::before {
    content: "";
    position: absolute;
    inset: 0;
  }

  .bg-frame::after {
    z-index: -2;
    background: var(--bg-rim);
  }

  .bg-frame__face {
    isolation: isolate;
    overflow: visible;
    clip-path: none;
    background: none;
  }

  .bg-frame__face::before {
    background: var(--bg-face);
  }

  .bg-frame__sheen {
    clip-path: var(--frame);
    transform: none;
  }

  .bg-frame--owned .bg-frame__sheen {
    opacity: 0;
    animation-name: bg-sheen-glow;
  }
}

@keyframes bg-sheen-glow {
  0%, 70%, 92%, 100% { opacity: 0; }
  81% { opacity: 1; }
}

/* In progress: a bar along the foot of the face. */
.bg-frame__meter {
  position: absolute;
  right: 16%;
  bottom: 9%;
  left: 16%;
  z-index: 2;
}

.bg-frame__meter .bg-bar {
  height: 3px;
  background: rgba(var(--j-white-rgb), 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .bg-frame--owned .bg-frame__sheen { display: none; }
  .bg-plate:hover { transform: none; }
  .bg-frame::before { transition: none; }
}

/* ---------- Bars ---------- */

.bg-bar {
  position: relative;
  display: block;
  height: 4px;
  background: rgba(var(--j-white-rgb), 0.07);
  overflow: hidden;
}

.bg-bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--j-fill-gold);
  box-shadow: var(--j-bar-edge);
  transform-origin: left;
  animation: j-grow 0.9s var(--j-ease) both;
}

/* ---------- Tooltip (a plate's hover card, inside .j-tip) ---------- */

.j-tip .bg-tip__status {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-muted);
}

.j-tip .bg-tip__status.is-owned {
  color: var(--j-gold-200);
}

.j-tip .bg-bar {
  margin-bottom: 8px;
}

.j-tip .bg-tip__how {
  display: block;
  color: var(--j-text-2);
}

/* ---------- Collection count ---------- */

.bg-count__big {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 4px 0 12px;
}

.bg-count__big b {
  font-family: var(--j-display);
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
  color: var(--j-gold-50);
}

.bg-count__big span {
  font-family: var(--j-display);
  font-size: 22px;
  color: var(--j-muted);
}

.bg-count__big small {
  margin-left: 4px;
  font-size: 11px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-muted);
}

.bg-count__note {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--j-muted);
}

.bg-count__note span {
  color: var(--j-dim);
}

/* ---------- Spotlight ---------- */

.bg-spot {
  scroll-margin-top: calc(var(--j-topbar-h) + 34px);
}

/* The spotlight's framed banner sits top right, beside the heading and text. */
.bg-spot {
  position: relative;
}

.bg-spot__art {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 120px;
}

.bg-spot .j-head,
.bg-spot__text {
  margin-right: 136px;
}

.bg-spot__text {
  min-height: 92px;
}

.bg-spot__why {
  margin: 0 0 8px;
  color: var(--j-dim);
}

.bg-spot__status {
  margin: 0;
  color: var(--j-muted);
}

.bg-spot__status.is-owned {
  color: var(--j-gold-300);
}

.bg-spot__name {
  margin: 4px 0 6px;
  font-family: var(--j-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: var(--j-track-title);
  color: var(--j-gold-50);
}

.bg-spot__rarity {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--j-gold-200);
}

.bg-spot__how {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--j-text-2);
}

/* Arena Season God: the ten tier banners, lit up to the tier held. */
.bg-ladder {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  margin: 16px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--j-line-soft);
  list-style: none;
}

.bg-ladder li {
  display: grid;
  place-items: center;
}

.bg-ladder img {
  width: 100%;
  max-width: 28px;
  height: auto;
  opacity: 0.28;
  filter: grayscale(1);
}

.bg-ladder li.is-reached img {
  opacity: 0.85;
  filter: none;
}

.bg-ladder li.is-current img {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(var(--j-gold-rgb), 0.65));
}

.bg-metric {
  margin-top: 14px;
}

.bg-metric > p {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 6px;
  font-size: 12.5px;
  color: var(--j-text-2);
}

.bg-metric > p b {
  font-family: var(--j-display);
  font-size: 16px;
  font-weight: 400;
  color: var(--j-gold-50);
}

.bg-metric > p small {
  font-size: 12px;
  color: var(--j-dim);
}

.bg-champs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 0;
}

.bg-champs img {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(var(--j-gold-rgb), 0.35);
}

/* ---------- Closest next ---------- */

.bg-next__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bg-next__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 8px 8px 6px;
  border: 0;
  border-bottom: 1px solid var(--j-line-soft);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bg-next__row img {
  width: 34px;
  height: 50px;
  object-fit: contain;
  opacity: 0.75;
}

.bg-next__text {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.bg-next__name {
  overflow: hidden;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--j-text);
}

.bg-next__pct {
  font-family: var(--j-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--j-gold-100);
}

/* ---------- Layout ---------- */

@media (max-width: 1280px) {
  .bg { grid-template-columns: minmax(0, 1fr) 300px; }
  .bg-spot__art { width: 104px; }
  .bg-spot .j-head, .bg-spot__text { margin-right: 120px; }
}

/* One column: count, spotlight, the case, then closest next. */
@media (max-width: 1100px) {
  .bg { display: flex; flex-direction: column; align-items: stretch; }
  .bg-side { display: contents; }
  .bg-count { order: 1; }
  .bg-spot { order: 2; }
  .bg-board { order: 3; min-height: 0; }
  .bg-next { order: 4; }
}

/* Phones: three plates to a row. */
@media (max-width: 520px) {
  .bg-grid,
  .bg-shelf--owned .bg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
  .bg-plate__name { font-size: 12.5px; }
  .bg-plate--owned .bg-plate__name { font-size: 14.5px; }
  .bg-plate__note { font-size: 10px; letter-spacing: 0.1em; }
  .bg-spot__art { width: 88px; top: 14px; right: 14px; }
  .bg-spot .j-head, .bg-spot__text { margin-right: 100px; }
  .bg-spot__name { font-size: 19px; }
  .bg-count__big b { font-size: 40px; }
  .bg-hint { display: none; }
}