/* La closca de la plataforma · el full que carreguen els dos webs.
 *
 * Aquí hi ha el que és igual a la zona nàstic i a la porra: la paleta, la
 * base tipogràfica, la barra de dalt amb el selector d'aplicacions, les
 * pestanyes, la zona de sessió, el diàleg del compte i el peu.
 *
 * Estava escrit dues vegades, a `styles.css` i a `porra/styles.css`, i amb
 * dos jocs de noms per a les mateixes coses (`.peu` allà, `.footer` aquí;
 * `.logo-marca` allà, `.logo-brand` aquí). Els comentaris deien "idèntic al
 * de la porra", que és el que sempre s'escriu just abans que deixin de
 * ser-ho: a la barra del web hi faltava el botó dels ajustos de la foto.
 *
 * Cada aplicació es queda el seu full amb el que és seu i prou. */

/* ── Paleta i superfícies ─────────────────────────────────── */

:root{
  --cream:#F5F2EC;--cream-2:#a49c93;
  --grana:#C21E33;--grana-lite:#E24357;--grana-soft:#ff5e72;--or:#D4AF6A;
  --ink:#0a0908;--ink-2:#6c5f63;
  --line:rgba(245,242,236,.10);
  --hairline:rgba(245,242,236,.10);
  /* Superfícies elevades: gradient subtil + highlight superior + ombra doble */
  --surf-1:linear-gradient(180deg, rgba(30,20,22,.55), rgba(10,7,8,.35));
  --surf-2:linear-gradient(180deg, rgba(38,26,28,.7), rgba(14,10,11,.45));
  --edge-hi:inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-card:0 1px 2px rgba(0,0,0,.5), 0 22px 44px -28px rgba(0,0,0,.9);
  --shadow-hero:0 2px 3px rgba(0,0,0,.55), 0 32px 64px -32px rgba(0,0,0,.95);
  --halo-grana:0 0 0 1px rgba(194,30,51,.06), 0 40px 90px -40px rgba(194,30,51,.55);
  /* Àlies legacy: mantinguts perquè classes antigues segueixin resolent-se */
  --paper:var(--cream);
  --grana-viu:#A01A2B;
  --llauto:var(--or);
  --fons:radial-gradient(130% 55% at 50% -10%, #1a0f10 0%, #0a0908 52%), #0a0908;
}

/* ── Base ─────────────────────────────────────────────────── */

*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%;overflow-x:clip}
/* El carril de la barra de desplaçament hi és sempre, encara que la pàgina hi
   càpiga sencera. Hi ha pàgines llargues (la plantilla) i pàgines curtes (el
   joc): sense reservar-lo, passar d'una a l'altra eixampla el contingut i tot
   fa una sacsejada de costat en clicar. A la porra passa el mateix quan una
   vista encara diu "Carregant…". Als sistemes que posen la barra a sobre
   —els Mac d'ara, els mòbils— no reserva res i no es nota. */
html{overflow-y:scroll;scrollbar-gutter:stable}
body{
  background:var(--fons);color:var(--cream);
  font-family:'Space Grotesk',sans-serif;line-height:1.5;
  font-variant-numeric:tabular-nums;
  min-height:100vh;display:flex;flex-direction:column;
  position:relative;
}
/* Gra: SVG noise fix a tota la finestra amb soft-light per trencar el negre pla */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.7  0 0 0 0 0.7  0 0 0 0 0.7  0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.5;mix-blend-mode:soft-light;
}
/* Vinyeta suau als angles: sensació d'escenari, no marc */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(0,0,0,.65), transparent 60%),
    radial-gradient(80% 60% at 0% 0%, rgba(0,0,0,.35), transparent 55%),
    radial-gradient(80% 60% at 100% 0%, rgba(0,0,0,.35), transparent 55%);
}
/* Per sobre del gra i la vinyeta: la closca i el que cada aplicació hi posa. */
.topbar,.view,.footer,#app{position:relative;z-index:1}

