/*
 * El Figma mana. Les mides són les llegides del fitxer, sobre un marc de
 * 360 x 800: tauler a 328 d'ample amb 16 de marge, files separades 8, caselles
 * de 12 per fila amb 1,25 de separació, botó pastilla de 133 x 47 i radi 40.
 *
 * La casella buida és una variable perquè la tria entre blau i gris està
 * pendent de validació (revisió R01).
 */

/* JetBrains Mono, la del tauler al Figma. Servida des de la carpeta i no des
   d'un CDN: la restricció d'aquestes setmanes diu que tot viu al hub i res de
   fora. Llicència SIL Open Font, subconjunt llatí. Pes 700 per a la
   contrasenya del missatge de derrota, que el Figma demana en negreta. */
@font-face{
  font-family:"JetBrains Mono";
  src:url('../assets/fonts/jetbrains-mono-400.woff2?v=1790150193') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url('../assets/fonts/jetbrains-mono-700.woff2?v=1790150193') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --correcte:#5CEE7E;   /* el caràcter és al seu lloc, 16/09 */
  --present:#D1CBC7;    /* hi és, però no al lloc, 16/09 */
  /* EL VERMELL, ENFOSQUIT, 16/09. Ve de la resposta de la Berta a la
     pregunta que li vam fer: el #FF3632 amb el text #333 es quedava a
     3,51:1 i AA en demana 4,5. Compte, que el nou tot sol és PITJOR amb
     text fosc (2,76:1): el que passa AA és el parell, vermell nou amb
     text BLANC, que dona 4,57:1, i és el que es veu al Figma. Per això
     el canvi de color i el canvi de tinta van junts i no se'n pot fer
     un sense l'altre. */
  --absent:#E32824;     /* no hi és: FONS de casella */
  /* El mateix vermell com a TEXT sobre blanc només dona 3,6:1, o sigui que
     l'avís i la contrasenya de la derrota es queden amb el vermell de sempre,
     que en dona 6,06. Pendent de confirmar amb la Berta. */
  --absent-text:#BF221F;
  --buida:#DADADA;      /* «tornem al fons gris», 16/09: substitueix la R01-01 */
  --tinta:#333333;     /* el negre 100% del Figma, 14/09 */
  /* Tres noms per a un sol valor, i es queden: són tres conceptes que el dia
     que el Figma els separi s'han de poder separar. El que no pot ser és que
     siguin tres literals iguals, que és com canviar la tinta i que la meitat
     de la pantalla es quedi al color vell. Manen des de `--tinta`. */
  --marc:var(--tinta);  /* traç de la fila activa i de la referència */
  --apagat:#808080;    /* el gris del Figma */
  /* El punt apagat de l'onboarding i l'estrella buida del final: el mateix
     blau grisós del Figma escrit a dos llocs, que ara és un de sol. */
  --punt:#CBD0E6;
  --linia:var(--tinta); /* separador: #333 i 1,25 de gruix, 14/09 */

  /* EL FONS DE TOTES LES PANTALLES, 16/09. Lineal en diagonal, de la cantonada
     de baix a l'esquerra a la de dalt a la dreta, amb quatre parades.
     Substitueix el radial lila, que al seu torn havia substituït el gris de la
     demo: és el tercer fons en un dia, i per això va en peces separades, perquè
     el proper canvi sigui tocar quatre valors i no reescriure quatre regles.
     El panell del visor els canvia en directe. */
  --fons-0:#E5E5E5;  --fons-p0:0%;
  --fons-1:#FFFFFF;  --fons-p1:38%;
  --fons-2:#FFFFFF;  --fons-p2:59%;
  --fons-3:#F2F2F2;  --fons-p3:100%;
  /* EL FONS ES CALCULA SOBRE LA FINESTRA, no sobre cada element: amb
     `background-attachment:fixed` el degradat del marc de 360 i el de la
     finestra sencera són el mateix dibuix, i no es veu el tall vertical a la
     vora del marc quan el joc s'obre en una pantalla ampla. */
  --fons:linear-gradient(to top right,
    var(--fons-0) var(--fons-p0), var(--fons-1) var(--fons-p1),
    var(--fons-2) var(--fons-p2), var(--fons-3) var(--fons-p3));

  /* Moviment. Tres durades i una corba, i prou: tot el que s'anima les fa
     servir, o sigui que canviar el ritme del joc es fa des d'aquí. */
  --ms-curt:170ms;    /* una casella, un botó: resposta directa */
  --ms-mig:240ms;     /* entrada d'una pantalla o d'una capa */
  --ms-llarg:720ms;   /* celebració, i no més */
  --corba:cubic-bezier(.2,.8,.25,1);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}

body{
  color:var(--tinta);
  font:16px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  /* `clip` i no `hidden`, 16/09. Amb `hidden` el body SEGUEIX SENT un
     contenidor de desplaçament, només que sense barres: el navegador el pot
     moure ell tot sol quan porta a la vista un element que acabes de clicar.
     Com que `.app` fa `transform:scale()`, que encongeix el dibuix però no la
     caixa, en una finestra de menys de 800 px d'alt hi ha desplaçament latent,
     i obrir «Com es juga» i clicar una fila se'n portava la capçalera del menú
     i la creu de tancar fora de pantalla, sense manera de tornar-hi amb el
     ratolí. `clip` no crea contenidor de desplaçament: no hi ha res a moure. */
  display:flex; flex-direction:column; min-height:100dvh; overflow:clip;
  background:var(--fons);background-attachment:fixed;
}

/* ---------- barra superior ---------- */
/* La barra va flotant a sobre: així les seccions de l'onboarding tenen com a
   origen la vora del marc, que és des d'on estan mesurades al Figma, i no el
   punt on acaba la barra. */
.barra{
  position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:10;
  width:100%; max-width:360px;
  padding:54px 11px 0; display:flex; justify-content:space-between; align-items:center;
}
.menu{background:none;border:0;padding:4px 2px;display:flex;flex-direction:column;gap:5px;cursor:pointer}
.menu i{display:block;width:26px;height:2.5px;background:var(--tinta);border-radius:2px}
.escut{width:28px;height:32px;display:block}

/* ---------- les dues eines de la barra (so i ajuda), 16/09 ----------
   El gris és el #808080 del Figma. Per a una icona el mínim de contrast és 3:1
   i sobre el fons clar en dona 3,95, o sigui que aquí no cal corregir-lo com
   es corregeix per al text.

   L'ÀREA CLICABLE és de 44 x 44 encara que la icona en faci 29 x 21: ho demana
   el comentari («que sigui bastant més gran que la icona») i és el mínim de la
   2.5.5 de WCAG. Com que la barra va a coordenades del Figma, el botó creix cap
   endins amb `padding` i no desplaça res. */
/* Amb en Claudi parlant, la barra desapareix. */
.app.claudi-parla .barra{display:none}
/* El títol de la barra. Va al mig perquè la barra reparteix amb space-between:
   amb el títol pel mig queda so, títol i «?», que és el que dibuixa el Figma de
   la demo. Sense títol, les dues icones tornen als extrems. */
.titol-barra{font-size:18px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--marc);line-height:44px;margin:0}
.titol-barra:not([hidden]) ~ .eines{margin-left:0}

.eines{display:flex;align-items:center;gap:2px;margin-left:auto;margin-right:9px}
.eina{
  width:44px;height:44px;display:grid;place-items:center;
  background:none;border:0;padding:0;cursor:pointer;color:var(--apagat);
  -webkit-tap-highlight-color:transparent;position:relative;
}
.eina svg{display:block}
.eina:hover{color:var(--marc)}

/* El tooltip només apareix amb ratolí o amb el focus del teclat, mai al mòbil:
   allà no hi ha hover i el missatge ja el porta l'`aria-label`. Va darrere de
   `pointer:fine` pel mateix motiu que el hover dels botons. */
