/*
 * Fishdle landing page (ROADMAP #48) — served at `/`, the game lives at `/play`.
 *
 * Deliberately plain CSS, not Tailwind: this page is static HTML generated by
 * `landing/build.mjs` and must stay indexable without running any JavaScript,
 * so it carries its own stylesheet instead of entering the app's build graph.
 * The tokens below mirror `src/index.css` / `src/palette.ts`, dropped one stop
 * deeper so the in-game captures read as lit windows onto the water.
 */

:root {
  --abyss: #0a1216;
  --sea: #101c22;
  --parchment: #e7d9b6;
  --ink: #b9c9d1; /* neutral, biased toward the sea, never grey */
  --ink-dim: #7d939d;
  --gold: #caa46a;
  --coin: #e0c46a;
  --rule: rgba(202, 164, 106, 0.24);
  --rule-soft: rgba(231, 217, 182, 0.1);

  --display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --data: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  --shell: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--abyss);
}

.page {
  background: var(--abyss);
  color: var(--parchment);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

.page h1,
.page h2,
.page h3 {
  font-family: var(--display);
  font-optical-sizing: auto;
  text-wrap: balance;
  margin: 0;
}

.page a {
  color: inherit;
}

.page img {
  display: block;
  max-width: 100%;
}

.page :focus-visible {
  outline: 2px solid var(--coin);
  outline-offset: 3px;
}

.shell {
  width: min(var(--shell), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.eyebrow {
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

/* ---------- top bar ------------------------------------------------------ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 13px var(--gutter);
  background: rgba(10, 18, 22, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-soft);
}

.mark {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-right: auto;
}

.mark img {
  width: 30px;
  height: 30px;
}

.mark span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.22em;
  color: var(--parchment);
}

.topnav {
  display: flex;
  gap: 24px;
  font-size: 14px;
  color: var(--ink);
}

.topnav a {
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}

.topnav a:hover {
  color: var(--parchment);
  border-color: var(--rule);
}

.langs {
  display: flex;
  gap: 2px;
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.langs a {
  border: 1px solid transparent;
  color: var(--ink-dim);
  padding: 3px 7px;
  border-radius: 3px;
  text-decoration: none;
}

.langs a[aria-current='true'] {
  color: var(--parchment);
  border-color: var(--rule);
}

/* The phone's dropdown: five inline codes push the buttons off a 360px bar. */
.langs select {
  display: none;
  font: inherit;
  letter-spacing: inherit;
  color: var(--parchment);
  background: rgba(10, 18, 22, 0.9);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 4px 6px;
}

@media (max-width: 640px) {
  .langs a {
    display: none;
  }
  .langs select {
    display: block;
  }
  /* 360px holds the mark, the dropdown and ONE button; the hero repeats the CTAs. */
  .topbar {
    gap: 12px;
  }
  .mark {
    flex-shrink: 0;
    gap: 8px;
  }
  .mark span {
    font-size: 17px;
    letter-spacing: 0.14em;
  }
  .page .topbar .btn-primary {
    display: none;
  }
  .page .topbar .btn {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* Scoped with `.page` so these out-specify `.page a { color: inherit }` —
   without it the primary CTA takes the parchment ink and washes out. */
.page .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: 140ms ease;
  white-space: nowrap;
}

.page .btn-primary {
  background: var(--coin);
  color: #22190a;
}

.page .btn-primary:hover {
  background: #efd583;
  transform: translateY(-1px);
}

.page .btn-ghost {
  border-color: var(--rule);
  color: var(--parchment);
  background: rgba(231, 217, 182, 0.03);
}

.page .btn-ghost:hover {
  border-color: var(--gold);
  background: rgba(202, 164, 106, 0.1);
}

.page .btn svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* ---------- hero ---------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
}

.hero-stage {
  position: relative;
  height: clamp(540px, 84vh, 880px);
  background: var(--sea);
}

.hero-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  opacity: 0;
  transition: opacity 1400ms ease-in-out;
}

.hero-stage img.on {
  opacity: 1;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(10, 18, 22, 0.68) 0%,
      rgba(10, 18, 22, 0.16) 34%,
      rgba(10, 18, 22, 0.84) 82%,
      var(--abyss) 100%
    ),
    linear-gradient(to right, rgba(10, 18, 22, 0.82) 0%, rgba(10, 18, 22, 0.1) 62%);
}

.hero-copy {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: clamp(48px, 8vh, 92px);
}

/* Wide enough that the second headline line never orphans its last word. */
.hero-copy .inner {
  max-width: 860px;
}

.hero h1 {
  font-weight: 700;
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 16px 0 18px;
  text-shadow: 0 3px 26px rgba(0, 0, 0, 0.6);
}

.hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--coin);
}

