/* Montserrat is served from the site itself (a variable font: every weight from one file per character set). Without this,
   phones and any computer without the font installed fell back to Roboto/Arial, which has much thinner letters and digits. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --orange: #ff5500;
  --orange-dark: #e04a00;
  --yellow: #ffb802;
  --green: #b2fa06;
  --green-light: #b2fa06;
  --ink: #0a0a0a;
  --charcoal: #202124;
  --gray: #656565;
  --gray-dim: #9a9a9a;
  --gray-light: #efefef;
  --white: #ffffff;
  --danger: #c73f10;
  --blue-dark: #0d2b4e;
  --radius: 16px;      /* panels, cards, tiles, modals, menus */
  --radius-md: 12px;   /* a box inside a panel, and the frame around a row of tabs (inner 8px + 4px padding) */
  --radius-sm: 8px;    /* every control: buttons, tabs, chips, badges, inputs, selects (circles and dots stay 50% / 999px) */
  --shadow: 0 2px 10px rgba(10, 10, 10, 0.08);
  --shadow-lg: 0 10px 30px rgba(10, 10, 10, 0.16);
  --status-green: #b2fa06; /* the planned/won green: date pill text + border and the left status bar */
  --fill-grey: #37373e; /* dark grey fill for panels, buttons and chips on the black cards */
  --border-grey: #5b5e66; /* the grey outline of the cards, chips and buttons that used to be white */
}

* { box-sizing: border-box; }

/* The dark base colour lives on <html> only (the canvas): the aura layers below blend against it,
   so <body> itself must stay transparent or it would paint over them. */
html { background: #100e0b; }
html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Page background: "Graphite Flow" aura ---------- */
/* Four blurred slate-grey glows blended with "screen", fixed behind the content. Built from the
   pseudo-elements of <html> and <body> (painted in this order: html::before, body::before,
   body::after, html::after). The dark base colour is on <html>, which the blend modes composite
   against. Skipped on the WordPress embeds. */
html:not(.embed-light)::before,
body:not(.embed-light)::before,
body:not(.embed-light)::after,
html:not(.embed-light)::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translateZ(0);
  will-change: transform;
}
html:not(.embed-light)::before { background: radial-gradient(ellipse 55% 45% at 35% 50%, rgba(100, 116, 139, 0.6) 0%, transparent 60%); filter: blur(113px); }
body:not(.embed-light)::before { background: radial-gradient(ellipse 40% 50% at 68% 38%, rgba(148, 163, 184, 0.5) 0%, transparent 55%); filter: blur(125px); }
body:not(.embed-light)::after { background: radial-gradient(ellipse 30% 35% at 30% 72%, rgba(71, 85, 105, 0.45) 0%, transparent 50%); filter: blur(100px); }
html:not(.embed-light)::after { background: radial-gradient(ellipse 22% 25% at 78% 75%, rgba(203, 213, 225, 0.3) 0%, transparent 45%); filter: blur(88px); }
@media (min-width: 900px) {
  html:not(.embed-light)::before { filter: blur(162px); }
  body:not(.embed-light)::before { filter: blur(180px); }
  body:not(.embed-light)::after { filter: blur(144px); }
  html:not(.embed-light)::after { filter: blur(126px); }
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0 0 4px; letter-spacing: -0.01em; }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* ---------- Account menu ---------- */
/* A single person-icon button living in .topbar-right, next to
   .lang-switcher — replaces the old two-tier "utility strip" entirely
   (a separate bar above .topbar with its own Login/Registration pills):
   one compact icon here instead, opening a small dropdown with those
   same two actions on click. Its own wrapper (position:relative) for the
   same reason .badge-bell-wrap gets one rather than .topbar-right
   itself — .nav-toggle also lives in .topbar-right, and its own
   centering (position:absolute; left:50%) resolves against whichever
   ancestor is *nearest* positioned; putting position here directly would
   silently recenter the hamburger into this icon instead of the middle
   of the bar below 1024px. */
.auth-menu-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
}
.auth-menu-btn:hover { background: rgba(255,255,255,0.08); }
.auth-menu-btn svg { fill: var(--white); display: block; }
.auth-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 45;
  overflow: hidden;
}
.auth-menu-item {
  display: block;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.auth-menu-item:not(:last-child) { border-bottom: 1px solid var(--gray-light); }
.auth-menu-item:hover { background: var(--gray-light); }
/* .nav-register-link's text is solid orange here — the one action a
   first-time visitor most needs to notice — while .player-login-link
   (or, once logged in, its own "log out" text — see updatePlayerNavLinks
   in common.js) stays plain ink, same weighting the old pill pair used
   (white/quiet vs. solid orange). */
.auth-menu-item.nav-register-link { color: var(--orange); }
/* .nav-icon's own SVG is normally a flat var(--white) (see further
   down) — overridden here so the little person icon next to "Prihlásiť
   sa" matches this white dropdown's dark text instead of vanishing
   against it. */
.auth-menu-item .nav-icon svg { fill: var(--ink); }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--ink);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 0 18px rgba(255, 85, 0, 0.25);
}
.topbar-inner {
  /* Wider than .container's own 1080px on purpose — the nav has grown to
     8+ items over time, and a header is a reasonable place to be a bit
     roomier than the body content column beneath it. */
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  /* A no-op above 1024px — .nav-links' own flex:1 there already consumes
     every bit of free space itself, leaving none for this to distribute.
     Below 1024px, .nav-links stops taking up flex space at all (it
     becomes the absolutely-positioned dropdown panel instead — see its
     own max-width:1024px override), so this is what still pins .brand
     left and .topbar-right right in that case. */
  justify-content: space-between;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.02em;
  /* Never gives up its own natural width to .nav-links' flex:1 below,
     same as .topbar-right — those two are what .nav-links actually
     centers itself between. */
  flex-shrink: 0;
}
.brand-logo {
  height: 34px;
  width: auto;
  display: block;
}
.brand small {
  display: block;
  font-weight: 900;
  font-size: 22px;
  color: var(--white);
  letter-spacing: 0.02em;
}
/* "TENNIS" stacked above the existing "SCORE" — small, thin, tracked out
   wide so it reads as a label for the bold word beneath it rather than
   competing with it. line-height:1 on the wrapper keeps the two lines
   snug instead of leaving normal text spacing between them. */
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-tennis {
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--white);
  opacity: 0.85;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Same reasoning as .brand above — it's a sibling of .nav-links now
     (not a parent — see the topbar-inner markup comment on .nav-links
     below), so it needs its own flex-shrink:0 to keep its natural width
     rather than getting squeezed by .nav-links' flex:1. */
  flex-shrink: 0;
}
.nav-toggle {
  display: none;
  /* Unrelated to .nav-links' own order now (it left .topbar-right
     entirely — see the comment on .nav-links below) — this is only here
     so the mobile-only .lang-switcher{order:1} override below still
     reliably lands it to this button's left within .topbar-right, their
     shared parent. */
  order: 3;
  background: none;
  border: none;
  color: var(--white);
  font-size: 24px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.nav-toggle:hover { background: rgba(255,255,255,0.08); }
/* A direct child of .topbar-inner in the markup — a sibling of .brand and
   .topbar-right, not nested inside the latter — specifically so it can
   take flex:1 and center its own content in whatever room that leaves
   between them. That's what actually keeps this from either overlapping
   its neighbors or wrapping unpredictably as more items get added: real
   flex space negotiation with .brand/.topbar-right's own widths, not a
   fixed breakpoint guessing how much room they'll need. min-width:0
   overrides flexbox's default min-width:auto (which would otherwise let
   this refuse to shrink below its content's natural width and overflow
   instead) so it can actually flex-wrap once there's truly no room left,
   rather than pushing past .topbar-right's edge. The mobile dropdown
   below (max-width:680px) turns this into something else entirely
   (a toggled, absolutely-positioned panel) — position:absolute there
   still resolves against .topbar (position:sticky), not .topbar-inner,
   same as it always has, since .topbar-inner itself is never given its
   own position. */
.nav-links {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  gap: 3px;
  flex-wrap: wrap;
}
.nav-links a {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #d8d8d8;
  white-space: nowrap;
}
.nav-links a:hover { background: rgba(255,255,255,0.08); color: var(--white); }
/* Admin-managed header items (see /header-admin, GET /api/header-items) —
   #header-dynamic-items is the fixed placeholder every page's static
   nav-links markup keeps; renderHeaderNav() in common.js fills it in.
   display:contents makes the wrapper itself invisible to flex layout, so
   every rendered item is a direct flex child of .nav-links exactly like
   the plain <a> tags it replaced — .nav-links' own centering/gap/wrap
   rules need that to keep working unmodified. A plain item (no children)
   renders as just an <a>, same as before; one with sub-items gets wrapped
   in .nav-item-dropdown so its .nav-submenu panel has a positioned
   ancestor to anchor against. */
#header-dynamic-items { display: contents; }
/* .nav-item-dropdown itself is a plain block (not flex) so its two
   children — the toggle row and the .nav-submenu panel below it — stack
   normally; only .nav-item-dropdown-toggle (the label + caret) is a flex
   row, kept as its own element rather than making the whole dropdown flex
   so the same row-then-panel-below shape works unchanged on mobile,
   without a flex-direction:column override. */
.nav-item-dropdown { position: relative; }
.nav-item-dropdown-toggle { display: flex; align-items: center; }
.nav-caret {
  background: none;
  border: none;
  color: #d8d8d8;
  cursor: pointer;
  padding: 7px 8px 7px 0;
  font-size: 9px;
  line-height: 1;
}
.nav-caret:hover { color: var(--white); }
.nav-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 45;
  overflow: hidden;
  padding: 6px 0;
}
/* .open (toggled by the caret click handler in common.js) is the ONLY
   trigger on a touch device — .nav-item-dropdown.open applies at every
   width unconditionally, so a tap always works. The :hover variant is
   deliberately scoped to (hover: hover) and (pointer: fine) — real mouse
   hardware — rather than left unscoped: an unscoped :hover rule also
   matches on many touch browsers, which apply a "sticky" :hover state to
   whatever was last tapped until something else is tapped, so tapping the
   caret to collapse a dropdown would toggle .open off correctly but the
   panel would stay visually expanded anyway via this rule alone. */
.nav-item-dropdown.open > .nav-submenu { display: block; }
@media (hover: hover) and (pointer: fine) {
  .nav-item-dropdown:hover > .nav-submenu { display: block; }
}
.nav-submenu a {
  display: block;
  padding: 10px 16px;
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
  white-space: nowrap;
}
.nav-submenu a:hover { background: var(--gray-light); color: var(--ink); }
/* Count pill for the "Looking to play" nav item — how many players
   currently have an open post on that board (see attachLookingToPlayBadge
   in common.js). Lives as a child of the nav <a> itself, same "pill inside
   a pill" pattern .tab .count already uses elsewhere, just orange/white
   instead of that one's neutral grey — this is a live "N people want a
   match right now" signal, worth standing out more than a plain count. */
.nav-item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
}
.install-app-btn {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #d8d8d8;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.install-app-btn:hover { background: rgba(255,255,255,0.08); color: var(--white); }
@media (max-width: 1024px) { .install-app-btn { text-align: center; padding: 12px; } }
/* the "Inštalovať appku" menu item is for phones and tablets only — not shown in the computer menu (inline display from the script is overridden) */
@media (min-width: 1025px) { .install-app-btn { display: none !important; } }
.nav-links a.active { background: var(--orange); color: var(--white); }
.lang-switcher { display: flex; gap: 4px; align-items: center; order: 2; }
.lang-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: #d8d8d8; background: none; border: 1px solid rgba(255,255,255,0.25); cursor: pointer; font-family: inherit; }
.lang-btn:hover { background: rgba(255,255,255,0.08); color: var(--white); }
.lang-btn.active { background: var(--orange); color: var(--white); border-color: var(--orange); }
.lang-flag { width: 15px; height: 11px; object-fit: cover; border-radius: 2px; }
/* Below 1024px there's only room in the sticky bar for one pill at a time
   (see .badge-bell-wrap's own order:10, which is what keeps the
   notification bell to the right of this regardless of width) — .lang-
   switcher-collapsible hides every non-active pill, and .expanded (toggled
   by initLangSwitcherCollapse in common.js) reveals them again once the
   visible pill is tapped. Desktop never gets either class, so every pill
   always shows there. */
.lang-switcher-collapsible .lang-btn:not(.active) { display: none; }
.lang-switcher-collapsible.expanded .lang-btn { display: inline-flex; }

/* 1024px rather than the usual ~680px mobile breakpoint used elsewhere in
   this file — deliberately wide enough to also cover a tablet in
   landscape (1024px is the standard iPad landscape width), not just
   phones and portrait tablets. The centered desktop nav (see .nav-links'
   own flex:1 rule above) needs real room on either side to stay a single
   tidy row; a tablet's width is exactly the range where it would
   otherwise wrap awkwardly instead of failing cleanly down to this
   hamburger menu. */
@media (max-width: 1024px) {
  /* Centered rather than left in .topbar-right — the toggle is the main
     way in to the rest of the site at this width, so it gets the same
     prominent middle position .nav-links itself takes above 1024px,
     rather than being just another icon crowded against the language
     switcher and the bell. Positioned against .topbar (position:sticky),
     not .topbar-right, for exactly that reason — it needs to escape
     .topbar-right's own right-aligned position to get there. */
  .nav-toggle {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--charcoal);
    padding: 10px;
    box-shadow: var(--shadow-lg);
    z-index: 40;
  }
  .nav-links.open { display: flex; }
  .nav-links a { text-align: center; padding: 12px; font-size: 16px; }
  /* Collapsed until tapped, same as desktop's .open toggle — a touch
     device has no hover, so the caret is what expands it here instead of
     it ever showing automatically. Kept collapsed by default rather than
     always expanded so a parent with several sub-items doesn't push
     everything below it down the panel before anyone's even asked to see
     them. */
  .nav-item-dropdown-toggle { justify-content: center; position: relative; }
  .nav-caret {
    display: block;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 10px;
    font-size: 14px;
  }
  .nav-submenu {
    position: static;
    background: none;
    box-shadow: none;
    padding: 0;
  }
  .nav-submenu a { color: #d8d8d8; padding: 10px 12px; font-size: 14px; text-align: center; }
  .nav-submenu a:hover { background: rgba(255,255,255,0.08); color: var(--white); }
}
/* An inline SVG rather than an emoji glyph — unlike text, an emoji's color
   is baked into the glyph itself and ignores CSS color entirely (varies
   by platform/font, but never plain white), so this is the only way to
   actually guarantee it. Same reasoning as the scoreboard's SVG "balls"
   icon elsewhere on the site. */
.nav-icon { margin-right: 6px; display: inline-flex; vertical-align: -2px; }
.nav-icon svg { display: block; fill: var(--white); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.btn:hover { box-shadow: var(--shadow-lg); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn-primary { background: var(--orange); color: var(--white); }
.btn-green { background: var(--green); color: var(--white); }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-outline { background: transparent; border: 2px solid var(--ink); box-shadow: none; }
.btn-danger { background: var(--danger); color: var(--white); }
.btn-sm { padding: 6px 10px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: 8px;
  margin: 22px 0 14px;
  flex-wrap: wrap;
}
/* Below ~680px there isn't room for every tab pill on one line, and
   wrapping wastes several screens' worth of vertical space (5+ rows for a
   full tab set). A single horizontally-scrolling row keeps it to one line
   instead — full-bleed to the screen edge (negative margin matching
   .container's own 16px padding) so the scroll area isn't squeezed
   narrower than it has to be, with a hidden scrollbar since the row itself
   is the obvious affordance to swipe. */
@media (max-width: 680px) {
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; }
}
.tab {
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  font-family: inherit;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow);
  cursor: pointer;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tab .count {
  background: var(--gray-light);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
}
/* Every tab gets the same orange border when it's the selected one — the
   NAŽIVO tab used to be the only one styled this way; now it's just the
   one that also turns its text orange to go with the live-dot. */
.tab.active { border-color: var(--orange); }
/* "My matches" before a real player is logged in — greyed out and its
   count hidden (there's nothing to count yet), but still clickable: a
   click opens the login modal instead of switching tabs (see app.js).
   Cleared the moment updateMyMatchesTabState sees a real playerId. */
.tab-locked { opacity: 0.45; }
.tab-locked .count { display: none; }
/* Once unlocked (a real player is logged in — see updateMyMatchesTabState
   in app.js clearing .tab-locked), "My matches" gets its own green/white
   treatment instead of the default white pill, so the tab that just
   became available actually reads as newly available rather than
   blending into the rest of the row. Stays green whether or not it's
   also the *selected* tab — .active only ever adds a border color on top
   (see .tab.active above), never a background, so the two don't conflict. */
#tab-MY_MATCHES:not(.tab-locked) { background: var(--green); color: var(--white); }
#tab-MY_MATCHES:not(.tab-locked) .count { background: rgba(255,255,255,0.22); color: var(--white); }
.tab.tab-live.active { color: var(--orange); }
#count-ALL { background: var(--ink); color: var(--white); }
#count-SCHEDULED { background: var(--green); color: var(--white); }
#count-LIVE { background: var(--orange); color: var(--ink); }
.tab[data-filter="FINISHED"] { background: var(--ink); color: var(--white); }
/* UKONČENÉ's own background is already dark, so a white border reads
   better there when selected than the orange every other tab uses. */
.tab[data-filter="FINISHED"].active { border-color: var(--white); }
#count-FINISHED { background: rgba(255,255,255,0.16); color: var(--white); }
.tab-live .live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 0 rgba(255, 85, 0,0.6);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 85, 0,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(255, 85, 0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 85, 0,0); }
}

/* ---------- Filters ---------- */
.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
#player-filters { margin-bottom: 56px; }
.filters input[type="text"],
.filters select,
.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid #ddd;
  background: var(--white);
  color: var(--ink);
}
.filters input[type="text"] { flex: 1; min-width: 180px; }
.filters select { min-width: 150px; }

/* .time-input's own picker button (see setupTimeInputs in common.js) —
   the real .time-input keeps taking manual keyboard entry, this just adds
   back a way to tap-and-scroll to a time via a hidden native
   <input type="time">'s own picker, wrapped around both. */
.time-input-wrap { position: relative; display: flex; flex: 1; min-width: 0; }
.time-input-wrap .time-input { flex: 1; min-width: 0; padding-right: 30px; }
.time-input-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: 0; top: 0; }
.time-input-picker-btn {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 7px;
  color: var(--gray);
}
.time-input-picker-btn:hover { color: var(--orange); }
#reset-filters-btn { border-color: var(--white); color: var(--white); }

/* ---------- OTP-style 5-digit code entry ---------- */
/* One box per digit (login code / new code / confirm code / email-reset
   code — see setupOtpGroups in common.js) instead of one text field for
   the whole code. flex + a max-width cap (rather than a fixed width) so
   the row of 5 shrinks to fit a narrow modal instead of overflowing it;
   the underlying value lives on a plain hidden <input> these sit in front
   of, so every existing bit of login/registration/reset JS that reads it
   keeps working completely unchanged. */
.otp-group { display: flex; gap: 8px; justify-content: center; margin: 4px 0; }
.otp-box {
  flex: 1 1 0;
  max-width: 52px;
  aspect-ratio: 3 / 4;
  padding: 0;
  text-align: center;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1.5px solid #ddd;
  background: var(--white);
  color: var(--ink);
}
.otp-box:focus { border-color: var(--orange); outline: none; }
.otp-box:disabled { opacity: 0.55; }
/* Below ~640px the search box and two selects no longer fit side by side
   and stack into 4 full-width rows — a 2-column grid instead pairs the
   selects up (a search box, where present, spans both columns above them;
   the reset button spans both below), cutting it to 3 rows. */
@media (max-width: 640px) {
  .filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .filters input[type="text"] { grid-column: 1 / -1; min-width: 0; }
  .filters select { min-width: 0; }
  #reset-filters-btn { grid-column: 1 / -1; }
}

/* ---------- Category badges ---------- */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
/* Category pills are always the brand orange (the same as the ranking number), outline only, on every page. */
.badge-ELITE, .badge-NEXT_GEN, .badge-NOVICE, .badge-FRIENDLY, .badge-VIP_CUP, .badge-ATA_TENNIS, .badge-OTHER {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--orange);
  border: 1px solid var(--orange);
}
/* Level dots inside the pill (see levelDotsHtml in common.js): filled = reached, hollow = not. */
.level-dots { display: inline-flex; gap: 3px; margin-right: 6px; }
.level-dots i { width: 6px; height: 6px; box-sizing: border-box; border-radius: 50%; border: 1px solid currentColor; }
.level-dots i.on { background: currentColor; }

.badge-status { background: var(--gray-light); color: var(--gray); }
.badge-status.status-LIVE { background: var(--orange); color: var(--white); animation: live-blink 1.8s ease-in-out infinite; }
@keyframes live-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.badge-status.status-PLANNED { background: var(--gray-light); color: var(--charcoal); }
body:not(.embed-light) .badge-status.status-LIVE { background: #ee3340; }
.badge-status.status-PLANNED-dated { background: var(--green); color: var(--white); }
.badge-status.status-FINISHED { background: var(--ink); color: var(--white); }
.badge-status.status-UNFINISHED { background: var(--yellow); color: var(--ink); }
.badge-viewers { background: var(--green); color: var(--white); }

/* ---------- Match list ---------- */
.match-list { display: flex; flex-direction: column; gap: 12px; }
.match-card {
  --accent: var(--orange);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 25%, transparent);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  border: 1px solid var(--accent);
  border-left: 5px solid var(--accent);
}
.match-card:hover { box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 40%, transparent); }
/* --accent drives the border, left-accent bar, and glow together — set it
   once per status/result and every one of those follows, instead of a
   plain orange border regardless of status (grey/planned, live, finished,
   won/lost each get their own color border+glow to match the left bar
   they've always had). */
.match-card.status-LIVE { --accent: var(--danger); }
.match-card.status-FINISHED { --accent: var(--green); }
.match-card.status-UNFINISHED { --accent: var(--yellow); }
.match-card.status-PLANNED.has-date { --accent: var(--green); }
.match-card.status-PLANNED:not(.has-date) { --accent: var(--gray); }
/* Player profile match list only (see matchCardHtml in player.js) — a
   decided result recolors the accent bar by win/loss instead of the plain
   "finished = green" status color every other match list uses. */
.match-card.result-won { --accent: var(--green); }
.match-card.result-lost { --accent: var(--danger); }
.match-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.match-card-meta {
  font-size: 12px;
  color: var(--gray);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
/* Opens the quick-edit-format/date/category modal right from the card
   (see handleQuickEditMatchClick/openQuickEditMatchModal in common.js) —
   deliberately small and quiet next to the location/date text rather than
   a full button, since it's a secondary action on an already-dense card. */
.match-quick-edit-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}
.match-quick-edit-btn:hover { opacity: 1; }
.match-card-notes {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.match-players-box {
  background: var(--gray-light);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.match-players {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.match-players .name {
  font-weight: 800;
  font-size: 18px;
}
.match-players .vs { color: var(--gray); font-weight: 500; font-size: 12px; margin: 1px 0; }
.match-players .winner { color: var(--green-light); }

/* ---------- Compact match list (/compact, for WordPress embedding) ---------- */
/* A grid, not a flex row: every card shares the same column widths, so date
   lines up under date, category under category, etc. down the whole list —
   a real table, not just each row internally spaced on its own. A shared
   scrollbar (not one per card) is the fallback for a container too narrow
   even for the flexible columns to fit. */
.compact-match-list { gap: 6px; overflow-x: auto; }
.compact-card {
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 8px 20px;
  display: grid;
  grid-template-columns: max-content minmax(160px, auto) minmax(90px, auto) minmax(120px, 1fr);
  align-items: center;
  gap: 16px;
  cursor: pointer;
  border-left: 4px solid transparent;
  font-size: 13px;
  min-width: fit-content;
}
.compact-card:hover { box-shadow: var(--shadow-lg); }
.compact-card.status-LIVE { border-left-color: var(--danger); }
.compact-card.status-FINISHED { border-left-color: var(--green); }
.compact-card.status-PLANNED { border-left-color: var(--gray); }
/* Category badge stacked above the date, not side by side. */
.compact-date-category { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; justify-self: start; }
.compact-date { color: var(--gray); font-weight: 600; }
.compact-live { color: var(--danger); font-weight: 800; }
.compact-card .badge { padding: 2px 8px; font-size: 10px; }
/* Names stacked one above the other, not side by side — and never
   truncated: a long name wraps within its own line instead of being
   clipped with an ellipsis. */
.compact-players { display: flex; flex-direction: column; gap: 1px; font-weight: 700; justify-self: start; }
.compact-players .winner { color: var(--green-light); }
.compact-result {
  justify-self: start;
  font-weight: 800;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--gray-light);
  color: var(--ink);
  white-space: nowrap;
}
.compact-card.status-FINISHED .compact-result { background: var(--green); color: var(--white); }
.compact-card.status-LIVE .compact-result { background: var(--orange); color: var(--white); }
.compact-place { color: var(--gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.overdue-warning {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--danger);
  background: rgba(199,63,16,0.08);
  padding: 6px 10px; border-radius: var(--radius-sm);
}
.match-score {
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 680px) {
  /* On a planned match the "score" slot just repeats the match format
     (e.g. "Best of 3 sets") rather than an actual result — on a narrow
     screen that's not worth the room it takes from the names next to it,
     so it's dropped and the names take the freed-up width. A real result
     (score, retirement, etc.) still shows on every other status. */
  .match-score-format { display: none; }
  .match-players-names { flex: 1; }
}
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--gray-dim);
}
.match-list-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 12px;
  color: var(--white);
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.match-list-heading:first-child { margin-top: 0; }
.match-list-heading::before, .match-list-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-dim);
}
.quick-schedule-btn { align-self: flex-start; }
.notify-buttons-row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.add-calendar-btn .cal-compact { display: none; }
.quick-schedule-btn .btn-text-compact, .notify-btn .btn-text-compact { display: none; }
@media (max-width: 680px) {
  .add-calendar-btn { padding-left: 10px; padding-right: 10px; }
  .add-calendar-btn .cal-full { display: none; }
  .add-calendar-btn .cal-compact { display: inline; }
  .quick-schedule-btn .btn-text-full, .notify-btn .btn-text-full { display: none; }
  .quick-schedule-btn .btn-text-compact, .notify-btn .btn-text-compact { display: inline; }
}

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 700; font-size: 13px; }
.field small { color: var(--gray); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }
datalist {}

.autocomplete { position: relative; }
.autocomplete-list {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--white);
  border: 1.5px solid #ddd;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}
.autocomplete-list.open { display: block; }
.autocomplete-item {
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
  color: #2a2a2a;
}
.autocomplete-item b { color: var(--orange); font-weight: 800; }
.autocomplete-item:hover, .autocomplete-item.active { background: #fff1e8; }
.autocomplete-item + .autocomplete-item { margin-top: 1px; }

.format-options { display: flex; flex-direction: column; gap: 8px; }
.format-option {
  border: 1.5px solid #ddd;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.format-option:has(input:checked) { border-color: var(--orange); background: #fff6f2; }
/* .field input {width:100%} above also matches these radios since .format-options
   sits inside a .field — override back to their natural size so the dot stays put
   at the start of the row instead of stretching and dragging the label rightward. */
.format-option input[type="radio"] {
  width: auto;
  flex-shrink: 0;
  margin: 0;
}
.format-option > span { flex: 1; }

/* ---------- Live scoring page ---------- */
.match-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
  margin-bottom: 16px;
}
.match-header h1, .container > h1, .container > h2 { color: var(--white); }
.timer {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 15px;
  background: var(--ink);
  color: var(--white);
  padding: 8px 14px;
  border-radius: 999px;
}
.timer.timer-paused { background: var(--yellow); color: var(--ink); }
.scoreboard {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius);
  padding: 18px;
  border: 1px solid var(--orange);
  box-shadow: 0 0 18px rgba(255, 85, 0, 0.25);
  overflow-x: auto;
}
/* The compact variant sits nested inside a .match-card, which already
   carries its own status-colored border+glow (see above) — a second glow
   stacked right inside it would just double up, so this cancels the
   scoreboard's own border/shadow rather than layering two. */
