/* Public league microsite styles. Shared by the SSR Cloud Function (ssrLeagueSite,
   functions/src/ssr.ts) and the client hydration script (app.js). Served as a
   static file by Firebase Hosting, so the /leagues/** rewrite never touches it. */

/* Inter (variable, self-hosted) — same files as the main site */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

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

/* The `hidden` attribute beats any `display` this stylesheet sets.
   The UA rule for [hidden] is display:none at the LOWEST specificity, so a
   single class with a `display` — .rf-field is `display:flex` — silently wins
   and the element stays on screen while `el.hidden` reads true. That is a
   nasty one to debug, and the per-class `[hidden]` rules further down this
   file are each a scar from hitting it. This is the general fix; treat those
   as redundant. */
[hidden] { display: none !important; }
:root {
  /* v3 light theme — matches the main site (website/styles.css). */
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-border: #e3e7ee;
  --text: #1c2233;
  --muted: #626875;
  --faint: #6e7686;
  --navy: #0b1020;
  --blue: #2f5fe0;
  --blue-soft: #eef3ff;
  --blue-text: #2a4fc0;
  --green: #15803d;
  --green-soft: #f0fdf4;
  --amber: #b45309;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body {
  background: var(--bg); color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, Arial, sans-serif;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}
body { padding-bottom: env(safe-area-inset-bottom); }
a { color: inherit; text-decoration: none; }

/* ---- Overlay (loading / not-found, client paths only) ---- */
#overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--bg); text-align: center; padding: 24px;
}
#overlay[hidden] { display: none; }
#overlay h1 { font-size: 1.1rem; font-weight: 800; }
#overlay p { color: var(--muted); font-size: 0.9rem; max-width: 28rem; }
#overlay a { color: var(--blue-text); font-weight: 700; }
#spinner {
  width: 30px; height: 30px;
  border: 3px solid var(--panel-border); border-top-color: var(--blue);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Server-rendered not-found / message block */
.overlay-msg { text-align: center; padding: 60px 16px; }
.overlay-msg h1 { font-size: 1.3rem; font-weight: 800; margin-bottom: 8px; }
.overlay-msg p { color: var(--muted); font-size: 0.92rem; max-width: 30rem; margin: 0 auto; }
.overlay-msg a { color: var(--blue-text); font-weight: 700; }

/* ---- Site header ----
   A byte-for-byte port of the marketing site's top bar, so /leagues and every
   league microsite wear the SAME menu as readyref.app. Source of truth:
   website/styles.css (§ Header) + website/v3.css (§ shared-chrome overrides) —
   every marketing page is <body class="v3">, so the values below are the
   COMPUTED result of that cascade (76px rail, 13px nav type, 1.4rem wordmark),
   not the pre-override base. This page can't just link styles.css + v3.css —
   those carry the whole marketing design system — so the header/footer rules
   are duplicated here on purpose. Keep them in sync; bump ASSET_V in
   functions/src/ssr.ts whenever this file changes.

   --nav-w is the header rail width: the marketing shell (1140px) on
   ReadyRef-owned pages, narrowed on a league microsite so the rail sits over
   its 920px reading column instead of floating far outside it. */
:root { --nav-w: min(1140px, calc(100vw - 40px)); }
/* Same 20px viewport inset as the marketing rail (and as the open mobile menu
   panel, which is positioned against .site-header at left/right:20px) — only
   the desktop cap is narrowed, so the rail sits over the 920px column instead
   of floating far outside it. */
body.league-site { --nav-w: min(984px, calc(100vw - 40px)); }