.hero p.lede {
  font-size: clamp(16px, 1.7vw, 19px);
  color: var(--ink);
  max-width: 54ch;
  margin: 0 0 28px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.hero-note {
  font-size: 13px;
  color: var(--ink-dim);
  margin: 18px 0 0;
}

.hero-note b {
  color: var(--parchment);
  font-weight: 600;
}

/* the game's own header readout, following the backdrop */
.readout {
  position: absolute;
  z-index: 2;
  top: 24px;
  right: var(--gutter);
  display: flex;
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(10, 18, 22, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.readout span {
  padding: 8px 13px;
  color: var(--ink);
  border-left: 1px solid var(--rule-soft);
}

.readout span:first-child {
  border-left: 0;
  color: var(--coin);
}

/* ---------- alternating story sections ------------------------------------ */
.band {
  border-top: 1px solid var(--rule-soft);
}

.band.dark {
  background: var(--sea);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
  padding: clamp(64px, 9vh, 116px) 0;
}

.split.flip .copy {
  order: 2;
}

.copy h2 {
  font-size: clamp(28px, 3.7vw, 42px);
  font-weight: 700;
  letter-spacing: -0.018em;
  margin: 14px 0 16px;
}

.copy > p {
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 52ch;
}

.copy .points {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

.copy .points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  font-size: 15.5px;
  color: var(--ink);
}

.copy .points b {
  color: var(--parchment);
  font-weight: 700;
}

.copy .points .tick {
  color: var(--gold);
  font-family: var(--data);
}

.shot {
  border: 1px solid var(--rule-soft);
  box-shadow: 0 30px 64px rgba(0, 0, 0, 0.5);
}

.shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

figure {
  margin: 0;
}

figcaption {
  margin-top: 10px;
  font-family: var(--data);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ---------- the technique list ----------------------------------------------- */
/* Rows, not a triptych: inside a half-width column three tiles squeeze to ~90px
   and the icons stop reading. */
.techs {
  display: grid;
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}

.tech {
  background: var(--sea);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 20px;
  align-items: center;
}

.tech img {
  width: 62px;
  height: 62px;
}

.tech h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 3px;
}

.tech p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink);
}

/* ---------- closing -------------------------------------------------------------- */
.closing {
  text-align: center;
  padding: clamp(80px, 12vh, 140px) 0;
}

.closing h2 {
  font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 12px 0 14px;
}

.closing p {
  color: var(--ink);
  max-width: 50ch;
  margin: 0 auto 30px;
}

.closing .hero-actions {
  justify-content: center;
}

/* ---------- footer ---------------------------------------------------------------- */
.foot {
  border-top: 1px solid var(--rule-soft);
  padding: 40px var(--gutter) 56px;
  background: var(--sea);
}

.foot-in {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: center;
  max-width: var(--shell);
  margin-inline: auto;
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 14px;
  color: var(--ink);
  margin-right: auto;
}

.foot nav a {
  text-decoration: none;
}

.foot nav a:hover {
  color: var(--parchment);
}

.foot .fine {
  font-size: 12.5px;
  color: var(--ink-dim);
  flex-basis: 100%;
  max-width: 74ch;
}

/* Active fishers, beside the wordmark — filled by landing.js, hidden until the count
   arrives. It takes over the wordmark's auto margin so the pair stays on the left. */
.live {
  margin-right: auto;
}

@media (min-width: 641px) {
  .mark:has(+ .live:not([hidden])) {
    margin-right: 0;
  }
}

/* The phone topbar has no room left beside the language links and the button. */
@media (max-width: 640px) {
  .live {
    display: none;
  }
}

.live[hidden] {
  display: none;
}

.live b {
  color: var(--parchment);
  font-weight: 600;
}

.live i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: #6fcf8e;
  vertical-align: 1px;
  animation: live-pulse 2.4s ease-in-out infinite;
}

@keyframes live-pulse {
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live i {
    animation: none;
  }
}

/* ROADMAP #52 — pages not written yet, flagged rather than silently dead. */
.todo {
  color: var(--coin);
  border-bottom: 1px dashed var(--gold);
}