.scoreboard-compact { border: none; box-shadow: none; }
.scoreboard th.timer-cell { text-align: left; padding: 0 8px 10px 0; }
.timer-cell .timer { display: inline-block; width: auto; background: rgba(255,255,255,0.16); color: var(--white); }
.timer-cell .timer.timer-paused { background: var(--yellow); color: var(--ink); }
.paused-label { font-size: 11px; color: var(--yellow); font-weight: 700; margin-top: 4px; }
.scoreboard table { width: 100%; border-collapse: collapse; }
.scoreboard td, .scoreboard th {
  padding: 10px 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.scoreboard th { color: #9a9a9a; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.scoreboard td.set-score { font-size: 22px; font-weight: 800; width: 54px; }
.scoreboard td.set-score.current { color: var(--yellow); }
.scoreboard td.name-cell { text-align: left; font-weight: 800; font-size: 18px; }
.scoreboard .sub-tb { font-size: 11px; color: #9a9a9a; margin-left: 2px; }
.scoreboard tr.winner-row td.name-cell::after { content: " \2713"; color: var(--yellow); }
body:not(.embed-light) .scoreboard tr.winner-row td.name-cell::after { color: var(--orange); }
/* match cards: the winner's name and the higher number of each set are green */
body:not(.embed-light) .match-card .scoreboard tr.winner-row td.name-cell, body:not(.embed-light) .match-card .scoreboard tr.winner-row td.name-cell a { color: var(--status-green); }
.match-card .scoreboard tr.winner-row td.name-cell::after { content: none; }
body:not(.embed-light) .match-card .scoreboard .set-win { color: var(--status-green); }
.player-info-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.3px solid currentColor;
  color: inherit;
  background: none;
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  font-family: Georgia, serif;
  line-height: 1;
  margin-left: 6px;
  vertical-align: middle;
  cursor: pointer;
  opacity: 0.6;
  padding: 0;
  text-decoration: none;
}
.player-info-link:hover { opacity: 1; }
.player-name-link { cursor: pointer; }
.player-name-link:hover { color: var(--orange); }
.player-rank { color: var(--orange); font-weight: 800; font-size: 0.7em; }
.scoreboard-reason { padding: 0 12px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #9a9a9a; }
.serve-ball { display: inline-block; margin-right: 6px; font-size: 14px; }
.balls-icon { display: inline-block; margin-left: 6px; width: 14px; height: 14px; vertical-align: -2px; }
.court-icon { display: inline-block; margin-left: 6px; font-size: 13px; vertical-align: -1px; }
.proposal-icon { display: inline-block; margin-left: 6px; font-size: 13px; vertical-align: -1px; }

/* Compact variant of .scoreboard, used on a match card in a list */
.scoreboard-compact { padding: 10px 12px; overflow-x: auto; }
.scoreboard-compact td, .scoreboard-compact th { padding: 4px 8px; }
.scoreboard-compact td.set-score { font-size: 17px; width: auto; }
.scoreboard-compact th.timer-cell { padding: 0 8px 6px 0; }
.scoreboard-compact .timer { font-size: 12px; padding: 5px 10px; }
.scoreboard-compact .paused-label { font-size: 10px; }
/* Even tighter, for the S1/S2/MTB grid embedded in a /compact list row (see
   compactMatchCardHtml) — that row's height is set by the two-line
   player-names column right next to it, so this needs to fit within that
   same space, not the more generous room .scoreboard-compact gets on a
   regular (taller) match card. */
/* overflow-y: hidden overrides the sliver of vertical scroll the base
   .scoreboard rule's overflow-x: auto otherwise forces onto overflow-y too
   (its used value becomes auto, not visible, once only overflow-x is set —
   see the CSS Overflow spec) — at this tight a height, a 1px rounding
   overflow was enough to draw a real (if hairline) vertical scrollbar. */
.compact-card .scoreboard {
  padding: 4px 10px; border-radius: var(--radius-sm); box-shadow: none; justify-self: start; overflow-y: hidden;
  background: var(--gray-light); color: var(--ink);
}
.compact-card .scoreboard table { border-collapse: collapse; }
.compact-card .scoreboard td { padding: 0 16px 0 0; line-height: 1; }
.compact-card .scoreboard td:last-child { padding-right: 0; }
.compact-card .scoreboard td.set-score { font-size: 13px; font-weight: 800; width: auto; }
.compact-card .scoreboard-reason { font-size: 9px; padding: 1px 0; color: var(--gray); }
.compact-card .scoreboard .set-win { color: var(--green); }

.server-choice-row { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.server-choice-row button.active { border-color: var(--orange); background: #fff6f2; color: var(--orange-dark); font-weight: 800; }
/* A locked choice (we already know who's proposing — see
   createStaticPlayerChoicePicker's lock option) stays fully solid orange
   instead of fading like an ordinary disabled button. */
.server-choice-row button.active.locked:disabled { opacity: 1; }
/* Side by side instead of server-choice-row's default stacked column —
   this sits in a full-width form card, not a narrow modal, so two columns
   reads better than two stacked full-width buttons. */
.balls-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }

/* Week pager for the availability grid — creation flow (Schedule a match
   page, homepage's Propose times modal) and the response flow (match
   page's Pick a time card) all share this one class. Reuses the app's
   standard .tab pill, just scoped so its active state matches the orange
   used for rankings/stats tabs elsewhere. */
.week-picker-tabs.tabs { margin: 4px 0 0; }
.week-picker-tabs .tab.active { background: var(--orange); color: var(--white); border-color: var(--orange); }
.week-picker-tabs .tab { flex-direction: column; gap: 2px; font-size: 11px; padding: 7px 14px; }
.week-picker-tabs .tab span { text-transform: none; font-weight: 500; opacity: 0.75; }
.week-picker-tabs .tab.active span { opacity: 0.9; }

.venue-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.venue-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--gray-light); border-radius: var(--radius-sm); padding: 6px 6px 6px 14px; font-size: 13px; font-weight: 600; }
.venue-chip-remove { border: none; background: none; cursor: pointer; font-size: 17px; line-height: 1; color: var(--gray); padding: 2px 6px; }
.venue-chip-remove:hover { color: var(--danger); }

/* When2Meet-style availability grid: a fixed time-label column plus 7 day
   columns that share the remaining width, so a week always fits without
   horizontal scrolling (drag-to-paint and page-scroll would otherwise
   fight each other on touch). touch-action:none on the cells hands that
   whole gesture to our own touch handlers instead of the browser. */
.availability-grid { display: grid; grid-template-columns: 44px repeat(7, 1fr); gap: 2px; margin-top: 10px; user-select: none; -webkit-user-select: none; }
.avail-corner { background: transparent; }
.avail-day-head { font-size: 11px; font-weight: 700; text-align: center; padding: 4px 2px; color: var(--gray); line-height: 1.3; }
.avail-time-label { font-size: 11px; color: var(--gray-dim); text-align: right; padding: 5px 6px 5px 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.avail-cell { height: 25px; border-radius: 4px; background: var(--gray-light); cursor: pointer; touch-action: none; position: relative; }
.avail-cell:hover { background: #e2e2e2; }
.avail-cell.selected { background: var(--orange); }
.avail-cell.selected:hover { background: var(--orange-dark); }
/* The exact time a selected cell represents, e.g. "07:30" — half-hour
   cells (see .avail-grid-compact below) look identical to their neighbor
   until you've actually picked one, so this is what tells you which one
   you got. Absolutely positioned to fill the cell regardless of its
   height (25px here, 13px in the compact grid), so one rule covers both
   instead of needing a compact-specific override. */
.avail-cell-time {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 800; color: #fff; line-height: 1; pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* Every half-hour-stepped calendar in the app — the "Looking to play" board
   (looking-to-play.js's renderLtpGrid) and createAvailabilityPicker's own
   grid (common.js, used by "propose times"/edit/counter-propose) alike.
   Half-hour steps means twice the rows a whole-hour grid would need, so
   each row is shrunk well below .avail-cell's own 25px to keep the whole
   thing from doubling in height. Only the on-the-hour row gets a label and
   a slightly heavier top edge (.hour-start) — labeling every half-hour row
   at this height would be unreadable clutter, and the hour mark alone is
   enough to scan by; the exact half-hour a selected cell represents shows
   up right on the cell itself instead (see .avail-cell-time above). */
.avail-grid-compact { gap: 1px; }
.avail-grid-compact .avail-cell { height: 13px; border-radius: 2px; }
.avail-grid-compact .avail-time-label { font-size: 9px; padding: 1px 6px 0 0; }
.avail-grid-compact .avail-day-head { font-size: 10px; padding: 3px 2px; }
.avail-grid-compact .hour-start { border-top: 1px solid rgba(0,0,0,0.14); }
/* A cell an accepted request actually turned into a real match — not
   selectable (see the .contains('blocked') guards in
   createLtpAvailabilityPicker), striped rather than a flat color so it
   reads as "occupied" at a glance rather than just another shade of
   grey. Who it's occupied by is a title tooltip here (hover only, so not
   much use on a touch device) — the real, always-visible version of that
   is the text list under the calendar (see blockedListHtml). */
.avail-cell.blocked {
  cursor: default;
  background: repeating-linear-gradient(135deg, var(--gray-light), var(--gray-light) 3px, #e2e2e2 3px, #e2e2e2 6px);
}

/* Response grid on the match page — single-pick, not the creation grid's
   multi-toggle. Only cells matching one of the proposed slots are
   clickable/highlighted; everything else stays plain filler so the
   calendar shape reads correctly without implying it can be clicked.
   #proposal-grid-wrap is the first proposal's card; #counter-proposal-
   grid-wrap is the second, independent one (see oneProposalCardHtml in
   match.js) — same rules apply to both. Overrides the base .avail-cell's
   touch-action: none — that's only needed by the *other* grid (the
   multi-select "mark your availability" one), which has its own
   touchstart/touchmove drag-select handling to compensate. This grid is
   plain single-tap-to-pick with no such handling, so touch-action: none
   alone can swallow a quick tap's click event on mobile (only a slower
   press-and-release manages to register) — manipulation still blocks
   double-tap-zoom but lets a normal tap fire click. */
#proposal-grid-wrap .avail-cell, #counter-proposal-grid-wrap .avail-cell { cursor: default; touch-action: manipulation; }
#proposal-grid-wrap .avail-cell:hover, #counter-proposal-grid-wrap .avail-cell:hover { background: var(--gray-light); }
#proposal-grid-wrap .avail-cell.proposed, #counter-proposal-grid-wrap .avail-cell.proposed { background: #fff6f2; border: 1.5px solid var(--orange); cursor: pointer; }
#proposal-grid-wrap .avail-cell.proposed:hover, #counter-proposal-grid-wrap .avail-cell.proposed:hover { background: #ffe8dc; }
#proposal-grid-wrap .avail-cell.proposed.selected, #counter-proposal-grid-wrap .avail-cell.proposed.selected { background: var(--orange); border-color: var(--orange-dark); }
#proposal-grid-wrap .avail-cell.proposed.selected:hover, #counter-proposal-grid-wrap .avail-cell.proposed.selected:hover { background: var(--orange-dark); }

.proposal-option-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.proposal-option.selected { border-color: var(--orange); background: #fff6f2; color: var(--orange-dark); font-weight: 800; }

.set-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.set-picker-btn {
  border: 1.5px solid #ddd;
  background: var(--white);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  color: var(--ink);
}
.set-picker-btn.active { border-color: var(--orange); background: #fff6f2; color: var(--orange-dark); }
.set-picker-score { color: var(--gray); font-weight: 600; margin-left: 4px; }
.set-picker-btn.active .set-picker-score { color: var(--orange-dark); }

.score-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}
.score-controls .player-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 12px;
}
.score-controls .player-controls .pname { font-weight: 800; font-size: 15px; text-align: center; }
.btn-giant {
  width: 100%;
  padding: 26px 10px;
  font-size: 20px;
  border-radius: var(--radius);
  background: var(--orange);
  color: var(--white);
  box-shadow: var(--shadow-lg);
}
.btn-giant:active { transform: translateY(2px) scale(0.98); }
.btn-score-number {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  padding: 20px 10px;
}
.btn-minus {
  background: var(--gray-light);
  color: var(--ink);
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-sm);
}

.match-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
/* .match-actions sits directly on the page's dark background, not inside a
   white card — .btn-outline's default black-on-transparent styling is
   unreadable there (same fix as #reset-filters-btn on the filters bar). */
#unfinished-btn { border-color: var(--white); color: var(--white); }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; }
/* Zeroed only for the player profile page's two stats grids — spacing
   there is deliberately owned by #stats-tabs and the following section
   label instead, not the grid itself (see the section-gap unification
   above). Match page's Location/Date/Category grid keeps the base margin. */
#player-stats-blta, #player-stats-overall { margin: 0; }
/* Below ~480px, auto-fit's 150px minimum only leaves room for one column,
   stacking every tile full-width. Force a fixed 2-column grid instead so
   tiles pair up two per row on phones. */
@media (max-width: 480px) {
  .info-grid { grid-template-columns: repeat(2, 1fr); }
}
.info-item { background: var(--white); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); }
.info-item .label { font-size: 11px; text-transform: uppercase; color: var(--gray); font-weight: 700; letter-spacing: 0.03em; }
.info-item .value { font-weight: 700; font-size: 14px; margin-top: 2px; }
.info-item .edit-link {
  font-size: 11px; color: var(--orange); font-weight: 700; cursor: pointer;
  background: none; border: none; padding: 0; font-family: inherit;
}
.stats-tab-note { font-size: 12px; color: var(--gray-dim); margin: 0 0 10px; }
.form-guide-label { font-size: 11px; text-transform: uppercase; color: var(--gray-dim); font-weight: 700; letter-spacing: 0.03em; margin: 16px 0 8px; }
.form-guide { display: flex; gap: 6px; flex-wrap: wrap; }
.form-trend-row { display: flex; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; }
.form-trend-row > *:first-child { min-width: 0; }
.form-trend-row > *:last-child { flex: 1 1 220px; min-width: 220px; }
/* Win-rate trend + BLTA rank trend side by side, 50/50 — the "All matches"
   panel only ever has the first one (no rank trend outside BLTA), so it
   naturally renders alone at full width instead of splitting. */
.trend-row-2col { display: flex; gap: 16px 24px; flex-wrap: wrap; }
.trend-row-2col > * { flex: 1 1 220px; min-width: 220px; }
.trend-sparkline { display: flex; flex-direction: column; gap: 4px; }
.trend-sparkline svg { display: block; width: 100%; }
.trend-value { font-size: 12px; font-weight: 800; color: var(--white); }
.rank-trend-chart { position: relative; }
.rank-trend-labels { position: absolute; inset: 0; pointer-events: none; }
.rank-trend-labels span {
  position: absolute;
  transform: translate(-50%, -100%);
  font-size: 9px;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}
.months-chart { position: relative; }
.months-chart-labels { position: absolute; inset: 0; pointer-events: none; }
.months-chart-labels span { position: absolute; font-size: 9px; white-space: nowrap; }
.months-chart-counts span { transform: translate(-50%, -100%); font-weight: 700; color: var(--white); }
.months-chart-axis span { transform: translate(-50%, 2px); color: var(--gray-dim); }
.form-square {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--white);
  flex-shrink: 0;
}
.form-square.win { background: var(--green); }
.form-square.loss { background: var(--orange); }
.form-square:hover { opacity: 0.8; }

/* ---------- Player avatar ---------- */
.player-avatar-row { display: flex; align-items: stretch; gap: 18px; margin-top: 22px; flex-wrap: nowrap; }
.player-header-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.player-rank-badge { font-size: 28px; font-weight: 800; color: var(--orange); line-height: 1; }
/* .player-header-main stretches to the avatar's full height (see
   align-items: stretch above) — the rank badge packs against its top edge,
   and everything below (flag, name, CourtIQ) flows in normal order via the
   column's own gap, filling the taller avatar-height column top to bottom. */
.player-flag { display: block; }
.player-name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* CourtIQ readout right under the name — the full band + rating + trend
   chart still lives further down in #courtiq-card (see renderCourtIQ in
   player.js), this is just "the headline number" up top too. White (unlike
   the orange rank badge) so the two read as distinct rankings, not one
   continued number. Same 44px size as .courtiq-band-big in that card below,
   so the number reads as consistently "the same number" wherever it shows. */
.player-courtiq-badge { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.player-courtiq-label-row { display: flex; align-items: center; }
.player-courtiq-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--white); opacity: 0.7; }
/* -webkit-text-stroke reinforces the weight itself, not just the requested
   font-weight number — mobile Safari/Chrome render a bare font-weight:800
   noticeably thinner than desktop does (the system sans-serif fallback
   here has no real 800/900 weight of its own, so both platforms fake it,
   just by different amounts), and this closes that gap so the number reads
   equally bold everywhere. */
.player-courtiq-value { font-size: 44px; font-weight: 800; color: var(--white); line-height: 1; -webkit-text-stroke: 0.6px currentColor; }
.player-flag-img { display: block; height: 28px; width: auto; border-radius: 3px; box-shadow: var(--shadow); }
.player-upcoming-stat {
  margin-top: 24px;
  width: 168px;
  padding: 8px 14px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.player-upcoming-stat:hover { box-shadow: var(--shadow-lg); }
.player-upcoming-stat .label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 11px;
  margin: 0;
  line-height: 1.3;
}
.player-upcoming-stat .value {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin: 0;
}
@media (max-width: 480px) {
  .player-upcoming-stat { width: 100%; }
}
.bio-flag-icon { width: 20px; height: auto; vertical-align: middle; margin-right: 6px; border-radius: 2px; }
.player-bio-header { display: flex; justify-content: flex-end; margin-top: 24px; }
.player-bio-edit-btn { background: var(--white); color: var(--ink); font-size: 11px; padding: 5px 10px; }
.player-bio-card {
  background: var(--ink);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 32px;
  border: 1px solid var(--orange);
  box-shadow: 0 0 18px rgba(255, 85, 0, 0.25);
}
@media (max-width: 680px) { .player-bio-card { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .player-bio-card { grid-template-columns: 1fr; } }
.bio-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bio-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.bio-label { color: var(--orange); font-weight: 700; font-size: 13px; }
.bio-value { color: var(--white); font-weight: 600; font-size: 13px; text-align: right; }
.player-avatar-row h1 {
  margin: 0;
  color: var(--white);
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.player-first-name { font-weight: 400; }
.player-surname { font-weight: 800; }
.player-avatar, .player-avatar-fallback {
  width: 260px;
  height: 260px;
  border-radius: var(--radius);
  flex-shrink: 0;
}
.player-avatar { object-fit: cover; background: var(--gray-light); cursor: pointer; }
/* Wraps the avatar (photo or initials fallback) so the admin-only edit/
   remove buttons below can be positioned relative to it. align-self:
   flex-start keeps the wrap's own height pinned to the avatar's 168px
   instead of stretching to match .player-header-main's taller content —
   .player-avatar-row's align-items: stretch would otherwise do that. */
.player-avatar-wrap { position: relative; flex-shrink: 0; align-self: flex-start; }
.avatar-edit-btn, .avatar-remove-btn {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
}
.avatar-edit-btn { right: -6px; bottom: -6px; background: var(--orange); color: var(--white); }
.avatar-remove-btn { right: -6px; top: -6px; background: var(--danger); color: var(--white); }
/* On mobile the photo becomes a full-width square banner above the name,
   instead of a small square beside it — there just isn't room for both
   at a readable size on a phone. */
@media (max-width: 480px) {
  .player-avatar-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .player-avatar-wrap { align-self: stretch; }
  .player-avatar, .player-avatar-fallback { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .player-avatar-fallback { font-size: 64px; }
  /* The rank number + flag stay stacked exactly like on desktop, but that
     whole block sits beside the name now instead of above it — full-width
     stacking here would push the name down further than it needs to. Grid
     (rather than reusing the desktop flex column) so rank+flag can occupy
     one column and the name the other without changing the markup. */
  .player-header-main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
  }
  .player-rank-badge { grid-row: 1; grid-column: 1; margin: 0; }
  .player-flag { grid-row: 2; grid-column: 1; margin: 0; }
  .player-name-row { grid-row: 1 / 3; grid-column: 2; margin: 0; }
  /* Its own third column, beside the name, rather than a full-width row
     below everything — label-over-number (see .player-courtiq-badge's base
     column layout) still holds within this column. */
  .player-courtiq-badge { grid-row: 1 / 3; grid-column: 3; margin: 0; }
}
.player-avatar-fallback {
  background: var(--ink);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 52px;
}
#stats-tabs { margin: 0 0 12px; }
#stats-tabs .tab.active { background: var(--orange); color: var(--white); border-color: var(--orange); }
.statistics-card {
  background: var(--ink);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 56px;
  border: 1px solid var(--orange);
  box-shadow: 0 0 18px rgba(255, 85, 0, 0.25);
}
/* Profile sections: heading outside the box, same white 20px style as the
   homepage's section titles (.home-sec-title .l) */
.player-sec { margin-top: 56px; }
.player-sec > .statistics-card { margin-top: 0; }
.player-sec > .section-label, .player-sec > .section-header { margin: 0 0 14px; }
.player-sec .section-label, #h2h-section .section-label { color: var(--white); font-size: 20px; line-height: 1.2; }
/* The CourtIQ card sits right after the bio header/edit-profile button,
   not another big card — 56px there would stick out next to the equal,
   tighter 24px gaps everywhere else in this avatar/bio/CourtIQ run. Every
   other profile section (Statistics, Badges) keeps the bigger 56px break,
   unaffected since this only targets the one with this specific id. */
#courtiq-card.player-sec { margin-top: 24px; }
.player-sec .badges-ratio { font-size: 12px; font-weight: 600; color: #c3c7cf; white-space: nowrap; }

/* ---------- CourtIQ card (player profile) ---------- */
.courtiq-summary { display: flex; align-items: center; gap: 16px; }
.courtiq-band-big { font-size: 44px; font-weight: 800; color: var(--orange); line-height: 1; -webkit-text-stroke: 0.6px currentColor; }
.courtiq-meta { color: var(--gray-dim); font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
#courtiq-trend-inner { margin-top: 14px; width: 100%; }

/* ---------- Badges ---------- */
.section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 40px 0 12px; }
.section-header .section-label { margin: 0; }
.badges-ratio { color: var(--gray-dim); font-weight: 700; }
.section-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  flex-shrink: 0;
}
.section-link:hover { text-decoration: underline; }
.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 18px 12px; transition: max-height 0.2s ease; }
@media (max-width: 480px) {
  /* auto-fill's 118px minimum only fits 2 per row at phone widths — force
     3 so the 2-row clip shows 6 badges instead of 4. */
  .badges-grid { grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
}
.badge-item { text-align: center; }
.badge-medal {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  margin: 0 auto 8px;
  background: transparent;
}
/* How many years a CALENDAR_DATE badge has been earned (see
   computeEarnedBadges in badges.js) — only ever rendered past ×1, so
   seeing it at all already means "you did this more than once". */
.badge-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
#badge-zoom-content .badge-count { top: 6px; right: 6px; min-width: 32px; height: 32px; font-size: 17px; }
/* No background/shadow of its own to dim, so "locked" is carried entirely
   by the icon itself — grayscale plus reduced opacity — same as before. */
.badge-medal.locked { filter: grayscale(1); opacity: 0.45; }
/* contain, not cover — an uploaded medal's artwork is rarely a clean
   square (a ribbon or banner often extends past it), and now that there's
   no background box behind it (see .badge-medal above), cropping to fill
   would cut real parts of the badge off instead of just trimming empty
   padding. */
.badge-medal img { width: 100%; height: 100%; border-radius: inherit; object-fit: contain; }
.badge-name { font-size: 11px; font-weight: 700; color: var(--white); line-height: 1.3; }
.badge-name.locked { color: var(--gray-dim); }
.badge-condition { font-size: 10px; color: var(--gray-dim); line-height: 1.3; margin-top: 3px; }
/* The modal sits on a white card, unlike the dark profile page, so its
   badge text needs dark colors instead of the white/gray-dim above. */
#badges-modal-grid .badge-name { color: var(--ink); }
#badges-modal-grid .badge-name.locked { color: var(--gray); }
#badges-modal-grid .badge-condition { color: var(--gray); }
/* One heading per unlock condition (see BADGE_GROUP_ORDER in badges.js) —
   grid-column:1/-1 spans every auto-fill column so it breaks the row,
   same trick as .player-group-heading on the Players page. */
.badge-group-heading {
  grid-column: 1 / -1;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--orange);
  text-transform: uppercase;
  margin: 14px 0 -4px;
  padding: 0 0 6px;
  border-bottom: 1.5px solid var(--gray-light);
}
.badge-group-heading:first-child { margin-top: 0; }
.badge-item { cursor: pointer; }
#badge-zoom-content .badge-name { color: var(--ink); font-size: 20px; margin-top: 8px; }
#badge-zoom-content .badge-name.locked { color: var(--gray); }
#badge-zoom-content .badge-condition { color: var(--gray); font-size: 15px; margin-top: 8px; }
#badge-zoom-content .badge-medal { width: 320px; height: 320px; font-size: 136px; margin: 0 auto 16px; }
/* Progress toward a badge's own threshold — only ever rendered in the
   detailed views (the "show all badges" modal and the zoomed single-badge
   view, both on a white card — see badgeProgressFor/badgeItemHtml in
   badges.js), never the compact profile grid. The track is the "still to
   go" red, .badge-progress-fill is the achieved green portion growing over
   it left-to-right; overflow:hidden on the rounded track is what clips the
   fill's own square corners into a pill shape at both 0% and 100%, rather
   than needing conditional border-radius logic on the fill itself. */
.badge-progress { margin-top: 6px; }
.badge-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--danger);
  overflow: hidden;
}
.badge-progress-fill { height: 100%; background: var(--green); }
.badge-progress-label { font-size: 10px; font-weight: 700; color: var(--gray); margin-top: 3px; }
#badge-zoom-content .badge-progress { max-width: 220px; margin: 10px auto 0; }
#badge-zoom-content .badge-progress-bar { height: 10px; }
#badge-zoom-content .badge-progress-label { font-size: 13px; margin-top: 6px; }

/* ---------- Badge notification bell (injected by common.js — see
   ensureBadgeBellUI) ---------- */
/* Its own positioning context for #badge-bell-bubble and #badge-notif-panel
   below — deliberately NOT put on .topbar-right itself (tried that first):
   .nav-toggle lives inside .topbar-right too, and its own centering
   (position:absolute; left:50%) resolves against the *nearest* positioned
   ancestor. Had .topbar-right been position:relative, that ancestor would
   have been .topbar-right's own (narrow, right-aligned) box instead of
   .topbar — silently recentering the hamburger into the language switcher
   instead of the middle of the bar. This wrapper keeps that positioning
   contained to just the bell. */
.badge-bell-wrap {
  position: relative;
  display: none; /* switched to inline-flex via JS once a specific player is logged in */
  align-items: center;
  /* Higher than .lang-switcher's own order:2 (see above), so the bell
     always renders to its right — at every width, .lang-switcher lives in
     .topbar-right too — regardless of which of the two actually got
     inserted first; flex order settles that, not DOM/append order. */
  order: 10;
}
.badge-bell-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* anchors #badge-bell-bubble to this exact box */
  background: none;
  border: none;
  color: var(--white);
  font-size: 19px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.badge-bell-btn:hover { background: rgba(255,255,255,0.08); }
.badge-bell-bubble {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--danger);
  color: var(--white);
  font-size: 9px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
}
.badge-notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: 420px;
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 45;
}
.badge-notif-panel-header {
  padding: 12px 14px;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  border-bottom: 1px solid var(--gray-light);
  position: sticky;
  top: 0;
  background: var(--white);
}
.badge-notif-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--gray);
  font-size: 13px;
}
.badge-notif-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--gray-light);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  position: relative;
}
.badge-notif-item:last-child { border-bottom: none; }
.badge-notif-item:hover { background: var(--gray-light); }
.badge-notif-item.unread { background: rgba(255, 85, 0,0.06); }
.badge-notif-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--gray-light);
}
.badge-notif-icon img { width: 100%; height: 100%; border-radius: inherit; object-fit: contain; }
.badge-notif-text { min-width: 0; }
.badge-notif-title { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.badge-notif-date { font-size: 11px; color: var(--gray); margin-top: 2px; }
.badge-notif-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  margin-left: auto;
}
/* The "Congratulations" modal — reuses .modal-backdrop/.modal, same as
   #badge-zoom-modal, but with its own bigger celebratory layout instead of
   badgeItemHtml's plain grid-item look. */
.badge-congrats-icon {
  width: 140px;
  height: 140px;
  margin: 4px auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
}
.badge-congrats-icon img { width: 100%; height: 100%; object-fit: contain; }
.badge-congrats-title { margin: 0 0 4px; font-size: 22px; }
.badge-congrats-intro { color: var(--gray); font-size: 13px; margin: 0 0 10px; }
.badge-congrats-badge-name { font-weight: 800; font-size: 17px; color: var(--ink); }
.badge-congrats-desc { color: var(--gray); font-size: 14px; margin-top: 6px; }
.badge-congrats-cta { color: var(--orange); font-weight: 700; font-size: 14px; margin-top: 12px; }

/* ---------- Head-to-head ---------- */
.section-label {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--orange);
  text-transform: uppercase;
  margin: 56px 0 12px;
}
.h2h-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 56px; }
.h2h-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--gray-light);
}
.h2h-row:last-child { border-bottom: none; }
.h2h-name { font-weight: 700; font-size: 14px; }
.h2h-record { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.h2h-bar {
  width: 60px;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  background: var(--gray-light);
  flex-shrink: 0;
}
.h2h-score { font-weight: 800; font-size: 13px; min-width: 34px; text-align: right; }
.h2h-toggle {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  border-radius: 0 0 10px 10px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
  cursor: pointer;
}
.h2h-toggle:hover { background: var(--gray-light); }

/* ---------- Manual result entry ---------- */
.manual-set-row {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-light);
}
.manual-set-row:last-child { border-bottom: none; margin-bottom: 6px; padding-bottom: 0; }
.manual-set-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}
.manual-set-fields { display: flex; align-items: flex-end; gap: 10px; }
.manual-set-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.manual-set-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.manual-set-dash { color: var(--gray); font-weight: 700; font-size: 20px; padding-bottom: 12px; }
.manual-set-input {
  width: 100%;
  padding: 14px 8px;
  border-radius: var(--radius-sm);
  border: 1.5px solid #ddd;
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
}
.manual-set-input:focus { border-color: var(--orange); outline: none; }

/* A regular set's own optional real tiebreak score (e.g. the "(4)" in
   "7-6(4)") — same shape as .manual-set-fields/-field/-dash above, just
   visibly secondary (smaller, lighter) since it's exposed conditionally
   and isn't required. Kept as its own classes rather than reusing
   .manual-set-fields/.manual-set-input/[data-player] — those get queried
   by name elsewhere in match.js, and sharing them here would make that
   querying ambiguous between a row's main score and its tiebreak score. */
.manual-tiebreak-row { display: flex; align-items: flex-end; gap: 10px; margin-top: 8px; }
.manual-tiebreak-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.manual-tiebreak-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.manual-tiebreak-input {
  width: 100%;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1.5px solid #ddd;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: var(--gray);
}
.manual-tiebreak-input:focus { border-color: var(--orange); outline: none; }

/* ---------- Match chat ---------- */
.chat-messages {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}
.chat-empty { color: var(--gray); font-size: 13px; text-align: center; padding: 14px 0; }
.chat-message { background: var(--gray-light); border-radius: var(--radius-md); padding: 8px 10px; }
.chat-message-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--gray); font-weight: 700; }
.chat-message-body { font-size: 14px; margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
#chat-form input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid #ddd;
  font-family: inherit;
  font-size: 14px;
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,10,10,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; z-index: 50;
}
.modal {
  background: var(--white);
  border-radius: var(--radius);
  padding: 22px;
  max-width: 480px;
  width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 480px) {
  .modal-backdrop { padding: 10px; }
  .modal { padding: 16px; max-height: calc(100vh - 20px); }
  .manual-set-row { margin-bottom: 10px; padding-bottom: 10px; }
  .manual-set-row:last-child { margin-bottom: 2px; }
  .manual-set-label { margin-bottom: 6px; }
  .manual-set-input { padding: 10px 6px; font-size: 18px; }
}
.modal h3 { margin-bottom: 12px; }
.modal .close {
  float: right; cursor: pointer; font-weight: 800; font-size: 18px;
  background: none; border: none; padding: 0; line-height: 1; color: var(--ink);
}
.share-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.code-box {
  background: var(--gray-light);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-family: monospace;
  font-size: 12px;
  word-break: break-all;
  user-select: all;
}

.otp-inputs { display: flex; gap: 10px; justify-content: center; margin: 20px 0 6px; }
.otp-digit {
  width: 54px; height: 62px; font-size: 26px; font-weight: 800; text-align: center;
  border-radius: var(--radius-sm); border: 1.5px solid #ddd; font-family: inherit; color: var(--ink);
}
.otp-digit:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(230,126,34,0.15); }
.otp-digit:disabled { opacity: 0.6; }

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.toast.show { opacity: 1; }

.scroll-top-btn {
  display: none;
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: var(--white);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  z-index: 30;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
@media (min-width: 681px) {
  .scroll-top-btn.visible { display: flex; align-items: center; justify-content: center; opacity: 1; transform: translateY(0); }
}

/* ---------- Install banner (auto-shown once, mobile only) ---------- */
/* Bottom sheet, not a modal — it shouldn't block the page underneath, just
   sit on top of it until dismissed or installed (see initInstallPrompt in
   common.js). Starts translated fully off-screen and slides up on
   `.show` so it doesn't just pop into place. */
.install-banner {
  display: none;
  flex-direction: column;
  gap: 8px;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 45;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateY(140%);
  transition: transform 0.25s ease;
}
.install-banner.show { display: flex; transform: translateY(0); }
/* Icon + title + close all on one line, title itself ellipsizing rather
   than wrapping — the description below (.install-banner-body) is where
   the actual explanation lives, this line is just a label. */
.install-banner-row { display: flex; align-items: center; gap: 10px; }
.install-banner-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); flex-shrink: 0; }
.install-banner-title { font-size: 14px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.install-banner-close {
  background: none;
  border: none;
  color: var(--gray-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  flex-shrink: 0;
}
.install-banner-close:hover { color: var(--white); }
.install-banner-body { margin: 0; font-size: 12px; color: var(--gray-dim); }
/* Belt-and-suspenders alongside the JS's own matchMedia check in
   maybeShowBanner() — this is what actually keeps it off desktop even if
   that check were ever bypassed (e.g. a resize after it's already shown). */
@media (min-width: 681px) {
  .install-banner { display: none !important; }
}

/* ---------- Embed views ---------- */
body.embed { background: transparent; }
.embed .container { padding: 10px; max-width: none; }

footer.credit { text-align: center; font-size: 11px; color: var(--gray-dim); margin-top: 24px; }

/* ---------- Site footer ---------- */
.site-footer { background: var(--ink); color: var(--white); margin-top: 48px; }
.site-footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: #d8d8d8;
}
.site-footer-inner a {
  color: #d8d8d8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.site-footer-inner a:hover { color: var(--white); }

/* ---------- Player rows ---------- */
/* A single grid holds both the A/B/C… headings and the name rows — each
   heading spans every column (grid-column: 1/-1), which forces a row break
   so the next letter's names always start a fresh grid row instead of
   continuing to trail the previous letter's last, half-empty one. Rows
   between two headings then just auto-flow left-to-right, wrapping into as
   many columns as the container defines (3 on desktop, 2 on mobile below). */
#player-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 28px;
}
@media (max-width: 680px) {
  #player-list { grid-template-columns: repeat(2, 1fr); column-gap: 16px; }
}
.player-group-heading {
  grid-column: 1 / -1;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--orange);
  text-transform: uppercase;
  margin: 18px 0 2px;
  padding: 0 4px 4px;
  border-bottom: 1.5px solid var(--gray-light);
}
.player-group-heading:first-child { margin-top: 0; }
.player-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--gray-light);
  min-width: 0;
}
.player-row:last-child { border-bottom: none; }
/* Only rendered for an admin (see players.js's render()) — a hidden
   player never reaches a non-admin's DOM at all, so this is purely
   "still findable in the admin list, but visually set apart". */
