/* RSSDŽ — Rukometni savez splitsko-dalmatinske županije.
   Design system "TRAG", from Handoffs/RSSDŽ/RSSDZ-WEB-DESIGN-SPEC.md.

   ⚠ THIS FILE NAMES NO COLOUR. Every value comes from a custom property written into the
   page head by `buildRssdzPaletteCss()`. A test fails on a hex literal here. The only
   exceptions are `transparent` and `currentColor`, which are roles rather than colours,
   and the `@media print` block, where a printed page has no brand ground.

   ⚠ INK IS INHERITED, NOT SET PER COMPONENT. A band declares --ink-head/--ink-body/
   --ink-meta/--ink-rule; components read them. `.rs-band--tinta p` and `.rs-card p` would
   otherwise tie on specificity and source order would decide — which is how another site
   in this studio shipped three sections of body copy the same colour as the band behind it.

   Made by sorich.hr (https://sorich.hr/#top) */

/* ═══════════════════════════════════════════════════════════════════════════
   0 · RESET AND BASE
   ═══════════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* No scrollbar on the page (Ante, 2026-09-15) — the coral line on top of the crest strip shows
   how far down you are instead. Only the bar is hidden: the wheel, touch, keys and Page Down
   all still scroll. */
html {
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  /* A cheap guard against a decorative element widening the document. It does NOT fix a
     rotated reveal (see the TRAG block below) — Chrome still reports the grown
     scrollWidth — but it costs nothing and `clip` does not make the body a scroll
     container, so the sticky header keeps working. `hidden` here would break it. */
  overflow-x: clip;
  background: var(--rs-bijela);
  color: var(--rs-tinta);
  font-family: var(--rs-font-ui);
  font-size: 1rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ⚠ RESTORE THE `hidden` ATTRIBUTE.

   The UA stylesheet gives `[hidden]` `display: none`, but at the LOWEST specificity — any
   author rule that sets `display` on the same element silently beats it. This file sets
   `display` on almost everything, so `hidden` had quietly stopped working: the caret menu
   rendered permanently open, the send channels showed on step one, and the "Natrag" button
   was visible on the first screen with nowhere to go back to.

   It is invisible to a test that asks `el.hasAttribute("hidden")` — the attribute IS there,
   it just does nothing. Only a computed-style check catches it, which is how it was found:
   the screenshot showed the menu hanging open under a nav nobody had clicked.

   `!important` because the whole point is to outrank the component rules below. */
[hidden] {
  display: none !important;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--rs-more-700);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--rs-tinta);
}

button {
  font: inherit;
  color: inherit;
}

/* Visible focus everywhere, and NEVER `outline: none` without a replacement.
   On ink the ring flips to coral: sea on tinta is 2.6:1 and disappears. */
:focus-visible {
  outline: 2px solid var(--rs-more);
  outline-offset: 3px;
  border-radius: 2px;
}

.rs-band--tinta :focus-visible,
.rs-band--tinta-900 :focus-visible,
.rs-nav :focus-visible,
.rs-foot :focus-visible {
  outline-color: var(--rs-koralj);
}

.rs-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--rs-koralj-700);
  color: var(--rs-bijela);
  padding: 12px 20px;
  border-radius: 0 0 var(--rs-r-md) 0;
  font-weight: 600;
}

.rs-skip:focus {
  left: 0;
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   1 · LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-in {
  width: 100%;
  max-width: var(--rs-wrap);
  margin-inline: auto;
  padding-inline: var(--rs-gutter);
}

.rs-in--wide {
  max-width: var(--rs-wrap-wide);
}

.rs-band {
  position: relative;
  padding-block: var(--rs-sec-y);
  /* Every band declares its own ink. Components inherit and never name a role colour. */
  --ink-head: var(--rs-tinta);
  --ink-body: var(--rs-siva-600);
  --ink-meta: var(--rs-siva-700);
  --ink-rule: var(--rs-magla-300);
  --ink-eyebrow: var(--rs-koralj-700);
  --ink-card: var(--rs-bijela);
  color: var(--ink-body);
}

.rs-band--bijela {
  background: var(--rs-bijela);
}

.rs-band--magla {
  background: var(--rs-magla);
  --ink-card: var(--rs-bijela);
}

.rs-band--tinta {
  background: var(--rs-tinta);
  --ink-head: var(--rs-bijela);
  --ink-body: var(--rs-ink-on-tinta);
  --ink-meta: var(--rs-ink-on-tinta);
  --ink-rule: var(--rs-rule-on-tinta);
  --ink-eyebrow: var(--rs-koralj);
  --ink-card: var(--rs-tinta-700);
}

.rs-band--tinta-900 {
  background: var(--rs-tinta-900);
  --ink-head: var(--rs-bijela);
  --ink-body: var(--rs-ink-on-tinta);
  --ink-meta: var(--rs-ink-on-tinta);
  --ink-rule: var(--rs-rule-on-tinta);
  --ink-eyebrow: var(--rs-koralj);
  --ink-card: var(--rs-tinta);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2 · TYPE

   Design spec §3.3. Archivo is variable on wght AND wdth, so `font-stretch`
   really interpolates — see scripts/fetch-rssdz-fonts.ts. Never below wdth 100:
   condensed Archivo does not belong to this identity.
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-display-xl,
.rs-display-l,
.rs-display-m,
.rs-eyebrow,
.rs-data-xl {
  font-family: var(--rs-font-display);
  font-synthesis: none;
}

.rs-display-xl {
  /* ⚠ FLOOR LOWERED FROM the spec's 2.75rem. The 8vw term only overtakes the floor above
     ~550px, so every phone renders the floor — and at 44px the longest unbreakable word in
     the Croatian H1, "dalmatinske", measures 301px inside a 288px column at 320px. The
     alternatives were worse: breaking a display headline mid-word, or hyphenation Croatian
     browsers apply inconsistently. 36px fits with room and still reads as a display size.
     Measured, not guessed — verify-rssdz.mjs catches it if it regresses. */
  font-size: clamp(2.25rem, 8vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-stretch: 118%;
  font-weight: 800;
  color: var(--ink-head);
  margin: 0;
  text-wrap: balance;
}

.rs-display-l {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-stretch: 112%;
  font-weight: 800;
  color: var(--ink-head);
  margin: 0;
  text-wrap: balance;
}

.rs-display-m {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-stretch: 100%;
  font-weight: 700;
  color: var(--ink-head);
  margin: 0;
}

/* The ONE place coral is allowed to be a letterform: always caps, always short,
   always ≥ large-text equivalent. On white it uses koralj-700 (5.2:1); on ink,
   plain koralj, which is 4.9:1 there. */
.rs-eyebrow {
  display: block;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.18em;
  font-stretch: 120%;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-eyebrow);
  margin: 0 0 18px;
}

.rs-data-xl {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-stretch: 100%;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-head);
}

.rs-lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink-body);
  max-width: 62ch;
  margin: 20px 0 0;
}

.rs-body {
  color: var(--ink-body);
  margin: 0 0 16px;
  max-width: 68ch;
}

.rs-caption {
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  font-weight: 500;
  color: var(--ink-meta);
}

/* Every figure in a table, a score or a date is tabular. Columns line up for free. */
.rs-num {
  font-family: var(--rs-font-display);
  font-variant-numeric: tabular-nums;
  font-stretch: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3 · BUTTONS

   §3.2 — the rule that stops the mark and the call to action fighting:
   PRIMARY IS INK, not coral. The mark is coral; two coral focal points and the
   logo loses. Coral is reserved for signal.
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--rs-r-md);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--rs-t-micro) var(--rs-ease-ui),
    border-color var(--rs-t-micro) var(--rs-ease-ui),
    transform var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-btn:active {
  transform: scale(0.985);
}

.rs-btn--primary {
  background: var(--rs-tinta);
  color: var(--rs-bijela);
}

.rs-btn--primary:hover {
  background: var(--rs-tinta-700);
  color: var(--rs-bijela);
}

/* On ink the primary inverts — a white plate with ink type. */
.rs-band--tinta .rs-btn--primary,
.rs-band--tinta-900 .rs-btn--primary,
.rs-hero .rs-btn--primary {
  background: var(--rs-bijela);
  color: var(--rs-tinta);
}

.rs-band--tinta .rs-btn--primary:hover,
.rs-band--tinta-900 .rs-btn--primary:hover,
.rs-hero .rs-btn--primary:hover {
  background: var(--rs-magla);
  color: var(--rs-tinta);
}

.rs-btn--ghost {
  background: transparent;
  border-color: var(--rs-magla-300);
  color: var(--rs-tinta);
}

.rs-btn--ghost:hover {
  border-color: var(--rs-tinta);
  color: var(--rs-tinta);
}

.rs-band--tinta .rs-btn--ghost,
.rs-band--tinta-900 .rs-btn--ghost,
.rs-hero .rs-btn--ghost {
  border-color: var(--rs-border-ghost);
  color: var(--rs-bijela);
}

.rs-band--tinta .rs-btn--ghost:hover,
.rs-band--tinta-900 .rs-btn--ghost:hover,
.rs-hero .rs-btn--ghost:hover {
  border-color: var(--rs-bijela);
  color: var(--rs-bijela);
}

/* The one coral button the design allows, once per screen. koralj-700 with white
   type is 5.2:1; plain koralj with white is 3.0:1 and must never carry a label. */
.rs-btn--koralj {
  background: var(--rs-koralj-700);
  color: var(--rs-bijela);
}

.rs-btn--koralj:hover {
  background: var(--rs-koralj);
  color: var(--rs-bijela);
}

.rs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* A text link that behaves like a control — the "Cijeli raspored →" pattern. */
/* ⚠ padding-block is a TAP TARGET, not spacing. Unpadded this renders 23px tall, under
   WCAG 2.5.8's 24px floor, and it is the section-level "Cijeli raspored" / "Sva
   natjecanja" link a parent reaches for on a phone. 9px each side clears 40. */
.rs-link {
  display: inline-flex;
  align-items: center;
  padding-block: 9px;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--rs-more-700);
}

.rs-link::after {
  content: "";
  width: 16px;
  height: 1px;
  background: currentColor;
  transition: width var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-link:hover::after {
  width: 26px;
}

.rs-band--tinta .rs-link,
.rs-band--tinta-900 .rs-link {
  color: var(--rs-more);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4 · HEADER — the crest strip and the sticky nav
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-crests {
  position: relative;
  background: var(--rs-tinta-900);
  border-bottom: 1px solid var(--rs-rule-on-tinta);
}

/* The scroll line along the crest strip's top edge (Ante, 2026-09-15: the page has no scrollbar; a
   line that fills as you scroll shows where you are). inline.js progress() sets the scale. */
.rs-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 3px;
  background: var(--rs-rule-on-tinta);
  pointer-events: none;
}

.rs-progress i {
  display: block;
  height: 100%;
  background: var(--rs-koralj);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.rs-crests-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 54px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rs-crests-row::-webkit-scrollbar {
  display: none;
}

/* Centred (Ante, 2026-09-14). NOT `justify-content: center`: on a phone the row overflows,
   and a centred overflowing flex row cuts its first crests off the left edge where no scroll
   can reach them. Auto margins on the ends centre the row when it fits and collapse to zero
   when it does not, so the scroll still starts at the first crest. */
.rs-crests-row > :first-child {
  margin-left: auto;
}

.rs-crests-row > :last-child {
  margin-right: auto;
}

/* The crest strip and the nav stick TOGETHER. The wrapper is what sticks; see buildNav(). */
.rs-top {
  position: sticky;
  top: 0;
  z-index: 40;
}

.rs-crest {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A width, not a square: the tiles carry "U13 Ž" / "KUP M" rather than a bare
     number, so they have to fit a short label. A real crest replaces the label
     once the club register arrives, and then the square comes back. */
  /* 40px tall: these are TAPS on a phone, not decoration. 44 is the guidance and the
     strip cannot afford it (23 tiles), but 32x30 is a miss on a moving thumb. */
  min-width: 40px;
  padding-inline: 10px;
  height: 40px;
  white-space: nowrap;
  border-radius: var(--rs-r-sm);
  background: var(--rs-tinta);
  border: 1px solid var(--rs-rule-on-tinta);
  color: var(--rs-ink-on-tinta);
  font-family: var(--rs-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    color var(--rs-t-micro) var(--rs-ease-ui),
    border-color var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-crest:hover {
  color: var(--rs-bijela);
  border-color: var(--rs-koralj);
}

.rs-crests-note {
  flex: 0 0 auto;
  padding-left: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rs-ink-on-tinta);
  white-space: nowrap;
}

/* Not sticky itself any more — `.rs-top` around it sticks the nav and the crest strip as one. */
.rs-nav {
  position: relative;
  background: var(--rs-tinta);
  border-bottom: 1px solid var(--rs-rule-on-tinta);
}

.rs-nav-row {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 76px;
  flex-wrap: wrap;
  row-gap: 0;
}

/* ⚠ ONE ROW AT EVERY WIDTH: logo, split CTA, burger (Ante, 2026-09-14: "this top bar needs to
   be one row all screens"). The logo is what gives way, and it does so through FLEX, not a
   viewport calc.

   The first version sized the lockup `calc(100vw - 290px)` from an estimated CTA width. That
   broke twice over: the label's width was a guess, and on Windows `100vw` includes the
   scrollbar, so every width was ~17px too generous and the CTA wrapped under the logo.

   `flex-basis: 0` + `min-width: 0` is the fix. A wrapping flex row decides line breaks from each
   item's BASIS, so a zero-basis brand can never push the CTA onto a second line; it then GROWS
   into whatever is left, capped at 173px (= 52px tall, the ball ~29px). `margin-right: auto`
   takes the rest once the cap is reached, so the brand link never becomes a wide invisible
   "home" button. The nav panel keeps its own line because it is `width: 100%`. */
.rs-brand {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: 173px;
  text-decoration: none;
  color: var(--rs-bijela);
  min-height: 76px;
  margin-right: auto;
}

/* The ball anchors the hero animation. It has a fixed box BEFORE the logo is
   visible so "Bacanje" has somewhere to land and nothing shifts (spec §6.2).
   The lockup's cropped viewBox is 83 : 25; `aspect-ratio` gives it a height before it paints.
   ⚠ `.rs-lockup` is the ONE logo on the site (header, footer, press page) — each place sets
   only its width. */
#rs-logo-slot {
  display: block;
  width: 100%;
}

.rs-lockup {
  display: block;
  max-width: 100%;
  height: auto;
  aspect-ratio: 83 / 25;
}

#rs-logo-slot .rs-lockup {
  width: 100%;
}

/* The press page: on a white card the lockup brings back its own dark tile and viewBox. */
.rs-lockup--tile {
  width: 240px;
  aspect-ratio: 89.4 / 32.55;
}

/* The lockup file sets 105% on its text; Archivo is variable on wdth, so this is real width. */
.rs-lockup text {
  font-stretch: 105%;
}

@media (max-width: 420px) {
  .rs-nav-row {
    gap: 12px;
  }

  .rs-nav-end {
    gap: 8px;
  }

  .rs-nav-end .rs-cta-main {
    padding-inline: 16px;
  }
}

@media (max-width: 359px) {
  .rs-nav-end .rs-cta-main {
    padding-inline: 12px;
  }
}

.rs-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rs-nav-links a {
  display: inline-block;
  padding: 10px 14px;
  border-radius: var(--rs-r-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--rs-ink-on-tinta);
  white-space: nowrap;
  transition: color var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-nav-links a:hover {
  color: var(--rs-bijela);
}

.rs-nav-links a[aria-current="page"] {
  color: var(--rs-bijela);
  position: relative;
}

.rs-nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--rs-koralj);
}

