/* Copyright 2026 Fabio Temporiti
   SPDX-License-Identifier: EUPL-1.2 */
/* Stile condiviso. Colori e nomi delle variabili ripresi dal tabellone de «i Giochi delle Banche».
   Tutte le misure sono multipli di --u, che a 1200×800 vale 12 px. Il minimo in rem fa crescere tutto con lo
   zoom e con la dimensione del testo scelta nel browser (WCAG 1.4.4): sotto quel minimo la pagina scorre. */
@font-face { font-family: Gabarito; src: url('risorse/Gabarito.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }

:root {
  --u: max(min(1vw, 1.5vh), .75rem);
  --carta: #00386B;      /* fondo */
  --foglio: #0A4679;     /* superfici */
  --testata: #002C55;    /* interno dei barattoli, fondi scuri */
  --blu-scuro: #00263F;  /* testo sopra i colori chiari */
  --linea: #1A5389;
  --tenue: #B9CCE0;
  --inchiostro: #FFFFFF;
  --giallo: #FCD116;
  --arancio: #F7941D;
  --rosso: #E0453A;
  --rosa: #FF9D92;
  --verde: #72BF44;
  --menta: #A9E283;
  --celeste: #B9CCE0;
  --evidenza: var(--giallo);   /* titoli in risalto */
}

/* Tema chiaro: si sceglie dal pannello di servizio («Fondo chiaro») o con ?tema=chiaro.
   All'aperto, in piena luce, si legge meglio del fondo blu. */
:root[data-theme='chiaro'] {
  --carta: #FFFFFF;
  --foglio: #E9EFF8;
  --testata: #DDE7F5;
  --linea: #B9CCE0;
  --tenue: #3F628C;
  --inchiostro: #00263F;
  --evidenza: #C75B00;
  --cifra: var(--inchiostro);   /* i numeri sotto i barattoli: i colori chiari non si leggono sul bianco */
  --fuoco: #00263F;             /* il giallo sul bianco non si vede (WCAG 1.4.11) */
}

/* I contenuti indicano il colore per nome: class="c-giallo" imposta --c. */
.c-giallo { --c: var(--giallo); } .c-arancio { --c: var(--arancio); } .c-rosso { --c: var(--rosso); }
.c-rosa { --c: var(--rosa); } .c-verde { --c: var(--verde); } .c-menta { --c: var(--menta); } .c-celeste { --c: var(--celeste); }

* { box-sizing: border-box; }
html { font-size: 100%; }   /* 1rem = il testo scelto nel browser: è il minimo di --u */
html, body { margin: 0; height: 100%; background: var(--carta); color: var(--inchiostro); font-family: Gabarito, system-ui, sans-serif; line-height: 1.3; }
body { font-size: calc(var(--u) * 2); }
body { overflow-x: hidden; overflow-y: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
h1, h2, p { margin: 0; }
h1 { font-size: calc(var(--u) * 6.5); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: calc(var(--u) * 3.2); line-height: 1.1; font-weight: 800; }
.hint { margin-top: calc(var(--u) * 1.2); font-size: calc(var(--u) * 2.4); color: var(--tenue); }
.source { font-size: calc(var(--u) * 1.5); color: var(--tenue); }
[hidden] { display: none !important; }

button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: calc(var(--u) * .35) solid var(--fuoco, var(--giallo)); outline-offset: calc(var(--u) * .3); }

/* Pulsanti: a pillola, come il gettone. */
.btn { min-height: calc(var(--u) * 5.5); padding: 0 calc(var(--u) * 2.6); border-radius: 99em; border: calc(var(--u) * .25) solid var(--tenue); font-weight: 700; font-size: calc(var(--u) * 2.2); }
.btn.primary { background: var(--giallo); border-color: var(--giallo); color: var(--blu-scuro); font-weight: 800; }
.btn.big { min-height: calc(var(--u) * 8); padding: 0 calc(var(--u) * 5); font-size: calc(var(--u) * 3.2); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .35; }

/* Struttura di ogni schermata: barra, intestazione, gioco. */
/* La schermata scala tutta insieme con la finestra (--u segue il lato che fa da limite). Su schermi più larghi
   di 16:9 resta centrata, invece di stirare i riquadri in larghezza lasciando piccoli testi e figure. */
.app { width: 100%; max-width: 178vh; margin: 0 auto; min-height: 100vh; padding: calc(var(--u) * 1.5) calc(var(--u) * 2.5) calc(var(--u) * 2); display: flex; flex-direction: column; }
.topbar { flex: 0 0 auto; height: calc(var(--u) * 6.5); display: flex; align-items: center; justify-content: space-between; }
.topbar-tools { display: flex; gap: calc(var(--u) * 1); }
.topbar-tools .btn { min-height: calc(var(--u) * 5); padding: 0 calc(var(--u) * 2); font-size: calc(var(--u) * 1.9); }
.topbar-tools .theme-switch { width: calc(var(--u) * 5); padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.glyph { width: 64%; height: 64%; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.logo { color: var(--inchiostro); font-size: calc(var(--u) * 2.8); font-weight: 800; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: calc(var(--u) * 1); }
.logo-mark { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); }
.intro { flex: 0 0 auto; padding-top: calc(var(--u) * 2.5); }
.stage { flex: 1 0 auto; }   /* sul web il gioco spinge giù il piede invece di finirci sotto */
.language-select { min-height: calc(var(--u) * 5); max-width: calc(var(--u) * 14); border: calc(var(--u) * .25) solid var(--tenue); border-radius: 99em; padding: 0 calc(var(--u) * 1); background: var(--carta); color: var(--inchiostro); font: inherit; font-size: calc(var(--u) * 1.8); }
.site-footer { flex: 0 0 auto; margin-top: calc(var(--u) * 2); padding-top: calc(var(--u) * 1.2); border-top: calc(var(--u) * .1) solid var(--linea); color: var(--tenue); font-size: calc(var(--u) * 1); line-height: 1.5; }
.footer-links { margin-top: calc(var(--u) * .6); }
.site-footer p { white-space: pre-line; }
.site-footer a { color: inherit; }
.simple-page { overflow: auto; }
.page-content { max-width: 78ch; padding: calc(var(--u) * 4) 0; user-select: text; -webkit-user-select: text; overflow-wrap: anywhere; }
.page-content h1 { margin-bottom: calc(var(--u) * 3); }
.page-copy { margin-bottom: calc(var(--u) * 1.6); font-size: calc(var(--u) * 2.2); line-height: 1.45; }
.page-content h2 { margin: calc(var(--u) * 3) 0 calc(var(--u) * 1); color: var(--evidenza); }
.page-content a { color: inherit; }
.page-note { color: var(--tenue); font-style: italic; margin-bottom: calc(var(--u) * 2); }

/* Codice QR (sempre scuro su bianco, altrimenti i telefoni non lo leggono) e fonte di un dato */
.qr { display: block; aspect-ratio: 1; background: #FFFFFF; border-radius: calc(var(--u) * .5); fill: #00263F; }
.cite { display: flex; align-items: center; gap: calc(var(--u) * 1.2); }
.cite .qr { flex: 0 0 auto; height: calc(var(--u) * 8.5); }
.cite .source { line-height: 1.3; }
.cite-slot:empty { display: none; }

/* Icona dentro un tondo del colore della categoria */
.badge { flex: 0 0 auto; width: calc(var(--u) * 4.4); aspect-ratio: 1; border-radius: 50%; background: var(--c); display: flex; align-items: center; justify-content: center; }
.badge img { width: 68%; height: 68%; }

/* Pagina iniziale: quattro riquadri grandi, due per riga (icona a sinistra, testo a destra) */
.compact h1 { font-size: calc(var(--u) * 4.6); }
.game-menu { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 3); }
.game-link { grid-column: span 3; background: var(--c); color: var(--blu-scuro); text-decoration: none; border-radius: calc(var(--u) * 2); padding: calc(var(--u) * 1.6); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; overflow: hidden; }
.game-link h2 { font-size: calc(var(--u) * 2.5); }
.game-link p { display: none; }
.game-icon { flex: 0 0 auto; width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); }
.game-link:nth-child(n) { grid-column: span 6; flex-direction: row; align-items: center; justify-content: flex-start; gap: calc(var(--u) * 2.2); }
.game-link:nth-child(n) .game-icon { width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
.game-link:nth-child(n) h2 { font-size: calc(var(--u) * 4); }
.game-link:nth-child(n) p { display: block; margin-top: calc(var(--u) * .8); font-size: calc(var(--u) * 2.1); line-height: 1.2; }
.game-link:active { transform: scale(.98); }

/* Gettone: l'unico oggetto che si muove. */
.coin { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--giallo); border: calc(var(--u) * .3) solid var(--arancio); box-shadow: inset 0 0 0 calc(var(--u) * .35) var(--giallo), inset 0 0 0 calc(var(--u) * .55) var(--arancio); }
.coin.pending { background: var(--inchiostro); border-style: dashed; box-shadow: none; }
.coin.drop { animation: drop .55s cubic-bezier(.5, 0, .9, .6) both; }
@keyframes drop {
  0% { transform: translateY(var(--fall, -40vh)); }
  72% { transform: translateY(0); }
  86% { transform: translateY(-14%); }
  100% { transform: translateY(0); }
}

/* Gioco dei gettoni */
.token-intro { min-height: calc(var(--u) * 23); display: flex;   /* 24-10: minima, non fissa: in finestre larghe ma basse il dato sforava sui barattoli */ align-items: flex-end; gap: calc(var(--u) * 3); padding-bottom: calc(var(--u) * 1.5); }
.token-intro .message { flex: 1; min-width: 0; align-self: flex-start; }
.token-intro .cite { flex-direction: column; align-items: flex-start; width: calc(var(--u) * 22); }
.token-intro .cite .qr { height: calc(var(--u) * 11); }
.token-intro .fact { margin-top: calc(var(--u) * 1.2); font-size: calc(var(--u) * 2.9); line-height: 1.22; max-width: 46ch; }
.token-intro.telling h1 { font-size: calc(var(--u) * 4); color: var(--evidenza); }
.token-intro.telling .fact { font-size: calc(var(--u) * 2.6); }
/* 24-10: il pulsante «Avanti» sta accanto al titolo, sulla stessa riga: così la scheda resta nei suoi 23u e non finisce sotto i barattoli */
.token-intro.telling .message { display: grid; grid-template-columns: 1fr auto; column-gap: calc(var(--u) * 2); align-items: center; }
.token-intro.telling h1 { grid-column: 1; }
.token-intro.telling .tokens-next { grid-column: 2; grid-row: 1; margin-top: 0; align-self: center; }
.token-intro.telling .fact { grid-column: 1 / -1; }
.jars { display: flex; gap: calc(var(--u) * 1.4); align-items: stretch; }
.jar-button { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: center; }
.jar { flex: 1; min-height: 0; display: flex; background: var(--testata); border: calc(var(--u) * .35) solid var(--tenue); border-top: 0; border-radius: 0 0 calc(var(--u) * 2.4) calc(var(--u) * 2.4); padding: calc(var(--u) * .7); }
.jar { position: relative; }
.jar .badge { position: absolute; top: calc(var(--u) * 1.2); left: 50%; transform: translateX(-50%); width: calc(var(--u) * 6); z-index: 1; }
/* la pila si ferma sotto l'icona, così i gettoni non la coprono mai */
.pile { margin-top: calc(var(--u) * 7.4); flex: 1; min-width: 0; display: flex; flex-wrap: wrap-reverse; align-content: flex-start; overflow: hidden; }
.pile .slot { padding: calc(var(--u) * .2); }
.jar-button.chosen .jar { border-color: var(--c); }
.jars.telling .jar-button:not(.chosen) { opacity: .5; }
.jar-label { height: calc(var(--u) * 5.2); margin-top: calc(var(--u) * 1); font-weight: 800; font-size: calc(var(--u) * 2); line-height: 1.1; display: flex; align-items: flex-start; justify-content: center; }
.jar-count { font-weight: 800; font-size: calc(var(--u) * 3.4); line-height: 1; color: var(--cifra, var(--c)); }

/* Portafoglio dei valori: a sinistra le voci, a destra l'anello che si compone */
.portfolio-stage { display: flex; gap: calc(var(--u) * 4); padding-top: calc(var(--u) * 2); }
.portfolio-left { flex: 1.3; min-width: 0; display: flex; flex-direction: column; }
.portfolio-left h1 { font-size: calc(var(--u) * 4.2); }
.portfolio-left .hint { font-size: calc(var(--u) * 2.1); }
.portfolio-rows { margin-top: auto; display: flex; flex-direction: column; gap: calc(var(--u) * .8); }
.portfolio-row { display: flex; align-items: stretch; gap: calc(var(--u) * 1); }
.row-add { flex: 1; min-width: 0; min-height: calc(var(--u) * 5.8); position: relative; overflow: hidden; display: flex; align-items: center; gap: calc(var(--u) * 1.4); padding: 0 calc(var(--u) * 1.8); background: var(--foglio); border-radius: calc(var(--u) * 1.6); text-align: left; }
.row-label { flex: 1; font-weight: 800; font-size: calc(var(--u) * 2.5); }
.row-coins { display: flex; gap: calc(var(--u) * .5); height: calc(var(--u) * 3.4); }
.row-coins .coin { height: 100%; }
.row-share { font-weight: 900; font-size: calc(var(--u) * 3); color: var(--cifra, var(--c)); }
.row-bar { position: absolute; left: 0; bottom: 0; height: calc(var(--u) * .9); width: 0; background: var(--c); transition: width .6s ease; }
.row-remove { flex: 0 0 calc(var(--u) * 5.8); border-radius: 50%; border: calc(var(--u) * .25) solid var(--tenue); font-size: calc(var(--u) * 3.6); font-weight: 800; line-height: 1; }
.invisible { visibility: hidden; }
.portfolio-right { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2.5); }
.donut { position: relative; width: calc(var(--u) * 27); max-width: 100%; aspect-ratio: 1; }
.donut svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 15; }
.donut-track { stroke: var(--testata); }
.donut-segment { transition: stroke-dasharray .5s ease, stroke-dashoffset .5s ease; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.donut-number { font-size: calc(var(--u) * 9); font-weight: 900; line-height: .9; }
.donut-label { margin-top: calc(var(--u) * .6); max-width: 11ch; font-size: calc(var(--u) * 1.8); font-weight: 700; line-height: 1.15; color: var(--tenue); }
/* a risultato mostrato l'anello si rimpicciolisce per lasciare posto al dato e alla sua fonte */
.portfolio-right:has(.portfolio-fact:not([hidden])) .donut { width: calc(var(--u) * 19); }
.portfolio-right:has(.portfolio-fact:not([hidden])) .donut-number { font-size: calc(var(--u) * 5.5); }
.portfolio-right:has(.portfolio-fact:not([hidden])) .donut-label { font-size: calc(var(--u) * 1.4); }
.portfolio-actions { display: flex; align-items: center; gap: calc(var(--u) * 1.2); }
.portfolio-actions .btn.big { padding: 0 calc(var(--u) * 3.2); }
.portfolio-fact { align-self: stretch; }
.portfolio-fact h2 { font-size: calc(var(--u) * 3); color: var(--evidenza); }
.portfolio-fact .fact { margin-top: calc(var(--u) * .8); font-size: calc(var(--u) * 2.3); line-height: 1.22; }
.portfolio-fact .cite { margin-top: calc(var(--u) * 1); }
.portfolio-fact .cite .qr { height: calc(var(--u) * 7.5); }

@media (orientation: portrait) {
  h1 { font-size: calc(var(--u) * 5.2); }
  .game-menu { grid-template-rows: none; }
  .game-link, .game-link:nth-child(n) { grid-column: span 6; }
  .jars { flex-wrap: wrap; }
  .portfolio-stage { flex-direction: column; }
  .donut { width: calc(var(--u) * 24); }
  .jar-button { flex: 1 1 30%; min-height: 30vh; }
}
@media (max-width: 600px) {
  :root { --u: max(min(2.4vw, 1.25vh), .5625rem); }
  body { overflow: auto; }
  .app { min-height: 100vh; height: auto; padding: calc(var(--u) * 1.5) calc(var(--u) * 2) calc(var(--u) * 2); }
  .topbar { height: auto; min-height: calc(var(--u) * 6.5); gap: calc(var(--u) * 1); }
  .topbar-tools { flex-wrap: wrap; justify-content: flex-end; }
  .topbar-tools .btn { padding: 0 calc(var(--u) * 1.3); }
  .game-menu { grid-template-columns: 1fr; gap: calc(var(--u) * 1.2); }
  .game-link, .game-link:nth-child(n) { grid-column: auto; min-height: calc(var(--u) * 12); flex-direction: row; align-items: center; gap: calc(var(--u) * 1.5); }
  .game-link:nth-child(n) .game-icon { width: calc(var(--u) * 7); height: calc(var(--u) * 7); }
  .game-link h2, .game-link:nth-child(n) h2 { font-size: calc(var(--u) * 3); }
  .game-link p, .game-link:nth-child(n) p { display: block; margin-top: calc(var(--u) * .5); font-size: calc(var(--u) * 1.9); }
  .jars { gap: calc(var(--u) * .8); }
  .jar-button { flex: 1 1 30%; min-height: calc(var(--u) * 27); }
  .jar-label { font-size: calc(var(--u) * 1.7); }
  .portfolio-stage { gap: calc(var(--u) * 2); }
  .portfolio-actions { flex-wrap: wrap; justify-content: center; }
  .portfolio-actions .btn.big { padding: 0 calc(var(--u) * 2.2); }
  .portfolio-right { padding-bottom: calc(var(--u) * 2); }
  .wheel-stage { flex-direction: column; gap: calc(var(--u) * 2); }   /* anche in orizzontale: a 320 px la ruota larga tutta la pagina non lascia posto al testo */
  .wheel-graphic { width: 100%; height: auto; }
  .site-footer { font-size: calc(var(--u) * 1.2); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Quiz */
.quiz-asking h1 { font-size: calc(var(--u) * 4.4); }
.quiz-stage { padding-top: calc(var(--u) * 2.5); }
.quiz-start { min-height: 55vh; display: flex; flex-direction: column; gap: calc(var(--u) * 2.5); align-items: center; justify-content: center; }
.quiz-notimer { display: flex; align-items: center; gap: calc(var(--u) * 1); font-size: calc(var(--u) * 2.2); cursor: pointer; }
.quiz-notimer input { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); accent-color: var(--giallo); }
.quiz-round { display: grid; grid-template-columns: 1.35fr 1fr; column-gap: calc(var(--u) * 3); align-content: start; }
.quiz-timer { grid-column: 1 / -1; height: calc(var(--u) * .8); background: var(--evidenza); transform-origin: left center; margin-bottom: calc(var(--u) * 2); }
.quiz-answers { display: grid; gap: calc(var(--u) * 1.2); align-content: start; }
.quiz-answer { min-height: calc(var(--u) * 8.5); padding: calc(var(--u) * 1.2) calc(var(--u) * 2.4); border: calc(var(--u) * .25) solid var(--tenue); border-radius: calc(var(--u) * 2); background: var(--foglio); font-size: calc(var(--u) * 2.8); font-weight: 700; text-align: left; }
.quiz-answer.right { background: var(--verde); color: var(--blu-scuro); border-color: var(--verde); }
.quiz-answer.wrong { background: var(--rosso); color: #FFFFFF; border-color: var(--rosso); }
.quiz-feedback h2 { font-size: calc(var(--u) * 4.4); color: var(--evidenza); }
.quiz-why { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 2.6); line-height: 1.22; }
.quiz-feedback .cite { margin-top: calc(var(--u) * 1.2); }
.quiz-next { margin-top: calc(var(--u) * 1.8); }
.quiz-end { min-height: 55vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: calc(var(--u) * 3); }
.quiz-score { color: var(--evidenza); font-size: calc(var(--u) * 16); line-height: .85; font-weight: 900; }

/* Ruota */
.wheel-stage { display: flex; align-items: center; gap: calc(var(--u) * 4); padding-top: calc(var(--u) * 2); }
.wheel-graphic { flex: 0 0 auto; height: min(84vh, 66vw); aspect-ratio: 1; position: relative; }   /* 24-10: ruota più grande (Fabio: +50 % di diametro); il limite vero è l'altezza della finestra */
.wheel-svg { display: block; width: 100%; height: 100%; overflow: visible; touch-action: none; }
.wheel-svg text { font-family: Gabarito, system-ui, sans-serif; font-size: 5px; font-weight: 800; fill: var(--blu-scuro); text-anchor: middle; dominant-baseline: middle; }
.wheel-svg path { stroke: var(--carta); }
.wheel-svg .selected { stroke: var(--inchiostro); stroke-width: 1.8; }
.wheel-pointer { position: absolute; z-index: 2; top: -1.5%; left: 50%; transform: translateX(-50%); border-left: calc(var(--u) * 1.5) solid transparent; border-right: calc(var(--u) * 1.5) solid transparent; border-top: calc(var(--u) * 3) solid var(--inchiostro); }
.wheel-spin { position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24%; aspect-ratio: 1; border-radius: 50%; background: var(--giallo); border: calc(var(--u) * .4) solid var(--arancio); box-shadow: inset 0 0 0 calc(var(--u) * .5) var(--giallo), inset 0 0 0 calc(var(--u) * .8) var(--arancio); color: var(--blu-scuro); font-weight: 900; font-size: calc(var(--u) * 2.6); }
.wheel-spin:disabled { opacity: 1; }
.wheel-side { flex: 1; min-width: 0; }
.wheel-title { font-size: calc(var(--u) * 5.6); }
.wheel-result h2 { font-size: calc(var(--u) * 3.6); color: var(--evidenza); }
.wheel-result .wheel-text { margin-top: calc(var(--u) * 1.2); font-size: calc(var(--u) * 2.8); line-height: 1.22; }
.wheel-result .cite { margin-top: calc(var(--u) * 1.5); }
.wheel-answers { display: grid; gap: calc(var(--u) * 1); margin-top: calc(var(--u) * 2); }
.wheel-answers .quiz-answer { min-height: calc(var(--u) * 6.5); font-size: calc(var(--u) * 2.3); }
.wheel-again { margin-top: calc(var(--u) * 2.5); }

@media (orientation: portrait) {
  .quiz-round { grid-template-columns: 1fr; row-gap: calc(var(--u) * 2); }
  .wheel-stage { flex-direction: column; }
  .wheel-graphic { height: auto; width: min(94vw, 66vh); }
}

/* Le fonti */
.sources-summary { font-weight: 700; }
.sources-table { width: 100%; border-collapse: collapse; margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 2); }
.sources-table th { text-align: left; color: var(--tenue); font-weight: 700; padding: calc(var(--u) * .8) calc(var(--u) * 1); border-bottom: calc(var(--u) * .2) solid var(--linea); }
.sources-table td { padding: calc(var(--u) * .9) calc(var(--u) * 1); border-bottom: calc(var(--u) * .1) solid var(--linea); }
.sources-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sources-table .share { width: 30%; white-space: nowrap; }
.share-bar { display: inline-block; height: calc(var(--u) * 1.2); max-width: 70%; margin-right: calc(var(--u) * .8); background: var(--giallo); border-radius: 99em; vertical-align: middle; }
@media (max-width: 600px) {
  .share-bar { display: none; }
  .sources-table { font-size: calc(var(--u) * 1.8); }
  .sources-table th, .sources-table td { padding-left: calc(var(--u) * .5); padding-right: calc(var(--u) * .5); }
}

/* I numeri del sito */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 2); }
.stats-card { background: var(--foglio); border-radius: calc(var(--u) * 2); padding: calc(var(--u) * 2.2); }
.stats-card h2 { margin: 0 0 calc(var(--u) * 1); }
.stats-big { font-size: calc(var(--u) * 6); font-weight: 800; line-height: 1; }
.stats-label { color: var(--tenue); margin-bottom: calc(var(--u) * 1.2); }
.stats-row { font-size: calc(var(--u) * 2); }
.quiz-stats { margin: 0; }
@media (max-width: 600px) { .stats-grid { grid-template-columns: 1fr; } }
.tokens-next { margin-top: calc(var(--u) * 2); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Finestre strette o zoom alto (a 200% una finestra di 1400 px diventa di 700): una colonna, niente
   da scorrere in orizzontale (WCAG 1.4.10). */
@media (max-width: 900px) {
  .token-intro { height: auto; min-height: calc(var(--u) * 23); flex-direction: column; align-items: stretch; gap: calc(var(--u) * 1.5); }   /* su schermi stretti il dato va su più righe e la fonte va sotto, non di fianco: meglio che i barattoli scendano piuttosto che coprirlo */
  .token-intro .cite { flex-direction: row; align-items: center; width: auto; }
  .token-intro .cite .qr { height: calc(var(--u) * 8.5); }
  .game-menu { grid-template-columns: 1fr; grid-template-rows: none; }
  .game-link, .game-link:nth-child(n) { grid-column: auto; flex-direction: row; align-items: center; gap: calc(var(--u) * 1.5); }
  .portfolio-stage { flex-direction: column; }
  .portfolio-actions { flex-wrap: wrap; justify-content: center; }
  .topbar { flex-wrap: wrap; height: auto; }
}