/* Top Down Tabletop — public landing site shared stylesheet.
   Extracted from index.html's inline <style> (2026-09-08) so leaderboard.html
   can share the same design tokens and chrome. Page-specific rules (e.g. the
   leaderboard.html wide-wrap override) stay inline in their own page. */

/* Colour, font, gradient and pillar tokens now come from /shared/tokens.css,
   generated from packages/shared/src/design/tokens.ts. Add a value there, not
   here, so the landing site and the desktop app get it too. The section-accent
   and brand-chip systems below are phone-specific and stay. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--bg); /* solid base so overscroll/print never shows white behind the fixed gradient */
  background-image: radial-gradient(130% 80% at 50% -10%, #0F1F3A 0%, var(--bg) 55%); background-attachment: fixed;
  color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.6;
  overflow-x: hidden;
}
a { color: var(--cyan); text-decoration: none; }
img { display: block; max-width: 100%; }
/* An AUTHOR `display` rule beats the UA stylesheet's `[hidden]{display:none}`
   regardless of specificity -- origin wins before specificity is consulted --
   so the rule above silently re-showed every img we hide. The avatar fallback
   depends on it: wireAvatarFallback() hides a 404'd avatar and unhides the
   initials, and without this the broken-image glyph stayed laid out beside
   them. Keep this next to the rule that causes it. */