::selection{background:var(--grana);color:var(--paper)}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
.mono{font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
:focus-visible{outline:2px solid var(--llauto);outline-offset:3px}
/* La fletxa de les crides a l'acció: avança en passar-hi per sobre. La regla
   de :hover viu a cada crida, però la transició la comparteixen totes. */
.arrow{display:inline-block;transition:transform .2s ease}

/* ── La barra de dalt ──────────────────────────────────────── */

.topbar{
  display:flex;align-items:stretch;gap:clamp(20px,3.5vw,44px);
  padding:0 clamp(18px,4vw,48px);
  border-bottom:1px solid rgba(245,242,236,.08);
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg, rgba(16,10,12,.82), rgba(12,8,10,.72));
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 0 rgba(212,175,106,.06), 0 12px 32px -18px rgba(0,0,0,.9);
}
/* El botó d'aplicacions i la marca van junts, amb la seva pròpia separació:
   són una sola cosa ("on sóc"), no dos elements de la barra. */
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.logo{
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  text-decoration:none;color:inherit;flex:0 0 auto;
  padding:12px 0;
}
.logo-brand{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:-.01em;
  font-size:1.45rem;line-height:1;white-space:nowrap;
}
.logo .l1{color:var(--paper)}
.logo .l2{color:var(--grana-viu)}
.logo-sub{
  font-family:'Space Grotesk',sans-serif;font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--or);white-space:nowrap;
}

/* ── Selector d'aplicacions ──
   La porra (i el que vingui) són apps de la plataforma, no seccions d'un
   web: tenen subdomini propi. Van amb la marca, com el quadrat d'apps de
   Google o d'Atlassian, i no barrejades amb les pestanyes ni amb el compte. */
/* Centrat sobre "Zona Nàstic" i no sobre el bloc sencer: el marge inferior
   descompta la línia petita de sota la marca. */
.apps{position:relative;align-self:center;margin-bottom:14px;flex:0 0 auto}
.apps-toggle{
  list-style:none;cursor:pointer;
  width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;
  color:rgba(245,242,236,.45);
  border:1px solid transparent;
  transition:color .2s,background .2s,border-color .2s;
}
.apps-toggle::-webkit-details-marker{display:none}
.apps-toggle:hover,
.apps[open] .apps-toggle{
  color:var(--or);
  background:rgba(245,242,236,.06);
  border-color:rgba(245,242,236,.12);
}
.apps-toggle:focus-visible{outline:2px solid var(--llauto);outline-offset:2px}

/* Els nou punts, amb un sol element: el propi fons i vuit ombres. */
.apps-icon{
  width:2.5px;height:2.5px;border-radius:50%;
  background:currentColor;
  box-shadow:
    5px 0, 10px 0,
    0 5px, 5px 5px, 10px 5px,
    0 10px, 5px 10px, 10px 10px;
  transform:translate(-5px,-5px);
}

