/* Disseny «amics» (v107, rama de prova, wiki-cronos#144), variant groc pastel (22-10, Óscar: «no m'agrada el rosa»):
   crema groguenc, tinta càlida, groc per a botons i selecció, fitxes pastel i targetes «enganxina» (vora +
   ombra plana desplaçada). Es carrega DESPRÉS de style.css i només sobreescriu els mateixos tokens
   (`--bg`, `--primary`…) i alguns components: cap pàgina ha de canviar de marcatge perquè es vegi el tema.
   Tipografies (llicència OFL a /fonts/vox/): Fredoka (títols), Nunito (text), Unbounded (xifres).
   Contrastos mesurats (WCAG 2.2 AA, ≥4,5:1) en clar i en fosc: text #2b2100 sobre #fff9e0 = 15,1;
   accent #8a5a00 sobre #fff9e0 = 5,6; tinta sobre groc #ffd83d = 11,5; fosc: text #fff6d6 sobre #1c1708 =
   16,5; accent #ffd54a = 12,7. El text sobre les fitxes pastel va sempre en tinta fixa (també en fosc). */

@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/fonts/vox/Fredoka.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url('/fonts/vox/Nunito.ttf') format('truetype'); }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('/fonts/vox/Unbounded.ttf') format('truetype'); }

:root {
  --bg: #fff9e0; --surface: #ffffff; --surface-alt: #fff0b3;
  --border: #eadfae; --border-fort: #cdbd7d;
  --primary: #8a5a00; --primary-hover: #6b4600; --primary-light: #fff0a8; --primary-border: #ffd83d;
  --primary-sobre: #ffffff;
  --text: #2b2100; --text-muted: #5c4d1a;
  --success: #0f7a57; --success-light: #e9fbf4; --success-border: #9fe5cc; --success-sobre: #ffffff;
  --error: #b91c1c; --error-light: #fdeaee; --error-border: #f5b5c0;
  --warning: #8a5200; --warning-light: #fff3c9; --warning-border: #ffd88a;
  --rang: #8a5a00; --rang-graf: #e0a800; --rang-light: #fff0a8; --rang-border: #ffd83d;
  --font-ui: 'Nunito', system-ui, sans-serif;
  --font-titol: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-xifres: 'Unbounded', 'Fredoka', system-ui, sans-serif;
  --radius: 16px; --radius-sm: 8px; --radius-lg: 24px;
  --tinta: #2b2100; --ombra-plana: #2b2100;
  --shadow: 3px 3px 0 var(--ombra-plana); --shadow-md: 4px 4px 0 var(--ombra-plana);
  --shadow-lg: 6px 6px 0 var(--ombra-plana);
  --pastel-rosa: #ffe3c2; --pastel-menta: #dff7f0; --pastel-crema: #fff0a8; --pastel-lila: #e8e4ff; --pastel-cel: #dceeff;
  --tinta-fixa: #2b2100; --tinta-fixa-suau: #5c4d1a;
  --groc: #ffd83d;
}
@media (prefers-color-scheme: dark) { :root:not([data-tema="clar"]) {
  --bg: #1c1708; --surface: #2b2410; --surface-alt: #3a3115;
  --border: #51451f; --border-fort: #8a7a3a;
  --primary: #ffd54a; --primary-hover: #ffe27a; --primary-light: #3a3115; --primary-border: #ffd83d;
  --primary-sobre: #1c1708;
  --text: #fff6d6; --text-muted: #d8cc9c;
  --success: #6fd78f; --success-light: #12281b; --success-border: #2b5c3a; --success-sobre: #0d2415;
  --error: #ff9b9b; --error-light: #2b1618; --error-border: #6b2b2b;
  --warning: #e8b84b; --warning-light: #2a2110; --warning-border: #5e4a1a;
  --rang: #ffd54a; --rang-graf: #e0a800; --rang-light: #3a3115; --rang-border: #51451f;
  --ombra-plana: #0e0b03;
} }
:root[data-tema="fosc"] {
  --bg: #1c1708; --surface: #2b2410; --surface-alt: #3a3115;
  --border: #51451f; --border-fort: #8a7a3a;
  --primary: #ffd54a; --primary-hover: #ffe27a; --primary-light: #3a3115; --primary-border: #ffd83d;
  --primary-sobre: #1c1708;
  --text: #fff6d6; --text-muted: #d8cc9c;
  --success: #6fd78f; --success-light: #12281b; --success-border: #2b5c3a; --success-sobre: #0d2415;
  --error: #ff9b9b; --error-light: #2b1618; --error-border: #6b2b2b;
  --warning: #e8b84b; --warning-light: #2a2110; --warning-border: #5e4a1a;
  --rang: #ffd54a; --rang-graf: #e0a800; --rang-light: #3a3115; --rang-border: #51451f;
  --ombra-plana: #0e0b03;
}