/* ---------- legal / credits pages ----------------------------------------------------- */
/* Long-form reading, so the measure is the constraint: one narrow column, the
   type scale of the landing kept, nothing else on the page to look at. */
.doc {
  padding: clamp(48px, 8vh, 96px) 0 clamp(64px, 10vh, 120px);
}

.doc .shell {
  max-width: 72ch;
}

.doc h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 12px 0 10px;
}

.doc-updated {
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 40px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule-soft);
}

.doc-lede {
  font-size: 18.5px;
  color: var(--parchment);
  margin: 0 0 34px;
}

.doc-body h2 {
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.012em;
  margin: 46px 0 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
}

.doc-body h3 {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--gold);
  margin: 28px 0 8px;
}

.doc-body p,
.doc-body li {
  color: var(--ink);
  font-size: 16px;
}

.doc-body p {
  margin: 0 0 16px;
}

.doc-body strong {
  color: var(--parchment);
  font-weight: 700;
}

.doc-body em {
  color: var(--ink-dim);
  font-style: italic;
}

.doc-body ul {
  margin: 0 0 20px;
  padding-left: 22px;
}

.doc-body li {
  margin-bottom: 10px;
}

.doc-body li::marker {
  color: var(--gold);
}

.doc-body a,
.doc-lede a {
  color: var(--coin);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
}

.doc-body a:hover {
  text-decoration-color: var(--coin);
}

/* The Guide du pêcheur's "next chapter" line at the foot of a chapter page. */
.doc-body .doc-next {
  margin-top: 26px;
  font-weight: 700;
}

/* ---------- ambient contour field --------------------------------------------------- */
#contours {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}

.page > *:not(#contours) {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .topnav,
  .readout {
    display: none;
  }

  .split {
    grid-template-columns: 1fr;
    padding: clamp(48px, 8vh, 80px) 0;
  }

  .split.flip .copy {
    order: 0;
  }

  .sheet {
    justify-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page *,
  .tackle img {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- the tournament rod spec sheet ----------------------------------- */
/* A faithful rebuild of the game's own gear card (`hud/GearCard.tsx`): round
   medallion + rarity aura, affixes each in the colour their bonus line uses,
   stars/durability, then label-to-value stat rows. Same tokens as the HUD, so
   the two never drift into "similar but off". */
.sheet {
  display: grid;
  gap: 12px;
  /* Flush RIGHT, not centred: the column is wider than the 400px blocks inside
     it, and the pearl row below runs the full shell — centring left the rod and
     the stat sheet floating short of the last pearl card's edge. Back to centre
     once the split stacks (below), where there is no row to line up with. */
  justify-items: end;
}

.sheet-frame {
  width: min(100%, 400px);
  padding: 22px 22px 20px;
  border: 1px solid rgba(202, 164, 106, 0.34);
  border-radius: 10px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(202, 164, 106, 0.14), transparent 62%),
    linear-gradient(160deg, #16232a 0%, #0d171c 100%);
  box-shadow:
    0 0 24px -18px var(--gold),
    0 26px 56px rgba(0, 0, 0, 0.5);
}

.sheet-head {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  align-items: center;
}

.sheet-name {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
}

.sheet-base {
  color: var(--parchment);
}

/* One colour per affix, shared with its bonus line below — the word and the
   effect it grants must never read as two unrelated things. */
.pfx-powerful {
  color: #e08a5a;
}

.pfx-sturdy {
  color: #7fa8c9;
}

.pfx-lucky {
  color: #6fd88f;
}


.sheet-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}

.sheet-meta .stars {
  color: #e0a84e;
  font-size: 14px;
  letter-spacing: 2px;
}

.sheet-meta .dur {
  font-family: var(--data);
  font-size: 11px;
  color: #5fae7a;
}

.sheet-stats,
.sheet-bonus {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--rule-soft);
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.sheet-stats div,
.sheet-bonus div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sheet-stats dt,
.sheet-bonus dt {
  color: var(--ink-dim);
}

.sheet-stats dd,
.sheet-bonus dd {
  margin: 0;
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
  color: var(--parchment);
}

.sheet-bonus dd {
  color: var(--ink-dim);
  font-family: var(--body);
}

.sheet-bonus dd b {
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  margin-right: 4px;
}


/* ---------- the collection cards --------------------------------------------- */
/* The four rarities on the top row, the two morphs beneath — the shape of one
   collection slot. Straight grid, no fan: six rotated cards is a pile, not a
   ladder you can read. */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0;
  align-items: start;
}

.card-btn {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.card-btn img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5);
  transition: transform 200ms ease;
}