/* HR / EN — the other language of the same page. Shown in the row on a wide screen only; in
   burger mode the panel carries it, so the one-row header keeps its room for logo + CTA. */
.rs-lang {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--rs-border-ghost);
  border-radius: var(--rs-r-sm);
  color: var(--rs-bijela);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: border-color var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-lang:hover {
  border-color: var(--rs-koralj);
  color: var(--rs-bijela);
}

@media (max-width: 1440px) {
  .rs-lang {
    display: none;
  }
}

/* Never shrinks and never wraps its label: in the one-row header the LOGO is the part that
   gives way (see .rs-brand), so the CTA and the burger always keep their full size. */
.rs-nav-end {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 76px;
}

.rs-nav-end .rs-cta-main {
  white-space: nowrap;
}

.rs-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--rs-border-ghost);
  border-radius: var(--rs-r-sm);
  background: transparent;
  color: var(--rs-bijela);
  cursor: pointer;
}

.rs-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
}

.rs-burger span::before,
.rs-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.rs-burger span::before {
  top: -6px;
}

.rs-burger span::after {
  top: 6px;
}

.rs-navpanel {
  display: none;
  width: 100%;
  padding: 8px 0 20px;
  border-top: 1px solid var(--rs-rule-on-tinta);
}

.rs-navpanel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rs-navpanel a:not(.rs-btn) {
  display: block;
  padding: 13px 4px;
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--rs-ink-on-tinta);
  border-bottom: 1px solid var(--rs-rule-on-tinta);
}

.rs-navpanel a:not(.rs-btn):hover {
  color: var(--rs-bijela);
}

.rs-navpanel .rs-btn {
  width: 100%;
  margin-top: 16px;
}

/* ⚠ THE BURGER THRESHOLD IS 1440px since Moj klub, the eighth item (2026-09-15); before that 1320px. It was 1180px (measured) for six labels; "Rezultati"
   (2026-09-14) adds ~110px, so it moved up by more than that. Draženović shipped a dead zone
   twice by moving one and not the other — the panel's own breakpoint in inline.js MUST match
   this number. */
@media (max-width: 1440px) {
  .rs-nav-links {
    display: none;
  }

  /* The <nav> wrapper around the hidden links would still be a flex item, and its two row
     gaps (up to 40px) would come straight out of the logo's width. */
  .rs-nav-row > nav {
    display: none;
  }

  .rs-burger {
    display: inline-flex;
  }

  .rs-nav-row {
    flex-wrap: wrap;
  }

  html.rs-js .rs-navpanel {
    display: none;
  }

  html.rs-js .rs-nav[data-open="1"] .rs-navpanel {
    display: block;
    /* The header is sticky, so an open panel taller than the screen could never be scrolled
       to its end. It scrolls inside itself instead. 140px is the crest strip + nav row. */
    max-height: calc(100dvh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* No script? The panel is simply always open — a visible menu beats an inert
     burger, which is indistinguishable from a broken page. */
  html:not(.rs-js) .rs-navpanel {
    display: block;
  }

  html:not(.rs-js) .rs-burger {
    display: none;
  }
}

@media (min-width: 1321px) {
  .rs-navpanel {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5 · HERO — the one signature moment
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% 0%, var(--rs-tinta-700) 0%, transparent 55%),
    linear-gradient(180deg, var(--rs-tinta) 0%, var(--rs-tinta-900) 100%);
  color: var(--rs-bijela);
  --ink-head: var(--rs-bijela);
  --ink-body: var(--rs-ink-on-tinta);
  --ink-eyebrow: var(--rs-koralj);
  --ink-rule: var(--rs-rule-on-tinta);
  padding-block: clamp(72px, 12vh, 132px) clamp(56px, 9vh, 96px);
}

.rs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

@media (max-width: 900px) {
  .rs-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rs-hero h1 {
  margin: 0;
}

.rs-hero .rs-lead {
  color: var(--rs-ink-on-tinta);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  max-width: 46ch;
}

/* The trail, laid behind the headline at low contrast. It is the mark's own
   geometry — never repeated, never a background pattern (brand rules §5). */
.rs-hero-trag {
  position: absolute;
  top: 8%;
  right: -4%;
  width: min(760px, 78%);
  color: var(--rs-koralj);
  opacity: 0.13;
  pointer-events: none;
}

@media (max-width: 900px) {
  .rs-hero-trag {
    top: auto;
    bottom: -6%;
    right: -18%;
    width: 120%;
    opacity: 0.09;
  }
}

.rs-hero-scroll {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 44px;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rs-ink-on-tinta);
}

.rs-hero-scroll i {
  width: 34px;
  height: 1px;
  background: var(--rs-koralj);
  display: block;
}

/* ── the countdown card (HBC Nantes) ─────────────────────────────────────── */

/* Redesigned 2026-09-15 (Ante, P1: "more clean, more space around elements, modern"). No hard
   rules between the parts any more — space does that: the head, the two teams each as a logo over
   a name, the date, four equal cells, and the competition as a quiet last line. */
.rs-count {
  display: grid;
  gap: clamp(20px, 2.4vw, 28px);
  background: linear-gradient(180deg, var(--rs-tinta-700) 0%, var(--rs-tinta) 100%);
  border: 1px solid var(--rs-rule-on-tinta);
  border-radius: var(--rs-r-xl);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--e2);
}

/* sic.js wraps the live body in one element under the head; it spaces its parts the same way. */
.rs-count > [data-rs-count-body] {
  display: grid;
  gap: clamp(20px, 2.4vw, 28px);
}

.rs-count-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ⚠ SYMMETRIC ON "vs" (Ante, 2026-09-15: "sve elemente centrirane ako su simetrični"). Two equal
   columns around it; each team is centred in its own column, logo over name, so the pair reads
   centred whatever the names' lengths. */
.rs-count-match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.rs-count-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-align: center;
}

.rs-count-side b {
  font-family: var(--rs-font-display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.25;
  color: var(--rs-bijela);
  overflow-wrap: anywhere;
}

/* Level with the middle of the 64px logos. */
.rs-count-vs {
  margin-top: 21px;
  padding: 4px 10px;
  border: 1px solid var(--rs-rule-on-tinta);
  border-radius: var(--rs-r-pill);
  font-family: var(--rs-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rs-koralj);
}

/* The date under the pair, centred; it opens the match page. */
.rs-count-when {
  margin: 0;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rs-ink-on-tinta);
}

.rs-count-when a {
  color: inherit;
  text-decoration-color: var(--rs-border-ghost);
  text-underline-offset: 0.25em;
}

.rs-count-when a:hover {
  color: var(--rs-bijela);
  text-decoration-color: var(--rs-koralj);
}

/* The league select in the card's head. */
.rs-count-nat {
  flex: 0 1 260px;
}

.rs-count-nat .rs-traka-select {
  padding-block: 8px;
  font-size: 0.875rem;
}

@media (max-width: 520px) {
  .rs-count-head {
    flex-wrap: wrap;
  }

  .rs-count-nat {
    flex: 1 1 100%;
  }

  .rs-count-nat .rs-traka-select {
    font-size: 1rem;
  }
}

/* Days · hours · minutes · seconds — always four equal cells. While HRS has only the date, the
   last three read 00 (Ante, 2026-09-15: "all 0 till we get info when the game is"). */
.rs-count-clock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 12px);
  text-align: center;
}

.rs-count-cell {
  min-width: 0;
  padding: 16px 4px 14px;
  background: var(--rs-tinta-900);
  border: 1px solid var(--rs-rule-on-tinta);
  border-radius: var(--rs-r-md);
}

.rs-count-cell b {
  display: block;
  font-family: var(--rs-font-display);
  font-variant-numeric: tabular-nums;
  font-stretch: 100%;
  font-weight: 800;
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1;
  color: var(--rs-bijela);
}

/* The word follows the number — "1 dan", "3 dana", "5 sati" — so its width changes; it never
   wraps a cell onto two lines. */
.rs-count-cell span {
  display: block;
  margin-top: 8px;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rs-ink-on-tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 400px) {
  .rs-count-cell span {
    font-size: 0.625rem;
    letter-spacing: 0.04em;
  }
}

.rs-count-foot {
  margin: 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--rs-ink-on-tinta);
}

.rs-count-empty {
  color: var(--rs-ink-on-tinta);
  font-size: 0.9375rem;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6 · SECTION HEADS
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.rs-head-main {
  min-width: 0;
}

.rs-head .rs-lead {
  margin-top: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7 · ROUND STRIP — the match carousel
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠ MUST wrap. "Zadnji rezultati" + "Sljedeće utakmice" side by side need 327px, so at
   320px the pill pushed the document sideways. It only appears once there ARE fixtures —
   the empty state renders no tabs at all — which is why the demo dataset is what found
   it. Croatian labels are long; assume every inline row wraps. */
.rs-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  background: var(--rs-tinta);
  border: 1px solid var(--rs-rule-on-tinta);
  border-radius: var(--rs-r-pill);
}

.rs-tab {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: var(--rs-r-pill);
  padding: 9px 18px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rs-ink-on-tinta);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--rs-t-ui) var(--rs-ease-ui);
}

.rs-tab[aria-selected="true"] {
  background: var(--rs-tinta-700);
  color: var(--rs-bijela);
  box-shadow: inset 0 -2px 0 0 var(--rs-koralj);
}

/* "Kolo po kolo" rail. The scrollbar is a thin hairline in the band's own rule colour that
   turns coral only while the pointer is on the rail (Ante, 2026-09-14: "unaprijedi scroll da
   paše dizajnu i da bude manje primjetljiv"). The browser's default was a full-height grey bar
   across a dark band. Snap is `proximity`, not `mandatory`: mandatory yanks a trackpad swipe
   back to a card edge, which reads as the rail fighting the hand. */
.rs-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(286px, 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  padding-bottom: 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-rule) transparent;
  transition: scrollbar-color var(--rs-t-ui) var(--rs-ease-ui);
}

.rs-rail:hover,
.rs-rail:focus-visible {
  scrollbar-color: var(--rs-koralj) transparent;
}

/* Engines without `scrollbar-color` (Safari) take the same look from the WebKit pseudo-elements. */
.rs-rail::-webkit-scrollbar {
  height: 4px;
}

.rs-rail::-webkit-scrollbar-track {
  background: transparent;
}

.rs-rail::-webkit-scrollbar-thumb {
  background: var(--ink-rule);
  border-radius: var(--rs-r-pill);
}

.rs-rail:hover::-webkit-scrollbar-thumb {
  background: var(--rs-koralj);
}

/* A touch screen scrolls with the thumb and shows its own transient indicator. */
@media (hover: none) {
  .rs-rail {
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .rs-rail::-webkit-scrollbar {
    display: none;
  }
}

.rs-rail > * {
  scroll-snap-align: start;
}

/* A competition with nothing in this tab: the message spans the rail, not one card column. */
.rs-rail--empty {
  display: block;
}

/* Tabs on the left, the competition select on the right; stacked on a phone. */
.rs-traka-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 24px;
}

.rs-traka-nat {
  position: relative;
  flex: 0 1 340px;
  min-width: 0;
}

.rs-traka-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 11px 44px 11px 18px;
  border: 1px solid var(--rs-rule-on-tinta);
  border-radius: var(--rs-r-pill);
  background: var(--rs-tinta);
  color: var(--rs-bijela);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-traka-select:hover {
  border-color: var(--rs-koralj);
}

/* The open list is the OS's own, on a light ground: give its options readable ink. */
.rs-traka-select option {
  background: var(--rs-bijela);
  color: var(--rs-tinta);
}

.rs-traka-caret {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rs-bijela);
  pointer-events: none;
}

@media (max-width: 720px) {
  .rs-traka-nat {
    flex: 1 1 100%;
  }

  /* 16px: below it iOS zooms the page when a select gets focus. */
  .rs-traka-select {
    font-size: 1rem;
  }
}

@media (min-width: 1100px) {
  .rs-rail {
    grid-auto-columns: minmax(300px, 1fr);
  }
}

.rs-match {
  background: var(--ink-card);
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-lg);
  padding: 20px;
  /* Same grid-blowout guard as .rs-card — a card whose min-content exceeds the track
     makes the track grow and the grid overflow its container. */
  min-width: 0;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition:
    transform var(--rs-t-micro) var(--rs-ease-ui),
    border-color var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-match:hover {
  transform: translateY(-2px);
  border-color: var(--rs-koralj);
}

.rs-match-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--rs-r-pill);
  border: 1px solid var(--ink-rule);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-meta);
  white-space: nowrap;
}

/* Colour never carries meaning alone: the dot AND the word "UŽIVO" (WCAG 1.4.1). */
.rs-badge--uzivo {
  border-color: var(--rs-koralj);
  color: var(--rs-koralj);
}

.rs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rs-koralj);
  animation: rs-pulse 2s var(--rs-ease-ui) infinite;
}

@keyframes rs-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

.rs-match-when {
  font-family: var(--rs-font-display);
  font-variant-numeric: tabular-nums;
  font-stretch: 100%;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink-meta);
}

