/* =========================================================================
   NOBP 504 — Bounce Legends
   -------------------------------------------------------------------------
   The card set. Tokens all come from nobp.css; nothing new is invented here
   except the cardboard stock on the back of a card, which has no equivalent
   anywhere else on the station.

   The grid is deliberately SIX slots on desktop (3 x 2). Five cards plus the
   one still coming reads as a set with a gap in it, which is how a card
   collection is supposed to feel. When the sixth lands, nothing changes.
   ========================================================================= */

/* ── hero ─────────────────────────────────────────────────────────────
   The cards are the loudest thing on this page and they should be — six
   gold foil trading cards is a lot of gold. So the hero's job is to be
   QUIET. The first pass put a warm bloom behind the logo and it turned
   the whole top of the page into gold-on-gold-on-gold competing with the
   grid below. What sits behind the logo now is the opposite: a soft DARK
   pool that mutes the station's watermark so the mark has clean air
   around it, and nothing else.

   The size is held down for the same reason. At 440px the logo reads as
   a mark rather than a banner, and the cards start high enough that the
   page has somewhere to go the moment it loads.
   ------------------------------------------------------------------- */
.legends-hero {
  position: relative;
  padding: clamp(44px, 8vh, 96px) 0 clamp(30px, 5vh, 56px);
  text-align: center;
}
/* .section below brings its own top padding; on a phone the two stack up
   into a visible hole between the meta line and the first card. */
@media (max-width: 720px) {
  .legends-hero { padding-top: clamp(30px, 5vh, 52px); padding-bottom: 6px; }
  .legends-hero + .section { padding-top: clamp(20px, 3vh, 30px); }
}
.legends-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(1080px, 140vw);
  height: 100%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 62% 78% at 50% 42%,
    rgba(5, 5, 5, 0.94) 0%,
    rgba(5, 5, 5, 0.82) 42%,
    rgba(5, 5, 5, 0.42) 68%,
    rgba(5, 5, 5, 0) 84%);
  pointer-events: none;
}
.legends-logo {
  position: relative;
  margin: 0;
  line-height: 0;              /* an <img> in an h1 otherwise inherits leading */
  font-size: 0;
}
.legends-logo img {
  display: inline-block;
  width: clamp(230px, 40vw, 440px);
  height: auto;
  /* The artwork carries its own bevel; this is only the shadow it would
     cast on the surface it is sitting on. */
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.7));
}
.legends-tag {
  position: relative;
  margin: clamp(20px, 3.2vh, 32px) auto 0;
  /* Wide enough to hold the whole sentence on one line on a laptop. At
     34ch it broke as "It came / off a block", which reads like a mistake.
     Below ~560px it wraps, and the <br> in the markup puts that break
     after the full stop where it belongs. */
  max-width: 58ch;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  color: #cfc8b8;
  text-wrap: balance;
}
/* The break only exists once there isn't room for one line. */
.legends-tag br { display: none; }
@media (max-width: 560px) { .legends-tag br { display: inline; } }

/* A rule on each side of the line instead of under it: it closes the
   hero off without drawing a full-width band across the page. */
.legends-meta {
  position: relative;
  margin: clamp(18px, 2.8vh, 28px) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-family: ui-monospace, 'IBM Plex Mono', SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8d867a;
  white-space: nowrap;
}
.legends-meta::before,
.legends-meta::after {
  content: "";
  width: clamp(26px, 7vw, 84px);
  height: 1px;
  background: linear-gradient(to right, rgba(217,166,46,0), rgba(217,166,46,0.5));
}
.legends-meta::after { background: linear-gradient(to left, rgba(217,166,46,0), rgba(217,166,46,0.5)); }
.legends-meta i {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold); opacity: 0.7; flex-shrink: 0;
}
/* On a phone the three items plus two rules run the full width and the
   text ends up touching the gutter. Drop the rules — there is no room for
   them to read as rules anyway — and let the line wrap instead. */
