/* DIGITCA × DISH SPEEDRUN, campaign board.
   Swiss timing sheet meets restaurant poster: warm paper canvas, ink structure, two
   loud accents used sparingly. Physicality comes from borders, offsets and flat drop
   shadows, never from blur, gloss or texture images.

   Fonts are the site's and are NOT changed here: Jost (400-900) and Geist Mono (400/500).
   Geist Mono is only loaded at 400 and 500, so nothing mono ever asks for a heavier
   weight; mono emphasis is made with size and colour instead.

   This stylesheet also serves /speedrun/p/. Both pages share the palette below. */

/* ─── Palette ─────────────────────────────────────────────────────────────────
   Declared on the page body, which also re-maps the site's own semantic tokens.
   That does two things at once: every shared rule inherited from styles.css
   follows the campaign, and the site-wide dark theme cannot reach this page. */
.sr-page {
  --sr-paper:   #F7E5CE;   /* sun-drenched peach canvas */
  --sr-paper-2: #F0D7B4;   /* deeper tan, for slips and bands */
  --sr-slip:    #FDF4E6;   /* the paper a result is printed on */
  --sr-ink:     #15120E;   /* warm near-black, all structure */
  --sr-acid:    #D9F227;   /* acid lime: the leader, the CTA */
  --sr-magenta: #FF2E7E;   /* the one loud word, the gap */
  --sr-clay:    #C8522E;   /* DIGITCA's own red, the quiet third tone */

  --surface: var(--sr-paper);
  --on-surface: var(--sr-ink);
  --on-surface-80: rgba(21, 18, 14, 0.80);
  --on-surface-50: rgba(21, 18, 14, 0.52);
  --on-surface-12: rgba(21, 18, 14, 0.16);
  --on-surface-06: rgba(21, 18, 14, 0.06);
  --red:   var(--sr-clay);
  --cream: var(--sr-paper);

  --sr-edge: 2px solid var(--sr-ink);
  --sr-lift: 4px 4px 0 var(--sr-ink);
  --sr-lift-sm: 3px 3px 0 var(--sr-ink);

  min-height: 100svh; display: flex; flex-direction: column;
  background: var(--sr-paper);
}

/* An explicit `display` in a rule beats the [hidden] attribute's UA `display: none`. */
[hidden] { display: none !important; }

/* The site's scroll-progress bar (body::after in styles.css) is off here. It is a thin
   red rule pinned across the top of the viewport, and on this page it lands on the
   headline and reads as a stray graphic rather than as progress. The rest of the site
   keeps it; `.sr-page::after` simply outranks `body::after`. */
.sr-page::after { display: none; }
/* `clip`, not `hidden`: the burger is allowed past the right edge without turning the
   page into a scroll container. */
.sr-page { overflow-x: clip; }

/* ─── Top strip ─── */
.sr-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: 1rem; border-bottom: var(--sr-edge);
}
.sr-wordmark { font-weight: 900; font-size: 0.9375rem; letter-spacing: -0.01em; }
.sr-wordmark .dot { color: var(--sr-magenta); }
.sr-cross { color: var(--on-surface-50); margin-inline: 0.4rem; font-weight: 400; }
.sr-partner { font-weight: 700; }
.sr-back {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--on-surface-50);
}
.sr-back:hover { color: var(--sr-ink); }

/* ─── Shared micro-label ─── */
.sr-label {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-surface-50);
}

/* ─── Hero ────────────────────────────────────────────────────────────────────
   The question, the mechanic, the button, the clock. No kicker and no prose explainer:
   what the event pays is in the prize slip below the board, and a returning player has
   to be able to scroll past all of this in one flick. */
.sr-hero { padding-block: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2rem); }

.sr-hero-title {
  font-size: clamp(2.5rem, 12.5vw, 6.75rem);
  /* 1.14, and it has to be. Czech caps carry carons and acutes and Jost's J has a real
     descender, so "JAK RYCHLE" over "UMÍŠ" over "MAČKAT" stacks a descender against two
     accents twice in three lines. Below about 1.12 they touch: measured at 6.75rem, the
     J tail and the Í accent close to nothing at 0.97 and clear each other by 10px here.
     Loose for a display face, but the alternative is a headline that reads as a smudge. */
  font-weight: 900; line-height: 1.14; letter-spacing: -0.045em;
  text-transform: uppercase; margin-top: 0.25rem;
}
/* "MAČKAT = ?" is one phrase. A word space at this size reads as a layout gap, so the
   group carries a deliberate, much smaller one instead. The word joiner in the markup
   is doing the other half of the job: a replaced element offers a line break before it
   where a glyph does not, and without it the key drops onto a line of its own between
   900 and 1199, where the type column is tightest against this line. */
.sr-eq-group { margin-left: 0.14em; white-space: nowrap; }
/* The equals sign is the key you press, so on this line it is the key. Sized in em, so
   it follows the headline's own clamp at every width and needs no breakpoint of its
   own, and set against the question mark beside it rather than against the glyph it
   replaced: 0.8em of box puts the keycap at the question mark's own height, which is
   where it stops being a thing after the word and becomes the second half of the
   question. Still inside the line box, so the last line does not grow and the headline
   measures the same at every width as it did with the glyph.

   `translate` is optical, not typographic: it puts the key's own centre on the question
   mark's centre instead of standing it on the baseline, and moves nothing, so the line
   box is untouched. The space before it is the headline's own and the hair space after
   it is the markup's; at this size both measure right and neither is touched. */