.rs-side {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rs-side b {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink-head);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-score {
  flex: 0 0 auto;
  font-family: var(--rs-font-display);
  font-variant-numeric: tabular-nums;
  font-stretch: 100%;
  font-weight: 800;
  font-size: 1.375rem;
  color: var(--ink-head);
}

.rs-score--muted {
  color: var(--ink-meta);
  font-size: 0.9375rem;
  font-weight: 600;
}

.rs-match-foot {
  border-top: 1px solid var(--ink-rule);
  padding-top: 12px;
  font-size: 0.8125rem;
  color: var(--ink-meta);
}

/* A small circular crest placeholder — real crests replace it when they arrive. */
.rs-shield {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rs-r-sm);
  border: 1px solid var(--ink-rule);
  font-family: var(--rs-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  font-stretch: 100%;
  color: var(--ink-meta);
}

/* ═══════════════════════════════════════════════════════════════════════════
   8 · EMPTY STATES — every one offers a way out
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-empty {
  border: 1px dashed var(--ink-rule);
  border-radius: var(--rs-r-lg);
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
}

.rs-empty p {
  margin: 0 auto 20px;
  max-width: 56ch;
  color: var(--ink-body);
}

.rs-empty .rs-display-m {
  margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9 · COUNTERS (Montpellier)
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  border-top: 1px solid var(--ink-rule);
  border-bottom: 1px solid var(--ink-rule);
}

@media (max-width: 780px) {
  .rs-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rs-stat {
  padding: clamp(28px, 4vw, 48px) 14px;
  text-align: center;
  position: relative;
}

.rs-stat + .rs-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--ink-rule);
}

@media (max-width: 780px) {
  .rs-stat:nth-child(3)::before {
    display: none;
  }
}

.rs-stat b {
  display: block;
  font-family: var(--rs-font-display);
  font-variant-numeric: tabular-nums;
  font-stretch: 105%;
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-head);
}

.rs-stat span {
  display: block;
  margin-top: 12px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-meta);
}

.rs-stats-note {
  margin: 18px 0 0;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10 · CHIPS AND CARD GRIDS
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.rs-chip {
  appearance: none;
  cursor: pointer;
  padding: 9px 16px;
  border-radius: var(--rs-r-pill);
  border: 1px solid var(--ink-rule);
  background: var(--ink-card);
  color: var(--ink-body);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition:
    border-color var(--rs-t-micro) var(--rs-ease-ui),
    color var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-chip:hover {
  border-color: var(--rs-koralj);
  color: var(--ink-head);
}

.rs-chip[aria-pressed="true"] {
  background: var(--rs-tinta);
  border-color: var(--rs-tinta);
  color: var(--rs-bijela);
}

/* ⚠ THE `min()` IS LOad-BEARING — `minmax(300px, 1fr)` ALONE OVERFLOWS.
   A bare minmax floor is a HARD minimum: at a 288px content width (a 320px
   viewport, which is WCAG 1.4.10's floor and also 200% zoom on a 720px screen)
   the track is still forced to 300/320/400px, the grid grows wider than its
   container and the whole document scrolls sideways.
   `min(<floor>, 100%)` lets the track collapse to the container when the
   container is the smaller of the two. Measured: 16px of sideways scroll at
   320px before this, 0 after. */
.rs-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

.rs-grid--2 {
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
}

.rs-grid--3 {
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

/* ⚠ AND the `min()` is still not enough on its own, which is why this block exists.
   During the INTRINSIC sizing pass the grid's container width is indefinite, so the `100%`
   in `min(320px, 100%)` cannot resolve and the floor falls back to the full 320px. The
   grid's own min-content width therefore stays 320px, it blows past a 288px content box,
   and the document scrolls sideways by a few pixels — small enough to miss by eye and
   still a WCAG 1.4.10 failure at the 320px floor.
   One column below 420px removes the floor entirely. Measured across all 27 pages at
   twelve widths: 320/360/390 went 5/3/2px → 0. */
@media (max-width: 420px) {
  .rs-grid,
  .rs-grid--2,
  .rs-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* `min-width: 0` + `overflow-wrap` are the second half of the grid-blowout fix above.
   A `1fr` track is `minmax(auto, 1fr)`, and that `auto` minimum is the item's MIN-CONTENT
   width — so a card whose longest unbreakable run exceeds the track makes the track grow,
   and the grid overflows its container even though the floor is already `min(…, 100%)`.
   Measured: 2px of sideways scroll at 390px from exactly this. */
.rs-card {
  background: var(--ink-card);
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-lg);
  padding: 26px;
  min-width: 0;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition:
    transform var(--rs-t-micro) var(--rs-ease-ui),
    border-color var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-card:hover {
  transform: translateY(-2px);
  border-color: var(--rs-koralj);
}

.rs-card p {
  color: var(--ink-body);
  margin: 0;
}

.rs-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.rs-card-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--ink-rule);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

/* The competition card's own age plate — the one place a number is allowed to
   be large in a card, because an age group IS the identity of the league. */
.rs-uzrast {
  font-family: var(--rs-font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rs-koralj-700);
}

.rs-band--tinta .rs-uzrast,
.rs-band--tinta-900 .rs-uzrast {
  color: var(--rs-koralj);
}

/* ═══════════════════════════════════════════════════════════════════════════
   11 · AGE LADDER
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-ladder {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-ladder li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--rs-font-display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: 0.875rem;
  color: var(--ink-head);
}

.rs-ladder li::after {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--rs-koralj);
}

.rs-ladder li:last-child::after {
  display: none;
}

.rs-ladder-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid var(--ink-rule);
}

.rs-ladder-row > b {
  min-width: 78px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-meta);
}

/* ═══════════════════════════════════════════════════════════════════════════
   12 · MAP AND CLUB LIST
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-map-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

@media (max-width: 980px) {
  .rs-map-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rs-map {
  background: var(--rs-tinta-700);
  border: 1px solid var(--rs-rule-on-tinta);
  border-radius: var(--rs-r-xl);
  padding: 20px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* `overflow: visible` because a town name above a pin on the county's northern edge
   would otherwise be clipped by the viewBox. */
.rs-map svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* The county's land outline (karta.ts). The map sits on tinta-700 on every band, so the
   on-ink tokens are right wherever it is placed. */
.rs-map-land {
  fill: var(--rs-rule-on-tinta);
  stroke: var(--rs-border-ghost);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

/* A town pin: a role="button" group — invisible hit circle, coral hexagon, club count,
   town name. Selected = white hexagon; the other pins dim so the choice reads at a glance. */
.rs-pin {
  cursor: pointer;
  outline: none;
}

.rs-pin-hit {
  fill: transparent;
}

.rs-pin-hex {
  fill: var(--rs-koralj);
  stroke: var(--rs-tinta-700);
  stroke-width: 1.5;
  transition:
    fill var(--rs-t-micro) var(--rs-ease-ui),
    opacity var(--rs-t-ui) var(--rs-ease-ui);
}

.rs-pin-n {
  fill: var(--rs-tinta-900);
  font-family: var(--rs-font-display);
  font-weight: 800;
  pointer-events: none;
}

.rs-pin-label {
  fill: var(--rs-bijela);
  font-family: var(--rs-font-display);
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--rs-tinta-700);
  stroke-width: 6px;
  stroke-linejoin: round;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-pin-label--stalno {
  opacity: 1;
}

.rs-pin:hover .rs-pin-hex,
.rs-pin:focus-visible .rs-pin-hex,
.rs-pin[aria-pressed="true"] .rs-pin-hex {
  fill: var(--rs-bijela);
  opacity: 1;
}

.rs-pin:hover .rs-pin-label,
.rs-pin:focus-visible .rs-pin-label,
.rs-pin[aria-pressed="true"] .rs-pin-label {
  opacity: 1;
}

.rs-pin:focus-visible .rs-pin-hit {
  stroke: var(--rs-more);
  stroke-width: 3;
}

.rs-map[data-rs-sel] .rs-pin:not([aria-pressed="true"]) .rs-pin-hex {
  opacity: 0.45;
}

/* The town chips. Hidden without script — a row of buttons that does nothing is worse
   than none, and the full list is visible either way. */
.rs-chips--mjesta {
  display: none;
  margin: 20px 0 0;
}

.rs-js .rs-chips--mjesta {
  display: flex;
}

.rs-chip-n {
  margin-left: 6px;
  font-weight: 500;
  opacity: 0.7;
}

/* Live results from the HRS system (assets/sic.js): round navigation, league headings
   when a competition has more than one league, and the source line. */
.rs-sic-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.rs-sic-kolo {
  min-width: 7ch;
  text-align: center;
  font-family: var(--rs-font-display);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--ink-head);
}

.rs-sic-nav .rs-btn[disabled] {
  opacity: 0.4;
  cursor: default;
}

.rs-sic-liga {
  margin: 40px 0 16px;
}

.rs-sic-liga:first-child {
  margin-top: 0;
}

.rs-sic-izvor {
  margin-top: 24px;
}

/* The competition under a match name in the live delegations table. */
.rs-sic-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-meta);
}

/* Anchors (#traka-kola, #pult) must land BELOW the sticky crest strip + nav, not under it. */
html {
  scroll-padding-top: 150px;
}

.rs-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

/* ── /rezultati ─────────────────────────────────────────────────────────── */

/* The filter bar. Hidden without script — five selects that filter nothing are worse than
   none. STICKY under the sticky header once scrolled to (Ante, 2026-09-14: "napravi filtere
   sticky kad se prođu scrollom"); sic.js writes the real `top` from the header's measured
   height, 140px is only the fallback. z-index under the header (40) and the FAB (30). */
.rs-rez-bar {
  display: none;
}

.rs-js .rs-rez-bar {
  display: block;
  position: sticky;
  top: 140px;
  z-index: 20;
  margin: 0 0 20px;
}

.rs-rez-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px 16px;
  align-items: end;
  padding: 14px 18px;
  background: var(--rs-bijela);
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-lg);
  transition: box-shadow var(--rs-t-ui) var(--rs-ease-ui);
}

/* Lifted only while stuck, so at rest it reads as part of the page. */
.rs-rez-bar[data-stuck] .rs-rez-filters,
.rs-rez-bar[data-stuck] .rs-rez-toggle {
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--rs-tinta) 45%, transparent);
}

.rs-rez-filters .rs-field {
  margin: 0;
  min-width: 0;
}

.rs-rez-filters .rs-field > span {
  margin-bottom: 6px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-meta);
}

.rs-rez-filters .rs-input {
  padding: 10px 12px;
  font-size: 0.9375rem;
  text-overflow: ellipsis;
}

.rs-rez-reset {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rs-koralj-700);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.rs-rez-toggle {
  display: none;
}

.rs-rez-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--rs-r-pill);
  background: var(--rs-koralj-700);
  color: var(--rs-bijela);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 1100px) {
  .rs-rez-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Phone: the bar is ONE button while stuck; the five selects open under it on demand. */
@media (max-width: 720px) {
  .rs-rez-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    padding: 0 18px;
    background: var(--rs-bijela);
    border: 1px solid var(--ink-rule);
    border-radius: var(--rs-r-lg);
    color: var(--ink-head);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow var(--rs-t-ui) var(--rs-ease-ui);
  }

  .rs-rez-toggle svg {
    margin-left: auto;
    transition: transform var(--rs-t-ui) var(--rs-ease-ui);
  }

  .rs-rez-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  .rs-js .rs-rez-bar:not([data-open]) .rs-rez-filters {
    display: none;
  }

  .rs-rez-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 8px;
    max-height: calc(100dvh - 280px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .rs-rez-filters .rs-field:first-child {
    grid-column: 1 / -1;
  }

  /* 16px: below it iOS zooms the page when a select gets focus. */
  .rs-rez-filters .rs-input {
    font-size: 1rem;
  }
}

@media (max-width: 400px) {
  .rs-rez-filters {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rs-rez-nat {
  margin-top: 64px;
}

.rs-rez-nat:first-child {
  margin-top: 8px;
}

.rs-rez-nat-h {
  margin-bottom: 4px;
}

.rs-rez-liga {
  margin: 24px 0 20px;
  color: var(--ink-body);
}

/* ── the match table (assets/sic.js → rezTable): /rezultati and every club page ──────────
   Ante, 2026-09-14: "popravi paddinge i margine u tablicama da se svi tekstovi vide s
   srednjim prostorom okolo … ubaci narančaste kao akcent u rezultatima". */

.rs-rez-kolo {
  margin-bottom: 32px;
}

/* The round / competition label — a heading ABOVE the box. As a <caption> it sat inside
   the rounded border, flush against it, and the corner clipped the first letter. */
.rs-rez-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0 0 12px;
  padding-left: 4px;
  font-family: var(--rs-font-display);
  font-weight: 800;
  font-stretch: 100%;
  font-size: 0.9375rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-head);
}

/* The coral accent on the label: a short bar, decoration only, so contrast does not apply. */
.rs-rez-cap::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: var(--rs-koralj);
}

.rs-rez-cap small {
  font-family: var(--rs-font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-meta);
}

/* FIXED layout, widths on the header row: every round's table lines up with the one above
   it. Without a hall column the four remaining widths (77%) scale up to fill the row.

   ⚠ `.rs-table.rs-rez-table`, two classes: the generic `.rs-table th/td` rules (section 23)
   come LATER in this file at one class of specificity, so a single-class selector here
   would lose to them — the padding would snap back and `white-space: nowrap` would push
   long names out of their fixed-width cells. */
.rs-table.rs-rez-table {
  table-layout: fixed;
}

.rs-table.rs-rez-table th,
.rs-table.rs-rez-table td {
  padding: 16px 18px;
  white-space: normal;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.rs-table.rs-rez-table th:first-child,
.rs-table.rs-rez-table td:first-child {
  padding-left: 24px;
}

.rs-table.rs-rez-table th:last-child,
.rs-table.rs-rez-table td:last-child {
  padding-right: 24px;
}

.rs-rez-table .rs-rez-when {
  width: 17%;
}

.rs-rez-table .rs-rez-team {
  width: 24%;
}

.rs-rez-table .rs-rez-score {
  width: 12%;
  text-align: center;
}

/* ⚠ THE SCORE SITS EXACTLY BETWEEN THE TWO NAMES (Ante, 2026-09-14, P1). The home name is
   right-aligned against the score and the away name left-aligned against it, in columns of
   equal width — so the score is the centre of the pair, whatever the names' lengths. Left-
   aligned home names left the score floating closer to the away side. */
.rs-table.rs-rez-table thead th.rs-rez-team:nth-child(2),
.rs-table.rs-rez-table tbody th.rs-rez-team {
  text-align: right;
}

/* Every row opens its match: the link on the score is stretched over the whole row. */
.rs-rez-table tbody tr {
  position: relative;
}

.rs-rez-open {
  color: inherit;
  text-decoration: none;
}

.rs-rez-open::after {
  content: "";
  position: absolute;
  inset: 0;
}

.rs-rez-open:focus-visible {
  outline: none;
}

.rs-rez-table tbody tr:has(.rs-rez-open:focus-visible) {
  outline: 2px solid var(--rs-more);
  outline-offset: -2px;
}

.rs-rez-table tbody tr:has(.rs-rez-open):hover th,
.rs-rez-table tbody tr:has(.rs-rez-open):hover td {
  background: color-mix(in srgb, var(--rs-koralj) 7%, var(--ink-card));
  cursor: pointer;
}

.rs-rez-table .rs-rez-dv {
  width: 23%;
  color: var(--ink-meta);
  font-size: 0.875rem;
}

.rs-rez-date {
  display: block;
  font-weight: 600;
  color: var(--ink-head);
  font-size: 0.875rem;
}

.rs-rez-time {
  display: block;
  margin-top: 2px;
  color: var(--ink-meta);
  font-size: 0.8125rem;
}

.rs-rez-table tbody .rs-rez-team {
  font-weight: 500;
  color: var(--ink-head);
}

.rs-rez-table tbody .rs-rez-team b {
  font-weight: 700;
}

/* The club's own team on its club page. Coral-700 is the coral that reads on paper. */
.rs-rez-table tbody .rs-rez-mine {
  color: var(--rs-koralj-700);
  font-weight: 700;
}

/* The score: white on coral-700 (5.2:1). */
.rs-rez-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 12px;
  border-radius: var(--rs-r-pill);
  background: var(--rs-koralj-700);
  color: var(--rs-bijela);
  font-family: var(--rs-font-display);
  font-stretch: 100%;
  font-weight: 800;
  font-size: 0.9375rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rs-rez-pill b {
  font-weight: 800;
}

.rs-rez-pill i {
  font-style: normal;
  opacity: 0.8;
}

.rs-rez-vs {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-pill);
  color: var(--ink-meta);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
}

