/* /stats: Stats & Supporters for Kaptain Stream. Tokens follow DESIGN.md (obsidian, glass hairlines, one mint accent). */
/* No reserved gutter here: the page is always taller than the screen, and with overlay scrollbars a reserved gutter shows as a dark stripe beside the poster wall. */
html:has(body.st-page) { scrollbar-gutter: auto; }
/* The shared stylesheet makes html and body scroll containers, which breaks position: sticky. Clip sideways instead. */
html:has(body.st-page), body.st-page { overflow: visible; overflow-x: clip; }
.st-page {
  --st-bg: #08090d; --st-card: rgba(21,25,35,.75); --st-border: rgba(255,255,255,.08); --st-border-hi: rgba(255,255,255,.18);
  --st-accent: #00f5a0; --st-accent-text: #6dfac4; --st-on-accent: #04130d; --st-accent-soft: rgba(0,245,160,.12);
  --st-text: hsl(0,0%,98%); --st-text-2: hsl(240,5%,75%); --st-text-3: hsl(240,5%,55%);
  --st-bar: rgba(255,255,255,.16); --st-bar-hi: rgba(255,255,255,.3); --st-native: rgba(255,255,255,.3);
  --st-ease: cubic-bezier(.2,0,0,1); --st-hdr: 56px;
  margin: 0; background: var(--st-bg); color: var(--st-text); font-family: Inter, system-ui, sans-serif;
}
html[data-theme="light"] .st-page {
  --st-bg: #f6f7f9; --st-card: #fff; --st-border: rgba(10,14,22,.12); --st-border-hi: rgba(10,14,22,.28);
  --st-accent-text: #00805a; --st-accent-soft: rgba(0,128,90,.1);
  --st-text: #0b0d12; --st-text-2: #3b4252; --st-text-3: #596175;
  --st-bar: rgba(10,14,22,.16); --st-bar-hi: rgba(10,14,22,.32); --st-native: rgba(10,14,22,.3);
}
.st-page ::selection { background: rgba(0,245,160,.3); color: inherit; }
.st-page :focus-visible { outline: 2px solid var(--st-accent-text); outline-offset: 3px; border-radius: 6px; }

.st-main { max-width: 1120px; margin: 0 auto; padding: calc(var(--st-hdr) + 28px) 20px 96px; }
@media (min-width: 1800px) { .st-main { max-width: 1360px; } }

.st-hero h1 { font-family: Outfit, Inter, sans-serif; font-weight: 800; font-size: clamp(1.7rem, 3.2vw, 2.3rem); line-height: 1.1; margin: 0 0 8px; text-wrap: balance; }
.st-hero p { color: var(--st-text-2); margin: 0; max-width: 60ch; line-height: 1.5; }

/* The board: one panel, the big number on the left, the two live tallies on the right. */
.st-board { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); margin-top: 28px; background: var(--st-card); border: 1px solid var(--st-border); border-radius: 16px; }
.st-visits { padding: 24px 32px 26px; min-width: 0; }
.st-side { border-left: 1px solid var(--st-border); display: flex; flex-direction: column; min-width: 0; }
.st-tally { padding: 24px 28px; }
.st-tally + .st-tally { border-top: 1px solid var(--st-border); }

.st-label { margin: 0; font-size: .88rem; font-weight: 600; color: var(--st-text-3); }
.st-big, .st-mid { margin: 6px 0 0; font-family: Outfit, Inter, sans-serif; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--st-text); }
.st-big { font-size: clamp(3.1rem, 9vw, 5.6rem); }
.st-mid { font-size: clamp(2.1rem, 4.4vw, 2.9rem); }
.st-sub { margin: 10px 0 0; color: var(--st-text-2); font-size: .92rem; line-height: 1.45; font-variant-numeric: tabular-nums; }

