/* Sub-pages (the tournaments hub, the event page, the legal and support
   pages): loaded after motion.css, whose tokens and components it shares.
   Adds the sitebar chrome, the page hero and the event pieces. The legal
   pages keep their prose markup byte-for-byte from the site.css era
   (.wrap.legal, .masthead, .kicker, .langs, .card, .btn, .updated); the
   block at the end restyles those classes in the new chrome. */

html { background: var(--atm-top); }

/* ---- sitebar: the new chrome for every sub-page ---- */
.sitebar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 6px;
  padding: calc(6px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
  background: var(--gb-bg); border-bottom: 1px solid var(--hairline);
}
.sitebar a { color: var(--ink); text-decoration: none; font-weight: 800; min-height: 44px; display: inline-flex; align-items: center; }
.sitebar-home { gap: 8px; margin-right: auto; }
.sitebar-home .sb-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--grad); color: #fff; padding: 4px; display: block; }
.sitebar-home .sb-mark svg { width: 100%; height: 100%; display: block; }
/* K3: a client event's header leads with THEIR logo + event name; the
   Padel Papi mark stays, small, right after it — never dropped, never
   leading. */
.client-sb-mark { background: none; padding: 0; overflow: hidden; }
.client-sb-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 9px; }
.sb-pp-mark { width: 20px; height: 20px; flex: none; opacity: 0.55; color: var(--ink); display: block; }
.sb-pp-mark svg { width: 100%; height: 100%; display: block; }
.sitebar-link { padding: 0 8px; font-size: 15px; }
.sitebar-link[aria-current="page"] { color: var(--ink-brand); }
.sb-langs { display: flex; }
.sb-langs a { font-size: 13px; min-width: 36px; justify-content: center; border-radius: 8px; color: var(--muted); }
.sb-langs a[aria-current="true"] { color: var(--ink); background: var(--tint-fill); }

/* ---- page hero (shorter than the home hero) ---- */
.hero.page-hero { min-height: auto; padding: 48px 16px 44px; }
.page-hero .mark { width: 84px; }
/* a client event's hero logo is a wordmark (wide), not the mascot's roughly
   square mark — sizing it by WIDTH (the generic .mark rule, 84px) made a
   240x64 logo render ~22px tall, an unreadable chip. Size it by HEIGHT
   instead: no `.mark img` rule existed at all before this (only `.mark svg`
   was ever sized), so the image had no CSS size and fell back to its
   browser-default intrinsic size — this fixes both bugs in one pass. */
.page-hero .mark.client-mark { width: auto; height: 64px; }
.mark img { display: block; width: auto; height: 100%; }
.page-hero .kicker-w { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); margin: 14px 0 0; }
.page-hero h1 { font-size: clamp(34px, 10vw, 56px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; margin: 6px 0 8px; }
.page-hero h1 .ch { display: inline-block; }
.page-hero .lead-w { font-size: 18px; font-weight: 700; max-width: 22em; margin: 0 auto; text-wrap: balance; }
.page-hero .dates-w { font-size: 20px; font-weight: 800; margin: 0; }
.status-w { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 800; border-radius: 999px; padding: 6px 14px; background: #fff; color: #0A6642; }
.hero-days { margin: 22px auto 0; max-width: 360px; width: 100%; }
.hero-days .days li { color: #fff; }
.countdown-w { margin: 12px 0 0; font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, 0.92); display: inline-flex; align-items: center; gap: 8px; }
.countdown-w .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot-accent); animation: pulse 2s ease-out infinite; }

.pwrap { max-width: 720px; margin: 0 auto; padding: 0 16px; overflow-x: clip; }
.psec { margin-top: 44px; }
.psec h2 { font-size: 26px; letter-spacing: -0.02em; margin: 2px 0 12px; color: var(--ink); line-height: 1.15; }
.psec .lead { color: var(--muted); margin: 0; }

.placeholder { margin-top: 28px; border: 1.5px dashed var(--tint-edge); border-radius: 16px; padding: 14px 16px; text-align: center; }
.placeholder p { margin: 0; color: var(--muted); font-weight: 700; font-size: 15px; }