.skip-link {
  position: absolute; left: 20px; top: -80px; z-index: 999;
  background: var(--blue); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 900;
}
.skip-link:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: #fff; border-bottom: 2px solid var(--panel-border);
  padding-top: env(safe-area-inset-top);
  /* body.v3 sets line-height:1.5 on the marketing site and the whole rail
     inherits it — that is what gives the nav pills and the CTA their height. */
  line-height: 1.5;
}
.site-header.is-scrolled { background: #fff; }
.site-header[hidden] { display: none; }
/* .nav-wrap is the pre-2026-08 wrapper class; kept as an alias so markup served
   by an older ssrLeagueSite during a deploy skew still lands on the rail. */
.container, .nav-wrap { width: var(--nav-w); margin-inline: auto; }
/* No position:relative here on purpose — the open mobile panel is absolutely
   positioned against .site-header (as on the marketing site) so it spans the
   full viewport width, not just the rail. */
.nav { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }

.brand { display: flex; align-items: center; gap: 11px; color: var(--text); font-weight: 900; letter-spacing: -0.035em; }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.brand span { font-size: 1.4rem; }
/* Brand lockup: the slogan is a second line under the wordmark at every width.
   The logo spans both rows, so it stays centred against the two-line block.
   Scoped to the header — the footer brand stays the plain flex row. */
.site-header .brand {
  display: grid; grid-template-columns: auto auto; column-gap: 11px; row-gap: 0; align-items: center;
  /* The marketing site runs body{font-size:17px} (v3), so its -0.035em brand
     tracking resolves to -0.595px. Pinned here so the wordmark tracks the same
     without rescaling this page's whole rem/em ladder. */
  font-size: 17px;
}
.site-header .brand img { grid-column: 1; grid-row: 1 / 3; }
.site-header .brand > span { grid-column: 2; grid-row: 1; line-height: 1.05; }
.site-header .brand .brand-tag {
  grid-row: 2; margin-top: 2px;
  font-size: 0.53rem; font-weight: 900; letter-spacing: 0.19em; text-transform: uppercase;
  line-height: 1.2; color: var(--faint);
}

.nav-links { display: flex; gap: 6px; align-items: center; padding: 0; border: 0; background: none; }
.nav-links a {
  padding: 10px 15px; border-radius: 12px; color: var(--muted);
  font-size: 13px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}
.nav-links a:hover, .nav-links a.active { background: var(--blue-soft); color: var(--blue); }
.nav-actions { display: flex; gap: 10px; align-items: center; }
.header-text-link {
  color: var(--muted); font-size: 13px; font-weight: 900;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.header-text-link:hover { color: var(--blue); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 0; padding: 18px 28px; border-radius: 16px; border: 0; cursor: pointer;
  font-family: inherit; font-weight: 900; font-size: 14px; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap; transition: transform 0.07s, box-shadow 0.07s;
}
.btn-small { padding: 12px 20px; font-size: 12.5px; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 5px 0 var(--blue-text); }
.btn-primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--blue-text); }
.menu-toggle {
  display: none; background: #fff; border: 2px solid #c6cedd; color: var(--text);
  border-radius: 12px; min-height: 44px; padding: 0 16px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
}

@media (max-width: 1080px) {
  .header-text-link { display: none; }
}
@media (max-width: 980px) {
  .nav-links { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; }
  .nav-links.open {
    display: flex; position: absolute; top: calc(100% + 2px); left: 20px; right: 20px;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: #fff; border: 2px solid #c6cedd; border-radius: 22px;
    padding: 12px; box-shadow: 0 18px 40px rgba(8,10,13,0.16); z-index: 70;
  }
  .nav-links.open a { padding: 14px; text-align: left; }
}
@media (max-width: 640px) {
  /* On phones the header is brand + Menu only: the beta CTA drops out so the
     brand lockup can sit beside the logo. */
  .nav { gap: 12px; }
  .nav-actions { gap: 8px; }
  .site-header .nav-actions .btn-primary { display: none; }
  .menu-toggle { padding: 0 13px; }
}
@media (max-width: 380px) {
  .menu-toggle { padding: 0 11px; }
}

/* ---- Legacy brand bar (.topbar) — DEPLOY-SKEW SAFETY, do not delete ----
   This stylesheet is a Hosting asset; the markup that uses it comes from the
   ssrLeagueSite Cloud Function. The two deploy separately, so there is always a
   window where new CSS meets old markup — a local `firebase serve` proxying to
   the live function, or a hosting-before-functions deploy. Without these rules
   the old header renders completely unstyled (brand and CTA stacked at the far
   left, oversized logo). Keep them until every environment serves the
   .site-header markup; they cost ~400 bytes and are inert once it does.
   Placed after the .site-header block so the .topbar-scoped overrides win. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--panel-border);
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
}
.topbar[hidden] { display: none; }
.topbar .inner {
  max-width: 920px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.topbar .brand { gap: 8px; font-weight: 800; letter-spacing: -0.01em; }
.topbar .brand img { width: 22px; height: 22px; }
.topbar .brand .name { font-size: 0.95rem; }
.topbar .brand .name b { color: var(--blue-text); }
.topbar .cta {
  font-size: 0.72rem; font-weight: 700; color: var(--muted);
  border: 2px solid var(--panel-border); border-radius: 999px; padding: 6px 12px;
}

.wrap { max-width: 920px; margin: 0 auto; padding: 18px 16px 48px; }
.wrap[hidden] { display: none; }
/* The ReadyRef-owned pages (directory, not-found) run at the marketing site's
   container width; a league microsite keeps its narrower 920px reading column.
   Keyed off an explicit class, not :not(.league-site), so legacy pages served
   during a deploy skew are untouched. */
body.ReadyRef-site .wrap { max-width: 1180px; }

