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

:root {
  /* ---- MODE CLAR (alt contrast, llegible per a gent gran) ---- */
  --bg:        #f4f5f8;
  --bg2:       #ffffff;
  --surface:   #ffffff;
  --surface-2: #eef0f5;
  --ink:       #14151f;
  --ink-soft:  #3b3d4d;
  --ink-faint: #5c5e70;
  --line:      #d4d7e0;
  --line-strong:#bcc0ce;

  --lime:   #4d9e00;
  --lime-bg:#e4f7c4;
  --violet: #6d3dff;
  --violet-bg:#e9e2ff;
  --cyan:   #0891b2;
  --cyan-bg:#cdf0f7;
  --pink:   #e11d6f;
  --pink-bg:#fde0ed;
  --amber:  #f59e0b;
  --amber-bg:#fef1d6;
  --green:  #16a34a;
  --green-bg:#d6f5e0;
  --slate:  #64748b;
  --slate-bg:#e6ebf2;

  --accent: var(--violet);
  --on-accent: #ffffff;   /* text sobre fons d'accent (clar: blanc) */
  --shadow: 0 2px 4px rgba(20,21,31,.05), 0 8px 24px rgba(20,21,31,.07);
  --shadow-lg: 0 10px 40px rgba(20,21,31,.12);
  --radius: 16px;

  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --body:"Inter Tight", system-ui, -apple-system, sans-serif;
  --maxw: 1400px;
}

html.dark {
  /* ---- MODE FOSC (paleta "punch") ---- */
  --bg:        #0a0a0f;
  --bg2:       #12121c;
  --surface:   #15151f;
  --surface-2: #1c1c28;
  --ink:       #ffffff;
  --ink-soft:  #c7c5d6;
  --ink-faint: #8a889c;
  --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);

  --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);
}

* { 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%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0.015em;
  -webkit-font-smoothing: antialiased;
  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; }

/* ---- 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; }

/* ============================================================
   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; }

/* Grup Destacats: només la barra de títol marca el grup; taula com la resta */
.month-group.is-featured .month-bar { background:var(--amber); }
.month-group.is-featured .table-card {
  border-color:var(--line);
}
.card-featured .card-top-bar { background:var(--amber); }

/* 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; }
.t-name-live { margin-top:5px; padding-left:22px; }
.live-inline { margin-left: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;
  box-shadow:0 0 0 0 rgba(255,255,255,.7); 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: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(18px);
  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:inline; font-family:var(--display); font-weight:800; font-size:1.85rem; line-height:1.05; letter-spacing:-.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.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(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px; }
.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(--surface); 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(--surface-2); color:var(--ink); cursor:pointer;
  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; 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; }
.search-ic { position:absolute; left:16px; color:var(--ink-faint); pointer-events:none; }
.search-box input {
  width:100%; height:52px; padding:0 48px 0 48px;
  background:var(--surface); border:1.5px solid var(--line); border-radius:14px;
  color:var(--ink); font-family:var(--body); font-size:1.05rem; font-weight:500;
  transition:border-color .15s ease, box-shadow .15s ease; box-shadow:var(--shadow);
}
.search-box input::placeholder { color:var(--ink-faint); 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:12px; display:grid; place-items:center; width:30px; height:30px;
  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(--surface-2); border:1px solid var(--line); border-radius:14px; padding:4px; flex:none; }
.view-switch button {
  display:flex; align-items:center; justify-content:center; gap:8px; padding:0 18px; min-height:44px;
  border:none; background:none; color:var(--ink-soft); font-family:var(--body); font-size:.98rem; 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); box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); }
.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:1.5px solid var(--line); background:var(--surface); 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); box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }

.chip-std.active   { background:var(--slate);  border-color:var(--slate);  color:#fff; box-shadow:0 4px 14px color-mix(in srgb, var(--slate) 40%, transparent); }
.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:var(--amber); border-color:var(--amber); color:#fff; }
.chip-inprogress.active { background:var(--green); border-color:var(--green); color:#fff; }
.chip-finished.active   { background:var(--slate); border-color:var(--slate); 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; }

/* 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(--surface); border:1.5px solid var(--line); border-radius:999px;
  font-size:.92rem; color:var(--ink-soft); font-weight:600; box-shadow:var(--shadow);
}
.count-num { font-family:var(--display); font-size:1.25rem; font-weight:800; color:var(--accent); line-height:1; }

/* ============================================================
   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. */