@media (max-width: 560px) {
  .legends-meta { white-space: normal; flex-wrap: wrap; gap: 9px; font-size: 9.5px; letter-spacing: 0.18em; }
  .legends-meta::before, .legends-meta::after { display: none; }
}

/* ── closing note ─────────────────────────────────────────────────────
   The context paragraph used to sit above the grid, between the visitor
   and the cards. Nobody arrives at a page of legends to read a preamble.
   It reads better here, after they have been through the set.
   ------------------------------------------------------------------- */
.legends-outro {
  max-width: 62ch;
  margin: clamp(46px, 7vh, 82px) auto 0;
  text-align: center;
}
.legends-outro-lede {
  margin: 0 0 26px;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.7;
  color: var(--muted);
}

/* ── the set ──────────────────────────────────────────────────────────── */
.legend-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
}
@media (max-width: 900px) { .legend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .legend-grid { grid-template-columns: 1fr; } }

.legend-card {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  border-radius: var(--r-md); overflow: hidden;
  /* The artwork is 1060 x 1484 — hold the slot before the image lands so the
     grid never reflows underneath a reader mid-scroll. */
  aspect-ratio: 1060 / 1484;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.legend-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.legend-card:hover,
.legend-card:focus-visible { transform: translateY(-8px); box-shadow: 0 22px 46px rgba(0, 0, 0, 0.66); }
.legend-card:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 5px; }