body { font-family: var(--font-ui); background: var(--bg); color: var(--text); }
h1, h2, h3, .card-title, .scale-label, .logo, .rank-name { font-family: var(--font-titol); font-weight: 600; letter-spacing: 0; }
.stat-number, .stat-principal-num, .rank-points, .vox-xifra { font-family: var(--font-xifres); font-weight: 800; }

/* Capçalera: vora de tinta a sota, sense ombra difuminada. */
.app-header { background: var(--surface); border-bottom: 2px solid var(--tinta); box-shadow: none; }
:root[data-tema="fosc"] .app-header { border-bottom-color: var(--border-fort); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="clar"]) .app-header { border-bottom-color: var(--border-fort); } }
.app-header .logo { font-family: var(--font-titol); font-weight: 700; color: var(--primary); }

/* Targetes «enganxina». */
.card, .stat-card, .micro-opcio, .alert {
  border: 2px solid var(--tinta); border-radius: var(--radius); box-shadow: var(--shadow);
}
:root[data-tema="fosc"] .card, :root[data-tema="fosc"] .stat-card, :root[data-tema="fosc"] .micro-opcio { border-color: var(--border-fort); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="clar"]) .card, :root:not([data-tema="clar"]) .stat-card,
  :root:not([data-tema="clar"]) .micro-opcio { border-color: var(--border-fort); } }
.card-header { border-bottom: 2px solid var(--border); }

/* Botons: vora de tinta i ombra plana que s'enfonsa en prémer. */
.btn { border: 2px solid var(--tinta); border-radius: 999px; font-family: var(--font-titol); font-weight: 600;
  box-shadow: 3px 3px 0 var(--ombra-plana); transition: transform var(--mov-rapid) var(--mov-curva), box-shadow var(--mov-rapid) var(--mov-curva); }
:root[data-tema="fosc"] .btn { border-color: var(--border-fort); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="clar"]) .btn { border-color: var(--border-fort); } }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ombra-plana); }
.btn-primary { background: var(--groc); color: var(--tinta-fixa); }
.btn-primary:hover:not(:disabled) { background: #ffe263; }
.btn-ghost { background: var(--surface); color: var(--text); }
.btn-ghost:hover:not(:disabled) { background: var(--primary-light); color: var(--text); }
.btn-icona { box-shadow: 2px 2px 0 var(--ombra-plana); }
.btn:focus-visible, .seccio:focus-visible, .micro-opcio:focus-visible { outline: 3px solid var(--groc); outline-offset: 2px; }

/* Camps de formulari. */
.form-input, input[type="text"], input[type="email"], input[type="password"], textarea, select {
  border: 2px solid var(--border-fort); border-radius: var(--radius-sm); font-family: var(--font-ui); }
.form-input:focus, textarea:focus, input:focus { border-color: var(--primary); outline: 3px solid var(--groc); outline-offset: 1px; }

/* La barra de les tres seccions: píndoles, i la d'ara en groc. */
.seccions { border-bottom: 0; gap: 8px; padding: 8px 0 12px; margin-bottom: 8px; background: var(--bg); }
.seccions .seccio { flex: 1; border: 2px solid var(--tinta); border-bottom-width: 2px; border-radius: 999px; margin-bottom: 0;
  padding: 9px 6px; background: var(--surface); color: var(--text); box-shadow: 2px 2px 0 var(--ombra-plana); }
:root[data-tema="fosc"] .seccions .seccio { border-color: var(--border-fort); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="clar"]) .seccions .seccio { border-color: var(--border-fort); } }
.seccions .seccio.actual { background: var(--groc); color: var(--tinta-fixa); border-color: var(--tinta-fixa); }
.seccions .seccio:not(.actual):hover { background: var(--primary-light); }