@media (hover:hover) and (pointer:fine){
  .eina::after{
    content:attr(data-tip);position:absolute;top:100%;right:0;margin-top:6px;
    background:var(--marc);color:#fff;font-size:12px;line-height:1;
    padding:6px 8px;border-radius:5px;white-space:nowrap;pointer-events:none;
    opacity:0;transition:opacity var(--ms-curt) var(--corba);z-index:30;
  }
  .eina:hover::after,
  .eina:focus-visible::after{opacity:1}
  /* Just després de clicar, l'etiqueta calla fins que el ratolí surt del botó
     (21/09). Des que la creu del menú és al mateix lloc que el «?», tancar el
     menú deixava el ratolí damunt del «?» i hi sortia «Com es juga?»: un
     requadre arrodonit a la cantonada, just quan acabaves de tancar. Vegeu
     `silenciaEtiqueta()` a main.js. */
  .eina[data-calla]::after{opacity:0;transition:none}
}

/* ---------- pantalles ---------- */
/* L'escenari és el marc del Figma i prou: 360 x 800 clavats, perquè totes les
   pantalles hi estan mesurades a sobre. Quan la finestra és més curta, s'escala
   sencer per encabir-s'hi (--zoom, que posa main.js). Sense això, en un mòbil
   real de 640 el botó «Comença», que va a y 689, queda fora del marc, .pantalla
   .onb el retalla i el document no fa scroll: la pantalla d'inici es converteix
   en un cul-de-sac i el joc no arrenca. */
.app{flex:none;width:360px;height:800px;margin:0 auto;padding:0;
  display:flex;flex-direction:column;position:relative;
  transform-origin:top center;transform:scale(var(--zoom,1))}
.pantalla{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:18px 16px;text-align:center;position:relative;
  animation:entra var(--ms-mig) var(--corba) both}
/* El joc, amb les coordenades del Figma: tauler de 328 a x 16 y 118, i el botó
   de 133 x 47 a x 114 y 689. */
.pantalla.joc{position:absolute;inset:0;padding:0;display:block;text-align:left}
.pantalla.joc .tauler{position:absolute;left:16px;top:118px;width:328px}
/* DOS BOTONS DES DEL 23/09: «Vull una pista» i «Resol». Abans només hi havia el
   Resol, centrat a x114 amb 133 d'ample, que és el que dibuixa el Figma. Amb dos
   botons la fila s'ha d'estirar de vora a vora i repartir-los; a la pantalla del
   Figma encara no hi són (pendent de disseny, tasques 1 i 3 del pla del 23/09). */
.pantalla.joc .accions{position:absolute;left:16px;right:16px;top:689px;width:auto;margin:0;padding:0;
  display:flex;flex-direction:row;align-items:center;gap:9px;justify-content:center}
/* EL CANVI DE PARAULA, a la línia del comptador des del 16/09. Abans era un
   botó rodó de 48 px a baix a l'esquerra; ara és text amb la icona al costat, a
   la dreta del comptador, subratllat com el que és: una acció d'una línia. */
.canvia{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;padding:4px 0;cursor:pointer;color:var(--marc);
  font:inherit;font-size:13px;line-height:1;
  text-decoration:underline;text-underline-offset:3px;
}
.canvia svg{width:15px;height:15px;display:block;flex:none}
.pantalla.joc .accions .pastilla{width:auto;flex:1 1 0;min-width:0;padding:0 12px;font-size:14px}
.pantalla.joc .avis{position:absolute;left:16px;right:16px;top:660px;text-align:center;margin:0}

