/* Topper10's own band on /games/topper10 (T10SITE1).

   Inside its page Topper10 keeps its identity (ADR 0016 §4) and, since the
   rebrand (T10BRAND1, owner 2026-10-04), it is the app's: the decision-7
   wordmark (TOPPER + the drawn "10"), Night ground, Archivo type, the app's
   indigo action colour and its gold rule. Both colour schemes keep the band
   dark, because the screenshots under it are dark captures.

   Linked only by games/topper10.html, after the studio stylesheet, with a
   `?v=` query to bump whenever this file changes. Nothing here may style the
   studio shell: every rule is scoped to `.t10-band` (or `.facts`, which only
   this page uses).

   It also overrides every property the studio stylesheet's old `.t10-band`
   block set, so a visitor holding a day-old cached copy of that stylesheet
   (vercel.json caches /assets/* for a day) still sees this band. */

/* Archivo (OFL 1.1, licence beside the files): Regular and Bold, static,
   subset by scripts/site/topper10_site.py to the studio's range, so every
   pt-BR and es letter is in. The wordmark is outlined SVG and loads no font.
   Fallbacks are metric-matched to the band's copy (numbers printed by the
   same script). */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/archivo-400.woff2?v=2026-10-05") format("woff2");
  unicode-range:
    U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
    U+2009, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026,
    U+2039-203A, U+202F, U+20AC, U+2122, U+2192, U+2212;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/archivo-700.woff2?v=2026-10-05") format("woff2");
  unicode-range:
    U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
    U+2009, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026,
    U+2039-203A, U+202F, U+20AC, U+2122, U+2192, U+2212;
}

@font-face {
  font-family: "Archivo Fallback Roboto";
  font-weight: 100 599;
  src: local("Roboto"), local("Roboto-Regular");
  size-adjust: 99.03%;
  ascent-override: 88.66%;
  descent-override: 21.21%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Archivo Fallback Roboto";
  font-weight: 600 900;
  src: local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 104.5%;
  ascent-override: 84.02%;
  descent-override: 20.1%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Archivo Fallback Arial";
  font-weight: 100 599;
  src:
    local("Arial"), local("ArialMT"), local("Helvetica"),
    local("Liberation Sans"), local("LiberationSans");
  size-adjust: 97.96%;
  ascent-override: 89.63%;
  descent-override: 21.44%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Archivo Fallback Arial";
  font-weight: 600 900;
  src:
    local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"),
    local("Helvetica-Bold"), local("Liberation Sans Bold"),
    local("LiberationSans-Bold");
  size-adjust: 97.85%;
  ascent-override: 89.73%;
  descent-override: 21.46%;
  line-gap-override: 0%;
}

/* T10TOK1's Night palette (src/theme/tokens.ts). */
.t10-band {
  --t10-ground: #0a0e1a;
  --t10-ink: #f4f6fc;
  --t10-muted: #a3adcb; /* 8.62:1 on the ground */
  --t10-accent: #6c7cff;
  --t10-accent-hover: #8492ff;
  --t10-on-accent: #0a0e1a; /* 5.47:1 on the accent */
  --t10-edge: #6e7ba6; /* 4.63:1 on the ground */
  --t10-font:
    "Archivo", "Archivo Fallback Roboto", "Archivo Fallback Arial", system-ui,
    sans-serif;
  background: var(--t10-ground);
  color: var(--t10-muted);
  font-family: var(--t10-font);
  padding-block: clamp(3rem, 10vw, 6.5rem);
  color-scheme: dark;
}

.t10-band ::selection {
  background: var(--t10-accent);
  color: var(--t10-on-accent);
}

.t10-band .t10-title {
  margin: 0;
  color: var(--t10-ink);
  font-size: inherit;
  letter-spacing: normal;
  line-height: 1;
}

/* The wordmark is the heading; its text is in the visually hidden span. */
.t10-band .t10-wordmark {
  display: block;
  width: min(100%, 44rem);
  height: auto;
}

.t10-band .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.t10-band .hero__lede {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  line-height: 1.55;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  max-width: 38rem;
  color: var(--t10-muted);
}

.t10-band :focus-visible {
  outline: 2px solid var(--t10-ink);
  outline-offset: 3px;
}

/* The app's action button: indigo with ground-coloured ink, as in-app. */
.t10-band .btn--primary {
  background: var(--t10-accent);
  color: var(--t10-on-accent);
  font-family: var(--t10-font);
  font-weight: 700;
  border-radius: 14px;
  padding-inline: 1.5rem;
}

.t10-band .btn--primary:hover {
  background: var(--t10-accent-hover);
}

.t10-band .btn-row .note {
  color: var(--t10-muted);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.facts li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Separators take the edge colour, not gold: gold means perfect, streak and
   coin, and nothing else (owner decision 8). */
.facts li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--t10-edge);
}