/* categories reveal as a grid of tiles */
.cat-grid { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cat-grid li { position: relative; overflow: hidden; border-radius: 16px; padding: 14px 14px 12px; background: var(--tint-fill); border: 1px solid var(--tint-edge); min-height: 92px; }
.cat-grid li.kids { grid-column: 1 / -1; min-height: 0; display: flex; align-items: baseline; gap: 12px; }
.cat-code { display: block; font-size: 34px; font-weight: 900; letter-spacing: -0.03em; color: var(--ink-brand); line-height: 1; }
.cat-name { display: block; color: var(--ink); font-size: 14.5px; font-weight: 600; margin-top: 6px; line-height: 1.3; }
.cat-grid li.kids .cat-name { margin-top: 0; }
html.js .cat-grid li.rv { transform: translateY(18px) scale(0.94); }
html.js .cat-grid li.rv.in { transform: none; }
.cat-grid li::after { /* a court line sweeping across as the tile lands */
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--tint-edge);
  transform: scaleX(0); transform-origin: left; transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i, 0) * 70ms + 200ms);
}
.cat-grid li.in::after, html:not(.js) .cat-grid li::after { transform: scaleX(1); }
.cat-grid li > * { position: relative; z-index: 1; }
.cat-note { color: var(--muted); font-size: 14px; margin: 12px 0 0; }

/* fee + included */
.fee { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 6px; }
.fee-num { font-size: clamp(64px, 20vw, 96px); font-weight: 900; letter-spacing: -0.05em; line-height: 0.95; color: var(--ink-brand); font-variant-numeric: tabular-nums; }
.included-list { list-style: none; margin: 8px 0 0; padding: 0; }
.included-list li { position: relative; padding: 10px 0 10px 36px; border-bottom: 1px solid var(--hairline); color: var(--ink); }
.included-list li svg { position: absolute; left: 4px; top: 12px; width: 22px; height: 22px; color: var(--brand); }
.included-list li svg path { stroke-dasharray: 24; stroke-dashoffset: 0; }
html.js .included-list li.rv svg path { stroke-dashoffset: 24; transition: stroke-dashoffset 0.5s ease-out; transition-delay: calc(var(--i, 0) * 90ms + 250ms); }
html.js .included-list li.rv.in svg path { stroke-dashoffset: 0; }