/* Fitxes pastel a les xifres: text sempre en tinta fixa. */
.stats-grid > .stat-card:nth-child(5n+1) { background: var(--pastel-rosa); }
.stats-grid > .stat-card:nth-child(5n+2) { background: var(--pastel-menta); }
.stats-grid > .stat-card:nth-child(5n+3) { background: var(--pastel-crema); }
.stats-grid > .stat-card:nth-child(5n+4) { background: var(--pastel-lila); }
.stats-grid > .stat-card:nth-child(5n+5) { background: var(--pastel-cel); }
.stat-card .stat-number { color: var(--tinta-fixa); }
.stat-card .stat-label { color: var(--tinta-fixa-suau); }

/* Opcions del Test ràpid, i selecció en groc. */
.micro-opcio { background: var(--surface); color: var(--text); border-radius: var(--radius); font-family: var(--font-titol); }
.micro-opcio:hover:not(:disabled) { background: var(--groc); color: var(--tinta-fixa); border-color: var(--tinta-fixa); }
.micro-falles li { border: 2px solid var(--border-fort); border-radius: var(--radius-sm); background: var(--surface); }

/* Moviment: les targetes entren amb rebot escalonat. Tot s'apaga amb «reduir moviment». */
@keyframes vox-entra { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes vox-parpelleja { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes vox-salta { 0%, 100% { transform: translateY(0) rotate(var(--ceti-incl, 0deg)); } 40% { transform: translateY(-14px) rotate(var(--ceti-incl, 0deg)); } 70% { transform: translateY(0) rotate(var(--ceti-incl, 0deg)); } }
@media (prefers-reduced-motion: no-preference) {
  .app-main > .card, .app-main > div > .card, .stats-grid > .stat-card, .vox-salutacio {
    animation: vox-entra .5s cubic-bezier(.34, 1.56, .64, 1) both; }
  .app-main > .card:nth-child(2), .stats-grid > .stat-card:nth-child(2) { animation-delay: .06s; }
  .app-main > .card:nth-child(3), .stats-grid > .stat-card:nth-child(3) { animation-delay: .12s; }
  .app-main > .card:nth-child(4), .stats-grid > .stat-card:nth-child(4) { animation-delay: .18s; }
  .stats-grid > .stat-card:nth-child(5) { animation-delay: .24s; }
  .ceti .ceti-ull { transform-box: fill-box; transform-origin: center; animation: vox-parpelleja 5s infinite; }
  .ceti.ceti-salta { animation: vox-salta .8s cubic-bezier(.34, 1.56, .64, 1) 1; }
}

/* Ceti, la mascota (public/cara.js): una cara dibuixada per una sola funció paramètrica. */
.ceti { display: inline-block; flex: none; }
.ceti svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vox-salutacio { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 16px;
  background: var(--pastel-rosa); color: var(--tinta-fixa); border: 2px solid var(--tinta); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); }
.vox-salutacio .ceti { width: 64px; height: 64px; }
.vox-salutacio-text { min-width: 0; }
.vox-salutacio-titol { font-family: var(--font-titol); font-weight: 700; font-size: 1.25rem; line-height: 1.2; margin: 0; }
.vox-salutacio-sub { margin: 2px 0 0; font-size: .875rem; color: var(--tinta-fixa-suau); font-weight: 600; }
.vox-resultat { display: flex; align-items: center; justify-content: center; gap: 12px; }
.vox-resultat .ceti { width: 72px; height: 72px; }

/* Entrada a «La setmana». */
.vox-entrada-setmana { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta-fixa);
  background: var(--pastel-lila); border: 2px solid var(--tinta); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 12px 16px; margin: 0 0 16px; font-family: var(--font-titol); font-weight: 600; }
.vox-entrada-setmana .ceti { width: 40px; height: 40px; }
.vox-entrada-setmana:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ombra-plana); }