.sr-hero-title .sr-eq {
  display: inline-block; width: auto; height: 0.8em;
  vertical-align: baseline; translate: 0 0.034em;
}
/* The one window where it cannot have that size. From 900 to 1199 the type column is
   narrow enough that this line already runs past it and the question mark ends up
   beside the plate; at full size it ends up on the plate. A tenth of an em back is
   what clears it, and it is the only width where the key is not the question mark's
   height. */
@media (min-width: 900px) and (max-width: 1199px) {
  .sr-hero-title .sr-eq { height: 0.73em; translate: 0 0; }
}

/* The mechanic, in the stamp language the standalone 99× badge used to have. One
   occurrence of the mechanic on the page, sitting tight under the headline so the two
   read as one statement rather than two sections. */
.sr-mechanic {
  /* `flex` + fit-content, not inline-flex: on its own line, so it reads as the caption
     of the headline and never as a second button beside the CTA. Acid stays reserved
     for the one action on the page and for whoever is leading the board. */
  display: flex; width: fit-content; align-items: baseline; gap: 0.4rem;
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(0.875rem, 2vw, 1.0625rem); letter-spacing: 0.06em;
  /* One rhythm on mobile, where the burger sits between the headline and this pill.
     The desktop block below takes it back to a caption's distance from the headline. */
  margin-top: 1.125rem; padding: 0.35rem 0.7rem;
  background: var(--sr-slip); border: var(--sr-edge); box-shadow: var(--sr-lift-sm);
}
.sr-mechanic-eq { color: var(--sr-magenta); font-size: 1.15em; }

/* Sticker, not a gradient button. Flat fill, hard edge, it moves onto its own shadow. */
.sr-cta-main {
  display: inline-block; margin-top: clamp(1.25rem, 2.5vw, 1.5rem);
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sr-ink);
  background: var(--sr-acid); border: var(--sr-edge); box-shadow: var(--sr-lift);
  padding: 0.85rem 1.4rem;
  transition: transform 0.14s var(--ease-out), box-shadow 0.14s var(--ease-out);
}
.sr-cta-main:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--sr-ink); }
.sr-cta-main:active { transform: translate(4px, 4px); box-shadow: none; }

/* ─── Action row: the button and the deadline ─────────────────────────────────
   `stretch` rather than a fixed height: the clock is exactly as tall as the button
   whatever either of them ends up measuring. It wraps under the button on a phone,
   where the two together are wider than the screen. */
.sr-act {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.75rem;
  margin-top: clamp(1.25rem, 2.5vw, 1.5rem);
}
.sr-act .sr-cta-main { margin-top: 0; }

/* Same slip, edge and shadow as everything else that holds a number here, so the hero
   has one box language and not three. Quiet on purpose: acid stays with the one action
   and magenta with the one loud word, and a clock that shouted would outrank both. */
.sr-deadline {
  display: flex; align-items: center; gap: 0.55rem; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.06em; padding: 0.85rem 1.1rem;
  background: var(--sr-slip); border: var(--sr-edge); box-shadow: var(--sr-lift);
}
.sr-deadline-label {
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-surface-50);
}
/* Tabular figures: the minute ticking over must not shuffle the box. */
.sr-deadline-value { font-variant-numeric: tabular-nums; }

/* ─── Hero burger ─────────────────────────────────────────────────────────────
   A cutout, not a photograph in a frame: no card, no caption, no gradient. It fills
   the empty right half of the desktop hero and balances the headline's mass, and it
   is never allowed to sit under the type: the text column is capped so the two
   never meet.

   The phone gets the same idea at its own scale: headline across the top, then the
   slips down the left and the plate beside them on the right. It is not the desktop
   composition shrunk, it is the same two-column instinct applied to the only part of
   the hero that is narrow enough to share a row. */
.sr-burger {
  display: block;
  width: min(69%, 17.75rem);
  /* The width/height attributes are there to reserve the ratio while it loads; without
     an explicit auto the height attribute would win over the aspect ratio. */
  height: auto;
  margin: 1rem -1.5rem 0.375rem auto;    /* pushed right, just over the edge */
  rotate: 3deg;
  pointer-events: none;
}

/* ─── Phone: slips left, plate right ─────────────────────────────────────────
   The burger leaves the flow here too, which is what lets the slips and the plate
   share the same band instead of queueing. Bottom-anchored to the last slip, bled
   past the right edge and cropped there on purpose: a cut at the screen edge reads
   as intent, and the six burgers all sit on the same 1378x1000 canvas, so the same
   crop lands in the same place on every one of them.

   The width is what the screen has left once the slips have taken their side, so the
   plate grows and shrinks with the phone and always lands in the same relation to
   them. 10rem because the widest slip is the button and its width does not move with
   the viewport: its type is mono at a fixed size. The subtraction leaves the plate
   about a rem of overlap, so it tucks behind the slips rather than stopping short of
   them, which is the layering the shadows already use. Capped at 16rem so a 430 px
   screen does not grow a plate taller than the three slips it stands beside. */