.player-row-hidden { opacity: 0.55; }
.badge-hidden { background: var(--gray-light); color: var(--gray); }
/* flex-basis 100% (rather than the usual flex:1) so the avatar+name pair
   always claims its own full-width line above phone/actions once those
   wrap — the narrower a grid column gets, the more likely admin's phone +
   Edit/Delete buttons don't fit next to a name on one line (see the
   3/2-column #player-list grid above), and a name sharing a line with
   only part of that group read worse than the two stacking cleanly. */
.player-name-cell { display: flex; align-items: center; gap: 14px; flex: 1 1 100%; min-width: 0; padding: 4px 0; }
.player-name { font-weight: 700; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the name and under it the category in a lighter grey, the pair centred next to the avatar */
.player-name-stack { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; line-height: 1.25; }
.player-cat { font-size: 12.5px; font-weight: 500; color: #b8bcc4; white-space: nowrap; }
.player-cat .player-iq { font-weight: 700; color: var(--white); }
.player-row-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}
.player-row-avatar-fallback {
  background: var(--orange);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
}
.player-row-actions { display: flex; gap: 8px; flex-shrink: 0; }
.player-row .edit-name-input {
  flex: 1;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--orange);
  font-family: inherit;
  font-size: 14px;
}
/* Admin-only — phone doubles as a player's login credential (see auth.js),
   so it's shown/editable here, not on the general bio edit elsewhere. */
.player-phone { font-size: 12px; color: var(--gray); font-variant-numeric: tabular-nums; white-space: nowrap; }
.player-phone-missing { color: var(--danger); font-weight: 600; }
.player-row .edit-phone-input {
  width: 130px;
  flex-shrink: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--orange);
  font-family: inherit;
  font-size: 14px;
}
/* Admin-only, same as phone above — email is where a login-code reset
   link and the new-registration notice go (see routes/player.js), edited
   here via the general bio route rather than its own dedicated one.
   Missing email isn't flagged as urgently as missing phone (--gray-dim,
   not --danger): it doesn't block logging in at all, just self-service
   recovery, and plenty of admin-added players predate this mattering. */
.player-email { font-size: 12px; color: var(--gray); white-space: nowrap; }
.player-email-missing { color: var(--gray-dim); font-weight: 600; }
.player-row .edit-email-input {
  width: 170px;
  flex-shrink: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--orange);
  font-family: inherit;
  font-size: 14px;
}
.badge-medal-mini { width: 26px; height: 26px; font-size: 13px; margin: 0; }
.badge-medal-mini img { border-radius: inherit; }

/* ---------- Rankings ---------- */
/* Same thin orange border + soft glow as the player profile's black cards
   (.player-bio-card/.statistics-card) — one rule here covers every ranking
   table (BLTA, CourtIQ, Race, Tournaments, Badges), since they all share
   this one .card-dark wrapper and just swap its contents per active tab. */
.card-dark {
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--orange);
  box-shadow: 0 0 18px rgba(255, 85, 0, 0.25);
}
/* One-line explainer for whichever ranking tab is active (text pulled from
   blta.sk/rebricky/ for the scraped tables, and matching the CourtIQ info
   modal's own wording for that tab) — sits between the tab pills and the
   table itself, swapped out by rankings.js on every tab switch. */
.rankings-desc {
  font-size: 13px;
  color: var(--gray-dim);
  margin: 10px 0 14px;
  line-height: 1.4;
}
#rankings-tabs .tab.active { background: var(--orange); color: var(--white); border-color: var(--orange); }
/* CourtIQ's own tab is always green (not just on .active, like every other
   tab here) so it reads as its own distinct kind of ranking — a locally
   computed skill rating, not a scraped points table — at a glance. */
#rankings-tabs .tab[data-key="courtiq"],
#rankings-tabs .tab[data-key="courtiq"].active {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}
/* A real table: rank / player / age / matches / points as actual columns,
   not player+matches stacked in one cell — the header row and every data
   row share this exact column template so everything lines up. A fixed
   min-width plus the card's own overflow-x (see rankings.html) is the
   fallback for a viewport too narrow to fit all 5 columns comfortably,
   same pattern as the compact match list. */
.rank-table { overflow-x: auto; }
.rank-grid {
  display: grid;
  /* First column widened from a plain 30px — just enough for the rank
     number alone — to fit the move indicator (see .rank-move) sitting in
     front of it on the same line without wrapping. */
  grid-template-columns: 62px minmax(150px, 1.8fr) 56px 76px minmax(80px, 110px);
  align-items: center;
  gap: 10px;
  min-width: 552px;
}
/* Badges tab: no age/matches columns — pos | player+icons | badge count.
   The real total always lives in that last column; the icon row next to
   the name is just a 5-badge preview, not the full count. */
.rank-grid-badges {
  grid-template-columns: 30px minmax(160px, 1.6fr) 60px;
  min-width: 360px;
}
.rank-badges-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rank-badges-cell .rank-name { flex: 1 1 auto; min-width: 0; }
/* CourtIQ leaderboard: pos | player | band (the headline number, reuses
   .rank-points) | raw rating | games played. */
.rank-grid-courtiq {
  grid-template-columns: 30px minmax(150px, 1.6fr) 95px 70px 70px;
  min-width: 485px;
}
.courtiq-provisional-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 4px;
  border-radius: var(--radius-sm);
  background: var(--gray-light);
  color: var(--gray);
  font-size: 10px;
  font-weight: 800;
  vertical-align: 2px;
}
.card-dark .courtiq-provisional-tag { background: rgba(255,255,255,0.15); color: var(--gray-dim); }
/* "What is CourtIQ?" — sits next to the word CourtIQ wherever it's used as
   a heading/label (player header badge, the full card, the Rankings tab
   column header); opens #courtiq-info-modal (see common.js). A real
   <button>, not just a styled span — this is interactive, unlike the
   provisional tag right above. */
.courtiq-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  color: var(--white);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  vertical-align: middle;
}
.courtiq-info-btn:hover { background: rgba(255,255,255,0.3); }
/* A fanned "avatar stack": each icon after the first overlaps the previous
   one by half its own width, and later icons paint over earlier ones
   (plain DOM order already does that — no z-index needed) — the whole
   group stays as wide as one-and-a-bit icons instead of five. */
.rank-badges-icons { display: flex; flex-shrink: 0; }
.rank-badges-icons .badge-medal-mini:not(:first-child) { margin-left: -13px; }
.rank-table-header {
  padding: 0 4px 8px;
  border-bottom: 1.5px solid var(--gray-light);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gray-dim);
}
.card-dark .rank-table-header { border-bottom-color: rgba(255,255,255,0.18); }
.rank-col-age, .rank-col-matches, .rank-col-points { text-align: right; }

/* Login history (admin-only) — same row-as-grid pattern as .rank-grid
   above rather than a literal <table>, for the same reason: every row
   (including the header) shares one column template so they line up
   without any per-cell width bookkeeping. */
.login-history-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--gray-light);
}
.login-history-row:last-child { border-bottom: none; }
.login-history-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gray-dim);
  border-bottom: 1.5px solid var(--gray-light);
}
.login-history-when { color: var(--gray-dim); white-space: nowrap; text-align: right; }
.rank-row {
  padding: 10px 4px;
  border-bottom: 1px solid var(--gray-light);
}
.card-dark .rank-row { border-bottom-color: rgba(255,255,255,0.12); }
.rank-row:last-child { border-bottom: none; }
/* A real flex row (not the inline-flow-plus-margin this used to be) so the
   move indicator gets its own fixed-width slot — moveHtml() always renders
   *something* into it now (an arrow+amount, or a plain "–" — see
   rank-move-none), so that fixed width keeps .rank-pos-num, the actual
   rank number, starting at the exact same x position on every single row
   regardless of whether this one has a 1-digit move amount, a 3-digit one,
   or none at all. */
.rank-pos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.rank-pos-num { font-weight: 800; font-size: 14px; color: var(--orange); }
.rank-move { flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; line-height: 1; }
.rank-move-up { color: var(--green-light); }
.rank-move-down { color: var(--danger); }
.rank-move-none { color: var(--gray-dim); font-weight: 700; }
.rank-name { font-weight: 700; font-size: 14px; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-dark .rank-name { color: var(--white); }
.rank-flag-icon { width: 18px; height: auto; vertical-align: middle; margin-right: 6px; border-radius: 2px; }
a.rank-name:hover { text-decoration: underline; }
.rank-col-age, .rank-col-matches { font-size: 13px; color: var(--gray); }
.card-dark .rank-col-age, .card-dark .rank-col-matches { color: var(--gray-dim); }
.rank-points {
  font-weight: 800;
  font-size: 16px;
  text-align: right;
}
.card-dark .rank-points { color: var(--white); }
.rank-edit-link {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--gray);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.rank-edit-link:hover { color: var(--orange); text-decoration: underline; }
.card-dark .rank-edit-link { color: var(--gray-dim); }
.rank-points .edit-points-input { text-align: right; width: 100%; max-width: 90px; }

/* .btn-outline's default border (var(--ink), near-black) is invisible on
   any dark card — used wherever one sits inside .card-dark (the rank
   table's own edit-points Cancel button, the Players list's admin row
   actions below), not just the one caller that first hit it. */
.card-dark .btn-outline { border-color: var(--gray-dim); color: var(--white); }
.card-dark .btn-outline:hover { border-color: var(--orange); color: var(--orange); }

/* ---------- Players list (dark card) ---------- */
.card-dark .player-group-heading { border-bottom-color: rgba(255, 255, 255, 0.18); }
.card-dark .player-row { border-bottom-color: rgba(255, 255, 255, 0.12); }
.card-dark .player-phone, .card-dark .player-email { color: var(--gray-dim); }
.card-dark .badge-hidden { background: rgba(255, 255, 255, 0.12); color: var(--gray-dim); }

/* On a narrow screen, points is the number people actually came to check —
   it moves right after the player name (both in a resized column template
   and via `order`, since a grid item's `order` doesn't change which
   track's width it gets) so it's visible with zero scrolling. Age is
   dropped entirely (least essential of the four, and the extra room lets
   names stop truncating as aggressively); Matches shifts after points. */
@media (max-width: 560px) {
  .rank-grid {
    /* First column widened from a plain 20px (fine when it only ever held
       the bare rank number) so the move indicator's own fixed-width slot
       — see .rank-move — still has room; at 20px that content overflowed
       straight into the gap, crowding right up against the player name. */
    grid-template-columns: 44px minmax(80px, 1fr) 64px 64px;
    min-width: 0;
    gap: 6px;
  }
  .rank-col-matches { font-size: 12px; }
  .rank-col-age { display: none; }
  /* Tighter outer padding than the desktop card frame — .card-dark is only
     ever the rankings table (see card-dark padding override below), so
     trimming it here just gives the name column more real width to work
     with instead of shrinking the type. Row padding and the grid gap are
     trimmed the same way, and .rank-pos switches from centered to
     left-aligned so its content sits flush against the row's left edge —
     centering it inside the 50px column (fine on desktop, where that
     column has slack) was the actual cause of the left side reading as
     more padded than the right: .rank-points is right-aligned text with
     no such slack, so it already hugs the row's right edge. */
  .card-dark { padding: 12px; }
  .rank-row { padding: 8px 0; }
  .rank-pos { justify-content: flex-start; }
  .rank-pos, .rank-col-pos { order: 1; }
  .rank-name, .rank-col-player { order: 2; }
  .rank-points, .rank-col-points { order: 3; }
  .rank-col-matches { order: 4; }
  /* Overrides the unconditional 3-column .rank-grid-badges rule above —
     same reasoning as .rank-grid just above: a narrower badge-count column
     so the row fits without needing to scroll sideways on a phone.
     .rank-badges-cell needs its own explicit order here too — the
     .rank-pos/.rank-points order rules just above were written for the
     other tables' flat pos/name/points/matches siblings, and without a
     matching order the auto-placement algorithm sorts .rank-badges-cell
     (unordered, so order:0) ahead of .rank-pos (order:1), swapping which
     grid track each one actually lands in. */
  .rank-badges-cell { order: 2; }
  /* Same collision one level deeper: .rank-badges-cell's own two children
     are a .rank-name (the generic order:2 rule above applies to it here
     too, since it's just a class match, not scoped to the 4-column table)
     and a .rank-badges-icons group with no order override — so the icons
     (order:0) would jump to the name's left instead of sitting after it. */
  .rank-badges-cell > .rank-name { order: 0; }
  .rank-badges-icons { order: 1; }
  .rank-grid-badges {
    grid-template-columns: 20px minmax(70px, 1fr) 40px;
    min-width: 0;
    gap: 6px;
  }
  .rank-badges-icons .badge-medal-mini { width: 20px; height: 20px; font-size: 10px; }
  .rank-badges-icons .badge-medal-mini:not(:first-child) { margin-left: -10px; }
}

/* ---------- Looking to play ---------- */
/* Multi-select category toggles on the post form — plain .badge markup
   (the exact same category-colored pills used everywhere else, e.g.
   categoryBadge in common.js) so a selected one already looks exactly
   like the badge the board card itself will show; unselected ones are
   just dimmed rather than restyled, which keeps each one recognizable by
   color even before it's picked. */
/* The level choice (Elite / Next Gen / Novice) of the "looking for an opponent" form: three clear chips — an outlined one is not
   chosen, a solid orange one with a tick is. (The id keeps these above the orange outline-only badge styles.) */
.category-picker { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
#my-post-categories .category-toggle { padding: 10px 20px; font-size: 13px; font-family: inherit; cursor: pointer; background: #fff; color: #3a3d44; border: 2px solid #c9ccd3; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
#my-post-categories .category-toggle:hover { border-color: var(--orange); color: var(--orange); }
#my-post-categories .category-toggle.active { background: var(--orange); border-color: var(--orange); color: #fff; }
#my-post-categories .category-toggle.active::before { content: '✓'; margin-right: 7px; font-size: 14px; line-height: 1; }

/* Board cards deliberately reuse a finished match card's own chrome (white
   card, colored left accent, top badge row, dark .scoreboard box) instead
   of a bespoke look — the same visual language as the match cards
   elsewhere in the app, just with a fixed accent color instead of one
   keyed to a match status, and a single player instead of two either side
   of "vs". */
.match-card.availability-post { border-left-color: var(--orange); cursor: default; }
.availability-post-days { display: flex; gap: 4px; flex-wrap: wrap; }
.availability-day-pill {
  padding: 2px 9px;
  border-radius: var(--radius-sm);
  background: var(--gray-light);
  color: var(--gray);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.availability-player-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Font weight/size match .match-players .name exactly — same visual
   weight a match card gives its own player names. */
.availability-player-name { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; color: inherit; text-decoration: none; }
.availability-post-photo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
/* The join trigger — sits right next to the name (see boardPostHtml in
   looking-to-play.js) and opens the post owner's own free-time calendar
   in a single-pick modal (#pick-slot-grid-wrap below). Labeled (icon +
   "See X's free times to play") rather than a bare icon, since a round
   calendar glyph alone doesn't read as clickable/explain what it does. */
.availability-calendar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: rgba(255,255,255,0.12);
  color: var(--white);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  flex-shrink: 0;
  white-space: normal;
  text-align: left;
}
.availability-calendar-btn:hover { background: rgba(255,255,255,0.22); }
/* Copies a direct link to this post's "pick a time" modal — separate from
   the calendar button above (that opens the modal in-app; this gets a URL
   to send someone instead), so it stays a plain icon rather than another
   labeled pill competing for attention on the same row. */
.availability-share-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: var(--white);
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.availability-share-btn:hover { background: rgba(255,255,255,0.22); }
.availability-join-count { font-size: 12px; color: var(--gray-dim); }
/* One row per player who joined — shown only to the post's own owner (or
   an admin), on their My post card (see interestedListHtml). */
.availability-join-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-light);
  font-size: 13px;
}
.availability-join-row:last-child { border-bottom: none; }
.availability-join-contact { color: var(--gray); font-variant-numeric: tabular-nums; }
.availability-join-message { color: var(--gray-dim); font-style: italic; }
.availability-join-actions { display: flex; gap: 8px; flex-basis: 100%; }
/* Legend for the calendar's own .avail-cell.blocked stripes (see
   blockedListHtml in looking-to-play.js) — a real, already-scheduled
   match per row, since a 13px calendar cell has no room to name who it's
   with. */
.availability-blocked-list { display: flex; flex-direction: column; gap: 6px; }
.availability-blocked-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  padding: 8px 10px;
  background: var(--gray-light);
  border-radius: var(--radius-sm);
}
/* The "pick a time" modal's grid — same single-pick treatment as a match's
   own respondent-side calendar (#proposal-grid-wrap/#counter-proposal-
   grid-wrap in match.js): only the post owner's own marked times
   (.proposed) are clickable, everything else is inert filler that just
   keeps the calendar shape recognizable. */
#pick-slot-grid-wrap .avail-cell { cursor: default; touch-action: manipulation; }
#pick-slot-grid-wrap .avail-cell:hover { background: var(--gray-light); }
#pick-slot-grid-wrap .avail-cell.proposed { background: #fff6f2; border: 1.5px solid var(--orange); cursor: pointer; }
#pick-slot-grid-wrap .avail-cell.proposed:hover { background: #ffe8dc; }
#pick-slot-grid-wrap .avail-cell.proposed.selected { background: var(--orange); border-color: var(--orange-dark); }
#pick-slot-grid-wrap .avail-cell.proposed.selected:hover { background: var(--orange-dark); }

/* ---------- Playoff bracket ---------- */
/* Round columns placed with explicit grid-row start/span (computed in
   bracket.js from each node's round+position — see the CSS Grid math
   there) rather than plain flex spacing: a later round's match needs to
   sit exactly centered between the two earlier matches that feed into
   it, and a fixed row-unit grid is what makes that line up precisely
   without measuring anything in JS. */
.bracket-wrap { overflow-x: auto; padding: 20px; }
.bracket-grid { display: grid; column-gap: 24px; min-width: max-content; }
.bracket-col-header {
  grid-row: 1;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--orange);
  text-align: center;
  padding-bottom: 10px;
}
/* min-width: 0 on every level down to .bracket-slot-name — a flex/grid
   item's default min-width is auto (= its content's intrinsic width), which
   silently defeats text-overflow/nowrap on anything inside unless every
   ancestor in the chain is told it's allowed to shrink below that.
   position: relative so the connector-line pseudo-elements below (::before/
   ::after) can position themselves against this node specifically. */
.bracket-node { position: relative; display: flex; align-items: center; padding: 6px 0; min-width: 0; }
.bracket-match-card {
  display: block;
  width: 100%;
  min-width: 0;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--white);
}
.bracket-match-card-clickable { cursor: pointer; }
.bracket-match-card-clickable:hover { background: rgba(255, 255, 255, 0.12); }
.bracket-slot { display: flex; align-items: center; padding: 2px 0; font-weight: 600; min-width: 0; }
.bracket-slot.winner { color: var(--green-light); font-weight: 800; }
/* Same yellow "decided" checkmark the live scoreboard's own winner row
   uses (see tr.winner-row td.name-cell::after) — kept alongside the
   green text color here rather than replacing it, since green is what
   already reads as "winner" throughout the rest of the bracket. */
.bracket-slot.winner .bracket-slot-name::after { content: " \2713"; color: var(--yellow); }
.bracket-slot-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bracket-seed { color: var(--gray-dim); font-size: 11px; margin-right: 4px; font-weight: 400; }
.bracket-vs-divider { border-top: 1px solid rgba(255, 255, 255, 0.15); margin: 3px 0; }
.bracket-match-meta { font-size: 11px; color: var(--gray-dim); margin-top: 5px; }
.bracket-champion { flex-direction: column; align-items: center; justify-content: center; text-align: center; }

/* Connector lines between rounds — same grey as .bracket-vs-divider
   above, so the "line between the names" and "line between the matches"
   read as one consistent visual language. Each non-final node draws an
   outgoing elbow (::after) bending toward its sibling's shared parent —
   down for the top/even child, up for the bottom/odd one — using
   --connector-len (set inline per node in bracket.js: half that node's
   own row-span in pixels, which is exactly the distance from its center
   to its parent's, by the tree's own math). Each non-round-1 node draws
   a short incoming stub (::before) the same 12px (half the column gap)
   the elbow travels horizontally, so the two always meet flush in the
   middle of the gap with no separate connecting element needed. */
