/* ============================================================
   TORNEIGS D'ESCACS DE CATALUNYA · Estil
   Paleta inspirada en marc-lozano-escacs-punch.html
   ============================================================ */

:root {
  /* ---- MODE CLAR "ESPECTRE" (aurora + vidre, alt contrast) ---- */
  --bg:        #f5f5f7;   /* el gris clar d'apple.com */
  --bg2:       #ffffff;
  --surface:   #ffffff;
  --surface-2: #ececf0;
  /* Res de text gris: la jerarquia la fan la mida i el pes, no la
     descolorida. L'unic to clar es --ink-ghost, i nomes per a
     placeholders, que han de semblar buits. */
  --ink:       #060b16;
  --ink-soft:  #18202f;
  --ink-faint: #333d52;
  --ink-ghost: #6e7b92;
  --line:      rgba(6,11,22,.13);
  --line-strong:rgba(6,11,22,.26);
  /* superfícies de vidre (només mode clar) */
  --glass:     rgba(255,255,255,.94);
  --glass-2:   rgba(255,255,255,.86);
  --glass-3:   rgba(255,255,255,.96);   /* taula */
  --glass-card:rgba(255,255,255,.97);   /* targetes */
  --card-line: rgba(13,17,23,.08);      /* cantell de targetes i taula */
  --blur:      blur(10px) saturate(1.05);
  /* Capçalera i peu SENSE fons propi: l'aurora del body ha de continuar
     de dalt a baix sense bandes. */
  --band:      transparent;

  /* ---- Paleta de sistema (referencia: colors de sistema d'Apple) ----
     Cada to te una feina assignada i no se'n surt. Dues variants per to:
     la viva, per a farcits, punts i distintius; i la profunda (-ink),
     per quan el to ha de ser TEXT sobre un farcit clar, on la viva no
     arribaria a llegir-se.

       indigo   accent del lloc, elo estandard
       blau     elo rapid, torneigs propers
       turquesa elo llampec
       verd     torneig en joc
       gris     torneig finalitzat
       purpura  GM      vermell IM
       taronja  FM      groc    CM
       rosa     "Nou", favorits, destacats
  */
  --violet: #5856d6;   --violet-ink:#443fbb;   --violet-bg:#e9e8fb;   /* indigo */
  --cyan:   #0a84ff;   --cyan-ink:  #0062cc;   --cyan-bg:  #e2efff;   /* blau */
  --teal:   #00c7be;   --teal-ink:  #00736c;   --teal-bg:  #dcf6f4;   /* turquesa */
  --green:  #2da160;   --green-ink: #1b7544;   --green-bg: #dcf3e5;   /* verd equilibrat */
  --slate:  #8e8e93;   --slate-ink: #55555c;   --slate-bg: #eceef1;   /* gris */
  --pink:   #ff2d55;   --pink-ink:  #c40e33;   --pink-bg:  #ffe3e9;   /* rosa */

  --tit-gm: #9c27b0;   /* purpura */
  --tit-im: #d32f2f;   /* vermell */
  --tit-fm: #f57c00;   /* taronja */
  --tit-cm: #ffb300;   /* ambre */

  /* Noms historics conservats perque els fan servir regles antigues */
  --orange: #ff9500;   --orange-ink:#a35c00;   --orange-bg:#ffeed6;   /* taronja · propers */
  --amber:  var(--orange);  --amber-bg: var(--orange-bg);   /* nom historic */
  --lime:   var(--teal);   --lime-bg:  var(--teal-bg);

  --accent: var(--violet);
  --on-accent: #ffffff;   /* text sobre fons d'accent (clar: blanc) */
  --shadow: 0 1px 2px rgba(15,22,38,.05), 0 8px 26px rgba(15,22,38,.07);
  --shadow-lg: 0 18px 48px rgba(15,22,38,.16);
  --radius: 18px;

  /* Dues families, sense excepcions: Bricolage nomes als titulars,
     Google Sans Flex a tot la resta. --mono es conserva com a nom
     historic perque el fan servir moltes regles, pero apunta al cos. */
  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --body:"Google Sans Flex", system-ui, -apple-system, sans-serif;
  --mono:"Google Sans Flex", system-ui, -apple-system, sans-serif;
  --maxw: 1200px;
}

html.dark {
  /* ---- MODE FOSC (paleta "punch") ---- */
  --bg:        #0a0a0f;
  --bg2:       #12121c;
  --surface:   #15151f;
  --surface-2: #1c1c28;
  --ink:       #ffffff;
  --ink-soft:  #c7c5d6;
  --ink-faint: #8a889c;
  --ink-ghost: rgba(255,255,255,.34);
  --line:      rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.22);

  --lime:   #c6ff3f;
  --lime-bg:rgba(198,255,63,.14);
  --violet: #9d86ff;
  --violet-bg:rgba(123,92,255,.20);
  --cyan:   #3fe0ff;
  --cyan-bg:rgba(63,224,255,.16);
  --pink:   #ff5c9d;
  --pink-bg:rgba(255,92,157,.18);
  --amber:  #ffb84d;
  --amber-bg:rgba(255,184,77,.16);
  --green:  #4ade80;
  --green-bg:rgba(74,222,128,.16);
  --slate:  #94a3b8;
  --slate-bg:rgba(148,163,184,.16);
  --teal:   #2dd4bf;
  --teal-bg:rgba(45,212,191,.16);

  --accent: var(--lime);
  --on-accent: #0a0a0f;   /* text sobre fons d'accent (fosc: negre) */
  --shadow: 0 2px 6px rgba(0,0,0,.4);
  --shadow-lg: 0 14px 50px rgba(0,0,0,.55);
  --glass:   var(--surface);
  --glass-2: var(--surface-2);
  --glass-3: var(--surface);
  --glass-card: var(--bg2);
  --card-line: var(--line);
  --blur:    none;
  --band:    var(--bg2);
}

* { margin:0; padding:0; box-sizing:border-box; }

/* Transicions de tema NOMÉS en propietats de color, i desactivades en càrrega */
html.no-transition *,
html.no-transition *::before,
html.no-transition *::after { transition: none !important; }

html { scroll-behavior:smooth; overflow-x:hidden; max-width:100%; scrollbar-gutter:stable; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  /* Mateix render a tot el lloc: el suavitzat en escala de grisos es
     uniforme tant si l'element viu al flux normal com si esta en una
     capa del compositor, i evita que les targetes i la taula es vegin
     diferent. La Google Sans Flex hi guanya definicio. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11" on, "calt" on, "kern" on, "liga" on;
  letter-spacing: 0.012em;
  overflow-x: hidden;
  max-width: 100%;
  min-height: 100vh;
}
::selection { background: var(--accent); color: var(--on-accent); }
a { color: inherit; text-decoration: none; }

.hidden { display: none !important; }

.wrap { width:100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; min-width:0; }

/* ---- Aurora del mode clar: capa fixa de degradats, sense blur ni
   animació (barata i visible també en mòbil) ---- */
html:not(.dark) body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  /* Aurora discreta: el color viu als marges i el centre queda net,
     que és on hi ha les targetes i la taula. Fora el rosa, que queia
     just darrere del contingut i era el que feia soroll. Paleta
     reduïda a violeta de marca amb un toc de cian a dalt a la dreta.
     Per pujar o baixar la intensitat, toca només les opacitats. */
  background:
    radial-gradient(960px 660px at -8% -16%, rgba(109,61,255,.085), transparent 62%),
    radial-gradient(800px 560px at 106% -8%, rgba(8,145,178,.055), transparent 60%),
    radial-gradient(860px 660px at 50% 120%, rgba(99,102,190,.04), transparent 64%);
}

/* ---- Blobs (només mode fosc) ---- */
.blob { display:none; position:fixed; border-radius:50%; filter:blur(100px); opacity:.4; z-index:0; pointer-events:none; }
html.dark .blob { display:block; animation:float 20s ease-in-out infinite; }
.blob.b1 { width:460px; height:460px; background:var(--violet); top:-180px; left:-140px; }
.blob.b2 { width:400px; height:400px; background:var(--pink); top:25%; right:-180px; animation-delay:-7s; }
.blob.b3 { width:360px; height:360px; background:var(--cyan); bottom:-140px; left:25%; animation-delay:-13s; opacity:.3; }
@keyframes float { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-30px) scale(1.08)} 66%{transform:translate(-30px,30px) scale(.95)} }

.page { display:flex; flex-direction:column; min-height:100vh; position:relative; z-index:1; }

/* ============================================================
   VIDRE (només mode clar) — les superfícies deixen passar
   l'aurora del fons. En mode fosc --blur és `none` i els
   fons tornen a ser opacs, així que aquest bloc no hi actua.
   ============================================================ */
/* --- Superfícies translúcides SENSE desenfocat ---
   Són moltes (una per fila, una per targeta) i algunes es mouen o
   canvien de fons en passar-hi el rató. Amb backdrop-filter cada
   hover obliga a recalcular el desenfocat i l'animació va a
   batzegades, així que aquí només hi ha transparència. */
/* El vidre viu als tokens (--glass*, --blur), no en regles
   `html:not(.dark) .x`: aquelles puntuaven 0-2-1 i guanyaven a
   `.chip.active` o `.fav-btn.active` (0-2-0), que és per què els
   filtres actius perdien el fons de color. En mode fosc els tokens
   apunten a les superfícies opaques i --blur val `none`, així que
   no cal cap excepció. */

/* ============================================================
   AVISOS (bloc de notificació sobre el títol)
   ============================================================ */