/* Ceti sobre l'escala del dictat i el resultat del Test ràpid. */
.ceti-resultat { width: 88px; height: 88px; margin: 0 auto 8px; }
.ceti-resultat svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* «La setmana»: pantalla completa fosca, 4 pàgines, barres de progrés a dalt (public/setmana.js). */
.setmana-cos { background: #14100a; margin: 0; }
.setmana { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  padding: 18px 20px 20px; max-width: 480px; margin: 0 auto; color: #fff; outline: none;
  background: linear-gradient(180deg, #14100a 0%, #3a2c06 100%); }
.setmana-barres { display: flex; gap: 6px; margin: 0 48px 0 0; }
.setmana-seg { flex: 1; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .25); position: relative; overflow: hidden; }
.setmana-seg.fet { background: #fff; }
.setmana-seg.ara::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); animation: setmana-omple linear forwards; }
.setmana.en-pausa .setmana-seg.ara::after { animation-play-state: paused; }
@keyframes setmana-omple { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .setmana-seg.ara { background: #fff; } .setmana-seg.ara::after { display: none; } }
.setmana-tanca { position: absolute; top: 8px; right: 14px; background: #fff; color: #1d1030; border-color: #1d1030; }
.setmana-pagina { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 10px; padding: 24px 0; }
.setmana-ceti { width: 110px; height: 120px; }
.setmana-cap { font-family: var(--font-titol); font-weight: 600; font-size: 1.125rem; color: #ffd83d; margin: 6px 0 0; }
.setmana-xifra { font-family: var(--font-xifres); font-weight: 900; font-size: 5.5rem; line-height: 1; margin: 0; color: #7cf2c6; }
.setmana-titular { font-family: var(--font-xifres); font-weight: 900; font-size: 1.75rem; line-height: 1.15; margin: 0; color: #7cf2c6; }
.setmana-text { font-family: var(--font-titol); font-weight: 600; font-size: 1.5rem; margin: 0; max-width: 22ch; color: #fff; }
.setmana-peu-text { font-size: 1rem; font-weight: 600; margin: 8px 0 0; max-width: 28ch; color: #e8e4ff; }
.setmana-peu { display: flex; justify-content: space-between; gap: 12px; }
.setmana-peu .btn-ghost { background: #fff; color: #1d1030; border-color: #1d1030; }
.setmana-peu .btn:disabled { opacity: .4; }
.setmana[data-fons="rosa"] .setmana-xifra { color: #ffd83d; }
.setmana[data-fons="crema"] .setmana-titular { color: #ffcf3f; }
.setmana[data-fons="lila"] .setmana-titular { color: #c4b0ff; }
@media (prefers-reduced-motion: no-preference) { .setmana-pagina > * { animation: vox-entra .45s cubic-bezier(.34, 1.56, .64, 1) both; } }

/* Entrada al perfil (la fitxa de la persona: castell, punts, mitjana, ratxa) a la portada: abans només hi havia una
   icona sense text a la capçalera. */
.vox-perfil { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta-fixa);
  background: var(--pastel-menta); border: 2px solid var(--tinta); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 12px 16px; margin: 0 0 12px; font-family: var(--font-titol); font-weight: 600; }
.vox-perfil svg { flex: none; }
.vox-perfil-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.vox-perfil-text small { font-family: var(--font-ui); font-weight: 700; font-size: .8125rem; color: var(--tinta-fixa-suau); }
.vox-perfil-text small:empty { display: none; }
.vox-perfil:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ombra-plana); }

/* Marges: res que sigui dins d'una targeta pot tocar-ne la vora (la fitxa «Aparença» del perfil no portava `card-body`).
   Les píndoles de dins no s'han de sortir de l'amplada de la targeta: es parteixen en files si cal. */
.card-body { padding: 20px; }
.tema-opcions { flex-wrap: wrap; }
.tema-opcio { flex: 1 1 5.5rem; min-width: 0; border: 2px solid var(--tinta); border-radius: 999px; font-family: var(--font-titol); font-weight: 600; }
:root[data-tema="fosc"] .tema-opcio { border-color: var(--border-fort); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="clar"]) .tema-opcio { border-color: var(--border-fort); } }
.tema-opcio[aria-checked="true"] { background: var(--groc); color: var(--tinta-fixa); border-color: var(--tinta-fixa); }
.card .card-title { overflow-wrap: anywhere; }

/* «Versió d'escriptori» només al navegador d'escriptori: a l'app instal·lada i a una pantalla estreta s'amaga (la classe
   `nomes-navegador` existia a mobile.html però no tenia cap regla, i la icona sortia sempre). */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui), (max-width: 700px) {
  .nomes-navegador { display: none !important; }
}

/* Zip de frases (prototip, F97): tauler, casella, camí i temps. Sense espais entre caselles perquè la línia del camí (SVG
   sobre el tauler) caigui al mig de cada una. */
.zip-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.zip-temps { font-family: var(--font-xifres); font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.zip-tauler { position: relative; display: grid; grid-template-columns: repeat(var(--zip-cols, 3), 1fr); aspect-ratio: var(--zip-cols, 3) / var(--zip-files, 3);
  max-width: 440px; margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none;
  border: 2px solid var(--tinta); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
:root[data-tema="fosc"] .zip-tauler { border-color: var(--border-fort); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="clar"]) .zip-tauler { border-color: var(--border-fort); } }
.zip-casella { position: relative; display: grid; place-items: center; text-align: center; border: 1px solid var(--border-fort); background: transparent; }
.zip-casella.zip-feta { background: color-mix(in srgb, var(--groc) 38%, transparent); }
.zip-casella.zip-ara { background: color-mix(in srgb, var(--groc) 70%, transparent); }
.zip-paraula span { position: relative; z-index: 2; padding: 4px 8px; border-radius: 999px; background: var(--pastel-crema); color: var(--tinta-fixa);
  border: 2px solid var(--tinta-fixa); font-family: var(--font-titol); font-weight: 700; line-height: 1.1; white-space: nowrap; overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.zip-linia { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.zip-linia polyline { fill: none; stroke: var(--primary-border); stroke-width: .34; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .95; }
.zip-missatge { min-height: 2.6em; margin: 12px 0 0; font-weight: 700; text-align: center; }
.zip-peu { display: flex; justify-content: center; gap: 10px; margin-top: 8px; }
@keyframes zip-salt { 0%, 100% { transform: none; } 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: no-preference) { .zip-resolt .zip-paraula span { animation: zip-salt .6s cubic-bezier(.34, 1.56, .64, 1) both; } }

/* La primera paraula de la frase, marcada: és per on es comença (al Zip de números, l'1). */
.zip-primera span { background: #ff8a3d; border-color: var(--tinta-fixa); box-shadow: 0 0 0 3px color-mix(in srgb, #ff8a3d 40%, transparent); }
.zip-primera span::before { content: '▶ '; font-size: .75em; }

/* Caselles que ja no es poden arribar (la persona s'ha encallat). */
.zip-aillada { outline: 3px dashed #ff6b6b; outline-offset: -5px; background: color-mix(in srgb, #ff6b6b 18%, transparent); }

/* Explicació del Zip («Com es juga?»), plegada. */
.zip-explica { margin: 0 0 12px; padding: 8px 12px; border: 2px solid var(--border-fort); border-radius: var(--radius-sm); background: var(--surface); }
.zip-explica summary { cursor: pointer; font-family: var(--font-titol); font-weight: 600; }
.zip-explica ol, .zip-explica ul { margin: 6px 0 8px; padding-left: 1.2em; display: grid; gap: 4px; line-height: 1.4; }
.zip-explica h3 { margin: 10px 0 0; font-size: 1rem; }

/* Objectiu del Zip: una sola línia visible; la resta és a «Com es juga?». El tauler ha de quedar a la primera pantalla. */
.zip-objectiu { margin: 0 0 8px; line-height: 1.4; font-weight: 600; }
.zip-explica { margin-bottom: 10px; }

/* Resultat del Zip: estrelles i temps (el temps no resta). */
.zip-resultat { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 0; font-weight: 700; }
.zip-estrelles { font-size: 1.6rem; letter-spacing: .1em; color: #e0a800; line-height: 1; }

/* Número de puzle (nivell) del Zip. */
.zip-nivell { font-family: var(--font-titol); font-weight: 700; font-size: 1rem; padding: 2px 10px; border-radius: 999px; background: var(--primary-light); color: var(--text); border: 2px solid var(--border-fort); }

/* Zip: els tres nivells (3×3, 3×4, 4×4) */
.zip-nivells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.zip-nivell-btn { display: grid; gap: 2px; justify-items: center; padding: 8px 6px; border: 2px solid var(--border-fort); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.zip-nivell-btn small { font-size: .78rem; opacity: .8; }
.zip-nivell-btn.actual { background: var(--primary-light); box-shadow: 0 0 0 2px var(--primary-border); }

/* Llista de textos: la fila que diu que n'hi ha més dictats i què falta per obrir-los */
.text-tanca { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 2px dashed var(--border-fort); border-radius: var(--radius-sm); color: var(--text); background: var(--surface); line-height: 1.4; }
.text-tanca svg { flex: none; }