.rs-rez-note {
  color: var(--ink-meta);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* A live match: the badge above its score, both centred in the narrow column. */
.rs-rez-score .rs-badge {
  display: flex;
  width: fit-content;
  margin: 0 auto 6px;
}

.rs-rez-live th,
.rs-rez-live td {
  background: var(--rs-magla) !important;
}

@media (max-width: 640px) {
  .rs-table.rs-rez-table th,
  .rs-table.rs-rez-table td {
    padding: 12px 8px;
  }

  .rs-table.rs-rez-table th:first-child,
  .rs-table.rs-rez-table td:first-child {
    padding-left: 12px;
  }

  .rs-table.rs-rez-table th:last-child,
  .rs-table.rs-rez-table td:last-child {
    padding-right: 12px;
  }

  /* The hall column is hidden here; the score gets the room a "25:24" pill needs. */
  .rs-rez-table .rs-rez-when {
    width: 21%;
  }

  .rs-rez-table .rs-rez-team {
    width: 29%;
  }

  .rs-rez-table .rs-rez-score {
    width: 21%;
  }

  .rs-table.rs-rez-table thead th {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
  }

  .rs-rez-date,
  .rs-rez-table tbody .rs-rez-team {
    font-size: 0.8125rem;
  }

  .rs-rez-time {
    font-size: 0.75rem;
  }

  .rs-rez-pill {
    padding: 4px 7px;
    font-size: 0.8125rem;
  }
}

@media (max-width: 380px) {
  .rs-table.rs-rez-table th,
  .rs-table.rs-rez-table td {
    padding: 10px 5px;
  }

  .rs-table.rs-rez-table th:first-child,
  .rs-table.rs-rez-table td:first-child {
    padding-left: 8px;
  }

  .rs-table.rs-rez-table th:last-child,
  .rs-table.rs-rez-table td:last-child {
    padding-right: 8px;
  }
}

/* The club page's live section: the small filters, then one table per competition. */
.rs-klub-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 20px;
  margin: 0 0 28px;
}

.rs-klub-filters .rs-field {
  margin: 0;
  flex: 0 1 340px;
  min-width: 0;
}

.rs-klub-filters .rs-chips {
  margin: 0;
}

/* The club's own side on a match card. */
.rs-side--mine b {
  color: var(--rs-koralj-700);
  font-weight: 700;
}

/* A match card that opens its match page: the link is stretched over the card. */
.rs-match--link {
  position: relative;
}

.rs-match-open {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.rs-match-open:focus-visible {
  outline: 2px solid var(--rs-more);
  outline-offset: 2px;
}

/* The federation's social profiles — round bubbles. A profile without a URL yet is a dimmed
   <span> (Ante, 2026-09-15: shown before the accounts exist, never as a dead link). */
.rs-mreze {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.rs-mreza {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--ink-rule);
  color: var(--ink-head);
  text-decoration: none;
  transition:
    border-color var(--rs-t-micro) var(--rs-ease-ui),
    color var(--rs-t-micro) var(--rs-ease-ui);
}

a.rs-mreza:hover {
  border-color: var(--rs-koralj);
  color: var(--rs-koralj-700);
}

.rs-mreza--off {
  opacity: 0.4;
  cursor: default;
}

/* In the footer (ink ground): white glyphs on a ghost ring. */
.rs-foot .rs-mreza {
  border-color: var(--rs-border-ghost);
  color: var(--rs-bijela);
}

.rs-foot a.rs-mreza:hover {
  border-color: var(--rs-koralj);
  color: var(--rs-bijela);
}

.rs-foot-mreze {
  margin-top: 22px;
}

@media (max-width: 859px) {
  .rs-foot-mreze {
    justify-content: center;
  }
}

/* "Stanje na dan …" under data baked from the HRS snapshot at export time. sic.js removes it
   with the rest of the container once live data arrives. */
.rs-snap-stanje {
  margin: 16px 0 0;
}

/* ── 404.html — root-absolute, standalone (buildRssdz404) ──────────────── */

.rs-nf {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.rs-nf-mark {
  display: inline-block;
  margin-bottom: 40px;
}

.rs-nf-mark .rs-lockup {
  width: 208px;
}

.rs-nf-kontakt {
  margin: 36px 0 0;
  color: var(--ink-body);
}

.rs-nf-kontakt a {
  color: var(--rs-bijela);
}

/* ── /utakmica — the match page (rebuilt 2026-09-15) ───────────────────── */

/* The board: status, the two teams (logo over name, table place under), the score or "vs" in
   the middle, the facts as chips, the countdown before kick-off, share. Centred throughout. */
.rs-utk-board {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 48px);
  background: var(--rs-bijela);
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-xl);
  text-align: center;
}

.rs-utk-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 12px;
}

/* On white, the live badge takes the coral that carries text (5.2:1). */
.rs-utk-board .rs-badge--uzivo {
  border-color: var(--rs-koralj-700);
  color: var(--rs-koralj-700);
}

.rs-badge--kraj {
  background: var(--rs-tinta);
  border-color: var(--rs-tinta);
  color: var(--rs-bijela);
}

.rs-utk-min {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rs-koralj-700);
}

.rs-utk-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(12px, 3vw, 40px);
}

.rs-utk-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* The logo is 96px on a wide screen and shrinks with the board; the inline size is a floor for
   the layout before this stylesheet arrives. */
.rs-utk-side .rs-logo {
  width: clamp(64px, 14vw, 96px) !important;
  height: clamp(64px, 14vw, 96px) !important;
}

.rs-utk-name {
  font-family: var(--rs-font-display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: clamp(1.0625rem, 2.4vw, 1.5rem);
  line-height: 1.2;
  color: var(--ink-head);
  overflow-wrap: anywhere;
}

.rs-utk-name a {
  color: inherit;
  text-decoration: none;
}

.rs-utk-name a:hover,
.rs-utk-name a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--rs-koralj);
  text-underline-offset: 0.2em;
}

.rs-utk-win {
  font-weight: 800;
}

.rs-utk-pos {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-meta);
}

/* Level with the middle of the logos. */
.rs-utk-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: clamp(10px, 3vw, 22px);
}

.rs-utk-score {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px clamp(16px, 3vw, 28px);
  border-radius: var(--rs-r-lg);
  background: var(--rs-koralj-700);
  color: var(--rs-bijela);
  font-family: var(--rs-font-display);
  font-weight: 800;
  font-stretch: 100%;
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rs-utk-score i {
  font-style: normal;
  opacity: 0.7;
}

.rs-utk-vs {
  padding: 8px 16px;
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-pill);
  font-family: var(--rs-font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rs-koralj-700);
}

.rs-utk-pv {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-meta);
  white-space: nowrap;
}

.rs-utk-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-utk-facts li {
  padding: 6px 14px;
  border-radius: var(--rs-r-pill);
  background: var(--rs-magla);
  color: var(--ink-body);
  font-size: 0.875rem;
  font-weight: 500;
}

.rs-utk-clockwrap {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.rs-utk-clock-h {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-meta);
}

.rs-utk-clock {
  width: 100%;
  max-width: 480px;
}

.rs-utk-clock .rs-count-cell {
  background: var(--rs-tinta);
}

.rs-utk-share {
  margin: 0;
}

.rs-utk-sec {
  margin-top: clamp(40px, 6vw, 64px);
}

.rs-utk-h {
  margin: 0 0 18px;
}

.rs-utk-muted {
  margin: 0;
  color: var(--ink-meta);
}

.rs-utk-empty {
  margin-top: 28px;
}

/* ── town pages, /mjesta/<slug>/ (2026-09-15) ───────────────────────────── */

/* The town pages as a list: two or three columns of "Split — 5 klubova" rows. */
.rs-mjesta-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  column-gap: clamp(20px, 3vw, 40px);
}

/* Under the club map: the chosen town's page, one tap away (inline.js karta()). */
.rs-grad-link {
  margin: 16px 0 0;
}

.rs-mjesto-klub-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.rs-mjesto-klub-head svg {
  flex: none;
}

.rs-mjesto-klub-head h3 {
  margin: 0;
  min-width: 0;
}

.rs-mjesto-klub .rs-card-foot {
  align-items: center;
}

/* "Sljedeće utakmice" / "Zadnji rezultati" above their card grids. */
.rs-mjesto-h {
  margin: 40px 0 18px;
}

.rs-mjesto-h:first-child {
  margin-top: 0;
}

/* A heading or card title that IS a link: the heading's colour, the coral on hover. */
.rs-vij-a {
  color: inherit;
  text-decoration: none;
}

.rs-vij-a:hover,
.rs-vij-a:focus-visible {
  color: var(--rs-koralj-700);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* The town row in the footer base — the same voice as the legal links under it. */
.rs-foot-mjesta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin: 0;
}

.rs-foot-mjesta a {
  display: inline-block;
  padding-block: 6px;
  color: inherit;
  text-decoration: none;
}

.rs-foot-mjesta a:hover,
.rs-foot-mjesta a:focus-visible {
  color: var(--rs-bijela);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

@media (max-width: 859px) {
  .rs-foot-mjesta {
    justify-content: center;
  }
}

/* ── weekend reports, /vijesti/rezultati-vikenda-<date>/ ───────────────── */

.rs-vik-tab {
  margin: -8px 0 32px;
}

.rs-vik-izvor {
  margin: 56px 0 0;
  max-width: 72ch;
}

/* ── the club widget's embed code on a club page ───────────────────────── */

.rs-widget-kod {
  margin-top: 56px;
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-lg);
  background: var(--ink-card);
}

.rs-widget-kod > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-family: var(--rs-font-display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: 1.0625rem;
  color: var(--ink-head);
}

.rs-widget-kod > summary::-webkit-details-marker {
  display: none;
}

.rs-widget-kod > summary::after {
  content: "+";
  flex: none;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--rs-koralj-700);
}

.rs-widget-kod[open] > summary::after {
  content: "\2212";
}

.rs-widget-in {
  display: grid;
  gap: 16px;
  padding: 0 22px 24px;
  min-width: 0;
}

.rs-widget-in .rs-body,
.rs-widget-in .rs-chips,
.rs-widget-in .rs-field,
.rs-widget-in .rs-actions {
  margin: 0;
}

.rs-widget-code {
  min-height: 132px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}

.rs-widget-pregled {
  margin: 8px 0 -8px;
}

.rs-widget-frame {
  display: block;
  width: 100%;
  max-width: 560px;
  height: 420px;
  border: 0;
}


/* ── team logos (2026-09-15) ────────────────────────────────────────────────
   HRS's crest on a white disc, over the generated hexagon that shows only when the crest is
   missing (inline.js removes a broken image). The disc keeps a transparent crest legible on the
   dark cards — Kamičak's is thin blue lines. */
.rs-logo {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
}

.rs-logo > .rs-crest-svg {
  width: 100%;
  height: 100%;
}

.rs-logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 12%;
  object-fit: contain;
  border-radius: 50%;
  background: var(--rs-bijela);
  box-shadow: 0 0 0 1px var(--ink-rule);
}

/* ── /galerija ──────────────────────────────────────────────────────────── */

.rs-gal {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.rs-gal-f {
  margin: 0;
}

.rs-gal-a {
  display: block;
  overflow: hidden;
  border-radius: var(--rs-r-lg);
  border: 1px solid var(--ink-rule);
  background: var(--rs-magla);
  aspect-ratio: 4 / 3;
}

.rs-gal-a img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--rs-t-reveal) var(--rs-ease-trag);
}

.rs-gal-a:hover img,
.rs-gal-a:focus-visible img {
  transform: scale(1.04);
}

/* The viewer. A real <dialog>: the browser supplies the top layer, the focus trap and Escape. */
.rs-lb {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--rs-tinta-900);
  color: var(--rs-bijela);
  overflow: hidden;
}

.rs-lb::backdrop {
  background: var(--rs-tinta-900);
}

.rs-lb-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* The stage owns the gesture; the PAGE's pinch-zoom is untouched (assets/galerija.js). */
  touch-action: none;
  user-select: none;
  cursor: zoom-in;
}

.rs-lb-stage[data-zoomed] {
  cursor: grab;
}

.rs-lb-img {
  display: block;
  max-width: 100vw;
  max-height: 100dvh;
  object-fit: contain;
  /* Centre origin on purpose: zoomTo() anchors the pinch as translate + scale about the
     centre; an origin of 0 0 would make the photo drift under the fingers. */
  transform-origin: 50% 50%;
  will-change: transform;
}

.rs-lb-img[data-anim] {
  transition: transform 0.22s var(--rs-ease-ui);
}

/* Close never fades. On a phone there is no Escape key. */
.rs-lb-x {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--rs-r-md);
  border: 1px solid var(--rs-border-ghost);
  background: var(--rs-tinta);
  color: var(--rs-bijela);
  cursor: pointer;
}

.rs-lb-x svg,
.rs-lb-nav svg {
  width: 20px;
  height: 20px;
}

.rs-lb-bar {
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 8px 10px;
  border-radius: var(--rs-r-lg);
  border: 1px solid var(--rs-border-ghost);
  background: var(--rs-tinta);
  opacity: 1;
  transition: opacity 0.35s ease;
}

.rs-lb[data-cue="off"] .rs-lb-bar {
  opacity: 0;
}

/* A control someone tabbed to is never invisible. */
.rs-lb-bar:focus-within {
  opacity: 1 !important;
}

.rs-lb-nav {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--rs-r-md);
  border: 1px solid var(--rs-border-ghost);
  background: transparent;
  color: var(--rs-bijela);
  cursor: pointer;
}

.rs-lb-nav[hidden] {
  display: none;
}

.rs-lb-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 0 4px;
}

.rs-lb-count {
  font-family: var(--rs-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rs-koralj);
  white-space: nowrap;
}