.claudi{width:min(78%,250px);height:auto;display:block}
.claudi.petit{width:min(52%,170px)}
.pantalla h1{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.peu{font-size:16px;color:var(--apagat);max-width:28ch}
.pssst{font-size:14px;color:var(--apagat);max-width:30ch;margin-top:4px}

.punts{display:flex;gap:7px;margin:10px 0 2px}
.punts button{width:6px;height:6px;border-radius:50%;background:var(--punt);border:0;padding:0;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.punts button.on{background:var(--tinta)}
/* la zona de toc ha de ser gran encara que el punt sigui petit */
.punts button::after{content:"";position:absolute;width:30px;height:30px;
  transform:translate(-12px,-12px)}
.punts button{position:relative}

.accions{margin-top:auto;padding-top:20px;width:100%;
  display:flex;flex-direction:column;gap:8px;align-items:center}
/* A la pantalla de joc, `.accions` va a coordenades (vegeu més amunt) i no ha de
   dur cap marge: hi havia un `margin-top:18px` que baixava el Resol de y689 a
   y707, i el Figma el dibuixa a 689. Es va veure el 14/09 perquè el botó de
   canviar paraula, que sí que va a 689, li quedava 18 px més amunt. */
.pantalla.joc .accions{margin-top:0}

/* botó pastilla, 133 x 47 i radi 40 al Figma.

   Res de la drecera `font: ... inherit`: `inherit` no és una família vàlida i el
   navegador es menja la declaració sencera. Aquestes regles la feien servir i
   no s'aplicava cap: el botó sortia a 13,33 px i pes 400, que és el que el
   navegador dona per defecte a un `button`, i el menú a 16/400. */
.pastilla{
  min-height:48px;padding:0 32px;border-radius:40px;cursor:pointer;
  border:1.25px solid currentColor;background:transparent;color:var(--tinta);
  font-size:16px;font-weight:500;line-height:1;
  letter-spacing:-.15px;text-transform:uppercase;min-width:133px;
}
.pastilla.fosca{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.pastilla:disabled{opacity:.35;cursor:default}

/* El moment en què ja es pot enviar. Abans el botó passava de 0,35 a 1 d'opacitat
   de cop i era fàcil no veure-ho, sobretot perquè el jugador està mirant el
   tauler. És una transició i no una animació: va sola en els dos sentits, també
   quan s'esborra un caràcter i el botó es torna a apagar. El 3% de mida és un
   canvi d'estat, no moviment: amb el moviment apagat el botó inhabilitat es
   queda petit igualment, i és el senyal que queda. */
#resol{transition:opacity var(--ms-curt) var(--corba),transform var(--ms-curt) var(--corba)}
#resol:disabled{transform:scale(.97)}
.pla{background:none;border:0;color:var(--apagat);padding:10px 18px;
  font-size:14px;font-weight:500;line-height:1;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
button:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}

/* ---------- llegenda dels tres estats ---------- */
.llegenda{list-style:none;display:flex;flex-direction:column;gap:11px;margin:14px 0 4px;
  text-align:left;font-size:14px}
.llegenda li{display:flex;align-items:center;gap:11px}
.mostra{width:17px;height:21px;flex:0 0 auto}
.mostra.absent{background:var(--absent);color:#fff}
.mostra.present{background:var(--present)}
.mostra.correcte{background:var(--correcte)}

/* ---------- tauler ----------
   Files separades 8. Dins de cada fila, les caselles reparteixen l'ample amb
   1,25 de separació, com al fitxer. */
.tauler{display:flex;flex-direction:column;gap:8px}
.fila{display:flex;gap:1.25px;height:34px}
.fila.marc{height:36px;background:#fff;border:1.25px solid var(--marc);gap:0}
.fila.marc .casella{border-right:1.25px solid var(--marc);background:transparent;color:var(--tinta)}
.fila.marc .casella:last-child{border-right:0}
.fila.activa{border-width:1.5px}

.casella{
  flex:1 1 0;min-width:0;display:grid;place-items:center;
  font-family:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:20px;font-weight:400;color:var(--marc);background:var(--buida);
  position:relative;
}
.casella.correcte{background:var(--correcte)}
.casella.present{background:var(--present)}
.casella.absent{background:var(--absent);color:#fff}

/* ELS SIGNES, NOMÉS A L'ÚLTIM INTENT, 16/09.
   El 14/09 direcció va fer treure la marca de totes les caselles perquè
   embrutava el tauler, i des d'aleshores els tres estats es distingien només
   pel color, que incompleix l'1.4.1 de WCAG per a qui no separa el vermell del
   gris. El Figma del 16/09 ho resol pel mig i és el que es fa aquí: el signe
   surt a l'intent que acabes de fer, que és l'únic que estàs llegint, i els
   anteriors es queden nets. La llegenda de l'onboarding i «Com es juga» porten
   els mateixos tres signes, o sigui que quan surten ja els has vistos.

   Sempre visibles, sense interruptor: no és una preferència, és com es llegeix
   el tauler.

   Van a `::after` absolut i no com a segona fila de la graella, que estiraria
   la casella i desquadraria el tauler sencer. */
/* El tauler de la demo va a part (`#demo-fets`) i ha d'ensenyar exactament el
   mateix, que justament és el que la demo està explicant. */
#intents-fets .fila:first-child .casella::after,
#demo-fets .fila:first-child .casella::after{
  position:absolute;right:2px;bottom:1px;
  font-size:10px;line-height:1;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
#intents-fets .fila:first-child .casella.correcte::after,
#demo-fets .fila:first-child .casella.correcte::after{content:"✓"}
#intents-fets .fila:first-child .casella.present::after,
#demo-fets .fila:first-child .casella.present::after{content:"↔"}
#intents-fets .fila:first-child .casella.absent::after,
#demo-fets .fila:first-child .casella.absent::after{content:"✕"}

/* EL CURSOR DE LA FILA ACTIVA, 15/09: barra vertical i amb pampallugues.
   Abans era una ratlla horitzontal a sota de la casella, com un subratllat, i
   no es llegia com un lloc on escrius. Ara és el que és a tot arreu: una barra
   vertical que parpelleja. Va 1,75 de gruix, una mica més que el traç de la
   graella (1,25), que és el que demana el comentari de la mateixa pantalla.

   El parpelleig va amb `steps(2)`, encès i apagat sense esvaïment, i a 1,06 s,
   que és el ritme del cursor del sistema. Amb el moviment reduït la regla
   global de baix l'atura i el cursor es queda encès, que és el que ha de
   passar: sense pampallugues, però visible. */
.fila.activa .casella.cursor::after{
  content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:1.75px;height:22px;background:var(--marc);
  animation:cursor 1.06s steps(2,jump-none) infinite;
}
@keyframes cursor{50%{opacity:0}}

.comptador{font-size:13px;color:var(--apagat);font-variant-numeric:tabular-nums;
  margin:2px 0 0;height:20px;display:flex;justify-content:space-between;align-items:baseline}

/* La llegenda de COLORS va marxar el 16/09: el que vol dir cada color és a
   «Com es juga», al menú, i a la línia del comptador competia amb el tauler.

   La que torna el 23/09 és una altra cosa: les REGLES del nivell (a=4, e=3,
   majúscules, símbol), que és el que la gent no sabia i el que més feia
   abandonar a la prova d'usuari. Va entre el comptador i la fila on s'escriu,
   en gris petit, perquè es pugui consultar sense treure la vista del tauler.
   Pendent que disseny li doni lloc al Figma. */
.llegenda-regles{
  font-size:12px;line-height:1.3;color:var(--apagat);margin:4px 0 6px;min-height:16px;
  letter-spacing:.01em;
}

/* Quantes paraules portes i quants punts, a sobre del tauler. */
.progres-joc{
  font-size:12px;color:var(--apagat);margin:0 0 6px;font-variant-numeric:tabular-nums;
  letter-spacing:.02em;min-height:16px;
}

/* El consell de tancament de la pantalla final, sota els botons. */
.consell-final{
  position:absolute;left:24px;right:24px;top:700px;margin:0;
  font-size:13px;line-height:1.35;color:var(--apagat);text-align:center;
}

/* El botó secundari: el mateix pastilla, però sense pes, perquè no competeixi
   amb l'acció principal de cada pantalla. */
.pastilla.secundaria{color:var(--apagat);border-color:var(--apagat)}

.camp-ocult{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.avis{margin-top:10px;font-size:14px;min-height:1.3em;color:var(--absent-text)}
/* Quan qui parla és en Claudi i no és cap error, no pot ser vermell. */
/* `parla` i no `claudi`: `.claudi` ja és la imatge del robot i li posa
   `width:min(78%,250px)`, o sigui que quan l'avís passava a ser d'en Claudi
   encongia de 328 a 250 px i el text quedava 39 px descentrat dins del marc. */
.avis.parla{color:var(--apagat)}

/* La ratxa i la transició de nivell: en Claudi celebrant o avisant, no és el
   missatge principal de la pantalla, o sigui que va a sobre i més petit. */
.ratxa{font-size:14px;font-weight:500;text-align:center;margin-bottom:6px;color:var(--marc)}
.transicio{font-size:13px;text-align:center;margin-bottom:8px;color:var(--apagat)}

/* ---------- la celebracio de la paraula (16/09) ----------
   Quan la paraula surt be, un verd mes intens recorre les caselles de la fila
   que l'ha encertada, d'esquerra a dreta, amb el mateix retard per casella que
   ja fa servir la revelacio d'un intent. I mentre aixo passa, la resta de la
   pantalla s'esvaeix: la paraula de referencia, el comptador, els intents
   anteriors i els botons. Queda la paraula resolta i prou.

   El verd fort no es un token: es d'aquest moment i nomes d'aquest, i per aixo
   viu aqui i no a `:root`, que es la paleta del joc. */
@keyframes encert-glow{
  0%  {box-shadow:0 0 0 0 rgba(92,238,126,0)}
  40% {box-shadow:0 0 15px 4px rgba(43,217,86,.9); background:#2BD956}
  100%{box-shadow:0 0 0 0 rgba(92,238,126,0)}
}
@keyframes esvaeix{to{opacity:0}}

/* LA FALLADA, 16/09. Simetrica de l'encert. Quan s'acaben els intents el joc
   es quedava quiet quatre segons amb el camp bloquejat i sense dir res: no
   se sabia si s'havia penjat. Ara l'ultima fila es recorre de vermell,
   d'esquerra a dreta i amb el mateix tempo que el verd, i quan s'apaga s'obre
   la pantalla d'en Claudi. El vermell fort tampoc es un token: es d'aquest
   moment, com el verd de sobre. */
@keyframes fallada-glow{
  0%  {box-shadow:0 0 0 0 rgba(255,54,50,0)}
  40% {box-shadow:0 0 15px 4px rgba(191,34,31,.9); background:var(--absent-text); color:#fff}
  100%{box-shadow:0 0 0 0 rgba(255,54,50,0)}
}

/* Amb `#intents-fets` al davant perquè guanyi a la regla de la revelació, que
   va amb id i si no s'emporta l'animació. Les dues s'encadenen: primer la
   casella es revela, com a qualsevol intent, i tot seguit hi passa el verd. */
#intents-fets .fila.encertada.nova .casella,
#intents-fets .fila.encertada .casella{
  animation:
    revela var(--ms-curt) var(--corba) both,
    encert-glow 820ms var(--corba) both;
  animation-delay:
    calc(var(--i,0) * 26ms),
    calc(300ms + var(--i,0) * 90ms);
}
#intents-fets .fila.fallada.nova .casella,
#intents-fets .fila.fallada .casella{
  animation:
    revela var(--ms-curt) var(--corba) both,
    fallada-glow 820ms var(--corba) both;
  animation-delay:
    calc(var(--i,0) * 26ms),
    calc(300ms + var(--i,0) * 90ms);
}
/* La mateixa retirada de la resta de pantalla, amb la fila fallada com a unica
   excepcio en comptes de l'encertada. */
.pantalla.joc.celebrant #referencia,
.pantalla.joc.celebrant .comptador,
.pantalla.joc.celebrant #entrada,
.pantalla.joc.celebrant .avis,
.pantalla.joc.celebrant .accions,
.pantalla.joc.celebrant #intents-fets .fila:not(.encertada):not(.fallada){
  animation:esvaeix 420ms var(--corba) both;
}

/* ---------- vel de nivells ----------
   Valors compostos, mesurats sobre el render del Figma. */
/* Penja del body, no de `.app`: així el `fixed` val de debò i el vermell arriba
   a les quatre vores. Dins del marc quedava atrapat pel `transform` del zoom. */
.vel{position:fixed;inset:0;z-index:5;
  background:linear-gradient(180deg,rgba(168,31,28,.94) 0%,rgba(127,13,10,.94) 100%);
  display:flex;align-items:center;justify-content:center}
/* Els botons sí que segueixen el marc: mateixa mida que si hi fossin a dins. */
.vel-btns{transform:scale(var(--zoom,1))}
.vel-btns{display:flex;flex-direction:column;gap:14px;align-items:center}
.vel .pastilla{color:#fff;min-width:187px}
.vel .pastilla:hover{background:rgba(255,255,255,.12)}

/* ---------- capes: learning, pista i desenllaç ----------
   Mesurades sobre les pantalles de feedback de la `Section 1` del Figma, que és
   la referència d'aquestes tres i no la fila de dalt: allà els robots surten pel
   marge dret i aquí van retallats a la vora del marc.

   La pista no tapa el tauler: el Figma el deixa llegir. El que s'amaga mentre hi
   ha una capa oberta són els intents anteriors, l'avís i el botó Resol, que a
   les pantalles de feedback no hi són, i que a més cauen just on va el botó de
   la capa. Vegeu `.amb-capa`. El desenllaç sí que tapa, perquè les seves dues
   pantalles no tenen tauler. */
.capa,
.desenllac{position:absolute;inset:0;overflow:hidden}
/* ---------- la barra de progrés de la partida, 5185:24359 ----------
   Coordenades del node dins del marc de 360 x 800: el grup comença a x50 y94 i
   fa 260 d'ample; l'etiqueta va a y100 i la barra a y125, o sigui 6 i 31 per
   sota del grup.

   El farciment porta el seu propi traç al Figma i el seu radi només és rodó per
   l'esquerra: amb el 10% de la primera paraula, la punta dreta és recta, com
   una barra que encara està creixent. */
.progres{position:absolute;left:50px;top:94px;width:260px}
.progres-text{font-size:13px;line-height:16.25px;font-weight:400;color:var(--apagat);
  text-align:center;margin-top:6px}
.progres-barra{position:absolute;left:0;top:31px;width:260px;height:8px;
  border-radius:10px;background:#fff;border:1.25px solid var(--tinta);overflow:hidden}
.progres-barra i{display:block;height:100%;width:0;border-radius:10px 0 0 10px;
  background:linear-gradient(to right,#54DE75,var(--correcte));
  transition:width var(--ms-llarg) var(--corba)}
@media (prefers-reduced-motion:reduce){ .progres-barra i{transition:none} }

/* EN CLAUDI PARLANT OCUPA LA PANTALLA SENCERA, 16/09. Abans la capa era
   transparent i es veia el tauler a sota; ara tapa, i per això va per sobre de
   la barra (que és z-index 10) i no per sota: a la pantalla de referència no hi
   ha ni barra, ni paraula, ni comptador, ni intents. Només el robot, el que
   diu, i el botó per tornar. */
/* El desenllaç va per sobre de tot, capes incloses: si es perd la paraula amb un
   consell obert, el consell el tapava i semblava que el robot derrotat no
   sortís. Va passar el 16/09, quan les capes van pujar per sobre de la barra. */
.capa{z-index:12}
.desenllac{z-index:13}
.desenllac{
  background:var(--fons);background-attachment:fixed;
}
/* ELS INTENTS ES VEUEN SEMPRE, també amb en Claudi a sobre: decidit el 14/09.
   Abans la capa els amagava i hi havia un «Veure'ls tots» per recuperar-los; ara
   el que s'amaga és en Claudi, i n'hi ha prou de tornar a escriure o de tocar el
   tauler (vegeu `apartaClaudi()`).

   El que sí que s'amaga amb una capa oberta és el que CAU JUST A SOBRE del botó
   de la capa: el Resol i el de canviar paraula, tots dos a y689, i l'avís, que
   és la mateixa veu d'en Claudi dita dues vegades. */
.pantalla.joc.amb-capa > .accions,
.pantalla.joc.amb-capa > .avis{display:none}

/* La capa ja no deixa passar els clics: ara és una pantalla, no un vel. Abans
   els deixava passar perquè es pogués tocar el tauler de sota, que ja no es
   veu. */
.capa{
  background:var(--fons);background-attachment:fixed;
}

/* El robot. Encaixat per la taca de tinta contra el render del node, com els de
   l'onboarding.

   ⚠️ EL MIRALL JA NO VA AQUÍ, 16/09. `.claudi-cap` portava `--flip:-1` i se
   l'emportava tot el que hi posessis: ve de quan el contingut era un WebP fix i
   els nodes del Figma tenien l'escala x negativa, o sigui que el mirall el
   fèiem nosaltres. Des que són els renders de motion, cada vídeo ja ve en la
   seva orientació final, i per al consell ens van donar expressament el
   `-flip`: girar-lo altre cop és una doble volta que el torna a l'orientació
   que no volíem. I al desenllaç girava en Claudi guanyador, que és el que va
   veure l'Aleix.

   La regla que en surt, i no té excepcions: els vídeos es fan servir tal com
   arriben. Si un mira cap on no toca, és una reexportació de motion i no un
   `scaleX` aquí. El `--flip` es queda com a variable perquè les animacions
   escriuen `transform` sencer i el substituirien a mig moviment. */
/* Va per sobre de la bafarada, com al Figma: allà el node del robot és l'últim
   fill de la pantalla i li tapa el cantó, que és justament per on el traç de la
   bafarada queda obert. */
.claudi-cap{position:absolute;z-index:1;height:auto;pointer-events:none;
  --flip:1;transform:scaleX(var(--flip))}
/* ⚠️ LES MIDES NO ES CALCULEN, ES COPIEN, 16/09.
   Havien anat creixent a cop d'ull i a la pantalla 2/3 el robot sortia gegant.
   Mesurat contra el fitxer: CADA VÍDEO DE MOTION ÉS EXACTAMENT EL NODE DEL
   FIGMA A 2x. claudi-intro fa 700x488 i el node 350x243,5; claudi-instruccions
   468x484 i el node 234x242; claudi-consell 486x514 i el node 243x257;
   claudi-consell-flip 562x514 i el node 281x257; claudi-win 518x498 i el node
   259x249. O sigui que la regla és: amplada = amplada nativa del vídeo / 2, i
   `left`/`top` = les coordenades del node dins del marc de 360x800. Res més.
   Quan tres nodes diuen menys amplada que el vídeo (ganeiver 220, el 3/3 247)
   és perquè el marc els retalla per la dreta: el que mana és la x. */
#pista .claudi-cap{width:243px;left:117px;top:351px}              /* claudi_consell, 4886:23686 */
#desenllac.guanyada .claudi-cap{width:259px;left:101px;top:279px}       /* claudi_win, 4886:23599 */
#desenllac.perduda .claudi-cap{width:263px;left:140px;top:272px}        /* claudi_ganeiver, 4886:23619 */
/* El learning no està dibuixat: agafa el lloc de la pista, amb la tinta a la
   mateixa alçada i el mateix cantó, que és l'única cosa que es pot deduir.
   Baixa 20 px respecte de la pista, mesurat el 09/09: la seva tinta començava a
   y377 i dos dels quatre textos del guió (el del nivell 1 i el del 4) fan
   quatre línies i acaben a y397, o sigui que l'última línia es llegia per sota
   del robot. Amb la línia de canvi de nivell a sobre, que al nivell 4 hi va
   sempre, arribaven a y422. Els 20 px són el que es pot baixar sense que el
   robot toqui el botó, que comença a y689. */
/* El learning no té pantalla dibuixada: pren la caixa de la pista, que fa
   servir el mateix vídeo que els passos 2/3 i 3/3. */
#learning .claudi-cap{width:234px;left:117px;top:376px}

/* La bafarada, amb els vectors del node tal com es va fer a l'onboarding. La
   caixa va 0,75 px amunt i a l'esquerra del que diu el Figma perquè el traç de
   1,5 no quedi tallat: el SVG el porta a dins. */
.capa .bafa,
.desenllac .bafa{padding:17.75px 12.75px 0 14.75px}
.bafa.b5,
#desenllac.perduda .bafa{left:61.25px;width:238.5px;height:150.5px;
  background-image:url('../assets/bafarada-5.svg?v=1790150193')}
/* EL CONSELL, CENTRAT I AMUNT, 16/09. Des que la capa tapa la pantalla sencera,
   el conjunt no ha de seguir les coordenades d'una pantalla que tenia el tauler
   a sobre: queda sol, i va centrat. La bafarada de 238,5 en un marc de 360 cau
   a x60,75, i el robot de 331,8 a x14,1. */
#learning .bafa{top:285.25px}
#pista .bafa{top:195px;left:60.75px}
/* El learning és l'únic que no té pantalla dibuixada, i amb la línia de canvi
   de nivell el text del nivell 4 passa 1,5 px de la caixa. Se li deixa créixer
   cap avall en comptes de tallar-lo: el SVG del fons s'estira amb ella. */
/* Puja 45 px i creix cap amunt, no cap avall: el BAIX de la bafarada s'ha de
   quedar on era (436) perquè és el cantó que el robot tapa, que és per on el
   traç del SVG queda obert. El que es guanya és amunt, contra el tauler, que
   amb una capa oberta acaba a y228. */
#learning .bafa{top:240px;height:auto;min-height:196px}               /* el node diu 62, 286 */
/* La de derrota puja i creix cap amunt, pel mateix motiu que la del learning:
   el text no hi cabia i acabava sota el robot. Mesurat el 09/09 amb la solució
   més llarga del diccionari (16 caràcters): el missatge fa quatre línies i
   cinc quan s'hi afegeix «S'ha acabat el temps!», i la tinta del robot comença
   a y294, o sigui que l'última línia i mitja no es llegien. El baix es queda a
   y344,75, que és el cantó que el robot tapa. La frase és de collita nostra i
   està pendent de la Clara: si la deixa més curta, això es pot desfer. */
#desenllac.perduda .bafa{top:145px;height:auto;min-height:199.75px}   /* el node diu 62, 195 */
#desenllac.guanyada .bafa{left:44.25px;top:177.25px;width:271.5px;height:150.5px;
  padding-right:27.75px;background-image:url('../assets/bafarada-6.svg?v=1790150193')}   /* 45, 178 */

/* Els botons, cadascun al seu lloc. `display:contents` treu del mig el div que
   els agrupa sense tocar el marcatge ni els identificadors que fa servir el JS. */
.capa .accions,
.desenllac .accions{display:contents}
.pantalla.joc .capa .pastilla,
.pantalla.joc .desenllac .pastilla{position:absolute;min-width:0;margin:0}
#learning .pastilla,
#pista .pastilla{left:60.5px;top:689px;width:239px}
#seguir{left:72px;top:629px;width:216px}
#finalitza{left:53px;top:689px;width:254px}

/* ---------- fi de partida ----------
   Coordenades del Figma: estrelles a y 120, bloc de text a y 153 amb 321
   d'ample, botons a y 630 dins d'un bloc de 271, i el vector dels arcs a
   y 238 amb 446 d'ample sortint pels dos costats. */
.pantalla.final{
  background:url('../assets/fons-final.svg?v=1790150193') no-repeat left -43px top 238px / 446px auto;
}
.estrelles{position:absolute;left:0;right:0;top:120px;display:flex;gap:7px;justify-content:center}
.estrelles i{width:17px;height:16px;display:block;background:var(--punt);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.estrelles i.plena{background:var(--tinta)}
.bloc-punts{position:absolute;left:19px;top:153px;width:322px;text-align:center}
.bloc-punts h1{font-size:32px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.punts-total{font-size:24px;font-weight:400;color:var(--apagat);font-variant-numeric:tabular-nums;margin-top:4px}
/* Al Figma aquest robot és el mateix node que el de la instrucció 2 però
   reflectit (transform amb l'escala x negativa), i el WebP porta el de la 2 tal
   com es veu allà: sense el `scaleX(-1)` mira cap al costat contrari del
   disseny. Reflectit, i amb la caixa a 42, tapa el marge dret exactament com el
   Figma. */
.claudi-onb.ifi{width:243px;left:111px;top:324px}      /* claudi_consell, 4886:23504 */
.botons-fi{position:absolute;left:45px;top:630px;width:271px;
  display:flex;flex-direction:column;gap:11px;align-items:center}
.botons-fi .pastilla{width:100%;min-width:0}
/* Els dos botons no fan la mateixa amplada: al node 4808:23394 el de dalt és de
   187 i el de sota de 271. Centrat queda a x87 i el Figma el té a x89. */
#comparteix{width:187px}
.pantalla.final .avis{position:absolute;left:0;right:0;top:752px;text-align:center;
  color:var(--apagat)}

/* ---------- la demo ----------
   Les mateixes coordenades que la pantalla de joc: tauler a x16 y118, que és
   d'on està mesurat tot. El que canvia és que a sota hi va l'explicació en
   comptes dels botons de jugar. */
/* L'ENTRADA DE LA DEMO, 16/09. Entrava de cop, amb el tauler i el primer popup
   alhora. Ara el conjunt puja i apareix, i el text ve després. */
@keyframes demo-entra{from{opacity:0;transform:translateY(10px)}}
@keyframes demo-diu{from{opacity:0;transform:translateY(6px)}}
.pantalla.demo{position:absolute;inset:0;padding:0;display:block;text-align:left;
  animation:demo-entra 520ms var(--corba) both}
.demo-text.entra{animation:demo-diu 320ms var(--corba) both}
@media (prefers-reduced-motion:reduce){
  .pantalla.demo,.demo-text.entra{animation:none}
}

/* LES RATLLES DE LA DEMO. Al Figma són una imatge superposada dins del frame,
   que es diu «demo overlay 13px»: ratlles diagonals fines, molt juntes, per
   sobre de tot. Marquen que això és una demostració i no una partida.

   Aquí van amb un degradat repetit i no amb la imatge: pesa zero, no s'ha de
   servir cap fitxer i s'adapta a qualsevol mida de marc. El pas és el del nom
   del node, 13 px, mesurat perpendicular a les ratlles.

   VAN AL FONS I EN L'ALTRE SENTIT (16/09): amb `z-index:-1` queden darrere del
   tauler i dels textos, que és on han de ser. Abans anaven per sobre de tot i
   trepitjaven el joc. */
/* UNA SOLA TRAMA, i va a la finestra, no al marc. Dins del marc es pintava
   escalada pel zoom i es notava una banda central amb les ratlles diferents:
   `background-attachment:fixed` no serveix dins d'un element amb `transform`.
   Com que ni el marc ni les pantalles tenen fons propi, la trama de la finestra
   es veu a través i queda uniforme de punta a punta. */
body:has(.pantalla.demo:not([hidden]))::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(-45deg,
    rgba(51,51,51,.22) 0 1px, transparent 1px 13px);
  background-attachment:fixed;
}
.pantalla.demo .tauler{position:absolute;left:16px;top:118px;width:328px}
/* L'explicació. Quan assenyala un element es col·loca JUST A SOTA d'aquell
   element (ho calcula `demo.js`, que és qui sap quin assenyala); quan ja no
   assenyala res, torna al seu lloc de sota del tauler. */
.demo-text{
  position:absolute;left:16px;right:16px;top:var(--dalt,536px);
  background:#fff;border:1.25px solid var(--marc);border-radius:10px;
  padding:12px 14px;box-shadow:0 6px 18px rgba(20,25,35,.14);
  font-size:15px;line-height:1.35;color:var(--marc);
  transition:top var(--ms-mig) var(--corba);
}
/* La punxa cap al que s'assenyala. Només quan hi ha alguna cosa assenyalada:
   al final de la demo el text ja no apunta enlloc. */
.demo-text.apunta::before{
  content:"";position:absolute;top:-7px;left:34px;width:12px;height:12px;
  background:#fff;border-left:1.25px solid var(--marc);border-top:1.25px solid var(--marc);
  transform:rotate(45deg);
}
/* L'element que la demo està explicant. El contorn és el mateix doble anell
   del focus visible, que ja el tenim provat sobre els dos fons del joc. */
.assenyalat{outline:2px solid var(--marc);outline-offset:3px;border-radius:3px;
  transition:outline-color var(--ms-curt) var(--corba)}

.demo-botons{position:absolute;left:16px;right:16px;top:689px;
  display:flex;flex-direction:column;gap:6px;align-items:center}
.demo-botons .pastilla{min-width:239px}
/* L'«Enrere» de la demo (23/09): sota el botó principal i més discret, perquè
   qui vulgui sortir de la demo cap endavant no s'hi confongui. */
.demo-botons{flex-direction:column-reverse}


/* ---------- moviment ----------
   Cap element no té `opacity:0` ni cap desplaçament al seu estat base: les
   animacions només diuen D'ON VE. Per això, amb el moviment apagat (la regla
   de sota), tot es queda al seu lloc definitiu i cap pantalla no perd res.

   Només `transform` i `opacity`, que són les dues que no fan recalcular la
   maquetació. Res no bloqueja el jugador: la revelació del tauler es talla
   sola si escriu, i els botons del desenllaç són actius des del primer
   instant. */

@keyframes apareix{from{opacity:0}}
@keyframes entra  {from{opacity:0;transform:translateY(10px)}}
@keyframes revela {from{opacity:0;transform:scale(.68)}}

/* Les del robot han d'escriure el mirall a cada fotograma. */
@keyframes claudi-entra{from{opacity:0;transform:scaleX(var(--flip)) translateY(26px)}}
@keyframes claudi-salta{
  0%  {transform:scaleX(var(--flip)) translateY(0)}
  24% {transform:scaleX(var(--flip)) translateY(-18px)}
  48% {transform:scaleX(var(--flip)) translateY(0)}
  66% {transform:scaleX(var(--flip)) translateY(-7px)}
  84% {transform:scaleX(var(--flip)) translateY(0)}
  92% {transform:scaleX(var(--flip)) translateY(-2px)}
  100%{transform:scaleX(var(--flip)) translateY(0)}
}
@keyframes claudi-asseu{from{opacity:0;transform:scaleX(var(--flip)) translateY(-8px)}}

/* L'intent es revela d'esquerra a dreta, que és com es llegeix. Abans els set,
   deu o setze estats apareixien tots alhora i calia tornar a llegir la fila per
   entendre què havia passat. Només la fila nova: `pintar()` refà el tauler
   sencer a cada tecla, i sense la classe s'animarien les deu files a cada
   lletra escrita. */
#intents-fets .fila.nova .casella{
  animation:revela var(--ms-curt) var(--corba) both;
  animation-delay:calc(var(--i,0)*26ms);
}

/* El desenllaç. Guanyar entra i fa dos bots decreixents; perdre baixa fins al
   seu lloc, més lent i sense bot. El contrast entre les dues ÉS el missatge.
   SENSE RETARD des del 21/09. Arrencava 360 ms tard perquè es veiés l'últim
   intent abans de tapar-lo, però això era d'abans del glow, que ja l'ensenya
   (vegeu `celebra()` i `falla()`). Amb tots dos, entre que s'apagava el glow i
   entrava en Claudi hi havia mig segon amb la fila sola i quieta a la pantalla,
   i l'Aleix ho llegia com un error: «es veu per un segon un altre cop la
   pantalla dels intents». */
#desenllac{animation:apareix var(--ms-curt) both}
#desenllac .bafa{animation:entra var(--ms-mig) var(--corba) both}
#desenllac .pastilla{animation:apareix var(--ms-mig) 140ms both}
#desenllac.guanyada .claudi-cap{
  animation:claudi-entra var(--ms-mig) var(--corba) both,
            claudi-salta var(--ms-llarg) 220ms cubic-bezier(.33,0,.4,1);
}
/* El salt NO porta `both` a posta: si en portés, el seu fotograma 0 s'aplicaria
   cap enrere durant els 220 ms de retard i mataria l'entrada. */
#desenllac.perduda .claudi-cap{animation:claudi-asseu 420ms cubic-bezier(.2,.7,.3,1) both}

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

/* ---------- menú ----------
   Les entrades són les del wireframe que va passar la Berta el 08/09/2026.
   Cap de les tres té destí encara: es marquen com a pendents en comptes de fer
   veure que funcionen.

   El menú és vermell, no blanc: al node 4808:26381 porta el mateix degradat que
   el vel del selector de perfils, i el text, la creu i l'escut hi van en blanc.
   Les entrades van a x36, la primera a y314 i cada 51: per això el bloc va a
   coordenades i ja no centrat amb `margin:auto`. */
.menu-obert{
  /* absolut contra l'escenari, no fix contra la finestra: així s'escala amb
     el joc en comptes de quedar-se a la mida de la pantalla. */
  position:absolute;inset:0;z-index:20;
  /* Opac, a diferència del vel de perfils: el menú és una pantalla sencera i
     no ha de deixar veure el que hi ha a sota. */
  background:linear-gradient(180deg,#bd201d 0%,#7c0c0a 100%);   /* mostrejat del render del node */
  display:block;
}
/* La creu és l'SVG del node 5149:23615, no el caràcter ×: el traç és el mateix
   1,26 que els xevrons de les seccions. L'àrea de toc segueix sent de 44. */
.menu-obert .tanca{
  position:absolute;top:54px;left:14px;background:none;border:0;cursor:pointer;
  color:#fff;padding:0;width:44px;height:44px;display:grid;place-items:center;
}
.menu-obert .tanca svg{width:15px;height:15px;display:block}
.menu-obert nav{
  position:absolute;left:36px;top:314px;width:299px;margin:0;padding:0;
  display:flex;flex-direction:column;gap:21px;
}
.menu-obert a{
  color:#fff;text-decoration:none;font-size:18px;font-weight:500;line-height:30px;
  height:30px;display:flex;align-items:center;
}
.menu-obert a small{color:rgba(255,255,255,.75);font-size:13px;margin-left:4px}
/* Les tres entrades són pendents: apagar-les totes no distingeix res i deixa
   la pantalla lluny del disseny, on el text és blanc. Qui avisa és el
   distintiu, que sí que va apagat. */
.menu-obert a[data-pendent]{color:#fff}
.menu-obert a[data-pendent]::after{
  content:"pendent";margin-left:9px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:3px;padding:1px 5px;vertical-align:2px;opacity:.75;
}

/* ---------- «Com es juga», la segona vista del menú (16/09) ----------
   Mateixa graella que la llista d'entrades: x36, i tot en blanc sobre el
   vermell del menú, com la resta. */
/* El títol de la vista, a la capçalera i a la dreta, com al disseny: la creu es
   queda on és i el títol li fa costat. */
.menu-obert.amb-ajuda .escut-menu{display:none}
/* El 16/09 el títol i la creu canvien de costat: el títol a l'esquerra, la creu
   a la dreta. Només en aquesta vista; al menú normal la creu es queda on era. */
/* Les coordenades del node 5053:10700: el títol comença a x10 i la creu cau a
   x330. Com que el botó de la creu fa 44 per tenir àrea de toc i la icona va
   centrada a dins, el botó s'arramba a la vora perquè la icona hi caigui. */
.menu-obert.amb-ajuda .tanca{left:auto;right:1px}
/* I l'interrogant, al MATEIX lloc que la creu (21/09, l'Aleix i els nodes
   5149:23618 i 5149:23837). És el botó que obre aquesta vista, o sigui que la
   creu ha d'aparèixer exactament on hi havia el «?». La creu va a 1 px de la
   vora de la finestra, però el «?» seguia el `padding` de la barra (`--vora`,
   de 11 a 32 px) i quedava de 10 a 31 px més endins: en obrir el menú, la creu
   semblava que saltés. Al Figma de 600, totes dues van a la vora (el «?» a
   x574, la creu a x570). El marge negatiu anul·la la `--vora` només per a
   aquest botó: el so, a l'esquerra, no es mou. */
.barra #ajuda{margin-right:calc(1px - var(--vora,11px))}
/* I el so, a l'altre costat, també a la vora (21/09). Al Figma, tant el de 360
   (node 5148:21816) com el de 600, la icona comença a x17. Amb la `--vora` a
   32 quedava a x40, i als mòbils on el marc s'encongeix (360 × 640) també, perquè
   allà sobra espai als costats. El botó es queda a 11 px de la vora a totes les
   mides, que és el que ja feia al mòbil de 360 sense zoom: la icona hi cau a x15-18. */
.barra #so-barra{margin-left:calc(11px - var(--vora,11px))}
.menu-titol{position:absolute;top:54px;left:10px;color:#fff;
  font-size:18px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  line-height:30px}
#menu-ajuda{
  position:absolute;left:36px;right:36px;top:250px;bottom:24px;overflow-y:auto;
  color:#fff;-webkit-overflow-scrolling:touch;
}
/* Les mostres porten la icona a dins, que és la tercera codificació (color,
   forma i paraula) i la que fa que la llegenda no depengui només del color. */
.pl-cos .mostra{display:grid;place-items:center;color:var(--marc);
  font-size:11px;line-height:1;font-style:normal;border:1px solid rgba(0,0,0,.25)}

/* Una secció. La línia de sota fa de separador entre files, com al Figma. */
.pl{border-bottom:1.25px solid rgba(255,255,255,.35)}
.pl h3{margin:0;font-size:inherit;font-weight:inherit}
/* EL BOTO ES LA FILA SENCERA, que és el que demana el comentari del 14/09:
   abans, en una entrada amb etiqueta, només el text era clicable. */
.pl-cap{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:none;border:0;padding:15px 2px;cursor:pointer;color:#fff;
  font-family:inherit;font-size:18px;font-weight:500;line-height:1.3;text-align:left;
}
.pl-cap .xevron{width:12px;height:8px;flex:none;transition:transform 180ms var(--corba)}
.pl-cap[aria-expanded="true"] .xevron{transform:rotate(180deg)}
.pl-cos{padding:0 2px 16px;font-size:16px;line-height:1.45}
.pl-cos p{margin-bottom:9px}
.pl-cos p:last-child{margin-bottom:0}
.pl-cos .pistes{list-style:none;display:flex;flex-direction:column;gap:10px}
.pl-cos .pistes li{display:flex;align-items:flex-start;gap:11px}
/* Les mostres de color són les mateixes peces del tauler i van amb els tokens,
   o sigui que si la paleta torna a canviar, això es mou sol. */
.pl-cos .mostra{width:18px;height:18px;border-radius:3px;flex:none;margin-top:2px}

/* L'escut és el vermell de l'ACC: sobre el vermell del menú s'ha de veure blanc. */
.escut-menu{position:absolute;top:54px;right:11px;filter:brightness(0) invert(1)}

.menu-obert a label{display:inline-flex;align-items:center;gap:9px;cursor:pointer}
/* Al Figma és un quadrat buit amb el traç blanc, no la casella del sistema. */
.menu-obert a input{width:15px;height:15px;appearance:none;-webkit-appearance:none;
  border:1.5px solid #fff;border-radius:2px;background:none;cursor:pointer;margin:0}
.menu-obert a input:checked{background:#fff}

/* Els tres perfils, només amb el nom: sense la segona línia, el botó torna a
   ser una pastilla d'una alçada. */
.vel .pastilla{padding:0 32px;display:inline-flex;align-items:center;justify-content:center}
.vel-btns{gap:11px}

/* ---------- onboarding ----------
   Posicions llegides del Figma sobre el marc de 360 x 800. La primera versió la
   vaig maquetar jo centrada i no s'assemblava: el text va dins d'una bafarada
   amb traç, alineat a l'esquerra i en negreta, i el robot surt del marc per un
   costat. Els tres passos són un carrusel amb punts, no pantalles amb
   «Continua». */
/* Les pantalles mesurades ocupen el marc sencer, de vora a vora, perquè les
   coordenades del Figma són absolutes sobre 360 x 800. */
.pantalla.onb{position:absolute;inset:0;padding:0;display:block;overflow:hidden;
  text-align:left;touch-action:pan-y}

/* El mirall va en una variable i no escrit al `transform`: qualsevol animació
   que toqui `transform` el substitueix sencer, i el robot es giraria del revés
   a mig moviment. Escrivint `scaleX(var(--flip))` a cada fotograma, no. */
.claudi-onb{position:absolute;height:auto;pointer-events:none;
  --flip:1;transform:scaleX(var(--flip))}
/* ⚠️ DEL 16/09 SÓN VÍDEOS, i les caixes s'han hagut de moure: el robot es mou i
   en alguns fotogrames el braç arriba més enllà que a la imatge fixa, o sigui
   que amb les coordenades velles sortia del marc i la pantalla, que retalla, li
   tallava la mà. Ara cada caixa cap sencera dins dels 360. Si algun dia tornen
   a ser imatges, les coordenades bones són les del comentari de sota.

/* Mesurats el 09/09 contra el Figma, no a ull. El mètode: renderitzar el node
   del robot de cada pantalla, mirar on cau la seva taca de tinta dins del marc i
   encaixar-hi la del WebP. Cal fer-ho així perquè els dos WebP porten el robot
   un 5% més gran que el Figma d'ara (es van exportar d'una versió anterior) i
   perquè cada imatge té la seva vora transparent: comparar caixes no serveix,
   només serveix comparar la tinta. Els decimals són el resultat de l'encaix, no
   una precisió inventada. */
/* Aquests dos van reflectits. El WebP porta el robot mirant a l'altre costat que
   el Figma (comprovat comparant la forma amb el render del node: la mà oberta hi
   va a l'esquerra i el puny a la dreta), i els nodes 4808:26081 i 4815:50425
   tenen l'escala x negativa. Reflectint-lo, els marges transparents canvien de
   costat i per això el `left` no és el mateix que sense el mirall. */
.claudi-onb.i1{width:234px;left:126px;top:279px}         /* claudi_instruccions, 4886:23520 */
.claudi-onb.i2{width:281px;left:0;top:139px}            /* claudi_consell_flip, 4886:23538 */
.claudi-onb.i3{width:234px;left:113px;top:192px}         /* claudi_instruccions, 4886:23585 */

/* La bafarada. Són els vectors del Figma exportats, no un rectangle dibuixat
   amb CSS: el contorn és OBERT per un costat (a la 1/3 li falta el tros de baix
   a la dreta, on el tapa el robot) i el farciment és un degradat de blanc a
   transparent. Cap de les quatre té cua: me la vaig inventar. */
.bafa{position:absolute;background-repeat:no-repeat;background-size:100% 100%}
/* La contrasenya dins del missatge de derrota: vermell i monoespaiada, com al
   node 4808:26296 del Figma (mostrejat: #BF221F, que és el `--absent` que ja
   tenim). La mateixa lletra que les caselles del tauler, perquè es llegeixi
   caràcter a caràcter. Una mica més petita perquè la monoespaiada és més ampla
   i, a 19,5, una contrasenya de 16 caràcters afegia una línia a la bafarada. */
/* Del 21/09, el vermell de les caselles (`--absent`) i no el `--absent-text`
   del Figma: ho demana l'Aleix, perquè la solució es llegeixi com el vermell
   del tauler. Mesurat sobre el blanc de la bafarada: 4,57:1, que passa just el
   4,5 que demana el text de 17,6 px (1.4.3, AA). Si la bafarada deixa de ser
   blanca o la lletra s'aprima, s'ha de tornar a mesurar. */
.bafa .clau{color:var(--absent);font-size:.88em;letter-spacing:0;font-weight:700;
  font-family:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace}

.bafa p{font-size:20px;line-height:1.2;font-weight:700;letter-spacing:-.012em;
  color:var(--marc);margin:0;text-align:left}

/* Dins de la bafarada, aquestes dues línies no són el missatge i no han d'anar
   com ell: `.bafa p` (0,1,1) guanyava a `.transicio` i `.ratxa` (0,1,0) i les
   treia a 19,5 px en negreta i a l'esquerra. Amb el learning del nivell 4, el
   contingut passava de 150,5 px de caixa i la vora tallava l'última línia. */
.bafa .transicio{font-size:13px;font-weight:400;letter-spacing:0;
  text-align:center;color:var(--apagat);margin-bottom:8px}
.bafa .ratxa{font-size:14px;font-weight:500;letter-spacing:0;
  text-align:center;color:var(--marc);margin-bottom:6px}

.bafa.b1{left:49px;top:186px;width:264px;height:126px;padding:15px 16px;
  background-image:url('../assets/bafarada-1.svg?v=1790150193')}
.bafa.b2{left:40px;top:370px;width:282px;height:126px;padding:15px 16px;
  background-image:url('../assets/bafarada-2.svg?v=1790150193')}
.bafa.b3{left:46px;top:125px;width:176px;height:198px;padding:15px 16px;
  background-image:url('../assets/bafarada-3.svg?v=1790150193')}
.bafa.b4{left:46px;top:418px;width:270px;height:102px;padding:14px 16px;
  background-image:url('../assets/bafarada-4.svg?v=1790150193')}

/* ELS TRES PUNTS FORA, 15/09: «per usabilitat i accessibilitat
   multidispositius, anem amb btn Següent enlloc de 3 punts/drag». Al seu lloc,
   el número de pas i un botó que avança, amb les coordenades del node:
   el número a y604, el «Següent» de 155x47 a y629 i la sortida de 187x47 a
   y689, que abans era a 657.

   El lliscar es queda: no és un control que s'hagi de descobrir, ara que hi ha
   un botó que fa la mateixa feina i es veu. */
.pantalla.onb .pas{
  position:absolute;left:0;right:0;top:604px;text-align:center;
  font-size:13px;color:var(--apagat);font-variant-numeric:tabular-nums;
}
.pantalla.onb .seguent{position:absolute;left:102px;top:629px;width:155px;min-width:0}
.pantalla.onb .salta{position:absolute;left:86px;top:689px;width:187px;min-width:0}



/* Llegenda de la tercera: 267 x 79 a x46, y546, amb icona dins de cada xip. */
.pantalla.onb .llegenda{position:absolute;left:46px;top:546px;width:275px;gap:7px;
  font-size:13px;margin:0}

/* LA TERCERA PANTALLA TÉ LA SEVA PRÒPIA COL·LOCACIÓ, i és així al Figma: com
   que la llegenda ocupa de y546 a y625, el número de pas baixa a y664 i el
   botó a y689, on a les altres dues hi va la sortida. Posar-hi les coordenades
   de la primera, com estava fins ara, feia que el «3/3» caigués a sobre de
   l'última línia de la llegenda i el botó la tapés. */
.pantalla.onb[data-pantalla="instruccions3"] .pas{top:664px}
.pantalla.onb[data-pantalla="instruccions3"] .seguent{left:98px;top:689px;width:155px}
.pantalla.onb .llegenda li{gap:9px}
.pantalla.onb .mostra{display:grid;place-items:center;color:var(--marc);font-size:10px;line-height:1;
  width:18px;height:18px;border-radius:3px}
/* La creu, blanca, com la de la casella: aquesta regla ha d'anar DESPRÉS de la
   de sobre, que té la mateixa especificitat i li guanyava per ordre. */
.pantalla.onb .mostra.absent{color:#fff}

/* ---------- inici ----------
   El botó és de contorn, no negre ple: em vaig equivocar a la primera versió.
   I sota el títol hi ha una línia, que tampoc hi era. */
.claudi-onb.i0{width:350px;left:2px;top:146px}          /* candi_intro, 4886:23711 */
.bloc-intro{position:absolute;left:48px;top:411px;width:268px;text-align:center}
.bloc-intro h1{font-size:24px;font-weight:700;letter-spacing:-.018em;line-height:1.2;
  padding-bottom:11px;border-bottom:1.25px solid var(--linia)}
.bloc-intro p{font-size:18px;color:var(--apagat);line-height:1.35;margin-top:11px}
.pantalla.onb .comenca{position:absolute;left:100px;top:689px;width:161px;min-width:0}

/* ---------- escriptori ----------
   No hi ha una versió d'escriptori a part: hi ha el mateix marc de 360 x 800,
   que en una finestra ampla s'escala fins al sostre que posa `ZOOM_MAX` a
   main.js i es queda centrat. Això és el que canvia respecte del mòbil, on el
   marc sempre acaba just i no sobra res per repartir.

   El fons no canvia: el degradat del body és el mateix del marc, o sigui que
   el que sobra pels costats no es llegeix com un forat. Un decorat lateral
   propi d'escriptori no està dibuixat enlloc i seria invenció nostra.

   El centrat vertical és un marge que calcula main.js, no un
   `justify-content` ni un `transform-origin:center`. Ho vaig provar primer
   així i estava malament: la caixa de `.app` fa 800 px d'alt SEMPRE, passi el
   que passi amb l'escala, o sigui que en una finestra més curta de 800 el body
   creix fins a 800 i no queda res per centrar. Amb l'origen al mig, el marc
   escalat es dibuixava al voltant del centre d'aquella caixa de 800 i baixava
   fins a la meitat de la pantalla: a 600 x 338 començava a y231 i a un mòbil
   de 640 baixava 80 px i es tallava. Amb l'origen a dalt, el que es veu comença
   on comença la caixa, i el marge només afegeix el que sobra de debò. */
.app{margin-top:var(--marge-alt,0px)}

/* La barra de dalt s'ancora a les vores de la finestra, no a les del marc. Amb
   el marc de 360 al mig d'un forat de 600, el menú i l'escut es quedaven
   arrambats al centre, a 120 px de la vora, com si la pantalla s'hagués quedat
   petita. `--sobrant` és el que sobra a cada costat, i el posa main.js ja
   dividit pel zoom perquè aquí som a dins de l'escenari escalat.

   Al mòbil val 0 i la barra torna a fer exactament els 360 del marc, o sigui
   que allà no canvia res. El menú obert s'estira igual: si no, en obrir-lo la
   creu saltava de la vora de la finestra a la del marc. */
.barra{left:calc(-1 * var(--sobrant,0px));right:calc(-1 * var(--sobrant,0px));
  width:auto;max-width:none;transform:none;padding:54px var(--vora) 0}
.menu-obert{left:calc(-1 * var(--sobrant,0px));right:calc(-1 * var(--sobrant,0px))}
/* EL VERMELL S'ESTIRA, EL CONTINGUT NO, 16/09. La capa arriba a les vores de la
   finestra a posta (si no, en obrir-la la creu saltava de la vora de la
   finestra a la del marc), però les entrades i «Com es juga» hi anaven
   enganxades i en una finestra ampla es llegien com una línia de punta a punta,
   lluny de la columna on hi ha el joc. Ara el contingut es torna a alinear amb
   el marc: com que la capa s'ha estirat `--sobrant` per cada costat, el marc hi
   comença justament a `+--sobrant`. Al mòbil val 0 i tot queda com estava. */
.menu-obert nav{left:calc(var(--sobrant,0px) + 36px)}
#menu-ajuda{left:calc(var(--sobrant,0px) + 36px);right:calc(var(--sobrant,0px) + 36px)}
/* El títol i la creu NO s'hi mouen: van amb la vora de la finestra, com les
   icones de la barra i pel mateix motiu que elles. Si el títol se n'anés a la
   columna i la creu es quedés a la vora, quedarien desaparellats. */

/* Els 11 px de separació són els del Figma, i són per a una pantalla de 360:
   arrambats a la vora d'un forat de 600 o d'una finestra sencera, el menú i
   l'escut queden enganxats. La separació creix amb l'espai que hi ha, fins a
   32 px i para. Al mòbil, `--sobrant` val 0 i torna a ser exactament 11.
   La creu i l'escut del menú obert segueixen la mateixa vora, si no en obrir-lo
   ballarien respecte dels de la barra. Els 3 px de la creu són la diferència
   que ja tenia al Figma (14 contra 11). */
:root{--vora:clamp(11px, var(--sobrant,0px), 32px)}
.menu-obert .tanca{left:calc(var(--vora) + 3px)}
.escut-menu{right:var(--vora)}

/* El ratolí demana resposta i cap botó en tenia, tret dels del vel de perfils:
   al mòbil no hi ha hover i no s'havia trobat a faltar. Va darrere de
   `pointer:fine` perquè a les pantalles tàctils el hover se't queda enganxat
   després de prémer. */
@media (hover:hover) and (pointer:fine){
  .pastilla:hover:not(:disabled){background:rgba(51,51,51,.06)}
  .pastilla.fosca:hover:not(:disabled){background:var(--tinta)}
  .vel .pastilla:hover:not(:disabled){background:rgba(255,255,255,.12)}
  .pla:hover{color:var(--tinta)}
  .menu:hover i{background:var(--tinta)}
  .punts button:hover:not(.on){background:var(--apagat)}
  .menu-obert a:hover{text-decoration:underline;text-underline-offset:3px}
  .menu-obert .tanca:hover{opacity:.75}
}

/* ---------- previsualització de la imatge de la puntuació, 21/09 ----------
   Peça nova de Claude (feedback: veure la imatge abans de decidir què en fas).
   Penja del body, com el vel. La imatge és 4:5 i mai més alta que el que deixen
   els botons: es limita per alçada i l'ample s'ajusta sol. */
.previa{position:fixed;inset:0;z-index:20;background:var(--fons);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:16px;overflow:auto}
.previa-img{display:block;max-width:100%;max-height:58vh;width:auto;height:auto;
  border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.previa-btns{display:flex;flex-direction:column;gap:11px;align-items:center;width:100%;max-width:271px}
.previa-btns .pastilla{width:100%;min-width:0}
.previa .avis{margin:0;text-align:center;color:var(--apagat)}