/* 14-day chart: real bars from the real series, with the value on hover or focus. */
.st-chart { margin-top: 26px; }
.st-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.st-chart-title { margin: 0; font-size: .88rem; font-weight: 600; color: var(--st-text-3); }
.st-chart-peak { font-size: .78rem; color: var(--st-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-chart-peak:empty { display: none; }
/* The hairline under the bars is the zero line, so a day with no visits still reads as zero. */
.st-bars { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: 5px; height: 132px; border-bottom: 1px solid var(--st-border-hi); }
.st-bars li { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; border-radius: 6px; }
.st-bar { display: block; width: 100%; background: var(--st-bar); border-radius: 5px 5px 2px 2px; transform-origin: bottom; transition: background .15s var(--st-ease); animation: st-grow .7s var(--st-ease) calc(var(--i, 0) * 35ms) backwards; }
.st-bars li:last-child .st-bar { background: var(--st-accent); }
/* :focus, not only :focus-visible, so tapping a bar on a phone shows its value; the keyboard ring still comes from :focus-visible. */
.st-bars li:hover .st-bar, .st-bars li:focus .st-bar { background: var(--st-bar-hi); }
.st-bars li:last-child:hover .st-bar, .st-bars li:last-child:focus .st-bar { background: var(--st-accent-text); }
.st-tip-bubble { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 6px 10px; border-radius: 8px; background: hsl(240,10%,10%); color: hsl(0,0%,98%); border: 1px solid var(--st-border-hi); font-size: .78rem; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s var(--st-ease); z-index: 2; font-variant-numeric: tabular-nums; }
.st-bars li:hover .st-tip-bubble, .st-bars li:focus .st-tip-bubble { opacity: 1; }
.st-bars li:first-child .st-tip-bubble { left: 0; transform: none; }
.st-bars li:last-child .st-tip-bubble { left: auto; right: 0; transform: none; }
.st-axis { display: flex; justify-content: space-between; margin-top: 10px; color: var(--st-text-3); font-size: .78rem; font-variant-numeric: tabular-nums; }
@keyframes st-grow { from { transform: scaleY(0); } to { transform: none; } }

/* AIO vs Native split: two flat segments, mint for AIO. */
.st-split { margin-top: 16px; }
.st-split-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--st-bar); }
.st-split-aio { background: var(--st-accent); transition: width .6s var(--st-ease); }
.st-split-native { background: var(--st-native); flex: 1 1 auto; }
.st-split-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; color: var(--st-text-2); font-size: .86rem; }
.st-split-legend b { color: var(--st-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.st-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
.st-dot-aio { background: var(--st-accent); }
.st-dot-native { background: var(--st-native); }

/* On the site right now: the one live element on the page. The ring expands, it does not glow. */
.st-mid-live { display: flex; align-items: center; gap: 14px; padding-left: 6px; }
.st-pulse { position: relative; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--st-accent); }
.st-pulse::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--st-accent); animation: st-ring 2.4s var(--st-ease) infinite; }
/* Nobody on the site: a still, grey mark. The ring only exists while the count is real. */
.st-mid-live[data-live="0"] .st-pulse { background: var(--st-text-3); }
.st-mid-live[data-live="0"] .st-pulse::after { display: none; }
@keyframes st-ring { from { transform: scale(.8); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }

.st-notice { margin: 16px 0 0; padding: 14px 18px; background: var(--st-card); border: 1px solid var(--st-border); border-radius: 12px; color: var(--st-text-2); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.st-notice[hidden] { display: none; }
.st-retry { min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--st-border-hi); background: rgba(255,255,255,.03); color: var(--st-text); font: inherit; font-weight: 600; cursor: pointer; }
.st-retry:hover { border-color: var(--st-accent-text); }

/* Ranked lists: plain rows with a quiet bar behind each, never cards. */
/* auto-fit: only the lists that have data take a column, so two lists fill the row instead of leaving a gap. */
.st-ranks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; margin-top: 56px; }
.st-rank { max-width: 520px; }
.st-ranks[hidden], .st-rank[hidden] { display: none; }
.st-rank h2 { font-family: Outfit, Inter, sans-serif; font-weight: 700; font-size: 1.08rem; margin: 0 0 14px; }
.st-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.st-row { position: relative; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 10px; overflow: hidden; font-variant-numeric: tabular-nums; }
/* The share is a thin baseline under each row, not a fill behind the name, so a name never straddles a bar edge. */
/* Which period a breakdown covers, and each country's share of the visits counted. */
.st-note { margin: -8px 0 14px; color: var(--st-text-3); font-size: .86rem; }
.st-note[hidden] { display: none; }
.st-row-pct { margin-right: 10px; color: var(--st-text-3); font-size: .84rem; }
/* Artwork lists: a small rounded frame between the rank and the name; the slot is there on every row so names line up. */
.st-row.has-art { grid-template-columns: 1.6rem 52px minmax(0, 1fr) auto; }
.st-row-art { width: 52px; height: 30px; border-radius: 6px; overflow: hidden; background: hsl(240, 10%, 10%); border: 1px solid var(--st-border); }
.st-row-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Services with real artwork: a strip of art tiles. The rank is a small badge on the picture, the name and count sit underneath. */
.st-rows.st-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.st-tiles .st-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "art art" "name n" "bar bar"; row-gap: 8px; align-items: center; min-height: 0; padding: 0; border-radius: 12px; overflow: visible; }
.st-tiles .st-row-art { grid-area: art; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; }
.st-tiles .st-row > .st-row-rank { position: absolute; top: 8px; left: 8px; z-index: 1; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: rgba(8, 9, 13, .72); color: var(--st-text); font-size: .78rem; font-weight: 600; }
.st-tiles .st-row-name { grid-area: name; }
.st-tiles .st-row-n { grid-area: n; }
.st-tiles .st-row > .st-row-bar { grid-area: bar; position: static; width: calc(100% * var(--share-n, 0)); height: 3px; inset: auto; }
/* The countries section spans the row: the dotted map beside the exact numbers. */
.st-rank-wide { grid-column: 1 / -1; max-width: none; }
.st-geo { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.st-map { min-width: 0; }
@media (max-width: 860px) { .st-geo { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.st-row-bar { position: absolute; inset: auto auto 0 12px; width: calc((100% - 24px) * var(--share-n, 0)); height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--st-accent) 45%, transparent); transition: width .6s var(--st-ease); }
.st-row > :not(.st-row-bar) { position: relative; }
.st-row-rank { color: var(--st-text-3); font-size: .86rem; }
.st-row-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-row-n { color: var(--st-text-2); font-size: .9rem; }

/* Supporters: a calm two-column band, the thank-you on the left and the names on the right. */
.st-supporters { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); gap: 40px; margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--st-border); }
.st-sup-head h2 { font-family: Outfit, Inter, sans-serif; font-weight: 700; font-size: 1.4rem; margin: 0 0 10px; }
.st-sup-head p { margin: 0 0 6px; color: var(--st-text-2); line-height: 1.55; max-width: 44ch; }
.st-tip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--st-accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.st-tip:hover { text-decoration-thickness: 2px; }
.st-names { list-style: none; margin: 0; padding: 0; columns: 13rem; column-gap: 28px; }
.st-names:empty { display: none; }
.st-names li { break-inside: avoid; padding: 7px 0; font-weight: 500; line-height: 1.35; }
.st-names small { display: block; color: var(--st-text-3); font-weight: 400; font-size: .8rem; }
/* Day one the board is honestly empty: give that a deliberate place instead of a bare paragraph. */
.st-sup-body { padding-top: 4px; }
/* Letterbox: two hairlines above and below a centred line, like a title card before the credits roll. */
.st-empty { margin: 0; padding: 28px 8px; border-top: 1px solid var(--st-border-hi); border-bottom: 1px solid var(--st-border-hi); text-align: center; color: var(--st-text-2); line-height: 1.6; }
.st-empty[hidden] { display: none; }