@media (max-width: 899px) {
  .sr-hero { position: relative; }
  .sr-hero > :not(.sr-burger) { position: relative; z-index: 1; }
  .sr-burger {
    position: absolute; z-index: 0;
    right: calc(50% - 50vw - 3rem); bottom: 1.5rem;
    width: min(calc(100vw - 10rem), 16rem);
    margin: 0;
  }
}

@media (min-width: 900px) {
  .sr-hero {
    position: relative;
    /* Room for the burger, so it can never push into the board below. */
    min-height: 30rem;
    display: flex; flex-direction: column; justify-content: center;
  }
  /* The type column. 56% keeps three lines of a 6.75rem headline clear of the plate. */
  .sr-hero > :not(.sr-burger) { position: relative; z-index: 1; max-width: 56%; }
  /* No burger between the two here, so the pill goes back to sitting under the
     headline as its caption. */
  .sr-mechanic { margin-top: 0.75rem; }
  .sr-burger {
    position: absolute; z-index: 0;
    /* Right edge just past the viewport, not just past the container: on a wide screen
       a crop at the container edge reads as a mistake, a crop at the screen edge reads
       as intent. `overflow-x: clip` on the page keeps it from adding a scrollbar. */
    top: 50%; right: calc(50% - 50vw - 1.5rem); translate: 0 -50%;
    width: min(42vw, 40rem);
    margin: 0; rotate: 3deg;
  }
}

/* From here the column is wide enough to hold "JAK RYCHLE" on one line, which is the
   wrap the <br>s in the markup were written for; below 1200 it cannot at any width
   that still clears the plate, so the narrower column stays and the headline takes a
   fourth line. 66% rather than the full width: the plate keeps its half. */
@media (min-width: 1200px) {
  .sr-hero > :not(.sr-burger) { max-width: min(66%, 50rem); }
}

@media (min-width: 1500px) {
  .sr-burger { width: min(44vw, 44rem); }
}

/* Below this the hero is headline plus button and nothing else has room. */
@media (max-width: 340px) {
  .sr-burger { display: none; }
}

/* ─── Prize block ─────────────────────────────────────────────────────────────
   One slip, below the board, and now three tiers of it: the money, the shirt, and the
   thing every player gets. It runs the full width of the column, the same width as the
   leaderboard above it, because a heading rule and a bottom band both need an edge to
   reach and because the stickers need a bottom to hang off. */
.sr-prize-wrap { margin-top: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 2.5rem; }
.sr-prize {
  position: relative;
  background: var(--sr-slip); border: var(--sr-edge); box-shadow: var(--sr-lift);
  padding: 1.125rem 1.375rem 1.375rem;
}
/* Full width is what a phone asked for, and on a phone the slip is full of content at
   that width. A 1100 px version of it is a banner with a hole in the middle, so on a
   wide screen it stops where its own content stops needing room. */
@media (min-width: 900px) { .sr-prize { max-width: 28rem; } }
/* The label is the slip's heading now, not a stamp in its corner: full width with a
   rule under it, so the two columns below read as its contents. */
.sr-prize-head {
  display: block; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--on-surface-12);
}

/* Money left, shirt right, and not down the middle: the money column takes whatever it
   needs and the shirt column takes what is left, capped, so the split follows the
   hierarchy rather than the container. */
.sr-prize-body {
  display: flex; align-items: flex-start; gap: 1rem;
  padding-block: 1.125rem;
}
.sr-prize-money { flex: none; }
.sr-prize-money > .sr-label { display: block; }
.sr-prize-tee {
  flex: 1 1 auto; min-width: 0; max-width: 12.5rem;
  margin-left: 0.5rem; padding-left: 1.5rem;
  border-left: 1px solid var(--on-surface-12);
}
/* The prize itself, a size under the amounts beside it. */
.sr-prize-tee-what {
  font-family: var(--font-mono); font-size: 1rem; line-height: 1.3;
  margin-top: 0.4rem;
}
.sr-prize-tee-note {
  font-size: 0.8125rem; color: var(--on-surface-50); margin-top: 0.35rem;
}
/* The shirt sits under the line that offers it, as this column's own picture. It runs
   a little past the slip's right edge, which is the same crop the hero burger takes and
   is the only liberty it is allowed: no rotation, no shadow, nothing that would read as
   a sticker dropped on the card afterwards. */
.sr-prize-tee-shot {
  display: block; width: 100%; max-width: 10rem; height: auto;
  margin: 0.75rem 0 0 auto;
  /* Shifted, not margined: it sits a little closer to the line that offers it without
     changing what the column measures, so the card keeps its height. No rotation and
     no shadow, so it reads as this column's photograph and not as something dropped on
     the card afterwards. On a wide screen there is slip to spare on its right, so it
     stays inside the frame and only the phone leans out; the lean is a phone's answer
     to a slip that has no room, not a look. */
  translate: 0 -0.4rem;
  pointer-events: none;
}
/* Sits between the column heading and the amounts: the slip reads whose money, the
   mark, how much. */