/* the empty slot for the card that hasn't been made yet */
.legend-slot {
  aspect-ratio: 1060 / 1484;
  border-radius: var(--r-md);
  border: 1px dashed rgba(217, 166, 46, 0.34);
  background:
    repeating-linear-gradient(135deg,
      rgba(217,166,46,0.035) 0 14px, transparent 14px 28px),
    var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px;
}
.legend-slot b {
  font-family: var(--font-display); font-size: 20px; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(217, 166, 46, 0.62); font-weight: 600;
}
.legend-slot span { font-size: 13px; color: #6f6a60; line-height: 1.5; max-width: 22ch; }

/* ── the credit line ──────────────────────────────────────────────────── */
.legend-credit {
  margin-top: 0; padding: 16px 18px;
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: rgba(217, 166, 46, 0.045);
  font-size: 13px; line-height: 1.65; color: #8d867a; text-align: left;
}
.legend-credit b { color: var(--cream); font-weight: 600; }

/* ── full-screen card ─────────────────────────────────────────────────── */
.legend-view[hidden] { display: none; }
.legend-view {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 3vw, 40px);
}
.legend-scrim {
  position: absolute; inset: 0; border: 0; margin: 0; padding: 0;
  background: rgba(4, 4, 4, 0.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  cursor: zoom-out;
}
.legend-stage {
  position: relative; display: flex; align-items: center;
  gap: clamp(12px, 2.6vw, 34px);
  max-width: 100%; max-height: 100%;
}
.legend-flipper {
  /* Height-led so a tall card never overflows a short window; the width
     follows from the ratio. min() against vw keeps it inside narrow phones. */
  height: min(84vh, 880px);
  width: min(calc(84vh * 1060 / 1484), calc(100vw - 40px), 630px);
  perspective: 2200px;
  flex-shrink: 1;
}
.legend-3d {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 700ms var(--ease);
}
.legend-view[data-face="back"] .legend-3d { transform: rotateY(180deg); }
.legend-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.78);
}
.legend-face--front img { display: block; width: 100%; height: 100%; object-fit: contain; }
.legend-face--back {
  transform: rotateY(180deg);
  background: linear-gradient(172deg, #ece2c6 0%, #ddd1b0 100%);
  border: 1px solid var(--gold-deep);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), 0 40px 90px rgba(0,0,0,0.78);
  color: #16130a;
  padding: clamp(18px, 3.4vh, 34px) clamp(18px, 3vw, 36px);
  display: flex; flex-direction: column; gap: clamp(9px, 1.6vh, 17px);
  overflow-y: auto;
}
.lb-rule { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lb-rule--top { border-bottom: 3px solid #16130a; padding-bottom: clamp(7px, 1.2vh, 11px); }
.lb-rule--bot { border-top: 3px solid #16130a; padding-top: clamp(7px, 1.2vh, 11px); margin-top: auto; }
.lb-mono {
  font-family: ui-monospace, 'IBM Plex Mono', SFMono-Regular, Menlo, monospace;
  font-size: clamp(9px, 1.35vh, 12px); letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600;
}
.legend-face--back h2 {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 4.6vh, 44px); line-height: 1.02; text-transform: uppercase;
}
.lb-govt { margin: 5px 0 0; font-size: clamp(12px, 1.7vh, 15px); font-style: italic; color: #4a422c; }
.lb-stats {
  margin: 0; display: grid; grid-template-columns: max-content 1fr;
  gap: clamp(4px, 0.9vh, 8px) clamp(12px, 1.6vw, 18px);
  border-top: 1px solid rgba(22,19,10,0.24); border-bottom: 1px solid rgba(22,19,10,0.24);
  padding: clamp(9px, 1.7vh, 16px) 0;
}
.lb-stats dt {
  font-family: ui-monospace, 'IBM Plex Mono', SFMono-Regular, Menlo, monospace;
  font-size: clamp(9px, 1.3vh, 12.5px); letter-spacing: 0.1em; text-transform: uppercase;
  color: #6b5f3d; font-weight: 600;
}
.lb-stats dd {
  margin: 0;
  font-family: ui-monospace, 'IBM Plex Mono', SFMono-Regular, Menlo, monospace;
  font-size: clamp(9.5px, 1.35vh, 13.5px); font-weight: 500; color: #16130a;
}
.lb-story { margin: 0; font-size: clamp(12px, 1.85vh, 16px); line-height: 1.58; color: #2b2515; }
.lb-mem { color: #8c2f1d; font-weight: 700; }
.lb-mem--none { color: #6b5f3d; }
.lb-sig {
  font-family: var(--font-display); font-size: clamp(10px, 1.5vh, 14px);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600;
}

/* controls */
.legend-ctl {
  width: 54px; height: 54px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(217, 166, 46, 0.44);
  background: rgba(13, 13, 13, 0.9); color: var(--gold-bright);
  cursor: pointer; transition: background 180ms var(--ease), color 180ms var(--ease);
}
.legend-ctl:hover { background: var(--gold); color: #16130a; border-color: var(--gold); }
.legend-ctl:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; }
.legend-ctl svg { width: 22px; height: 22px; }

.legend-under {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(-1 * clamp(52px, 8vh, 70px));
  display: flex; align-items: center; gap: 16px; white-space: nowrap;
}
.legend-pos {
  font-family: ui-monospace, 'IBM Plex Mono', SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #8d867a;
}
.legend-close {
  position: fixed; top: 22px; right: 22px; width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(247, 240, 223, 0.3); background: rgba(13, 13, 13, 0.88);
  color: var(--cream); cursor: pointer; z-index: 2;
}
.legend-close:hover { background: var(--cream); color: var(--black); }
.legend-close:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; }
.legend-close svg { width: 20px; height: 20px; }

/* On a phone the side arrows steal width the card needs, so they drop under
   it and join the flip button in one thumb-reachable row. */
@media (max-width: 720px) {
  .legend-stage { flex-direction: column; gap: 0; }
  .legend-stage > .legend-ctl { display: none; }
  .legend-flipper { height: min(66vh, 620px); width: min(calc(66vh * 1060 / 1484), calc(100vw - 32px)); }
  .legend-under { position: static; transform: none; margin-top: 18px; gap: 12px; flex-wrap: wrap; justify-content: center; }
  .legend-under .legend-ctl { display: flex; width: 46px; height: 46px; }
}
@media (min-width: 721px) { .legend-under .legend-ctl { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .legend-3d, .legend-card { transition: none; }
}