/* ---- Homepage masthead (SSR) ---- */
.home-hero { text-align: center; padding: 18px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.home-hero h1 { font-size: clamp(1.7rem, 6vw, 2.6rem); font-weight: 900; letter-spacing: -0.025em; line-height: 1.05; }
.home-hero .hero-sub { color: var(--blue-text); font-weight: 700; font-size: clamp(0.95rem, 3vw, 1.1rem); }
.season-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 12px; border-radius: 999px;
}
.season-pill.live { background: var(--green-soft); color: var(--green); }
.season-pill.soon { background: var(--blue-soft); color: var(--blue-text); }
.season-pill.done { background: #f4f7fb; color: var(--muted); }
.hero-cta {
  margin-top: 4px; background: var(--blue); color: #fff; font-weight: 800; font-size: 0.92rem;
  padding: 11px 22px; border-radius: 12px; transition: transform 0.12s;
}
.hero-cta:active { transform: scale(0.97); }
.stat-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--panel); border: 2px solid var(--panel-border); border-radius: 12px;
  padding: 10px 16px; min-width: 84px;
}
.stat b { font-size: 1rem; font-weight: 900; }
.stat span { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }

/* The league's own mark, above the name in the masthead. Sized in CSS rather
   than by the file: the upload is capped at 512px on the longest edge, and a
   wordmark and a round crest need to occupy the same slot. */
.league-logo {
  display: block; margin: 0 auto 10px; width: 72px; height: 72px;
  object-fit: contain; border-radius: 12px;
}
@media (max-width: 560px) { .league-logo { width: 56px; height: 56px; } }

/* Legacy alias — DO NOT DELETE until the new ssr function is live everywhere.
   site.css is Hosting and the markup that uses it is a Cloud Function; they
   deploy separately, so a page served by the OLD function still asks for
   .home-about. Same pattern as the parked .topbar block. */
.home-about,
.sec-text { margin-top: 22px; background: var(--panel); border: 2px solid var(--panel-border); border-radius: 14px; padding: 16px 18px; }
.home-about h2,
.sec-text h2 { font-size: 0.95rem; font-weight: 800; margin-bottom: 8px; }
.home-about p,
.sec-text p { color: var(--muted); font-size: 0.9rem; line-height: 1.6; white-space: pre-line; }
/* The fallback About emits ONE <p> (newlines held by pre-line); a richText
   section emits one <p> per blank-line-separated paragraph. Space only between
   siblings, so the single-paragraph case stays byte-identical to the fallback. */
.sec-text p + p { margin-top: 10px; }

/* Social profile row (masthead) */
.social-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.social {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  background: var(--panel); border: 2px solid var(--panel-border); border-radius: 11px;
  color: var(--muted); transition: color 0.15s, border-color 0.15s, transform 0.12s;
}
.social:hover { color: var(--text); border-color: rgba(59,110,245,0.4); }
.social:active { transform: scale(0.94); }
.social svg { width: 19px; height: 19px; fill: currentColor; }

/* Latest news (owner-curated updates) */
.home-news { margin-top: 22px; }
.home-news h2 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 800; margin-bottom: 10px; padding-left: 2px; }
.news-list { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.news-item { background: var(--panel); border: 2px solid var(--panel-border); border-radius: 14px; padding: 14px 16px; }
.news-date { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); font-weight: 700; margin-bottom: 5px; }
.news-text { color: var(--muted); font-size: 0.92rem; line-height: 1.55; white-space: pre-line; }
.news-link { display: inline-block; margin-top: 8px; font-size: 0.78rem; font-weight: 700; color: var(--blue-text); }

/* Sponsors (live section). The league's own sponsors as text credits -- no
   logos, no offer codes; those stay in the app. Styled in the page's own list
   language (the same card as a news item) so a sponsor reads as part of the
   league's page rather than as an ad dropped into it. The presenting sponsor
   takes the full row: that is the difference the organizer sold. */
.home-sponsors { margin-top: 22px; }
.home-sponsors h2 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 800; margin-bottom: 10px; padding-left: 2px; }
.sponsor-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; list-style: none; }
.sponsor-item { background: var(--panel); border: 2px solid var(--panel-border); border-radius: 14px; padding: 12px 16px; min-width: 0; }
.sponsor-item[data-level="presenting"] { grid-column: 1 / -1; }
.sponsor-kicker { display: block; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); font-weight: 700; margin-bottom: 3px; }
.sponsor-name { font-weight: 800; font-size: 0.98rem; color: var(--text); overflow-wrap: anywhere; }
a.sponsor-name:hover { color: var(--blue-text); }
.sponsor-blurb { color: var(--muted); font-size: 0.86rem; line-height: 1.5; margin-top: 4px; }

.home-week { margin-top: 18px; }
.home-week h2 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 800; margin-bottom: 10px; padding-left: 2px; }
.week-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* The header's "Watch a game" link targets the first card. Extra reserve over
   the 92px used elsewhere so the "Upcoming games" heading lands in view too. */
#next-game { scroll-margin-top: 118px; }
.week-game { flex: 0 1 260px; max-width: 320px; text-align: center; background: var(--panel); border: 2px solid var(--panel-border); border-radius: 14px; padding: 12px 14px; }
.week-game .wg-when { font-size: 0.7rem; color: var(--muted); font-weight: 700; }
.week-game .wg-teams { font-weight: 800; font-size: 0.95rem; margin-top: 4px; }
.week-game .wg-teams span { color: var(--faint); font-weight: 600; font-size: 0.8rem; }
.week-game .wg-field { font-size: 0.68rem; color: var(--faint); margin-top: 5px; }
.week-game .watch { margin-top: 9px; }