.sr-prize-mark { width: 2.5rem; height: 2.5rem; display: block; margin: 0.7rem 0; }
.sr-prize-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.35rem;
}
/* A fixed first column so the three amounts line up on their own left edge rather than
   each one starting wherever its rank number happened to end. The ranks keep one size
   whatever the amount beside them does, which is what lets first place be bigger
   without knocking the column out of true. */
.sr-prize-list li {
  display: grid; grid-template-columns: 1.75rem auto; align-items: baseline;
  font-family: var(--font-mono); font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}
/* The one number the section is about. Nothing else in the slip is this size. */
.sr-prize-list li:first-child { font-size: 1.625rem; }
.sr-prize-pos { color: var(--on-surface-50); font-size: 0.9375rem; }
.sr-prize-amount { font-weight: 500; }
.sr-prize-list li:first-child .sr-prize-amount { color: var(--sr-magenta); }
.sr-prize-link {
  display: inline-block; margin-top: 0.9rem;
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sr-ink); border-bottom: 2px solid var(--sr-magenta); padding-bottom: 2px;
}
.sr-prize-link:hover { background: var(--sr-magenta); color: var(--sr-slip); border-color: transparent; }

/* The third tier: no rank attached, so it gets a band of its own across the bottom
   rather than a third column competing with the two that are contested. The padding on
   the right is the room the palette and the icon hang in. */
.sr-prize-all {
  display: flex; align-items: center; gap: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--on-surface-12);
}
.sr-prize-all-text { flex: none; }
.sr-prize-all-what {
  /* One step under the shirt's line, which is itself a step under the amounts. This is
     the quietest of the three tiers and has to measure like it. */
  font-family: var(--font-mono); font-size: 0.9375rem; margin-top: 0.35rem;
}

/* ─── The stickers ────────────────────────────────────────────────────────────
   Stuck on the slip rather than printed in it: each one crosses the bottom edge and
   each is off the grid by a few degrees. None of them may take a tap that belongs to a
   link, and none is announced: the line beside it already says what it is.

   The palette and the icon stay in the band's flow, so they keep their own horizontal
   room next to the line that names them and cannot land on it. Negative block margins
   are what lets them hang out of the band without making it taller. */
.sr-prize-shot, .sr-prize-icon {
  position: relative; flex: none; height: auto; pointer-events: none; z-index: 2;
}
/* The phone sets the scale down here; the icon is half its height, as drawn. */
/* `auto` on the left of the first one pushes the pair to the band's right end, so the
   band reads as the line on one side and what it unlocks on the other, with real space
   between them rather than a hand's width. */
/* The half-rem down is desktop's alone: there the shirt is half again as tall and its
   hem comes down to meet these two, and this drops them under the band's rule so the
   rule is what separates the second prize from the third. On a phone the shirt is
   smaller and the gap is already twice as big, so nothing moves there. */
.sr-prize-shot { width: 3.9rem; margin: -1.25rem 0 -2.5rem auto; rotate: -6deg; translate: 0 0.5rem; }
.sr-prize-icon { width: 4rem;   margin-block: -0.5rem -1.75rem; rotate: 5deg; translate: 0 0.5rem; }

/* ─── Board ─── */
.sr-board { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.sr-board-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.75rem 1rem; flex-wrap: wrap;
  padding-top: 0.5rem; padding-bottom: 0.75rem; border-bottom: var(--sr-edge);
}
.sr-board-title {
  font-size: clamp(1.375rem, 4.5vw, 2.25rem); font-weight: 900;
  letter-spacing: -0.03em; text-transform: uppercase; line-height: 1;
}
.sr-count {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--sr-ink); color: var(--sr-paper); padding: 0.3rem 0.6rem;
}

/* Rows are slips laid on the canvas, not ruled table lines. Still a real table:
   the ranking has to stay scannable and mobile-proof. */
.sr-table { width: 100%; border-collapse: separate; border-spacing: 0 0.5rem; }
.sr-table thead th {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-surface-50);
  text-align: left; padding: 0.75rem 0.75rem 0.25rem;
}
.sr-table th.sr-num, .sr-table td.sr-num { text-align: right; font-variant-numeric: tabular-nums; }
.sr-table tbody td {
  background: var(--sr-slip); vertical-align: middle;
  border-block: var(--sr-edge); padding: 0.75rem;
}
/* The identity cell absorbs the leftover width. `max-width: 0` is what makes the
   browser treat its content as shrinkable: without it a nowrap handle sets the cell's
   min-content width to the whole string, which starves the time column and clips the
   result. The time is the second most important thing on the page and never shrinks. */
.sr-table tbody td:nth-child(2) { width: 100%; max-width: 0; }
.sr-table tbody td.sr-time { width: 1%; white-space: nowrap; }
.sr-table tbody td:first-child { border-left: var(--sr-edge); }
.sr-table tbody td:last-child { border-right: var(--sr-edge); }
.sr-table tbody tr { transition: transform 0.14s var(--ease-out); }
.sr-table tbody tr:hover { transform: translateX(3px); }