.card-btn:hover img {
  transform: translateY(-6px) scale(1.03);
}

/* Enlarged, the way tapping a card in the keepnet enlarges it. Clicking again
   puts it back — the same toggle however many times you press it. */
.card-zoom {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 0;
  background: rgba(7, 12, 15, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
  animation: zoom-fade 180ms ease-out;
}

.card-zoom img {
  width: auto;
  height: min(74vh, 620px);
  max-width: 92vw;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

@keyframes zoom-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------- the fishing zones ------------------------------------------------ */
/* A 2x2 board of the waters, each with the gate that opens it. The art is the
   game's OWN zone banners (`public/banner/`), not a landing-only copy — one
   fewer picture to keep in step when a zone is repainted. */
.zones {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: clamp(28px, 4vh, 40px) 0 0;
  padding: 0;
  list-style: none;
}

/* The card IS the picture: no text strip under it, the art runs to all four
   edges and the name sits on a gradient burned into the bottom of the image. */
.zones li {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  background: var(--sea);
}

.zone-art {
  position: absolute;
  inset: 0;
  line-height: 0;
}

.zone-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Deep enough at the foot to carry both the name and the gate badge, whatever
   the water underneath happens to be — the cove's turquoise is the hard case. */
.zone-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 34%,
    rgba(7, 13, 17, 0.62) 68%,
    rgba(7, 13, 17, 0.94) 100%
  );
}

/* Name and gate share ONE row rather than being pinned to opposite corners:
   pinned, the two collided as soon as the card narrowed (one column on a phone),
   and a flex row cannot overlap itself. */
.zone-foot {
  position: absolute;
  z-index: 1;
  right: 16px;
  bottom: 15px;
  left: 18px;
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}

.zone-gate {
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(10, 18, 22, 0.6);
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.6;
}

.zones h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  color: var(--parchment);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.zones-more {
  margin: 26px 0 0;
  padding-bottom: clamp(60px, 9vh, 104px);
  text-align: center;
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

@media (max-width: 700px) {
  .zones {
    grid-template-columns: 1fr;
  }

  .zones h3 {
    font-size: 18px;
  }

  .zone-gate {
    font-size: 9px;
    letter-spacing: 0.1em;
  }
}

/* ---------- the roadmap cycle --------------------------------------------------- */
/* A horizontal run of four steps: three candidates, the vote, the winner, the
   next round. The chevrons between them are what say "this repeats". */
.roadmap-head,
.zones-head {
  padding: clamp(60px, 9vh, 104px) 0 0;
  max-width: 62ch;
}

.roadmap-head h2,
.zones-head h2 {
  font-size: clamp(28px, 3.7vw, 42px);
  font-weight: 700;
  letter-spacing: -0.018em;
  margin: 14px 0 16px;
}

.roadmap-lede {
  color: var(--ink);
  margin: 0;
}

.cycle {
  list-style: none;
  margin: clamp(34px, 5vh, 54px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.cycle-step {
  position: relative;
  /* Column + `margin-top: auto` on the art below: the four texts are not the
     same number of lines, so anchoring the hexagon row to the text left it at
     four different heights. Pinned to the foot, the rows read as one line. */
  display: flex;
  flex-direction: column;
  padding: 26px 24px 28px;
  border: 1px solid var(--rule-soft);
  border-right: 0;
  background: linear-gradient(180deg, rgba(22, 35, 42, 0.6), rgba(13, 23, 28, 0.6));
}

.cycle-step:last-child {
  border-right: 1px solid var(--rule-soft);
}

/* The chevron that carries the eye from one step to the next. */
.cycle-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -9px;
  z-index: 2;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  transform: rotate(45deg);
  background: var(--abyss);
}

.cycle-num {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 29px;
  margin-bottom: 14px;
  font-family: var(--data);
  font-size: 12px;
  color: var(--abyss);
  background: var(--gold);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.cycle-step h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 7px;
}

.cycle-step p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink);
}

.cycle-art {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  min-height: 34px;
}

/* A candidate. Neutral by default; the state it reaches is what colours it. */
.opt {
  display: grid;
  place-items: center;
  width: 30px;
  height: 34px;
  font-family: var(--data);
  font-size: 12px;
  color: var(--ink-dim);
  background: rgba(231, 217, 182, 0.06);
  border: 1px solid var(--rule-soft);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.opt.voted {
  color: var(--parchment);
  background: rgba(202, 164, 106, 0.18);
}

.opt.won {
  color: var(--abyss);
  background: var(--coin);
  font-weight: 700;
}

.opt.new {
  color: var(--gold);
  border-style: dashed;
  border-color: var(--rule);
}

.opt-note {
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coin);
}

