/* K53 Pass /scores (public/scores.html, filled by functions/scores.js): the public high scores (mock 08).
   Tokens, topbar, footer, badge and the .stk sticker come from app.css; this file adds the page's own
   parts. Kept out of app.css for the same reason as socials.css (not in the service-worker precache). */
.scores { max-width: 1240px; padding-top: 0; }
.sb-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; margin: 0 calc(-1 * var(--gutter)); padding: 22px var(--gutter) 30px; background: var(--yellow); border-bottom: var(--bw) solid var(--ink); }
.sb-hero h1 { font-size: clamp(48px, 13vw, 96px); letter-spacing: -.035em; line-height: .95; }
.sb-lead { margin-top: 12px; max-width: 46ch; font-size: 19px; font-weight: 500; }
.sb-stickers { display: grid; justify-items: end; gap: 10px; }
.sb-players { color: var(--yellow) !important; background: var(--ink) !important; }
.sb-players svg { color: var(--red); }
.sb-fresh { transform: rotate(3deg); }
.sb-cols { display: grid; gap: 20px; margin-top: 28px; }
.sb { overflow: hidden; background: var(--white); border: var(--bw) solid var(--ink); border-radius: 24px; box-shadow: 0 6px 0 var(--ink); }
.sb-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 16px 18px; color: var(--white); border-bottom: var(--bw) solid var(--ink); }
.sb-head h2 { font-size: 26px; }
.sb-head span { font-size: 15px; font-weight: 800; }
.sb-daily .sb-head { background: var(--ink); }
.sb-daily .sb-head h2, .sb-daily .sb-head span { color: var(--yellow); }
.sb-week .sb-head { background: var(--red); }
.sb-all .sb-head { background: var(--blue); }
.sb-list { list-style: none; margin: 0; padding: 0; }
.sb-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 54px; padding: 6px 18px; font-size: 18px; }
.sb-list li + li { border-top: 3px solid var(--soft); }
.sb-rk { display: grid; place-items: center; width: 32px; height: 32px; font-weight: 900; }
.sb-1 .sb-rk { background: var(--yellow); border: var(--bw) solid var(--ink); border-radius: 50%; }
.sb-2 .sb-rk { background: var(--white); border: var(--bw) solid var(--ink); border-radius: 50%; }
.sb-3 .sb-rk { color: var(--yellow); background: var(--green); border: var(--bw) solid var(--ink); border-radius: 50%; }
.sb-nm { min-width: 0; font-weight: 800; overflow-wrap: anywhere; }
.sb-nm.anon { color: var(--muted); font-weight: 600; }
.sb-sc { font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-empty { padding: 18px; color: var(--muted); font-weight: 700; }
.sb-more { display: flex; align-items: center; justify-content: center; min-height: 56px; border-top: 3px solid var(--soft); font-size: 18px; font-weight: 900; }
.sb-prov { margin-top: 26px; padding: 18px; background: var(--cream); border: var(--bw) solid var(--ink); border-radius: 22px; }
.sb-prov h2 { font-size: 24px; }
.sb-prov ol { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sb-prov li { padding: 6px 14px; background: var(--white); border: var(--bw) solid var(--ink); border-radius: 999px; font-weight: 800; }
.sb-prov li span { margin-left: 6px; font-weight: 900; }
.sb-prov p { font-size: 15px; }
.sb-cta { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 20px; margin-top: 32px; padding: 22px 20px; color: var(--white); background: var(--red); border: var(--bw) solid var(--ink); border-radius: 26px; box-shadow: 0 6px 0 var(--ink); }
.sb-cta h2 { font-size: clamp(26px, 6vw, 40px); }
.sb-cta p { margin-top: 4px; font-size: 17px; }
.sb-eight { display: grid; place-items: center; width: 84px; height: 84px; color: var(--ink); background: var(--yellow); border: 7px solid var(--ink); border-radius: 50%; box-shadow: inset 0 0 0 5px var(--white); font-size: 44px; font-weight: 900; }
.sb-go { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; padding: 8px 26px; color: var(--ink); background: var(--white); border: var(--bw) solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink); font-size: 22px; font-weight: 900; text-decoration: none; }
.sb-go:hover { background: var(--cream); }
.sb-note { margin-top: 22px; max-width: 70ch; color: var(--muted); font-size: 15px; }
@media (min-width: 900px) {
  .sb-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sb-cols.one { grid-template-columns: minmax(0, 640px); }
  .sb-cta { grid-template-columns: auto minmax(0, 1fr) auto; }
  .sb-go { grid-column: auto; }
  .sb-hero { margin: 24px 0 0; padding: 30px 30px 34px; border: var(--bw) solid var(--ink); border-radius: var(--r-big); }
}