.st-how { margin-top: 56px; color: var(--st-text-3); max-width: 70ch; }
.st-how summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--st-text-2); list-style: none; }
.st-how summary::-webkit-details-marker { display: none; }
/* A drawn chevron (1.8px stroke) says it opens, and turns when it is open. */
.st-how summary::after { content: ''; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s var(--st-ease); }
.st-how[open] summary::after { transform: rotate(180deg); }
.st-how p { margin: 4px 0 0; line-height: 1.6; font-size: .92rem; }

@media (max-width: 860px) {
  .st-board { grid-template-columns: minmax(0, 1fr); }
  .st-side { border-left: 0; border-top: 1px solid var(--st-border); }
  .st-ranks { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .st-supporters { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 520px) {
  /* The leader gets a full-width tile, then two by two, so no tile is left alone in a row. */
  .st-tiles .st-row:first-child { grid-column: 1 / -1; }
  .st-visits { padding: 22px 20px 20px; }
  .st-tally { padding: 20px; }
  .st-bars { gap: 3px; height: 108px; }
}
/* ---- Atmosphere: the landing page's poster wall, dimmer, across the top of the page only, with a soft spotlight ---- */
.st-main { position: relative; z-index: 1; }
.st-wall { position: absolute; inset: 0 0 auto 0; height: min(88vh, 780px); z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; perspective: 1400px; }
.st-wall.is-ready { opacity: 1; }
.st-wall.is-paused *, .st-wall.is-offscreen * { animation-play-state: paused !important; }
html[data-theme="light"] .st-wall { display: none; }
.st-wall-plane { position: absolute; inset: -30% -18%; display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 22px); transform: rotateX(24deg) rotateZ(-11deg) scale(1.02); }
.st-wall-col { overflow: hidden; opacity: .42; }
.st-wall-list { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 22px); animation: st-wall-up var(--dur, 90s) linear var(--off, 0s) infinite; will-change: transform; }
.st-wall-col.is-down .st-wall-list { animation-name: st-wall-down; }
.st-wall-list img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; display: block; background: #0d1118; opacity: 0; transform: scale(.96); transition: opacity 1.1s ease, transform 1.1s var(--st-ease); }
.st-wall-list img.is-in { opacity: 1; transform: none; }
.st-wall-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 9, 13, .62) 0%, rgba(8, 9, 13, .84) 42%, var(--st-bg) 100%); }
.st-wall-spot { position: absolute; inset: 0; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 18%), rgba(0, 245, 160, .10), transparent 62%); mix-blend-mode: screen; }
@keyframes st-wall-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes st-wall-down { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }
/* With posters behind it the board's blur earns its place. */
.st-board { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* ---- Box-office tally: the visits number as a row of digit cells that roll to their digit. The digits are drawn by CSS, so the cells hold no text. ---- */
.st-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.st-odo { display: inline-flex; align-items: stretch; gap: .05em; vertical-align: top; }
.st-digit { position: relative; display: block; width: .64em; height: 1.08em; overflow: hidden; border-radius: .13em; background: color-mix(in srgb, var(--st-text) 5%, transparent); border: 1px solid var(--st-border); }
.st-digit::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; white-space: pre; display: block; text-align: center; line-height: 1.08em; transform: translateY(calc(var(--d, 0) * -1.08em)); transition: transform 1.1s var(--st-ease) calc(var(--i, 0) * 70ms); }
.st-sep { position: relative; display: block; width: .26em; }
.st-sep::before { content: ","; position: absolute; left: 50%; bottom: .06em; transform: translateX(-50%); font-size: .62em; color: var(--st-text-3); }