.sr-rank {
  font-family: var(--font-mono); font-weight: 500; color: var(--on-surface-50);
  width: 3.25rem; font-variant-numeric: tabular-nums; line-height: 1;
}
.sr-who { display: flex; align-items: center; gap: 0.625rem; }
.sr-who-text { min-width: 0; }
.sr-avatar {
  position: relative; flex: 0 0 auto; overflow: hidden;
  width: var(--sr-avatar, 1.75rem); height: var(--sr-avatar, 1.75rem);
  border-radius: 50%; background: var(--sr-paper-2); border: 1.5px solid var(--sr-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  color: var(--sr-ink); line-height: 1; user-select: none;
}
/* The picture covers the monogram when there is one. Remove it and the letter is back. */
.sr-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sr-name { font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
/* One line, clipped. A long handle broken mid-word makes the rows ragged and the
   ranking harder to scan, which matters more than showing every character. */
.sr-handle {
  display: block; font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--on-surface-50); margin-top: 0.15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-handle a:hover { color: var(--sr-magenta); }
.sr-time { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.02em; }
.sr-time .sr-unit { color: var(--on-surface-50); font-size: 0.7em; margin-left: 0.15rem; letter-spacing: 0; }
.sr-date { font-family: var(--font-mono); font-size: 0.75rem; color: var(--on-surface-50); white-space: nowrap; }

/* TOP 10: more air, bigger type. No medals, no podium, no trophies. The wall
   belongs to whoever is on top of it. */
.sr-top10 { --sr-avatar: 2.25rem; }
.sr-top10 tbody td { padding-block: 1rem; }
.sr-top10 .sr-rank { font-size: 1.375rem; }
.sr-top10 .sr-name { font-size: 1.125rem; }
.sr-top10 .sr-time { font-size: clamp(1.25rem, 4vw, 1.625rem); }

/* #1 owns the wall: the slip is inked, the numbers turn acid. */
.sr-top10 tbody tr.sr-lead td { background: var(--sr-ink); color: var(--sr-paper); }
.sr-top10 tr.sr-lead .sr-rank { color: var(--sr-acid); }
.sr-top10 tr.sr-lead .sr-time { color: var(--sr-acid); }
.sr-top10 tr.sr-lead .sr-time .sr-unit { color: rgba(217, 242, 39, 0.55); }
.sr-top10 tr.sr-lead .sr-handle { color: rgba(247, 229, 206, 0.60); }
.sr-top10 tr.sr-lead .sr-handle a:hover { color: var(--sr-acid); }
.sr-top10 tr.sr-lead .sr-date { color: rgba(247, 229, 206, 0.50); }
.sr-top10 tr.sr-lead .sr-avatar { background: var(--sr-acid); border-color: var(--sr-acid); color: var(--sr-ink); }
.sr-top10 tr.sr-lead .sr-rank::after {
  content: "Vede"; display: block; margin-top: 0.3rem;
  font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sr-acid);
}
/* Second and third: still slips, but marked. The rank carries the colour. */
.sr-top10 tbody tr:nth-child(2) .sr-rank { color: var(--sr-magenta); }
.sr-top10 tbody tr:nth-child(3) .sr-rank { color: var(--sr-clay); }
.sr-top10 tbody tr:nth-child(2) td:first-child,
.sr-top10 tbody tr:nth-child(3) td:first-child { box-shadow: inset 5px 0 0 currentColor; }
.sr-top10 tbody tr:nth-child(2) td:first-child { color: var(--sr-magenta); }
.sr-top10 tbody tr:nth-child(3) td:first-child { color: var(--sr-clay); }

/* The rest of the field: same grammar, quieter and denser. */
.sr-rest { --sr-avatar: 1.625rem; margin-top: 0.25rem; }
.sr-rest tbody td { padding-block: 0.625rem; }
.sr-rest .sr-rank { font-size: 0.9375rem; }
.sr-rest .sr-name { font-size: 0.9375rem; font-weight: 600; }
.sr-rest .sr-time { font-size: 1rem; }
.sr-rest .sr-handle { font-size: 0.6875rem; }

/* A stamped divider, not a hairline. */
.sr-split { display: flex; align-items: center; gap: 0.875rem; margin-top: 2.25rem; margin-bottom: 0.25rem; }
.sr-split .sr-label {
  background: var(--sr-ink); color: var(--sr-paper); padding: 0.3rem 0.6rem;
  color: var(--sr-paper);
}
.sr-split::after { content: ""; flex: 1; border-top: var(--sr-edge); }

@media (max-width: 640px) {
  .sr-hide-sm { display: none; }
  /* `display: none` does not stop the hidden date cell from matching :last-child, so
     the row's right border was landing on a cell that never paints and the slip read
     as cut off. Below 640px the time cell closes it. */
  .sr-table tbody td.sr-time { border-right: var(--sr-edge); }
}

/* ─── Rules, collapsed ────────────────────────────────────────────────────────
   Native <details>: keyboard and screen readers get it for free and it costs no
   JavaScript. Closed it is one line; open it is quiet, no second show. */
.sr-rules { margin-top: clamp(1.5rem, 3vw, 2rem); }
.sr-rules > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.9rem 0; border-block: var(--sr-edge);
}
.sr-rules > summary::-webkit-details-marker { display: none; }
.sr-rules > summary::after { content: "+"; font-size: 1.125rem; line-height: 1; }
.sr-rules[open] > summary::after { content: "\2212"; }
.sr-rules > summary:hover { color: var(--sr-magenta); }
/* Stacked accordions share their rule rather than drawing two 2px lines 24px apart.
   When the upper one is open its body separates them, so the lower summary takes its
   own top border back. */