.rs-lb-hint {
  font-size: 0.8125rem;
  color: var(--rs-ink-on-tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* On a pointer screen: no swipe, no tap zones — the same two buttons move to the edges and
   the swipe instruction goes away. One pair of buttons, repositioned by CSS. */
@media (hover: hover) and (pointer: fine) {
  .rs-lb-hint {
    display: none;
  }

  .rs-lb-nav {
    position: fixed;
    top: 50%;
    margin-top: -25px;
    width: 50px;
    height: 50px;
    background: var(--rs-tinta);
  }

  .rs-lb-prev {
    left: max(14px, env(safe-area-inset-left));
  }

  .rs-lb-next {
    right: max(14px, env(safe-area-inset-right));
  }

  .rs-lb[data-cue="off"] .rs-lb-bar {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rs-gal-a img,
  .rs-lb-img[data-anim],
  .rs-lb-bar {
    transition: none;
  }
}

/* A pressed chip is tinta on light bands — which would vanish on an ink band. */
.rs-band--tinta .rs-chip[aria-pressed="true"],
.rs-band--tinta-900 .rs-chip[aria-pressed="true"] {
  background: var(--rs-bijela);
  border-color: var(--rs-bijela);
  color: var(--rs-tinta);
}

.rs-search {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--rs-r-sm);
  border: 1px solid var(--ink-rule);
  background: var(--ink-card);
  color: var(--ink-head);
  font: inherit;
  font-size: 0.9375rem;
}

.rs-search::placeholder {
  color: var(--ink-meta);
}

.rs-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.rs-list li {
  border-bottom: 1px solid var(--ink-rule);
}

.rs-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  text-decoration: none;
  color: var(--ink-head);
  font-weight: 500;
}

.rs-list a:hover {
  color: var(--rs-koralj);
}

.rs-list small {
  margin-left: auto;
  color: var(--ink-meta);
  font-size: 0.8125rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   13 · DOCUMENT ROWS
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-doc {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--ink-rule);
  text-decoration: none;
  color: var(--ink-head);
}

.rs-doc:hover {
  color: var(--rs-koralj);
}

/* The hexagon marker — from the ball's seam. One of only four places the shape is
   allowed to appear (design spec §4); it is not an icon set. */
.rs-hex {
  flex: 0 0 auto;
  width: 12px;
  height: 14px;
  background: var(--rs-koralj);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.rs-doc-main {
  min-width: 0;
  flex: 1 1 auto;
}

.rs-doc-main b {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
}

/* Type and size are IN the link text, never a bare "Preuzmi" (WCAG 2.4.4). */
.rs-doc-main small {
  display: block;
  margin-top: 3px;
  color: var(--ink-meta);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   14 · PULT — three columns
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-pult {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 980px) {
  .rs-pult {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   15 · FAQ / ŠKOLA
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-qa {
  border-top: 1px solid var(--ink-rule);
  padding: 24px 0;
}

.rs-qa h3 {
  margin: 0 0 10px;
  font-family: var(--rs-font-display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: 1.0625rem;
  color: var(--ink-head);
}

.rs-qa p {
  margin: 0;
  color: var(--ink-body);
  max-width: 62ch;
}

/* ═══════════════════════════════════════════════════════════════════════════
   16 · PARTNERS
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-partners {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.rs-partner {
  flex: 1 1 200px;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-lg);
  text-align: center;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink-head);
}

.rs-partner img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Gold marks the TIER, never the partner's own logo (brand rules). 5.0:1 on ink. */
.rs-tier {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rs-zlato);
  margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   17 · FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-foot {
  position: relative;
  overflow: hidden;
  /* The hero's gradient, mirrored: the page opens on a lift at the top-left and closes
     on one at the bottom-right, so the two ink bands read as a pair bracketing the
     content rather than as a header and an unrelated slab. */
  background:
    radial-gradient(120% 90% at 88% 100%, var(--rs-tinta-700) 0%, transparent 58%),
    linear-gradient(180deg, var(--rs-tinta) 0%, var(--rs-tinta-900) 62%);
  color: var(--rs-ink-on-tinta);
  padding-block: clamp(48px, 7vw, 80px) 32px;
  --ink-rule: var(--rs-rule-on-tinta);
}

/* ── FOOTER ────────────────────────────────────────────────────────────────
   LEFT-ALIGNED on desktop, because every other band on this site is — a
   centred footer read as a different page stapled to the bottom. Still
   CENTRED on a phone, which is the arrangement Ante said he liked.
   ────────────────────────────────────────────────────────────────────────── */

.rs-foot-top {
  display: grid;
  gap: clamp(36px, 6vw, 72px);
  padding-bottom: clamp(32px, 5vw, 52px);
}

.rs-foot-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rs-foot-full {
  margin: 14px 0 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--rs-ink-on-tinta);
  max-width: 30ch;
}

/* The one line of brand on the whole site. Coral clears 5.17:1 on the footer
   floor; on the lighter ink it is 3.90:1 and could not carry this at any size. */
.rs-foot-slogan {
  margin: 24px 0 0;
  font-family: var(--rs-font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rs-koralj);
}

.rs-foot-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
}

.rs-foot-group h2 {
  margin: 0 0 14px;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rs-foot-head);
}

/* Every contact detail and every link is its OWN line and its own tap target.
   The previous version ran them together with dots, which wrapped into four
   lines of mush and gave a thumb nothing to aim at. */
.rs-foot-group a,
.rs-foot-row {
  display: block;
  padding-block: 7px;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--rs-ink-on-tinta);
  text-decoration: none;
}

.rs-foot-group a:hover,
.rs-foot-row:hover {
  color: var(--rs-bijela);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* ── the base: three lines, each doing one job ─────────────────────────── */

.rs-foot-base {
  display: grid;
  gap: 10px;
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--rs-rule-on-tinta);
  font-size: 0.8125rem;
  color: var(--rs-foot-head);
}

.rs-foot-ids,
.rs-foot-legal,
.rs-foot-sig {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0;
}

.rs-foot-ids {
  font-variant-numeric: tabular-nums;
}

.rs-foot-ids a,
.rs-foot-legal a,
.rs-foot-sig a {
  color: inherit;
  text-decoration: none;
}

/* Every link in the base is a tap target, the identifiers row included — it was the one
   left out and it came back at 21px, under the 24px floor. */
.rs-foot-ids a,
.rs-foot-legal a,
.rs-foot-sig a {
  display: inline-block;
  padding-block: 6px;
}

.rs-foot-ids a:hover,
.rs-foot-legal a:hover,
.rs-foot-sig a:hover,
.rs-foot-legal a:focus-visible,
.rs-foot-sig a:focus-visible {
  color: var(--rs-bijela);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* ── desktop: the footer joins the page's own left-aligned rhythm ──────── */

@media (min-width: 860px) {
  .rs-foot-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
  }

  .rs-foot-groups {
    justify-items: start;
  }

  /* The signature sits opposite the identifiers rather than under them —
     the base is wide enough here to read as one line instead of three. */
  .rs-foot-sig {
    justify-content: space-between;
  }
}

/* ── phone: the arrangement Ante kept ─────────────────────────────────── */

@media (max-width: 859px) {
  .rs-foot-top,
  .rs-foot-base {
    justify-items: center;
    text-align: center;
  }

  .rs-foot-brand {
    justify-content: center;
  }

  .rs-foot-full {
    margin-inline: auto;
  }

  /* The PAIR is centred; the lists inside are not. A column of items with a ragged
     centre axis is harder to scan than the same column with a left edge — centring is
     right for the mark and the slogan above, wrong for a list of five links. */
  .rs-foot-groups {
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
    text-align: left;
  }

  .rs-foot-ids,
  .rs-foot-legal,
  .rs-foot-sig {
    justify-content: center;
  }
}

/* Two groups side by side stop working below ~360px, where each gets 150px
   and "Suci i delegati" wraps to three lines. */
@media (max-width: 380px) {
  .rs-foot-groups {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
}



/* ═══════════════════════════════════════════════════════════════════════════
   18 · THE WIZARD
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-wiz {
  background: var(--ink-card);
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-xl);
  padding: clamp(24px, 4vw, 40px);
  max-width: 620px;
  /* Centred on a wide screen. A 620px card pinned to the left of a 1600px band reads as
     the leftovers of a two-column layout that never arrived. */
  margin-inline: auto;
}

.rs-wiz-step {
  display: none;
}

.rs-wiz-step[data-active="1"] {
  display: block;
}

/* No script: every step is visible and the whole thing is a plain form the visitor
   can read top to bottom, with a real wa.me link at the end. */
html:not(.rs-js) .rs-wiz-step {
  display: block;
  border-bottom: 1px solid var(--ink-rule);
  padding-bottom: 20px;
  margin-bottom: 20px;
}

html:not(.rs-js) .rs-wiz-nav {
  display: none;
}

.rs-wiz-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-meta);
}

.rs-wiz-bar {
  flex: 1 1 auto;
  height: 3px;
  border-radius: 3px;
  background: var(--ink-rule);
  overflow: hidden;
}

.rs-wiz-bar i {
  display: block;
  height: 100%;
  background: var(--rs-koralj);
  transition: width var(--rs-t-ui) var(--rs-ease-trag);
}

.rs-field {
  display: block;
  margin-bottom: 18px;
}

.rs-field > span {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink-head);
}

.rs-input,
.rs-textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-sm);
  background: var(--rs-bijela);
  color: var(--rs-tinta);
  font: inherit;
  font-size: 1rem;
}

.rs-textarea {
  min-height: 110px;
  resize: vertical;
}

.rs-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rs-opt {
  position: relative;
}

.rs-opt input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.rs-opt span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 20px;
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-pill);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink-body);
}

.rs-opt input:checked + span {
  background: var(--rs-tinta);
  border-color: var(--rs-tinta);
  color: var(--rs-bijela);
}

.rs-opt input:focus-visible + span {
  outline: 2px solid var(--rs-more);
  outline-offset: 3px;
}

/* MUST wrap. The last step shows "Natrag" beside "Otvori WhatsApp s porukom", and that
   second label is 131px on its own — at 320px the row overflowed the card by 69px and
   pushed the whole document sideways. Croatian button labels are long; assume they wrap. */
.rs-wiz-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.rs-err {
  margin: 8px 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rs-koralj-700);
}

.rs-wiz-note {
  margin: 20px 0 0;
  font-size: 0.8125rem;
  color: var(--ink-meta);
}

/* ═══════════════════════════════════════════════════════════════════════════
   19 · REVEAL — the TRAG entrance

   The ramp from the mark (§5.2), amplitude reduced: 0.27→1.0 is right for a
   logo and far too much for a paragraph. Only transform and opacity animate.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠ THERE IS NO `rotate()` HERE, AND IT MUST NOT COME BACK.
   Design spec §5.2 specifies `rotate(-1.2deg)` in the entrance ramp. It cannot ship on
   block-level wrappers: a rotated box's BOUNDING RECT is wider than its layout box by
   roughly height x sin(angle), so a 288px-wide, ~900px-tall section measured 329px until
   the IntersectionObserver reached it — widening the document and producing a real
   horizontal scrollbar at 320/360/390px (5/3/2px). Small enough to miss by eye, and still
   a WCAG 1.4.10 failure at the 320px floor, which is also 200% zoom on a 720px screen.
   The tilt is invisible at 1.2 degrees on a 620ms fade; the scrollbar is not. Opacity,
   translate and scale carry the whole effect and none of them widens the box.
   (`overflow-x: clip` on body was tried first and does NOT fix it — Chrome still reports
   the grown scrollWidth. It stays as a cheap guard against future decorative overflow.) */
html.rs-js [data-rs-reveal] {
  opacity: 0.56;
  transform: translateY(14px) scale(0.94);
  transition:
    opacity var(--rs-t-reveal) var(--rs-ease-trag),
    transform var(--rs-t-reveal) var(--rs-ease-trag);
  transition-delay: var(--rs-delay, 0ms);
}

html.rs-js [data-rs-reveal][data-rs-in="1"] {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   20 · REDUCED MOTION — tested, not assumed
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html.rs-js [data-rs-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .rs-dot {
    animation: none;
    opacity: 1;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   21 · PRINT

   A printed page has no brand ground, so this block names neutral values on
   purpose — the one documented exception to the no-literals rule. A fixtures
   list and a delegation table WILL be printed and pinned to a notice board.
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
  .rs-crests,
  .rs-nav,
  .rs-burger,
  .rs-navpanel,
  .rs-hero-trag,
  .rs-wiz-nav {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .rs-band,
  .rs-hero,
  .rs-foot {
    background: #fff !important;
    color: #000 !important;
    padding-block: 12pt !important;
    --ink-head: #000;
    --ink-body: #222;
    --ink-meta: #444;
    --ink-rule: #bbb;
    --ink-card: #fff;
  }

  /* The lockup's type is white by attribute — on paper it would vanish. The tiled one on the
     press page keeps its dark tile, so its type stays white. */
  .rs-lockup:not(.rs-lockup--tile) text {
    fill: #000 !important;
  }

  .rs-foot a,
  .rs-foot-slogan,
  .rs-foot h2,
  .rs-foot h3,
  .rs-foot-dot {
    color: #000 !important;
  }

  .rs-card,
  .rs-match,
  .rs-empty,
  .rs-wiz,
  .rs-count {
    border-color: #bbb !important;
    border-radius: 0 !important;
    break-inside: avoid;
  }

  .rs-rail {
    display: block;
    overflow: visible;
  }

  .rs-progress {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   22 · DEMO MODE

   Only ever rendered when the demo dataset is explicitly switched on. It is
   loud on purpose — a subtle watermark survives neither a screenshot nor a
   forward, and the whole point is that nobody mistakes a fabricated league
   table for a real one.
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-demo {
  background: var(--rs-koralj-700);
  color: var(--rs-bijela);
  position: relative;
  z-index: 50;
}

.rs-demo-in {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-block: 12px;
}

.rs-demo-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--rs-r-sm);
  background: var(--rs-bijela);
  color: var(--rs-koralj-700);
  font-family: var(--rs-font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
}

.rs-demo-text {
  font-size: 0.8125rem;
  line-height: 1.5;
}

.rs-demo-text b {
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   23 · TABLES — standings and scorers
   ═══════════════════════════════════════════════════════════════════════════ */

/* The wrapper scrolls, never the page. A standings table has nine columns and a
   phone has 320px; letting the DOCUMENT scroll sideways to fit it is the bug
   this whole file has been careful to avoid. */
.rs-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-lg);
  background: var(--ink-card);
}

.rs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.rs-table caption {
  text-align: left;
}

.rs-table th,
.rs-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--ink-rule);
  white-space: nowrap;
}

.rs-table thead th {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-meta);
  background: var(--ink-card);
  position: sticky;
  top: 0;
}

.rs-table tbody th {
  font-weight: 600;
  color: var(--ink-head);
  white-space: normal;
}

.rs-table tbody tr:last-child th,
.rs-table tbody tr:last-child td {
  border-bottom: 0;
}

/* The outer cells keep clear of the rounded border (Ante, 2026-09-14: text "s srednjim
   prostorom okolo"). The phone widths below take this back to what the 320px fit allows. */
.rs-table th:first-child,
.rs-table td:first-child {
  padding-left: 20px;
}

.rs-table th:last-child,
.rs-table td:last-child {
  padding-right: 20px;
}

