/* GymRank web landing card — shared static styles.
 * Dark-mode only. Echoes rank-share-card.jsx geometry; hex values mirror docs/design.md.
 * No external CDNs, no trackers, no JavaScript. Carries no secret of any kind. */

:root {
  /* design.md §3 palette as CSS custom properties */
  --bg: #0A0B0D;
  --surface: #15171B;
  --surface-2: #1F2329;
  --lime: #D4FF3D;
  --gold: #FFC23D;
  --on-lime: #0A0B0D;

  /* text scale (decision PD-29-A) — mirrors DSColor.text / .textDim / .textMute from
     docs/design.md §3, so the palette keeps exactly one author. Added for web/assets/doc.css,
     which must resolve every colour through a custom property. Purely additive: no existing
     declaration is touched, so no already-shipped page renders differently. */
  --text: #F3F4F1;
  --text-dim: #9AA09A;
  --text-mute: #5E635E;

  /* derived accents (rank-share-card echo) */
  --card-gradient: linear-gradient(165deg, #14180C, #0B0D08, #0A0B0D);
  --lime-hairline: rgba(212, 255, 61, 0.28);
  --gold-tint: rgba(255, 194, 61, 0.14);
  --gold-tint-border: rgba(255, 194, 61, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: #F4F6F8;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 18px 40px;
  min-height: 100vh;
}

/* ── Card ─────────────────────────────────────────── */
.card {
  width: 100%;
  max-width: 364px;
  background: var(--card-gradient);
  border: 1px solid var(--lime-hairline);
  border-radius: 28px;
  padding: 20px 22px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  position: relative;
  overflow: hidden;
}

/* faint lime top-glow (rank-share-card echo) */
.card::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 160px;
  background: radial-gradient(closest-side, rgba(212, 255, 61, 0.16), transparent 70%);
  pointer-events: none;
}

/* ── Brand row ────────────────────────────────────── */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  position: relative;
}

.brand__tile {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-lime);
  flex-shrink: 0;
}

.brand__wordmark {
  font-family: "Funnel Display", "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #F4F6F8;
}

/* ── Poster still ─────────────────────────────────── */
.poster {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 9 / 16;
  margin-bottom: 16px;
}

.poster__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* decorative, non-interactive LABEL — states where the clip is watchable, promises nothing
   this page can do. pointer-events:none is load-bearing: the overlay must never look or behave
   like a control, because the page has no player and never will (D-01, G-30-8).

   BOTTOM-anchored, not centred. Centring collided with the placeholder's app icon, and with
   thumb_key null on 21 of 21 PRs the placeholder IS the live appearance of every card — so
   "it reads fine over a real poster still" describes a state that does not exist yet. The
   bottom edge is clear under both the placeholder and a real still, so this holds after the
   G-30-6 poster pipeline lands. 16px matches the spacing already used on this card. */
.poster__still {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 16px;
  pointer-events: none;
}

/* Same translucent dark fill, same lime hairline, same lime foreground as the mark it replaced.
   The pill geometry (radius + padding + type size/weight) is .chip--gold's, already on this same
   card — no new colour, no new radius, no new type value is introduced. */
.poster__still span {
  border-radius: 999px;
  padding: 5px 11px;
  background: rgba(10, 11, 13, 0.55);
  border: 1px solid var(--lime-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lime);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

/* ── Identity block ───────────────────────────────── */
.identity {
  background: var(--surface-2);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.identity__lift {
  font-family: "Funnel Display", "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.05;
  color: #F4F6F8;
  font-feature-settings: "tnum";
}

.identity__handle {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #AEB4BD;
}

.chip--gold {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--gold-tint);
  border: 1px solid var(--gold-tint-border);
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 0 18px rgba(255, 194, 61, 0.18);
}

/* ── CTA ──────────────────────────────────────────── */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--lime);
  color: var(--on-lime);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(212, 255, 61, 0.22);
}

.cta:active { transform: translateY(1px); }

.footnote {
  margin-top: 14px;
  font-size: 11px;
  color: #6B7280;
  text-align: center;
}