.sr-rules + .sr-rules { margin-top: 0; }
.sr-rules + .sr-rules > summary { border-top: none; }
.sr-rules[open] + .sr-rules > summary { border-top: var(--sr-edge); }
.sr-rules-body { padding-block: 1.5rem 0.5rem; }

/* ─── How to get in ───────────────────────────────────────────────────────────
   Four steps, numbered in mono so the count reads as a route and not as prose. */
.sr-howto-steps { display: grid; gap: 0.8rem; max-width: 46ch; counter-reset: sr-step; }
.sr-howto-steps li {
  list-style: none; display: grid; grid-template-columns: 1.6rem 1fr;
  font-size: 0.9375rem; line-height: 1.55; color: var(--on-surface-80);
}
.sr-howto-steps li::before {
  counter-increment: sr-step; content: counter(sr-step) ".";
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500;
  color: var(--sr-ink);
}
.sr-howto .sr-note { margin-top: 1.25rem; }

/* ─── Jak to vypadá ───────────────────────────────────────────────────────────
   Čtyři skutečné obrazovky vedle sebe. Nejsou to ilustrace kroků nad nimi, jsou to
   snímky té cesty, a čtou se zleva doprava jako jeden pohyb. Popisky jsou v mono a
   v tiché barvě: nemají soupeřit s tím, co je na obrázku, mají ho jen pojmenovat.

   Obrázky mají rám telefonu vypálený v sobě a průhledné pozadí, takže tady žádný
   `border` ani `box-shadow` není. Tvrdý rámeček kolem zaobleného telefonu by mu
   uřízl rohy a druhý stín pod tím, co už jeden má, je jen špína. */
.sr-howto-shots {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
  /* Čtyři telefony vedle sebe přestanou být čitelné dřív, než dojde šířka stránky. */
  max-width: 44rem;
}
.sr-howto-shots li { display: grid; gap: 0.55rem; justify-items: center; }
.sr-howto-shots img { width: 100%; height: auto; display: block; }
.sr-howto-shots span {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; text-align: center;
  color: var(--on-surface-50);
}
/* Na telefonu jsou čtyři sloupce nesmysl: obrázek telefonu by byl užší než palec. */
@media (max-width: 700px) {
  .sr-howto-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 26rem; }
}

/* Od chvíle, kdy je na řádek místo, jdou obrazovky vedle textu, ne pod něj. Kroky jsou
   krátké a úzké, takže pod nimi zbývala prázdná půlka řádku a člověk musel k obrázkům
   scrollovat, i když se tam vešly. Vedle sebe se čtou naráz: co udělat vlevo, jak to
   vypadá vpravo.

   Dělá to mřížka nad `.sr-rules-body`, ne nový obal v HTML: poznámka pod kroky patří
   k textu, ne k obrázkům, a explicitní umístění do buněk ji tam udrží bez toho, aby
   se kvůli tomu do značek přidával `<div>`. Pod 900 px zůstává všechno tak, jak to
   bylo, tedy pod sebou. */
@media (min-width: 900px) {
  .sr-howto .sr-rules-body {
    display: grid;
    grid-template-columns: minmax(22ch, 26rem) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
  }
  .sr-howto .sr-howto-steps { grid-column: 1; grid-row: 1; }
  .sr-howto .sr-note        { grid-column: 1; grid-row: 2; }
  /* Přes obě řádky, aby telefony lícovaly s prvním krokem a ne s poznámkou pod ním. */
  .sr-howto .sr-howto-shots { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; max-width: none; }
}

.sr-rules-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.sr-rules dt {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 0.6rem; padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--sr-acid); display: inline-block;
}
.sr-rules dd { font-size: 0.9375rem; line-height: 1.55; color: var(--on-surface-80); }
.sr-rules dd strong { font-weight: 700; }
.sr-note { font-size: 0.8125rem; color: var(--on-surface-50); margin-top: 1.75rem; max-width: 46ch; line-height: 1.55; }
@media (max-width: 720px) { .sr-rules-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ─── States ─── */
.sr-state {
  padding: clamp(2.5rem, 8vw, 4rem) 1.25rem; text-align: center; margin-top: 1rem;
  background: var(--sr-slip); border: var(--sr-edge); box-shadow: var(--sr-lift);
}
.sr-state p { color: var(--on-surface-50); font-size: 0.9375rem; }
.sr-state .sr-state-lead { color: var(--sr-ink); font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.sr-skeleton { display: grid; gap: 0.5rem; margin-top: 1rem; }
.sr-skeleton span {
  display: block; height: 3.25rem;
  background: var(--sr-slip); border: var(--sr-edge);
  animation: sr-pulse 1.4s var(--ease-out) infinite;
}
.sr-skeleton span:nth-child(2) { animation-delay: 0.1s; }
.sr-skeleton span:nth-child(3) { animation-delay: 0.2s; }
.sr-skeleton span:nth-child(4) { animation-delay: 0.3s; }
.sr-skeleton span:nth-child(5) { animation-delay: 0.4s; }
@keyframes sr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.sr-retry {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sr-ink); border: var(--sr-edge);
  background: var(--sr-acid); box-shadow: var(--sr-lift-sm);
  padding: 0.7rem 1.25rem; margin-top: 1.25rem; cursor: pointer;
}
.sr-retry:hover { transform: translate(2px, 2px); box-shadow: none; }

/* ─── Pages ───────────────────────────────────────────────────────────────────
   Two slips and a count under the board, in the same language as everything else
   that can be pressed here. It is the results list turning a page, not a data table
   with controls, so there is no page-size picker and no row of numbers. */
.sr-paging {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-top: 1.5rem; padding-top: 1.125rem; border-top: var(--sr-edge);
}
.sr-page-btn {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sr-ink);
  background: var(--sr-slip); border: var(--sr-edge); box-shadow: var(--sr-lift-sm);
  padding: 0.65rem 0.9rem; cursor: pointer; white-space: nowrap;
  transition: transform 0.14s var(--ease-out), box-shadow 0.14s var(--ease-out);
}
.sr-page-btn:hover:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
/* Really disabled, not just dimmed: the attribute is on the button, so the keyboard
   skips it and the pointer does nothing. */