/* ---- Latest results (ssr.ts resultsBlock) ----
   The Upcoming-games card's shape, reading as a result: winner bold, loser
   muted, scores right-aligned. A card with a recap is one link. */
.home-results { margin-top: 18px; }
.home-results h2 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 800; margin-bottom: 10px; padding-left: 2px; }
.result-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.result-card { flex: 0 1 260px; max-width: 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; background: var(--panel); border: 2px solid var(--panel-border); border-radius: 14px; padding: 12px 14px; color: inherit; text-decoration: none; }
a.result-card { cursor: pointer; transition: border-color 0.15s, transform 0.1s; }
a.result-card:hover, a.result-card:focus-visible { border-color: rgba(59,110,245,0.4); }
a.result-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
a.result-card:active { transform: scale(0.99); }
.result-card .rc-when { font-size: 0.7rem; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.result-card .rc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; font-size: 0.95rem; }
.result-card .rc-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-card .rc-row b { font-weight: 900; font-variant-numeric: tabular-nums; flex: none; }
.result-card .rc-row.win { color: var(--text); font-weight: 800; }
.result-card .rc-row.lose { color: var(--muted); }
.result-card .watch, .result-card .badge { align-self: flex-start; margin-top: 7px; }

/* ---- /recaps hub (ssr.ts renderRecapsHub) — one results block per league.
   The league name is a real heading here, not the small uppercase label a
   league page's own "Latest results" wears. */
.recaps-league { margin-top: 28px; }
.recaps-league h2 { font-size: 1.05rem; text-transform: none; letter-spacing: -0.01em; color: var(--text); font-weight: 900; margin-bottom: 12px; text-align: center; }
.recaps-league h2 a { color: inherit; text-decoration: none; }
.recaps-league h2 a:hover { color: var(--blue-text); }
.recaps-place { display: block; font-size: 0.74rem; font-weight: 600; color: var(--muted); margin-top: 3px; }
.recaps-more { text-align: center; margin-top: 12px; font-size: 0.82rem; font-weight: 800; }
.recaps-more a, .recaps-cta a { color: var(--blue-text); }
.recaps-cta { text-align: center; color: var(--muted); font-size: 0.9rem; margin: 40px 0 8px; }

/* ---- Directory hub ---- */
.dir-group { margin-top: 26px; }
.dir-group h2 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 800; margin-bottom: 10px; padding-left: 2px; }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.dir-card { display: flex; flex-direction: column; gap: 3px; background: var(--panel); border: 2px solid var(--panel-border); border-radius: 14px; padding: 14px 16px; transition: border-color 0.15s; }
.dir-card:hover { border-color: rgba(59,110,245,0.4); }
.dir-card .dir-name { font-weight: 800; font-size: 0.95rem; }
.dir-card .dir-place { color: var(--muted); font-size: 0.76rem; }