.apps-menu{
  position:absolute;top:calc(100% + 10px);left:0;z-index:70;
  min-width:270px;
  padding:8px;
  border-radius:14px;
  border:1px solid rgba(245,242,236,.14);
  background:linear-gradient(180deg, #1a1214, #100b0c);
  box-shadow:0 2px 3px rgba(0,0,0,.5), 0 30px 60px -30px rgba(0,0,0,.95);
  display:flex;flex-direction:column;gap:2px;
}
.apps-title{
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(245,242,236,.35);
  padding:6px 10px 8px;
}
.app{
  display:flex;flex-direction:column;gap:2px;
  padding:9px 10px;border-radius:10px;
  transition:background .2s;
}
a.app:hover{background:rgba(212,175,106,.10)}
/* On ets ara. Es marca i no s'amaga: el menú ha de dir "on sóc" tant com
   "què més hi ha". */
.app.actual{background:rgba(245,242,236,.05)}
.app.actual .app-name{color:var(--or)}
.app-name{
  font-weight:600;font-size:.95rem;color:var(--cream);
  line-height:1.2;
}
a.app:hover .app-name{color:var(--or)}
/* La fletxa avisa que allò s'obre en una pestanya nova (és un altre
   subdomini): millor dir-ho abans que sorprendre després. */
.app-extern{color:var(--or);font-size:.8em;vertical-align:.1em}
.app-desc{
  font-size:.78rem;line-height:1.35;
  color:rgba(245,242,236,.5);
}

@media (max-width:520px){
  .apps-menu{min-width:0;width:min(280px,calc(100vw - 28px))}
}

/* ── Pestanyes ──
   Al web són enllaços entre pàgines i a la porra botons que canvien de
   vista. Es pinten igual a propòsit: qui les mira no ha de notar que per
   dins són coses diferents. */
.tabs{
  display:flex;align-items:stretch;gap:clamp(16px,2.2vw,30px);
  min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto;display:flex;align-items:center;
  font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 1px;
  text-decoration:none;
  color:rgba(245,242,236,.55);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .2s,border-color .2s;white-space:nowrap;
}
.tab:hover{color:var(--or)}
.tab.active{color:var(--cream);border-bottom-color:var(--or)}
/* El `display:flex` de dalt guanya al [hidden] del navegador: sense això la
   pestanya d'Admin es veuria a tothom. */
.tab[hidden]{display:none}

/* ── La sessió, a la dreta ────────────────────────────────── */

.topbar-right{
  margin-left:auto;display:flex;align-items:center;
  gap:clamp(10px,1.6vw,18px);flex:0 0 auto;
}
.auth{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.auth img,.auth .avatar-inicial{
  width:22px;height:22px;border-radius:50%;object-fit:cover;
}
/* El xip: el control de tria petit i rodó dels tres webs —les competicions
   del calendari, els modes de la classificació, els filtres. El tenien tots
   tres escrit al seu full i el de l'onze havia quedat una mica més gran i
   amb menys espaiat que els altres dos: la mateixa peça vista de tres
   maneres. Aquí és una i prou. */
.chip{
  font-family:'Space Grotesk',sans-serif;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;
  border:1px solid rgba(245,242,236,.15);background:transparent;
  color:rgba(245,242,236,.6);cursor:pointer;
  transition:color .25s,border-color .25s,background .25s;
}
.chip:hover{border-color:var(--or);color:var(--or)}
.chip.active{background:var(--grana);border-color:var(--grana);color:var(--paper)}

/* La foto és un botó: obre els ajustos del compte. Ho és als dos webs; al
   web era un <img> mut i per això la foto no s'hi podia canviar. */
.auth .avatar-boto{display:flex;align-items:center;padding:0;background:none;border:0;cursor:pointer}
.avatar-inicial{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--grana);color:var(--paper);
  font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  flex:0 0 auto;border-radius:50%;
}
.auth .avatar-inicial{font-size:10px;letter-spacing:.02em}
.auth .nom{
  font-family:'Space Grotesk',sans-serif;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(245,242,236,.7);
  max-width:20ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.auth a{
  font-family:'Space Grotesk',sans-serif;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;
  border:1px solid rgba(245,242,236,.2);
  color:rgba(245,242,236,.7);text-decoration:none;transition:all .25s;
  white-space:nowrap;
}
.auth a:hover{border-color:var(--or);color:var(--or)}
/* Píndola "Entra" — funciona a la capçalera i a qualsevol crida a l'acció. */
.entra-boto{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Space Grotesk',sans-serif;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;
  padding:9px 18px;border-radius:999px;
  border:1px solid rgba(245,242,236,.5);
  background:rgba(163,23,58,.15);color:var(--or);
  text-decoration:none;cursor:pointer;
  transition:all .2s;
}
.entra-boto:hover{border-color:var(--or);background:rgba(163,23,58,.3);color:var(--cream)}
/* La caixa de "això és per a qui hi entra": la porra la fa servir per al
   pronòstic i l'onze per a l'onze. És la mateixa frase i el mateix gest, o
   sigui que viu aquí i no a cap dels dos fulls. */
.anonim-cta{
  text-align:center;padding:26px;
  border:1px dashed rgba(245,242,236,.3);border-radius:16px;
  color:rgba(245,242,236,.65);box-shadow:var(--edge-hi);
}
.anonim-cta b{color:var(--or)}
.anonim-cta .entra-boto{margin-left:8px}
/* A la capçalera, massís: hi ha de destacar sobre la navegació. */
.auth .entra-boto{
  padding:9px 20px;font-size:10px;letter-spacing:.16em;
  background:var(--grana);border-color:var(--grana);color:var(--paper);
}
.auth .entra-boto:hover{background:var(--grana-viu);border-color:var(--grana-viu);color:var(--paper)}

/* ── Diàlegs del compte ───────────────────────────────────────
   Els ajustos de la foto i la tria d'àlies (als dos webs) i, a la porra, el
   d'entrar. Van junts perquè comparteixen caixa: el que canvia és el que hi
   diu a dins. */

.login-modal{
  border:1px solid rgba(245,242,236,.25);border-radius:14px;
  background:radial-gradient(120% 100% at 50% 0%, #2b1e24, #150d0f 65%);color:var(--cream);
  width:min(420px,calc(100vw - 32px));padding:0;margin:auto;
  opacity:1;transform:translateY(0);
  transition:opacity .3s, transform .3s cubic-bezier(.2,.8,.2,1),
             overlay .3s allow-discrete, display .3s allow-discrete;
}
@starting-style{.login-modal[open]{opacity:0;transform:translateY(14px)}}
.login-modal::backdrop{background:rgba(10,7,8,.65);backdrop-filter:blur(4px);transition:background .3s}
@starting-style{.login-modal[open]::backdrop{background:rgba(10,7,8,0)}}
.login-tancar{position:absolute;top:12px;right:14px;font-size:24px;color:rgba(245,242,236,.55);padding:6px 10px}
.login-tancar:hover{color:var(--or)}
.login-cos{padding:38px 34px 30px;text-align:center;display:grid;justify-items:center;gap:14px}
.login-eyebrow{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--or)}
.login-cos h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.9rem;line-height:1.05;text-transform:uppercase}
.login-lede{color:rgba(245,242,236,.7);font-size:.95rem;line-height:1.55;max-width:32ch}
.login-legal{
  margin-top:4px;max-width:32ch;text-align:center;
  font-size:11px;letter-spacing:.06em;text-transform:none;
  color:rgba(245,242,236,.55);line-height:1.55;
}
.login-legal a{color:var(--or);text-decoration:underline;text-underline-offset:2px}
.login-legal a:hover{color:#e6c384}
.g-boto{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:#fff;border:1px solid #dadce0;border-radius:999px;
  padding:11px 20px 11px 16px;font-family:'Space Grotesk',sans-serif;
  font-size:14px;font-weight:500;color:#3c4043;text-decoration:none;
  box-shadow:0 1px 3px rgba(60,64,67,.2);transition:all .2s;
}
.g-boto:hover{background:#f8f9fa;box-shadow:0 2px 8px rgba(60,64,67,.3)}
.g-boto svg{width:18px;height:18px}

/* Els formularis que van dins dels diàlegs. La porra en fa servir els
   mateixos controls a l'administració, i per això les classes es diuen com
   es diuen; el que hi ha aquí és el que necessita qualsevol dels dos webs. */
.admin-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:10px}
.admin-form label{display:grid;gap:6px;font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,242,236,.6)}
.admin-form input, .admin-form select, .admin-form textarea{
  padding:10px 12px;background:rgba(255,255,255,.03);border:1px solid rgba(245,242,236,.18);
  border-radius:14px;color:var(--cream);font-family:'Space Grotesk',sans-serif;font-size:.95rem;
}
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus{border-color:var(--or);outline:none}
.admin-form button[type="submit"], .admin-form > button{
  grid-column:1/-1;justify-self:start;
  display:inline-block;              /* fallback si no es respecta el grid */
  padding:12px 28px;margin-top:6px;
  border-radius:999px;border:1px solid var(--grana);
  background:var(--grana);color:var(--paper);
  font-family:'Space Grotesk',sans-serif;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;transition:background .2s;
}
.admin-form button[type="submit"]:hover, .admin-form > button:hover{background:var(--grana-viu)}
.desar{
  justify-self:start;padding:12px 28px;border-radius:999px;
  border:1px solid var(--grana);background:var(--grana);color:var(--paper);
  font-family:'Space Grotesk',sans-serif;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;transition:background .2s;
}
.desar:hover{background:var(--grana-viu)}
.desar:disabled{opacity:.4;cursor:not-allowed}
.desa-nota{text-align:center;font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.16em;color:rgba(245,242,236,.5)}
.desa-nota.ok{color:#7ec98a}
.desa-nota.error{color:#e07070}
/* Una casella amb la seva etiqueta al costat. Va amb el pare al selector
   per guanyar a `.admin-form label`, que posa les etiquetes en versaletes i
   en columna: una frase que es llegeix ("Amagar la meva foto") no és
   l'etiqueta d'un camp. Abans ho resolien quatre `!important`. */
.check-mono,
.admin-form label.check-mono{
  display:flex;flex-direction:row;align-items:center;gap:8px;
  font-size:.85rem;letter-spacing:.05em;text-transform:none;
  color:rgba(245,242,236,.7);cursor:pointer;
}
.check-mono input{width:16px;height:16px;accent-color:var(--grana)}

/* El camp de la tria d'àlies. Viu aquí i no al full de la porra perquè el
   diàleg és dels dos webs; el relleu se'l posa ell, com fa el formulari de
   contacte, que tampoc pot dependre d'un full que no és seu. */
.alias-input{
  width:100%;padding:12px 14px;margin-bottom:12px;
  background:rgba(10,7,8,.5);color:var(--cream);text-align:center;
  border:1px solid rgba(245,242,236,.3);border-radius:14px;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.02em;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
}
.alias-input::placeholder{color:rgba(245,242,236,.3);font-weight:400}
.alias-input:focus{border-color:var(--or);outline:none}

/* ── El peu ───────────────────────────────────────────────── */

.footer{
  margin-top:auto;padding:20px;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:6px 14px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,242,236,.4);
  border-top:1px solid rgba(245,242,236,.08);
  text-align:center;
}
.footer-item{white-space:normal;color:inherit;text-decoration:none;transition:color .2s}
.footer a.footer-item{color:rgba(245,242,236,.55)}
.footer a.footer-item:hover{color:var(--or)}
.footer-sep{color:rgba(245,242,236,.25)}
/* Les xarxes. Només icones: el nom de cada xarxa ja el diu la seva forma, i
   tres paraules més al peu no hi afegirien res. */
.social{display:flex;align-items:center;gap:8px}
.social-link{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  color:rgba(245,242,236,.55);
  border:1px solid rgba(245,242,236,.14);
  background:rgba(255,255,255,.02);
  transition:color .2s,border-color .2s,background .2s;
}
.social-link:hover{
  color:var(--or);border-color:rgba(212,175,106,.45);
  background:rgba(255,255,255,.05);
}
.social-link svg{width:15px;height:15px;display:block}

@media (max-width:640px){
  .footer{flex-direction:column;gap:8px;padding:16px 12px}
  .footer-sep{display:none}
  .footer-item{
    font-size:9px;letter-spacing:.08em;
    white-space:nowrap;   /* que la frase no es parteixi al mig */
  }
}

/* ── Mòbil: la barra en dues files, tot navegable ─────────── */

@media (max-width:820px){
  .topbar{flex-wrap:wrap;gap:10px 12px;padding:0 14px}
  .brand{flex:0 1 auto;min-width:0;gap:10px}
  .logo{min-width:0;overflow:hidden}
  .logo-brand{font-size:1.15rem}
  .logo-sub{font-size:8px;letter-spacing:.18em}
  .apps{margin-bottom:12px}
  .tabs{
    order:3;flex-basis:100%;
    gap:18px;
    /* El dit que arrossega la tira ha de moure-la de costat i prou. Sense
       `pan-x` el navegador interpreta qualsevol biaix vertical com a scroll
       de la pàgina i la tira no es mou; `contain` evita que en arribar al
       final el gest continuï cap al gest d'"enrere" del navegador. */
    touch-action:pan-x;
    overscroll-behavior-x:contain;
  }
  .tab{padding:5px 1px;font-size:9.5px;letter-spacing:.12em}
  .topbar-right{gap:8px}
  .auth .nom{display:none}   /* a mòbil, l'avatar ja identifica */
}

@media (max-width:600px){
  .login-cos{padding:28px 20px 24px}
}

@media (max-width:360px){
  .logo-brand{font-size:1.05rem}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}