/* Zebra, at a weight that survives both grounds. */
.rs-table tbody tr:nth-child(odd) th,
.rs-table tbody tr:nth-child(odd) td {
  background: color-mix(in srgb, var(--ink-rule) 26%, transparent);
}

.rs-t-num {
  text-align: right;
  font-family: var(--rs-font-display);
  font-variant-numeric: tabular-nums;
  font-stretch: 100%;
  font-weight: 600;
  color: var(--ink-body);
}

.rs-table tbody .rs-t-num b {
  color: var(--ink-head);
  font-weight: 800;
}

.rs-t-club {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* The crest must not stop the NAME from wrapping. Without min-width:0 the flex item
     refuses to shrink past its content and "RK Salonitanski most" holds the whole table
     open at 320px, pushing the points column into a scroll. */
  min-width: 0;
}

.rs-t-club > span {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Secondary columns fold away on a phone rather than forcing a scroll. */
@media (max-width: 640px) {
  .rs-t-hide {
    display: none;
  }

  .rs-table th,
  .rs-table td {
    padding: 10px 8px;
  }

  .rs-table th:first-child,
  .rs-table td:first-child {
    padding-left: 12px;
  }

  .rs-table th:last-child,
  .rs-table td:last-child {
    padding-right: 12px;
  }
}

.rs-crest-svg {
  flex: 0 0 auto;
  display: block;
}

.rs-crest--img {
  padding-inline: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   24 · CLUB PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-klub-head {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 32px);
  flex-wrap: wrap;
}

.rs-klub-crest {
  flex: 0 0 auto;
  display: inline-flex;
}

.rs-kv {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-rule);
  font-size: 0.9375rem;
}

.rs-kv b {
  flex: 0 0 clamp(64px, 22vw, 92px);
  color: var(--ink-meta);
  font-weight: 600;
}

.rs-kv span {
  color: var(--ink-head);
  /* An IBAN is a single unbreakable 21-character token. In a 274px card at 320px it
     held the row open and scrolled the document; `anywhere` is the one place breaking
     mid-token is right, because the alternative is a number nobody can read at all. */
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ⚠ The competition badge on a match card carries a FULL competition name — "Mini
   rukometna liga SDŽ U10 — muški" is 35 characters. `.rs-badge` is `white-space: nowrap`,
   which is right for "UŽIVO" and "Odgođeno" and very wrong here: it set a 386px
   min-content floor on the card, blew out the grid track and scrolled the page sideways
   by 91px at 320px. Only the card's own label wraps; the state badges beside it keep
   their nowrap, because a wrapped "UŽIVO" reads as two words. */
.rs-match-top .rs-badge:first-child {
  white-space: normal;
  text-align: left;
}

/* A step now holds a GROUP of fields, so it needs to say what the group is about —
   otherwise two screens of unlabelled inputs read as one form split in half. */
.rs-wiz-step-title {
  margin: 0 0 18px;
  font-family: var(--rs-font-display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: 1.0625rem;
  color: var(--ink-head);
}

/* The per-field error sits under its own field, not at the end of the screen. */
.rs-field + .rs-err {
  margin: -10px 0 16px;
}

/* ⚠ COLUMN PRIORITY. A standings table has nine columns and a phone has 360px, so some
   have to go — and WHICH ones is the whole question. Position, club and POINTS are what
   the table exists to answer; played and goal difference are how you read it; W/D/L and
   the goals-for:against pair are detail.

   The first version folded only goals and average, which left nine minus one — still too
   wide, so the wrapper scrolled and "Bod" sat off the right edge. The column a parent came
   for was the one you had to discover a sideways scroll to reach. Fold W/D/L too and the
   remaining five fit: # · klub · OU · +/− · Bod. */
@media (max-width: 520px) {
  .rs-t-wdl {
    display: none;
  }
}

/* 4px over at 320px, entirely in cell padding: five columns x 16px of it. Six pixels a
   side keeps the numerals from touching and brings the table inside the wrapper, so even
   at the WCAG floor the points column is visible without a sideways scroll. */
@media (max-width: 380px) {
  .rs-table th,
  .rs-table td {
    padding: 10px 6px;
  }

  .rs-table th:first-child,
  .rs-table td:first-child {
    padding-left: 6px;
  }

  .rs-table th:last-child,
  .rs-table td:last-child {
    padding-right: 6px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   25 · THE SEND CHANNELS

   Four ways to send the same answers, revealed together on the last screen.
   Stacked, not a row: the labels are Croatian sentences ("Radije nazovi savez"
   is 19 characters) and a row of four would wrap into rubble at 320px. A stack
   also makes the ORDER carry the recommendation, which a row cannot.
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-wiz-send {
  display: grid;
  gap: 10px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--ink-rule);
}

.rs-wiz-send-title {
  margin: 0 0 4px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-meta);
}

/* The call sits apart from the three that carry the message — it is a different
   action, not a fourth way to submit, and the gap says so before the label does. */
.rs-wiz-send [data-rs-send="tel"] {
  margin-top: 6px;
}

/* No script: every channel is a real link already, so the box must not stay hidden. */
html:not(.rs-js) .rs-wiz-send[hidden] {
  display: grid;
}

/* ═══════════════════════════════════════════════════════════════════════════
   26 · THE SPLIT CTA

   "Upiši dijete" plus a caret. Most visitors are parents, so the main action
   keeps its one tap and full label; the caret carries everything else the
   federation can be contacted about.
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-cta {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
}

.rs-cta-main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-inline: 22px;
}

.rs-cta-more {
  display: inline-grid;
  place-items: center;
  /* 44px wide: this is the one control on the page a thumb hits by mistake if it is
     narrow, and hitting it by mistake navigates away from the form. */
  width: 44px;
  min-height: 48px;
  border-radius: 0 var(--rs-r-md) var(--rs-r-md) 0;
  background: var(--rs-koralj-700);
  color: var(--rs-bijela);
  text-decoration: none;
  /* A hairline so the two halves read as one control with two jobs, rather than
     as a button that happens to touch another button. */
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  transition: background var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-cta-more:hover {
  background: var(--rs-koralj);
  color: var(--rs-bijela);
}

.rs-cta-more svg {
  transition: transform var(--rs-t-ui) var(--rs-ease-ui);
}

.rs-cta-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.rs-cta-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 260px;
  display: grid;
  padding: 6px;
  border-radius: var(--rs-r-lg);
  /* Its own ground, not the band's: this opens over ink in the header and over paper
     in a section, and a translucent panel would read differently in each. */
  background: var(--rs-bijela);
  border: 1px solid var(--rs-magla-300);
  box-shadow: var(--e2);
}

.rs-cta-menu a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--rs-r-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--rs-tinta);
}

.rs-cta-menu a:hover,
.rs-cta-menu a:focus-visible {
  background: var(--rs-magla);
  color: var(--rs-tinta);
}

/* No script: the caret is a plain link to /prijave, so the panel must never appear. */
html:not(.rs-js) .rs-cta-menu {
  display: none;
}

/* In the mobile panel the CTA is full width, so the caret goes with it. */
.rs-navpanel .rs-cta {
  display: flex;
  width: 100%;
  margin-top: 16px;
}

.rs-navpanel .rs-cta-main {
  flex: 1 1 auto;
}

.rs-navpanel .rs-cta-menu {
  right: 0;
  left: 0;
}

/* Three wizards, one centred column. Wide enough to read, narrow enough that a form
   still looks like a form rather than a page-width table of inputs. */
.rs-wiz-stack {
  display: grid;
  gap: clamp(20px, 4vw, 32px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   27 · THE FOOTER LOCKUP

   The same inline lockup as the header (Ante, 2026-09-14: "change footer logo to be top
   bar logo") — see brandLockup() in the export. Not the ball + a typed "RSSDŽ" any more.
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-foot-trag {
  position: absolute;
  left: -6%;
  bottom: -18%;
  width: min(620px, 70%);
  color: var(--rs-koralj);
  /* Lower than the hero's 13 %: the footer carries small print and legal identifiers,
     and a motif competing with an IBAN is a motif in the wrong place. */
  opacity: 0.07;
  pointer-events: none;
}

.rs-foot-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

/* 208px = ~63px tall, a touch larger than the header's 173 — the footer has the room, and the
   old ball here was 48px beside 28px type. */
.rs-foot-brand .rs-lockup {
  width: 208px;
}

.rs-foot-full {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--rs-ink-on-tinta);
  max-width: 26ch;
}

/* The columns and the bottom bar sit above the motif. */
.rs-foot > .rs-in {
  position: relative;
  z-index: 1;
}

/* The single exception: with no script the send channels are the only way through, so
   the box must show even though the markup ships it hidden for the scripted path. */
html:not(.rs-js) .rs-wiz-send[hidden] {
  display: grid !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   28 · FLOATING ACTION BUTTON

   Four things somebody wants from a federation in a hurry: message, call,
   e-mail, directions.

   ⚠ `position: fixed` means the CONTAINING BLOCK matters. An ancestor with a
   `transform`, `filter`, `perspective` or `container-type` becomes the
   containing block for its fixed descendants, and this would pin itself to
   that band instead of the viewport — the exact bug another site in this
   studio shipped with a lightbox. The markup emits it at BODY level, outside
   every band. Do not move it inside one.
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-fab {
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  /* Above the iOS home indicator, and above nothing else — the page has no bottom bar. */
  bottom: calc(clamp(14px, 3vw, 28px) + env(safe-area-inset-bottom, 0px));
  /* BELOW the sticky header (.rs-top is 40): an open mobile menu covers this button rather
     than the button sitting on top of the menu's last items (Ante, 2026-09-14). */
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* Every item the SAME width — the widest label sets it — with the icon in a fixed column,
   so the stack reads as one aligned block instead of pills of four different lengths. */
.rs-fab-items {
  display: grid;
  gap: 8px;
  justify-items: stretch;
  min-width: 232px;
}

/* White type and white glyphs on koralj-700 — 5.2:1, the one coral that carries white. */
.rs-fab-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 14px;
  min-height: 48px;
  border-radius: var(--rs-r-pill);
  background: var(--rs-koralj-700);
  border: 1px solid var(--rs-rule-on-tinta);
  box-shadow: var(--e2);
  color: var(--rs-bijela);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--rs-t-micro) var(--rs-ease-ui);
}

/* Hover keeps koralj-700: lightening to plain koralj would drop white type to 3.0:1. */
.rs-fab-item:hover,
.rs-fab-item:focus-visible {
  border-color: var(--rs-bijela);
  color: var(--rs-bijela);
}

.rs-fab-ico {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--rs-bijela);
}

.rs-fab-btn {
  display: inline-grid;
  place-items: center;
  /* 56px — the one control on the page that is always reachable, so it gets the full
     AAA target rather than the 24px AA floor. */
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--rs-koralj-700);
  /* White on koralj-700 is 5.2:1 (plain koralj would be 3.0:1 — never that). */
  color: var(--rs-bijela);
  cursor: pointer;
  box-shadow: var(--e2);
  transition: background var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-fab-btn:hover {
  box-shadow: 0 0 0 2px var(--rs-bijela), var(--e2);
}

.rs-fab-open,
.rs-fab-close {
  place-items: center;
}

.rs-fab-open {
  display: grid;
}

.rs-fab-close {
  display: none;
}

.rs-fab[data-open="1"] .rs-fab-open {
  display: none;
}

.rs-fab[data-open="1"] .rs-fab-close {
  display: grid;
  place-items: center;
}

/* No script: the four links stand open. A trigger that cannot fold them is not a
   trigger, so it goes away rather than sitting there doing nothing. */
html:not(.rs-js) .rs-fab-items[hidden] {
  display: grid !important;
}

html:not(.rs-js) .rs-fab-btn {
  display: none;
}

/* Printing a fixed control puts a coral circle over the fixtures list. */
@media print {
  .rs-fab {
    display: none !important;
  }
}

/* ⚠ NO GENERIC `.rs-foot a` RULE. There was one, and it set `display: inline-block` —
   same specificity as `.rs-foot-group a`, later in the file, so it won and every contact
   row and footer link ran together on one line: "Osječka ul. 11, 21000 Splitrs.split@hrs.hr".

   It also referenced `.rs-foot-nav` and `.rs-foot-reach`, classes the footer stopped
   emitting a rewrite ago. Every footer link now carries its own rule with its own padding
   — see .rs-foot-group a, .rs-foot-legal a and .rs-foot-sig a — so nothing generic is
   needed and nothing generic can out-rank them again. */

/* ⚠ The footer reserves room for the FAB. It is `position: fixed`, so it sits over
   whatever the page ends with — and what this page ends with is the signature line and the
   legal links. Measured against the control: 56px button + its 28px offset, plus air. */
.rs-foot {
  padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-09-15 · match actions, card countdown, logos in tables, coral accents,
   competition cards (Ante)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Share · add to calendar. Icon-only on cards and rows; icon + word on the countdown and the match page. */
.rs-acts {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rs-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-pill);
  background: transparent;
  color: var(--ink-head);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color var(--rs-t-micro) var(--rs-ease-ui),
    color var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-act svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.rs-act--ikona {
  width: 36px;
  padding: 0;
}

.rs-act:hover,
.rs-act:focus-visible,
.rs-act[data-rs-done] {
  border-color: var(--rs-koralj);
  color: var(--rs-koralj-700);
}

.rs-hero .rs-act:hover,
.rs-count .rs-act:hover,
.rs-count .rs-act[data-rs-done],
.rs-band--tinta .rs-act:hover,
.rs-band--tinta-900 .rs-act:hover,
.rs-band--tinta-900 .rs-act[data-rs-done] {
  color: var(--rs-koralj);
}

.rs-count .rs-acts,
.rs-utk-share .rs-acts {
  justify-content: center;
}

.rs-count .rs-act {
  border-color: var(--rs-rule-on-tinta);
  color: var(--rs-bijela);
}

.rs-match .rs-acts {
  margin-top: 12px;
}

/* In a results row: under the score, two small icons. */
.rs-rez-score .rs-acts {
  justify-content: center;
  flex-wrap: nowrap;
  gap: 4px;
  margin-top: 6px;
}

.rs-rez-score .rs-act--ikona {
  width: 30px;
  min-height: 30px;
}

.rs-rez-score .rs-act svg {
  width: 14px;
  height: 14px;
}

/* "za 11 dana · 04:12:33" on an upcoming match card. */
.rs-match-count {
  margin: 2px 0 0;
  min-height: 1.3em;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rs-koralj-700);
}

.rs-band--tinta .rs-match-count,
.rs-band--tinta-900 .rs-match-count {
  color: var(--rs-koralj);
}

/* Logos beside team names in results. */
.rs-rez-tm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  vertical-align: middle;
}