/* ---- Supporters as end credits: a long list rolls slowly (paused on hover or focus), a short one sits still ---- */
.st-credits.is-rolling { height: 300px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); }
.st-credits.is-rolling .st-names { columns: 1; text-align: center; animation: st-credits var(--credits-dur, 40s) linear infinite; }
.st-credits.is-rolling .st-names li { padding: 12px 0; font-size: 1.05rem; }
.st-credits.is-rolling:hover .st-names, .st-credits.is-rolling:focus-within .st-names, .st-credits.is-paused .st-names { animation-play-state: paused; }
/* The pause control for touch and keyboard: a plain, quiet button under the window. */
.st-credits-toggle { display: flex; align-items: center; min-height: 44px; padding: 0 14px; margin: 8px auto 0; border-radius: 8px; border: 1px solid var(--st-border-hi); background: transparent; color: var(--st-text-2); font: inherit; font-weight: 600; cursor: pointer; }
.st-credits-toggle:hover { border-color: var(--st-accent-text); color: var(--st-text); }
@keyframes st-credits { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* Phones and touch screens: a still poster wall, and no blur over a layer that would otherwise repaint every frame. These come after the
   rules they override. */
@media (max-width: 760px), (pointer: coarse) {
  .st-wall-list { animation: none; }
  .st-board { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(21, 25, 35, .92); }
  html[data-theme="light"] .st-board { background: #fff; }
}
/* One axis on a narrow screen: the rolling names line up with the heading and the Ko-fi link above them. */
@media (max-width: 860px) {
  .st-credits.is-rolling .st-names { text-align: left; }
  .st-credits-toggle { margin-left: 0; }
}
.st-empty { text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  .st-digit::before, .st-wall, .st-wall-list img { transition: none; }
  .st-wall-list, .st-credits.is-rolling .st-names { animation: none; }
  .st-bar, .st-split-aio, .st-row-bar, .st-tip-bubble, .st-how summary::after { animation: none; transition: none; }
  .st-pulse::after { animation: none; opacity: .35; transform: scale(1.6); }
}