/* sponsors: a marquee on a dark band; static grid under reduced motion */
.sponsor-band { margin: 48px 0 0; background: #231F20; color: #fff; padding: 28px 0 30px; text-align: center; overflow: hidden; }
.sponsor-band h2 { color: #fff; margin: 0 16px 18px; font-size: 22px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
/* PPMarquee (assets/marquee.js) builds the track: two identical .mq-group
   elements, each repeating the logo set until it alone is wider than the
   viewport, so the loop never runs out of logos on a wide screen — the
   old fixed two-copy track did, past an ultrawide monitor's width. */
.marquee-track { display: flex; width: max-content; will-change: transform; }
/* justify-content:center only ever matters in the STATIC state below, where
   the track is forced to width:100% — a sponsor row shorter than the full
   width (1, 3, however many tiles) was sitting flush left by flex's default
   justify-content:flex-start. In the SCROLLING state the track's own width
   is max-content (always exactly as wide as its content), so there is never
   free space to center into — a no-op there, scrolling is unaffected.
   Scoped to .client-sponsor-band: event one's own 6-sponsor grid was ALSO
   centering under this once it was unscoped, which the event-one gate
   diffs to the pixel (confirmed: the whole 76px-tall sponsor row shifted) —
   event one keeps its original flush-left layout untouched. */
.client-sponsor-band .marquee-track { justify-content: center; }
.marquee-track .mq-group { display: flex; }
.marquee-track.mq-scroll { animation: marquee 39s linear infinite; }
.marquee:hover .marquee-track.mq-scroll { animation-play-state: paused; }
.sponsor-logos { list-style: none; display: flex; align-items: center; gap: 44px; padding: 0 22px; margin: 0; }
.sponsor-logos li { height: 56px; display: flex; align-items: center; }
.sponsor-logos img { height: 56px; width: auto; max-width: 150px; object-fit: contain; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* prefers-reduced-motion: marquee.js renders one static, non-animated set
   and switches it to the grid below instead of scrolling it. This rule is
   the CSS fallback for the moment before/if that script runs. */
.marquee.mq-static { -webkit-mask-image: none; mask-image: none; }
.marquee.mq-static .marquee-track { width: 100%; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .sponsor-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  .sponsor-logos li { justify-content: center; }
  .sponsor-logos img { max-width: 100%; height: 52px; }
}

/* organisers: two names meet at the × */
.organisers { margin: 40px 0 0; text-align: center; color: var(--muted); font-size: 15px; }
.organisers .who { display: block; margin-top: 6px; color: var(--ink); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }
.organisers .x { display: inline-block; color: var(--ink-brand); margin: 0 6px; }
html.js .organisers .n1.rv { transform: translateX(-30px); }
html.js .organisers .n2.rv { transform: translateX(30px); }
html.js .organisers .x.rv { transform: rotate(-180deg) scale(0.3); }
html.js .organisers .rv.in { transform: none; }
.organisers .n1, .organisers .n2 { display: inline-block; }

/* hub */
.soon { position: relative; overflow: hidden; border-radius: 20px; padding: 22px 18px; background: var(--tint-fill); border: 1px solid var(--tint-edge); }
.soon .court-bg { position: absolute; right: -64px; bottom: -96px; width: 140px; opacity: 0.35; transform: rotate(12deg);
  -webkit-mask-image: linear-gradient(to top left, #000 30%, transparent 75%); mask-image: linear-gradient(to top left, #000 30%, transparent 75%); }
.soon .court-bg .ln { stroke: var(--brand); stroke-width: 1.4; fill: none; }
.soon > *:not(.court-bg) { position: relative; }
.ticket-dates { display: block; margin: -6px 0 12px; font-weight: 800; color: #9FE3BF; }

/* sub-page footer */
.page-footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); margin-top: 48px; border-top: 1px solid var(--hairline); }

/* legal: plain prose in the new chrome */
.legal { max-width: 720px; margin: 0 auto; padding: 24px 16px 0; }
.legal .l-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kicker); margin: 0; }
.legal h1 { font-size: 32px; margin: 2px 0 8px; letter-spacing: -0.02em; }
.legal h2 { font-size: 1.1rem; margin: 30px 0 6px; color: var(--ink-brand); font-weight: 800; }
.legal .card { display: block; }
.legal .langs a, .legal .langs span { margin-right: 12px; font-weight: 700; }
.legal .langs a { color: var(--ink-brand); text-decoration: none; }
.legal .btn-mail { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 12px; background: var(--grad); color: #fff; font-weight: 700; text-decoration: none; }
.legal .updated { color: var(--muted); font-size: 0.88rem; }

/* hero intro states (JS adds .pre then .go) */
.page-hero.pre .mark { transform: scale(0) rotate(-25deg); }
.page-hero .mark { transition: transform 0.9s cubic-bezier(0.34, 1.7, 0.5, 1) 0.3s; }
.page-hero.pre h1 .ch { transform: translateY(0.7em); opacity: 0; }
.page-hero.pre .fade-in { opacity: 0; transform: translateY(14px); }
.page-hero .fade-in { transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(1.1s + var(--i, 0) * 110ms); }
@media (prefers-reduced-motion: reduce) { .page-hero .fade-in, .page-hero .mark { animation: fadein 0.5s ease-out both; } }

/* round 6: the sitebar is fully opaque; nothing reads through it */
.sitebar { background: var(--atm-top); box-shadow: 0 1px 0 var(--hairline), 0 6px 16px -10px rgba(0, 0, 0, 0.25); }

/* ================= round 8 ================= */
/* categories as a ranked LADDER: N1 at the top, nothing crosses the text */
.cat-grid { display: none; }
.ladder { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.rung {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px;
  padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--tint-fill); border: 1px solid var(--tint-edge);
}
.lv-badge {
  width: 52px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-weight: 900; font-size: 19px; letter-spacing: -0.02em; color: #fff; background: #0A6642;
}
.lv1 .lv-badge { background: #0A6642; }
.lv2 .lv-badge { background: #0F7A4E; }
.lv3 .lv-badge { background: #148C59; }
.lv4 .lv-badge { background: #4FAF83; color: #06301F; }
.lv5 .lv-badge { background: #86CBA8; color: #06301F; }
.lv6 .lv-badge { background: #BFE3CF; color: #06301F; }
.rung .cat-name { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.meter { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.meter i { width: 5px; border-radius: 2px; background: var(--rail-off); height: calc(6px + var(--b) * 3.2px); transform-origin: bottom; }
.meter i.on { background: var(--brand); }
.rung.kids { grid-template-columns: 52px 1fr; margin-top: 6px; background: var(--grad); border-color: transparent; }
.rung.kids .lv-badge { background: #fff; color: #0A6642; font-size: 15px; }
.rung.kids .cat-name { color: #fff; }
/* the ladder builds rung by rung; each meter fills after its rung lands */
html.js .rung.rv { transform: translateX(-18px); }
html.js .rung.rv.in { transform: none; }
html.js .rung.rv .meter i { transform: scaleY(0); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(var(--i, 0) * 70ms + 250ms + var(--b) * 45ms); }
html.js .rung.rv.in .meter i { transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .rung.rv, html.js .rung.rv .meter i { transform: none; } }

/* sponsors: a band in the event's OWN brand (var(--brand)/var(--deep): Padel
   Papi green by default, a client's colours on a client event — fix round,
   2026-10-06), with the faint court motif, same in both modes. centered so a
   single sponsor (or any count short of a full row) sits in the middle of
   the band instead of stranded at the left edge of the marquee track. */
.sponsor-band { position: relative; background: linear-gradient(160deg, #0A6642 0%, #064A30 55%, #04311F 100%); }
/* a client event's band follows ITS brand instead of the literal green above
   — scoped so event one's gradient stays byte-identical (the event-one gate
   diffs this to the sub-pixel, where color-mix()'s rounding registered as a
   6-8% "changed" region despite being visually inert). */
.client-sponsor-band { background: linear-gradient(160deg, var(--deep) 0%, color-mix(in srgb, var(--deep) 72%, black) 55%, color-mix(in srgb, var(--deep) 45%, black) 100%); }
.sponsor-band > * { position: relative; z-index: 1; }
.sponsor-band .band-court { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0.12; pointer-events: none; }
.sponsor-band .band-court rect, .sponsor-band .band-court path { fill: none; stroke: #fff; stroke-width: 0.6; vector-effect: non-scaling-stroke; }
/* one chip for all six: deep ink, so the white marks and the two teal ones (An Island Apart, BravaDinâmica) all clear contrast */
.sponsor-logos { gap: 14px; padding: 0 7px; justify-content: center; }
.sponsor-logos li { height: 76px; width: 136px; justify-content: center; border-radius: 16px; background: rgba(2, 24, 15, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); padding: 10px 14px; }
.sponsor-logos img { height: auto; max-height: 52px; max-width: 100%; }
/* a client event's tiles get real wordmark-logo proportions: wider than the
   136px default (sized for event one's square-ish marks), scoped so this
   never reflows event one's own sponsor grid. */
.client-sponsor-band .sponsor-logos li { width: 196px; padding: 10px 18px; background: color-mix(in srgb, var(--deep) 35%, black); }
.marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .sponsor-logos { grid-template-columns: repeat(2, 136px); justify-content: center; gap: 12px; }
  .sponsor-logos li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; }
  .client-sponsor-band .sponsor-logos { grid-template-columns: repeat(2, 196px); }
}
.status-row { margin: 10px 0 0; flex-wrap: wrap; justify-content: center; row-gap: 2px; }
.status-row .sep { color: rgba(255, 255, 255, 0.45); }
.status-row .closed { color: rgba(255, 255, 255, 0.8); }
.status-w { display: none; }
.status-row { flex-wrap: nowrap; white-space: nowrap; }

/* round 11: court lines only in the margins of page heroes and the sponsor band */
.page-hero > .court { -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 5%, rgba(0,0,0,0.04) 14%, rgba(0,0,0,0.04) 86%, #000 95%, #000 100%); mask-image: linear-gradient(90deg, #000 0%, #000 5%, rgba(0,0,0,0.04) 14%, rgba(0,0,0,0.04) 86%, #000 95%, #000 100%); }
.sponsor-band .band-court { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 34%, #000 46%, #000 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 34%, #000 46%, #000 100%); }
.sponsor-logos li { background: #05301F; }
.page-footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.soon .court-bg { opacity: 0.18; }
/* round 11c: page heroes carry the court as a small corner motif, clear of the text */
.page-hero > .court { -webkit-mask-image: none; mask-image: none; inset: auto; width: 92px; height: auto; left: auto; right: -22px; top: 6px; transform: rotate(14deg); opacity: 0.26; }
.sponsor-band .band-court { -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 80%, #000 92%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, transparent 80%, #000 92%, #000 100%); }
.page-hero > .court { width: 74px; right: -14px; top: -44px; }

/* ================= legal and support pages (live markup, new chrome) ================= */
.wrap.legal { padding-top: 20px; }
.legal .masthead { margin: 0 0 6px; }
.legal .masthead .kicker { display: block; }
.legal .masthead h1 { margin: 2px 0 6px; line-height: 1.12; }
.legal .langs { margin: 4px 0 18px; font-size: 0.92rem; }
.legal .langs a, .legal .langs span { display: inline-block; min-height: 44px; line-height: 44px; }
.legal p, .legal li { color: var(--ink); }
.legal a { color: var(--ink-brand); }
.legal ul, .legal ol { padding-left: 20px; }
.legal li { margin: 6px 0; }
.legal h3 { color: var(--ink); }
.legal .card p { color: var(--muted); }
.legal .btn {
  display: inline-flex; flex: none; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 12px;
  background: var(--grad); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; box-shadow: none;
}
.page-footer .foot-links a { display: inline-block; min-height: 44px; line-height: 44px; }

/* live port: `.psec h2` (ink, 26px) out-ranked the ticket's own title on the
   hub, so in light mode "Open PadelPapi" was dark ink on the dark ticket. The
   hub ticket's title takes the home ticket's style again. */
.psec .ticket .ticket-h { color: #fff; margin: 6px 0 14px; font-size: clamp(30px, 9vw, 44px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; }

/* live port: small white text on the page-hero gradient at full opacity
   (0.9 and 0.8 read 4.3:1 on the high stop; see motion.css) */
.page-hero .kicker-w, .status-row .closed { color: #fff; }

/* ================= round 12: fixtures (Jogos / Fixtures / Partidos) =================
   Static by default: both .fx-day panels are always in the markup and always
   visible unless JS hides one. .fx-tabs and .fx-levels are JS-only controls —
   inert without JS, so they stay hidden until html.js confirms a script ran
   to back them (the fixtures script at the bottom of the page). */
.fx { overflow: visible; }
.fx-tabs { display: none; gap: 8px; margin: 16px 0 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
html.js .fx-tabs { display: flex; }
.fx-tab {
  flex: none; appearance: none; border: 1px solid var(--tint-edge); background: var(--tint-fill); color: var(--ink);
  font-weight: 700; font-size: 14px; border-radius: 999px; padding: 0 16px; min-height: 44px; cursor: pointer;
}
.fx-tab[aria-selected="true"] { background: var(--grad); color: #fff; border-color: transparent; }
.fx-tab:focus-visible { outline: 2px solid var(--ink-brand); outline-offset: 2px; }

.fx-levels { display: none; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; border: 0; }
html.js .fx-levels { display: flex; }
.fx-chip { position: relative; display: inline-flex; }
.fx-chip input {
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
}
.fx-chip span {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px; border-radius: 999px;
  background: var(--tint-fill); border: 1px solid var(--tint-edge); color: var(--ink);
  font-weight: 700; font-size: 13.5px; pointer-events: none;
}
.fx-chip input:checked + span { background: var(--grad); color: #fff; border-color: transparent; }
.fx-chip input:focus-visible + span { outline: 2px solid var(--ink-brand); outline-offset: 2px; }
.fx-chip.lv1 input:checked + span { background: #0A6642; }
.fx-chip.lv2 input:checked + span { background: #0F7A4E; }
.fx-chip.lv3 input:checked + span { background: #148C59; }
.fx-chip.lv4 input:checked + span { background: #4FAF83; color: #06301F; }
.fx-chip.lv5 input:checked + span { background: #86CBA8; color: #06301F; }
.fx-chip.lv6 input:checked + span { background: #BFE3CF; color: #06301F; }

.fx-day { margin-top: 6px; }
.fx-time { margin-top: 14px; }
.fx-time:first-child { margin-top: 0; }
.fx-time-h {
  display: inline-block; margin: 0 0 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
  color: var(--ink); border: 1px solid var(--tint-edge);
}
.fx-grid { display: grid; gap: 6px; }
/* one compact row per game: level | the two pairs | court and code */
.fx-game {
  display: grid; grid-template-columns: 36px 1fr auto; grid-template-areas: "badge pairs court" "badge pairs code";
  align-items: center; column-gap: 12px; row-gap: 2px;
  padding: 9px 12px; border-radius: 12px; background: var(--tint-fill); border: 1px solid var(--tint-edge);
}
.fx-meta { display: contents; }
.fx-game .lv-badge { grid-area: badge; width: 36px; height: 30px; font-size: 13px; border-radius: 8px; align-self: center; }
.fx-court { grid-area: court; justify-self: end; align-self: end; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.fx-code { grid-area: code; justify-self: end; align-self: start; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 11.5px; color: var(--ink-brand); }
.fx-pairs { grid-area: pairs; margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 6px; row-gap: 1px; align-items: baseline; font-size: 14.5px; line-height: 1.3; color: var(--ink); min-width: 0; }
.fx-pair { font-weight: 650; }
.fx-pairs .fx-pair:first-child { grid-column: 1 / -1; }
.fx-vs { color: var(--muted); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.fx-empty { color: var(--muted); font-size: 14px; margin: 16px 0 0; }

/* Live scoreboard overlay (tools/scoreboard_fixtures.py's browser twin,
   assets/scoreboard.js) — a finished match's score, or a live badge, added
   next to the matching card at runtime. `.fx-pair.won` bolds the winner. */
.fx-result { grid-column: 1 / -1; margin-top: 2px; font-weight: 800; font-size: 12.5px; color: var(--ink-brand); font-variant-numeric: tabular-nums; }
.fx-pairs .fx-pair.won { color: var(--ink-brand); }
.fx-live {
  grid-column: 1 / -1; margin-top: 2px; width: fit-content;
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 800; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: #C0392B;
}
.fx-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #C0392B; animation: fx-live-pulse 1.3s ease-in-out infinite; }
@keyframes fx-live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
@media (prefers-reduced-motion: reduce) { .fx-live::before { animation: none; } }
/* .fx-ev.big (a final) is a flex row, not the .fx-game grid — flex-basis:
   100% is what drops the overlay onto its own line there. */
.fx-ev .fx-result, .fx-ev .fx-live { flex-basis: 100%; }
@keyframes fx-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: no-preference) {
  .fx-day.fx-anim .fx-game:not([hidden]), .fx-day.fx-anim .fx-ev { animation: fx-in 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 26ms); }
}
/* .fx-game sets its own `display: grid`, which otherwise beats the UA
   stylesheet's `[hidden] { display: none }` — the filter script relies on
   the `hidden` attribute, so it needs reasserting here at higher specificity. */
.fx-game[hidden] { display: none; }


/* the brand never wraps; at phone width the links and languages tighten instead */
.sitebar-home { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 420px) {
  .sitebar-link { padding: 0 5px; font-size: 14px; }
  .sb-langs a { min-width: 30px; }
}
@media (max-width: 520px) {
  /* the mark alone carries the brand; the name stays for screen readers */
  .sitebar-home > span:not(.sb-mark) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---- tournament week ---- */
/* Find your game: the hero's one job this week */
.finder { display: none; width: 100%; max-width: 420px; margin: 22px auto 4px; text-align: left; }
html.js .finder { display: block; }
.finder-label { display: block; margin: 0 0 8px 4px; color: #fff; font-weight: 800; font-size: 17px; }
.finder-field { position: relative; }
.finder-field svg { position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--deep); pointer-events: none; }
.finder-field input {
  width: 100%; min-height: 56px; padding: 0 16px 0 48px; border: 0; border-radius: 16px;
  font: inherit; font-size: 18px; font-weight: 700; color: #06301F; background: #fff;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.55); -webkit-appearance: none; appearance: none;
}
.finder-field input::placeholder { color: #5E7A6B; font-weight: 600; }
.finder-field input:focus-visible { outline: 3px solid #CFF5DF; outline-offset: 2px; }
.finder-out:empty { display: none; }
.finder-out { display: grid; gap: 10px; margin-top: 12px; }
.finder-none, .finder-more { margin: 2px 4px 0; color: rgba(255, 255, 255, 0.92); font-size: 14.5px; font-weight: 600; line-height: 1.4; }

/* a result is a match ticket: when and where on top, who below the tear line */
.gticket {
  --notch: 11px;
  position: relative; background: #fff; color: #06301F; border-radius: 16px; padding: 14px 16px 12px;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.6);
  --cut: 106px;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 var(--cut), #0000 97%, #000 100%), radial-gradient(circle var(--notch) at 100% var(--cut), #0000 97%, #000 100%);
  -webkit-mask-composite: source-in;
          mask: radial-gradient(circle var(--notch) at 0 var(--cut), #0000 97%, #000 100%), radial-gradient(circle var(--notch) at 100% var(--cut), #0000 97%, #000 100%);
          mask-composite: intersect;
}
.tk-top { display: flex; align-items: center; justify-content: space-between; }
.tk-day { font-weight: 800; font-size: 14px; color: #3E5A4B; }
.gticket .lv-badge { width: 38px; height: 28px; font-size: 13px; border-radius: 8px; }
.tk-main { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; height: 48px; }
.tk-time { font-size: 40px; font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--deep); }
.tk-court { font-size: 20px; font-weight: 800; color: #06301F; }
.tk-cut { margin: 11px -16px 10px; border-top: 2px dashed rgba(10, 102, 66, 0.28); }
.tk-pairs { margin: 0; display: grid; gap: 2px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.tk-pairs i { font-style: normal; font-size: 11.5px; font-weight: 800; color: #5E7A6B; text-transform: uppercase; letter-spacing: 0.04em; }
.tk-pairs mark { background: #CFF5DF; color: inherit; border-radius: 4px; padding: 0 2px; margin: 0 -2px; }
.tk-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.tk-show, .tk-dir { min-height: 44px; display: inline-flex; align-items: center; font: inherit; font-size: 14px; font-weight: 800; color: var(--deep); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.tk-dir { gap: 6px; }
.tk-dir svg { width: 18px; height: 18px; }
.tk-show:focus-visible, .tk-dir:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; border-radius: 6px; }
@keyframes tk-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@media (prefers-reduced-motion: no-preference) { .gticket { animation: tk-in 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); } }

/* the game you jumped to lights up once */
@keyframes fx-hit { 0%, 60% { box-shadow: 0 0 0 3px var(--brand); } 100% { box-shadow: 0 0 0 0 transparent; } }
.fx-day .fx-game.fx-hit:not([hidden]) { animation: fx-hit 1.8s ease-out both; }
@media (prefers-reduced-motion: reduce) { .fx-day .fx-game.fx-hit:not([hidden]) { animation: none; box-shadow: 0 0 0 3px var(--brand); } }

/* where: one line, one tap to directions */
.venue-strip {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; margin-top: 20px;
  padding: 12px 14px; border-radius: 16px; background: var(--tint-fill); border: 1px solid var(--tint-edge);
  color: var(--ink); text-decoration: none; min-height: 64px;
}
.vs-pin { width: 40px; height: 40px; border-radius: 12px; background: var(--grad); color: #fff; display: grid; place-items: center; }
.vs-pin svg { width: 22px; height: 22px; }
.vs-text { display: grid; min-width: 0; }
.vs-text b { font-size: 16px; font-weight: 800; }
.vs-text span { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-go { font-weight: 800; font-size: 14px; color: var(--ink-brand); }
.venue-strip:focus-visible { outline: 2px solid var(--ink-brand); outline-offset: 2px; }

/* the category name for the picked level */
.fx-cat { margin: -10px 0 16px 2px; font-weight: 700; font-size: 14.5px; color: var(--ink-brand); }
.fx-cat[hidden] { display: none; }

/* everything from before registration closed, folded */
.about { margin-top: 36px; border-radius: 16px; border: 1px solid var(--tint-edge); background: var(--tint-fill); }
.about summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 24px; align-items: center; column-gap: 12px; padding: 16px 18px; min-height: 64px; }
.about summary::-webkit-details-marker { display: none; }
.about-h { font-size: 19px; font-weight: 900; letter-spacing: -0.01em; color: var(--ink); }
.about-sub { grid-row: 2; font-size: 14px; color: var(--muted); font-weight: 600; }
.about-chev { grid-row: 1 / 3; grid-column: 2; width: 22px; height: 22px; color: var(--ink-brand); transition: transform 0.25s ease; }
.about[open] .about-chev { transform: rotate(180deg); }
.about summary:focus-visible { outline: 2px solid var(--ink-brand); outline-offset: 2px; border-radius: 16px; }
.about-block { padding: 4px 18px 20px; }
.about-block + .about-block { border-top: 1px solid var(--tint-edge); padding-top: 18px; }
.about-block h2 { font-size: 22px; letter-spacing: -0.02em; margin: 6px 0 10px; color: var(--ink); }

/* hero day tiles now jump to their day in the programme */
.days .day-link { display: block; color: inherit; text-decoration: none; min-height: 44px; }
.days .day-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 12px; }
@media (min-width: 720px) { .pg-days { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }

/* one schedule: games and the get-togethers on the same day timeline */
.fx-tab { position: relative; }
.fx-tab.is-today::after { content: ""; position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #52CC8C; }
.fx-span { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.fx-chipinfo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--tint-fill); border: 1px solid var(--tint-edge); font-size: 13.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.fx-chipinfo b { color: var(--ink-brand); }
.fx-tba { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; border: 1.5px dashed var(--tint-edge); color: var(--muted); font-weight: 600; font-size: 14.5px; }
.fx-ev { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--tint-edge); }
.fx-ev-name { font-weight: 800; font-size: 15.5px; color: var(--ink); }
.fx-ev-span { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; color: var(--ink-brand); white-space: nowrap; }
.fx-ev.big { background: var(--grad); border-color: transparent; }
.fx-ev.big .fx-ev-name { color: #fff; }
.fx-ev.big .lv-badge { background: #fff; color: var(--deep); width: 34px; height: 24px; font-size: 12px; border-radius: 7px; }
.fx-day[hidden] { display: none; }
/* five days fit one row on a phone: weekday small, day number big */
.fx-tabs { display: none; grid-template-columns: repeat(5, 1fr); gap: 6px; overflow: visible; }
html.js .fx-tabs { display: grid; }
.fx-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 58px; padding: 6px 0; border-radius: 14px; }
.fx-tab .fx-wd { font-size: 12.5px; font-weight: 700; opacity: 0.85; }
.fx-tab b { font-size: 21px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
html.js .fx-levels.is-off, .fx-cat.is-off { display: none; }
/* Kids: the ladder's white badge */
.lvK .lv-badge, .fx-game.lvK .lv-badge { background: #fff; color: #0A6642; border: 1px solid var(--tint-edge); font-size: 11.5px; }
.fx-chip.lvK input:checked + span { background: #fff; color: #0A6642; border-color: var(--brand); }
.fx-ev.big.lvK .lv-badge { border: 0; }
.fx-ev.big .fx-ev-span { color: rgba(255, 255, 255, 0.92); }

/* match tickets: save it, send it */
.tk-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.tk-act { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 12px; border: 0; background: #E2F4EA; color: #0A6642; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.tk-act svg { width: 19px; height: 19px; flex: none; }
.tk-act:focus-visible { outline: 2px solid #0A6642; outline-offset: 2px; }
.tk-foot { margin-top: 4px; }
.finder-all { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border-radius: 14px; border: 1.5px solid rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.12); color: #fff; font: inherit; font-size: 15.5px; font-weight: 800; cursor: pointer; }
.finder-all svg { width: 20px; height: 20px; }
.finder-all:focus-visible { outline: 3px solid #CFF5DF; outline-offset: 2px; }

/* rules and groups in About */
.rules-list { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink); font-size: 15.5px; line-height: 1.45; }
.grp-note { margin: 0 0 12px; color: var(--muted); font-size: 14.5px; }
.grp-level { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--tint-edge); }
.grp-level .lv-badge { width: 44px; height: 30px; font-size: 13px; border-radius: 8px; }
.grp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.grp { border-radius: 10px; background: var(--card); border: 1px solid var(--tint-edge); padding: 8px 10px; }
.grp-h { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink-brand); margin-bottom: 4px; }
.grp ul { list-style: none; margin: 0; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.grp-level { display: block; padding: 12px 0 10px; }
.grp-level .lv-badge { margin-bottom: 8px; }
.grp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .grp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* the tournament's goal: one line in the hero, the reason above the organisers */
.page-hero .goal-w { max-width: 30em; margin: 8px auto 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: rgba(255, 255, 255, 0.92); text-wrap: balance; }
.why { margin-top: 40px; }
.why h2 { font-size: 24px; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--ink); line-height: 1.15; }
.why p { margin: 0; color: var(--ink); font-size: 16.5px; line-height: 1.55; max-width: 36em; }
/* organisers' Instagram, one tap each */
.organisers .ig { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 8px; }
.organisers .ig a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink-brand); font-weight: 800; font-size: 15px; text-decoration: none; }
.organisers .ig svg { width: 18px; height: 18px; flex: none; }
.organisers .ig a:focus-visible { outline: 2px solid var(--ink-brand); outline-offset: 2px; border-radius: 6px; }
/* organisers' own logo files (setup form section 09, 2026-10-06) — optional, decorative alongside the already-visible names */
.organisers .org-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin-top: 12px; }
.organisers .org-logos img { height: 32px; width: auto; max-width: 120px; object-fit: contain; }

/* "Live scores" button in the tournament hero (2026-10-01): the site's white
   .btn, one column wide like the game finder under it, with a pulsing red
   live dot. Opens the TV board, which has its own phone layout. */
.hero-live { width: 100%; max-width: 420px; margin: 22px auto 0; display: flex; }
.hero-live + .finder { margin-top: 18px; }
.live-btn { flex: 1 1 auto; font-weight: 800; font-size: 17px; }
.live-btn svg { width: 20px; height: 20px; }
.live-btn .live-dot { width: 10px; height: 10px; border-radius: 50%; background: #C0392B; flex: none; animation: fx-live-pulse 1.3s ease-in-out infinite; }
.live-btn:focus-visible { outline: 3px solid #CFF5DF; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .live-btn .live-dot { animation: none; } }