.sr-page-btn:disabled { opacity: 0.3; box-shadow: none; cursor: default; }
.sr-page-btn:focus-visible { outline: 2px solid var(--sr-magenta); outline-offset: 3px; }
.sr-page-at {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.12em; color: var(--on-surface-50);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Turning a page keeps the rows that are there until the new ones arrive, so the board
   does not collapse and reflow under the reader. */
.sr-board[aria-busy="true"] .sr-table { opacity: 0.45; }

/* ─── Foot ─── */
.sr-foot {
  /* No rule of its own: the rules summary already closes the page with one, and this
     one sat on the container box rather than the content column, so it ran wider than
     everything above it. Two lines, one of them the wrong width. */
  margin-top: auto; padding-block: 1.75rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between;
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--on-surface-50);
}

/* ─── Rival view: /speedrun/p/<publicId> ──────────────────────────────────────
   Same campaign, same slips. This is where the around-me data actually lives, so
   the gap and the neighbourhood get the stamped-note treatment. */
.sr-rival { padding-block: clamp(1.75rem, 5vw, 3rem); }
.sr-kicker {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sr-magenta);
}
.sr-rival-name {
  font-size: clamp(2.25rem, 10vw, 4.5rem); font-weight: 900; line-height: 0.92;
  letter-spacing: -0.04em; text-transform: uppercase; margin-top: 0.5rem;
}
.sr-rival-social { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--on-surface-50); margin-top: 0.6rem; }
.sr-rival-social a:hover { color: var(--sr-magenta); }

.sr-headline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 2rem;
  margin-top: clamp(1.5rem, 4vw, 2rem); padding: 1.25rem;
  background: var(--sr-ink); color: var(--sr-paper); box-shadow: var(--sr-lift);
}
.sr-headline-time {
  font-family: var(--font-mono); font-size: clamp(2.75rem, 11vw, 4.5rem); font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1;
  color: var(--sr-acid);
}
.sr-headline-time .sr-unit { font-size: 0.35em; color: rgba(217, 242, 39, 0.55); margin-left: 0.25rem; }
.sr-headline-rank {
  font-family: var(--font-mono); font-size: clamp(1.25rem, 4vw, 1.75rem); font-weight: 500;
  color: var(--sr-magenta); font-variant-numeric: tabular-nums;
}
.sr-headline-rank small { color: rgba(247, 229, 206, 0.55); font-size: 0.6em; margin-left: 0.35rem; }

.sr-facts { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; margin-top: 1.75rem; }
.sr-facts dt {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--on-surface-50); margin-bottom: 0.3rem;
}
.sr-facts dd { font-family: var(--font-mono); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }

/* The challenge, stamped rather than panelled. */
.sr-challenge { margin-top: clamp(2rem, 5vw, 2.75rem); padding-top: 1.5rem; border-top: var(--sr-edge); }
.sr-challenge-line {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sr-ink);
  background: var(--sr-acid); border: var(--sr-edge); padding: 0.4rem 0.75rem;
  rotate: -1.5deg;
}
.sr-gap {
  font-size: 1rem; color: var(--on-surface-80); margin-top: 1rem;
  padding-left: 0.9rem; border-left: 3px solid var(--sr-magenta);
}
.sr-gap strong { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--sr-ink); }