.roadmap-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: clamp(30px, 4vh, 42px) 0 clamp(60px, 9vh, 104px);
}

.roadmap-foot p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-dim);
}

@media (max-width: 900px) {
  .cycle {
    grid-template-columns: 1fr;
  }

  .cycle-step {
    border-right: 1px solid var(--rule-soft);
    border-bottom: 0;
  }

  .cycle-step:last-child {
    border-bottom: 1px solid var(--rule-soft);
  }

  /* The chevron turns to point down once the run stacks. */
  .cycle-step:not(:last-child)::after {
    top: auto;
    bottom: -9px;
    right: 50%;
    margin: 0 -8px 0 0;
    transform: rotate(135deg);
  }
}

/* ---------- overrides: bigger rod, six-card ladder ---------------------------- */
/* The rod now uses GearThumb's WIDE 2:1 frame above the sheet — inside the round
   medallion a 2.4 m rod was a grey smudge. Same inset ground and rarity aura as
   the HUD's framed variant. */
.sheet-art {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 3 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #0f1a1f;
  border: 1px solid rgba(202, 164, 106, 0.34);
  /* A hint of lit stage, not a lamp: the frame must read as chrome around the
     rod, and the outer halo was pulling the eye off the copy beside it. */
  box-shadow:
    inset 0 0 0 1px rgba(202, 164, 106, 0.18),
    inset 0 0 34px -18px var(--gold),
    0 0 16px -10px var(--gold);
}

.sheet-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(85% 68% at 50% 20%, rgba(202, 164, 106, 0.27), transparent 66%),
    radial-gradient(130% 95% at 50% 122%, rgba(202, 164, 106, 0.14), transparent 60%);
}

.sheet-art img {
  /* Absolutely placed, NOT a grid item: the frame is a 3/1 letterbox and the
     sprite a 2/1, and on an auto-sized grid row `height: 100%` falls back to
     `auto`, so the rod sized itself off the 400px width and spilled out of the
     frame. Against the positioned frame the percentage resolves, and
     `object-fit: contain` does the letterboxing. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(0.92); /* SPRITE_SCALE, as in GearThumb's framed variant */
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6));
}

@media (max-width: 560px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- the crafting pearls ---------------------------------------------- */
/* One row under the gear sheet, laid out like the inventory cards they are in
   game: lit art box, name, stars, what the pearl does. The owned count and the
   level the inventory shows are a PLAYER's state — inventing them on a landing
   page would be inventing data, so they are absent rather than faked. */
/* A split that hands over to a pearl row does not need its full bottom padding:
   the row belongs to the copy above it, not to the next section. */
.split:has(+ .pearls) {
  padding-bottom: 26px;
}

.pearls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  /* No top margin — the split above already ends on padding (trimmed for this
     case, see below). The bottom margin restores the gap the split would have
     given the next section, so the row does not butt against the band edge. */
  margin: 0;
  /* PADDING, not margin: nothing follows inside the section, so a bottom margin
     collapses straight through the band edge and the row sits on the border. */
  padding: 0 0 81px;
  list-style: none;
}

.pearls li {
  padding: 14px 16px 16px;
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  background: var(--sea);
}

.pearl-art {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  margin-bottom: 12px;
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  background:
    radial-gradient(72% 72% at 50% 44%, rgba(202, 164, 106, 0.14), transparent 70%),
    #0f1a1f;
}

.pearl-art img {
  width: 62%;
  max-width: 92px;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
}

.pearls h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--parchment);
}

.pearl-stars {
  margin: 3px 0 9px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #e0a84e;
}

.pearls li p:last-child {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-dim);
}

@media (max-width: 860px) {
  .pearls {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ---------- the multiplayer emblem ------------------------------------------ */
/* Same lit stage as the gear sheet, so the two image columns read as one family.
   Restored after a css cleanup swept it away with the block above it. */
.emblem {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  background: var(--sea);
}

.emblem img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The hero's own darkening, reused: an in-game capture is far brighter than the
   page, and without it the shot glares out of the band instead of sitting in it. */
.emblem::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 18, 22, 0.42) 0%,
    rgba(10, 18, 22, 0.06) 34%,
    rgba(10, 18, 22, 0.86) 100%
  );
}