.avisos-box {
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw); margin:0 auto; padding:14px 24px 0;
  display:flex; flex-direction:column; gap:10px;
}
.avis {
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:12px; padding:15px 48px;
  background:var(--cyan-bg); border:none; border-radius:14px;
  color:var(--cyan); font-weight:600; text-align:center;
}
.avis-ic { flex:none; display:inline-flex; align-items:center; font-size:1.1rem; }
.avis-text { line-height:1.4; }
.avis-text-link { color:inherit; text-decoration:none; }
.avis-text-link:hover { text-decoration:underline; }
.avis-link { display:inline-flex; vertical-align:middle; align-items:center; }
.avis-close {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  display:grid; place-items:center; width:30px; height:30px; border-radius:8px;
  background:none; border:none; color:var(--ink-faint); cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.avis-close:hover { background:var(--surface-2); color:var(--ink); }

/* ============================================================
   ETIQUETA CCAT (Circuit Català) i FILA/GRUP DESTACAT
   ============================================================ */
.ccat-tag {
  display:inline-flex; align-items:center; vertical-align:middle;
  margin-right:8px; padding:2px 7px; border-radius:6px; font-family:var(--body);
  font-size:.68rem; font-weight:800; letter-spacing:.05em;
  background:var(--cyan); color:#fff; line-height:1.3; white-space:nowrap;
  position:relative; top:-1px;
}
html.dark .ccat-tag { background:var(--cyan); color:#0a0a0f; }

/* Marca amb degradat (només mode clar; en fosc el lime pla ja té prou força) */
html:not(.dark) .knight { background:linear-gradient(140deg,#7c4dff,#e11d6f); box-shadow:0 8px 22px rgba(109,61,255,.35); }
html:not(.dark) .brand-title {
  /* Degradat original: aquests tres valors no surten de la paleta de
     dades, son la marca. No els toquis en canviar els tokens. */
  background:linear-gradient(96deg, #14151f 30%, #6d3dff 70%, #e11d6f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Icona del grup (SVG lineal): trofeu, llamp, bandera, calendari */
.month-ico {
  flex:none; display:flex; align-items:center; justify-content:center;
  width:22px; height:30px; color:var(--accent); margin-right:-6px;
}
.month-ico.ico-featured   { color:var(--amber); }
.month-ico.ico-inprogress { color:var(--green); }
.month-ico.ico-finished   { color:var(--slate); }
.month-group.is-featured .table-card {
  border-color:var(--line);
}
.card-featured .card-top-bar { background:var(--amber); }

/* A la vista TAULA, el grup Destacats es mostra sempre com a targetes
   (també en mòbil: una per fila, amb cartell si n'hi ha). */

/* Amplada de les targetes destacades segons quantes n'hi hagi:
   1 → 1/2 de l'amplada, 2 i 3 → 1/3 cadascuna, 4 o més → 1/4. */
.featured-as-cards[data-cols="1"] .cards-grid,
.featured-as-cards[data-cols="2"] .cards-grid,
.featured-as-cards[data-cols="3"] .cards-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
.featured-as-cards[data-cols="4"] .cards-grid { grid-template-columns:repeat(4, minmax(0,1fr)); }

@media (max-width: 1180px) {
  .featured-as-cards[data-cols="4"] .cards-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width: 960px) {
  .featured-as-cards[data-cols="2"] .cards-grid,
  .featured-as-cards[data-cols="3"] .cards-grid,
  .featured-as-cards[data-cols="4"] .cards-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
}


/* ---------- Cartell als destacats ----------
   Si hi ha cartell, la targeta sempre es mostra horitzontal a mitja amplada
   (2 columnes). 3 destacats → el tercer sota el primer, meitat dreta buida.
   Sense cartell (o si el hotlink falla) es manté el disseny habitual. */
.card-poster { display:none; }
/* Només a la vista Taula (.featured-as-cards): a la vista Targetes els destacats
   es mostren com la resta de targetes, sense cartell */
.featured-as-cards .cards-grid:has(.card.has-poster) { grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
.featured-as-cards .card.has-poster { flex-direction:row; }
.featured-as-cards .card.has-poster .card-top-bar { width:5px; height:auto; align-self:stretch; flex:none; }
.featured-as-cards .card.has-poster .card-poster {
  display:block; flex:0 0 150px; align-self:stretch; position:relative; background:var(--line);
  border-right:1px solid var(--line);
}
/* La imatge és absoluta: no marca l'alçada de la targeta (la marca el text) i es retalla per sota */
.card-poster img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:top; cursor:zoom-in; }

/* Targeta destacada compacta a escriptori (vista Taula):
   data en una línia; temps, elo i ritme junts a la següent; botons petits */
.featured-as-cards .card .card-body { padding:14px 16px; gap:9px; }
.featured-as-cards .card .card-title { font-size:1.05rem; letter-spacing:-0.03em;}
.featured-as-cards .card .card-meta { flex-direction:row; flex-wrap:wrap; gap:6px 14px; }
.featured-as-cards .card .meta-row { font-size:.9rem; gap:6px; }
.featured-as-cards .card .meta-row:first-child { flex-basis:100%; }
.featured-as-cards .card .meta-row svg { width:16px; height:16px; }
.featured-as-cards .card .card-foot { padding-top:9px; gap:8px; justify-content:flex-start; margin-top:0; }
.featured-as-cards .card .card-link { flex:0 0 auto; min-width:0; min-height:34px; height:34px; padding:0 16px; font-size:.84rem; }

@media (max-width: 960px) {
  .featured-as-cards .card.has-poster .card-poster { flex-basis:120px; }
}
/* Mòbil: una targeta per fila, sense cartell (targeta vertical normal) */
@media (max-width: 820px) {
  .cards-grid[data-cols="1"],
  .cards-grid[data-cols="2"],
  .cards-grid[data-cols="3"],
  .cards-grid[data-cols="4"],
  .featured-as-cards .cards-grid:has(.card.has-poster) { grid-template-columns:1fr !important; }
  .featured-as-cards .card.has-poster { flex-direction:column; }
  .featured-as-cards .card.has-poster .card-top-bar { width:100%; height:5px; }
  .featured-as-cards .card.has-poster .card-poster { display:none; }

  .featured-as-cards .card .card-body { padding:12px 14px; gap:8px; }
  .featured-as-cards .card .card-title { font-size:1.02rem; }
  .featured-as-cards .card .status-badge { padding:4px 9px; font-size:.72rem; }
  .featured-as-cards .card .meta-row { font-size:.88rem; }
  .featured-as-cards .card .card-foot { padding-top:8px; }
  .featured-as-cards .card .card-link { min-height:36px; height:36px; font-size:.86rem; }
}

/* Els botons de les targetes destacades van sense icona: al mockup
   són pastilles de text pur i el peu de la targeta es llegeix més net. */
.card .card-foot .card-link svg { display:none; }
.card .card-foot .card-link { gap:0; }
.card .card-foot .card-link.live svg { display:inline-flex; }

/* Lightbox del cartell */
.lightbox {
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(0,0,0,.86); cursor:zoom-out; animation:lb-in .18s ease-out;
}
.lightbox img { max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
body.lightbox-open { overflow:hidden; }
@keyframes lb-in { from { opacity:0; } to { opacity:1; } }

/* Partner: destacat premium (de pagament). Badge amb estrella + text. */
.partner-badge {
  display:inline-flex; align-items:center; gap:4px; vertical-align:middle;
  margin-right:8px; padding:2px 8px; border-radius:6px; font-family:var(--body);
  font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  background:#a333c8; color:#fff; line-height:1.3; white-space:nowrap;
  position:relative; top:-1px;
}
.partner-badge .star { font-size:.78rem; line-height:1; }
html.dark .partner-badge { background:#d98ef0; color:#2a0a35; }

/* Live: retransmissió en directe. Badge vermell amb punt pulsant. */
.live-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 8px; border-radius:6px; font-family:var(--body);
  font-size:.68rem; font-weight:800; letter-spacing:.04em; text-decoration:none;
  background:#e0245e; color:#fff; line-height:1.3; white-space:nowrap; transition:.15s;
}
.live-badge:hover { background:#c01e50; }
.live-inline { margin-right:8px; white-space:nowrap; }
.live-inline .live-badge { vertical-align:middle; position:relative; top:-1px; }
.live-dot {
  width:6px; height:6px; border-radius:50%; background:currentColor; flex:none;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);
}
/* El pols només quan hi ha retransmissió activa (torneig en joc) */
.is-live .live-dot { animation:livePulse 1.4s infinite; }
@keyframes livePulse {
  0% { box-shadow:0 0 0 0 rgba(255,255,255,.6); }
  70% { box-shadow:0 0 0 5px rgba(255,255,255,0); }
  100% { box-shadow:0 0 0 0 rgba(255,255,255,0); }
}
.card-link.live {
  display:inline-flex; align-items:center; gap:5px;
  background:#e0245e; color:#fff; border:none; font-weight:700;
}
.card-link.live:hover { background:#c01e50; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top:0; z-index:50;
  background: var(--band);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--line);
}
.header-in { display:flex; align-items:center; justify-content:space-between; height:88px; gap:16px; }
.brand { display:flex; align-items:center; gap:14px; min-width:0; }
.knight {
  flex:none; width:54px; height:54px; display:grid; place-items:center;
  background: var(--accent); color:var(--on-accent); border-radius:15px;
  font-size:1.95rem; transform:rotate(-8deg); box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent);
}
.knight.small { width:34px; height:34px; font-size:1.2rem; border-radius:10px; }
.brand-text { display:flex; flex-direction:column; min-width:0; }
.brand-title { margin:0; display:block; font-family:var(--display); font-weight:800; font-size:1.85rem; line-height:1.05; letter-spacing:-.03em; white-space:normal; overflow:visible; text-wrap:balance; }
.brand-sub { font-size:.82rem; color:var(--ink-faint); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.header-actions { display:flex; align-items:center; gap:10px; flex:none; }

.lang { display:flex; gap:3px; background:var(--glass); border:1px solid var(--line); border-radius:999px; padding:4px;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); }
.lang button {
  font-family:var(--body); font-size:.85rem; font-weight:700; background:none; border:none;
  color:var(--ink-faint); cursor:pointer; padding:6px 13px; border-radius:999px;
  transition:background-color .15s ease, color .15s ease;
}
.lang button.active { background:var(--accent); color:var(--on-accent); }
.lang button:hover:not(.active) { color:var(--ink); }

/* ---- Selector d'idioma desplegable (visible només en mòbil) ---- */
.lang-menu { position:relative; display:none; }
.lang-menu .icon-btn { width:auto; gap:7px; padding:0 12px; }
.lang-current { font-family:var(--body); font-weight:700; font-size:.9rem; }
.lang-dropdown {
  position:absolute; top:calc(100% + 8px); right:0; z-index:80;
  display:flex; flex-direction:column; min-width:150px; padding:6px;
  background:var(--bg2); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.lang-menu.open .lang-dropdown { opacity:1; visibility:visible; transform:none; }
.lang-dropdown button {
  font-family:var(--body); font-size:.95rem; font-weight:600; text-align:left;
  background:none; border:none; color:var(--ink-soft); cursor:pointer;
  padding:10px 14px; border-radius:9px; transition:background-color .15s ease, color .15s ease;
}
.lang-dropdown button:hover { background:var(--surface-2); color:var(--ink); }
.lang-dropdown button.active { background:var(--accent); color:var(--on-accent); }

.icon-btn {
  display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  border:1px solid var(--line); background:var(--glass); color:var(--ink); cursor:pointer;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  transition:border-color .15s ease, color .15s ease, transform .15s ease;
}
.icon-btn svg { width:18px; height:18px; }
.icon-btn:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }

/* ============================================================
   MAIN / CONTROLS
   ============================================================ */
.main { flex:1; min-width:0; padding-top:32px; padding-bottom:48px; }

.controls { margin-bottom:32px; display:flex; flex-direction:column; gap:18px; }
.controls-row { display:flex; gap:14px; flex-wrap:wrap; }

.search-box { position:relative; flex:1; min-width:240px; display:flex; align-items:center; }
/* La lupa i la creu han d'anar per damunt de l'input.
   L'input porta backdrop-filter, i això li crea context d'apilament
   propi: passa a pintar-se al nivell z:0 dels elements posicionats i,
   com que al DOM va DESPRÉS de la lupa, la tapava. El z-index explícit
   torna a posar les icones al davant. */
.search-ic { position:absolute; left:14px; z-index:2; color:var(--ink-ghost); pointer-events:none; }
.search-box input {
  width:100%; height:46px; padding:0 44px 0 44px;
  background:var(--glass); border:1px solid var(--line); border-radius:12px;
  color:var(--ink); font-family:var(--body); font-size:1rem; font-weight:500;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.search-box input::placeholder { color:var(--ink-ghost); font-weight:500; }
.search-box input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.search-clear {
  position:absolute; right:10px; z-index:2; display:grid; place-items:center; width:28px; height:28px;
  border:none; border-radius:8px; background:var(--surface-2); color:var(--ink-soft); cursor:pointer; transition:.15s;
}
.search-clear:hover { background:var(--pink-bg); color:var(--pink); }

.view-switch { display:flex; gap:4px; background:var(--glass); border:1px solid var(--line); border-radius:12px; padding:3px; flex:none;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); }
.view-switch button {
  display:flex; align-items:center; justify-content:center; gap:8px; padding:0 16px; min-height:40px;
  border:none; background:none; color:var(--ink-soft); font-family:var(--body); font-size:.95rem; font-weight:700;
  border-radius:10px; cursor:pointer; transition:background-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.view-switch button.active { background:var(--accent); color:var(--on-accent); }
.view-switch button:not(.active):hover { color:var(--ink); }

/* ---- FILTRES (chips) ---- */
.filters { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.filters-label { display:flex; align-items:center; gap:7px; color:var(--ink-soft); font-weight:700; font-size:.95rem; }
.filters-label svg { color:var(--accent); }

.chip-group { display:flex; gap:7px; flex-wrap:wrap; }
.chip {
  display:inline-flex; align-items:center; gap:7px; padding:8px 15px;
  border:1px solid var(--line); background:var(--glass); color:var(--ink-soft);
  border-radius:999px; font-family:var(--body); font-size:.92rem; font-weight:700; cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background-color .15s ease, transform .15s ease;
  white-space:nowrap;
}
.chip:hover { border-color:var(--line-strong); color:var(--ink); transform:translateY(-1px); }
.chip.active { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

.chip-std.active   { background:var(--slate);  border-color:var(--slate);  color:#fff; }
.chip-rap.active   { background:var(--cyan);   border-color:var(--cyan);   color:#fff; }
.chip-blz.active   { background:var(--pink);   border-color:var(--pink);   color:#fff; }
.chip-upcoming.active   { background:color-mix(in srgb, var(--amber) 62%, #000); border-color:color-mix(in srgb, var(--amber) 62%, #000); color:#fff; }
.chip-inprogress.active { background:color-mix(in srgb, var(--green) 80%, #000); border-color:color-mix(in srgb, var(--green) 80%, #000); color:#fff; }
.chip-finished.active { background:color-mix(in srgb, var(--slate) 66%, #000); border-color:color-mix(in srgb, var(--slate) 66%, #000); color:#fff; }

.chip-dot { width:9px; height:9px; border-radius:50%; flex:none; }
.chip-upcoming   .chip-dot { background:var(--amber); }
.chip-inprogress .chip-dot { background:var(--green); }
.chip-finished   .chip-dot { background:var(--slate); }
.chip.active .chip-dot { background:#fff; opacity:.75; }
.chip-finished.active .chip-dot { background:#fff; opacity:.7; }

/* En mode fosc, els colors intensos són neó (clars): el text ha de ser fosc */
html.dark .chip-rap.active,
html.dark .chip-blz.active,
html.dark .chip-upcoming.active,
html.dark .chip-inprogress.active,
html.dark .chip-std.active,
html.dark .chip-finished.active { color:#0a0a0f; }
html.dark .chip.active .chip-dot { background:#0a0a0f; opacity:.55; }

.chip-sep { width:1px; height:26px; background:var(--line); margin:0 2px; }

/* ------------------------------------------------------------
   Escriptori: cada família de filtres és un ÚNIC control
   segmentat (rectangle arrodonit amb divisors verticals).
   En mòbil (drawer) els chips segueixen sent pastilles soltes.
   ------------------------------------------------------------ */
@media (min-width: 821px) {
  .chip-group {
    display:inline-flex; align-items:stretch; flex-wrap:nowrap; gap:0; height:42px;
    border:1px solid var(--line); border-radius:12px; overflow:hidden;
    background:var(--glass);
    backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  }
  .chip-group .chip {
    height:auto; padding:0 14px; border:none; border-radius:0;
    box-shadow:none; transform:none;
  }
  /* només els inactius perden el fons: els .active conserven el seu color */
  .chip-group .chip:not(.active) { background:transparent; }
  .chip-group .chip + .chip { border-left:1px solid var(--line); }
  .chip-group .chip:hover { transform:none; }
  .chip-group .chip:not(.active):hover { background:var(--surface-2); color:var(--ink); }
  /* l'actiu manté el seu color de fons i de text; només s'il·lumina una mica */
  .chip-group .chip.active:hover { filter:brightness(1.08); }
  .chip-sep { display:none; }   /* els dos rectangles ja se separen sols */
}

/* etiquetes llargues/curtes dels chips de ritme */
.lbl-short { display:none; }
.lbl-long { display:inline; }

.count-badge {
  margin-left:auto; display:inline-flex; align-items:baseline; gap:6px;
  padding:8px 16px; background:var(--glass); border:1px solid var(--line); border-radius:12px;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  font-size:.92rem; color:var(--ink-soft); font-weight:600;
}
.count-num { font-family:var(--mono); font-size:1.1rem; font-weight:700; color:var(--accent); line-height:1; letter-spacing:-.02em; }

/* ============================================================
   BARRA DE CONTROLS EN UNA SOLA LÍNIA (escriptori ample)
   ------------------------------------------------------------
   `display:contents` dissol .controls-row i .filters perquè els
   seus fills passin a ser items directes de .controls; l'ordre
   visual el fixa `order`. Per sota de 1250px es torna al layout
   de dues files (i per sota de 820px, al drawer).
   1250px = el mínim on hi cap el castellà, que és l'idioma amb
   les etiquetes més llargues (Relámpago / Finalizados).
   ============================================================ */
@media (min-width: 1250px) {
  .controls { flex-direction:row; align-items:center; flex-wrap:nowrap; gap:11px; margin-bottom:28px; }
  .controls-row, .filters { display:contents; }

  /* el buscador és l'únic element elàstic; la resta no s'encongeix mai */
  .search-box   { order:1; flex:1 1 auto; min-width:220px; }
  .filters-label{ display:none; }              /* l'embut sobra: els chips ja s'expliquen sols */
  #rhythm-chips { order:2; flex:0 0 auto; }
  #status-chips { order:3; flex:0 0 auto; }
  .fav-btn      { order:4; flex:0 0 auto; }
  .view-switch  { order:5; flex:0 0 auto; }
  .count-badge  { order:6; margin-left:0; flex:0 0 auto; }

  /* alçades homogènies a tota la barra: 42px */
  .search-box input { height:42px; }
  .view-switch { padding:3px; }
  /* selector de vista: només icones, per deixar aire als filtres */
  .view-switch button { min-height:36px; height:36px; width:44px; padding:0; gap:0; }
  .view-switch button span { display:none; }
  .view-switch button svg { width:19px; height:19px; }
  .count-badge { padding:0 15px; height:42px; align-items:center; }
}

/* ============================================================
   FAVORITS
   ============================================================ */
.fav-btn {
  display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 12px; flex:none;
  background:var(--glass); border:1px solid var(--line); border-radius:12px;
  color:var(--ink-soft); font-family:var(--body); font-size:.95rem; font-weight:700; cursor:pointer;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.fav-btn:hover { color:var(--ink); border-color:#e0245e; }
.fav-btn.has-favs svg { color:#e0245e; fill:#e0245e; }
.fav-btn.active { background:#e0245e; border-color:#e0245e; color:#fff; }
.fav-btn.active svg { color:#fff; fill:#fff; }

.fav-heart {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:28px; height:28px; border:none; background:none; border-radius:8px; padding:0;
  color:color-mix(in srgb, var(--ink-faint) 42%, transparent); cursor:pointer;
  transition:color .15s ease, transform .15s ease, background-color .15s ease;
}
.fav-heart:hover { color:#e0245e; background:color-mix(in srgb, #e0245e 10%, transparent); }
.fav-heart:active { transform:scale(.9); }
.fav-heart.is-fav { color:#e0245e; }
.fav-heart.is-fav svg { fill:#e0245e; }
.card-head-r { display:flex; align-items:center; gap:4px; flex:none; }

/* Mòbil: el botó Favorits es mou al costat del recompte */
.mobile-count .fav-btn { height:38px; padding:0 11px; flex:0 0 auto; margin-right:0; }
.mobile-count .llista-btn { height:38px; padding:0 11px; flex:0 0 auto; width:auto; }
/* netejar filtres: a l'esquerra del comptador (ja s'amaga sol si no hi ha filtres) */
.mobile-count .reset-btn { height:38px; width:38px; flex:0 0 auto; border-radius:12px; }
/* Només apareixen a la fila mòbil si hi ha algun favorit / jugador triat */
.mobile-count .fav-btn:not(.has-favs),
.mobile-count .llista-btn:not(.has-items) { display:none; }

/* ============================================================
   GRUPS
   ============================================================ */
/* min-width:0 en tota la cadena de contenidors perquè la taula
   ampla (min-width) NO infli l'amplada de la pàgina; només
   .table-scroll fa scroll horitzontal. */
.view { display:flex; flex-direction:column; gap:38px; min-width:0; max-width:100%; }
.month-group { min-width:0; max-width:100%; }
.month-group.is-finished { opacity:.82; }

.month-head {
  display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:nowrap;
  cursor:pointer; user-select:none; border-radius:12px; padding:4px; margin-left:-4px; margin-right:-4px;
  transition:background-color .15s ease;
}
.month-head:hover { background:color-mix(in srgb, var(--accent) 6%, transparent); }
.month-head:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* filet fi que omple l'espai entre el recompte i el botó de plegar.
   min-width:0 perquè, quan hi ha poc espai, s'encongeixi ell abans
   que el títol: si no, el nom del mes es parteix en dues línies. */
.month-head::after {
  content:""; order:1; flex:1 1 0; min-width:0; height:1px;
  background:var(--line); align-self:center;
}
.month-title {
  font-family:var(--display); font-weight:800; font-size:1.55rem; letter-spacing:-.035em;
  text-transform:capitalize; color:var(--ink);
}
.month-group.is-finished .month-title { color:var(--ink-faint); }
.month-count {
  font-family:var(--mono); font-size:.78rem; font-weight:500; color:var(--ink-faint); letter-spacing:0;
  background:var(--glass-2); border:1px solid var(--line); padding:3px 11px; border-radius:999px;
}
/* Botó de plegar/desplegar, empès a la dreta pel filet */
.month-toggle {
  order:2; flex:none; display:grid; place-items:center;
  width:36px; height:36px; border-radius:10px; cursor:pointer;
  background:var(--glass-2); border:1px solid var(--line); color:var(--ink-soft);
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.month-head:hover .month-toggle { border-color:var(--accent); color:var(--accent); }

/* Cos del grup: s'amaga quan el grup està plegat */
.month-group.collapsed .group-body { display:none; }
.month-group.collapsed .month-head { margin-bottom:0; }

/* ============================================================
   TAULA  (table-layout fixed => mateixes amplades a tots els mesos)
   ============================================================ */
.table-card {
  background:transparent; border:none; box-shadow:none;
  max-width:100%; min-width:0;
}
/* el scroll horitzontal viu NOMÉS aquí; width:100% + max-width el manté
   dins de la caixa encara que la taula interna sigui més ampla */
.table-scroll { overflow-x:auto; width:100%; max-width:100%; }
/* border-collapse:separate perque les cel·les puguin dur radi propi */
table.t { width:100%; border-collapse:separate; border-spacing:0; font-size:1rem; min-width:780px; table-layout:fixed; }

/* amplades fixes idèntiques per a tots els mesos; la columna del nom
   s'endú tot l'espai sobrant */
table.t col.c-name   { width:auto; }
table.t col.c-date   { width:76px; }
table.t col.c-end    { width:70px; }
table.t col.c-day    { width:56px; }
table.t col.c-rhythm { width:68px; }
table.t col.c-time   { width:112px; }
table.t col.c-cat    { width:80px; }
table.t col.c-inscrits { width:70px; }
table.t col.c-info     { width:50px; }
table.t col.c-fav      { width:40px; }
/* escriptori: padding lateral mínim a les columnes interiors */
@media (min-width: 821px) {
  table.t:not(.t-jug) thead th:not(:first-child),
  table.t:not(.t-jug) tbody td:not(:first-child) { padding-left:4px; padding-right:4px; }
  table.t:not(.t-jug) thead th:last-child,
  table.t:not(.t-jug) tbody td:last-child { padding-right:10px; }
}

/* Capçalera realment flotant: cap fons, cap vora. Les etiquetes viuen
   sobre el paper de la pàgina i el bloc blanc comença a la primera fila
   de dades, que és qui porta les cantonades arrodonides. */
table.t thead th {
  text-align:left; padding:6px 8px 10px; font-weight:700; font-size:.7rem;
  text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-faint);
  background:transparent; border:none;
  white-space:nowrap; user-select:none;
}
/* Sense border-radius: les capceleres formen una franja continua, no
   una filera de pastilles independents. */
table.t thead th.sortable { cursor:pointer; transition:color .15s ease, background-color .15s ease; }
table.t thead th.sortable:hover { color:var(--accent); }
table.t thead th.sorted { color:var(--ink); font-weight:700; }
.th-in { display:inline-flex; align-items:center; gap:6px; }
.sort-ic { opacity:.45; transition:.15s; flex:none; }
th.sorted .sort-ic { opacity:1; color:var(--accent); }
table.t thead th.center { text-align:center; }
table.t thead th.center .th-in { justify-content:center; }

table.t tbody td {
  padding:9px 8px; vertical-align:middle; background:var(--surface);
  border-bottom:1px solid var(--line);
}
table.t tbody tr:first-child td { border-top:1px solid var(--line); }
table.t tbody td:first-child { border-left:1px solid var(--line); }
table.t tbody td:last-child  { border-right:1px solid var(--line); }
table.t tbody tr:first-child td:first-child { border-top-left-radius:var(--radius); }
table.t tbody tr:first-child td:last-child  { border-top-right-radius:var(--radius); }
table.t tbody tr:last-child  td:first-child { border-bottom-left-radius:var(--radius); }
table.t tbody tr:last-child  td:last-child  { border-bottom-right-radius:var(--radius); }
table.t tbody tr { transition:background-color .15s; }
table.t tbody tr:hover td { background:color-mix(in srgb, var(--accent) 8%, var(--surface)); }
table.t tbody tr.row-finished td { color:var(--ink-faint); }

.t-name { display:flex; align-items:center; gap:5px; }
/* Nomes queda el punt d'estat: el cor ha passat a l'ultima columna */
.t-name-lead { display:flex; align-items:center; flex:none; }
.t-name-lead .status-dot { margin:0 6px 0 2px; }
.status-dot { width:10px; height:10px; border-radius:50%; flex:none; box-shadow:0 0 0 4px color-mix(in srgb, currentColor 20%, transparent); }
.dot-upcoming   { background:var(--amber); color:var(--amber); }
.dot-inProgress { background:var(--green); color:var(--green); }
.dot-finished   { background:var(--slate); color:var(--slate); }
.t-name-text { font-weight:600; font-size:.97rem; letter-spacing:-0.008em; color:var(--ink); line-height:1.3; }
/* A escriptori les etiquetes flueixen dins el text; en mòbil el media query
   les converteix en una fila pròpia sobre el nom. */
.t-badges { display:inline; }
.row-finished .t-name-text { color:var(--ink-soft); }
/* Nom del torneig: tota la cel·la és clicable (l'enllaç s'estén amb ::after).
   El badge Live queda per sobre i conserva el seu propi enllaç. */
table.t td.c-name-cell { position:relative; }
table.t td.c-name-cell.has-link { cursor:pointer; }
.t-name-link { color:inherit; text-decoration:none; }
.t-name-link::after { content:""; position:absolute; inset:0; }
table.t tbody tr:hover .t-name-link { color:var(--accent); }
.t-name-link:focus-visible { outline:none; }
.t-name-link:focus-visible::after { outline:2px solid var(--accent); outline-offset:-3px; border-radius:inherit; }
.t-badges .live-badge { position:relative; z-index:1; }
td.center { text-align:center; }
.t-date { font-family:var(--mono); font-weight:500; color:var(--ink); white-space:nowrap; font-size:.86rem; letter-spacing:0; font-variant-numeric:tabular-nums; }
.t-muted { font-family:var(--mono); color:var(--ink-soft); white-space:nowrap; font-size:.84rem; font-weight:500; letter-spacing:0; font-variant-numeric:tabular-nums; }
/* La columna de temps ha d'encabir controls llargs (ex. 90/40 SD/30 +30)
   en una sola línia, amb un padding lateral mínim perquè no robi amplada
   a la columna del nom. */
table.t th.c-time-cell, table.t td.c-time-cell { padding-left:6px; padding-right:6px; }
/* la taula respira als extrems, però no entre columnes interiors */
table.t thead th:first-child, table.t tbody td:first-child { padding-left:16px; padding-right:14px; }
table.t thead th:last-child,  table.t tbody td:last-child  { padding-right:16px; }
table.t td.c-time-cell .t-muted { white-space:nowrap; }

.rhythm-badge {
  display:inline-flex; align-items:center; padding:3px 8px; border-radius:6px;
  font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.05em; cursor:pointer;
  transition:transform .15s ease; border:1px solid transparent;
}
.rhythm-badge:hover { transform:translateY(-1px) scale(1.04); }
.rb-STD { background:var(--violet-bg); color:var(--violet-ink); }
.rb-RAP { background:var(--cyan-bg);   color:var(--cyan-ink); }
.rb-BLZ { background:var(--teal-bg);   color:var(--teal-ink); }
html.dark .rb-STD { color:#cbd5e1; }

.cat-pill { display:inline-block; vertical-align:middle; max-width:100%; font-size:.92rem; line-height:1.35; font-weight:500; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.link-btn {
  display:inline-grid; place-items:center; width:32px; height:32px; border-radius:9px;
  border:1px solid var(--line); background:var(--glass-2); color:var(--ink-soft);
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.link-btn:hover { background:var(--accent); border-color:var(--accent); color:var(--on-accent); transform:translateY(-2px); box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); }
.link-btn.is-empty { opacity:.3; pointer-events:none; }
.link-inscrits:hover { background:var(--cyan); border-color:var(--cyan); box-shadow:0 6px 16px color-mix(in srgb, var(--cyan) 35%, transparent); }

/* ============================================================
   TARGETES
   ============================================================ */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); gap:16px; }
.card {
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--glass-card); border:1px solid var(--card-line); border-radius:var(--radius);
  box-shadow:var(--shadow); transition:transform .25s, box-shadow .25s, border-color .25s;
}
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.card-top-bar { height:5px; width:100%; }
.bar-upcoming   { background:var(--amber); }
.bar-inProgress { background:var(--green); }
.bar-finished   { background:var(--slate); }
.card-body { padding:18px; display:flex; flex-direction:column; gap:12px; flex:1; }
.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.card-title { font-family:var(--display); font-weight:700; font-size:1.1rem; line-height:1.2; letter-spacing:-.03em; color:var(--ink); }
.status-badge {
  flex:none; display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px;
  font-size:.74rem; font-weight:700; white-space:nowrap;
}
.sb-upcoming   { background:var(--amber-bg); color:var(--amber); }
.sb-inProgress { background:var(--green-bg); color:var(--green); }
.sb-finished   { background:var(--slate-bg); color:var(--slate); }
html.dark .sb-finished { color:#cbd5e1; }

.card-meta { display:flex; flex-direction:column; gap:7px; }
.meta-row { display:flex; align-items:center; gap:9px; color:var(--ink-soft); font-size:.92rem; line-height:1.3; font-weight:500; }
.meta-row svg { flex:none; color:var(--accent); }
.meta-row strong { font-family:var(--mono); color:var(--ink); font-weight:500; font-size:.9em; letter-spacing:0; font-variant-numeric:tabular-nums; }

.card-foot { display:flex; align-items:center; gap:9px; padding-top:11px; border-top:1px solid var(--line); margin-top:auto; }
.card-link {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 13px;
  border-radius:11px; font-weight:800; font-size:.9rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card-link.primary { background:var(--accent); color:var(--on-accent); }
.card-link.secondary { background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line); }
html:not(.dark) .card-link.primary {
  background:linear-gradient(120deg,#6d3dff,#a855f7);
  box-shadow:0 6px 18px rgba(109,61,255,.32);
}
.card-link:hover { transform:translateY(-2px); box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent); }
.card-link.is-empty { display:none; }

/* Destacats: sense ombres ni efecte de hover, com la resta del disseny */
.month-group.is-featured .card,
.month-group.is-featured .card:hover { box-shadow:none; transform:none; }
.month-group.is-featured .card-link,
html:not(.dark) .month-group.is-featured .card-link.primary,
.month-group.is-featured .card-link:hover { box-shadow:none; }

/* ============================================================
   ESTATS
   ============================================================ */
.empty, .loading { text-align:center; padding:80px 20px; }
.empty-ic { font-size:4rem; margin-bottom:16px; opacity:.4; }
.empty p, .loading p { color:var(--ink-soft); font-size:1.15rem; font-weight:600; }
/* Skeleton de càrrega: capçalera + files grises amb "shimmer" */
.loading { text-align:left; padding:0; }
.loading p { display:none; }
.skel-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; padding:4px; }
.skel-head .sk { height:26px; border-radius:8px; }
.skel-card { background:var(--glass-3); border:1px solid var(--card-line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-bottom:28px; }
.skel-row { display:flex; align-items:center; gap:16px; padding:14px 18px; border-top:1px solid var(--line); }
.skel-row:first-child { border-top:none; background:var(--surface-2); padding:12px 18px; }
.sk { display:block; height:14px; border-radius:6px; background:var(--line); position:relative; overflow:hidden; }
.sk::after {
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg2) 60%, transparent), transparent);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform:translateX(100%); } }
.sk.dot { width:12px; height:12px; border-radius:50%; flex:none; }
.sk.w1 { flex:1 1 auto; } .sk.w2 { width:80px; flex:none; } .sk.w3 { width:56px; flex:none; } .sk.w4 { width:34px; height:34px; border-radius:10px; flex:none; }
@media (max-width: 820px) { .skel-row .sk.w2, .skel-row .sk.w3 { display:none; } }

/* ============================================================
   FOOTER + GOTOP
   ============================================================ */
.site-footer { border-top:1px solid var(--line); background:var(--band); margin-top:auto; }
.foot-in { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:28px 24px; flex-wrap:wrap; }
.foot-brand { font-family:var(--display); font-weight:800; font-size:1.1rem; color:var(--ink); }
.foot-in p { color:var(--ink-faint); font-size:.95rem; font-weight:500; }

/* Enllaços del footer */
.foot-links { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* El boto de cafe ocupa una fila propia sota els enllacos i la firma */
.foot-coffee { flex:1 0 100%; display:flex; justify-content:center; margin-top:6px; }
.foot-links a {
  color:var(--ink-soft); font-weight:600; font-size:.92rem; text-decoration:none;
  padding:8px 12px; border-radius:10px; transition:.15s; white-space:nowrap;
}
.foot-links a:hover { color:var(--ink); background:var(--surface-2); }
.foot-donate {
  display:inline-flex; align-items:center; gap:8px; border-radius:10px;
  background:var(--violet); color:#fff !important; font-weight:700 !important;
  padding:9px 18px 9px 14px !important; box-shadow:0 2px 10px color-mix(in srgb, var(--violet) 35%, transparent);
}
.foot-donate:hover { background:var(--violet) !important; filter:brightness(1.08); }
.nav-link, .foot-donate { display:inline-flex; align-items:center; gap:6px; }
.nav-ic { flex:none; }

/* Distintiu "Nou" al costat d'un enllac del menu. El <sup> viu dins d'un
   .nav-link, que es inline-flex: alli el vertical-align no fa res i cal
   pujar-lo amb align-self. */
.nav-new {
  display:inline-flex; align-items:center; justify-content:center;
  margin-left:-3px; height:15px; padding:0 5px; border-radius:5px;
  font-size:.58rem; font-weight:700; line-height:1;
  letter-spacing:.06em; text-transform:uppercase;
  background:var(--pink); color:#fff;
  align-self:flex-start; margin-top:-1px;
}
.nav-new[hidden] { display:none; }
.nav-ic.ic-heart { color:#e0245e; }
.nav-ic.ic-trophy { color:var(--amber); }
html.dark .foot-donate { color:#fff !important; }

/* Menú superior (només escriptori) */
.top-nav { display:flex; align-items:center; gap:4px; }
.top-nav a {
  color:var(--ink-soft); font-weight:600; font-size:1.025rem; text-decoration:none;
  padding:7px 11px; border-radius:10px; transition:.15s; white-space:nowrap;
}
.top-nav a:hover { color:var(--ink); background:var(--surface-2); }

/* Pàgines de contingut (Sobre / Destaca) */
.content-page { max-width:760px; margin:0 auto; padding:20px 4px 40px; }
.content-page h1 { font-family:var(--display); font-weight:800; font-size:2rem; color:var(--ink); margin-bottom:18px; line-height:1.15; }
.content-page h2 { font-family:var(--display); font-weight:700; font-size:1.25rem; color:var(--ink); margin:28px 0 10px; }
.content-page p { color:var(--ink-soft); font-size:1.02rem; line-height:1.65; margin-bottom:14px; }
.content-page strong { color:var(--ink); font-weight:700; }
.content-page a { color:var(--accent); font-weight:600; text-decoration:none; }
.content-page a:hover { text-decoration:underline; }
.content-list { color:var(--ink-soft); font-size:1.02rem; line-height:1.7; margin:0 0 14px 20px; }
.content-list li { margin-bottom:6px; }
.content-note { font-size:.92rem; color:var(--ink-faint); border-left:3px solid var(--line-strong); padding-left:14px; }
.content-back { margin-top:32px; }
.content-back a { color:var(--ink-soft); }

/* Botó de tema flotant a les pàgines de contingut */
.theme-fab { position:fixed; top:18px; right:18px; z-index:50; background:var(--glass); border:1px solid var(--line); box-shadow:var(--shadow);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); }

#gotop {
  position:fixed; right:24px; bottom:24px; z-index:60; width:52px; height:52px; border-radius:50%;
  border:none; cursor:pointer; background:var(--accent); color:var(--on-accent); font-size:1.5rem; line-height:1;
  box-shadow:0 8px 26px color-mix(in srgb, var(--accent) 40%, transparent);
  opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .3s, visibility .3s, transform .3s;
}
#gotop.show { opacity:1; visibility:visible; transform:none; }

/* ============================================================
   RESPONSIVE
   Nota: alguns mòbils (Android) amb "lletra gran" del sistema
   inflen els píxels CSS, de manera que el viewport efectiu pot
   arribar a ~780px en vertical. Per això el breakpoint principal
   és ample (820px) i el layout fa servir flex-wrap robust.
   ============================================================ */

@media (max-width: 1180px) {
  .brand-title { font-size:1.55rem; line-height:1.1; }
}
@media (max-width: 1024px) {
  .wrap { padding: 0 20px; }
  .brand-title { font-size: 1.4rem; }
}

/* ============================================================
   MENÚ LATERAL (DRAWER) — per defecte ocult; només s'activa
   en mòbil. A escriptori el botó hamburguesa i el recompte
   mòbil no es mostren mai.
   ============================================================ */
.menu-btn { display: none; }
.mobile-count { display: none; }
.drawer, .drawer-overlay { display: none; }

.drawer-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in srgb, #0b1220 55%, transparent);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; z-index: 61;
  width: min(88vw, 380px); height: 100%;
  background: var(--bg2); border-left: 1px solid var(--line);
  box-shadow: none;   /* nomes en obrir-se; vegeu .ficha */
  transform: translateX(100%); transition: transform .28s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column; overflow: hidden;
  will-change: transform; contain: layout paint;
}
.drawer.open { transform: translateX(0); box-shadow: -18px 0 44px color-mix(in srgb, #0b1220 22%, transparent); }

/* Capcalera compacta: cada pixel que ocupa aqui es un pixel menys per
   als filtres, que son el motiu pel qual s'obre el calaix. */
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px 9px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.drawer-title { font-weight: 700; font-size: 1rem; color: var(--ink); }
.drawer-head .icon-btn { width: 34px; height: 34px; }
.drawer-body {
  flex: 1 1 auto; overflow-y: auto; padding: 14px 16px 20px;
  display: flex; flex-direction: column; gap: 14px;
}

/* ---- Fila mòbil sota la capçalera ----
   Cercador (elàstic) + Favorits + comptador, tots tres encapsulats i
   amb la mateixa alçada. El JS hi mou el cercador i Favorits des de
   .controls quan s'entra en mòbil. */
.mobile-count {
  align-items: center; justify-content: flex-start; gap: 8px;
  margin: 0 0 14px;
  color: var(--ink-soft); font-weight: 600; font-size: .85rem;
}
.mobile-count .count-num {
  font-family: var(--mono); font-weight: 700; font-size: 1rem;
  color: var(--accent); line-height: 1; letter-spacing:-.02em;
}
.mobile-count .count-pill {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  height: 38px; min-width: 44px; padding: 0 13px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 12px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
/* el cercador és l'únic element que s'estira; base 0 i min-width 0
   perquè no pugui inflar la fila ni desbordar-la mai */
.mobile-count { flex-wrap: nowrap; }
.mobile-count .search-box { flex: 1 1 0; min-width: 0; }
.mobile-count .search-box input {
  height: 38px; padding: 0 36px 0 38px; font-size: .92rem; border-radius: 12px;
}
.mobile-count .search-ic { left: 12px; width: 17px; height: 17px; }
.mobile-count .search-clear { right: 7px; width: 24px; height: 24px; }

/* ---- Segona fila mòbil: Club · Títol · Categoria · Gènere ----
   El JS hi mou els quatre desplegables quan s'entra en mòbil. */
.mobile-filters { display: none; }

/* MÒBIL / TAULETA EN VERTICAL */
@media (max-width: 820px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }

  /* blobs decoratius fora en mòbil (eviten qualsevol scroll lateral) */
  .blob { display: none !important; }

  /* ---- HEADER: títol a l'esquerra, hamburguesa a la dreta ---- */
  .site-header { position: static; }   /* evita problemes de sticky amb lletra gran */

  /* el drawer i el seu fons s'activen en mòbil */
  .drawer { display: flex; }
  .drawer-overlay { display: block; }
  .avisos-box { padding: 12px 10px 0; }
  .avis { padding:12px 40px 12px 16px; gap:8px; }
  .avis-ic { display:none; }
  .avis-text { line-height:1.25; }
  .header-in { min-height: 0; height: auto; padding: 14px 16px; gap: 12px; flex-wrap: nowrap; align-items: center; }
  .brand { gap: 12px; flex: 1 1 auto; min-width: 0; }
  .brand-title { font-size: 1.3rem; line-height: 1.14; white-space: normal; }
  .knight { width: 46px; height: 46px; font-size: 1.6rem; border-radius: 13px; }

  /* els controls de capçalera es mouen dins el drawer (via JS): fora del flux */
  .header-actions { display: none; }
  .menu-btn { display: inline-grid; flex: 0 0 auto; width: 48px; height: 48px; }

  /* recompte destacat sobre les llistes */
  .mobile-count { display: flex; }

  /* fila de filtres just sota el cercador i el comptador */
  .mobile-count:has(+ .mobile-filters:not(:empty)) { margin-bottom: 8px; }
  .mobile-filters:not(:empty) {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
    margin: 0 0 14px;
  }
  .mobile-filters .f-sel {
    flex: 1 1 0; width: auto; min-width: 0; max-width: none;
    height: 38px; font-size: .8rem; font-weight: 600;
    padding: 0 20px 0 9px; border-radius: 11px;
    background-position: right 4px center;
    text-overflow: ellipsis;
  }

  /* ---- CONTROLS: fora del flux principal; viuen dins el drawer ---- */
  .main { padding-top: 12px; }
  .controls { display: none; }

  /* ===== Contingut reubicat dins el DRAWER =====
     Tots els controls comparteixen la mateixa alçada (--ctrl-h),
     mida de lletra i padding perquè quedin visualment igualats. */
  .drawer-body { --ctrl-h: 42px; --ctrl-fs: .9rem; gap: 12px; }

  .drawer-body .header-actions {
    display: flex; flex-direction: row; align-items: center; gap: 10px;
    flex: 0 0 auto; justify-content: flex-start; flex-wrap: wrap;
  }
  /* .top-nav esta amagat a la capcalera en mobil, pero dins del calaix
     ha de tornar a sortir: es l'unic lloc on queden els enllacos de
     pagina. Es presenten com a llista, igual que els del peu. */
  .drawer-body .top-nav {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 7px; flex: 1 0 100%; width: 100%;
  }
  .drawer-body .top-nav a {
    display: flex; align-items: center; gap: 9px; width: 100%;
    height: var(--ctrl-h); padding: 0 14px; border-radius: 10px;
    font-size: var(--ctrl-fs); font-weight: 600;
    background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  }
  .drawer-body .top-nav a:hover { background: var(--surface-2); }
  /* Al calaix només hi queda la navegació entre llistats: Destaca i
     Col·labora ja surten al peu de pàgina. */
  .drawer-body .top-nav a[href$="destaca"],
  .drawer-body .top-nav a[href$="collabora"] { display: none; }
  /* dins el calaix l'enllaç fa 42px: el <sup> "Nou" no s'ha d'enganxar
     a dalt, sinó quedar a l'alçada del text */
  .drawer-body .top-nav .nav-new { align-self: center; margin-top: 0; }

  .drawer-body .lang { display: inline-flex; padding: 3px; }   /* torna el CA/ES/EN clàssic */
  .drawer-body .lang button { padding: 0 14px; height: calc(var(--ctrl-h) - 6px); font-size: var(--ctrl-fs); }
  .drawer-body .lang-menu { display: none; }                   /* amaga el desplegable rodó */
  .drawer-body .icon-btn { width: var(--ctrl-h); height: var(--ctrl-h); }
  .drawer .f-sel, .drawer .lang, .drawer .icon-btn, .drawer .reset-btn,
  .drawer .search-box input, .drawer .view-switch, .drawer .count-badge {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  /* els filtres de Jugadors venien amb 46px propis */
  .drawer-body .f-sel { height: var(--ctrl-h); font-size: var(--ctrl-fs); }
  .drawer-body .reset-btn, .drawer-body .llista-btn { height: var(--ctrl-h); }

  .drawer-body .controls { display: flex; flex-direction: column; gap: 18px; width: 100%; margin-bottom: 0; }
  .drawer-body .controls-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .drawer-body .search-box { width: 100%; min-width: 0; }
  .drawer-body .search-box input { min-height: var(--ctrl-h); height: var(--ctrl-h); font-size: var(--ctrl-fs); }

  /* selector de vista: dos botons iguals amb etiqueta */
  .drawer-body .view-switch { width: 100%; padding: 3px; }
  .drawer-body .view-switch button {
    flex: 1 1 0; min-height: calc(var(--ctrl-h) - 6px); height: calc(var(--ctrl-h) - 6px);
    padding: 0 12px; gap: 7px; font-size: var(--ctrl-fs);
  }
  .drawer-body .view-switch button span { display: inline; }
  .drawer-body .view-switch button svg { width: 16px; height: 16px; }

  /* filtres: etiqueta visible, chips en files netes i igualades */
  .drawer-body .filters { flex-direction: column; align-items: stretch; gap: 12px; flex-wrap: wrap; }
  .drawer-body .filters-label { display: inline-flex; font-size: var(--ctrl-fs); }
  .drawer-body .chip-sep { display: none; }
  .drawer-body .count-badge { display: none; }        /* el recompte ja surt sobre les llistes */

  /* dues columnes: ritmes a l'esquerra, estats a la dreta */
  .drawer-body .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 8px; align-items: start; }
  .drawer-body .filters-label { grid-column: 1 / -1; }
  .drawer-body #status-chips,
  .drawer-body #rhythm-chips {
    display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px; width: 100%; min-width: 0;
  }
  .drawer-body .chip {
    justify-content: center; min-height: var(--ctrl-h); height: var(--ctrl-h);
    padding: 0 10px; font-size: var(--ctrl-fs); white-space: nowrap; border-radius: 10px;
  }
  .drawer-body #rhythm-chips .lbl-long { display: inline; }   /* dins el drawer hi ha espai: etiquetes llargues */
  .drawer-body #rhythm-chips .lbl-short { display: none; }

  /* ---- DRAWER: fluïdesa de l'obertura ----
     1) El panell rep capa pròpia de compositor, així el lliscament no
        obliga a repintar l'aurora fixa (body::before) ni la llista.
     2) A dins s'hi anul·la el backdrop-filter: el panell és opac, o
        sigui que el desenfocat no es veia, però a cada fotograma de la
        translació obligava a re-mostrejar i tornar a desenfocar el fons.
        Aquesta era la causa principal de les batzegades. */
  .drawer { will-change: transform; }
  .drawer-overlay { will-change: opacity; }
  .drawer-body { overscroll-behavior: contain; }
  .drawer-body .search-box input,
  .drawer-body .view-switch,
  .drawer-body .lang,
  .drawer-body .icon-btn,
  .drawer-body .fav-btn,
  .drawer-body .count-badge,
  .drawer-body .chip-group { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* ---- TAULA: scroll horitzontal, columnes ajustades al contingut ---- */
  .table-scroll { -webkit-overflow-scrolling: touch; }
  table.t { table-layout: auto; min-width: 720px; }
  table.t col { width: auto !important; }
  table.t thead th, table.t tbody td { white-space: nowrap; padding-left:16px; padding-right:16px; }
  table.t thead th:first-child, table.t tbody td:first-child { white-space: normal; min-width: 190px; padding-left:10px; padding-right:12px; }
  table.t thead th:first-child { padding-left:16px; }
  .t-name-text { white-space: normal; }
  .t-name { gap:4px; }
  .t-name-lead { display:flex; align-items:center; flex:none; width:14px; }
  .t-name-lead .status-dot { margin:0; }
  /* Etiquetes en una línia pròpia sobre el nom, sense trencar el títol */
  .t-badges { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-bottom:4px; }
  .t-badges .partner-badge,
  .t-badges .ccat-tag { margin-right:0; top:0; }
  .t-badges .live-inline { display:inline-flex; align-items:center; margin-right:0; line-height:1; }
  .t-badges .live-inline .live-badge { top:0; }

  /* ---- TARGETES ---- */
  .cards-grid { grid-template-columns: 1fr; }
  .card-body { padding: 16px; }
  .card-foot { flex-wrap: wrap; }
  .card-link { font-size: .9rem; padding: 0 14px; min-width: 0; flex: 1 1 0; min-height: 46px; }

  /* ---- TÍTOLS DE SECCIÓ ---- */
  /* El títol del mes no s'encongeix ni es parteix: qui cedeix espai
     és el filet. Amb noms llargs (Septiembre 2026) i pantalles molt
     estretes el filet arriba a desaparèixer, i és el que toca. */
  .month-title { font-size: 1.25rem; flex: 0 0 auto; white-space: nowrap; }
  .month-count { flex: 0 0 auto; }
  .month-head { gap: 10px; }
  .month-head::after { min-width: 0; }
  .month-ico { margin-right: 0; }
  .month-toggle { width: 28px; height: 28px; border-radius: 8px; }
  .month-toggle svg { width: 15px; height: 15px; }

  .top-nav { display:none; }

  .foot-in { flex-direction: column; text-align: center; gap: 16px; padding: 26px 20px calc(26px + env(safe-area-inset-bottom)); }
  .foot-brand { font-size: 1.2rem; }
  .foot-links { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; max-width: 340px; margin: 0 auto; }
  .foot-links a { display:flex; align-items:center; justify-content:center; width:100%; padding:13px 16px; font-size:.98rem; background:var(--surface); border:1px solid var(--line); }
  .foot-links a:hover { background:var(--surface-2); }
  .foot-donate { margin-top:2px; border:none !important; background:var(--violet) !important; color:#fff !important; }
  .foot-coffee { width:100%; max-width:340px; margin:2px auto 0; }
  .foot-coffee .foot-donate { width:100%; justify-content:center; }
  .foot-in p { font-size:.9rem; margin-top:2px; }
  .content-page { padding:16px 6px 32px; }
  .content-page h1 { font-size:1.6rem; }
  #gotop { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}

/* MÒBIL ESTRET */
@media (max-width: 460px) {
  .brand-title { font-size: 1.18rem; }
  .drawer-body { --ctrl-fs: .85rem; }
  .month-title { font-size: 1.18rem; }
  .month-head { gap: 8px; }
}


/* ============================================================
   PAGINA DE JUGADORS
   ============================================================ */
/* ---- Taula ---- */
table.t-jug { min-width: 906px; }
table.t-jug col.c-jname { width: auto; }
table.t-jug col.c-e     { width: 70px; }
table.t-jug col.c-cat   { width: 92px; }
table.t-jug col.c-club  { width: 250px; }
table.t-jug col.c-pick  { width: 46px; }

/* Separació horitzontal reduïda per deixar amplada al club.
   La vertical es deixa com a style.css. */
table.t-jug th, table.t-jug td { padding-inline: 7px; }
table.t-jug th:first-child, table.t-jug td:first-child { padding-inline-start: 14px; }
table.t-jug th:last-child,  table.t-jug td:last-child  { padding-inline-end: 14px; }

/* Les capceleres FIDE ja no es tenyeixen: totes iguals, com a Torneigs.
   El color el porten les pastilles de sota, que es on aporta informacio. */
/* La fila ja no es clicable sencera: nomes la cel·la del nom obre la
   fitxa, perque la casella de la dreta es pugui marcar sense obrir res.
   L'area util es tota la columna, no nomes el text. */
td.j-open { cursor: pointer; }
td.j-open:hover .j-name-text { color: var(--accent); }
td.j-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.j-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Amplada fixa: encabeix el distintiu mes ample (WGM, WCM, WIM) perque
   tots els noms titulats comencin al mateix punt. El distintiu duu
   min-width:100%, aixi que es AQUESTA mida la que mana: tocar el padding
   del distintiu sol no l'estreny gens. */
.tit-slot { flex: none; width: 32px; display: flex; justify-content: flex-start; }
.j-name-text {
  font-weight: 600; font-size: .96rem; color: var(--ink); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.j-club {
  font-size: .8rem; font-weight: 500; color: var(--ink-soft); display: block;
  line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.j-cat {
  font-family: var(--mono); font-size: .84rem; font-weight: 500; color: var(--ink-soft);
  white-space: nowrap; letter-spacing: 0;
}
.j-inact {
  font-family: var(--mono); font-size: .68rem; font-weight: 700; color: var(--slate);
  background: var(--slate-bg); border-radius: 5px; padding: 1px 5px; flex: none;
}

/* ---- Pastilles d'elo ---- */
.elo-pill {
  display: inline-block; min-width: 52px; padding: 3px 8px; border-radius: 8px;
  background: none;
  font-family: var(--mono); font-size: .87rem; font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.elo-pill.e-cat { min-width: 46px; font-size: .86rem; }

/* ---- Distintiu de títol ---- */
.tit-badge {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 100%; padding: 3px 2px; border-radius: 5px;
  font-size: .64rem; font-weight: 600; letter-spacing: .02em;
  background: var(--slate); color: #fff;
}
/* Els codis son els de la FIDE (IM, FM, WGM...), no els catalans:
   normTitol() els tradueix abans de pintar el distintiu. */
.tit-badge.tb-GM, .tit-badge.tb-WGM { background: var(--tit-gm); }
.tit-badge.tb-IM, .tit-badge.tb-WIM { background: var(--tit-im); }
.tit-badge.tb-FM, .tit-badge.tb-WFM { background: var(--tit-fm); }
.tit-badge.tb-CM, .tit-badge.tb-WCM { background: var(--tit-cm); }
/* Mestre Català: titol autonomic, contorn en comptes de ple */
.tit-badge.tb-MC { background: transparent; color: var(--ink-soft); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
/* En fosc els farcits son els mateixos tons plens: la lletra segueix
   sent blanca, com en clar. Nomes MC, que va de contorn, fa servir tinta. */
html.dark .tit-badge { color: #fff; }
html.dark .tit-badge.tb-MC { color: var(--ink-soft); background: transparent; }

/* ---- Desplegables de filtre (a la fila de controls) ---- */
.f-sel {
  height: 46px; flex: none; cursor: pointer;
  font-family: var(--body); font-size: .95rem; font-weight: 600; color: var(--ink);
  background: var(--glass); border: 1px solid var(--line); border-radius: 12px;
  padding: 0 32px 0 14px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6d80' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html.dark .f-sel {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a7a8b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}
.f-sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.f-sel:hover { border-color: var(--line-strong); }
/* el select amb valor triat es marca amb l'accent */
.f-sel:not(:has(option[value=""]:checked)) { border-color: var(--accent); color: var(--accent); }

.f-sel-club { max-width: 180px; }
.f-sel-sm   { max-width: 150px; }
.f-sel-tit  { max-width: 100px; }
.f-sel-xs   { max-width: 124px; }

.controls-row .search-box { min-width: 160px; }
.controls-row .count-badge { flex: none; }

/* ---- Control de "la meva llista" ----
   Mateix pes visual que el selector de vista: icona i comptador. Quan
   s'activa, filtra el llistat als jugadors triats. */
.llista-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 46px; padding: 0 14px; cursor: pointer;
  background: var(--glass); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink-soft); font-family: var(--body); font-size: .95rem; font-weight: 700;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.llista-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.llista-btn.has-items { color: var(--accent); }
.llista-btn.active {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.llista-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Casella de selecció ---- */
.pick {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 4px; cursor: pointer;
  color: var(--ink-faint); font-family: var(--body); font-size: .78rem; font-weight: 600;
}
.pick-box {
  display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border: 1.5px solid var(--line-strong); border-radius: 6px;
  background: var(--surface); color: transparent;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.pick:hover .pick-box { border-color: var(--accent); }
.pick.is-on .pick-box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pick.is-on { color: var(--accent); }
.pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* Capcalera de la columna: marca o desmarca tot el conjunt filtrat.
   Desactivada mentre no hi ha filtre ni cerca. */
.pick-all { padding: 0; }
.pick-all[disabled] { cursor: default; opacity: .35; }
.pick-all[disabled] .pick-box { border-color: var(--line); }
table.t thead th.c-pick-h { padding: 6px 8px 10px; text-align: center; }

/* A la targeta, el distintiu i la casella comparteixen linia a la dreta
   de la capcalera. Flotant en absolut es trepitjaven. */
.j-head-r { display: flex; align-items: center; gap: 8px; flex: none; }

/* ---- Botó de netejar filtres ---- */
.reset-btn {
  height: 46px; width: 46px; flex: none; display: grid; place-items: center;
  cursor: pointer; color: var(--ink-soft);
  background: var(--glass); border: 1px solid var(--line); border-radius: 12px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.reset-btn:hover { color: var(--pink); border-color: var(--pink); background: var(--pink-bg); }
.reset-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reset-btn.hidden { display: none; }

/* ---- Botó "mostrar-ne més" ---- */
.more-wrap { display: flex; justify-content: center; margin: 22px 0 8px; }
.more-btn {
  padding: 11px 26px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--ink); font-family: var(--body);
  font-size: .92rem; font-weight: 600; cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.more-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); transform: translateY(-1px); }

/* ---- Targetes ---- */
.j-card { cursor: pointer; }
.j-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.j-sub { font-size: .82rem; color: var(--ink-faint); margin-top: 3px; }
.j-elos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.j-elo {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 4px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.j-elo-v { font-family: var(--mono); font-size: 1.16rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.j-elo-l { font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.j-elo.e-std .j-elo-v { color: var(--violet); }
.j-elo.e-rpd .j-elo-v { color: var(--cyan); }
.j-elo.e-blz .j-elo-v { color: var(--amber); }
.j-catline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.j-catelo { font-size: .82rem; color: var(--ink-faint); }
.j-catelo strong { font-family: var(--mono); color: var(--ink-soft); font-weight: 600; }

/* ---- Fitxa del jugador ---- */
.ficha-overlay {
  position: fixed; inset: 0; background: rgba(10,10,15,.5);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 900;
  will-change: opacity;
}
.ficha-overlay.open { opacity: 1; pointer-events: auto; }
.ficha {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(520px, 100vw);
  background: var(--bg2); border-left: 1px solid var(--line); z-index: 901;
  /* Sense ombra mentre esta tancada: el panell viu fora de pantalla, pero
     el desenfocat de l'ombra es vessa cap a l'esquerra i deixa una franja
     fosca al costat de la barra de desplacament. */
  box-shadow: none;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.32,.72,0,1);
  overflow-y: auto; overscroll-behavior: contain;
  will-change: transform; contain: layout paint;
}
.ficha.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
.ficha-inner { padding: 0 24px 40px; position: relative; }

.f-close {
  position: absolute; top: 18px; right: 18px; z-index: 2; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.f-close:hover { color: var(--accent); border-color: var(--accent); }
.f-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Capcalera: franja tenyida amb el cavall de la marca com a filigrana */
.f-head {
  position: relative; overflow: hidden;
  margin: 0 -24px 22px; padding: 30px 24px 24px 24px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg2));
  border-bottom: 1px solid var(--line);
}
.f-head::after {
  content: "\265E"; position: absolute; right: -14px; bottom: -46px;
  font-size: 170px; line-height: 1; color: var(--accent); opacity: .09;
  pointer-events: none;
}
.f-nom {
  position: relative; z-index: 1;
  /* només el nom deixa lloc a la creueta; els xips poden ocupar tota
     l'amplada encara que trepitgin la filigrana del cavall */
  padding-right: 48px;
  font-family: var(--display); font-size: 1.75rem; font-weight: 800;
  letter-spacing: -.03em; line-height: 1.08; color: var(--ink); margin: 0 0 12px;
  text-wrap: balance;
}
.f-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.f-tags .tit-slot, .card-head .tit-slot { width: auto; }
.f-tags .tit-badge, .card-head .tit-badge { min-width: 0; padding: 2px 7px; }
.f-tags .tit-badge { padding: 4px 9px; border-radius: 5px; font-size: .72rem; }
.f-club, .f-cat, .f-born {
  font-size: .8rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px;
}
.f-club { color: var(--ink); }
.f-age { color: var(--ink-faint); font-weight: 500; }
.f-inact {
  font-size: .76rem; font-weight: 700; color: var(--slate-ink); white-space: nowrap;
  background: var(--slate-bg); border-radius: 999px; padding: 3px 10px;
}
html.dark .f-inact { color: var(--slate); }

/* Blocs d'elo: FIDE (3 ritmes) i catala (2 ritmes), mateix llenguatge.
   Cada ritme porta el seu color en un fil superior i en la xifra. */
.f-elos { margin-bottom: 16px; }
.f-bigs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.f-bigs.f-bigs-2 { grid-template-columns: repeat(2, 1fr); }
.f-big {
  --k: var(--ink-faint);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 21px 6px 17px; border-radius: 14px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--k) 7%, var(--surface));
}
.f-big::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--k);
}
.f-big.e-std { --k: var(--violet); }
.f-big.e-rpd { --k: var(--cyan); }
.f-big.e-blz { --k: var(--amber); }
.f-big.e-cat { --k: var(--slate); }
.f-big-v {
  font-family: var(--display); font-size: 1.65rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--k);
}
.f-big.e-cat .f-big-v { color: var(--ink); font-size: 1.45rem; }
.f-big.is-nr { background: var(--surface); }
.f-big.is-nr::before { opacity: .35; }
.f-big-l { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.f-nr { font-family: var(--body); font-size: .82rem; font-weight: 500; color: var(--ink-ghost); letter-spacing: 0; }
.f-bigs-cap {
  text-align: center; margin: 7px 0 0;
  font-size: .84rem; font-weight: 700; color: var(--ink);
}

/* Enllacos als perfils: dues rajoles de costat */
.f-ids { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 4px 0 24px; }
.f-idlink {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--surface);
  text-decoration: none; color: var(--ink); transition: border-color .15s, background-color .15s;
}
.f-idlink:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.f-idlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.f-idlink-go { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: .9rem; font-weight: 700; color: var(--ink); }
.f-idlink-go svg { flex: none; color: var(--accent); }
.f-idlink-v { font-size: .8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* Classificacions */
.f-rows {
  display: flex; flex-direction: column; margin-bottom: 22px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden;
}
.f-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.f-row:last-child { border-bottom: none; }
.f-row-l { font-size: .88rem; font-weight: 500; color: var(--ink-soft); }
.f-row-v { font-size: .84rem; color: var(--ink-faint); text-align: right; white-space: nowrap; }
.f-row-v strong {
  font-family: var(--display); font-size: 1.15rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-right: 4px;
}

@media (max-width: 820px) {
  .ficha-inner { padding: 0 16px 28px; }
  .f-close { top: 14px; right: 14px; width: 36px; height: 36px; }
  .f-head { margin: 0 -16px 14px; padding: 20px 16px 16px 16px; }
  .f-nom { padding-right: 44px; }
  .f-tags { gap: 5px; }
  .f-head::after { font-size: 130px; bottom: -36px; }
  .f-nom { font-size: 1.4rem; margin-bottom: 10px; }
  .f-club, .f-cat, .f-born { font-size: .76rem; padding: 2px 9px; }
  .f-bigs { gap: 6px; }
  .f-big { padding: 18px 4px 15px; border-radius: 12px; gap: 4px; }
  .f-big-v { font-size: 1.3rem; }
  .f-big.e-cat .f-big-v { font-size: 1.2rem; }
  .f-big-l { font-size: .74rem; }
  .f-nr { font-size: .74rem; }
  .f-elos { margin-bottom: 12px; }
  .f-bigs-cap { margin-top: 5px; font-size: .8rem; }
  .f-ids { gap: 6px; margin: 2px 0 16px; }
  .f-idlink { padding: 9px 12px; border-radius: 12px; }
  .f-row { padding: 10px 14px; }
}

/* Atribucio de fonts, sota el llistat. Fora de #more-wrap a proposit:
   aquell contenidor s'amaga quan ja es veuen tots els resultats. */
.data-src {
  text-align: center; font-size: .78rem; color: var(--ink-ghost);
  margin: 18px 0 0;
}

/* ---- Ordre de la barra de controls (escriptori ample) ----
   Per sobre de 1250px, style.css dissol .controls-row amb
   `display:contents` i l'ordre visual el marca `order`. Els elements
   sense `order` cauen a 0 i es pinten ABANS del cercador, que té
   order:1. Aquí es numeren tots els de la pàgina de jugadors. */
@media (min-width: 1250px) {
  #sel-club    { order: 2; flex: 0 0 auto; }
  #sel-titol   { order: 3; flex: 0 0 auto; }
  #sel-cat     { order: 4; flex: 0 0 auto; }
  #sel-sexe    { order: 5; flex: 0 0 auto; }
  #btn-reset   { order: 6; flex: 0 0 auto; }
  #btn-llista  { order: 7; flex: 0 0 auto; }
  .view-switch { order: 8; }
  .count-badge { order: 9; }

  /* la barra fa 42px d'alçada en aquest punt de ruptura */
  .f-sel, .reset-btn, .llista-btn { height: 42px; }
  .reset-btn { width: 42px; }
}

/* ---- Mòbil ---- */
@media (max-width: 820px) {
  .ficha { width: 100vw; border-left: none; }
  .f-sel, .f-sel-club, .f-sel-sm, .f-sel-tit, .f-sel-xs { width: 100%; max-width: 100%; }
  .reset-btn { width: 100%; }
  .controls-row .search-box { min-width: 100%; }
  table.t-jug { min-width: 746px; }
  table.t-jug col.c-club { width: 170px; }
  .llista-btn { width: 100%; justify-content: center; }
}


/* ============================================================
   PAGINES DE CONTINGUT (collabora, destaca, legal)
   ============================================================ */
/* ---- Selector d'idioma: mostra només el bloc de la llengua activa ----
   Cada pàgina duu el text sencer tres vegades, en <div data-l="ca|es|en">.
   L'atribut data-lang de <html> el posa el mòdul de contingut de script.js. */
html[data-lang="ca"] [data-l]:not([data-l="ca"]),
html[data-lang="es"] [data-l]:not([data-l="es"]),
html[data-lang="en"] [data-l]:not([data-l="en"]) { display: none !important; }

/* ---- Capçalera de les pàgines internes ----
   No fem servir .header-actions perquè més avall s'amaga en mòbil
   (allà va dins del calaix, que aquestes pàgines no tenen). */
.page-actions { display: flex; align-items: center; gap: 10px; flex: none; }
/* Pàgina actual al menú superior */
.page-actions .top-nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }

/* ---- Contingut ---- */
.pages { max-width: 820px; }

.page-title {
  font-family: var(--display); font-weight: 800; font-size: 2rem;
  color: var(--ink); line-height: 1.15; letter-spacing: -.025em;
  margin: 8px 0 20px;
}

/* Un sol contenidor per pàgina: el text respira i no queda trossejat */
.page-card {
  background: var(--glass-card); border: 1px solid var(--card-line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 30px 32px;
}

.page-card h2 {
  font-family: var(--display); font-size: 1.18rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--ink); margin: 0 0 12px;
}

.page-card p {
  font-size: .96rem; line-height: 1.62; color: var(--ink-soft); margin: 0 0 12px;
}
.page-card p:last-child { margin-bottom: 0; }
.page-card strong, .page-card b { color: var(--ink); font-weight: 700; }

.page-card ul { margin: 0 0 12px; padding-left: 20px; }
.page-card li {
  font-size: .96rem; line-height: 1.62; color: var(--ink-soft); margin-bottom: 9px;
}
.page-card li:last-child { margin-bottom: 0; }
.page-card ul:last-child { margin-bottom: 0; }

.page-card a { color: var(--accent); text-decoration: none; font-weight: 600; }
.page-card a:hover { text-decoration: underline; }

/* Adreça de contacte o dada destacada en mono */
.page-contact { font-family: var(--mono); font-size: .9rem !important; padding-top: 4px; }

/* Paràgraf emmarcat, per a compromisos o avisos que han de ressaltar */
.page-note {
  padding: 13px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid var(--line);
}

/* Dins del contenidor, cada secció se separa de l'anterior amb un filet */
.page-card section + section {
  margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line);
}
.page-card section > *:last-child { margin-bottom: 0; }

.page-back { margin: 26px 0 0; }
.page-back a {
  color: var(--ink-soft); font-size: .92rem; font-weight: 600;
  text-decoration: none;
}
.page-back a:hover { color: var(--accent); text-decoration: underline; }

.page-date {
  text-align: center; font-family: var(--mono); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-ghost);
  margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--line);
}

@media (max-width: 820px) {
  .page-title { font-size: 1.6rem; }
  .page-card { padding: 22px 18px; }
  .page-card h2 { font-size: 1.08rem; }
  .page-card p, .page-card li { font-size: .92rem; }
  .page-actions .lang button { padding: 0 10px; }
  /* En mòbil no hi cap: aquestes pàgines no tenen calaix i els enllaços ja surten al peu */
  .page-actions .top-nav { display: none; }
}