.bracket-node--incoming::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  width: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.bracket-node--top::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  width: 12px;
  height: var(--connector-len);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.bracket-node--bottom::after {
  content: '';
  position: absolute;
  left: 100%;
  top: calc(50% - var(--connector-len));
  width: 12px;
  height: var(--connector-len);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.bracket-champion-name { font-weight: 800; color: var(--orange); font-size: 15px; }

/* ---------- Courts (/courts, /courts/<slug>) ---------- */
/* Near-black cards with a hairline border and orange accents. */
.courts-summary { color: rgba(255, 255, 255, 0.72); margin: 4px 0 16px; font-size: 14px; line-height: 1.5; }
.courts-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 22px 0 0; }
#courts-summary { margin: 10px 0 14px; }
.courts-search {
  flex: 1 1 240px;
  min-width: 0;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--fill-grey);
  color: var(--white);
  font-family: inherit;
  font-size: 14px;
}
.courts-search::placeholder { color: #8b8f98; }
.courts-search:focus { outline: none; border-color: var(--orange); }
.courts-toolbar .tabs { margin: 0; }
.courts-filters .tab { background: #0a0a0a; color: var(--white); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: none; }
.courts-filters .tab .count { background: var(--fill-grey); color: #d6d8dd; }
.courts-filters .tab:hover { border-color: rgba(255, 85, 0, 0.7); }
.courts-filters .tab.active { background: var(--orange); border-color: var(--orange); }
.courts-filters .tab.active .count { background: rgba(255, 255, 255, 0.22); color: var(--white); }
.courts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .courts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .courts-grid { grid-template-columns: 1fr; } }
.courts-empty, .court-muted { color: rgba(255, 255, 255, 0.72); padding: 14px 2px; grid-column: 1 / -1; }

.venue-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.court-card {
  position: relative;
  background: #0a0a0a;
  border: 1px solid var(--orange);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--white);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
/* no glow at rest; it only shows on hover */
.court-card:hover { box-shadow: 0 0 24px rgba(255, 85, 0, 0.4); }
/* a venue with a photo: it fills the top of the card (16:9, the card's own corners) and the name comes under it; the arrow moves below the photo */
.court-card.has-image { padding-top: 0; overflow: hidden; }
.court-card-img { display: block; margin: 0 -26px; aspect-ratio: 16 / 9; background: #1a1a1a; overflow: hidden; }
.court-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.court-card:hover .court-card-img img { transform: scale(1.03); }
.court-card.has-image .court-card-head { padding-top: 2px; }
.court-card.has-image .court-card-arrow { top: auto; }
.court-card-head { display: block; padding-right: 30px; }
.court-card-arrow { position: absolute; top: 24px; right: 24px; color: #8b8f98; display: flex; }
.court-card-arrow .venue-icon { width: 17px; height: 17px; }
.court-card:hover .court-card-arrow { color: var(--orange); }
.court-card-name { font-size: 20px; font-weight: 800; line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
.court-card-area { color: #8b8f98; font-size: 13px; margin-top: 5px; }
.court-lines { display: flex; flex-direction: column; gap: 9px; }
.court-line { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #b8bcc4; line-height: 1.4; }
.court-line .venue-icon { margin-top: 1px; color: #8b8f98; }
.court-line:hover { color: var(--orange); }
.court-line:hover .venue-icon { color: var(--orange); }
.court-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.court-chip {
  background: var(--fill-grey);
  color: #d6d8dd;
  border-radius: var(--radius-sm);
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 700;
}
.court-chip-type { background: rgba(255, 85, 0, 0.16); color: #ff8a5c; }
.court-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 2px; }
.court-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  border-radius: var(--radius-sm);
  background: var(--fill-grey);
  color: var(--white);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  transition: background 0.15s ease, transform 0.06s ease;
}
.court-btn .venue-icon { width: 16px; height: 16px; flex-basis: 16px; }
.court-btn:hover { background: #2c2c31; }
.court-btn:active { transform: translateY(1px); }
.court-btn-primary { background: var(--orange); color: var(--white); }
.court-btn-primary:hover { background: var(--orange-dark); }

.courts-section-title, .court-section-title { color: var(--white); font-size: 22px; margin: 34px 0 6px; }
.courts-map { height: 380px; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); margin-top: 10px; z-index: 0; }
.court-back { display: inline-block; color: rgba(255, 255, 255, 0.8); font-weight: 700; font-size: 14px; margin: 22px 0 6px; }
.court-back:hover { color: var(--orange); }
.court-title { color: var(--white); font-size: 32px; margin: 8px 0 10px; }
.court-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; color: rgba(255, 255, 255, 0.85); font-size: 14px; margin-bottom: 16px; }
.court-meta-address { display: inline-flex; align-items: center; gap: 8px; }
.court-meta-address .venue-icon { color: #8b8f98; }
a.court-meta-address:hover { color: var(--orange); }
.court-actions-hero { margin: 0 0 18px; }
.court-desc { color: rgba(255, 255, 255, 0.82); line-height: 1.6; max-width: 70ch; margin: 0 0 8px; }
.court-match-group { color: var(--orange); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin: 18px 0 10px; }
.court-matches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .court-matches { grid-template-columns: 1fr; } }
.court-match {
  display: block;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--white);
  transition: border-color 0.15s ease;
}
.court-match:hover { border-color: rgba(255, 85, 0, 0.7); }
.court-match-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: #8b8f98; }
.court-match-date { margin-left: auto; }
.court-match-live { color: var(--orange); font-weight: 800; }
.court-match-players { font-weight: 700; font-size: 15px; margin-top: 9px; }
.court-match-players .winner { color: var(--orange); }
.court-match-vs { color: #8b8f98; font-weight: 600; margin: 0 4px; }
.court-match-score { color: #b8bcc4; font-size: 13px; margin-top: 3px; }
.court-info { background: #0a0a0a; border: 1px solid var(--orange); box-shadow: 0 0 18px rgba(255, 85, 0, 0.25); border-radius: var(--radius); padding: 6px 24px; margin-top: 10px; color: var(--white); }
.court-info-row { display: flex; gap: 16px; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.court-info-row:last-child { border-bottom: none; }
.court-info-icon { flex: 0 0 20px; color: #8b8f98; display: flex; padding-top: 2px; }
.court-info-label { color: #8b8f98; font-size: 12px; font-weight: 600; }
.court-info-value { font-weight: 700; margin-top: 3px; word-break: break-word; }
.court-info-value a:hover { color: var(--orange); }

/* ---------- Match cards (dark, same look as the Courts cards) ---------- */
/* The WordPress embeds (body.embed) use the same dark look; the .embed-light opt-out class is not used by any page. */
body:not(.embed-light) .match-card {
  --accent: var(--orange);
  --bar: transparent;
  --glow: 128, 132, 140;
  --g: 0.2;
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
  box-shadow:
    -4px 0 18px -4px rgba(var(--glow), var(--g)),
    4px 0 18px -4px rgba(128, 132, 140, var(--g)),
    0 -4px 18px -4px rgba(128, 132, 140, var(--g)),
    0 4px 18px -4px rgba(128, 132, 140, var(--g));
  padding: 22px 22px 20px;
  gap: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Slim status bar on the left edge: a dimmed version of the status colour. Borders stay neutral. */
body:not(.embed-light) .match-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bar); }
/* Every match card has the same soft grey glow on all four sides, stronger on hover; the status colour lives on the left bar only. */
body:not(.embed-light) .match-card:hover { --g: 0.32; border-color: rgba(255, 255, 255, 0.8); }
body:not(.embed-light) .match-card.status-LIVE { --bar: color-mix(in srgb, #ff5500 45%, #0a0a0a); }
/* Planned with a date: green bar. Not yet scheduled: grey bar. */
body:not(.embed-light) .match-card.status-PLANNED.has-date { --bar: var(--status-green); }
body:not(.embed-light) .match-card.status-PLANNED:not(.has-date) { --bar: color-mix(in srgb, #8b8f98 30%, #0a0a0a); }
body:not(.embed-light) .match-card.status-UNFINISHED { --bar: color-mix(in srgb, #ffb802 34%, #0a0a0a); }
/* Player profile only: a decided result gets a green (won) or red (lost) bar. */
body:not(.embed-light) .match-card.result-won { --bar: var(--status-green); }
body:not(.embed-light) .match-card.result-lost { --bar: color-mix(in srgb, #e5483a 38%, #0a0a0a); }

/* Generous space between cards; the heading keeps its original distance to the card below it. */
body:not(.embed-light) .match-list:not(.compact-match-list) { gap: 26px; }
body:not(.embed-light) .match-list:not(.compact-match-list) .match-list-heading { margin-bottom: 6px; }
body:not(.embed-light) .match-card-top { gap: 10px; }
/* The time of a dated match: plain white text right after the date pill. */
body:not(.embed-light) .match-card .status-time { color: var(--white); font-size: 12.5px; font-weight: 700; margin-left: -4px; }
body:not(.embed-light) .match-card-top > .match-card-notes { order: 3; flex: 1 1 100%; min-width: 0; }
body:not(.embed-light) .match-card-meta { color: #8b8f98; font-size: 12.5px; gap: 6px 14px; }
body:not(.embed-light) .match-card-meta > span { display: inline-flex; align-items: center; gap: 6px; }
body:not(.embed-light) .match-card-meta .venue-icon { width: 14px; height: 14px; flex-basis: 14px; }
body:not(.embed-light) .match-quick-edit-btn { display: inline-flex; color: #8b8f98; opacity: 1; }
body:not(.embed-light) .match-quick-edit-btn .venue-icon { width: 15px; height: 15px; flex-basis: 15px; }
body:not(.embed-light) .match-quick-edit-btn:hover { color: var(--orange); }
body:not(.embed-light) .match-card-notes { color: #8b8f98; font-size: 12.5px; font-weight: 400; }

/* Pills are outlines: one colour for the text and the border, never a fill (category pills are orange, see .badge-ELITE etc.). */
body:not(.embed-light) .match-card .badge { background: transparent; border: 1px solid currentColor; border-radius: var(--radius-sm); padding: 4px 10px; font-size: 11px; box-shadow: none; }
body:not(.embed-light) .match-card .badge-status { color: #a9adb6; }
body:not(.embed-light) .match-card .badge-status.status-LIVE { color: #ee3340; }
body:not(.embed-light) .match-card .badge-status.status-PLANNED-dated { color: var(--status-green); }
body:not(.embed-light) .match-card .badge-status.status-FINISHED { color: #a9adb6; }
body:not(.embed-light) .match-card .badge-status.status-UNFINISHED { color: #d9a06a; }
/* Competitions outside the BLTA league, on the dark pages: friendly = solid white pill with black text; VIP cup, ATA tennis and other =
   white outline with white text. (The white embeds and the white compact list keep the orange outline, white would be invisible there.) */
body:not(.embed-light):not(.embed-light) .badge-FRIENDLY { background: #fff; color: #0a0a0a; border-color: #fff; }
body:not(.embed-light):not(.embed-light) .badge-VIP_CUP,
body:not(.embed-light):not(.embed-light) .badge-ATA_TENNIS,
body:not(.embed-light):not(.embed-light) .badge-OTHER { color: #fff; border-color: #fff; }

/* Inner panels: a slightly lighter black with a hairline, not the old light grey. */
body:not(.embed-light) .match-players-box,
body:not(.embed-light) .match-card .scoreboard {
  background: var(--fill-grey);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
  box-shadow: none;
}
body:not(.embed-light) .match-players-box { padding: 16px 18px; }
body:not(.embed-light) .match-players .name { color: var(--white); }
body:not(.embed-light) .match-players .vs { color: #8b8f98; }
body:not(.embed-light) .match-players .winner { color: var(--orange); }
body:not(.embed-light) .match-score { color: var(--white); }
body:not(.embed-light) .match-score-format { color: #8b8f98; font-weight: 700; }

body:not(.embed-light) .match-card .btn-outline { background: var(--fill-grey); color: var(--white); border: none; border-radius: var(--radius-sm); }
body:not(.embed-light) .match-card .btn-outline:hover { background: #2c2c31; box-shadow: none; }
/* "Book a court" on a planned card without a date. Wide screens: a green outlined button in the row of buttons; phones (a third button
   would wrap): a small green ball pill in the info line instead. */
.btn-reserve-court, body:not(.embed-light) .match-card .btn-reserve-court { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--status-green); border: 1px solid var(--status-green); border-radius: var(--radius-sm); box-shadow: none; }
.btn-reserve-court:hover, body:not(.embed-light) .match-card .btn-reserve-court:hover { background: rgba(178, 250, 6, 0.12); color: var(--status-green); box-shadow: none; }
.btn-reserve-court .venue-icon, body:not(.embed-light) .match-card .btn.btn-reserve-court .venue-icon { width: 14px; height: 14px; flex: 0 0 14px; color: var(--status-green); }
.reserve-court-pill, body:not(.embed-light) .match-card .reserve-court-pill { display: none; align-items: center; justify-content: center; padding: 2px 7px; background: transparent; color: var(--status-green); border: 1px solid var(--status-green); border-radius: 5px; box-shadow: none; cursor: pointer; line-height: 1; font-family: inherit; }
.reserve-court-pill:hover, body:not(.embed-light) .match-card .reserve-court-pill:hover { background: rgba(178, 250, 6, 0.14); }
.reserve-court-pill .venue-icon, body:not(.embed-light) .match-card .match-card-meta .reserve-court-pill .venue-icon { width: 14px; height: 14px; flex: 0 0 14px; color: var(--status-green); }
@media (max-width: 480px) {
  .btn-reserve-court, body:not(.embed-light) .match-card .btn-reserve-court { display: none; }
  .reserve-court-pill, body:not(.embed-light) .match-card .reserve-court-pill { display: inline-flex; }
}
body:not(.embed-light) .match-card .availability-day-pill { background: var(--fill-grey); color: #d6d8dd; }
/* The overdue note is styled like a category pill: orange outline, no fill, same size and type. */
body:not(.embed-light) .match-card .overdue-warning {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  max-width: 100%;
  background: transparent;
  color: var(--orange);
  border: 1px solid var(--orange);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
body:not(.embed-light) .match-card .overdue-warning .venue-icon { width: 13px; height: 13px; flex-basis: 13px; }

/* Section headings: outline icon (orange for Live), same family as the venue/date icons. */
body:not(.embed-light) .match-heading-label { display: inline-flex; align-items: center; gap: 10px; }
body:not(.embed-light) .match-heading-label .venue-icon { width: 24px; height: 24px; flex: 0 0 24px; color: #8b8f98; }
body:not(.embed-light) .match-heading-label .venue-icon[data-icon="live"] { color: var(--orange); }
/* Button icons: same gray outline style as the venue and date icons. */
body:not(.embed-light) .match-card .btn .venue-icon { width: 15px; height: 15px; flex: 0 0 15px; color: #8b8f98; }
body:not(.embed-light) .match-card .notify-btn:disabled .venue-icon { color: #5fd88a; }

@media (max-width: 680px) {
  body:not(.embed-light) .match-card { padding: 18px 16px 16px; border-radius: var(--radius); }
  /* Phone: both pills on the left of the first line; second line has the additional info on the left
     and the venue on the right (same font). */
  body:not(.embed-light) .match-card:not(.availability-post) .match-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0 10px; }
  body:not(.embed-light) .match-card:not(.availability-post) .match-card-top::after { content: ''; flex: 0 0 100%; order: 2; }
  body:not(.embed-light) .match-card:not(.availability-post) .match-card-top > .badge, body:not(.embed-light) .match-card:not(.availability-post) .match-card-top > .status-time { order: 1; }
  /* when the pills do not fit one line (a Live video pill, the viewer count) the next line has a gap above it; the first line's own gap is taken off the card padding */
  body:not(.embed-light) .match-card:not(.availability-post) { padding-top: 10px; }
  body:not(.embed-light) .match-card:not(.availability-post) .match-card-top > .badge, body:not(.embed-light) .match-card:not(.availability-post) .match-card-top > .status-time { margin-top: 8px; }
  body:not(.embed-light) .match-card:not(.availability-post) .match-card-top > .match-card-notes { order: 3; flex: 1 1 0; min-width: 0; margin-top: 10px; white-space: normal; overflow: visible; text-overflow: clip; }
  body:not(.embed-light) .match-card:not(.availability-post) .match-card-top > .match-card-meta { order: 4; flex: 0 1 auto; max-width: 100%; margin-top: 10px; margin-left: auto; justify-content: flex-end; }
  body:not(.embed-light) .match-card:not(.availability-post) .match-card-top:has(> .match-card-notes) > .match-card-meta { max-width: 65%; }
}

/* ---------- Home page filter bar: segmented control + chips + one "Filtre" chip ---------- */
/* Scoped to .filter-bar so the .tab pills on other pages (rankings, stats, courts) stay as they are. */
.filter-bar { margin: 22px 0 40px; display: flex; flex-direction: column; gap: 14px; }
.filter-bar .tab {
  box-shadow: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 11px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.filter-bar .tab .count { background: transparent; color: inherit; opacity: 0.65; padding: 0; font-size: 11px; }
.filter-bar #count-ALL, .filter-bar #count-UNSCHEDULED, .filter-bar #count-SCHEDULED, .filter-bar #count-LIVE, .filter-bar #count-FINISHED, .filter-bar #count-UNFINISHED { background: transparent; color: inherit; }

/* the segmented control */
.filter-bar .seg { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--fill-grey); border-radius: var(--radius-md); padding: 4px; gap: 2px; }
.filter-bar .seg { align-self: flex-start; }
.filter-bar .seg::-webkit-scrollbar { display: none; }
.filter-bar .seg .tab, .filter-bar .seg .tab[data-filter="FINISHED"] { background: transparent; color: var(--white); border-radius: var(--radius-sm); padding: 9px 14px; }
.filter-bar .seg .tab.active, .filter-bar .seg .tab[data-filter="FINISHED"].active { background: var(--orange); color: var(--white); border-color: var(--orange); }
.filter-bar .seg .tab.active .count { opacity: 1; }
.filter-bar .tab-live .live-dot { background: #ee3340; box-shadow: 0 0 0 0 rgba(238, 51, 64, 0.55); animation: pulse-red 1.6s infinite; }
@keyframes pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(238, 51, 64, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(238, 51, 64, 0); }
  100% { box-shadow: 0 0 0 0 rgba(238, 51, 64, 0); }
}

/* "My matches" turns green once the player is logged in (locked = greyed out) */
.filter-bar .seg #tab-MY_MATCHES:not(.tab-locked) { background: var(--status-green); color: #0a0a0a; border-color: var(--status-green); }
.filter-bar .seg #tab-MY_MATCHES:not(.tab-locked).active { box-shadow: 0 0 0 2px var(--white) inset; }
.filter-bar .seg #tab-MY_MATCHES:not(.tab-locked) .count { background: transparent; color: inherit; opacity: 1; }

/* search + the Filtre chip */
.filter-row { display: flex; gap: 10px; align-items: center; }
.filter-search { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.filter-search svg { position: absolute; left: 14px; width: 16px; height: 16px; color: #8b8f98; pointer-events: none; }
.filter-bar .filter-search input[type="text"] {
  width: 100%;
  min-width: 0;
  background: var(--fill-grey);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 12px 14px 12px 42px;
  font-family: inherit;
  font-size: 14px;
}
.filter-bar .filter-search input[type="text"]::placeholder { color: #8b8f98; }
.filter-bar .filter-search input[type="text"]:focus { outline: none; border-color: var(--orange); }
.filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.filters-toggle svg { width: 16px; height: 16px; }
.filters-toggle.active { color: var(--orange); border-color: var(--orange); }
.filter-count { background: var(--orange); color: var(--white); border-radius: 999px; font-size: 10px; padding: 2px 7px; }
.filter-count[hidden] { display: none; }

/* the dropdowns behind the chip */
.filters-panel { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filters-panel[hidden] { display: none; }
.filters-panel select {
  flex: 1 1 160px;
  min-width: 0;
  background: var(--fill-grey);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  font-family: inherit;
  font-size: 14px;
}
.filters-panel select:disabled { opacity: 0.45; }
.filters-panel .btn-outline { background: transparent; color: #b8bcc4; border: none; box-shadow: none; padding: 10px 6px; }
.filters-panel .btn-outline:hover { color: var(--white); box-shadow: none; }

/* ---------- Match page (dark, same look as the home page cards) ---------- */
/* Scoped to body.match-page so the player profile, embeds and other pages keep their own styles. */
body.match-page #match-root { --glow: 128, 132, 140; }
body.match-page .match-header { margin-top: 26px; margin-bottom: 20px; }
body.match-page .match-header h1 { line-height: 1.15; }

/* every panel: black card, thin white border, soft grey glow on all four sides */
body.match-page .scoreboard,
body.match-page .info-item,
body.match-page .score-controls .player-controls,
body.match-page .h2h-card,
body.match-page #match-root .card {
  position: relative;
  background: #0a0a0a;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    -4px 0 18px -4px rgba(128, 132, 140, 0.2),
    4px 0 18px -4px rgba(128, 132, 140, 0.2),
    0 -4px 18px -4px rgba(128, 132, 140, 0.2),
    0 4px 18px -4px rgba(128, 132, 140, 0.2);
}
/* ...the result item (the scoreboard) keeps the white border; every other panel and button of the page has the grey one */
body.match-page .info-item,
body.match-page .score-controls .player-controls,
body.match-page .h2h-card,
body.match-page #match-root .card { border-color: var(--border-grey); }
body.match-page .scoreboard,
body.match-page .score-controls .player-controls,
body.match-page #match-root .card { border-radius: var(--radius); }
body.match-page .info-item,
body.match-page .h2h-card { border-radius: var(--radius); }
body.match-page #match-root .card { padding: 20px 22px; }

/* status bar on the left edge of the scoreboard and result cards (same colours as the home page cards) */
body.match-page .scoreboard, body.match-page #match-root .result-card { --bar: transparent; overflow: hidden; }
body.match-page .scoreboard::before, body.match-page #match-root .result-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bar);
}
body.match-page .scoreboard { padding: 22px 22px 18px; overflow-x: auto; }
body.match-page .scoreboard.status-LIVE { --bar: color-mix(in srgb, #ff5500 45%, #0a0a0a); }
body.match-page .scoreboard.status-PLANNED { --bar: color-mix(in srgb, #8b8f98 30%, #0a0a0a); }
body.match-page .scoreboard.status-FINISHED, body.match-page .result-card.status-FINISHED { --bar: var(--status-green); }
body.match-page .scoreboard.status-UNFINISHED, body.match-page .result-card.status-UNFINISHED { --bar: color-mix(in srgb, #ffb802 34%, #0a0a0a); }
body.match-page .scoreboard th { color: #8b8f98; letter-spacing: 0.06em; }
body.match-page .scoreboard td.set-score.current { color: var(--orange); }
body.match-page .timer { background: var(--fill-grey); }
body.match-page .timer-cell .timer { background: var(--fill-grey); }

/* winner / unfinished card */
body.match-page .result-card { text-align: center; margin-top: 20px; }
body.match-page .result-card-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8b8f98; }
body.match-page .result-card-winner { font-size: 24px; font-weight: 800; color: var(--white); margin-top: 4px; }
/* the winner's name is green (a match with no winner keeps the white text) */
body.match-page .result-card-winner.has-winner { color: var(--status-green); }
body.match-page .result-card-text { font-size: 16px; font-weight: 700; margin-top: 4px; }
body.match-page .result-card-reason { font-size: 12px; font-weight: 700; color: #8b8f98; margin-top: 4px; }

/* buttons: outline pills, solid orange / green for the main actions */
body.match-page #match-root .btn {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--border-grey);
  border-radius: var(--radius-sm);
  box-shadow: none;
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.match-page #match-root .btn:hover { border-color: rgba(255, 255, 255, 0.75); box-shadow: none; }
body.match-page #match-root .btn-primary { background: var(--orange); border-color: var(--orange); }
body.match-page #match-root .btn-primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
body.match-page #match-root .btn-green { background: var(--status-green); border-color: var(--status-green); color: #0a0a0a; }
body.match-page #match-root .btn-green:hover { filter: brightness(1.12); border-color: var(--status-green); }
body.match-page #match-root .btn-dark { background: var(--fill-grey); border-color: rgba(255, 255, 255, 0.12); }
body.match-page #match-root .btn-danger { background: transparent; color: #ff7a6e; border-color: rgba(229, 72, 58, 0.6); }
body.match-page #match-root .btn-danger:hover { background: rgba(229, 72, 58, 0.14); border-color: #e5483a; }
body.match-page #match-root .btn-outline { border-width: 1px; border-color: var(--border-grey); }
body.match-page #match-root #unfinished-btn { border-color: var(--border-grey); }

/* scoring panels */
body.match-page .score-controls { gap: 18px; margin: 22px 0; }
body.match-page .score-controls .player-controls { padding: 20px 14px; gap: 12px; }
body.match-page .score-controls .player-controls .pname { font-size: 15px; color: var(--white); }
body.match-page #match-root .btn-giant { border-radius: var(--radius-sm); text-transform: none; letter-spacing: 0; background: var(--orange); border-color: var(--orange); }
body.match-page #match-root .btn-giant:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
body.match-page #match-root .btn-score-number { font-size: 56px; padding: 20px 10px; letter-spacing: 0; }
body.match-page #match-root .btn-minus { background: var(--fill-grey); border-color: rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); text-transform: none; font-size: 14px; }
body.match-page .set-picker-btn { background: transparent; color: var(--white); border: 1px solid var(--border-grey); }
body.match-page .set-picker-btn.active { border-color: var(--orange); background: rgba(255, 85, 0, 0.12); color: var(--orange); }
body.match-page .set-picker-score { color: #8b8f98; }
body.match-page .set-picker-btn.active .set-picker-score { color: var(--orange); }

/* Place / Date / Category tiles */
body.match-page .info-grid { gap: 14px; margin: 22px 0; }
body.match-page .info-item { padding: 14px 16px; }
body.match-page .info-item .label, body.match-page .card-label { color: #8b8f98; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
body.match-page .info-item .value { color: var(--white); font-size: 15px; margin-top: 4px; }

/* head-to-head, notes, chat */
body.match-page .h2h-row { border-bottom-color: rgba(255, 255, 255, 0.1); }
body.match-page .h2h-name { color: var(--white); }
body.match-page .h2h-name:hover { color: var(--orange); }
body.match-page .h2h-bar { background: rgba(255, 255, 255, 0.12); }
body.match-page .h2h-toggle:hover { background: var(--fill-grey); }
body.match-page .chat-message { background: var(--fill-grey); }
body.match-page .chat-message-meta, body.match-page .chat-empty { color: #8b8f98; }
body.match-page #chat-form input[type="text"] {
  background: var(--fill-grey);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
body.match-page #chat-form input[type="text"]::placeholder { color: #8b8f98; }
body.match-page #chat-form input[type="text"]:focus { border-color: var(--orange); outline: none; }
body.match-page #chat-form .btn-sm { padding: 8px 16px; }

/* proposal cards ("Pick a time") on the dark match page */
body.match-page #match-root .card .label { color: var(--orange); }
body.match-page #match-root .card p { color: #b8bcc4 !important; }
body.match-page #match-root .card .field label { color: var(--white); }
body.match-page #match-root .card .field small { color: #8b8f98; }
body.match-page #match-root .card .field label span { color: #8b8f98 !important; }
body.match-page #match-root .card .field input, body.match-page #match-root .card .field select, body.match-page #match-root .card .field textarea,
body.match-page #proposal-card input[type="text"], body.match-page #counter-proposal-card input[type="text"] {
  background: var(--fill-grey);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
}
body.match-page #match-root .card .field input::placeholder { color: #8b8f98; }
body.match-page #match-root .card .field input:focus { border-color: var(--orange); outline: none; }
body.match-page #match-root .card .edit-link { color: var(--white); background: transparent; border: 1px solid var(--border-grey); border-radius: var(--radius-sm); padding: 5px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
body.match-page #match-root .card .edit-link:hover { border-color: rgba(255, 255, 255, 0.75); }
body.match-page #match-root .card .edit-link[id^="delete-"] { color: #ff7a6e !important; border-color: rgba(229, 72, 58, 0.6); }
body.match-page .week-picker-tabs .tab { background: transparent; color: var(--white); box-shadow: none; border: 1px solid var(--border-grey); }
body.match-page .week-picker-tabs .tab.active { background: var(--orange); border-color: var(--orange); }
body.match-page .avail-day-head { color: #8b8f98; }
body.match-page .avail-time-label { color: #8b8f98; }
body.match-page .avail-cell { background: rgba(255, 255, 255, 0.07); }
body.match-page .avail-cell:hover, body.match-page #proposal-grid-wrap .avail-cell:hover, body.match-page #counter-proposal-grid-wrap .avail-cell:hover { background: rgba(255, 255, 255, 0.12); }
body.match-page .avail-cell.selected { background: var(--orange); }
body.match-page #proposal-grid-wrap .avail-cell.proposed, body.match-page #counter-proposal-grid-wrap .avail-cell.proposed { background: rgba(255, 85, 0, 0.22); border: 1.5px solid var(--orange); }
body.match-page #proposal-grid-wrap .avail-cell.proposed:hover, body.match-page #counter-proposal-grid-wrap .avail-cell.proposed:hover { background: rgba(255, 85, 0, 0.38); }
body.match-page #proposal-grid-wrap .avail-cell.proposed.selected, body.match-page #counter-proposal-grid-wrap .avail-cell.proposed.selected { background: var(--orange); }
body.match-page .avail-grid-compact .hour-start { border-top-color: rgba(255, 255, 255, 0.14); }
body.match-page .proposal-option.selected, body.match-page #match-root .btn-outline.selected, body.match-page #match-root .btn-outline.active { border-color: var(--orange); background: rgba(255, 85, 0, 0.14); color: var(--orange); }
body.match-page #match-root .btn:disabled { opacity: 0.4; }

body.match-page #match-root .card .card-label { color: #8b8f98; }

/* outline icons on the match page (buttons, labels, badges) */
body.match-page #match-root .btn .venue-icon { width: 16px; height: 16px; flex: 0 0 16px; }
body.match-page #match-root .btn-giant .venue-icon, body.match-page #match-root .btn-score-number .venue-icon { display: none; }
body.match-page .serve-ball { display: inline-flex; vertical-align: middle; margin-right: 8px; }
body.match-page .serve-ball .venue-icon { width: 16px; height: 16px; flex-basis: 16px; color: #ffb802; }
body.match-page .badge-viewers { display: inline-flex; align-items: center; gap: 5px; }
body.match-page .badge-viewers .venue-icon { width: 13px; height: 13px; flex-basis: 13px; }
body.match-page .paused-label { display: inline-flex; align-items: center; gap: 5px; }
body.match-page .paused-label .venue-icon { width: 13px; height: 13px; flex-basis: 13px; }
body.match-page #match-root .card .label { display: flex; align-items: center; gap: 6px; }
body.match-page #match-root .card .label .venue-icon { width: 14px; height: 14px; flex-basis: 14px; }
body.match-page #match-root .card .field label .venue-icon { width: 15px; height: 15px; flex-basis: 15px; vertical-align: -3px; margin-right: 2px; color: #8b8f98; }

/* match page header pills: same outlined, 8px-cornered pills as on the home page cards */
body.match-page .match-header .badge { background: transparent; border: 1px solid currentColor; border-radius: var(--radius-sm); padding: 4px 10px; font-size: 11px; box-shadow: none; animation: none; }
body.match-page .match-header .badge-status { color: #a9adb6; }
body.match-page .match-header .badge-status.status-LIVE { color: #ee3340; }
body.match-page .match-header .badge-status.status-PLANNED-dated { color: var(--status-green); }
body.match-page .match-header .badge-status.status-FINISHED { color: #a9adb6; }
body.match-page .match-header .badge-status.status-UNFINISHED { color: #d9a06a; }
body.match-page .match-header .badge-viewers { color: var(--status-green); }
body.match-page .match-header .badge-FRIENDLY { background: #fff; color: #0a0a0a; border-color: #fff; }

/* the pills and the time: the spacing of the match cards (10px between, the time close to its date); a second line gets a gap above it */
body.match-page .match-header .match-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
body.match-page .match-header .status-time { color: var(--white); font-size: 12.5px; font-weight: 700; margin-left: -4px; }

body.match-page #match-root #start-btn, body.match-page #match-root #manual-result-btn { border-radius: var(--radius-sm); }

body.match-page #match-root .match-actions .btn { border-radius: var(--radius-sm); }

/* only the scoreboard keeps the glow; the other panels are plain bordered cards */
body.match-page .info-item,
body.match-page .score-controls .player-controls,
body.match-page .h2h-card,
body.match-page #match-root .card { box-shadow: none; }

body.match-page .match-header .badge { display: inline-flex; align-items: center; vertical-align: middle; line-height: 1.3; }

body.match-page .scoreboard::before { display: none; }

body.match-page #proposal-card .btn, body.match-page #counter-proposal-card .btn { border-radius: var(--radius-sm); }

/* match page: every pill and button shares the 8px corners of the home page pills */
body.match-page .btn, body.match-page .tab, body.match-page .edit-link, body.match-page .set-picker-btn,
body.match-page .timer, body.match-page .badge, body.match-page .lang-btn, body.match-page .proposal-option { border-radius: var(--radius-sm); }

body.match-page #match-root .card .edit-link { border-radius: var(--radius-sm); }

/* tab pills everywhere (rankings, player stats, courts...) share the 8px corners of the other pills; embeds keep their own look */
body:not(.embed-light) .tab, body:not(.embed-light) .filter-bar .seg .tab { border-radius: var(--radius-sm); }

body:not(.embed-light) .lang-btn { border-radius: var(--radius-sm); }

/* Player profile: the head-to-head table is a black card with an orange border, like the cards above it. */
body:not(.match-page):not(.embed-light) .h2h-card { background: var(--ink); color: var(--white); border: 1px solid var(--orange); border-radius: var(--radius); box-shadow: 0 0 18px rgba(255, 85, 0, 0.25); }
body:not(.match-page):not(.embed-light) .h2h-card .h2h-row { border-bottom-color: rgba(255, 255, 255, 0.12); }
body:not(.match-page):not(.embed-light) .h2h-card .h2h-name { color: var(--white); }
body:not(.match-page):not(.embed-light) .h2h-card .h2h-name:hover { color: var(--orange); }
body:not(.match-page):not(.embed-light) .h2h-card .h2h-bar { background: rgba(255, 255, 255, 0.12); }
body:not(.match-page):not(.embed-light) .h2h-card .h2h-toggle { border-radius: 0 0 var(--radius) var(--radius); }
body:not(.match-page):not(.embed-light) .h2h-card .h2h-toggle:hover { background: var(--fill-grey); }

/* Player profile filters: same dark selects and plain reset button as the home page filter panel. */
#player-filters select {
  flex: 1 1 160px;
  min-width: 0;
  background: var(--fill-grey);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  font-family: inherit;
  font-size: 14px;
}
#player-filters select:disabled { opacity: 0.45; }
#player-filters .btn-outline { background: transparent; color: #b8bcc4; border: none; box-shadow: none; padding: 10px 6px; }
#player-filters .btn-outline:hover { color: var(--white); box-shadow: none; }

/* Tab pills (rankings, player stats, courts...): grey like the home page filters instead of white. */
body:not(.embed-light):not(.embed-light) .tab:not(.active):not(.tab-locked) { background: var(--fill-grey); color: var(--white); box-shadow: none; border-color: transparent; }
body:not(.embed-light):not(.embed-light) .tab:not(.active) .count { background: rgba(255, 255, 255, 0.12); color: var(--white); }
body:not(.embed-light):not(.embed-light) .filter-bar .tab:not(.active) { background: transparent; }

/* Player profile stat tiles: grey panels with white text, like the other grey fills. */
body:not(.match-page):not(.embed-light) .info-item { background: var(--fill-grey); color: var(--white); box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--radius); }
body:not(.match-page):not(.embed-light) .info-item .label { color: #a9adb6; }
body:not(.match-page):not(.embed-light) .info-item .value { color: var(--white); }

/* Grey search field (players page), same look as the search box on the home page. */
input.grey-search {
  width: 100%;
  background: var(--fill-grey);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  margin: 18px 0 14px;
}
#add-player-card { margin-top: 22px; }
input.grey-search::placeholder { color: #8b8f98; }
input.grey-search:focus { outline: none; border-color: var(--orange); }

/* BLTA league category pills: a fluorescent orange, as bright as the lime green (text, border and level dots). */
body:not(.embed-light) .badge-ELITE, body:not(.embed-light) .badge-NEXT_GEN, body:not(.embed-light) .badge-NOVICE,
body:not(.embed-light) .match-card .overdue-warning { color: #ff5500; border-color: #ff5500; }

/* One green everywhere: the lime #b2fa06. Text sitting on it is dark. */
.btn-green, #tab-MY_MATCHES:not(.tab-locked), #count-SCHEDULED, .badge-status.status-PLANNED-dated, .badge-viewers,
.compact-card.status-FINISHED .compact-result, .form-square.win,
#rankings-tabs .tab[data-key="courtiq"], #rankings-tabs .tab[data-key="courtiq"].active { color: #0a0a0a; }
.form-square.win { color: #0a0a0a; }
/* White surfaces (modals, embeds, compact lists) keep a darker green so it stays readable on white. */
.modal { --green: #105a1e; --green-light: #14712a; }
.modal .btn-green { color: #fff; }

/* Match cards: no coloured bar on the left edge any more; cards that used the green bar (planned with a date, won) get a green border instead. */
body:not(.embed-light) .match-card::before { display: none; }
body:not(.embed-light) .match-card.status-PLANNED.has-date,
body:not(.embed-light) .match-card.result-won { border-color: var(--status-green); }
body:not(.embed-light) .match-card.status-PLANNED.has-date:hover,
body:not(.embed-light) .match-card.result-won:hover { border-color: var(--status-green); }

/* ---------- Phone bottom menu (Home / My matches / My profile / Rankings) ---------- */
.bottom-nav { display: none; }
@media (max-width: 1024px) {
  body.has-bottom-nav { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: rgba(10, 10, 10, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .bottom-nav-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
    border-radius: var(--radius-sm);
    color: #a9adb6;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav-item svg { width: 24px; height: 24px; flex: 0 0 24px; }
  .bottom-nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bottom-nav-item:hover { color: var(--white); }
  .bottom-nav-item.active { color: var(--status-green); }
  .has-bottom-nav .install-banner { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .has-bottom-nav .scroll-top-btn { bottom: calc(92px + env(safe-area-inset-bottom)); right: 16px; }
}


/* ---------- Top menu on phones: same rows with icons as the bottom menu sheet ---------- */
@media (max-width: 1024px) {
  .nav-links { background: #0a0a0a; border-bottom: 1px solid rgba(255, 255, 255, 0.12); gap: 8px; padding: 14px 16px 16px; }
  .nav-links a, .nav-links .nav-item-dropdown-toggle a {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    background: var(--fill-grey);
    color: var(--white);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    font-size: 13px;
    letter-spacing: 0.04em;
  }
  .nav-links a::before {
    content: '';
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background: #a9adb6;
    -webkit-mask: var(--nav-ico) center / contain no-repeat;
    mask: var(--nav-ico) center / contain no-repeat;
  }
  .nav-links a { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E"); }
  .nav-links a[href="/"], .nav-links a[data-code="/"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M5 5c3.5 3.5 3.5 10.5 0 14'/%3E%3Cpath d='M19 5c-3.5 3.5-3.5 10.5 0 14'/%3E%3C/svg%3E"); }
  .nav-links a[href="/players"], .nav-links a[data-code="/players"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
  .nav-links a[href="/rankings"], .nav-links a[data-code="/rankings"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V10M18 20V4M6 20v-4'/%3E%3C/svg%3E"); }
  .nav-links a[href="/courts"], .nav-links a[data-code="/courts"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 1 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
  .nav-links a[href="/looking-to-play"], .nav-links a[data-code="/looking-to-play"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
  .nav-links a[href="/new-match"], .nav-links a[data-code="/new-match"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18M12 14v4M10 16h4'/%3E%3C/svg%3E"); }
  .nav-links #nav-my-profile-link { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
  .nav-links a:hover { background: var(--fill-grey); color: var(--orange); }
  .nav-links a:hover::before { background: var(--orange); }
  .nav-links a.active { background: var(--fill-grey); color: var(--status-green); }
  .nav-links a.active::before { background: var(--status-green); }
  .nav-item-dropdown-toggle { justify-content: stretch; }
  .nav-item-dropdown-toggle a { flex: 1; }
  .nav-submenu a { padding: 12px 16px 12px 50px; font-size: 12px; }
  .nav-submenu a::before { display: none; }
}

/* Embeds: status pills outside a match card get the same outlined 8px look as inside one. */
body.embed .badge { background: transparent; border: 1px solid currentColor; border-radius: var(--radius-sm); padding: 4px 10px; font-size: 11px; box-shadow: none; }
body.embed .badge-status { color: #a9adb6; }
body.embed .badge-status.status-LIVE { color: #ee3340; animation: none; }
body.embed .badge-status.status-PLANNED-dated { color: var(--status-green); }
body.embed .badge-status.status-FINISHED { color: #a9adb6; }
body.embed .badge-status.status-UNFINISHED { color: #d9a06a; }

/* Compact lists (/compact, /compactblta and the compact embed): dark rows in the app style. */
.compact-card { background: #0a0a0a; color: var(--white); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--radius); box-shadow: none; }
.compact-card:hover { border-color: rgba(255, 255, 255, 0.7); box-shadow: none; }
.compact-card.status-LIVE, .compact-card.status-FINISHED, .compact-card.status-PLANNED { border-left-color: rgba(255, 255, 255, 0.35); }
.compact-card.status-PLANNED.has-date { border-color: var(--status-green); }
.compact-card.status-LIVE { border-color: var(--orange); }
.compact-date, .compact-place, .compact-card .scoreboard-reason { color: #a9adb6; }
.compact-live { color: #ee3340; }
.compact-players .winner { color: var(--status-green); }
.compact-result { background: var(--fill-grey); color: var(--white); border-radius: var(--radius-sm); }
.compact-card.status-FINISHED .compact-result { background: var(--status-green); color: #0a0a0a; }
.compact-card.status-LIVE .compact-result { background: var(--orange); color: var(--white); }
.compact-card .scoreboard { background: var(--fill-grey); color: var(--white); border: none; }
.compact-card .scoreboard .set-win { color: var(--status-green); }
body.compact-page .filters input[type="text"], body.compact-page .filters select {
  background: var(--fill-grey); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm);
}
body.compact-page .filters input[type="text"]::placeholder { color: #8b8f98; }
body.compact-page .filters .btn-outline { background: transparent; color: #b8bcc4; border: none; box-shadow: none; }
.compact-match-list { scrollbar-color: #4a4a52 transparent; }
.compact-match-list::-webkit-scrollbar { height: 8px; }
.compact-match-list::-webkit-scrollbar-track { background: transparent; }
.compact-match-list::-webkit-scrollbar-thumb { background: #4a4a52; border-radius: var(--radius-sm); }
body.compact-page .tab.active { background: var(--orange); color: var(--white); border-color: var(--orange); }
body.compact-page .tab.active .count { background: rgba(255, 255, 255, 0.22); color: var(--white); }

/* Emoji replacements: outline icons next to text on cards, compact rows and embeds. */
.badge { white-space: nowrap; }
.court-icon, .proposal-icon { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.court-icon .venue-icon, .proposal-icon .venue-icon { width: 14px; height: 14px; flex: 0 0 14px; color: #a9adb6; }
.compact-live, .compact-place, .paused-label { display: inline-flex; align-items: center; gap: 5px; }
.compact-live .venue-icon, .compact-place .venue-icon, .paused-label .venue-icon { width: 13px; height: 13px; flex: 0 0 13px; }
.compact-place .venue-icon { color: #8b8f98; }
.match-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.match-card-meta .venue-icon { width: 14px; height: 14px; flex: 0 0 14px; color: #8b8f98; }
.match-heading-label { display: inline-flex; align-items: center; gap: 10px; }
.match-heading-label .venue-icon { width: 22px; height: 22px; flex: 0 0 22px; color: #8b8f98; }
.bracket-champion-name .venue-icon { width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; color: var(--status-green); }
.overdue-warning .venue-icon { width: 13px; height: 13px; flex: 0 0 13px; }

.embed-match-foot { margin-top: 10px; font-size: 12px; color: #a9adb6; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.embed-match-foot .venue-icon { width: 14px; height: 14px; flex: 0 0 14px; color: #8b8f98; }
.embed-match-foot a { color: var(--white); }

.compact-place { justify-content: flex-end; text-align: right; }

/* Embeds: no page background of their own, so the host page shows through (cards and panels stay dark). */
html.embed, html.embed body, body.embed { background: transparent; }
html.embed::before, html.embed::after { display: none; }

.compact-date-category { min-width: max-content; }
.compact-card .badge { flex: 0 0 auto; }

/* Embeds: scheduled matches use the same grey border as every other match (the lime border stays on the main site). */
body.embed .match-card.status-PLANNED.has-date, body.embed .match-card.status-PLANNED.has-date:hover { border-color: rgba(255, 255, 255, 0.55); }
body.embed .match-card.status-PLANNED.has-date:hover { border-color: rgba(255, 255, 255, 0.8); }
body.embed .compact-card.status-PLANNED.has-date { border-color: rgba(255, 255, 255, 0.35); }
body.embed .compact-card.status-PLANNED.has-date:hover { border-color: rgba(255, 255, 255, 0.7); }


/* Compact lists keep one line per row and scroll sideways when narrow, but every row is as wide as the widest one. */
.compact-match-list { display: grid; grid-template-columns: minmax(max-content, 1fr); }
.compact-match-list > .compact-card { width: 100%; }
.compact-match-list > .match-list-heading { position: sticky; left: 0; justify-self: start; width: calc(100vw - 32px); }
body.embed .compact-match-list > .match-list-heading { width: calc(100vw - 20px); }

/* Where the browser supports it, the rows also share their column tracks so the pill, names, score and place line up from row to row. */
@supports (grid-template-columns: subgrid) {
  .compact-match-list { grid-template-columns: max-content minmax(160px, max-content) minmax(90px, max-content) minmax(120px, 1fr); }
  .compact-match-list > .match-list-heading { grid-column: 1 / -1; }
  .compact-match-list > .compact-card { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
}

/* Never clip or overflow the end of a row: the format and place columns are as wide as their text. */
.compact-card { grid-template-columns: max-content minmax(160px, auto) max-content minmax(max-content, 1fr); }
.compact-place { overflow: visible; text-overflow: clip; }
@supports (grid-template-columns: subgrid) {
  .compact-match-list { grid-template-columns: max-content minmax(160px, max-content) max-content minmax(max-content, 1fr); }
}

/* ---------- League group tables (/tables) ---------- */
.grp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.grp-tabs:empty { display: none; }
.grp-tabs .tab { font-size: 12px; padding: 8px 14px; }
.grp-tabs .tab.active { background: var(--orange); color: var(--white); border-color: var(--orange); }
.grp-card { background: #0a0a0a; border: 1px solid var(--orange); box-shadow: 0 0 18px rgba(255, 85, 0, 0.25); border-radius: var(--radius); padding: 6px 18px 10px; overflow-x: auto; }
.grp-head, .grp-row { display: grid; grid-template-columns: 34px minmax(150px, 1fr) 46px 56px 38px 38px 52px; align-items: center; gap: 6px; min-width: 430px; }
.grp-head { padding: 12px 0; color: #8b8f98; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.grp-row { color: var(--white); padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-weight: 700; font-size: 14px; }
.grp-row:last-child { border-bottom: none; }
.grp-head span:nth-child(n+3), .grp-row > span:nth-child(n+3) { text-align: right; }
.grp-pos { color: var(--orange); font-weight: 800; }
.grp-name { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--white); }
.grp-name:hover b { color: var(--orange); }
.grp-name b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-pts { font-weight: 800; font-size: 16px; }
.grp-row > span.dim { color: #a9adb6; font-weight: 600; }
.grp-row > span.pos { color: var(--status-green); }
.grp-row > span.neg { color: #ff7a6e; }
.grp-legend { color: #8b8f98; font-size: 12px; margin-top: 10px; line-height: 1.5; }
@media (max-width: 520px) {
  .grp-card { padding: 4px 12px 8px; }
  .grp-head, .grp-row { grid-template-columns: 22px minmax(0, 1fr) 36px 48px 44px; min-width: 0; gap: 4px; }
  .grp-head span:nth-child(5), .grp-head span:nth-child(6), .grp-row > span:nth-child(5), .grp-row > span:nth-child(6) { display: none; }
  .grp-row { font-size: 13px; }
}

/* /tables uses the Rankings page's spacing and sizes: pills, card padding, header and row padding. */
.grey-select {
  width: 100%;
  max-width: 420px;
  margin: 18px 0 14px;
  background: var(--fill-grey);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}
#tables-cats, #tables-phase, #tables-groups { margin: 0 0 14px; }
#tables-cats:empty, #tables-phase:empty, #tables-groups:empty { display: none; }
#tables-cats .tab.active, #tables-phase .tab.active, #tables-groups .tab.active { background: var(--orange); color: var(--white); border-color: var(--orange); }
.grp-title { font-weight: 800; font-size: 17px; letter-spacing: 0.06em; color: var(--green); text-transform: uppercase; margin: 0 0 12px; }
.grp-section + .grp-section .grp-title { margin-top: 56px; }
/* The gap under the pills equals the gap between two groups (the 14px pill margin collapses into it). */
.grp-section:first-child .grp-title { margin-top: 56px; }
.grp-title span { color: #8b8f98; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; margin-left: 8px; }
.grp-card.card { padding: 18px; overflow-x: auto; }
/* the seven columns fit the card (no sideways scrollbar): the name column takes what is left and is cut with an ellipsis when it is long */
.grp-card .grp-head, .grp-card .grp-row { display: grid; grid-template-columns: 28px minmax(90px, 1fr) 46px 62px 34px 34px 46px; align-items: center; gap: 6px; min-width: 0; }
.grp-card .grp-head { padding: 0 4px 8px; border-bottom: 1.5px solid rgba(255, 255, 255, 0.18); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--gray-dim); text-transform: uppercase; }
.grp-card .grp-row { padding: 10px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 14px; }
.grp-card .grp-row:last-child { border-bottom: none; }
.grp-card .grp-pos { text-align: center; font-weight: 800; font-size: 14px; }
.grp-card .grp-head span:first-child { text-align: center; }
.grp-card .grp-name b { font-size: 14px; }
.grp-card .grp-pts { font-size: 16px; }
#tables-legend { margin: 14px 0 0; }
@media (max-width: 520px) {
  .grp-card.card { padding: 14px 12px; }
  .grp-card .grp-head, .grp-card .grp-row { grid-template-columns: 34px minmax(0, 1fr) 40px 52px 44px; min-width: 0; gap: 6px; }
  .grp-card .grp-head span:nth-child(5), .grp-card .grp-head span:nth-child(6), .grp-card .grp-row > span:nth-child(5), .grp-card .grp-row > span:nth-child(6) { display: none; }
}

@media (max-width: 680px) { #tables-cats, #tables-phase, #tables-groups { margin: 0 -16px 14px; } }


/* ---------- Home: league overview ---------- */
.container.home { color: var(--white); }
.home-h1 { margin: 22px 0 6px; }
.home-sub { color: #d3d6dc; font-weight: 600; font-size: 14px; margin: 0; }
.home-sub b { color: var(--white); font-weight: 800; }
.home .empty-state { padding: 28px 12px; }

/* "My season": the logged-in player's own block at the top of the home page */
.home-mine { margin: 0 0 48px; }
.home-mine .home-sec-title { margin-bottom: 14px; }
.home-mine-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home-mine-grid > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.home-mine-cell { background: var(--fill-grey); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); padding: 16px 18px; color: var(--white); display: flex; flex-direction: column; min-width: 0; }
.home-mine-cell.next { background: #0a0a0a; border-color: var(--border-grey); }
a.home-mine-cell:hover, .home-mine-cell.linked:hover { border-color: var(--orange); }
a.home-mine-cell, .home-mine-cell.linked { position: relative; }
/* a small grey arrow in the corner of every tile that is a link */
a.home-mine-cell::after, .home-mine-cell.linked::after { content: '\2197\FE0E'; position: absolute; top: 13px; right: 15px; font-size: 15px; font-weight: 700; line-height: 1; color: #8d929c; pointer-events: none; z-index: 2; transition: color 0.15s; }
a.home-mine-cell:hover::after, .home-mine-cell.linked:hover::after { color: var(--orange); }
.home-mine-cover { position: absolute; inset: 0; border-radius: var(--radius); z-index: 1; }
.home-mine-cell.linked .home-mine-form { position: relative; z-index: 2; }
.home-mine-cell .k { color: #c3c7cf; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.home-mine-cell .v { font-size: 22px; font-weight: 800; line-height: 1.15; margin-top: 8px; }
/* numbers are as big as in the league-number tiles below (28px) */
.home-mine-cell .v.num { font-size: 28px; line-height: 1.1; margin-top: 6px; }
.home-mine-cell .v.dim { color: #c3c7cf; font-size: 15px; font-weight: 700; }
.home-mine-cell .v small { font-size: 13px; font-weight: 700; color: #c3c7cf; margin-left: 6px; }
.home-mine-cell .s { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: 13px; font-weight: 700; }
.home-mine-dim { color: #c3c7cf; font-size: 12px; font-weight: 600; }
.home-mine-move { font-size: 12px; font-weight: 800; }
.home-mine-move.up { color: var(--green); }
.home-mine-move.down { color: #ff7a6e; }
.home-mine-form { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
/* The number tiles: the big number on the left, a few lines beside it behind a thin divider. */
.home-mine-body { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex: 1; min-width: 0; }
.home-mine-body .big { font-size: 44px; font-weight: 800; line-height: 0.9; letter-spacing: -0.03em; flex-shrink: 0; }
.home-mine-body .big sup { font-size: 17px; font-weight: 800; vertical-align: top; position: relative; top: 3px; margin-left: 2px; letter-spacing: 0; }
.home-mine-body .side { display: flex; flex-direction: column; gap: 3px; min-width: 0; border-left: 1px solid rgba(255, 255, 255, 0.14); padding-left: 14px; }
.home-mine-body .side .of { font-size: 15px; font-weight: 800; }
.home-mine-body .side .grp { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-mine-body .side .pts { color: #c3c7cf; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-mine-body .side .row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.home-mine-body .side .row .grp { min-width: 0; }
.home-mine-body .side .row > * { flex-shrink: 0; }
.home-mine-body .side .row .grp { flex-shrink: 1; }
/* a narrow tile (two to a row on a phone): the lines stay beside the number behind the thin divider, a little smaller, and may wrap */
@media (max-width: 600px) {
  .home-mine-cell { padding: 14px 14px 14px 14px; }
  .home-mine-body { gap: 10px; }
  .home-mine-body .big { font-size: 36px; }
  .home-mine-body .big sup { font-size: 14px; top: 2px; }
  .home-mine-body .side { padding-left: 10px; gap: 2px; }
  .home-mine-body .side .of { font-size: 13px; line-height: 1.2; }
  .home-mine-body .side .grp, .home-mine-body .side .pts { font-size: 12px; line-height: 1.25; white-space: normal; }
  .home-mine-body .side .row { flex-wrap: wrap; gap: 0 6px; }
  /* the five squares of the form stay on one line in the narrow tile */
  .home-mine-form { gap: 4px; }
  .home-mine-form .form-square { width: 22px; height: 22px; font-size: 11px; border-radius: var(--radius-sm); }
}
.home-bar.mini { height: 6px; margin-top: 12px; }
.home-chip.live { background: var(--orange); color: var(--white); }
@media (max-width: 900px) {
  .home-mine { margin-bottom: 40px; }
  .home-mine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-mine-cell.next { grid-column: 1 / -1; }
  .home-mine-grid > :last-child:nth-child(3n + 1) { grid-column: auto; }
  .home-mine-grid.rest-odd > :last-child { grid-column: 1 / -1; }
  .home-mine-grid > .home-mine-cell.iq-tile { grid-column: 1 / -1; }
  .home-mine-grid.mid-odd > :nth-last-child(2) { grid-column: 1 / -1; }
}

/* season timeline: finished seasons greyed out, the running one highlighted, upcoming ones outlined */
/* The gap below the timeline is a full section gap (48px, 40px on tablet/phone), like between the sections further down. */
.home-tl-wrap { position: relative; margin: 0 0 48px; --fl: 0px; --fr: 0px; }
@media (max-width: 900px) { .home-tl-wrap { margin-bottom: 40px; } }
.home-tl-wrap.can-prev { --fl: 40px; }
.home-tl-wrap.can-next { --fr: 40px; }
.home-timeline { display: flex; gap: 12px; overflow-x: auto; padding: 2px 0 0; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
.home-timeline::-webkit-scrollbar { display: none; }
.home-timeline.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.home-timeline.dragging a { pointer-events: none; }
.home-tl-nav { display: none; position: absolute; top: calc(50% + 12px); transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-grey); background: #0a0a0a; color: var(--white); font-size: 22px; line-height: 1; font-family: inherit; cursor: pointer; padding: 0 0 3px; }
.home-tl-nav:hover { border-color: var(--orange); color: var(--orange); }
.home-tl-nav.prev { left: -6px; }
.home-tl-nav.next { right: -6px; }
@media (hover: hover) {
  .home-tl-wrap.can-prev .home-tl-nav.prev, .home-tl-wrap.can-next .home-tl-nav.next { display: block; }
  /* no scrollbar: the arrow buttons, dragging with the mouse and the touch swipe move the row */
  .home-timeline { cursor: grab; }
}
.home-tl { position: relative; flex: 1 0 190px; min-width: 190px; padding-top: 22px; color: var(--white); scroll-snap-align: center; }
.home-tl::before { content: ''; position: absolute; top: 6px; left: 0; right: -12px; height: 2px; background: rgba(255, 255, 255, 0.2); }
.home-tl:last-child::before { right: 0; }
.home-tl::after { content: ''; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: #6b6f78; box-shadow: 0 0 0 3px #100e0b; }
.home-tl.now::before { background: linear-gradient(90deg, var(--green) var(--p), rgba(255, 255, 255, 0.2) var(--p)); }
.home-tl.now::after { background: var(--orange); }
.home-tl.future::before { background: repeating-linear-gradient(90deg, var(--border-grey) 0 6px, transparent 6px 12px); }
.home-tl.future::after { background: #100e0b; box-shadow: inset 0 0 0 2px var(--border-grey), 0 0 0 3px #100e0b; }
.home-tl-body { background: var(--fill-grey); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); padding: 14px 16px; height: 100%; }
.home-tl.past .home-tl-body { background: rgba(55, 55, 62, 0.45); opacity: 0.6; }
.home-tl.past .home-tl-name { color: #c3c7cf; }
.home-tl.now .home-tl-body { background: #0a0a0a; border-color: var(--green); box-shadow: 0 0 18px rgba(178, 250, 6, 0.25); }
.home-tl.future .home-tl-body { background: #0a0a0a; border: 1px solid var(--orange); box-shadow: none; }
a.home-tl:hover .home-tl-body { border-color: var(--border-grey); }
a.home-tl.now:hover .home-tl-body { border-color: var(--green); }
a.home-tl.future:hover .home-tl-body { border-color: var(--orange); }
.home-tl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(255, 255, 255, 0.1); color: #c3c7cf; }
.home-tl.now .home-tl-chip { background: var(--orange); color: var(--white); }
.home-tl.future .home-tl-chip { background: transparent; border: 1px solid var(--border-grey); color: var(--white); }
.home-tl-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--white); animation: pulse 1.6s infinite; }
.home-tl-name { font-weight: 800; font-size: 15px; line-height: 1.25; margin-top: 10px; }
.home-tl-range { color: #c3c7cf; font-size: 12px; font-weight: 600; margin-top: 4px; }

/* progress + league numbers: grey panels */
.home-season { background: var(--fill-grey); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); padding: 16px 20px; }
.home-season-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.home-season-top b { font-weight: 800; letter-spacing: 0.02em; }
.home-season-top b .pct { font-style: normal; color: var(--green); margin-left: 12px; }
.home-season-top span { color: #d3d6dc; font-weight: 700; font-size: 13px; }
.home-phases { display: grid; gap: 6px; margin-top: 14px; }
.home-phases .home-bar { margin-top: 0; height: 10px; }
.home-phase .lbl { margin-top: 8px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.home-phase .lbl b { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.home-phase .lbl span { color: #c3c7cf; font-size: 11px; font-weight: 600; white-space: nowrap; }
.home-phase svg { width: 13px; height: 13px; flex: 0 0 13px; }
.home-phase.po .home-bar { background: rgba(255, 85, 0, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 85, 0, 0.55); }
.home-phase.po .home-bar i { background: var(--orange); }
.home-phase.po .lbl b { color: var(--orange); }
.home-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); overflow: hidden; margin-top: 12px; }
.home-bar i { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.home-stats, .home-movers { display: grid; gap: 12px; margin-top: 14px; }
.home-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-stat, .home-mv { background: var(--fill-grey); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); padding: 16px 18px; }
.home-stat .k, .home-mv .k { color: #c3c7cf; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.home-stat .v { font-size: 28px; font-weight: 800; line-height: 1.1; margin-top: 6px; }
.home-stat .s { color: #c3c7cf; font-size: 12px; font-weight: 600; margin-top: 4px; }
.home-movers { margin-top: 0; }
.home-movers.n1 { grid-template-columns: 1fr; }
.home-movers.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-movers.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-mv .nm { font-weight: 800; font-size: 16px; margin-top: 6px; }
.home-mv .d { font-weight: 800; font-size: 13px; margin-top: 3px; color: #d3d6dc; }
.home-mv .d.up { color: var(--green); }
.home-mv .d.down { color: #ff7a6e; }

/* sections: white uppercase title like the other pages' headings, 48px apart */
.home-sec { margin-top: 48px; }
.home-sec-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.home-sec-title .l { display: flex; align-items: baseline; font-weight: 800; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); }
.home-sec-title .l span { color: #c3c7cf; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; margin-left: 8px; }
.home-sec-title a { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--orange); white-space: nowrap; }
.home-sec-title a:hover { color: var(--white); }
#home-cats { margin: 0 0 18px; }
#home-cats .tab.active { background: var(--orange); color: var(--white); border-color: var(--orange); }
.home-sec > .home-sec-title + .tabs { margin-top: 0; }

.home-cols, .home-cols-3 { display: grid; gap: 40px 16px; }
.home-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
.home-col { display: flex; flex-direction: column; min-width: 0; }
.home-col > .home-card { flex: 1; }
/* the heading of a column of the ranking row: the note sits under the title (an empty note keeps its line, so the cards stay level) */
.home-col-title { margin-bottom: 2px; }
.home-col-sub { min-height: 16px; margin: 0 0 12px; color: #c3c7cf; font-size: 12px; font-weight: 600; line-height: 16px; }
@media (max-width: 700px) { .home-col-sub:empty { display: none; } }
.home-grp-t { font-weight: 800; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); margin: 0 0 14px; }

/* black cards, thin orange border (no glow) */
.home-card { background: #0a0a0a; border: 1px solid var(--border-grey); border-radius: var(--radius); padding: 16px 18px; color: var(--white); min-width: 0; }
.home-empty { color: #c3c7cf; font-weight: 600; font-size: 14px; padding: 12px 4px; }

.home-t-head, .home-t-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 52px; align-items: center; gap: 10px; }
.home-t-head.rank, .home-t-row.rank { grid-template-columns: 34px minmax(0, 1fr) 48px 56px; }
.home-t-head { padding: 0 4px 8px; border-bottom: 1.5px solid rgba(255, 255, 255, 0.18); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: #c3c7cf; text-transform: uppercase; }
.home-t-row { padding: 10px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 14px; font-weight: 700; }
.home-t-row:last-child { border-bottom: none; }
.home-t-head span:first-child, .home-t-row .pos { text-align: center; }
.home-t-head span:last-child, .home-t-row .pts { text-align: right; }
.home-t-head.rank span:nth-child(3) { text-align: right; }
.home-t-row .pos { color: var(--orange); font-weight: 800; }
.home-t-row .nm { font-weight: 800; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-t-row a.nm:hover { color: var(--orange); }
.home-t-row .pts { font-weight: 800; font-size: 15px; }
.home-t-row.lead .nm, .home-t-row.lead .pts { color: var(--green); }
.home-t-row .mv { text-align: right; font-weight: 800; font-size: 13px; }
.home-t-row .mv.up { color: var(--green); }
.home-t-row .mv.down { color: #ff7a6e; }
.home-t-row .mv.none { color: #c3c7cf; }

.home-m-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: var(--white); }
.home-m-row:last-child { border-bottom: none; }
.home-m-row:hover .n { color: var(--orange); }
.home-m-row .n { font-weight: 700; font-size: 14px; line-height: 1.35; }
.home-m-row .n b { font-weight: 800; }
.home-m-row .w { color: var(--green); font-weight: 800; }
/* the second line (place · date) ends with the camera / video icon pills: small, corners in proportion to the other pills */
.home-m-row .s { display: flex; align-items: center; gap: 8px; color: #c3c7cf; font-size: 12px; font-weight: 600; margin-top: 2px; }
/* corner = the 8px of the date chip scaled to the pill's height, so the proportions match */
.home-m-row .s .badge { flex: 0 0 auto; padding: 2px 6px; line-height: 1; border-radius: 5px; }
.home-m-row .s .badge .venue-icon { width: 11px; height: 11px; flex-basis: 11px; }
.home-m-row .r { font-weight: 800; font-size: 15px; text-align: right; white-space: nowrap; }
.home-m-row .r small { display: block; color: #c3c7cf; font-size: 11px; font-weight: 700; }
.home-chip { display: inline-block; padding: 5px 11px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.home-chip.date { border: 1px solid var(--status-green); color: var(--status-green); }
.home-chip.btn { background: var(--fill-grey); color: var(--white); }

/* live line */
.home-sec-live { margin-top: 32px; }
.home-live { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #0a0a0a; border: 1px solid var(--border-grey); border-radius: var(--radius); padding: 12px 18px; font-size: 14px; font-weight: 700; color: var(--white); }
.home-live .p { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--radius-sm); background: var(--orange); color: var(--white); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.home-live .p i { width: 8px; height: 8px; border-radius: 50%; background: var(--white); animation: pulse 1.6s infinite; }
.home-live .item { color: var(--white); }
.home-live .item:hover { color: var(--orange); }
.home-live .item b { font-weight: 800; }
.home-live .sep { color: #c3c7cf; }
.home-live .go { margin-left: auto; color: var(--orange); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }

@media (max-width: 900px) {
  .home-sec { margin-top: 40px; }
  .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-movers.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 680px) { #home-cats { margin: 0 -16px 18px; } }
@media (max-width: 640px) {
  .home-cols { grid-template-columns: 1fr; }
  .home-movers.n2, .home-movers.n3 { grid-template-columns: 1fr; }
}

/* Backend → Seasons: a season is a foldable card with a one-line summary */
.season-admin-card { padding: 0; }
.sa-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 14px 18px; cursor: pointer; list-style: none; user-select: none; }
.sa-sum::-webkit-details-marker { display: none; }
.sa-chev { flex: 0 0 18px; color: var(--gray); transition: transform 0.15s ease; }
.season-admin-card[open] > .sa-sum .sa-chev { transform: rotate(90deg); }
.season-admin-card[open] > .sa-sum { border-bottom: 1px solid var(--gray-light); }
.sa-name { font-weight: 800; font-size: 16px; }
.sa-dates { color: var(--gray); font-size: 13px; font-weight: 600; }
.sa-chip { padding: 3px 9px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: var(--gray-light); color: var(--gray); }
.sa-chip.now { background: var(--orange); color: var(--white); }
.sa-chip.future { background: transparent; border: 1px solid var(--gray-dim); color: var(--charcoal); }
.sa-count { margin-left: auto; color: var(--gray); font-size: 12px; font-weight: 600; }
.sa-body { padding: 16px 18px 18px; }
.sa-bar { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; font-size: 12px; font-weight: 700; color: var(--gray-dim); }
.sa-bar button { background: none; border: none; padding: 0; font: inherit; color: var(--orange); cursor: pointer; text-decoration: underline; }

/* "Did you mean?" dialog when a typed player name looks like existing players */
.similar-block { margin: 0 0 16px; }
.similar-typed { font-weight: 800; margin-bottom: 8px; }
.similar-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px; border: 1.5px solid var(--gray-light); border-radius: var(--radius-md); cursor: pointer; font-weight: 700; font-size: 14px; }
.similar-opt:hover { border-color: var(--orange); }
.similar-opt input { accent-color: var(--orange); width: 18px; height: 18px; flex: 0 0 18px; }
.similar-opt.new { border-style: dashed; color: var(--gray); }

/* the logged-in player's own name (see highlightMyName in common.js) */
body:not(.embed-light) .rank-name.is-me,
body:not(.embed-light) .grp-name.is-me,
body:not(.embed-light) .home-t-row a.nm.is-me { color: var(--green); }

/* season / category line under a bracket's title */
.bracket-title-sub { display: block; font-size: 14px; font-weight: 600; color: #c3c7cf; margin-top: 6px; letter-spacing: 0; }

/* Backend → Seasons: players of a group and the schedule */
.sg-panel { padding: 12px 0 14px 12px; border-bottom: 1px solid var(--gray-light); background: rgba(0, 0, 0, 0.025); }
.sg-panel[hidden] { display: none; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.sg-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--gray-light); border-radius: var(--radius-sm); padding: 5px 6px 5px 12px; font-size: 13px; font-weight: 700; }
.sg-chip.out { opacity: 0.55; text-decoration: line-through; }
.sg-chip.out em { text-decoration: none; font-style: normal; font-size: 11px; font-weight: 600; margin-left: 2px; }
.sg-link { background: none; border: none; padding: 0; font: inherit; font-size: 11px; font-weight: 700; color: var(--orange); cursor: pointer; text-decoration: underline; }
.sg-x { background: none; border: none; font-size: 17px; line-height: 1; color: var(--gray); cursor: pointer; padding: 0 6px; }
.sg-x:hover { color: var(--danger); }
.sg-empty { color: var(--gray); font-size: 13px; }
.sg-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.sg-chooser { margin-top: 10px; }
.sg-choose-title { font-weight: 800; font-size: 13px; margin-bottom: 8px; }
.sg-choose-buttons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sg-schedule { margin-top: 22px; padding-top: 16px; border-top: 2px solid var(--gray-light); }
.sg-sched-title { font-weight: 800; font-size: 16px; }
.sg-sched-note { color: var(--gray); font-size: 13px; line-height: 1.5; margin: 4px 0 12px; max-width: 720px; }
.sg-sched-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.sg-sched-actions label { font-size: 12px; font-weight: 700; display: flex; flex-direction: column; gap: 4px; }
.sg-preview { margin-top: 14px; }
.sg-total { font-weight: 800; margin-bottom: 10px; }
.sg-group { border: 1.5px solid var(--gray-light); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 10px; }
.sg-group-head { font-size: 13px; margin-bottom: 8px; }
.sg-cat { font-size: 11px; font-weight: 800; color: var(--orange); border: 1px solid var(--orange); border-radius: var(--radius-sm); padding: 1px 8px; }
.sg-round { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; padding: 4px 0; border-top: 1px solid var(--gray-light); font-size: 13px; }
.sg-rn { font-weight: 800; min-width: 62px; }
.sg-pairs { display: flex; gap: 6px 14px; flex-wrap: wrap; }
.sg-pair.new { color: var(--orange-dark); font-weight: 700; }
.sg-rest { color: var(--gray); font-size: 12px; margin-left: auto; }

/* "Load more" under the matches list */
.load-more-wrap { text-align: center; margin: 28px 0 8px; }
.load-more-btn { background: var(--fill-grey); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); padding: 13px 26px; font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
.load-more-btn:hover { border-color: rgba(255, 255, 255, 0.55); }

/* ---------- Schedule page (/harmonogram) ---------- */
#sch-years { margin: 0 0 16px; }
#sch-years .tab.active { background: var(--orange); color: var(--white); border-color: var(--orange); }
.sch-filters { display: flex; gap: 10px 12px; flex-wrap: wrap; margin: 0 0 22px; }
.sch-filters .grey-select { flex: 1 1 200px; max-width: 320px; margin: 0; }

/* year timeline: the twelve months across, every event a bar (leagues) or a marker (tournaments) */
.sch-tl-wrap { background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); padding: 18px 20px 14px; overflow-x: auto; margin: 0 0 8px; }
.sch-tl { min-width: 860px; position: relative; }
.sch-tl-head, .sch-tl-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; }
.sch-tl-months { display: grid; grid-template-columns: repeat(12, 1fr); }
.sch-tl-months span { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #8b8f98; padding: 0 0 10px 6px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.sch-tl-row { padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.sch-tl-label { padding-right: 14px; min-width: 0; }
.sch-tl-label b { display: block; font-size: 14px; font-weight: 800; line-height: 1.2; color: var(--white); }
.sch-tl-label small { color: #a9adb6; font-size: 11px; font-weight: 600; }
.sch-tl-track { position: relative; height: 34px; background: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 12 - 1px), rgba(255, 255, 255, 0.08) calc(100% / 12 - 1px), rgba(255, 255, 255, 0.08) calc(100% / 12)); }
.sch-bar { position: absolute; top: 4px; height: 26px; border-radius: var(--radius-sm); display: flex; align-items: center; padding: 0 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; background: var(--green); color: #0a0a0a; }
.sch-bar span { position: relative; }
.sch-bar.past { background: #4a4a52; color: #d3d6dc; }
.sch-bar.now { box-shadow: 0 0 14px rgba(178, 250, 6, 0.4); }
.sch-bar.now i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(10, 10, 10, 0.38); }
.sch-bar.tour { background: var(--orange); min-width: 12px; padding: 0; }
.sch-bar.tour.past { opacity: 0.5; }
.sch-bar-label { position: absolute; top: 9px; font-size: 11px; font-weight: 700; color: #c3c7cf; white-space: nowrap; }
.sch-tl-over { position: absolute; top: 0; bottom: 0; left: 210px; right: 0; pointer-events: none; }
.sch-tl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--orange); z-index: 2; }
.sch-tl-today em { position: absolute; bottom: -2px; left: 6px; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); }
.sch-tl-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; font-size: 11px; font-weight: 700; color: #c3c7cf; text-transform: uppercase; letter-spacing: 0.04em; }
.sch-tl-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; }
.sch-tl-legend .l { background: var(--green); }
.sch-tl-legend .t { background: var(--orange); }
.sch-tl-legend .p { background: #4a4a52; }
.sch-tl-legend .n { background: var(--orange); width: 2px; border-radius: 0; margin-right: 8px; }

/* the list: one black card per month with an orange glow, a row per event (like the league tables) */
.sch-month-title { font-weight: 800; font-size: 17px; letter-spacing: 0.06em; color: var(--white); text-transform: uppercase; margin: 36px 0 12px; }
.sch-card { background: #0a0a0a; border: 1px solid var(--orange); box-shadow: 0 0 18px rgba(255, 85, 0, 0.25); border-radius: var(--radius); padding: 4px 22px; }
.sch-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.sch-row:last-child { border-bottom: none; }
.sch-row.past .sch-info, .sch-row.past .sch-go { opacity: 0.55; }
.sch-date { color: var(--white); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; line-height: 1.1; }
.sch-date small { display: block; color: #c3c7cf; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }
.sch-name { color: var(--white); font-weight: 800; font-size: 18px; line-height: 1.2; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.sch-sub { color: #a9adb6; font-weight: 600; font-size: 13px; margin-top: 5px; }
.sch-sub b { color: var(--white); font-weight: 700; }
.sch-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid var(--green); color: var(--green); }
.sch-tag.tour { border-color: var(--orange); color: var(--orange); }
.sch-tag.now { background: var(--green); border-color: var(--green); color: #0a0a0a; }
.sch-row.link { color: inherit; text-decoration: none; cursor: pointer; }
.sch-row.link:hover { background: rgba(255, 255, 255, 0.04); }
.sch-go { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.35); color: var(--white); font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.sch-row.link:hover .sch-go { border-color: var(--orange); color: var(--orange); }
.sch-row .home-bar.mini { margin-top: 10px; max-width: 360px; }
@media (max-width: 700px) {
  .sch-row { grid-template-columns: 1fr; gap: 10px; }
  .sch-row .sch-go { justify-self: end; }
  .sch-card { padding: 4px 16px; }
  .sch-tl-wrap { padding: 14px 14px 12px; }
}

/* "Season only" bar above the matches list (see SEASON_FILTER in app.js) */
.season-filter-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--fill-grey); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); padding: 10px 16px; margin: 0 0 18px; color: #c3c7cf; font-size: 13px; font-weight: 600; }
.season-filter-note b { color: var(--white); font-weight: 800; }
.season-filter-note a { color: var(--orange); font-weight: 800; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; }

/* ---------- Season page (/season/<slug>) ---------- */
.sv { color: var(--white); padding-bottom: 60px; }
.sv-crumb { margin: 22px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8b8f98; }
.sv-crumb a { color: #8b8f98; text-decoration: none; }
.sv-title { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.1; text-transform: none; letter-spacing: -0.01em; }
.sv-chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 0; }
.sv-chip { padding: 4px 10px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid transparent; }
.sv-chip.l { border-color: var(--green); color: var(--green); }
.sv-chip.t { border-color: var(--orange); color: var(--orange); }
.sv-chip.now { background: var(--orange); color: var(--white); }
.sv-chip.w { border-color: rgba(255, 255, 255, 0.35); color: var(--white); }
.sv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 0; }
.sv-tile { background: var(--fill-grey); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); padding: 14px 16px; }
.sv-tile .k { color: #c3c7cf; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sv-tile .v { font-size: 26px; font-weight: 800; line-height: 1.1; margin-top: 6px; }
.sv-tile .v.sm { font-size: 20px; padding-top: 4px; }
.sv-tile .v small { display: block; font-size: 12px; font-weight: 700; color: #c3c7cf; margin-top: 4px; }
.sv-sec { margin: 0; }
#sv-tabs { margin: 48px 0 48px; }
/* the tabs of the season / tournament page: black with white letters and an orange border, the open one filled orange */
#sv-tabs .tab { background: var(--ink); color: var(--white); border: 1px solid var(--orange); box-shadow: none; }
#sv-tabs .tab:hover { background: #1c1c20; }
#sv-tabs .tab.active { background: var(--orange); color: var(--white); border-color: var(--orange); }
#sv-tabs .tab small { color: rgba(255, 255, 255, 0.65); font-weight: 700; margin-left: 6px; }
.sv-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.sv-sec-h h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); }
.sv-sec-h h2 em { font-style: normal; color: #8b8f98; font-size: 12px; letter-spacing: 0; margin-left: 8px; }
.sv-sec-h a { color: var(--orange); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.sv-sec-h a:hover { color: var(--white); }
.sv-empty { color: #8b8f98; font-weight: 600; font-size: 13px; padding: 16px 0; }
.sv-note { color: #8b8f98; font-size: 12px; font-weight: 600; margin: 12px 0 0; }
#sv-cats { margin: 0 0 48px; align-items: center; }
.sv-more { margin-left: auto; color: var(--orange); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.sv-more:hover { color: var(--white); }
.sv-rounds { align-items: center; }
#sv-cats .tab.active { background: var(--orange); color: var(--white); border-color: var(--orange); }
#sv-cats .tab small { color: rgba(255, 255, 255, 0.65); font-weight: 700; margin-left: 6px; }
.sv-gl { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 48px 16px; }
.sv-gl .grp-section .grp-title { margin-top: 0; }
.sv-rounds { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 48px; }
.sv-round { padding: 8px 12px; border-radius: var(--radius-sm); background: var(--fill-grey); color: var(--white); font-family: inherit; font-size: 12px; font-weight: 800; border: 1px solid transparent; cursor: pointer; text-align: center; line-height: 1.25; }
.sv-round small { display: block; color: #a9adb6; font-weight: 600; font-size: 10px; }
.sv-round.done { opacity: 0.55; }
.sv-round.cur { background: var(--orange); border-color: var(--orange); opacity: 1; }
.sv-round.cur small { color: rgba(255, 255, 255, 0.85); }
.sv-bracket { margin: 0 0 48px; }
.sv-gallery-btn { display: inline-block; padding: 12px 20px; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.35); color: var(--white); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.sv-gallery-btn:hover { border-color: var(--orange); }
@media (max-width: 900px) { #sv-cats, .sv-rounds { margin-bottom: 40px; } #sv-tabs { margin-bottom: 40px; } .sv-head { margin-bottom: 40px; } #sv-tabs { margin-top: 40px; } .sv-gl { row-gap: 40px; } .sv-bracket { margin-bottom: 40px; } }
@media (max-width: 700px) { .sv-title { font-size: 26px; } .sv-gl { grid-template-columns: 1fr; } }

/* season page: registration + payment buttons and the registration form */
.sv-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.sv-btn { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: var(--radius-sm); font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.sv-btn.primary { background: var(--orange); color: var(--white); }
.sv-btn.primary:hover { background: var(--orange-dark); }
.sv-btn.pay { background: transparent; border-color: var(--green); color: var(--green); }
.sv-btn.pay:hover { background: var(--green); color: #0a0a0a; }
.sv-btn.off { background: var(--fill-grey); color: #8b8f98; border-color: rgba(255, 255, 255, 0.1); cursor: default; }
.sv-reg h3 { margin: 0 0 2px; }
.sv-reg-season { color: var(--gray); font-weight: 700; font-size: 13px; margin: 0 0 16px; }
.sv-reg .field small { color: var(--gray); }
.sv-reg-error { color: var(--danger); font-weight: 700; font-size: 13px; min-height: 0; margin: 0 0 10px; }
.sv-reg-error:empty { display: none; }
.sv-reg-note { color: var(--gray); font-size: 12px; margin: 0 0 12px; }
.sv-reg-similar { margin: 0 0 12px; }
.sv-reg-similar:empty { display: none; }
.sv-reg-similar-title { font-weight: 800; font-size: 13px; margin: 0 0 8px; }
.sv-reg-opt { display: block; width: 100%; text-align: left; font-family: inherit; font-size: 14px; font-weight: 700; padding: 10px 12px; margin: 0 0 6px; border: 1.5px solid var(--gray-light); border-radius: var(--radius-md); background: var(--white); cursor: pointer; }
.sv-reg-opt:hover { border-color: var(--orange); }
.sv-reg-opt.new { color: var(--gray); font-weight: 600; }
@media (max-width: 700px) { .sv-actions { margin-left: 0; width: 100%; margin-top: 2px; } .sv-btn { padding: 6px 12px; font-size: 11px; border-radius: var(--radius-sm); } }

/* season page: basic info, rounds, players */
.sv-about { display: grid; gap: 14px; }
.sv-about-lead { background: var(--fill-grey); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); padding: 22px 26px; }
.sv-about-lead p { margin: 0; color: #e6e8ec; font-size: 15px; font-weight: 500; line-height: 1.7; }
.sv-about-lead p + p { margin-top: 12px; }
.sv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.sv-fact { background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; }
.sv-fact span { color: #c3c7cf; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sv-fact b { color: var(--white); font-size: 20px; font-weight: 800; line-height: 1.15; }
.sv-round { position: relative; overflow: hidden; display: flex; align-items: baseline; gap: 8px; padding: 9px 14px 11px; }
.sv-round b { font-size: 13px; font-weight: 800; }
.sv-round small { display: inline; margin: 0; color: #a9adb6; font-weight: 700; font-size: 11px; }
.sv-round::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p, 0%); background: var(--green); }
.sv-round.cur::after { background: var(--white); }
.sv-rg, .sv-pg { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.sv-rg-card, .sv-pcard { background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); padding: 6px 16px 8px; min-width: 0; }
.sv-rg-h, .sv-pcard-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 0 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.sv-rg-h b, .sv-pcard-h b { color: var(--green); font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.sv-rg-h span, .sv-pcard-h span { color: #8b8f98; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.sv-rg-m { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: var(--white); text-decoration: none; }
.sv-rg-m:last-child { border-bottom: none; }
.sv-rg-m .pl { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.3; }
.sv-rg-m .pl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-rg-m .pl .w { color: var(--green); }
.sv-rg-m .rs { font-size: 15px; font-weight: 800; white-space: nowrap; }
.sv-rg-m .rs.date { font-size: 11px; font-weight: 800; color: var(--green); border: 1px solid var(--green); border-radius: var(--radius-sm); padding: 3px 8px; }
.sv-rg-m .rs.live { font-size: 11px; background: var(--orange); border-radius: var(--radius-sm); padding: 3px 8px; }
.sv-rg-m .rs.tbd { color: #6e727c; }
.sv-rg-m:hover .pl span:first-child { color: var(--orange); }
.sv-cat-h { display: flex; align-items: baseline; gap: 10px; font-size: 17px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 14px; }
.sv-cat-h em { font-style: normal; color: #c3c7cf; font-size: 12px; letter-spacing: 0; }
.sv-pg + .sv-cat-h { margin-top: 48px; }
.sv-pp { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; font-weight: 700; }
.sv-pp:last-child { border-bottom: none; }
.sv-pp a { color: var(--white); text-decoration: none; }
.sv-pp a:hover { color: var(--orange); }
.sv-pp em { font-style: normal; color: #8b8f98; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin-left: 6px; }
.sv-pp .ok { color: var(--green); font-weight: 800; }
.sv-pp .no { color: #6e727c; }
@media (max-width: 900px) { .sv-pg + .sv-cat-h { margin-top: 40px; } }

/* season logos: the season page header and the schedule rows */
.sv-head { display: block; margin-bottom: 48px; }
.sv-head.with-logo { display: flex; align-items: center; gap: 22px; }
.sv-head-main { flex: 1; min-width: 0; }
.sv-logo { width: 112px; height: auto; flex: 0 0 auto; }
.sch-info.with-logo { display: flex; align-items: center; gap: 16px; }
.sch-text { min-width: 0; flex: 1; }
.sch-logo { width: 64px; height: auto; flex: 0 0 auto; }
@media (max-width: 700px) { .sv-logo { width: 72px; } .sv-head.with-logo { gap: 14px; } .sch-logo { width: 52px; } }

/* description text (rich) inside the lead card */
.sv-about-lead strong, .sv-about-lead b { color: var(--white); font-weight: 800; }
.sv-about-lead a { color: var(--orange); text-decoration: underline; }
.sv-about-lead ul, .sv-about-lead ol { margin: 12px 0 0 22px; padding: 0; color: #e6e8ec; font-size: 15px; line-height: 1.7; }
.sv-about-lead h3 { margin: 18px 0 6px; font-size: 16px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); }
.sv-about-lead h3:first-child { margin-top: 0; }
.sv-about-lead blockquote { margin: 12px 0 0; padding-left: 14px; border-left: 3px solid var(--orange); color: #c3c7cf; }
.sv-about-lead > * + * { margin-top: 12px; }
.sv-about-lead > ul, .sv-about-lead > ol { margin-top: 12px; }

/* Rozpis: filters and one line per match */
.sv-filters { display: grid; gap: 14px; margin: 0 0 48px; }
.sv-filters .sv-rounds, .sv-filters .tabs { margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; align-items: center; }
.sv-filters .tabs .tab { white-space: nowrap; flex: 0 0 auto; }
.sv-filters .sv-round { flex: 0 0 auto; }
#sv-sched-cats .tab.active, #sv-sched-groups .tab.active { background: var(--orange); color: var(--white); border-color: var(--orange); }
.sv-rl { display: grid; gap: 28px; }
.sv-rl-h { color: #8b8f98; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 16px 0 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.sv-rl-h b { color: var(--green); }
.sv-rl-m { display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: var(--white); text-decoration: none; font-size: 14px; font-weight: 700; }
.sv-rl-m:last-child { border-bottom: none; }
.sv-rl-m .a { text-align: right; }
.sv-rl-m .a, .sv-rl-m .b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-rl-m .w { color: var(--green); }
.sv-rl-m .rs { justify-self: center; font-size: 15px; font-weight: 800; white-space: nowrap; }
.sv-rl-m .rs.date { font-size: 11px; color: var(--green); border: 1px solid var(--green); border-radius: var(--radius-sm); padding: 3px 8px; }
.sv-rl-m .rs.live { font-size: 11px; background: var(--orange); border-radius: var(--radius-sm); padding: 3px 8px; }
.sv-rl-m .rs.tbd { color: #6e727c; }
.sv-rl-m:hover .a, .sv-rl-m:hover .b { color: var(--orange); }
.sv-rl-m:hover .w { color: var(--green); }
@media (max-width: 700px) { .sv-rl-m { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); gap: 8px; font-size: 13px; } .sv-rl-m .rs.date { font-size: 10px; padding: 2px 5px; } }

/* Hráči: one numbered table per category */
.sv-pt { display: grid; gap: 48px; }
.sv-ptable { background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); padding: 4px 22px 10px; }
.sv-ptable-t { padding: 16px 0 10px; font-size: 17px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.sv-ptable-t em { font-style: normal; color: #c3c7cf; font-size: 12px; letter-spacing: 0; margin-left: 10px; }
.sv-pr { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 14px; font-weight: 700; }
.sv-pr:last-child { border-bottom: none; }
.sv-pr.head { color: #8b8f98; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, 0.18); padding-top: 4px; }
.sv-pr .n { color: var(--orange); font-weight: 800; }
.sv-pr.head .n { color: #8b8f98; }
.sv-pr a { color: var(--white); text-decoration: none; }
.sv-pr a:hover { color: var(--orange); }
.sv-pr .fee { text-align: right; min-width: 90px; }
.sv-pr .ok { color: var(--green); font-weight: 800; }
.sv-pr .no { color: #6e727c; }
@media (max-width: 900px) { .sv-filters { margin-bottom: 40px; } .sv-pt { gap: 40px; } }

/* backend: the description editor */
.rte-toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
.rte-toolbar button { font-family: inherit; font-size: 12px; font-weight: 700; padding: 5px 10px; border: 1.5px solid #ddd; border-radius: var(--radius-sm); background: #fff; color: #111; cursor: pointer; }
.rte-toolbar button:hover { border-color: var(--orange); }
.rte { min-height: 140px; max-height: 420px; overflow-y: auto; margin-top: 6px; padding: 10px 12px; border: 1.5px solid #ddd; border-radius: var(--radius-sm); background: #fff; color: #111; font-size: 14px; font-weight: 500; line-height: 1.6; }
.rte:focus { outline: none; border-color: var(--orange); }
.rte p { margin: 0 0 8px; } .rte h3 { margin: 10px 0 4px; font-size: 15px; } .rte ul, .rte ol { margin: 4px 0 8px 22px; } .rte a { color: var(--orange); }

/* Rozpis, all rounds: a heading per round */

/* season logos on the home page: next to the heading and on the timeline cards */
.home-head { display: flex; align-items: center; justify-content: flex-start; gap: 22px; margin: 22px 0 48px; } /* 48px: the same gap as between the blocks below */
.home-head-text { min-width: 0; }
.home-head .home-h1 { margin: 0 0 6px; }
.home-head-logo { height: 92px; width: auto; flex: 0 0 auto; }
.home-tl-body { position: relative; }
.home-tl-logo { position: absolute; top: 12px; right: 12px; width: 46px; height: auto; }
@media (max-width: 900px) { .home-head { margin-bottom: 40px; } }
@media (max-width: 700px) { .home-head-logo { height: 64px; } .home-tl-logo { width: 40px; } }

/* season page, phone: every row of buttons runs to the screen edge like the other pages' tab rows, so the first button lines up with the content */
@media (max-width: 680px) {
  #sv-tabs, #sv-cats, #sv-pcats, .sv-filters .tabs, .sv-filters .sv-rounds { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}

/* Hráči: the category filter above the tables (like the one on the Tabuľky tab) */
#sv-pcats { margin: 0 0 48px; align-items: center; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
#sv-pcats .tab { white-space: nowrap; flex: 0 0 auto; }
#sv-pcats .tab.active { background: var(--orange); color: var(--white); border-color: var(--orange); }
#sv-pcats .tab small { color: rgba(255, 255, 255, 0.65); font-weight: 700; margin-left: 6px; }
@media (max-width: 900px) { #sv-pcats { margin-bottom: 40px; } }

/* schedule list: the card of a running season is green, a month with only finished events is grey */
.sch-card.now { border-color: var(--green); box-shadow: 0 0 18px rgba(178, 250, 6, 0.25); }
.sch-card.past { border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 0 18px rgba(128, 132, 140, 0.2); }
.sch-tag.past { border-color: #8b8f98; color: #c3c7cf; }
/* finished events: the date is grey like the rest of the row */
.sch-row.past .sch-date { color: #8b8f98; }
.sch-row.past .sch-date small { color: #6e727c; }

/* the state of the shown season beside the heading (the same look as the chips on the timeline cards) */
.home-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.home-head-state { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.home-head-state[hidden] { display: none; }
.home-head-state.now { background: var(--orange); color: var(--white); }
.home-head-state.past { background: rgba(255, 255, 255, 0.12); color: #c3c7cf; }
.home-head-state.future { border: 1px solid var(--border-grey); color: var(--white); }
.home-head-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--white); animation: pulse 1.6s infinite; }

/* "Aktuálna sezóna": the heading over the timeline, the progress and the league numbers (its gap below is the timeline's own) */
.home-current > .home-sec-title { margin-bottom: 14px; }
/* a page heading with its one-line description (Harmonogram): the same gap below as the other pages (48px, 40px on a tablet and phone) */
.container > .home-sub { margin: 0 0 48px; }
@media (max-width: 900px) { .container > .home-sub { margin-bottom: 40px; } }

/* Rozpis: one block per round (gap between rounds), the groups side by side, a compact line per match */
.sv-rl-block { display: block; }
.sv-rl-round { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 18px; margin: 0 0 12px; border-radius: var(--radius); background: var(--fill-grey); font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); }
.sv-rl-round small { color: #c3c7cf; font-size: 12px; font-weight: 700; letter-spacing: 0; }
.sv-rl-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.sv-rl-g { min-width: 0; background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); padding: 0 16px 8px; align-self: start; }
.sv-rl-h { padding: 12px 0 5px; }
.sv-rl-m { grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); gap: 8px; padding: 6px 0; font-size: 13px; }
.sv-rl-m .rs { font-size: 13px; }
.sv-rl-m .rs.date { font-size: 10px; padding: 2px 6px; }
@media (max-width: 700px) { .sv-rl-groups { grid-template-columns: 1fr; } .sv-rl-round { padding: 10px 14px; } }

/* Rozpis: full-width cards (one per group) hanging straight under the round bar; the matches stay on the left */
.sv-rl-round { margin: 0; border-radius: var(--radius) var(--radius) 0 0; }
.sv-rl-groups { grid-template-columns: 1fr; gap: 10px; }
.sv-rl-g:first-child { border-top: none; border-radius: 0 0 14px 14px; }
.sv-rl-m { max-width: 460px; }
.sv-rl-m .a, .sv-rl-m .b { text-align: center; }
.sv-rl-m { margin-left: auto; margin-right: auto; }

/* Home: the image carousel at the top (Backend > Carousel) */
.home-carousel { position: relative; margin: 22px 0 0; border-radius: var(--radius); overflow: hidden; background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.18); }
.home-carousel[hidden] { display: none; }
.home-carousel + .home-head { margin-top: 48px; }
.hc-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.hc-track::-webkit-scrollbar { display: none; }
.hc-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; display: block; aspect-ratio: 16 / 6; color: var(--white); text-decoration: none; }
.hc-slide picture { display: contents; }
.hc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.hc-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 120px 26px 26px; background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.78) 35%, rgba(0, 0, 0, 0.4) 70%, transparent 100%); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.hc-caption b { display: block; font-size: 40px; font-weight: 800; line-height: 1.2; }
.hc-caption small { display: block; margin-top: 4px; font-size: 15px; font-weight: 300; line-height: 1.4; color: #e6e8ec; }
.hc-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-grey); background: rgba(10, 10, 10, 0.55); color: var(--white); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 0 3px; }
.hc-arrow:hover { background: var(--orange); border-color: var(--orange); }
.hc-arrow.prev { left: 12px; }
.hc-arrow.next { right: 12px; }
.hc-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 7px; pointer-events: none; }
.hc-dot { pointer-events: auto; width: 8px; height: 8px; padding: 0; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.45); cursor: pointer; }
.hc-dot.on { background: var(--orange); width: 22px; border-radius: var(--radius-sm); }
@media (max-width: 900px) { .home-carousel + .home-head { margin-top: 40px; } }
@media (max-width: 700px) {
  .hc-slide { aspect-ratio: 16 / 9; }
  .hc-caption { padding: 70px 14px 28px; }
  .hc-caption b { font-size: 24px; }
  .hc-caption small { font-size: 12px; margin-top: 2px; }
  .hc-arrow { display: none; }
}

/* A menu item shown as a green button (Backend > Menu: "Show as a green button") */
.nav-links a.nav-btn-green, .nav-links .nav-item-dropdown-toggle a.nav-btn-green { background: var(--green); color: #0a0a0a; font-weight: 800; }
.nav-links a.nav-btn-green:hover, .nav-links .nav-item-dropdown-toggle a.nav-btn-green:hover { background: #c9ff3d; color: #0a0a0a; }
.nav-links a.nav-btn-green.active { background: var(--green); color: #0a0a0a; }
.nav-links a.nav-btn-green::before, .nav-links a.nav-btn-green:hover::before, .nav-links a.nav-btn-green.active::before { background: #0a0a0a; }

/* Phone menu: icons for the items that had only the arrow (Zápasy, Tabuľky, Harmonogram, a season, and the dropdown parents such as Liga and VIAC) */
@media (max-width: 1024px) {
  .nav-links a[href="/matches"], .nav-links a[data-code="/matches"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath%20d%3D%27M22%2012h-4l-3%209L9%203l-3%209H2%27%2F%3E%3C/svg%3E"); }
  .nav-links a[href="/tables"], .nav-links a[data-code="/tables"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M3%209h18M3%2015h18M9%203v18%27%2F%3E%3C/svg%3E"); }
  .nav-links a[href="/propozicie"], .nav-links a[data-code="/propozicie"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h8M8 9h2'/%3E%3C/svg%3E"); }
  .nav-links a[href="/harmonogram"], .nav-links a[data-code="/harmonogram"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M16%202v4M8%202v4M3%2010h18M8%2014h.01M12%2014h.01M16%2014h.01M8%2018h.01M12%2018h.01%27%2F%3E%3C/svg%3E"); }
  .nav-links a[href^="/season/"], .nav-links a[data-code^="/season/"], .nav-links a[data-nav-icon="trophy"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath%20d%3D%27M6%209H4.5a2.5%202.5%200%200%201%200-5H6M18%209h1.5a2.5%202.5%200%200%200%200-5H18M4%2022h16M10%2014.66V17c0%20.55-.47.98-.97%201.21C7.85%2018.75%207%2020.24%207%2022M14%2014.66V17c0%20.55.47.98.97%201.21C16.15%2018.75%2017%2020.24%2017%2022M18%202H6v7a6%206%200%200%200%2012%200V2Z%27%2F%3E%3C/svg%3E"); }
  .nav-links a[data-nav-icon="grid"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27%2F%3E%3C/svg%3E"); }
  .nav-links a[data-nav-icon="more"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%271%27%2F%3E%3Ccircle%20cx%3D%2719%27%20cy%3D%2712%27%20r%3D%271%27%2F%3E%3Ccircle%20cx%3D%275%27%20cy%3D%2712%27%20r%3D%271%27%2F%3E%3C/svg%3E"); }
}

/* ---------- Menu dropdowns: a dark rounded panel on desktop, an indented list of rounded rows on phones ---------- */
.nav-caret { transition: transform 0.18s ease, color 0.18s ease; }
.nav-item-dropdown.open > .nav-item-dropdown-toggle .nav-caret { transform: rotate(180deg); color: var(--orange); }
@keyframes nav-drop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (min-width: 1025px) {
  .nav-item-dropdown:hover > .nav-item-dropdown-toggle .nav-caret { transform: rotate(180deg); color: var(--orange); }
  .nav-submenu {
    top: calc(100% + 8px);
    left: 50%;
    min-width: 230px;
    transform: translateX(-50%);
    background: #0f0f10;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.6);
    padding: 8px;
    overflow: visible;
  }
  /* the little gap above the panel stays part of the dropdown, so the pointer can cross it without closing it */
  .nav-submenu::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
  /* a small notch pointing at the item */
  .nav-submenu::after { content: ''; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg); background: #0f0f10; border-left: 1px solid rgba(255, 255, 255, 0.16); border-top: 1px solid rgba(255, 255, 255, 0.16); }
  .nav-item-dropdown.open > .nav-submenu, .nav-item-dropdown:hover > .nav-submenu { animation: nav-drop-in 0.16s ease-out; }
  .nav-submenu a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    background: none;
    color: #e6e8ec;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
  }
  .nav-submenu a::after { content: '›'; color: transparent; font-size: 17px; line-height: 1; transform: translateX(-4px); transition: transform 0.15s ease, color 0.15s ease; }
  .nav-submenu a:hover { background: var(--fill-grey); color: var(--orange); }
  .nav-submenu a:hover::after { color: var(--orange); transform: none; }
  .nav-submenu a.active { color: var(--white); }
  .nav-submenu a.active::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--white); color: transparent; transform: none; }
  .nav-submenu a + a { margin-top: 2px; }
}

@media (max-width: 1024px) {
  .nav-submenu { display: none; position: static; flex-direction: column; gap: 6px; margin: 8px 0 4px 22px; padding: 0 0 0 14px; background: none; border: none; border-left: 2px solid rgba(255, 255, 255, 0.14); border-radius: 0; box-shadow: none; transform: none; min-width: 0; }
  .nav-item-dropdown.open > .nav-submenu { display: flex; animation: nav-drop-in 0.16s ease-out; }
  .nav-links .nav-submenu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #141416;
    color: #e6e8ec;
    border-radius: var(--radius-sm);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-align: left;
  }
  .nav-links .nav-submenu a::before { display: block; content: ''; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #6b6f78; -webkit-mask: none; mask: none; }
  .nav-links .nav-submenu a::after { display: none; }
  .nav-links .nav-submenu a:hover { background: var(--fill-grey); color: var(--orange); }
  .nav-links .nav-submenu a:hover::before { background: var(--orange); }
  .nav-links .nav-submenu a.active { color: var(--status-green); background: var(--fill-grey); }
  .nav-links .nav-submenu a.active::before { background: var(--status-green); }
}
/* Third level: a sub-item that has sub-items of its own opens a fly-out beside the dropdown on a computer (the arrow shows
   there is more) and an indented list on a phone (the caret opens it, like a main item's) */
@media (min-width: 1025px) {
  .nav-submenu .nav-item-dropdown { position: relative; }
  .nav-submenu .nav-caret { display: none; }
  .nav-submenu .nav-item-dropdown-toggle a { flex: 1; }
  .nav-submenu .nav-item-dropdown-toggle a::after { color: #8b8f98; transform: none; }
  .nav-submenu .nav-item-dropdown:hover > .nav-item-dropdown-toggle a { background: var(--fill-grey); color: var(--orange); }
  .nav-submenu .nav-item-dropdown:hover > .nav-item-dropdown-toggle a::after { color: var(--orange); }
  .nav-submenu .nav-submenu { top: -9px; left: calc(100% + 4px); transform: none; }
  .nav-submenu .nav-submenu::after { display: none; }
  .nav-submenu .nav-submenu::before { top: 0; bottom: 0; left: -8px; right: auto; width: 8px; height: auto; }
  .nav-submenu a + .nav-item-dropdown, .nav-submenu .nav-item-dropdown + a, .nav-submenu .nav-item-dropdown + .nav-item-dropdown { margin-top: 2px; }
}

@media (max-width: 1024px) {
  /* the caret sits on top of a green button on phones: dark, like its text */
  .nav-item-dropdown-toggle a.nav-btn-green ~ .nav-caret, .nav-item-dropdown.open > .nav-item-dropdown-toggle a.nav-btn-green ~ .nav-caret { color: #0a0a0a; font-size: 16px; }
}

/* ---------- Propozície (/propozicie): the rules of the league, one dark card per section ---------- */
.pr-page { color: var(--white); }
.pr-nav { margin: 22px 0 0; }
.pr-sec { margin-top: 48px; scroll-margin-top: 84px; }
.pr-title { margin: 0 0 14px; font-size: 17px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); }
.pr-card { background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); padding: 24px 26px; }
.pr-card p { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: #d3d6dc; }
.pr-card p:last-child, .pr-card .pr-list:last-child { margin-bottom: 0; }
.pr-card b { color: var(--white); font-weight: 700; }
.pr-card a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }
.pr-card a:hover { color: var(--white); }
.pr-list { list-style: none; margin: 0 0 14px; padding: 0; }
.pr-list > li { position: relative; padding: 0 0 0 22px; margin: 0 0 10px; font-size: 15px; line-height: 1.65; color: #d3d6dc; }
.pr-list > li:last-child { margin-bottom: 0; }
.pr-list > li::before { content: ''; position: absolute; left: 4px; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.pr-list.num { counter-reset: pr; margin: 10px 0 0; }
.pr-list.num > li { counter-increment: pr; padding-left: 34px; margin-bottom: 6px; }
.pr-list.num > li::before { content: counter(pr); left: 0; top: 0.2em; width: 22px; height: 22px; line-height: 22px; text-align: center; font-size: 11px; font-weight: 800; color: #0a0a0a; }
.pr-list .pr-list { margin: 10px 0 0; }
.pr-sub { margin: 28px 0 10px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.pr-note { padding: 12px 16px; border-left: 3px solid var(--orange); background: rgba(255, 255, 255, 0.05); border-radius: 0 10px 10px 0; }

/* the three categories */
.pr-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 18px; }
.pr-cat { --c: var(--orange); background: var(--fill-grey); border-radius: var(--radius); border-top: 3px solid var(--c); padding: 16px 18px 18px; }
.pr-cat.novice { --c: #5ec2ff; }
.pr-cat.nextgen { --c: var(--green); }
.pr-cat.elite { --c: var(--orange); }
.pr-cat-name { font-size: 20px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c); }
.pr-cat-level { font-size: 13px; font-weight: 600; color: #d3d6dc; margin: 2px 0 12px; }
.pr-cat-sub { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #8b8f98; margin-bottom: 8px; }
.pr-cat .pr-list > li { font-size: 14px; line-height: 1.55; margin-bottom: 8px; }
.pr-cat .pr-list > li::before { background: var(--c); }

/* the points of a match */
.pr-points { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.pr-pt { background: var(--fill-grey); border-radius: var(--radius); padding: 14px 10px; text-align: center; }
.pr-pt b { display: block; font-size: 34px; font-weight: 800; line-height: 1.1; color: var(--white); }
.pr-pt span { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #c3c7cf; }
.pr-pt.win b { color: var(--green); }
.pr-pt.bad b { color: #ee3340; }

.pr-coef { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.pr-coef div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; background: var(--fill-grey); border-radius: var(--radius-md); padding: 14px 18px; }
.pr-coef span { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #c3c7cf; }
.pr-coef b { font-size: 26px; font-weight: 800; }
.pr-coef .elite b { color: var(--orange); }
.pr-coef .nextgen b { color: var(--green); }
.pr-coef .novice b { color: #5ec2ff; }

.pr-table { width: 100%; max-width: 520px; border-collapse: collapse; margin: 0 0 6px; font-size: 14px; }
.pr-table th { text-align: right; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #8b8f98; padding: 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.pr-table th:first-child, .pr-table td:first-child { text-align: left; }
.pr-table td { text-align: right; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-weight: 700; color: var(--white); }
.pr-table td:first-child { font-weight: 600; color: #d3d6dc; }
.pr-table tr:last-child td { border-bottom: none; }

.pr-formula { display: inline-block; margin: 0 0 14px; padding: 12px 18px; border-radius: var(--radius-md); background: var(--fill-grey); font-size: 16px; font-weight: 800; color: var(--green); }

.pr-cycles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.pr-cycle { background: var(--fill-grey); border-radius: var(--radius); padding: 16px 18px; }
.pr-cycle b { display: block; font-size: 16px; font-weight: 800; }
.pr-cycle span { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--green); }

.pr-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 16px 0 0; }
.pr-who > div { background: var(--fill-grey); border-radius: var(--radius); padding: 18px 20px; }
.pr-who h3 { margin: 0 0 10px; font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.pr-who .yes h3 { color: var(--green); }
.pr-who .no h3 { color: #ee3340; }
.pr-who .no .pr-list > li::before { background: #ee3340; }
.pr-who .pr-list > li { font-size: 14px; }

@media (max-width: 900px) {
  .pr-sec { margin-top: 40px; }
  .pr-cats { grid-template-columns: 1fr; }
  .pr-cycles, .pr-coef, .pr-who { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .pr-card { padding: 18px 16px; border-radius: var(--radius); }
  .pr-points { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pr-pt { grid-column: span 2; }
  .pr-pt:nth-child(n+4) { grid-column: span 3; }
  .pr-pt b { font-size: 28px; }
  .pr-table td, .pr-table th { padding-left: 8px; padding-right: 8px; }
}

/* Backend > Rules: the editor looks like the page (dark card), and a bare <h3> inside a card is a sub-heading */
.pr-card h3 { margin: 24px 0 10px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.pr-card > h3:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.pr-card .pr-who h3 { margin: 0 0 10px; padding-top: 0; border-top: none; font-size: 14px; letter-spacing: 0.06em; }
.pr-edit { min-height: 160px; max-height: 560px; overflow-y: auto; margin-top: 6px; cursor: text; }
.pr-edit:focus { outline: none; border-color: var(--orange); }
.pr-edit table { max-width: 100%; }

/* Section headings are 20px everywhere (home, season pages, Harmonogram months, Propozície) */
.home-sec-title .l, .sv-sec-h h2, .sv-cat-h, .sch-month-title, .pr-title { font-size: 20px; line-height: 1.2; }
.home-sec-title .l span { font-size: 12px; line-height: 1.3; }
.sv-cat-h small, .sv-cat-h span { font-size: 12px; }

/* Home: a bigger gap between the sections (88px, 68px on tablet and phone) */
.home-head { margin-bottom: 88px; }
.home-mine { margin-bottom: 88px; }
.home-sec { margin-top: 88px; }
@media (max-width: 900px) {
  .home-head { margin-bottom: 68px; }
  .home-mine { margin-bottom: 68px; }
  .home-sec { margin-top: 68px; }
}

/* Home: a thin grey line in the middle of the gap between the sections */
.home-mine, .home-current, .home-sec { position: relative; }
.home-mine::before, .home-current::before, .home-sec::before { content: ''; position: absolute; left: 0; right: 0; top: -44px; height: 1px; background: rgba(255, 255, 255, 0.14); pointer-events: none; }
@media (max-width: 900px) {
  .home-mine::before, .home-current::before, .home-sec::before { top: -34px; }
}

/* Home: Sign in / Register for visitors who are not logged in, on the right of the heading; the "i" explains Register */
.home-auth { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: 0 0 auto; }
.home-auth[hidden] { display: none; }
/* one frame holding the three parts: Prihlásiť sa | Registrácia | i (no overflow:hidden — the "i" bubble opens below it) */
.home-auth-seg { display: inline-flex; border: 1.5px solid var(--border-grey); border-radius: var(--radius-sm); }
.home-auth-btn { font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px; border-radius: 0; border: 0; cursor: pointer; color: var(--white); line-height: 1.3; }
.home-auth-btn.login { background: transparent; border-radius: calc(var(--radius-sm) - 1.5px) 0 0 calc(var(--radius-sm) - 1.5px); }
.home-auth-btn.login:hover { background: rgba(255, 255, 255, 0.1); }
.home-reg-wrap { position: relative; display: inline-flex; }
.home-auth-btn.register { background: var(--orange); }
.home-auth-btn.info { background: var(--orange); border-left: 1px solid rgba(255, 255, 255, 0.4); border-radius: 0 calc(var(--radius-sm) - 1.5px) calc(var(--radius-sm) - 1.5px) 0; padding: 6px 9px; display: inline-flex; align-items: center; }
.home-auth-btn.register:hover, .home-auth-btn.info:hover { background: #ff6a22; border-color: #ff6a22; }
.home-auth-btn.info i { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--white); font-family: Georgia, 'Times New Roman', serif; font-size: 11px; font-weight: 700; font-style: italic; line-height: 1; text-transform: none; }
.home-tip { position: absolute; right: 0; top: calc(100% + 10px); width: 290px; padding: 13px 15px; background: #0f0f10; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-md); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); color: #e6e8ec; font-size: 13px; font-weight: 600; line-height: 1.5; text-transform: none; letter-spacing: 0; z-index: 30; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; pointer-events: none; }
.home-tip::before { content: ''; position: absolute; top: -6px; right: 16px; width: 10px; height: 10px; transform: rotate(45deg); background: #0f0f10; border-left: 1px solid rgba(255, 255, 255, 0.18); border-top: 1px solid rgba(255, 255, 255, 0.18); }
.home-reg-wrap.tip-open .home-tip { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 700px) {
  .home-head { flex-wrap: wrap; }
  .home-head-text { flex: 1 1 0; min-width: 0; }
  .home-auth { order: 3; flex: 1 0 100%; align-items: stretch; margin: 8px 0 0; }
  .home-auth-seg { display: flex; }
  .home-auth-btn { padding: 8px 12px; }
  .home-auth-btn.info { padding: 8px 11px; }
  .home-auth-btn.login { flex: 1; }
  .home-reg-wrap { flex: 1.4; }
  .home-auth-btn.register { flex: 1; }
  .home-tip { width: min(290px, calc(100vw - 40px)); }
}

/* "Prebieha" beside the home heading blinks slowly, like a live indicator */
@keyframes live-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.home-head-state.now { animation: live-blink 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .home-head-state.now { animation: none; } }

/* The CourtIQ wordmark: "court" lowercase and "IQ" capitals, both the same size — the same everywhere, whatever the text around it does (uppercase, spacing) */
.ciq { white-space: nowrap; text-transform: none; letter-spacing: 0; }
.ciq-c { font-size: 1.15em; font-weight: 700; text-transform: none; letter-spacing: 0.01em; }
.ciq-iq { font-size: 1.15em; font-weight: 800; text-transform: none; letter-spacing: 0.02em; }

/* ---------- Winners page (/vitazi) ---------- */
/* gaps as on the other pages: 48px under the page heading and between the category blocks, 88px between editions with the thin line in the middle (68px / 40px on a tablet and phone) */
#win-tabs { margin-top: 22px; margin-bottom: 48px; }
.win-edition { position: relative; }
.win-edition + .win-edition { margin-top: 88px; }
.win-edition + .win-edition::before { content: ''; position: absolute; left: 0; right: 0; top: -44px; height: 1px; background: rgba(255, 255, 255, 0.14); pointer-events: none; }
.win-edition > .home-sec-title { margin-bottom: 14px; }
.win-block + .win-block { margin-top: 48px; }
.win-block-head { margin: 0 0 14px; }
/* the category heading over a row of cards: plain white text */
.win-cat { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); }
.win-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* medal colours: --m is the tint, --mt the text on it */
.win-gold { --m: #ffb802; --mt: #1a1200; }
.win-silver { --m: #c9ccd3; --mt: #14151a; }
.win-bronze { --m: #c97a3d; --mt: #1a0e04; }
.win-card { display: flex; flex-direction: column; background: #0a0a0a; border: 1px solid var(--m); border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 14px -8px color-mix(in srgb, var(--m) 35%, transparent); color: var(--white); text-decoration: none; }
a.win-card:hover { box-shadow: 0 0 16px -6px color-mix(in srgb, var(--m) 45%, transparent); }
.win-ph { position: relative; aspect-ratio: 1 / 1; background: radial-gradient(120% 90% at 50% 20%, #3b3b44, #17171b); display: grid; place-items: center; overflow: hidden; }
.win-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.win-av { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--m); background: linear-gradient(145deg, #4a4a55, #26262c); display: grid; place-items: center; font-weight: 800; font-size: 34px; letter-spacing: 0.02em; }
.win-lab { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 12px 12px 14px; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--m) 85%, #000), color-mix(in srgb, var(--m) 55%, #000)); color: var(--mt); }
.win-lab small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.win-lab b { display: block; font-size: 15px; font-weight: 800; text-transform: uppercase; margin-top: 3px; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  #win-tabs { margin-bottom: 40px; }
  .win-edition + .win-edition { margin-top: 68px; }
  .win-edition + .win-edition::before { top: -34px; }
  .win-block + .win-block { margin-top: 40px; }
}
@media (max-width: 760px) {
  .win-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .win-av { width: 72px; height: 72px; font-size: 26px; }
}

/* ---------- Contact window (menu item "Kontakt") ---------- */
@keyframes ct-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.ct-backdrop { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 10, 10, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ct-card { position: relative; width: min(860px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: #0a0a0a; color: var(--white); border: 1px solid var(--orange); border-radius: var(--radius); box-shadow: 0 0 40px rgba(255, 85, 0, 0.25), 0 30px 80px rgba(0, 0, 0, 0.6); padding: 44px 40px; animation: ct-in 0.18s ease-out; }
.ct-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.ct-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: var(--fill-grey); color: var(--white); font-size: 22px; line-height: 1; font-family: inherit; cursor: pointer; padding: 0 0 2px; }
.ct-close:hover { border-color: var(--orange); color: var(--orange); }
.ct-left { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.ct-logo { width: 120px; height: auto; }
.ct-title { margin: 6px 0 0; font-size: 22px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); }
.ct-lines { display: flex; flex-direction: column; gap: 6px; color: #e6e8ec; font-size: 15px; font-weight: 700; }
.ct-lines p { margin: 0; overflow-wrap: anywhere; }
.ct-k { display: inline-block; margin-right: 8px; color: #8b8f98; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ct-right { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.ct-label { color: #8b8f98; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ct-value { display: block; margin-top: 6px; color: var(--white); font-size: 22px; font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.ct-value:hover { color: var(--orange); }
.ct-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ct-social a { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.25); background: var(--fill-grey); color: var(--white); }
.ct-social a:hover { border-color: var(--orange); color: var(--orange); }
.ct-social svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 720px) {
  .ct-card { padding: 56px 22px 28px; }
  .ct-body { grid-template-columns: 1fr; gap: 28px; }
}
/* the phone menu shows an envelope beside Kontakt */
@media (max-width: 1024px) {
  .nav-links a[href="#kontakt"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }
}

/* Phone menu: the panel hangs below the top bar, so it can never be taller than what is left of the screen (and, where there is
   a bottom menu, never run under it) — a long list, or a dropdown opened inside it, scrolls inside the panel instead of
   running off the bottom of the screen. */
@media (max-width: 1024px) {
  .nav-links {
    flex-wrap: nowrap; /* a single column that scrolls — with a height limit it would otherwise wrap into a second column */
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links a, .nav-links .nav-item-dropdown { flex-shrink: 0; }
  body.has-bottom-nav .nav-links {
    max-height: calc(100vh - 60px - 76px - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 60px - 76px - env(safe-area-inset-bottom));
  }
}

/* ---------- Season page: the winners of a finished series (between the numbers and the tabs) ---------- */
.sw-sec { margin-top: 48px; }
.sw-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 330px)); justify-content: start; gap: 12px; }
.sw-card { display: flex; flex-direction: column; background: var(--fill-grey); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); padding: 14px 16px; }
.sw-cat { margin: 0 0 12px; color: #c3c7cf; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sv-fixed-players { margin: 40px 0 8px; }
.sv-fixed-h { margin: 0 0 12px; font-size: 20px; }
.sw-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; }
/* a tournament: one card per category with all four places in a row (two by two on a phone) */
.sw-row-quad { grid-template-columns: 1fr; }
.sw-quad { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) { .sw-quad { grid-template-columns: 1fr 1fr; } }
.sw-tile { display: flex; flex-direction: column; background: #0a0a0a; border: 1px solid var(--m); border-radius: var(--radius); overflow: hidden; color: var(--white); text-decoration: none; }
.sw-ph { aspect-ratio: 1 / 1; background: radial-gradient(120% 90% at 50% 20%, #3b3b44, #17171b); display: grid; place-items: center; overflow: hidden; }
.sw-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-av { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--m); background: linear-gradient(145deg, #4a4a55, #26262c); display: grid; place-items: center; font-weight: 800; font-size: 22px; }
.sw-l { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 8px 6px 10px; text-align: center; color: var(--mt); background: linear-gradient(180deg, color-mix(in srgb, var(--m) 85%, #000), color-mix(in srgb, var(--m) 55%, #000)); }
.sw-l small { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.sw-l b { margin-top: 2px; font-size: 13px; font-weight: 800; line-height: 1.2; text-transform: uppercase; overflow-wrap: anywhere; }
@media (max-width: 900px) { .sw-sec { margin-top: 40px; } }

/* Backend > Menu: the move controls of a menu item — a drag handle and up / down arrows */
.hi-move { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.hi-handle { cursor: grab; user-select: none; padding: 6px 4px; color: var(--gray); font-size: 18px; line-height: 1; letter-spacing: -2px; }
.hi-handle:active { cursor: grabbing; }
.hi-arrow { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1.5px solid #ddd; background: #fff; color: #222; font-size: 15px; line-height: 1; cursor: pointer; }
.hi-arrow:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); }
.hi-arrow:disabled { opacity: 0.3; cursor: default; }
.hi-dragging { opacity: 0.4; }
.hi-drop-before > .header-item-row { box-shadow: inset 0 3px 0 var(--orange); }
.hi-drop-after > .header-item-row { box-shadow: inset 0 -3px 0 var(--orange); }

/* Phone: a section heading with a name and a link ("Aktuálna sezóna · Autumn Finals Series 2026 … Celý harmonogram →") — the title,
   the name under it and the link under that, instead of three squeezed columns that ran off the screen */
@media (max-width: 700px) {
  .home-sec-title { flex-wrap: wrap; row-gap: 6px; }
  .home-sec-title .l { display: block; flex: 1 1 100%; min-width: 0; }
  .home-sec-title .l span { display: block; margin: 4px 0 0; }
  .home-sec-title a { flex: 1 1 100%; margin: 0; }
}

/* ---------- Court reservations (/rezervacie-kurtov) ---------- */
.rv-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 16px 0 12px; }
.rv-nav { display: flex; align-items: center; gap: 10px; }
.rv-range { color: var(--white); font-size: 20px; font-weight: 800; min-width: 112px; text-align: center; font-variant-numeric: tabular-nums; }
.rv-arrow { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1.5px solid rgba(255, 255, 255, 0.3); background: transparent; color: var(--white); font-size: 24px; line-height: 1; cursor: pointer; font-family: inherit; }
.rv-arrow:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); }
.rv-arrow:disabled { opacity: 0.3; cursor: default; }
.rv-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; font-weight: 700; color: #c3c7cf; }
.rv-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; }
.rv-legend .free { background: var(--green); }
.rv-legend .taken { background: var(--orange); }
.rv-legend .mine { background: var(--orange); outline: 2px solid var(--white); outline-offset: -2px; }
.rv-legend .past { background: rgba(255, 255, 255, 0.14); }
.rv-courts { margin-top: 4px; }

/* the grid: the time down the left, the days (and a column per court) across the top; both stay in view while it scrolls */
.rv-scroll { --rv-col: 36px; --rv-row: 56px; --rv-head: 34px; --rv-gap: 20px; --rv-courtw: 100px; overflow-x: auto; padding: 18px 10px; margin: -18px -10px; }
.rv-days { display: grid; gap: var(--rv-gap); min-width: min-content; }
.rv-day { min-width: min-content; border: 1px solid var(--orange); border-radius: var(--radius); background: #0b0b0c; overflow: clip; }
.rv-grid { display: grid; position: relative; width: 100%; min-width: min-content; }
.rv-time { display: flex; align-items: center; padding-left: 8px; background: var(--fill-grey); color: var(--white); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.rv-dayh { position: sticky; left: 0; z-index: 4; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: var(--fill-grey); color: var(--white); font-size: 17px; white-space: nowrap; }
.rv-dayh b { font-weight: 800; }
.rv-dayh.weekend { background: #4a4b50; }
.rv-dayh.today { box-shadow: inset 4px 0 0 var(--orange); }
.rv-dayh.today b { color: var(--orange); }
.rv-courth { position: sticky; left: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 4px 6px; background: #000; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.15; text-align: center; overflow-wrap: anywhere; overflow: hidden; border-right: 1px solid rgba(255, 255, 255, 0.14); }
.rv-courth:not(.first), .rv-row:not(.first) { border-top: 1px dashed rgba(255, 255, 255, 0.28); }
.rv-row { background-color: #0b0b0c; background-image: linear-gradient(to right, transparent calc(100% - 1px), rgba(255, 255, 255, 0.13) calc(100% - 1px)), linear-gradient(to right, transparent calc(100% - 1px), rgba(255, 255, 255, 0.05) calc(100% - 1px)); background-size: calc(200% / var(--n)) 100%, calc(100% / var(--n)) 100%; }
.rv-row.today { background-color: #170f0a; }

/* a spot: green = free, orange = reserved (with the name), orange with a white frame = mine, grey = over */
.rv-slot { z-index: 1; margin: 3px 1px; padding: 2px 3px; border: 0; border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; overflow: hidden; text-align: center; font-family: inherit; font-size: 12px; line-height: 1.15; cursor: pointer; }
.rv-n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.rv-t { font-size: 10px; font-weight: 700; opacity: 0.8; white-space: nowrap; }
.rv-p { font-size: 11px; font-weight: 800; white-space: nowrap; }
.rv-slot.one .rv-t, .rv-slot.one .rv-p { display: none; }
.rv-slot.free { background: var(--rv-c, var(--green)); color: var(--rv-t, #0a0a0a); }
.rv-slot.free:hover { filter: brightness(1.1); box-shadow: 0 0 0 2px rgba(178, 250, 6, 0.4); }
.rv-slot.taken { background: var(--orange); color: var(--white); cursor: default; }
.rv-slot.mine { background: var(--orange); color: var(--white); outline: 2px solid var(--white); outline-offset: -2px; }
.rv-slot.past { cursor: default; }
.rv-slot.free.past { background: rgba(255, 255, 255, 0.07); color: #6f7681; }
.rv-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; background: var(--rv-c, var(--green)); vertical-align: 0; }
.rv-slot.taken.past, .rv-slot.mine.past { opacity: 0.5; }
.rv-slot:focus-visible { outline: 2px solid var(--white); outline-offset: 1px; }
.rv-empty { margin-top: 12px; color: #9aa0aa; font-size: 14px; text-align: center; }
.rv-hint { margin: 16px 0 0; color: #9aa0aa; font-size: 14px; }
.rv-link { background: none; border: 0; padding: 0; color: var(--orange); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }

.rv-nav .btn-outline { color: var(--white); border-color: rgba(255, 255, 255, 0.55); background: transparent; }
.rv-nav .btn-outline:hover { border-color: var(--orange); color: var(--orange); }
.rv-mine { margin-top: 36px; }
.rv-my { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-top: 8px; background: var(--fill-grey); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); font-size: 14px; }
.rv-locked { color: #9aa0aa; font-size: 12px; font-weight: 600; }
.rv-my { color: var(--white); }
.rv-my b { color: var(--white); }
.rv-my .btn-outline { color: var(--white); border-color: rgba(255, 255, 255, 0.55); background: transparent; }
.rv-my .btn-outline:hover { border-color: var(--orange); color: var(--orange); }
.rv-mine .sv-sec-h h2 { color: var(--white); }
.rv-mine .sv-sec-h > span { color: #c4c9d2; font-size: 14px; }

/* the windows */
.rv-modal h3 { margin: 0 0 14px; }
.rv-facts { display: grid; gap: 8px; margin-bottom: 14px; }
.rv-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: var(--radius-md); background: #f3f4f6; color: #1c1c1f; font-size: 14px; }
.rv-facts span { color: #6b7280; font-weight: 600; }
.rv-note { font-size: 13px; color: #4b5563; margin: 0 0 12px; line-height: 1.45; }
.rv-label { display: block; font-size: 12px; font-weight: 800; margin-bottom: 4px; }
.rv-edit summary { cursor: pointer; font-size: 14px; font-weight: 700; padding: 8px 0; }
.rv-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.rv-edit-grid select, .rv-edit-grid input { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1.5px solid #ddd; font-family: inherit; font-size: 14px; }
.rv-error { color: var(--danger); font-weight: 700; font-size: 14px; margin: 6px 0 10px; min-height: 0; }

@media (max-width: 700px) {
  .rv-scroll { --rv-col: 40px; --rv-row: 52px; --rv-courtw: 88px; --rv-head: 28px; --rv-gap: 16px; }
  .rv-dayh { font-size: 15px; }
  .rv-range { font-size: 18px; min-width: 96px; }
  .rv-bar { margin-top: 12px; }
}


/* sticky "Court booking" button under the top menu */
.booking-btn {
  position: fixed; top: var(--booking-top, 56px); right: 0; z-index: 25;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 7px 14px; border-radius: 0 0 0 12px;
  background: var(--orange); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; text-decoration: none;
  box-shadow: 0 4px 14px rgba(255, 85, 0, 0.4); transition: box-shadow 0.15s, padding 0.15s;
}
.booking-btn:hover { box-shadow: 0 6px 18px rgba(255, 85, 0, 0.6); color: #fff; padding-bottom: 9px; }
/* the strip under the menu that the tab hangs in: shorter than the tab itself, so the page's own top margin (22px) leaves ~10px under it on every page */
.booking-spacer { height: 16px; }
.booking-btn { transition: box-shadow 0.15s, padding 0.15s, transform 0.25s; }
.booking-btn.booking-hidden { transform: translateY(-110%); }
.booking-btn svg { width: 15px; height: 15px; flex: 0 0 15px; }
@media (min-width: 701px) {
  .booking-btn { right: var(--booking-right, 0px); border-radius: 0 0 12px 12px; }
}
@media (max-width: 700px) {
  .booking-btn { padding: 5px 10px 6px 12px; font-size: 11px; gap: 5px; }
  .booking-btn svg { width: 14px; height: 14px; flex-basis: 14px; }
}
@media print { .booking-btn { display: none; } }

.slot-hint { margin: 2px 0 10px; font-size: 13px; line-height: 1.4; color: var(--gray-dim, #8a8f98); }

/* home page: invite a friend (last section) */
.inv-card { background: #0a0a0a; border: 1px solid var(--orange); box-shadow: 0 0 18px rgba(255, 85, 0, 0.25); border-radius: var(--radius); padding: 20px 22px; color: var(--white); display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: center; }
.inv-card h3 { margin: 0 0 6px; font-size: 22px; color: var(--white); }
.inv-card p { margin: 0; color: #c3c7cf; font-weight: 600; font-size: 14px; line-height: 1.45; }
.inv-link { display: flex; align-items: center; gap: 10px; background: #161618; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-md); padding: 8px 8px 8px 12px; margin-bottom: 12px; font-weight: 700; font-size: 14px; overflow: hidden; }
.inv-link span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--green); }
.inv-btn { border: 1px solid var(--border-grey); background: transparent; color: var(--white); border-radius: var(--radius-sm); padding: 7px 12px; font-family: inherit; font-weight: 800; font-size: 12px; cursor: pointer; }
.inv-btn:hover { border-color: var(--orange); color: var(--orange); }
.inv-btn.main { background: var(--green); border-color: var(--green); color: #0a0a0a; padding: 10px 16px; font-size: 13px; }
.inv-btn.main:hover { filter: brightness(1.08); color: #0a0a0a; }
.inv-row { display: flex; gap: 10px; flex-wrap: wrap; }
.inv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.inv-stats div { background: #161618; border-radius: var(--radius-md); padding: 9px 12px; }
.inv-stats small { display: block; color: #c3c7cf; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.inv-stats b { font-size: 22px; }
.inv-stats b.green { color: var(--green); }
@media (max-width: 760px) { .inv-card { grid-template-columns: 1fr; } }
.invites-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; color: var(--white); }
.invites-table th { text-align: left; color: #c3c7cf; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.invites-table td { padding: 9px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-weight: 600; }
.invites-table tr:last-child td { border-bottom: 0; }
.pill-green { display: inline-block; padding: 3px 10px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: var(--green); color: #0a0a0a; }

/* home page: player of the month (slim card under the stats tiles) */
.pom-card { background: #0a0a0a; border: 1px solid var(--orange); box-shadow: 0 0 18px rgba(255, 85, 0, 0.25); border-radius: var(--radius); color: var(--white); overflow: hidden; }
.pom-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) 112px 80px 70px; column-gap: 16px; align-items: center; padding: 14px 20px; }
.pom-row + .pom-row { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.pom-photo { width: 46px; height: 46px; border-radius: var(--radius-md); object-fit: cover; background: var(--orange); }
.pom-initials { display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: #fff; }
.pom-who { min-width: 0; }
.pom-who b { display: block; font-size: 20px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pom-k { color: #c3c7cf; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pom-nums { display: contents; font-weight: 800; font-size: 18px; }
.pom-nums > div { line-height: 1.2; }
.pom-nums small { display: block; font-size: 10px; color: #c3c7cf; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; white-space: nowrap; }
.pom-nums > div > span { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pom-card .green { color: var(--green); }
/* the photo and the name lead to the player's profile; the link around the photo adds no box of its own */
.pom-link { display: contents; }
.pom-name { color: inherit; text-decoration: none; }
.pom-name:hover { color: var(--orange); }
/* the season's name and logo in the heading of the home page lead to the season's page */
.home-sub a { color: inherit; text-decoration: none; }
.home-sub a:hover { color: var(--orange); }
.home-head-logo-link { display: block; flex: 0 0 auto; line-height: 0; }
.home-head-logo-link[hidden] { display: none; }

@media (max-width: 640px) {
  /* the photo is as tall as the text beside it (the label, the name and the numbers), which all start at one left edge */
  .pom-row { grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-items: start; }
  .pom-photo { grid-row: 1 / 3; align-self: stretch; width: 76px; height: 100%; min-height: 76px; }
  .pom-initials { font-size: 24px; }
  .pom-nums { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 10px; grid-column: 2; grid-row: 2; font-size: 16px; }
  .pom-who b { white-space: normal; font-size: 18px; line-height: 1.15; }
}

/* blog: the list of articles and an article */
.blog-page { padding-bottom: 50px; }
.blog-h1 { margin-top: 22px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 22px; }
.blog-card { background: var(--fill-grey); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; color: var(--white); transition: border-color 0.15s; }
.blog-card:hover { border-color: var(--orange); }
.blog-card-img { display: block; aspect-ratio: 16 / 10; background: #0a0a0a; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-card h2 { margin: 0; font-size: 19px; line-height: 1.25; color: var(--white); }
.blog-card h2 a { color: inherit; text-decoration: none; }
.blog-card p { margin: 0; color: #c3c7cf; font-weight: 500; font-size: 14px; line-height: 1.5; }
.blog-meta { color: #8d929c; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.blog-more { margin-top: auto; color: var(--orange); font-weight: 800; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; }
.blog-more:hover { color: var(--white); }
.blog-article { max-width: 780px; margin: 22px auto 0; color: var(--white); }
.blog-article h1 { font-size: 34px; line-height: 1.15; margin: 12px 0 8px; color: var(--white); }
.blog-back { color: var(--orange); font-weight: 800; font-size: 13px; text-decoration: none; }
.blog-back:hover { color: var(--white); }
.blog-hero { width: 100%; border-radius: var(--radius); margin: 18px 0 4px; display: block; }
.blog-body { margin-top: 20px; font-size: 17px; line-height: 1.7; color: #e3e5ea; font-weight: 500; }
.blog-body h2, .blog-body h3, .blog-body h4 { color: var(--white); line-height: 1.25; margin: 28px 0 10px; }
.blog-body h2 { font-size: 26px; }
.blog-body h3 { font-size: 21px; }
.blog-body p { margin: 0 0 16px; }
.blog-body a { color: var(--orange); text-decoration: underline; }
.blog-body strong, .blog-body b { color: var(--white); }
.blog-body ul, .blog-body ol { margin: 0 0 16px; padding-left: 24px; }
.blog-body li { margin-bottom: 6px; }
.blog-body li p { margin: 0; }
.blog-body blockquote { margin: 20px 0; padding: 4px 18px; border-left: 4px solid var(--orange); color: #c3c7cf; background: rgba(255, 255, 255, 0.04); border-radius: 0 10px 10px 0; }
.blog-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); display: block; margin: 18px 0; }
.blog-body hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); margin: 24px 0; }
.blog-body table { border-collapse: collapse; width: 100%; margin: 16px 0; }
.blog-body th, .blog-body td { border: 1px solid rgba(255, 255, 255, 0.14); padding: 8px 10px; text-align: left; }
@media (max-width: 700px) { .blog-article h1 { font-size: 27px; } .blog-body { font-size: 16px; } }

/* YouTube video of a match: the pill on the match cards, the embedded player and the admin's tile */
/* an outline pill like the others (see "Pills are outlines" above), in the red of LIVE */
.badge-video, body:not(.embed-light) .match-card .badge-video, body.match-page .match-header .badge-video { display: inline-flex; align-items: center; gap: 5px; background: transparent; color: #ee3340; border: 1px solid #ee3340; }
.badge-video .venue-icon { width: 13px; height: 13px; flex-basis: 13px; }
.compact-date-category .badge-video { padding: 2px 7px; font-size: 10px; }
/* the match has photos: a neutral grey outline pill next to the video one */
.badge-photo, body:not(.embed-light) .match-card .badge-photo { display: inline-flex; align-items: center; gap: 5px; background: transparent; color: #c3c7cf; border: 1px solid #c3c7cf; }
.badge-photo .venue-icon { width: 13px; height: 13px; flex-basis: 13px; }
.compact-date-category .badge-photo { padding: 2px 7px; font-size: 10px; }
.match-video { margin: 16px 0; }
#video-display { overflow-wrap: anywhere; font-size: 15px; }
.match-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, 0.12); }
.match-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-form { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.video-form input { width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); border: 1.5px solid #ddd; font-family: inherit; font-size: 13px; }
.video-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.video-error { color: var(--danger); font-weight: 700; font-size: 13px; min-height: 0; }
.video-form[hidden] { display: none; }
.info-item:has(.video-form:not([hidden])) { grid-column: 1 / -1; }

/* Photos of a match: the 16:9 box above the scoreboard, the Add button and the full-screen viewer */
.match-photos { margin: 0 0 16px; }
.match-photo-box { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--fill-grey); border: 1px solid var(--border-grey); cursor: pointer; }
.match-photo-box img { display: block; width: 100%; height: 100%; object-fit: cover; }
.match-photo-box:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.match-photo-box.is-broken { display: flex; align-items: center; justify-content: center; }
.match-photo-broken, .photo-viewer-broken { color: var(--gray-dim); font-size: 13px; font-weight: 600; text-align: center; padding: 0 16px; }
.match-photo-more { position: absolute; right: 10px; bottom: 10px; background: rgba(0, 0, 0, 0.65); border: 1px solid rgba(255, 255, 255, 0.35); color: var(--white); border-radius: 999px; font-size: 12px; font-weight: 800; padding: 6px 12px; pointer-events: none; }
.match-photos .match-photo-add { margin-top: 10px; }
.match-photos .match-photo-add:only-child { margin-top: 0; }

.photo-viewer { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: #000; color: var(--white); padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
.photo-viewer-top { display: flex; align-items: center; justify-content: space-between; flex: none; font-size: 14px; font-weight: 800; color: #ccc; padding-bottom: 8px; }
.photo-viewer-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-grey); background: rgba(0, 0, 0, 0.55); color: var(--white); font-size: 18px; line-height: 1; font-family: inherit; cursor: pointer; }
.photo-viewer-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.photo-viewer-stage > img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm); -webkit-user-select: none; user-select: none; }
.photo-viewer-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-grey); background: rgba(0, 0, 0, 0.55); color: var(--white); font-size: 26px; line-height: 1; font-family: inherit; padding: 0 0 3px; cursor: pointer; }
.photo-viewer-arrow.prev { left: 0; }
.photo-viewer-arrow.next { right: 0; }
.photo-viewer-strip { flex: none; display: flex; gap: 6px; justify-content: center; margin-top: 10px; overflow-x: auto; }
.photo-viewer-thumb { flex: 0 0 auto; width: 64px; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--fill-grey); opacity: 0.5; cursor: pointer; }
.photo-viewer-thumb.on { opacity: 1; outline: 2px solid var(--orange); }
.photo-viewer-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-viewer-caption { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; margin-top: 10px; font-size: 13px; color: #aaa; }
.photo-viewer-remove { background: transparent; border: 0; padding: 4px 0; font-family: inherit; font-size: 13px; font-weight: 800; color: #ff7a6e; cursor: pointer; }
@media (max-width: 480px) {
  .photo-viewer { padding-left: 8px; padding-right: 8px; }
  .photo-viewer-arrow { width: 34px; height: 34px; font-size: 22px; }
  .photo-viewer-thumb { width: 52px; }
}

/* A menu item that links to a season page shows the season's state at its right: running (green), coming (orange), finished (grey) */
.nav-submenu a.nav-season-link { display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; }
.nav-season-pill { flex: 0 0 auto; margin-left: auto; padding: 2px 7px; border-radius: 5px; border: 1px solid currentColor; font-size: 9px; font-weight: 800; letter-spacing: 0.04em; line-height: 1.3; text-transform: uppercase; }
.nav-season-pill.now { color: var(--status-green); }
.nav-season-pill.future { color: var(--orange); }
.nav-season-pill.past { color: #8b8f98; }
/* on a phone the season name may take two lines so the pill always stays in view at the right */
.nav-season-link > span:first-child { flex: 1 1 auto; min-width: 0; white-space: normal; }
@media (max-width: 900px) {
  .nav-submenu a.nav-season-link { text-align: left; gap: 10px; line-height: 1.3; }
  .nav-season-pill { font-size: 9px; padding: 3px 7px; }
}

/* the chat of a match for someone who is not logged in: read-only, with a way to log in */
.chat-login-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--gray-dim); font-size: 13px; }

/* ---------- Head-to-head, rivals, match of the week ---------- */
/* the compact "Vzájomné" card on the match page: record, meetings, last result, last five as dots, green/red bar */
.h2hc { background: #0a0a0a; border: 1px solid var(--border-grey); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; color: var(--white); }
.h2hc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.h2hc-label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #8b8f98; }
.h2hc-score { font-weight: 800; margin-left: 6px; }
.h2hc-meta { color: #c3c7cf; font-size: 12px; font-weight: 600; }
.h2hc-dots { display: flex; gap: 5px; align-items: center; }
.h2hc-dot { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #0a0a0a; }
.h2hc-dot.w { background: var(--status-green); }
.h2hc-dot.l { background: #e5483a; color: var(--white); }
.h2hc-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; margin-top: 10px; }
.h2hc-bar i { display: block; background: var(--status-green); }
.h2hc-bar i.l { background: #e5483a; }
/* the "Rivali" tiles on the player profile */
#rivals-section .section-label { color: var(--white); font-size: 20px; line-height: 1.2; margin: 56px 0 14px; }
.rivals-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; background: #0a0a0a; border: 1px solid var(--border-grey); border-radius: var(--radius); padding: 14px; }
.rival-tile { display: block; background: var(--fill-grey); border-radius: 14px; padding: 14px; color: var(--white); text-decoration: none; }
.rival-tile:hover { background: #2c2c31; }
.rival-label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #8b8f98; }
.rival-who { font-weight: 800; font-size: 15px; margin: 6px 0 2px; }
.rival-rec { font-weight: 800; font-size: 22px; }
.rival-tile.nemesis .rival-rec { color: #e5483a; }
.rival-tile.favourite .rival-rec { color: var(--status-green); }
.rival-tile.closest .rival-rec { color: var(--orange); }
.rival-tile small { display: block; color: #c3c7cf; font-size: 11px; font-weight: 600; margin-top: 4px; }
@media (max-width: 480px) { .rivals-card { grid-template-columns: 1fr; } }
/* the match of the week: a highlighted row in "Najbližšie zápasy" */
.home-m-row.feat { background: rgba(255, 85, 0, 0.08); border: 1px solid rgba(255, 85, 0, 0.55); border-radius: 12px; padding: 12px; margin: 4px 0; }
.home-feat-label { color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; }

/* the bank transfer block in the window after a tournament registration */
.sv-pay-bank { margin: 14px 0 4px; padding: 12px 14px; border-radius: 12px; background: var(--gray-light); }
.sv-pay-bank h4 { margin: 0 0 8px; font-size: 14px; }
.sv-pay-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; padding: 3px 0; }
.sv-pay-row span { color: var(--gray); min-width: 70px; font-size: 12px; font-weight: 700; }
.sv-pay-row b { word-break: break-all; }
.sv-pay-copy { border: 1px solid var(--gray-dim); background: var(--white); border-radius: 8px; padding: 3px 10px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.sv-pay-note { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--ink); }

/* Rozvrh kurtov: the court schedule tab of a tournament (court-schedule.js) */
.cs-bar { display: grid; gap: 14px; justify-items: start; margin-bottom: 18px; }
.cs-bar .tabs { margin: 0; }
.cs-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-sm); background: var(--fill-grey); }
.cs-seg button { border: 0; background: transparent; color: #c3c7cf; font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
.cs-seg button:hover { color: var(--white); }
.cs-seg button.active { background: var(--orange); color: var(--white); }
.cs-scroll { overflow-x: auto; padding-bottom: 6px; }
.cs-grid { display: grid; grid-template-columns: 46px repeat(var(--cs-cols), minmax(150px, 1fr)); gap: 8px; min-width: min-content; }
.cs-court-h { height: 30px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); }
.cs-hours { position: relative; }
.cs-hour { position: absolute; right: 4px; transform: translateY(-7px); font-size: 11px; font-weight: 700; color: #8b8f98; }
.cs-col { position: relative; background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-md); overflow: hidden; }
.cs-line { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, 0.08); }
.cs-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--orange); z-index: 3; }
.cs-m { position: absolute; left: 4px; right: 4px; z-index: 2; overflow: hidden; display: flex; flex-direction: column; gap: 1px; padding: 5px 8px 4px; border-radius: var(--radius-sm); background: #26282e; border-left: 4px solid var(--gray-dim); color: var(--white); text-decoration: none; font-size: 12px; line-height: 1.25; }
.cs-m:hover { background: #30333b; }
.cs-m-time { font-size: 11px; font-weight: 800; color: #c3c7cf; }
.cs-m-pl { display: flex; flex-direction: column; font-weight: 700; font-size: 13px; }
.cs-m-pl .cs-win { color: var(--green); }
.cs-m-meta { font-size: 11px; color: #8b8f98; }
.cs-m-score { font-size: 11px; font-weight: 700; color: #c3c7cf; }
.cs-m.cs-st-live { background: #3a2a1d; }
.cs-m.cs-st-finished { background: #202227; }
.cs-live { color: var(--green); font-size: 10px; letter-spacing: 0.06em; }
.cs-m, .cs-chip, .cs-row, .cs-livecard { border-left-color: var(--status-green); }
.cs-m.cs-st-live, .cs-row.cs-st-live, .cs-livecard { border-left-color: var(--orange); }
.cs-m.cs-st-finished, .cs-row.cs-st-finished { border-left-color: #8b8f98; }
.cs-done { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #c3c7cf; background: rgba(255, 255, 255, 0.1); border-radius: 4px; padding: 1px 6px; margin-left: 4px; }
.cs-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -6px 0 16px; font-size: 12px; font-weight: 700; color: #c3c7cf; }
.cs-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cs-legend span::before { content: ''; width: 4px; height: 14px; border-radius: 2px; background: var(--status-green); }
.cs-legend .cs-st-live::before { background: var(--orange); }
.cs-legend .cs-st-finished::before { background: #8b8f98; }
.cs-lock { display: inline-block; width: 8px; height: 6px; background: var(--yellow); border-radius: 1px; vertical-align: 0; margin-left: 4px; position: relative; }
.cs-lock::before { content: ''; position: absolute; left: 1px; top: -4px; width: 4px; height: 4px; border: 1.5px solid var(--yellow); border-bottom: none; border-radius: 3px 3px 0 0; }
.cs-drag { cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; }
.cs-dragging { opacity: 0.35; }
.cs-ghost { position: fixed; left: 0; z-index: 1000; pointer-events: none; opacity: 0.92; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.cs-ghost.cs-chip, .cs-ghost.cs-m { background: #30333b; }
.cs-drop { position: absolute; left: 4px; right: 4px; z-index: 1; border: 2px dashed var(--orange); border-radius: var(--radius-sm); background: rgba(255, 85, 0, 0.12); color: var(--orange); font-size: 12px; font-weight: 800; padding: 3px 8px; pointer-events: none; }
.cs-tray { margin-top: 18px; padding: 12px 14px; border: 1px dashed rgba(255, 255, 255, 0.28); border-radius: var(--radius-md); }
.cs-tray-over { border-color: var(--orange); background: rgba(255, 85, 0, 0.08); }
.cs-tray-h { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); margin-bottom: 10px; }
.cs-tray-h em { font-style: normal; color: #c3c7cf; margin-left: 8px; letter-spacing: 0; }
.cs-tray-body { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-tray-empty { color: #8b8f98; font-size: 13px; font-weight: 600; }
.cs-chip { display: flex; flex-direction: column; gap: 1px; min-width: 150px; padding: 6px 10px; border-radius: var(--radius-sm); background: #26282e; border-left: 4px solid var(--gray-dim); color: var(--white); text-decoration: none; }
/* the list view: a card per court, side by side on a wide screen */
.cs-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 18px; align-items: start; }
.cs-list-court { background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-md); overflow: hidden; }
.cs-list-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--fill-grey); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); }
.cs-list-h em { font-style: normal; font-size: 12px; letter-spacing: 0; color: #c3c7cf; background: rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 1px 9px; }
.cs-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "time pl st" "time meta st"; column-gap: 12px; row-gap: 2px; align-items: center; padding: 10px 14px 10px 12px; margin: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-left: 4px solid var(--gray-dim); color: var(--white); text-decoration: none; font-size: 14px; }
.cs-row:last-child { border-bottom: none; }
.cs-row:hover { background: rgba(255, 255, 255, 0.04); }
.cs-row-time { grid-area: time; font-weight: 800; color: #c3c7cf; font-size: 13px; }
.cs-row-pl { grid-area: pl; display: flex; flex-direction: column; font-weight: 700; }
.cs-row-pl .cs-win { color: var(--green); }
.cs-row-meta { grid-area: meta; color: #8b8f98; font-size: 12px; }
.cs-row-st { grid-area: st; text-align: right; font-size: 12px; font-weight: 700; color: #c3c7cf; }
.cs-row-empty { color: #6e727c; font-size: 13px; padding: 14px 16px; }
.cs-admin { margin-top: 22px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--fill-grey); display: grid; gap: 12px; }
.cs-admin-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.cs-admin label { display: grid; gap: 4px; font-size: 11px; font-weight: 700; color: #c3c7cf; }
.cs-admin input[type=number], .cs-admin input[type=time] { width: 132px; padding: 7px 9px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-grey); background: #0a0a0a; color: var(--white); font-family: inherit; font-size: 14px; }
.cs-admin .cs-check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cs-hint { font-size: 12px; color: #c3c7cf; max-width: 520px; }
@media (max-width: 700px) {
  .cs-row { grid-template-columns: 78px minmax(0, 1fr) auto; }
}
.cs-admin .btn.btn-outline { color: var(--white); background: #4a4d57; border: 2px solid #8b8f98; box-shadow: none; font-weight: 800; }
.cs-admin .btn.btn-outline:hover { background: #5b5e66; border-color: var(--white); color: var(--white); }
.cs-livestrip { margin-bottom: 16px; padding: 12px 14px; border: 1px solid rgba(178, 250, 6, 0.4); border-radius: var(--radius-md); background: rgba(178, 250, 6, 0.05); }
.cs-livecard { display: flex; flex-direction: column; gap: 2px; min-width: 190px; padding: 8px 12px; border-radius: var(--radius-sm); background: #1f3d2a; border-left: 4px solid var(--gray-dim); color: var(--white); text-decoration: none; }
.cs-live-h { font-size: 11px; font-weight: 800; color: #c3c7cf; }
.cs-live-score { font-size: 18px; font-weight: 800; color: var(--green); }
.cs-m.cs-st-live .cs-m-score { color: var(--green); font-weight: 800; }
/* the status colour of a timetable block (after the base rules above): green = not started, orange = in play, grey = finished */
.cs-m, .cs-chip, .cs-row, .cs-livecard { border-left-color: var(--status-green); }
.cs-m.cs-st-live, .cs-row.cs-st-live, .cs-livecard { border-left-color: var(--orange); }
.cs-m.cs-st-finished, .cs-row.cs-st-finished { border-left-color: #8b8f98; }
.cs-lock { cursor: pointer; }
.cs-lock::after { content: ''; position: absolute; inset: -7px -8px; }
.cs-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; cursor: ns-resize; touch-action: none; }
.cs-resize::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 26px; height: 3px; margin-left: -13px; border-radius: 2px; background: rgba(255, 255, 255, 0.28); }
.cs-resize:hover::after { background: var(--orange); }
/* a short block (a match that ended early, or a very short one): one line */
.cs-m.cs-short { flex-direction: row; align-items: center; gap: 6px; padding-top: 0; padding-bottom: 0; white-space: nowrap; }
.cs-m.cs-short .cs-m-pl { flex-direction: row; gap: 4px; font-size: 12px; }
.cs-m.cs-short .cs-m-pl span + span::before { content: '–'; margin-right: 4px; font-weight: 400; color: #8b8f98; }
.cs-m.cs-short .cs-m-meta { display: none; }
.cs-m.cs-short .cs-resize::after { display: none; }
.venue-admin-row.vn-drop-before { box-shadow: inset 0 3px 0 var(--orange); }
.venue-admin-row.vn-drop-after { box-shadow: inset 0 -3px 0 var(--orange); }

/* the card of a tournament or a season (Backend): black tabs under the name, the form in sections */
.sa-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--gray-light); }
.sa-tab { background: var(--ink); color: var(--white); border: 2px solid var(--ink); border-radius: var(--radius-sm); padding: 8px 16px; font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; cursor: pointer; }
.sa-tab:hover { background: #2c2c31; border-color: #2c2c31; }
.sa-tab.active { background: var(--ink); border-color: var(--orange); color: var(--white); box-shadow: inset 0 -3px 0 var(--orange); }
.sa-tab-link { margin-left: auto; padding: 8px 0; font-size: 12px; font-weight: 800; color: var(--orange); text-decoration: none; }
.sa-tab-link:hover { text-decoration: underline; }
.sa-card .sa-body { padding-top: 18px; }
.sa-section { background: var(--gray-light); border-radius: var(--radius-md); padding: 14px 16px 16px; margin-bottom: 14px; }
.sa-section h4 { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange); }
.sa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 14px; align-items: end; }
.sa-field { display: grid; gap: 5px; font-size: 12px; font-weight: 700; color: var(--charcoal); min-width: 0; }
.sa-field input[type=text], .sa-field input[type=number], .sa-field input[type=date] { width: 100%; padding: 9px 11px; border-radius: 8px; border: 1.5px solid #ddd; background: var(--white); font-family: inherit; font-size: 14px; }
.sa-field input:focus { outline: none; border-color: var(--orange); }
.sa-wide { grid-column: span 2; }
.sa-full { grid-column: 1 / -1; }
.sa-check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; padding-bottom: 10px; }
.sa-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; font-weight: 600; padding: 8px 0; }
.sa-checks label { display: flex; align-items: center; gap: 6px; }
.sa-hint { font-weight: 600; color: var(--gray); }
.sa-actions { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
@media (max-width: 600px) { .sa-wide { grid-column: 1 / -1; } .sa-tabs { padding: 10px; } .sa-tab { padding: 8px 11px; } }

/* the hero photo of a season / tournament page: 3:1 on wide screens (2400 x 800), 4:3 on phones (1200 x 900), the title over its lower left */
.sv-head.has-hero { position: relative; display: flex; align-items: flex-end; gap: 22px; aspect-ratio: 3 / 1; min-height: 240px; margin-top: 18px; padding: 26px 30px; border-radius: var(--radius); overflow: hidden; background: #1b1b1f; }
.sv-hero-pic, .sv-hero-pic img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sv-hero-pic img { object-fit: cover; }
.sv-hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.5) 38%, rgba(10, 10, 10, 0) 70%); }
.sv-head.has-hero > .sv-logo, .sv-head.has-hero > .sv-head-main { position: relative; z-index: 1; }
.sv-head.has-hero .sv-crumb { margin-top: 0; color: #d3d6dc; }
.sv-head.has-hero .sv-crumb a { color: #d3d6dc; }
.sv-head.has-hero .sv-title { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }
@media (max-width: 700px) { .sv-head.has-hero { aspect-ratio: 4 / 3; min-height: 0; padding: 18px; } .sv-head.has-hero .sv-title { font-size: 24px; } }

/* the hero photo blocks in the card of a season / tournament */
.sa-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 10px; }
.sa-hero { background: var(--white); border-radius: var(--radius-md); padding: 12px; display: grid; gap: 10px; align-content: start; }
.sa-hero-pic { width: 100%; border-radius: 8px; overflow: hidden; background: #d9d9d9; display: flex; align-items: center; justify-content: center; color: var(--gray); font-size: 13px; font-weight: 600; }
.sa-hero-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sa-hero-info { display: grid; gap: 4px; font-size: 12px; color: var(--gray); font-weight: 500; line-height: 1.45; }
.sa-hero-info strong { color: var(--ink); font-size: 13px; }
.sa-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.sa-hero-actions label { margin: 0; cursor: pointer; }
.sa-hero-msg { font-size: 12px; color: var(--gray); }

/* the cover photo at the top of a season card in the timeline on the home page */
.home-tl-body.has-cover { overflow: hidden; }
.home-tl-cover { display: block; width: calc(100% + 32px); height: 96px; margin: -14px -16px 12px; object-fit: cover; background: #1b1b1f; }
.home-tl-body.has-cover .home-tl-logo { top: 108px; }

/* registration open: a green person with a plus in the bottom right corner of the season card in the timeline */
.home-tl-reg { position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--green); background: rgba(178, 250, 6, 0.14); border: 1px solid var(--green); }
.home-tl.past .home-tl-reg { display: none; }

/* phones, page with a hero photo: the photo carries only the path and the title; the logo, the chips and the register button sit under it */
@media (max-width: 700px) {
  .sv-head.has-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 14px; align-items: center; aspect-ratio: auto; padding: 0; overflow: visible; background: none; }
  .sv-head.has-hero:not(.with-logo) { grid-template-columns: minmax(0, 1fr); }
  .sv-head.has-hero .sv-head-main { display: contents; }
  .sv-head.has-hero .sv-hero-pic { position: relative; grid-area: 1 / 1 / 2 / -1; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: #1b1b1f; }
  .sv-head.has-hero .sv-hero-shade { position: relative; z-index: 1; grid-area: 1 / 1 / 2 / -1; align-self: stretch; border-radius: var(--radius); }
  .sv-head.has-hero .sv-head-text { grid-area: 1 / 1 / 2 / -1; align-self: end; position: relative; z-index: 1; padding: 18px; }
  .sv-head.has-hero > .sv-logo { grid-area: 2 / 1; position: static; }
  .sv-head.has-hero .sv-chips { grid-area: 2 / 2; margin: 0; }
  .sv-head.has-hero:not(.with-logo) .sv-chips { grid-area: 2 / 1; }
}

/* the "O nás – info o lige" button in the home page header and the window it opens */
.home-about-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 13px; border-radius: var(--radius-sm); background: var(--fill-grey); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--white); font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: border-color 0.15s ease; }
.home-about-btn svg { width: 16px; height: 16px; color: var(--orange); flex: none; }
.home-about-btn:hover { border-color: var(--orange); }

/* the info window: the same frame as the contact window (black card, orange border and glow, round close button), controls as big as its social buttons */
body.about-open { overflow: hidden; }
.about-backdrop { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 10, 10, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.about-modal { position: relative; width: min(860px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; background: #0a0a0a; color: var(--white); border: 1px solid var(--orange); border-radius: var(--radius); box-shadow: 0 0 40px rgba(255, 85, 0, 0.25), 0 30px 80px rgba(0, 0, 0, 0.6); animation: ct-in 0.18s ease-out; }
.about-head { flex: none; padding: 34px 40px 0; }
.about-head h2 { margin: 0; padding-right: 48px; font-size: 22px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); }
.about-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: var(--fill-grey); color: var(--white); font-size: 22px; line-height: 1; font-family: inherit; cursor: pointer; padding: 0 0 2px; }
.about-x:hover { border-color: var(--orange); color: var(--orange); }
.about-tabs { flex: none; display: flex; gap: 10px; padding: 20px 40px 22px; overflow-x: auto; scrollbar-width: none; }
.about-tabs::-webkit-scrollbar { display: none; }
.about-tab { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; border-radius: var(--radius-sm); background: var(--fill-grey); border: 1px solid rgba(255, 255, 255, 0.25); color: var(--white); font: inherit; font-size: 14px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; }
.about-tab svg { width: 20px; height: 20px; color: var(--orange); flex: none; }
.about-tab:hover { border-color: var(--orange); color: var(--orange); }
.about-tab.on, .about-tab.on:hover { background: var(--orange); border-color: var(--orange); color: var(--white); }
.about-tab.on svg { color: var(--white); }
.about-body { padding: 4px 40px 38px; overflow-y: auto; font-size: 15px; line-height: 1.65; }
.about-body p { margin: 0 0 14px; color: #c9ccd3; }
.about-h { margin: 0 0 12px; font-size: 20px; font-weight: 800; color: var(--white); text-transform: uppercase; letter-spacing: 0.04em; }
.about-lead { font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--white) !important; }
.about-body a { color: var(--orange); font-weight: 700; }
.about-sub { margin: 18px 0 10px; color: #8b8f98; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.about-sign { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 800; color: var(--orange); }
.about-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.about-list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-md); background: var(--fill-grey); border: 1px solid rgba(255, 255, 255, 0.08); }
.about-n { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--orange); color: var(--white); font-weight: 800; font-size: 14px; }
.about-list strong { display: block; color: var(--white); font-size: 15px; margin-bottom: 2px; }
.about-list span:not(.about-n) { color: #aeb2ba; font-size: 14px; line-height: 1.5; }
.about-cards { display: grid; gap: 12px; margin: 4px 0 18px; }
.about-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about-card { --c: var(--orange); position: relative; padding: 16px 16px 18px; border-radius: var(--radius-md); background: var(--fill-grey); border: 1px solid rgba(255, 255, 255, 0.08); border-top: 3px solid var(--c); }
.about-card.novice { --c: #5ec2ff; }
.about-card.nextgen { --c: var(--green); }
.about-card.elite { --c: var(--orange); }
.about-card.winter { --c: #5ec2ff; }
.about-card.summer { --c: #f5b301; }
.about-card.autumn { --c: var(--orange); }
.about-card-step { position: absolute; top: 12px; right: 14px; font-size: 26px; font-weight: 800; color: var(--c); opacity: 0.35; line-height: 1; }
.about-card-name { font-size: 17px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--c); line-height: 1.2; padding-right: 26px; }
.about-card-text { margin-top: 6px; font-size: 14px; color: #c9ccd3; line-height: 1.5; }
.about-callout { margin: 4px 0 18px; padding: 16px 18px; border-radius: var(--radius-md); background: rgba(255, 85, 0, 0.1); border: 1px solid rgba(255, 85, 0, 0.45); color: #e6e8ec; }
.about-callout strong { color: var(--white); }
.about-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: var(--radius-sm); background: var(--orange); border: 1px solid var(--orange); color: var(--white) !important; font-size: 14px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; }
.about-cta svg { width: 20px; height: 20px; }
.about-cta:hover { filter: brightness(1.1); }
@media (max-width: 720px) {
  .about-head { padding: 28px 22px 0; }
  .about-tabs { padding: 18px 22px 20px; }
  .about-body { padding: 4px 22px 28px; }
  .about-cards.three { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .about-modal { animation: none; } }

/* the photo of a court at the top of its profile, between the "all courts" link and the details: never wider than the pictures are
   (768 x 432, 16:9), with a black gradient from the bottom and the name of the court over it */
.court-photo { position: relative; width: 100%; max-width: 768px; margin: 8px 0 18px; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #1a1a1a; }
.court-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.court-photo-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.55) 35%, rgba(10, 10, 10, 0) 68%); }
.court-photo .court-title { position: absolute; left: 24px; right: 24px; bottom: 20px; margin: 0; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }
@media (max-width: 700px) { .court-photo .court-title { left: 16px; right: 16px; bottom: 14px; font-size: 24px; } }

/* the REGISTRÁCIA button on a season / tournament page: green, with a green ring that spreads from it and fades, over and over (the ring not for visitors who asked for less motion) */
#sv-register.sv-btn.primary { background: var(--green); border-color: var(--green); color: #0a0a0a; }
#sv-register.sv-btn.primary:hover { background: #c6ff3a; border-color: #c6ff3a; }
@keyframes sv-register-glow { 0% { box-shadow: 0 0 0 0 rgba(178, 250, 6, 0.75); } 70% { box-shadow: 0 0 0 16px rgba(178, 250, 6, 0); } 100% { box-shadow: 0 0 0 0 rgba(178, 250, 6, 0); } }
@media (prefers-reduced-motion: no-preference) { #sv-register { animation: sv-register-glow 1.8s ease-out infinite; } }

/* the registration window of a season / tournament with a hero photo: the photo across the top, black gradient from the bottom, the title and the name of the series in white over it */
.sv-reg-cover { position: relative; margin: -22px -22px 18px; aspect-ratio: 16 / 7; min-height: 130px; display: flex; align-items: flex-end; background: #1b1b1f; overflow: hidden; }
.sv-reg-cover picture, .sv-reg-cover img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sv-reg-cover img { object-fit: cover; }
.sv-reg-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.55) 40%, rgba(10, 10, 10, 0) 75%); }
.sv-reg-cover .close { position: absolute; top: 12px; right: 12px; z-index: 2; float: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(10, 10, 10, 0.55); color: var(--white); font-size: 20px; padding: 0 0 2px; }
.sv-reg-cover .close:hover { border-color: var(--orange); color: var(--orange); }
.sv-reg-cover-text { position: relative; z-index: 1; padding: 0 22px 16px; }
.sv-reg-cover-text h3 { margin: 0 0 2px; color: var(--white); font-size: 22px; font-weight: 800; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.sv-reg-cover-text .sv-reg-season { margin: 0; color: var(--white); font-size: 14px; font-weight: 700; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
@media (max-width: 480px) { .sv-reg-cover { margin: -16px -16px 14px; } .sv-reg-cover-text { padding: 0 16px 14px; } .sv-reg-cover-text h3 { font-size: 20px; } }

/* progress as a comet: the line keeps its colour (lime, orange for the play-off part) and ends in a glossy teardrop with a pointed tail.
   Used by the bars (season page, home page, schedule list) and by the line of the running season in the timeline on the home page. */
.home-bar { overflow: visible; }
.home-bar i, .home-tl-beam i { --c: var(--green); position: relative; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 35%, transparent) 0%, color-mix(in srgb, var(--c) 85%, transparent) 70%, var(--c) 100%); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 85%, transparent)); }
.home-phase.po .home-bar i { --c: var(--orange); }
.home-bar i::after, .home-tl-beam i::after { content: ''; position: absolute; right: -4px; top: 50%; width: 28px; height: 10px; transform: translateY(-50%); transform-origin: 75% 50%;
  background: radial-gradient(ellipse 2.8px 1px at 20.5px 2.6px, rgba(255, 255, 255, 0.8), transparent), radial-gradient(circle at 74% 46%, #fff 0%, color-mix(in srgb, var(--c) 18%, #fff) 28%, var(--c) 72%);
  clip-path: path('M0 5 C 7.9 5, 11.4 0.2, 20.2 0.2 A 4.8 4.8 0 0 1 20.2 9.8 C 11.4 9.8, 7.9 5, 0 5 Z'); }
.home-bar i[style*="width:0%"], .home-bar i[style*="width:0;"] { filter: none; }
.home-bar i[style*="width:0%"]::after, .home-bar i[style*="width:0;"]::after { display: none; }
@keyframes beam-drop { 0%, 100% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(-50%) scale(1.08); } }
@media (prefers-reduced-motion: no-preference) { .home-bar i::after, .home-tl-beam i::after { animation: beam-drop 1.8s ease-in-out infinite; } }

/* the big "Priebeh série" bar (season page, home page): a slightly larger drop */
.home-phases .home-bar i::after { right: -5px; width: 46px; height: 16px;
  background: radial-gradient(ellipse 4.3px 1.6px at 33px 4.3px, rgba(255, 255, 255, 0.8), transparent), radial-gradient(circle at 74% 46%, #fff 0%, color-mix(in srgb, var(--c) 18%, #fff) 28%, var(--c) 72%);
  clip-path: path('M0 8 C 13 8, 18.7 0.4, 33 0.4 A 7.6 7.6 0 0 1 33 15.6 C 18.7 15.6, 13 8, 0 8 Z'); }

/* the line of the running season in the timeline on the home page */
.home-timeline { padding-top: 14px; margin-top: -12px; }
.home-tl.now::before { background: rgba(255, 255, 255, 0.2); }
.home-tl-beam { position: absolute; top: 6px; left: 0; right: -12px; height: 2px; z-index: 1; pointer-events: none; }
.home-tl-beam i { display: block; width: var(--p); height: 100%; }

/* the "additional info" of a match has no length limit: the box grows with the text (and can be dragged larger) */
#edit-match-notes, #notes { min-height: 130px; max-height: 60vh; resize: vertical; field-sizing: content; font-weight: 300; line-height: 1.5; }

/* a finished series: the whole bar full and solid red in both parts, the drop only at the very end */
.home-season.done .home-bar i, .home-season.done .home-phase.po .home-bar i { --c: #ff3b3b; background: var(--c); }
.home-season.done .home-phase.po .home-bar { background: rgba(255, 255, 255, 0.16); box-shadow: none; }
.home-season.done .home-phase.po .lbl b { color: var(--white); }
.home-season.done .home-phase.basic .home-bar i::after { display: none; }