.rs-rez-tm > span:not(.rs-logo) {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── coral where the data matters (Ante: "sve izgleda isto") ── */

.rs-table thead th {
  color: var(--rs-koralj-700);
  border-bottom: 2px solid var(--rs-koralj);
}

.rs-rez-date {
  color: var(--rs-koralj-700);
  font-weight: 700;
}

/* Standings: points in coral, the top three positions marked. */
.rs-tab-stand tbody td:last-child b {
  color: var(--rs-koralj-700);
}

.rs-tab-stand tbody tr:nth-child(-n + 3) td:first-child {
  color: var(--rs-koralj-700);
  font-weight: 800;
}

.rs-table tbody tr:hover > * {
  background: color-mix(in srgb, var(--rs-koralj) 6%, transparent);
}

/* A club's own rows keep their marking, now with a tint so they stand out from the new accents. */
.rs-rez-table tr:has(.rs-rez-mine) > * {
  background: color-mix(in srgb, var(--rs-koralj) 9%, transparent);
}

/* ── competition cards: colour by gender, the whole card opens the competition ── */

.rs-nat-card {
  position: relative;
  --rs-spol-boja: var(--rs-tinta);
  --rs-spol-tekst: var(--rs-bijela);
  border-top: 4px solid var(--rs-spol-boja);
}

.rs-nat-card--m {
  --rs-spol-boja: var(--rs-more-700);
}

.rs-nat-card--z {
  --rs-spol-boja: var(--rs-koralj-700);
}

/* Mixed (mini handball): gold, with ink on it — white on gold would be 2.4:1. */
.rs-nat-card--mz {
  --rs-spol-boja: var(--rs-zlato);
  --rs-spol-tekst: var(--rs-tinta);
}

.rs-nat-card .rs-spol {
  background: var(--rs-spol-boja);
  border-color: var(--rs-spol-boja);
  color: var(--rs-spol-tekst);
}

.rs-nat-card--m .rs-uzrast {
  color: var(--rs-more-700);
}

.rs-nat-card--mz .rs-uzrast {
  color: var(--rs-tinta);
}

.rs-nat-open {
  color: inherit;
  text-decoration: none;
}

.rs-nat-open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.rs-nat-card:hover .rs-nat-open,
.rs-nat-open:focus-visible {
  color: var(--rs-koralj-700);
}

.rs-nat-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 0;
}

.rs-nat-stats div {
  min-width: 0;
  padding: 8px 4px;
  border-radius: var(--rs-r-sm);
  background: var(--rs-magla);
  text-align: center;
}

.rs-nat-stats dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-meta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rs-nat-stats dd {
  margin: 2px 0 0;
  font-family: var(--rs-font-display);
  font-weight: 800;
  font-stretch: 100%;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-head);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-09-15 · Moj klub (Ante)
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-nav-moj::before {
  content: "★";
  margin-right: 4px;
  color: var(--rs-koralj);
}

/* The saved club, first in a select. Option colours work in desktop Chrome, Edge and Firefox;
   a phone's native picker ignores them and shows the group label instead. */
select optgroup.rs-opt-moj,
select option.rs-opt-moj {
  background: color-mix(in srgb, var(--rs-koralj) 16%, #ffffff);
  color: #14202b;
  font-weight: 700;
}

/* Under the home countdown: "Odaberi svoj klub" / "Moj klub: … · Promijeni". */
.rs-count-moj {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.875rem;
}

.rs-count-moj .rs-link {
  color: var(--rs-koralj);
}

/* /rezultati: the Moj klub toggle in the filter bar. */
.rs-rez-moj {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: end;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--rs-koralj-700);
  border-radius: var(--rs-r-pill);
  background: transparent;
  color: var(--rs-koralj-700);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.rs-rez-moj[hidden] {
  display: none;
}

.rs-rez-moj[aria-pressed="true"] {
  background: var(--rs-koralj-700);
  color: var(--rs-bijela);
}

/* /moj-klub */
.rs-moj-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

@media (min-width: 900px) {
  .rs-moj-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.rs-moj-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
}

.rs-moj-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rs-moj-head h2,
.rs-moj-links h2 {
  margin: 0;
}

.rs-moj-ekipe {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.rs-moj-ekipe legend {
  margin-bottom: 8px;
  padding: 0;
  font-weight: 700;
  color: var(--ink-head);
}

.rs-moj-ekipa {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-sm);
  cursor: pointer;
}

.rs-moj-ekipa input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--rs-koralj-700);
}

.rs-moj-ekipa b {
  color: var(--rs-koralj-700);
}

.rs-moj-ekipa:has(input:checked) {
  border-color: var(--rs-koralj);
  background: color-mix(in srgb, var(--rs-koralj) 8%, transparent);
}

.rs-moj-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-meta);
}

.rs-moj-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.rs-moj-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

.rs-moj-utk {
  margin-top: 40px;
}

.rs-moj-utk h2 {
  margin: 32px 0 12px;
}

.rs-moj-utk h2:first-child {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-09-15 · the shared filter bar (from–to dates) and the social bubbles (Ante)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Six fields (five on a competition page, which has no competition select). */
.rs-rez-filters {
  grid-template-columns: repeat(var(--rs-f-cols, 6), minmax(0, 1fr));
}

.rs-rez-bar[hidden],
.rs-moj-utk[hidden] {
  display: none !important;
}

.rs-rez-filters input[type="date"].rs-input {
  min-height: 44px;
  font-variant-numeric: tabular-nums;
}

/* Moj klub and "clear" on their own row under the fields; gone when both are hidden. */
.rs-f-acts {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}

.rs-f-acts:not(:has(> :not([hidden]))) {
  display: none;
}

.rs-f-acts .rs-rez-moj {
  align-self: auto;
  min-height: 40px;
}

@media (max-width: 1100px) {
  .rs-rez-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .rs-rez-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 400px) {
  .rs-rez-filters {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A competition's filtered view and the club's tables sit under the bar like /rezultati's. */
[data-rs-sic-ras] > .rs-rez-kolo:first-child,
[data-rs-moj-lista] > .rs-rez-kolo:first-child {
  margin-top: 0;
}

/* Social bubbles in the phone menu (ink ground). */
.rs-navpanel-mreze {
  margin-top: 18px;
}

.rs-navpanel a.rs-mreza {
  display: inline-grid;
  padding: 0;
  font-size: inherit;
  border: 1px solid var(--rs-border-ghost);
  color: var(--rs-bijela);
}

.rs-navpanel a.rs-mreza:hover {
  border-color: var(--rs-koralj);
  color: var(--rs-bijela);
}

/* "Prati nas" under the news and each weekend report. */
.rs-prati {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 40px;
}

.rs-prati-t {
  font-weight: 700;
  color: var(--ink-head);
}

.rs-prati .rs-mreze {
  margin-top: 0;
}

/* WhatsApp 1 and WhatsApp 2 — both numbers, with the mark (Ante, 2026-09-15). */
.rs-wa {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rs-wa .rs-wa-ico {
  flex: none;
  color: #128c7e;
}

.rs-foot .rs-wa .rs-wa-ico,
.rs-band--tinta .rs-wa .rs-wa-ico {
  color: #25d366;
}

.rs-wa-list {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.rs-wa-a {
  min-height: 44px;
  color: var(--ink-head);
  text-decoration: none;
}

.rs-wa-a:hover span,
.rs-wa-a:focus-visible span {
  text-decoration: underline;
}

@media (max-width: 859px) {
  .rs-foot .rs-wa {
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-09-15 · the game card — every list of matches (Ante: "kartice svugdje",
   after the NFL scoreboard). Standings stay tables.
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.rs-game {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--ink-card);
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-lg);
  box-shadow: 0 12px 26px -20px color-mix(in srgb, var(--rs-tinta) 45%, transparent);
  transition: border-color var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-game:hover,
.rs-game:focus-within,
.rs-game--live {
  border-color: var(--rs-koralj);
}

/* Head: the state on the left ("ZAVRŠENO", LIVE, the kick-off), the date or countdown on the right. */
.rs-game-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--rs-magla);
  border-bottom: 1px solid var(--ink-rule);
  font-size: 0.8125rem;
}

.rs-game-state {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-meta);
}

.rs-game-state--when {
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-head);
  font-variant-numeric: tabular-nums;
}

.rs-game-date,
.rs-game-count {
  margin-left: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink-meta);
}

.rs-game-count {
  font-weight: 700;
  color: var(--rs-koralj-700);
}

/* One row per team: crest · name · won-drawn-lost · score. */
.rs-game-teams {
  display: grid;
  gap: 2px;
  padding: 10px 16px;
}

.rs-game-team {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 10px;
  min-height: 48px;
  padding-left: 12px;
}

/* The club's own team: an orange bar, as the scoreboard's team colour. */
.rs-game-team::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 2px;
  background: transparent;
}

.rs-game-team--mine::before {
  background: var(--rs-koralj);
}

.rs-game-name {
  min-width: 0;
  font-family: var(--rs-font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink-head);
  overflow-wrap: anywhere;
}

.rs-game-rec {
  grid-column: 3;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink-meta);
}

.rs-game-score {
  grid-column: 4;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 2.2ch;
  font-family: var(--rs-font-display);
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink-head);
}

/* The winner's marker — a small triangle pointing at the score. */
.rs-game-win {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--rs-koralj-700);
}

.rs-game-team--lose .rs-game-name,
.rs-game-team--lose .rs-game-score {
  font-weight: 700;
  color: var(--ink-meta);
}

/* Foot: round · competition · hall, then the actions. */
.rs-game-foot {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--ink-rule);
}

.rs-game-where {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-meta);
}

.rs-game-acts {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rs-game-open {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--rs-more-700);
  border-radius: var(--rs-r-sm);
  color: var(--rs-more-700);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color var(--rs-t-micro) var(--rs-ease-ui),
    color var(--rs-t-micro) var(--rs-ease-ui);
}

/* The whole card opens the match; share and calendar sit above that layer. */
.rs-game-open::after {
  content: "";
  position: absolute;
  inset: 0;
}

.rs-game-open:hover,
.rs-game-open:focus-visible {
  background: var(--rs-more-700);
  color: var(--rs-bijela);
}

.rs-game .rs-acts {
  position: relative;
  z-index: 2;
  flex-wrap: nowrap;
  margin: 0;
}

.rs-rail > .rs-game {
  height: 100%;
}

/* The game card's head in blue, the date and time in white, the days to the match in orange
   (Ante, 2026-09-15). The lighter coral, not coral-700: this one sits on a dark ground. */
.rs-game-head {
  background: var(--rs-more-700);
  border-bottom-color: var(--rs-more-700);
}

.rs-game-state,
.rs-game-state--when,
.rs-game-date {
  color: var(--rs-bijela);
}

.rs-game-count {
  color: var(--rs-koralj);
}

/* Second pass (Ante, 2026-09-15): the head in the hero's navy, not a new blue; the days to the
   match as a quiet white pill instead of orange; no orange border on hover. The button follows the
   navy so the card carries one colour, not two. */
.rs-game-head {
  background: var(--rs-tinta);
  border-bottom-color: var(--rs-tinta);
}

.rs-game-count {
  padding: 2px 10px;
  border-radius: var(--rs-r-pill);
  background: color-mix(in srgb, var(--rs-bijela) 14%, transparent);
  color: var(--rs-bijela);
}

.rs-game:hover,
.rs-game:focus-within {
  border-color: var(--ink-rule);
  box-shadow: 0 18px 32px -20px color-mix(in srgb, var(--rs-tinta) 60%, transparent);
}

.rs-game-open {
  border-color: var(--rs-tinta);
  color: var(--rs-tinta);
}

.rs-game-open:hover,
.rs-game-open:focus-visible {
  background: var(--rs-tinta);
  color: var(--rs-bijela);
}

/* The countdown's text in orange, on the white pill over navy (Ante, 2026-09-15). */
.rs-game-count {
  color: var(--rs-koralj);
}

/* The game card is the SAME card on every band (Ante, 2026-09-15, P1: on the home page's navy
   "Kolo po kolo" it inherited the dark band's ink — a navy card with a navy head, and a navy
   "Detalji utakmice" nobody could see). It carries the light ink itself, whatever it sits on. */
.rs-game {
  --ink-head: var(--rs-tinta);
  --ink-body: var(--rs-siva-600);
  --ink-meta: var(--rs-siva-700);
  --ink-rule: var(--rs-magla-300);
  --ink-card: var(--rs-bijela);
  background: var(--rs-bijela);
  color: var(--rs-siva-600);
}

/* "Kolo po kolo" scrolls freely (Ante, 2026-09-15: "nemoj ga centrirati, ovisi o scrollu na mišu ili
   kako se povuče prstom"): no snapping to a card edge; the mouse wheel moves it smoothly
   (inline.js rails). */
.rs-rail {
  scroll-snap-type: none;
  scroll-behavior: smooth;
}

.rs-rail > * {
  scroll-snap-align: none;
}

@media (prefers-reduced-motion: reduce) {
  .rs-rail {
    scroll-behavior: auto;
  }
}

/* ONE border on the competition selects (Ante, 2026-09-15, P1): the select's own border turns coral
   on hover and focus, and the band's focus ring is no longer drawn around it as a second one. */
.rs-traka-nat .rs-traka-select:focus,
.rs-traka-nat .rs-traka-select:focus-visible {
  outline: none;
  border-color: var(--rs-koralj);
  box-shadow: inset 0 0 0 1px var(--rs-koralj);
}

/* The rail glides by inline.js's own frame loop (railWheel). scroll-behavior: smooth here turned
   every frame into its own native animation and made the rail crawl (Ante, 2026-09-15: "pre spor"). */
.rs-rail {
  scroll-behavior: auto;
}

/* "Kolo po kolo" on the home page: the game cards carry an orange border (Ante, 2026-09-15). One
   border, the same at rest and on hover — only this section; everywhere else stays neutral. */
#traka-kola .rs-game,
#traka-kola .rs-game:hover,
#traka-kola .rs-game:focus-within {
  border-color: var(--rs-koralj);
}

/* "Kolo po kolo": the cards' border in navy instead of orange (Ante, 2026-09-15) — one border, the
   same at rest and on hover. */
#traka-kola .rs-game,
#traka-kola .rs-game:hover,
#traka-kola .rs-game:focus-within {
  border-color: var(--rs-tinta);
}

/* A team's crest and name open its club page; anywhere else on the card opens the match (Ante,
   2026-09-15). The link sits above the card-wide match link; a team with no club page is plain
   text and lets the click through to the match. */