.main { min-width: 0; }
.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; }
.month-bar { width:5px; height:30px; border-radius:99px; background:var(--accent); flex:none; }
.month-group.is-finished .month-bar { background:var(--slate); }
.month-group.is-inprogress .month-bar { background:var(--green); }
.month-title {
  font-family:var(--display); font-weight:800; font-size:1.5rem; letter-spacing:-.02em;
  text-transform:capitalize; color:var(--ink);
}
.month-group.is-finished .month-title { color:var(--ink-faint); }
.month-count {
  font-size:.85rem; font-weight:700; color:var(--ink-faint);
  background:var(--surface-2); border:1px solid var(--line); padding:3px 11px; border-radius:999px;
}
/* Botó de plegar/desplegar, empès a la dreta */
.month-toggle {
  margin-left:auto; flex:none; display:grid; place-items:center;
  width:36px; height:36px; border-radius:10px; cursor:pointer;
  background:var(--surface-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 {
  border:1.5px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow);
  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%; }
table.t { width:100%; border-collapse:collapse; font-size:1rem; min-width:964px; table-layout:fixed; }

/* amplades fixes idèntiques per a tots els mesos */
table.t col.c-name   { width:auto; }
table.t col.c-date   { width:104px; }
table.t col.c-end    { width:104px; }
table.t col.c-day    { width:88px; }
table.t col.c-rhythm { width:86px; }
table.t col.c-time   { width:132px; }
table.t col.c-cat    { width:120px; }
table.t col.c-inscrits { width:92px; }
table.t col.c-info     { width:80px; }

table.t thead th {
  text-align:left; padding:15px 16px; font-family:var(--body); font-weight:700; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);
  background:var(--surface-2); border-bottom:2px solid var(--line);
  white-space:nowrap; user-select:none;
}
table.t thead th.sortable { cursor:pointer; transition:color .15s ease, background-color .15s ease; }
table.t thead th.sortable:hover { color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.th-in { display:inline-flex; align-items:center; gap:6px; }
.sort-ic { opacity:.35; 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:14px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.t tbody tr:last-child td { border-bottom:none; }
table.t tbody tr { transition:background-color .15s; }
table.t tbody tr:hover { background:color-mix(in srgb, var(--accent) 7%, var(--surface)); }
table.t tbody tr.row-finished td { color:var(--ink-faint); }

.t-name { display:flex; align-items:center; gap:12px; }
.status-dot { width:11px; height:11px; border-radius:50%; flex:none; box-shadow:0 0 0 3px color-mix(in srgb, currentColor 18%, 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:700; font-size:1.02rem; color:var(--ink); line-height:1.32; }
.row-finished .t-name-text { color:var(--ink-soft); }
td.center { text-align:center; }
.t-date { font-weight:700; color:var(--ink); white-space:nowrap; }
.t-muted { color:var(--ink-soft); white-space:nowrap; }
/* 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; }
table.t td.c-time-cell .t-muted { white-space:nowrap; }

.rhythm-badge {
  display:inline-flex; align-items:center; padding:5px 12px; border-radius:8px;
  font-size:.82rem; font-weight:800; letter-spacing:.02em; cursor:pointer;
  transition:transform .15s ease; border:1.5px solid transparent;
}
.rhythm-badge:hover { transform:translateY(-1px) scale(1.04); }
.rb-STD { background:var(--slate-bg); color:var(--slate); }
.rb-RAP { background:var(--cyan-bg);  color:var(--cyan); }
.rb-BLZ { background:var(--pink-bg);  color:var(--pink); }
html.dark .rb-STD { color:#cbd5e1; }

.cat-pill { display:inline-block; max-width:100%; padding:4px 11px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); font-size:.85rem; font-weight:700; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.link-btn {
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px;
  border:1.5px solid var(--line); background:var(--surface); 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:20px; }
.card {
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg2); border:1.5px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow); transition:transform .25s, box-shadow .25s, border-color .25s;
}
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.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:22px; display:flex; flex-direction:column; gap:16px; flex:1; }
.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.card-title { font-family:var(--display); font-weight:700; font-size:1.18rem; line-height:1.22; color:var(--ink); }
.status-badge {
  flex:none; display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
  font-size:.76rem; font-weight:800; 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:10px; }
.meta-row { display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-size:.98rem; font-weight:500; }
.meta-row svg { flex:none; color:var(--accent); }
.meta-row strong { color:var(--ink); font-weight:700; }

.card-foot { display:flex; align-items:center; gap:10px; padding-top:14px; 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:44px; padding:0 14px;
  border-radius:12px; font-weight:800; font-size:.92rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card-link.primary { background:var(--accent); color:var(--on-accent); }
.card-link.secondary { background:var(--cyan-bg); color:var(--cyan); border:1.5px solid color-mix(in srgb, var(--cyan) 30%, transparent); }
.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; }

/* ============================================================
   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; }
.spinner {
  width:46px; height:46px; margin:0 auto 20px; border-radius:50%;
  border:4px solid var(--line); border-top-color:var(--accent); animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ============================================================
   FOOTER + GOTOP
   ============================================================ */
.site-footer { border-top:1px solid var(--line); background:var(--bg2); 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; }
.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;
  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); }
.foot-donate-ic { font-size:1.05rem; }
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(--surface); border:1px solid var(--line); box-shadow:var(--shadow); }

#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: 1024px) {
  .wrap { padding: 0 20px; }
  .brand-title { font-size: 1.6rem; }
}

/* ============================================================
   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(--surface); border-left: 1px solid var(--line);
  box-shadow: -18px 0 44px color-mix(in srgb, #0b1220 22%, transparent);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column; overflow: hidden;
}
.drawer.open { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.drawer-title { font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--ink); }
.drawer-body {
  flex: 1 1 auto; overflow-y: auto; padding: 18px;
  display: flex; flex-direction: column; gap: 22px;
}

/* Recompte destacat sobre les llistes en mòbil */
.mobile-count {
  align-items: baseline; justify-content: center; gap: 8px;
  margin: 4px 0 22px; text-align: center;
  color: var(--ink-soft); font-weight: 600;
}
.mobile-count .count-num {
  font-family: var(--display); font-weight: 800; font-size: 1.5rem;
  color: var(--accent); line-height: 1;
}

/* MÒBIL / TAULETA EN VERTICAL */
@media (max-width: 820px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .live-inline { display:block; margin-left:0; margin-top:5px; }

  /* 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; }

  /* ---- CONTROLS: fora del flux principal; viuen dins el drawer ---- */
  .main { padding-top: 18px; }
  .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: 18px; }

  .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;
  }
  .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-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 */

  .drawer-body #status-chips,
  .drawer-body #rhythm-chips {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%;
  }
  .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; }

  /* ---- 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; }
  table.t thead th:first-child, table.t tbody td:first-child { white-space: normal; min-width: 190px; }
  .t-name-text { white-space: normal; }

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

  /* ---- TÍTOLS DE SECCIÓ ---- */
  .month-title { font-size: 1.25rem; }
  .month-head { gap: 10px; }

  .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-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; }
}