/* Top Down Tabletop: /about (the player page). Loads after landing.css and for-shops.css, which
   supply the nav, buttons, section bands, hero, benefit cards, tabbed showcase and FAQ.
   This file only adapts the player-page pieces (games tiles, formats, credits, leaderboard
   gate, local-play feature panel, shop teaser) to those light and dark bands. Tokens only. */

/* Nav: keep the Web Companion icon on phones (for-shops.css hides every link but the CTA). */
@media (max-width: 780px) {
  .nav .links a.companion:not(.dl) { display: inline-flex; }
}
@media (max-width: 460px) {
  .nav { gap: 12px; }
  .nav .links { gap: 10px; }
  .nav .logo { height: 44px; }
}

/* Hero download note */
.fs-hero .dl-note { margin-top: 14px; }
.fs-lede b { color: var(--text); }
.fs-cta { align-items: flex-start; }

/* Showcase: four tabs instead of five */
.about-tabs .fs-tab:last-child { grid-column: auto; }
@media (min-width: 761px) {
  .about-tabs.fs-tabs-on .fs-tablist { grid-template-columns: repeat(4, 1fr); }
}

/* Local Play feature panel (no screenshot exists, so a styled panel stands in) */
.about-feature { min-width: 0; padding: 28px 24px; border: 1px solid var(--border-hi); border-radius: 14px;
  background: linear-gradient(160deg, var(--surface-2) 0%, var(--input) 100%);
  box-shadow: 0 0 28px var(--border), 0 14px 32px var(--bg); }
.about-feature-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 12px;
  color: var(--gold); background: var(--surface); border: 1px solid var(--border-hi); }
.about-feature-ic svg { display: block; width: 24px; height: 24px; }
.about-feature-title { font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--text); }
.about-feature-text { color: var(--text); font-size: .94rem; margin-top: 6px; }

/* Leaderboard gate sits on a light band: keep its card dark and readable */
.about-lb-sub { margin: 30px 0 14px; }
.fs-light .lb-gate-card { color: var(--text); }
.fs-light .lb-gate-title { color: var(--text); }
.fs-light .lb-gate-sub { color: var(--dim); }

/* Games tiles stay dark cards on the light band */
.fs-light .game { color: var(--text); }
.fs-light .game a:not(.btn) { text-decoration: none; }
.fs-light .game .gname { color: var(--text); }
.fs-light .game .game-official { color: var(--cyan); }
.fs-light .game .game-official:hover, .fs-light .game .game-official:focus-visible { text-decoration: underline; }
.fs-light .game .chip { color: var(--muted); }
.fs-light .game.live .chip { color: var(--gold); }
.format-lead { margin-top: 34px; color: var(--section-light-ink); }
.fs-light .fgroup .fname { color: var(--text); }

/* Credits on the light band */
.credits-list { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.fs-light .credit-item { background: var(--card-paper); border-color: var(--section-light-rule); }
.fs-light .credit-item h3 { color: var(--section-light-ink); }
.fs-light .credit-licence, .fs-light .credit-line, .fs-light .credit-notice { color: var(--section-light-ink-dim); }

/* Shop teaser on the dark band */
.about-teaser { margin-top: 28px; padding: 26px 22px; border: 1px solid var(--border-hi); border-top: 3px solid var(--magenta);
  border-radius: 16px; background: radial-gradient(120% 90% at 100% 0%, var(--surface-2) 0%, var(--surface) 60%, var(--bg) 100%); }
.about-teaser h3 { font-family: var(--display); font-weight: 800; font-size: 1.3rem; margin-bottom: 8px; }
.about-teaser p { color: var(--text); margin-bottom: 18px; max-width: 640px; }
.fs-dark .shop-card h3 { color: var(--text); }
.shop-grid { margin-bottom: 0; }

/* Phones: nothing may force the page wider than the viewport */
@media (max-width: 460px) {
  .about-feature { padding: 20px 16px; }
  .about-teaser { padding: 20px 16px; }
  .fs-cta .btn, .fs-start .cta-row .btn { width: 100%; justify-content: center; text-align: center; }
  .cta-sub { width: 100%; }
}