img[hidden] { display: none; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

/* faint cyan hexagon lattice behind everything (the logo sign's hex panel, v3) */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .04;
  background-image:
    linear-gradient(30deg, #0AE3F1 12%, transparent 12.5%, transparent 87%, #0AE3F1 87.5%, #0AE3F1),
    linear-gradient(150deg, #0AE3F1 12%, transparent 12.5%, transparent 87%, #0AE3F1 87.5%, #0AE3F1),
    linear-gradient(30deg, #0AE3F1 12%, transparent 12.5%, transparent 87%, #0AE3F1 87.5%, #0AE3F1),
    linear-gradient(150deg, #0AE3F1 12%, transparent 12.5%, transparent 87%, #0AE3F1 87.5%, #0AE3F1),
    linear-gradient(60deg, #0AE3F1 25%, transparent 25.5%, transparent 75%, #0AE3F1 75%, #0AE3F1),
    linear-gradient(60deg, #0AE3F1 25%, transparent 25.5%, transparent 75%, #0AE3F1 75%, #0AE3F1);
  background-size: 44px 76px;
  background-position: 0 0, 0 0, 22px 38px, 22px 38px, 0 0, 22px 38px;
}
.wrap { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* ── top nav ── */
.nav { display: flex; align-items: center; gap: 22px; padding: 18px 0; }
.nav .logo { height: 52px; width: auto; filter: drop-shadow(0 0 12px rgba(10,227,241,.3)); }
.nav .links { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav .links a { font-family: var(--head); font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.nav .links a:hover { color: var(--cyan); }
.nav .links a.dl { color: #fff; border: none; border-radius: 10px; padding: 9px 14px; background: var(--grad-primary); box-shadow: 0 0 14px rgba(255,0,166,.3); }
/* solid icon button for the Web Companion — filled cyan, app-grid icon + label */
.nav .links a.companion {
  display: inline-flex; align-items: center; gap: 7px; color: #00131a;
  background: var(--cyan); border-radius: 10px; padding: 9px 14px 9px 11px;
  box-shadow: 0 0 14px rgba(10,227,241,.3);
}
.nav .links a.companion:hover { color: #00131a; filter: brightness(1.08); }
.nav .links a.companion svg { width: 15px; height: 15px; display: block; }
@media (max-width: 780px) { .nav .links a:not(.dl):not(.companion) { display: none; } }
@media (max-width: 460px) { .nav .links a.companion span { display: none; } }

/* ── hero ── */
.hero { text-align: center; padding: 40px 0 26px; }
.hero .biglogo { height: clamp(150px, 24vw, 240px); width: auto; margin: 0 auto 10px; filter: drop-shadow(0 0 34px rgba(10,227,241,.28)); }
.hero h1 { font-family: var(--display); font-size: clamp(2.4rem, 6vw, 3.9rem); letter-spacing: .03em; line-height: 1; text-shadow: 0 0 34px rgba(10,227,241,.35); }
.hero h1 .alt { color: var(--cyan); }
.hero p.pitch { max-width: 640px; margin: 16px auto 26px; color: var(--dim); font-size: 1.05rem; }
.hero p.pitch b { color: var(--text); }
.hero .pitch-compact { display: none; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--head); font-weight: 700; font-size: .8rem;
       letter-spacing: .07em; text-transform: uppercase; padding: 16px 26px; border-radius: 13px; transition: transform .12s; }
.btn:active { transform: scale(.97); }
/* primary CTA (v3): the TABLETOP gradient, white text, magenta glow.
   .btn-grad is the canonical name; .btn-dl kept as an alias so the
   existing download buttons render the gradient with no markup change. */
.btn-grad, .btn-dl { background: var(--grad-primary); color: #fff; animation: ctaGlow 3s ease-in-out infinite; }
.btn-ghost { color: var(--text); background: var(--surface); border: 1px solid var(--border-hi); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
@keyframes ctaGlow { 0%,100% { box-shadow: 0 0 18px rgba(255,0,166,.35); } 50% { box-shadow: 0 0 36px rgba(255,0,166,.6); } }
.dl-note { margin-top: 12px; font-family: var(--mono); font-size: .68rem; color: var(--muted); }
/* secondary CTA wrapper — button + visible mono URL sub-note */
.cta-sub { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.cta-sub .url-note { font-family: var(--mono); font-size: .68rem; color: var(--muted); letter-spacing: .02em; }

/* ── signature: TWO live cam rigs, two cities, one game ───────────────────
   Each panel is a third-person view of a real setup — a boom-mounted webcam
   angled down over a table, a player at the near edge, cards dealt out on
   the mat. Same game on both tables, different rooms and different board
   states, which is the whole pitch: your table, any opponent.
   The art is two photographs in the single `.cam-shot` layer (they replaced a
   CSS/SVG illustration on 2026-08-04). To change a shot, swap the <img> — the
   frame, corner brackets, HUD chips, vignette, scanline and LIVE link all sit
   outside it and are unaffected. Source PNGs are in docs/; the served copies
   are WebP q82 (4.1MB -> 175KB). */
.cam-pair { margin: 44px auto 0; max-width: 1000px; display: grid;
            grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.cam-panel { position: relative; margin: 0; border-radius: 18px; overflow: hidden;
             border: 1px solid var(--border-hi); background: #050D24;
             box-shadow: 0 0 44px rgba(10,227,241,.12), inset 0 0 80px rgba(0,0,0,.6); }
/* 280px, not 236: the source photos are 3:2 and the panel is much wider than
   tall, so `cover` crops top and bottom. At 236 that crop ate the top of the
   webcam — the hero object. 280 keeps the whole rig in frame. */
.cam-shot { position: relative; display: block; height: 280px; }
.cam-shot > svg { display: block; width: 100%; height: 100%; }
.cam-photo { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* NOTE: there is deliberately no per-panel colour tint over the photos. The
   warm-lamp Houston shot and the cold-window London shot already carry their
   own room temperature; laying an amber/blue radial on top of that blew out
   the highlights. The tint layer only made sense for the flat SVG version. */
.cam-panel .wash { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgba(10,15,30,.82), transparent 34%, transparent 66%, rgba(10,15,30,.92)); }
.cam-panel .scan { position: absolute; left: 0; right: 0; height: 42px; top: -42px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(10,227,241,.06), transparent);
  animation: scan 9s linear infinite; }
@keyframes scan { to { top: 100%; } }
.cam-panel .corner { position: absolute; width: 22px; height: 22px; border: 2px solid var(--gold); opacity: .8; }
.cam-panel .c1 { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.cam-panel .c2 { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.cam-panel .c3 { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.cam-panel .c4 { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
/* HUD chips — what the app actually overlays on a live match */
.hud { position: absolute; font-family: var(--mono); font-size: .62rem; letter-spacing: .05em; white-space: nowrap;
       background: rgba(5,13,36,.88); border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; color: var(--dim);
       backdrop-filter: blur(3px); }
.hud b { color: var(--cyan); font-weight: 700; }
.hud .rec { color: var(--magenta); animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 50% { opacity: .25; } }
/* Chips sit TOP-RIGHT / BOTTOM-LEFT because those are the dark quadrants in
   BOTH photos. Top-left is the lamp bulb in Houston and the bright rainy
   window in London — a chip there was unreadable. */
.hud-cam { top: 12px; right: 40px; }
.hud-hp  { bottom: 12px; left: 40px; }
.hud-hp .me { color: var(--cyan); } .hud-hp .them { color: var(--magenta); }
/* the link between the two rooms — the "over the web" part, made literal */
.cam-link { display: flex; flex-direction: column; align-items: center; gap: 6px;
            font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; color: var(--muted); }
.cam-link .wire { width: 2px; height: 74px; border-radius: 2px;
  background: repeating-linear-gradient(180deg, var(--cyan) 0 6px, transparent 6px 12px);
  opacity: .55; animation: wire 1.1s linear infinite; }
@keyframes wire { to { background-position-y: 12px; } }
.cam-link .live { font-family: var(--head); font-size: .56rem; font-weight: 700; letter-spacing: .14em;
  color: var(--green); border: 1px solid rgba(0,230,118,.4); border-radius: 20px; padding: 5px 10px;
  background: color-mix(in srgb, var(--green) 12%, #050D24); }
@media (max-width: 860px) {
  .cam-pair { grid-template-columns: 1fr; gap: 10px; max-width: 480px; }
  .cam-link { flex-direction: row; gap: 10px; }
  .cam-link .wire { width: 74px; height: 2px;
    background: repeating-linear-gradient(90deg, var(--cyan) 0 6px, transparent 6px 12px); }
  .cam-shot { height: 200px; }
}

/* ── sections ── */
section { padding: 72px 0 0; }
.eyebrow { font-family: var(--head); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
           color: var(--cyan); display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.eyebrow::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-hi), transparent); }
h2 { font-family: var(--display); font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: .03em; margin-bottom: 8px; }
.sub { color: var(--dim); max-width: 640px; margin-bottom: 30px; }

/* games — pack-catalog tiles */
.games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 800px) { .games { grid-template-columns: repeat(2, 1fr); } }
.game { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border);
        border-radius: 16px; padding: 22px 18px 18px; text-align: center; transition: border-color .15s, box-shadow .15s; }
.game:hover { border-color: var(--border-hi); box-shadow: 0 0 22px rgba(10,227,241,.12); }
.game .gwash { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 60% at 50% 0%, rgba(10,227,241,.06), transparent); }
/* uniform light "pack plate" — several official logos are dark art that
   vanishes on the dark card (MTG, Lorcana, One Piece) */
.game .plate { position: relative; height: 92px; border-radius: 12px; margin-bottom: 14px;
               display: flex; align-items: center; justify-content: center;
               background: linear-gradient(180deg, #f4f6fa, #d8deea);
               box-shadow: inset 0 -3px 8px rgba(10,15,30,.18), 0 4px 16px rgba(0,0,0,.4); }
.game img { max-height: 64px; width: auto; max-width: 84%; object-fit: contain; }
.game .gname { font-family: var(--head); font-weight: 700; font-size: .78rem; letter-spacing: .04em; margin-bottom: 10px; position: relative; }
.chip { display: inline-block; font-family: var(--mono); font-size: .6rem; letter-spacing: .06em; padding: 4px 10px;
        border-radius: 20px; border: 1px solid var(--border); color: var(--muted); position: relative; }
.game.live .chip { color: var(--gold); border-color: rgba(255,192,0,.5); background: rgba(255,192,0,.1); }
.game.live { border-color: rgba(255,192,0,.4); }
.game.live .gwash { background: radial-gradient(90% 60% at 50% 0%, rgba(255,192,0,.12), transparent); }
/* center a lone tile on the last row (7 games in a 3-col grid) */
.games .game:last-child:nth-child(3n + 1) { grid-column: 2; }
@media (max-width: 800px) { .games .game:last-child:nth-child(3n + 1) { grid-column: auto; } }

/* ── quick play: two paths to a match, plus real per-game formats ── */
.path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 30px; }
@media (max-width: 700px) { .path-grid { grid-template-columns: 1fr; } }
.path-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border);
             border-radius: 16px; padding: 24px 22px; }
.path-card .pwash { position: absolute; inset: 0; pointer-events: none; }
.path-card .pic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 12px; }
.path-card .pic svg { width: 22px; height: 22px; }
.path-card h3 { font-family: var(--head); font-size: .95rem; letter-spacing: .04em; margin-bottom: 8px; position: relative; }
.path-card p { color: var(--dim); font-size: .92rem; position: relative; }
.path-card.cam { border-color: rgba(10,227,241,.35); }
.path-card.cam .pwash { background: linear-gradient(160deg, rgba(10,227,241,.13), transparent 55%); }
.path-card.cam .pic { background: rgba(10,227,241,.14); color: var(--cyan); box-shadow: 0 0 18px rgba(10,227,241,.18); }
.path-card.local { border-color: rgba(255,192,0,.4); }
.path-card.local .pwash { background: linear-gradient(160deg, rgba(255,192,0,.13), transparent 55%); }
.path-card.local .pic { background: rgba(255,192,0,.16); color: var(--gold); box-shadow: 0 0 18px rgba(255,192,0,.2); }

.format-lead { font-family: var(--head); font-size: .8rem; letter-spacing: .04em; color: var(--text); margin-bottom: 14px; }
.format-strip { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 14px; margin: 0 -2px; }
.format-strip::-webkit-scrollbar { height: 6px; }
.format-strip::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 3px; }
.fgroup { flex: 0 0 auto; min-width: 168px; background: var(--input); border: 1px solid var(--border);
          border-radius: 12px; padding: 14px 14px 12px; }
.fgroup .fname { font-family: var(--head); font-size: .68rem; letter-spacing: .03em; color: var(--text); margin-bottom: 10px; }
.fgroup .fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { font-family: var(--mono); font-size: .62rem; letter-spacing: .03em; color: var(--dim);
         border: 1px solid var(--border-hi); border-radius: 20px; padding: 4px 9px; white-space: nowrap; }

/* ── track & achievements: one jagged "marquee sign" panel — the signature risk ── */
.track-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 34px; align-items: center; }
@media (max-width: 860px) { .track-layout { grid-template-columns: 1fr; } }
.track-copy .sub { margin-bottom: 18px; }
.track-points { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.track-points li { position: relative; padding-left: 20px; color: var(--dim); font-size: .92rem; }
.track-points li::before { content: '▸'; position: absolute; left: 0; top: 0; color: var(--gold); font-family: var(--mono); }
.track-points b { color: var(--text); }

.sample-card {
  position: relative; background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1.5px solid var(--border-hi); padding: 46px 42px 34px;
  box-shadow: 0 0 46px rgba(10,227,241,.1), 0 0 90px rgba(255,0,166,.06), inset 0 0 60px rgba(0,0,0,.25);
  clip-path: polygon(
    1.5% 6%, 5% 0%, 95% 0%, 98.5% 6%,
    100% 18%, 96% 27%, 100% 38%, 96% 47%,
    100% 58%, 96% 67%, 100% 78%, 96% 87%,
    100% 94%, 95% 100%, 5% 100%, 0% 94%,
    4% 87%, 0% 78%, 4% 67%, 0% 58%,
    4% 47%, 0% 38%, 4% 27%, 0% 18%
  );
}
@media (max-width: 560px) {
  .sample-card { padding: 36px 24px 26px;
    clip-path: polygon(4% 0%, 96% 0%, 100% 8%, 100% 92%, 96% 100%, 4% 100%, 0% 92%, 0% 8%); }
}
.sample-tag { position: absolute; top: 18px; right: 18px; background: var(--gold); color: #23180a;
              font-family: var(--mono); font-weight: 700; font-size: .58rem; letter-spacing: .08em;
              padding: 5px 10px; border-radius: 3px; transform: rotate(3deg);
              box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.sample-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.sample-avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
                  background: linear-gradient(135deg, var(--cyan), var(--magenta));
                  display: flex; align-items: center; justify-content: center;
                  font-family: var(--head); font-weight: 700; font-size: .85rem; color: #081018; }
.sample-name { font-family: var(--head); font-size: 1rem; letter-spacing: .03em; color: var(--text); }
.sample-meta { font-family: var(--mono); font-size: .68rem; color: var(--muted); margin-top: 3px; }
.sample-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; margin-bottom: 22px; }
@media (max-width: 420px) { .sample-stats { grid-template-columns: repeat(2, 1fr); } }
.sample-stats .stat-label { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.sample-stats .stat-val { font-family: var(--head); font-size: 1.3rem; font-weight: 700; color: var(--text); margin-top: 2px; }
.sample-stats .stat-val.hl { color: var(--cyan); }
.sample-block-label { font-family: var(--head); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 9px; }
.sample-chars { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.char-chip { font-family: var(--mono); font-size: .64rem; color: var(--dim); background: rgba(10,227,241,.06);
             border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px; }
.char-chip b { color: var(--text); font-weight: 700; }
.sample-achievements { display: flex; flex-wrap: wrap; gap: 8px; }
.ach { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .64rem;
       color: var(--dim); background: var(--input); border: 1px solid var(--border-hi); padding: 7px 12px 7px 10px;
       clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.sample-caption { margin-top: 14px; color: var(--muted); font-size: .74rem; font-style: italic; text-align: center; }

/* ── local shops ── */
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 800px) { .shop-grid { grid-template-columns: 1fr; } }
.shop-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border);
             border-radius: 16px; padding: 24px 22px; }
.shop-card .swash { position: absolute; inset: 0; pointer-events: none; }
.shop-card .sic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 12px; }
.shop-card .sic svg { width: 22px; height: 22px; }
.shop-card h3 { font-family: var(--head); font-size: .95rem; letter-spacing: .04em; margin-bottom: 8px; position: relative; }
.shop-card p { color: var(--dim); font-size: .92rem; position: relative; }
.shop-card.gold { border-color: rgba(255,192,0,.4); }
.shop-card.gold .swash { background: linear-gradient(160deg, rgba(255,192,0,.13), transparent 55%); }
.shop-card.gold .sic { background: rgba(255,192,0,.16); color: var(--gold); box-shadow: 0 0 18px rgba(255,192,0,.2); }
.shop-card.mag { border-color: rgba(255,0,166,.35); }
.shop-card.mag .swash { background: linear-gradient(160deg, rgba(255,0,166,.13), transparent 55%); }
.shop-card.mag .sic { background: rgba(255,0,166,.14); color: var(--magenta); box-shadow: 0 0 18px rgba(255,0,166,.18); }
.shop-card.cy { border-color: rgba(10,227,241,.35); }
.shop-card.cy .swash { background: linear-gradient(160deg, rgba(10,227,241,.13), transparent 55%); }
.shop-card.cy .sic { background: rgba(10,227,241,.14); color: var(--cyan); box-shadow: 0 0 18px rgba(10,227,241,.18); }
.mock-chip { position: relative; display: block; margin-top: 14px; font-family: var(--mono); font-size: .64rem;
             letter-spacing: .03em; background: rgba(5,13,36,.6); border: 1px solid var(--border);
             border-radius: 8px; padding: 9px 12px; color: var(--dim); }
.mock-chip b { color: var(--cyan); }

/* bottom CTA */
.bottom-cta { margin-top: 76px; text-align: center; border: 1px solid var(--border-hi); border-radius: 20px;
              padding: 46px 24px; position: relative; overflow: hidden;
              background: linear-gradient(135deg, rgba(10,227,241,.09), rgba(255,0,166,.05)); }
.bottom-cta h2 { margin-bottom: 6px; }
.bottom-cta p { color: var(--dim); margin-bottom: 24px; }

/* footer */
footer { margin-top: 70px; padding: 30px 0 44px; border-top: 1px solid var(--border); }
.flinks { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 16px; }
.flinks a { font-family: var(--head); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.flinks a:hover { color: var(--cyan); }
.fine { color: var(--muted); font-size: .74rem; max-width: 840px; }
.fine + .fine { margin-top: 10px; }
.publisher-mark { display: flex; align-items: center; gap: 8px; opacity: .8; }
.publisher-mark img { height: 16px; width: auto; opacity: .75; filter: grayscale(.3); }

/* load-in sequence */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px); animation: rise .6s ease forwards; }
  .rise.d1 { animation-delay: .08s; } .rise.d2 { animation-delay: .18s; } .rise.d3 { animation-delay: .3s; } .rise.d4 { animation-delay: .45s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .btn-dl, .cam-panel .scan, .hud .rec, .cam-link .wire { animation: none !important; }
}

/* ── Leaderboards & Ranks (shared embed, index.html + leaderboard.html) ── */
.lb-tabs { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 16px; margin: 0 -2px 4px; }
.lb-tabs::-webkit-scrollbar { height: 6px; }
.lb-tabs::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 3px; }
.lb-tab { background: none; border: 1px solid transparent; color: inherit; font: inherit; cursor: pointer;
          flex: 0 0 auto; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 6px;
          border-radius: 12px; padding: 8px 6px; transition: border-color .15s, box-shadow .15s; }
.lb-tab-plate { width: 100%; height: 52px; border-radius: 10px; background: linear-gradient(180deg, #f4f6fa, #d8deea);
                display: flex; align-items: center; justify-content: center;
                box-shadow: inset 0 -2px 6px rgba(10,15,30,.15), 0 3px 10px rgba(0,0,0,.3); }
.lb-tab-plate img { max-height: 32px; max-width: 78%; object-fit: contain; }
.lb-tab-label { font-family: var(--head); font-size: .6rem; letter-spacing: .02em; text-align: center; color: var(--dim); }
.lb-tab.on { border-color: var(--cyan); box-shadow: 0 0 16px rgba(10,227,241,.28);
             background: color-mix(in srgb, var(--cyan) 10%, var(--surface)); }
.lb-tab.on .lb-tab-label { color: var(--cyan); }

.lb-region-row { display: flex; justify-content: flex-end; margin: 0 0 14px; }
.lb-region-select { background: var(--input); border: 1px solid var(--border-hi); color: var(--text);
                     font-family: var(--mono); font-size: .72rem; border-radius: 8px; padding: 8px 10px; }

.lb-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 22px; align-items: start; }
@media (max-width: 760px) { .lb-layout { grid-template-columns: 1fr; } }

/* The ranked table itself is the shared `.tdtt-table` primitive (chrome.css) —
   see leaderboard.js's tableHtml()/tableRowHtml(). Only the page-local bits
   chrome.css doesn't already provide live here. */
.lb-table-wrap { overflow-x: auto; }
/* `.tdtt-table` is `table-layout: fixed`; the Rank (32px) and {RATING_LABEL}
   (84px, `.tdtt-table__num`) columns get their width from chrome.css, which
   leaves Player and Region — this page's only two plain-text columns — to
   split the remainder evenly by default. Region never needs half the table;
   this page-local override (not a shared-CSS edit) narrows it and lets
   Player take the rest, matching `.tdtt-table__name`'s truncation contract. */
.lb-table-wrap .tdtt-table th:last-child,
.lb-table-wrap .tdtt-table td:last-child { width: 110px; color: var(--text-dim); font-size: .8rem; }
/* The initials themselves carry NO type rules: `.tdtt-avatar` (controls.css)
   already sets the shared font, size and colour, and the design reference
   writes initials as the avatar's bare text content. This page needs the
   wrapper only so wireAvatarFallback() has something to unhide when an
   avatar image 404s, so it must not restyle what it wraps. */

.lb-skel-bar { height: 12px; border-radius: 6px; width: 100%;
               background: linear-gradient(90deg, var(--surface-2) 25%, var(--input) 37%, var(--surface-2) 63%);
               background-size: 400% 100%; animation: lbSkel 1.4s ease infinite; }
@keyframes lbSkel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.lb-empty, .lb-error { padding: 30px 16px; text-align: center; color: var(--dim); font-size: .86rem;
                        border: 1px dashed var(--border); border-radius: 12px; background: var(--surface); }
.lb-error { color: var(--muted); }

.lb-rail { display: flex; flex-direction: column; gap: 12px; }
.lb-rail-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.lb-rail-card h4 { font-family: var(--head); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase;
                    color: var(--gold); margin-bottom: 6px; }
.lb-rail-card p { color: var(--dim); font-size: .8rem; line-height: 1.5; }
.lb-rail-card a { color: var(--cyan); text-decoration: underline; }

.lb-view-full { display: inline-block; margin-top: 14px; font-family: var(--head); font-size: .7rem;
                letter-spacing: .06em; color: var(--cyan); }
.lb-signin-note { margin-top: 12px; font-size: .78rem; color: var(--muted); }
.lb-signin-note a { color: var(--cyan); }

/* ── Desktop format switch — pointer-fine, hover-capable, >=1024px only.
   Touch devices (phones, tablets) get the mobile/stacked format at ANY width. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .mobile-only { display: none; }

  .hero { text-align: left; padding: 48px 0 10px; }
  .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
  .hero-copy .biglogo { height: 84px; width: auto; margin: 0 0 16px; }
  .hero-copy h1 { font-size: clamp(2.1rem, 2.6vw, 2.9rem); }
  .hero-copy p.pitch { margin: 16px 0 24px; max-width: 480px; }
  .hero-copy .pitch-full { display: none; }
  .hero-copy .pitch-compact { display: block; }
  .hero-copy .cta-row { justify-content: flex-start; }
  .hero-copy .dl-note { text-align: left; }
  .hero-cams .cam-pair { margin: 0; max-width: none; }
  .hero-cams .cam-shot { height: 190px; }
}