/* Neighbourhood: a rank is a place among people, so the row you are is inked. */
.sr-hood { --sr-avatar: 1.625rem; margin-top: 1.5rem; }
.sr-hood tbody td { padding-block: 0.75rem; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sr-hood .sr-name { font-family: var(--font-sans); font-weight: 600; font-size: 0.9375rem; }
.sr-hood .sr-time { font-size: 1rem; }
.sr-hood tr.is-target td { background: var(--sr-ink); color: var(--sr-paper); }
.sr-hood tr.is-target .sr-rank { color: var(--sr-acid); }
.sr-hood tr.is-target .sr-time { color: var(--sr-acid); }
.sr-hood tr.is-target .sr-handle { color: rgba(247, 229, 206, 0.60); }
.sr-hood tr.is-target .sr-avatar { background: var(--sr-acid); border-color: var(--sr-acid); }
.sr-hood-empty { font-size: 0.9375rem; color: var(--on-surface-50); margin-top: 1.5rem; }

.sr-cta { display: inline-block; margin-top: 1.75rem; }
.sr-cta a {
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sr-ink); background: var(--sr-acid);
  border: var(--sr-edge); box-shadow: var(--sr-lift); padding: 0.8rem 1.3rem;
  display: inline-block; transition: transform 0.14s var(--ease-out), box-shadow 0.14s var(--ease-out);
}
.sr-cta a:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--sr-ink); }

/* ─── Motion ──────────────────────────────────────────────────────────────────
   One settle as the slips land, nothing that keeps moving afterwards. */
@media (prefers-reduced-motion: no-preference) {
  .sr-table tbody tr { animation: sr-settle 0.34s var(--ease-out) both; }
  .sr-table tbody tr:nth-child(2) { animation-delay: 0.03s; }
  .sr-table tbody tr:nth-child(3) { animation-delay: 0.06s; }
  .sr-table tbody tr:nth-child(4) { animation-delay: 0.09s; }
  .sr-table tbody tr:nth-child(5) { animation-delay: 0.12s; }
  .sr-table tbody tr:nth-child(n + 6) { animation-delay: 0.15s; }
}
@keyframes sr-settle {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sr-skeleton span { animation: none; }
  .sr-table tbody tr:hover { transform: none; }
  .sr-cta-main, .sr-cta a, .sr-retry { transition: none; }
  .sr-cta-main:hover, .sr-cta a:hover, .sr-retry:hover { transform: none; }
}

/* ─── Mobile: the collage flattens, the ranking does not ─────────────────────
   No rotation, no offsets, one column. Scale comes down but never below a
   comfortable reading size, and nothing is allowed to overflow sideways. */
@media (max-width: 720px) {
  .sr-challenge-line { rotate: none; }
  .sr-prize { padding: 1rem 1rem 1.25rem; }
  .sr-prize-mark { width: 2rem; height: 2rem; margin: 0.6rem 0; }
  .sr-prize-body { gap: 0.75rem; padding-block: 1rem; }
  /* One step down all round, and the gap between first place and the rest holds: on a
     350 px slip the amount is still the largest thing in the section. */
  .sr-prize-list li { font-size: 1rem; }
  .sr-prize-list li:first-child { font-size: 1.3125rem; }
  .sr-prize-pos { font-size: 0.875rem; }
  .sr-prize-tee { max-width: 8.5rem; margin-left: 0.25rem; padding-left: 0.9rem; }
  .sr-prize-tee-what { font-size: 0.9375rem; }
  .sr-prize-tee-note { font-size: 0.75rem; }
  .sr-prize-tee-shot { max-width: 7.5rem; margin: 0.6rem 0 0 auto; translate: 2.5rem -0.35rem; }
  /* The band holds a line of text and two pictures on a 350 px slip, so the text takes
     a narrow column and wraps rather than crowding them. */
  .sr-prize-all { gap: 0.75rem; }
  .sr-prize-all-text { max-width: 10rem; }
  .sr-prize-all-what { font-size: 0.875rem; }
  .sr-prize-shot { width: 2.6rem; margin: -0.75rem 0 -1.75rem auto; translate: 0 0; }
  .sr-prize-icon { width: 2.7rem; margin-block: -0.35rem -1.25rem; translate: 0 0; }
  .sr-table { border-spacing: 0 0.375rem; }
  .sr-table tbody td { padding: 0.625rem 0.5rem; }
  .sr-top10 tbody td { padding-block: 0.75rem; }
  .sr-rank { width: 2.5rem; }
  .sr-top10 .sr-rank { font-size: 1.125rem; }
  .sr-top10 .sr-name { font-size: 1rem; }
  .sr-top10 { --sr-avatar: 1.875rem; }
  .sr-hero { padding-top: 1.25rem; }
  /* Both labels and the count have to fit across 320px without a scrollbar. */
  .sr-paging { gap: 0.4rem; }
  .sr-page-btn { font-size: 0.6875rem; letter-spacing: 0.08em; padding: 0.6rem 0.55rem; }
  .sr-page-at { font-size: 0.6875rem; letter-spacing: 0.08em; }
}

/* Narrower than any phone in the campaign, and narrow enough that the money column
   leaves the shirt about fifty pixels, which is less than the word "Limitované". It
   takes its own row under the money, with the rule above it instead of beside it.
   After the block above, not with the other 340 rules, because it has to outrank the
   column it is undoing. */
@media (max-width: 340px) {
  /* The tee column is full width here, so the shirt is already at the slip's edge and
     the extra lean would take it off the screen. */
  .sr-prize-tee-shot { translate: 1.5rem -0.35rem; }
  .sr-prize-body { flex-wrap: wrap; }
  .sr-prize-tee {
    flex-basis: 100%; max-width: none;
    margin-left: 0; padding-left: 0; padding-top: 0.9rem;
    border-left: none; border-top: 1px solid var(--on-surface-12);
  }
}