.rs-game-team {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.rs-game-klub {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.rs-game-klub .rs-logo {
  flex: none;
}

a.rs-game-klub {
  position: relative;
  z-index: 2;
}

a.rs-game-klub:hover .rs-game-name,
a.rs-game-klub:focus-visible .rs-game-name {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.rs-game-rec {
  grid-column: 2;
}

.rs-game-score {
  grid-column: 3;
}

/* Cards: ONLY the crest and the name are the club link — the rest of the row opens the match, as a
   reader expects, above all on a phone (Ante, 2026-09-15). */
a.rs-game-klub,
span.rs-game-klub {
  justify-self: start;
  max-width: 100%;
}

/* Tables: the crest and the name open the club page. */
a.rs-t-club {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
}

a.rs-t-club:hover > span:last-child,
a.rs-t-club:focus-visible > span:last-child {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Table rows (Ante, 2026-09-15, P1): the hover shows on the striped rows too — the stripe rule was
   more specific than the hover and hid it — and a row that opens a club says so with the pointer. */
.rs-table tbody tr:hover > th,
.rs-table tbody tr:hover > td {
  background: color-mix(in srgb, var(--rs-koralj) 11%, var(--ink-card, #ffffff));
}

.rs-table tbody tr:has(a.rs-t-club) {
  cursor: pointer;
}

/* The next-match card (Ante, 2026-09-15, P1): a team — crest and name — opens its club; anything
   else on the card opens the match. The match link is stretched UNDER everything interactive. */
.rs-count {
  position: relative;
}

.rs-count-open {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.rs-count-open:focus-visible {
  outline: 2px solid var(--rs-koralj);
  outline-offset: 2px;
}

.rs-count-head,
.rs-count-side--link,
.rs-count .rs-acts,
.rs-count-moj,
.rs-count-when a {
  position: relative;
  z-index: 2;
}

a.rs-count-side {
  justify-self: center;
  color: inherit;
  text-decoration: none;
}

a.rs-count-side:hover b,
a.rs-count-side:focus-visible b {
  text-decoration: underline;
  text-decoration-color: var(--rs-koralj);
  text-underline-offset: 0.2em;
}

/* Standings on a phone (Ante, 2026-09-15): a switch between "Bodovi" (OU · P · N · I · Bod) and
   "Golovi" (goals · +/− · Bod) — every figure reachable, no sideways scroll. The desktop table is
   unchanged; the switch exists only where the columns would not fit. */
.rs-tab-toggle {
  display: none;
}

@media (max-width: 640px) {
  .rs-tab-toggle {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 12px;
    padding: 4px;
    border: 1px solid var(--ink-rule);
    border-radius: var(--rs-r-pill);
    background: var(--ink-card);
  }

  .rs-tab-toggle button {
    min-height: 36px;
    padding: 6px 18px;
    border: 0;
    border-radius: var(--rs-r-pill);
    background: transparent;
    color: var(--ink-meta);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
  }

  html:not([data-rs-tab-pogled="golovi"]) .rs-tab-toggle [data-rs-tab-pogled-btn="bodovi"],
  html[data-rs-tab-pogled="golovi"] .rs-tab-toggle [data-rs-tab-pogled-btn="golovi"] {
    background: var(--rs-tinta);
    color: var(--rs-bijela);
  }

  /* Bodovi (the default): OU · P · N · I · Bod. */
  html:not([data-rs-tab-pogled="golovi"]) .rs-tab-stand .rs-t-ou,
  html:not([data-rs-tab-pogled="golovi"]) .rs-tab-stand .rs-t-wdl {
    display: table-cell;
  }

  html:not([data-rs-tab-pogled="golovi"]) .rs-tab-stand .rs-t-gol,
  html:not([data-rs-tab-pogled="golovi"]) .rs-tab-stand .rs-t-raz {
    display: none;
  }

  /* Golovi: goals · +/− · Bod. */
  html[data-rs-tab-pogled="golovi"] .rs-tab-stand .rs-t-gol,
  html[data-rs-tab-pogled="golovi"] .rs-tab-stand .rs-t-raz {
    display: table-cell;
  }

  html[data-rs-tab-pogled="golovi"] .rs-tab-stand .rs-t-ou,
  html[data-rs-tab-pogled="golovi"] .rs-tab-stand .rs-t-wdl {
    display: none;
  }
}

/* The saved club on the next-match card: an orange aura around its crest and its name in orange
   (Ante, 2026-09-15). In "Kolo po kolo" the club's row carries the orange bar (.rs-game-team--mine). */
.rs-count-side--moj .rs-logo {
  border-radius: 50%;
  box-shadow:
    0 0 0 3px var(--rs-koralj),
    0 0 26px 6px color-mix(in srgb, var(--rs-koralj) 55%, transparent);
}

.rs-count-side--moj b {
  color: var(--rs-koralj);
  text-shadow: 0 0 18px color-mix(in srgb, var(--rs-koralj) 45%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .rs-count-side--moj .rs-logo {
    animation: rs-moj-aura 2.8s ease-in-out infinite;
  }
}

@keyframes rs-moj-aura {
  0%,
  100% {
    box-shadow:
      0 0 0 3px var(--rs-koralj),
      0 0 18px 4px color-mix(in srgb, var(--rs-koralj) 40%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 3px var(--rs-koralj),
      0 0 30px 8px color-mix(in srgb, var(--rs-koralj) 60%, transparent);
  }
}

/* Phone footer: EVERY line centred (Ante, 2026-09-15: "center all text on mobile in footer") — this
   replaces the left-aligned lists inside the centred pair (2026-09-14). The WhatsApp rows are
   centred as a unit, icon and text together, with their gap. */
@media (max-width: 859px) {
  .rs-foot-groups {
    justify-items: center;
    text-align: center;
  }

  .rs-foot-group {
    display: grid;
    justify-items: center;
    text-align: center;
  }

  .rs-foot .rs-foot-group .rs-foot-row {
    text-align: center;
  }

  .rs-foot .rs-foot-group a.rs-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
}

/* The saved club (Moj klub) leads the crest strip, in orange (Ante, 2026-09-15; inline.js crestMoj). */
.rs-crest.rs-crest--moj {
  border-color: var(--rs-koralj);
  background: color-mix(in srgb, var(--rs-koralj) 22%, transparent);
  box-shadow: 0 0 0 1px var(--rs-koralj), 0 0 14px 2px color-mix(in srgb, var(--rs-koralj) 45%, transparent);
}

.rs-crest.rs-crest--moj:hover,
.rs-crest.rs-crest--moj:focus-visible {
  border-color: var(--rs-koralj);
}

/* Cards with ONE destination (Ante, 2026-09-15): the whole card is the link, the button is gone.
   The link is stretched over the card; any other link inside stays on top of it. */
.rs-card--link {
  position: relative;
  cursor: pointer;
  transition: box-shadow var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-card-open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.rs-card--link:hover {
  box-shadow: 0 18px 32px -22px color-mix(in srgb, var(--rs-tinta) 55%, transparent);
}

.rs-card--link:hover :is(h2, h3),
.rs-card--link:focus-within :is(h2, h3) {
  color: var(--rs-koralj-700);
}

.rs-card-open:focus-visible {
  outline: none;
}

.rs-card--link:has(.rs-card-open:focus-visible) {
  outline: 2px solid var(--rs-more);
  outline-offset: 3px;
}

.rs-card--link a:not(.rs-card-open) {
  position: relative;
  z-index: 1;
}

/* A news card's title link is the card's link: it keeps the heading's look. */
.rs-card--link .rs-vij-a {
  color: inherit;
  text-decoration: none;
}

/* The app prompts: a new version to reload, and installing on a phone (inline.js appPrompts).
   Above the floating button on a phone, centred at the bottom on a computer. */
.rs-app-pop {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  transform: translateX(-50%);
  display: grid;
  gap: 12px;
  width: min(440px, calc(100% - 32px));
  padding: 20px 20px 18px;
  background: var(--rs-tinta);
  color: var(--rs-bijela);
  border: 1px solid var(--rs-rule-on-tinta);
  border-radius: var(--rs-r-lg);
  box-shadow: 0 28px 56px -24px rgba(6, 18, 32, 0.6);
}

@media (min-width: 721px) {
  .rs-app-pop {
    bottom: 24px;
  }
}

.rs-app-pop h2 {
  margin: 0;
  padding-right: 36px;
  font-family: var(--rs-font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--rs-bijela);
}

.rs-app-pop p,
.rs-app-pop ol {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--rs-ink-on-tinta);
}

.rs-app-pop ol {
  display: grid;
  gap: 8px;
  padding-left: 1.3em;
}

.rs-app-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.rs-app-btn {
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--rs-r-pill);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.rs-app-btn--da {
  background: var(--rs-koralj-700);
  color: var(--rs-bijela);
}

.rs-app-btn--ne {
  background: transparent;
  border-color: var(--rs-rule-on-tinta);
  color: var(--rs-ink-on-tinta);
}

.rs-app-x {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--rs-ink-on-tinta);
  cursor: pointer;
}

.rs-app-x:hover,
.rs-app-x:focus-visible {
  color: var(--rs-bijela);
}

@media print {
  .rs-app-pop {
    display: none;
  }
}

/* ⚠ The sideways scroll on phones (Ante, 2026-09-15: "zašto mogu scrollat lijevo i vidim bijeli
   ekran"). Each crest tile carries its club's name as screen-reader text (.rs-sr, absolutely
   positioned). With no positioned ancestor INSIDE the scrolling row, those 1px spans took their
   position from .rs-crests — outside the row's overflow — so the last tiles' names stretched the
   whole document to ~1050px on a 375px phone. Positioning the tile and the row keeps them inside
   the scroll container, where they are clipped. */
.rs-crests-row,
.rs-crest {
  position: relative;
}

/* The club map zooms on its own (Ante, 2026-09-15; inline.js mapZoom). Not zoomed: one finger
   scrolls the page, and a pinch on the map zooms the map, not the page. Zoomed: the map takes the
   finger (drag), and what lies outside the view is clipped. */
.rs-map {
  position: relative;
}

.rs-map svg {
  touch-action: pan-x pan-y;
}

.rs-map[data-rs-zoom] svg {
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.rs-map[data-rs-zoom] svg:active {
  cursor: grabbing;
}

.rs-map-zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  gap: 6px;
}

.rs-map-zoom button {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--rs-rule-on-tinta);
  border-radius: 12px;
  background: var(--rs-tinta);
  color: var(--rs-bijela);
  cursor: pointer;
}

.rs-map-zoom button:hover,
.rs-map-zoom button:focus-visible {
  background: var(--rs-tinta-900);
}

.rs-map-zoom button:disabled {
  opacity: 0.4;
  cursor: default;
}

.rs-map-zoom button[hidden] {
  display: none;
}

/* A section heading with its share button beside it (tables), and the share button under a club's
   or a team's name (Ante, 2026-09-15). A shared #tablica link lands below the sticky header. */
.rs-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 24px;
}

.rs-sec-head > h2,
.rs-sec-head > h3,
.rs-sec-head .rs-rez-cap {
  margin: 0;
}

.rs-sec-head--sm {
  margin-bottom: 12px;
}

#tablica,
[id^="tablica-"] {
  scroll-margin-top: 150px;
}

.rs-klub-share {
  margin-top: 16px;
}

.rs-band--tinta .rs-act,
.rs-band--tinta-900 .rs-act {
  border-color: var(--rs-rule-on-tinta);
  color: var(--rs-bijela);
}

/* Cards entering as they scroll into view (Ante, 2026-09-15; inline.js cardReveal). Only a card
   that was below the fold waits hidden; one already on screen never moves. */
html.rs-js [data-rs-card="wait"] {
  opacity: 0;
  transform: translateY(22px) scale(0.97);
}

html.rs-js [data-rs-card="in"] {
  transition:
    opacity 460ms var(--rs-ease-trag),
    transform 560ms var(--rs-ease-trag),
    border-color var(--rs-t-micro) var(--rs-ease-ui),
    box-shadow var(--rs-t-micro) var(--rs-ease-ui);
  transition-delay: var(--rs-card-delay, 0ms), var(--rs-card-delay, 0ms), 0ms, 0ms;
}

@media (prefers-reduced-motion: reduce) {
  html.rs-js [data-rs-card] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* A club's / a team's hero on a phone: centred and compact (Ante, 2026-09-15, P1) — a smaller
   crest, tighter type and spacing, the share button under the name. */
@media (max-width: 720px) {
  .rs-band--tinta:has(.rs-klub-head) {
    padding-block: 28px 32px;
  }

  .rs-klub-head {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }

  .rs-klub-crest .rs-logo {
    width: 72px !important;
    height: 72px !important;
  }

  .rs-klub-crest > svg {
    width: 72px;
    height: 72px;
  }

  .rs-klub-head .rs-eyebrow {
    margin-bottom: 2px;
  }

  .rs-klub-head h1 {
    margin: 0 0 4px;
    font-size: clamp(1.625rem, 7vw, 2rem);
    line-height: 1.1;
  }

  .rs-klub-head .rs-lead {
    margin: 0;
    font-size: 1rem;
  }

  .rs-klub-share {
    display: flex;
    justify-content: center;
    margin-top: 12px;
  }
}

/* "Ukloni odabir" on the Moj klub page: the site's own pill button, not the browser's grey box
   (Ante, 2026-09-15, P2). */
.rs-moj-ukloni {
  min-height: 36px;
  padding: 6px 16px;
}

/* List rows carry the orange hexagon of the document rows (Ante, 2026-09-15, P3) — quick links,
   a club's competitions. */
.rs-list a::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 14px;
  background: var(--rs-koralj);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* Smooth entrances at the BOTTOM of the screen (Ante, 2026-09-15: on a phone and in the installed
   app the cards stayed hidden until they reached the middle). Three causes, three fixes: the
   observers now fire at the first visible pixel (inline.js), the motion is shorter and lighter, and
   a section that is a list of cards no longer ALSO animates as a block — that doubled the wait
   (the block at 56% and shrunk, the cards inside it at 0%). The cards carry the motion alone. */
html.rs-js [data-rs-card="wait"] {
  opacity: 0;
  transform: translateY(16px);
}

html.rs-js [data-rs-card="in"] {
  transition:
    opacity 380ms cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 460ms var(--rs-ease-trag),
    border-color var(--rs-t-micro) var(--rs-ease-ui),
    box-shadow var(--rs-t-micro) var(--rs-ease-ui);
  transition-delay: var(--rs-card-delay, 0ms), var(--rs-card-delay, 0ms), 0ms, 0ms;
}

html.rs-js [data-rs-reveal]:has(> .rs-card, > .rs-game, > .rs-match, > .rs-games, > .rs-grid) {
  opacity: 1;
  transform: none;
  transition: none;
}

html.rs-js [data-rs-reveal] {
  transition-duration: 480ms, 520ms;
}

@media (prefers-reduced-motion: reduce) {
  html.rs-js [data-rs-card],
  html.rs-js [data-rs-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Share and calendar on a game card sit on the WHITE card, even when the section behind it is
   navy (Ante, 2026-09-15: "ikone se ne vide" — the dark-band rule painted them white on white). */
.rs-band .rs-game .rs-act {
  border-color: var(--ink-rule);
  color: var(--rs-tinta);
}

.rs-band .rs-game .rs-act:hover,
.rs-band .rs-game .rs-act:focus-visible,
.rs-band .rs-game .rs-act[data-rs-done] {
  border-color: var(--rs-koralj);
  color: var(--rs-koralj-700);
}