/* ---- League header (legacy client header; kept for demo/direct paths) ---- */
.league-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.league-head h1 { font-size: clamp(1.5rem, 5vw, 2.1rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
.league-head .updated { color: var(--faint); font-size: 0.72rem; margin-top: 6px; }
.season-select {
  background: var(--panel); color: var(--text); border: 2px solid var(--panel-border);
  border-radius: 12px; padding: 9px 12px; font-size: 0.85rem; font-weight: 600; font-family: inherit; outline: none; min-width: 0;
}
.season-select[hidden] { display: none; }

/* ---- Tabs ---- */
/* The header is sticky, so anchored scrolls need to clear it. */
#games { scroll-margin-top: 92px; }
.tabs { display: flex; gap: 6px; background: var(--panel); border: 2px solid var(--panel-border); border-radius: 14px; padding: 5px; margin: 22px 0 18px; }
.tabs button {
  flex: 1; padding: 9px 8px; border: none; border-radius: 10px; cursor: pointer; font-family: inherit;
  font-size: 0.82rem; font-weight: 700; color: var(--muted); background: transparent; transition: background 0.15s, color 0.15s;
}
.tabs button.active { background: var(--blue); color: #fff; }

.tabpane { display: none; flex-direction: column; gap: 18px; }
.tabpane.active { display: flex; }
.empty { color: var(--faint); font-size: 0.85rem; text-align: center; padding: 28px 0; }

/* ---- Schedule ---- */
.day-group h2 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 800; margin-bottom: 8px; padding-left: 2px; }
.game {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center;
  background: var(--panel); border: 2px solid var(--panel-border); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px;
}
/* A finished game with a recap is one link (functions/src/ssr.ts scheduleHtml).
   It keeps the row's look — no underline, no link colour — and says it is
   tappable the way the directory cards do: the border warms on hover/focus. */
a.game { color: inherit; text-decoration: none; cursor: pointer; transition: border-color 0.15s, transform 0.1s; }
a.game:hover, a.game:focus-visible { border-color: rgba(59,110,245,0.4); }
a.game:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
a.game:active { transform: scale(0.995); }
.game .when { font-size: 0.74rem; color: var(--muted); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.game .teams { min-width: 0; }
.game .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.game .tnm { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.game .tname { font-weight: 700; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.game .tname.win { color: var(--text); font-weight: 800; }
.game .tname.lose { color: var(--muted); }
.game .sc { font-weight: 900; font-size: 1rem; font-variant-numeric: tabular-nums; flex: none; }
.game .field { font-size: 0.68rem; color: var(--faint); margin-top: 5px; }
.game .right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.badge { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.badge.final { background: var(--green-soft); color: var(--green); }
.badge.sched { background: #f4f7fb; color: var(--muted); }
.badge.off { background: #fef2f2; color: #b91c1c; }
.watch { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 800; color: var(--blue-text); background: var(--blue-soft); border: 1px solid rgba(59,110,245,0.3); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.watch .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* ---- Standings ---- */
.table-wrap { background: var(--panel); border: 2px solid var(--panel-border); border-radius: 14px; overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 8px; text-align: center; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
th { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 800; border-bottom: 1px solid var(--panel-border); }
td { border-bottom: 1px solid var(--panel-border); }
tr:last-child td { border-bottom: none; }
.team-cell { text-align: left; display: flex; align-items: center; gap: 9px; font-weight: 700; }
.team-cell .rank { color: var(--faint); font-size: 0.72rem; width: 16px; flex: none; text-align: right; }
.team-cell .chip { width: 10px; height: 10px; border-radius: 3px; flex: none; }
th.lead, td.lead { text-align: left; padding-left: 14px; }

/* ---- Teams ---- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.team-card { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 2px solid var(--panel-border); border-radius: 14px; padding: 13px; }
.team-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: #f4f7fb; flex: none; }
.team-logo.ph { display: flex; align-items: center; justify-content: center; font-weight: 900; color: var(--muted); font-size: 1rem; }
/* Compact logo chip used on the Schedule + Standings rows. */
.team-logo.sm { width: 26px; height: 26px; border-radius: 8px; }
.team-logo.ph.sm { font-size: 0.74rem; }
.team-card .meta { min-width: 0; }
.team-card .tn { font-weight: 800; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-card .rec { color: var(--muted); font-size: 0.74rem; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ---- League Pulse ----
   The app's Stats-screen League Pulse (synqro/src/components/stats/LeaguePulse.tsx)
   re-skinned from the app's dark surface to this page's light one. Same
   information architecture — hero band, season awards, team leaderboards,
   signature chart — minus the Player Leaders boards, which are never published
   (no player names online). */
.pulse { margin-top: 34px; scroll-margin-top: 92px; }
.pulse[hidden] { display: none; }
.pulse-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pulse-head h2 { font-size: 1.05rem; font-weight: 900; letter-spacing: -0.02em; }
.pulse-head .season-tag { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); font-weight: 800; }
.pulse-note { margin-top: 14px; font-size: 0.72rem; color: var(--faint); line-height: 1.5; text-align: center; }

.pulse-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.ph-tile { background: var(--panel); border: 2px solid var(--panel-border); border-radius: 14px; padding: 14px 10px; text-align: center; }
.ph-tile b { display: block; font-size: 1.55rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ph-tile:nth-child(2) b { color: var(--green); }
.ph-tile:nth-child(4) b { color: var(--blue-text); }
.ph-tile span { display: block; margin-top: 7px; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-weight: 700; }

.pulse-sub { margin: 22px 0 10px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 800; padding-left: 2px; }

/* Season awards — horizontal snap carousel, one tinted card per superlative. */
.award-row {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.award-row::-webkit-scrollbar { display: none; }
.award {
  flex: none; width: 15rem; scroll-snap-align: start;
  border: 2px solid var(--award-ring); background: var(--award-tint);
  border-radius: 16px; padding: 13px 15px;
}
.award .aw-top { display: flex; align-items: center; gap: 8px; }
.award .aw-icon { font-size: 1.05rem; line-height: 1; }
.award .aw-kind { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--award-accent); }
.award .aw-head { margin-top: 8px; font-size: 0.88rem; font-weight: 800; line-height: 1.35; }
.award .aw-sub { margin-top: 3px; font-size: 0.72rem; color: var(--muted); }
.award.shootout  { --award-ring: rgba(234,88,12,0.28);  --award-tint: #fff7ed; --award-accent: #c2410c; }
.award.blowout   { --award-ring: rgba(220,38,38,0.28);  --award-tint: #fef2f2; --award-accent: #b91c1c; }
.award.nailbiter { --award-ring: rgba(202,138,4,0.30);  --award-tint: #fefce8; --award-accent: #a16207; }
.award.clutch    { --award-ring: rgba(139,70,240,0.28); --award-tint: #f5eeff; --award-accent: #6d28d9; }
.award.brickwall { --award-ring: rgba(21,128,61,0.26);  --award-tint: #f0fdf4; --award-accent: #15803d; }

/* Team leaderboards — bar per row, rank #1 always fills fullest. */
.board { background: var(--panel); border: 2px solid var(--panel-border); border-radius: 14px; padding: 14px 16px; }
.board + .board { margin-top: 10px; }
.board h3 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 800; margin-bottom: 11px; }
.board-row + .board-row { margin-top: 10px; }
.board-row .lbl { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.82rem; margin-bottom: 5px; }
.board-row .who { display: flex; align-items: center; gap: 7px; min-width: 0; font-weight: 700; }
.board-row .who .rk { color: var(--faint); font-size: 0.72rem; width: 14px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.board-row .who .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-row .val { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
.board-row .bar { height: 6px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
/* Width is baked into the markup by app.js; only the grow-in is animated, so a
   bar that never gets to animate still reads at its correct length. */
.board-row .bar i {
  display: block; height: 100%; border-radius: 999px;
  transform-origin: left center; animation: bar-grow 0.7s cubic-bezier(.16,1,.3,1);
}
/* No fill-mode on purpose: with nothing filling backwards, a bar that never
   animates (animations disabled, tab never shown) simply renders full-length. */
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.board.scoring      .bar i { background: var(--green); }
.board.differential .bar i { background: var(--green); }
.board.efficiency   .bar i { background: #8b46f0; }
.board.defense      .bar i { background: var(--blue); }

/* Signature chart — weekly trend line, or TDs-by-down when there's < 2 weeks. */
.chart { background: var(--panel); border: 2px solid var(--panel-border); border-radius: 14px; padding: 14px 16px; }
.chart h3 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 800; margin-bottom: 10px; }
.chart svg { width: 100%; height: 118px; display: block; }
.chart .xaxis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.6rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.downs { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; height: 118px; }
.downs .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.downs .col b { font-size: 0.76rem; font-weight: 800; font-variant-numeric: tabular-nums; margin-bottom: 5px; }
.downs .col i { display: block; width: 100%; border-radius: 6px 6px 0 0; background: rgba(139,70,240,0.75); }
.downs .col span { margin-top: 6px; font-size: 0.62rem; color: var(--faint); font-weight: 700; }

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

/* ---- League microsite footer ----
   Deliberately just the two attribution lines: a league owner should feel like
   this page is theirs, not like a page inside readyref.app. The full ReadyRef
   footer below is for the /leagues directory only. */
.foot { max-width: 920px; margin: 0 auto; padding: 26px 16px calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid var(--panel-border); text-align: center; }
.foot[hidden] { display: none; }
.foot .pw { color: var(--muted); font-size: 0.78rem; }
.foot .pw b { color: var(--blue-text); font-weight: 800; }
.foot .get { margin-top: 8px; font-size: 0.74rem; color: var(--faint); }
.foot .get a { color: var(--blue-text); font-weight: 700; }

/* ---- Full site footer (directory page) — ported from website/styles.css ---- */
.footer { background: var(--navy); color: #fff; padding: 64px 0 0; margin-top: 48px; }
.foot-wrap { width: var(--nav-w); margin-inline: auto; }
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 28px; }
.footer-grid p { font-size: 0.94rem; color: rgba(255,255,255,0.6); line-height: 1.6; }
.footer b { display: block; margin-bottom: 14px; font-size: 0.8rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.16em; color: #fff; }
.footer a { display: block; color: #8fb0ff; margin: 6px 0; font-size: 0.94rem; }
.footer a:hover { color: #fff; }
.footer .brand { margin-bottom: 12px; color: #fff; }
.footer-bottom {
  margin-top: 40px; border-top: 1px solid rgba(255,255,255,0.14); padding: 22px 0 calc(22px + env(safe-area-inset-bottom));
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.84rem; color: rgba(255,255,255,0.5);
}
.footer-disclaimer { flex-basis: 100%; font-size: 0.76rem; line-height: 1.5; color: rgba(255,255,255,0.42); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: 22px; } }

@media (prefers-reduced-motion: reduce) { #spinner { animation: none; } }

/* ===========================================================================
   CMS SECTIONS — the organizer-arranged layouts rendered by
   functions/src/siteRender.ts. Phase A of the microsite CMS.

   Existing blocks (.home-hero, .home-news, .home-week, #games, #pulse) are
   untouched: a league with no section layout still renders exactly the page it
   rendered before, and a migrated league reuses those same classes for the
   seeded hero, news and upcoming-games sections.

   There are no image rules here on purpose — the CMS has no image field. See
   plan section 3 for why that is a cost decision rather than a styling one.
   =========================================================================== */

.sec-hero, .sec-cards, .sec-agenda, .sec-coach,
.sec-pricing, .sec-faq, .sec-band, .sec-register, .sec-quotes,
.sec-video, .sec-stats {
  margin: 28px 0;
}
.sec-cards h2, .sec-agenda h2, .sec-coach h2,
.sec-pricing h2, .sec-faq h2, .sec-quotes h2, .sec-video h2,
.sec-stats h2, .sec-register h2 {
  font-size: 20px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 10px;
}
.sec-lead { color: var(--muted); margin-bottom: 12px; line-height: 1.55; }

/* Shared call-to-action button. One rule for every section that has a button,
   so a new section type never invents a fifth button style. */
.sec-cta {
  display: inline-block; margin-top: 12px;
  background: var(--blue); color: #fff; text-decoration: none;
  font-weight: 800; font-size: 14px;
  padding: 11px 18px; border-radius: 12px;
}
.sec-cta:hover { filter: brightness(1.06); }

/* Custom banner (written by the organizer — distinct from the live .home-hero) */
.sec-hero {
  background: var(--blue-soft); border: 1px solid var(--panel-border);
  border-radius: 16px; padding: 22px; text-align: center;
}
.sec-tagline {
  text-transform: uppercase; letter-spacing: .08em; font-size: 11px;
  font-weight: 800; color: var(--blue-text); margin-bottom: 6px;
}
.sec-hero h2 { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; }
.sec-sub { color: var(--muted); margin-top: 8px; line-height: 1.55; }
.sec-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.sec-chips .chip {
  background: #fff; border: 1px solid var(--panel-border);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600;
}

/* Card grid */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.card-grid .card {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 14px; padding: 16px;
}
.card-grid .card h3 { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.card-grid .card p { color: var(--muted); font-size: 14px; line-height: 1.55; }

/* Agenda / day plan */
.agenda-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.agenda-item {
  display: flex; gap: 12px; align-items: baseline;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 12px; padding: 12px 14px;
}
.agenda-item b { font-weight: 800; min-width: 84px; flex-shrink: 0; }
.agenda-item span { color: var(--muted); font-size: 14px; }

/* Coach — initials avatar, because the CMS takes no photos */
.coach-row { display: flex; gap: 14px; align-items: flex-start; }
.coach-initials {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 18px; letter-spacing: .02em;
}
.coach-body h3 { font-size: 16px; font-weight: 800; }
.coach-title { color: var(--blue-text); font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.coach-body p { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 8px; }

/* Pricing */
.price-box {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 16px; padding: 20px; text-align: center;
}
.price { font-size: 34px; font-weight: 900; letter-spacing: -0.02em; }
.price-list { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.price-list li { color: var(--muted); font-size: 14px; }

/* FAQ — <details> so it works with no JavaScript at all */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 12px; padding: 12px 14px;
}
.faq-item summary { font-weight: 700; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ' +'; color: var(--muted); font-weight: 800; }
.faq-item[open] summary::after { content: ' −'; }
.faq-item p { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* CTA band + registration panel */
.sec-band, .sec-register {
  background: var(--navy); color: #fff;
  border-radius: 16px; padding: 24px; text-align: center;
}
.sec-band h2, .sec-register h2 { color: #fff; font-size: 22px; font-weight: 900; }
.sec-band p, .sec-register p { color: #c9d0dd; margin-top: 8px; line-height: 1.55; }

/* Testimonials */
.quote-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.quote {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 14px; padding: 16px;
}
.quote blockquote { font-size: 15px; line-height: 1.6; font-style: italic; }
.quote figcaption { margin-top: 10px; font-size: 13px; font-weight: 700; }
.quote figcaption span { color: var(--muted); font-weight: 500; }

/* Video — fixed 16:9 box so the iframe cannot reflow the page as it loads */
.video-frame {
  position: relative; width: 100%; padding-top: 56.25%;
  border-radius: 14px; overflow: hidden; background: var(--navy);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-caption { color: var(--muted); font-size: 13px; margin-top: 8px; }

/* Numbers — reuses the hero's .stat-row/.stat pair so a written stat row and
   the derived one are visually identical. */
.sec-stats .stat-row { justify-content: flex-start; }

@media (max-width: 560px) {
  .sec-hero { padding: 18px; }
  .sec-hero h2 { font-size: 20px; }
  .agenda-item { flex-direction: column; gap: 2px; }
  .agenda-item b { min-width: 0; }
  .coach-row { flex-direction: column; }
}

/* ===========================================================================
   REGISTRATION FORM — /leagues/{slug}/register

   Sized for a parent on a phone, at night, filling this in once. 16px inputs
   (anything smaller makes iOS zoom on focus), 44px touch targets, and a single
   scrolling form rather than a wizard — four steps is four places to lose
   someone who is already doing admin they did not want to do.
   =========================================================================== */

.rf-head { text-align: center; margin: 22px 0 18px; }
.rf-head h1 { font-size: 26px; font-weight: 900; letter-spacing: -0.02em; }
.rf-league { color: var(--blue-text); font-weight: 700; font-size: 14px; margin-top: 4px; }
.rf-desc { color: var(--muted); line-height: 1.6; margin-top: 10px; }
.rf-price { margin-top: 14px; }
.rf-price b { display: block; font-size: 30px; font-weight: 900; letter-spacing: -0.02em; }
/* The split, always. A single grossed-up number reads as the organizer having
   raised their price, and this is the moment the parent decides if it is fair. */
.rf-price span { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.rf-meta { color: var(--muted); font-size: 13px; margin-top: 8px; }

.rf-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.rf-group {
  border: 2px solid var(--panel-border); border-radius: 14px;
  padding: 14px 16px 16px; background: var(--panel);
  display: flex; flex-direction: column; gap: 12px;
}
.rf-group legend {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); padding: 0 6px;
}
.rf-field { display: flex; flex-direction: column; gap: 5px; }
.rf-field > span { font-size: 13px; font-weight: 700; }
.rf-field small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.rf-field input, .rf-field select, .rf-field textarea {
  /* 16px is not a style choice: below it, iOS zooms the viewport on focus and
     the parent loses their place in the form. */
  font: inherit; font-size: 16px;
  width: 100%; min-height: 44px;
  padding: 10px 12px; border-radius: 10px;
  border: 2px solid var(--panel-border); background: #fff; color: var(--text);
}
.rf-field textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.rf-field input:focus, .rf-field select:focus, .rf-field textarea:focus {
  outline: none; border-color: var(--blue);
}
/* Visually hidden but read aloud — the notes textarea has a legend, not a
   visible label, and an unlabelled field is unusable with a screen reader. */
.rf-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.rf-waiver {
  max-height: 200px; overflow-y: auto;
  border: 1px solid var(--panel-border); border-radius: 10px;
  padding: 12px; font-size: 13px; line-height: 1.6; color: var(--muted);
  background: var(--bg);
}

.rf-submit {
  font: inherit; font-size: 16px; font-weight: 800;
  min-height: 52px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--blue); color: #fff;
}
.rf-submit:disabled { opacity: .6; cursor: default; }
.rf-error {
  border: 2px solid var(--amber); border-radius: 12px;
  padding: 12px 14px; color: var(--amber); font-size: 14px; line-height: 1.5;
  background: #fffbeb;
}
.rf-note { color: var(--muted); font-size: 13px; text-align: center; }
/* Card or pay the league directly (READYREF-PAYMENT-CHOICE-PLAN.md). Card is
   first and pre-selected; the selected option wears the blue border. */
.rf-pay-option {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 2px solid var(--panel-border); border-radius: 12px;
  padding: 12px; background: #fff;
}
.rf-pay-option:has(input:checked) { border-color: var(--blue); }
.rf-pay-option input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--blue); }
.rf-pay-option b { display: block; font-size: 15px; }
.rf-pay-option small { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 2px; }
/* Pay by card later — the button (and come-back link) on the done panel. */
.rf-paylater { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.rf-consent {
  color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0;
}
.rf-consent a { color: var(--blue); }

.rf-done {
  text-align: center; margin: 32px 0;
  border: 2px solid var(--green); border-radius: 16px;
  padding: 24px; background: var(--green-soft);
}
.rf-done h2 { font-size: 22px; font-weight: 900; color: var(--green); }
.rf-done p { color: var(--muted); margin-top: 8px; line-height: 1.6; }

/* After registering: get the app + save the site (renderRegisterNextSteps) */
.rf-next { display: grid; gap: 14px; margin: -16px 0 32px; }
.rf-step {
  border: 1px solid var(--panel-border); border-radius: 16px;
  padding: 20px; background: #fff; text-align: center;
}
.rf-step-app { border: 2px solid var(--blue); }
.rf-step-kicker {
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blue); margin: 0;
}
.rf-step h3 { font-size: 19px; font-weight: 900; margin: 6px 0 0; }
.rf-step p { color: var(--muted); line-height: 1.55; margin: 8px 0 0; }
.rf-copyrow {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin: 14px 0 0;
}
.rf-code {
  font-size: 30px; font-weight: 900; letter-spacing: .14em;
  font-variant-numeric: tabular-nums; user-select: all;
}
.rf-url { font-weight: 700; word-break: break-all; }
.rf-copy, .rf-share {
  font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  border: 1px solid var(--panel-border); border-radius: 10px;
  background: var(--blue-soft); color: var(--blue); padding: 8px 14px;
}
.rf-share { margin-top: 12px; }
.rf-app-btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; margin-top: 16px; border-radius: 14px;
  background: var(--blue); color: #fff; text-decoration: none;
  font-weight: 800; font-size: 16px;
}
.rf-app-btn:hover { filter: brightness(1.06); }
.rf-play, .rf-site-link {
  display: inline-block; margin-top: 12px;
  color: var(--blue); font-weight: 700; font-size: 14px;
}

@media (max-width: 560px) {
  .rf-head h1 { font-size: 22px; }
  .rf-price b { font-size: 26px; }
  .rf-group { padding: 12px 12px 14px; }
}