/* Tecnoaccess app — identità di marca: carta/crema, inchiostro, arancione.
   Titoli serif (magazine), corpo ad alta leggibilità. Unità in rem: la scala
   si regola da html[data-textsize]. Temi chiaro/scuro. */

/* Font impacchettati nell'app: niente rete, niente attese.
   Newsreader variabile per i titoli, Atkinson Hyperlegible per il corpo
   (disegnato dal Braille Institute proprio per l'ipovisione). */
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-var.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url('../fonts/atkinson-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url('../fonts/atkinson-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url('../fonts/atkinson-italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap}

/* Palette (DESIGN.md = fonte di verità, veste 26/8/2026): bianco carta / nero
   contrasto massimo, arancione come accento del quiz, blu profondo come accento
   della Parola che Lega. Elevazione sobria: ombre morbide SOLO nel tema chiaro
   (nel nero assoluto non si vedono: lì i bordi delle card si fanno più
   presenti con --card-line). Gradienti leggeri solo su card eroe e banner,
   MAI sotto testo che perda contrasto: ogni coppia è verificata con
   contrasti.py e riportata in DESIGN.md. --orange è SOLO per accenti non
   testuali; il testo arancione sotto i 24px usa --orange-text. */
:root{
  --paper:#ffffff; --paper-2:#f5f5f5; --paper-3:#ececec;
  --ink:#111111; --ink-2:#3c3c3c; --ink-3:#595959;
  --line:#d4d4d4; --line-soft:#e4e4e4; --line-strong:#767676;
  --card-line:var(--line);   /* bordo delle card: nel tema scuro si rinforza */
  --orange:#e85d04; --orange-deep:#b53f00; --orange-text:var(--orange-deep); --orange-tint:#fff1e8;
  /* La Parola che Lega: blu profondo, leggibile nei due temi (8.7:1 su bianco) */
  --legame:#1d4ed8; --legame-text:#1e40af; --legame-tint:#e9eefb;
  --gold:#9a6b00; --gold-tint:#faf3df;
  --ok:#1b6e3e; --ok-bg:#e7f3ea; --bad:#c0261b; --bad-bg:#fbeae7; --amber:#8a5f00;
  --ring:#b53f00;
  --btn-p-bg:#b53f00; --btn-p-fg:#ffffff;   /* CTA: tinta piena, AA (5.7) */
  --cta-bg:var(--btn-p-bg); --cta-fg:var(--btn-p-fg);
  --grad-p:linear-gradient(var(--btn-p-bg),var(--btn-p-bg)); /* piatto: compat con background:var(--grad-p) */
  /* gradienti eroe: dalla tinta calda alla carta. Il testo poggia sempre
     sull'estremo peggiore, che è la tinta: coppie verificate in DESIGN.md */
  --grad-eroe:linear-gradient(180deg,var(--orange-tint),var(--paper) 82%);
  --grad-legame:linear-gradient(180deg,var(--legame-tint),var(--paper) 82%);
  /* elevazione sobria nel chiaro: due ombre morbide, mai buie */
  --shadow:0 1px 2px rgba(17,17,17,.05),0 6px 16px -8px rgba(17,17,17,.12);
  --shadow-pop:0 2px 4px rgba(17,17,17,.06),0 14px 30px -12px rgba(17,17,17,.18);
  --radius:24px; --radius-s:16px;
  --bg:var(--paper);
  --font-display:'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;
  --font-body:'Atkinson Hyperlegible', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
html[data-theme="dark"]{
  --paper:#000000; --paper-2:#141414; --paper-3:#1f1f1f;
  --ink:#ffffff; --ink-2:#e8e8e8; --ink-3:#b5b5b5;
  --line:#3d3d3d; --line-soft:#2a2a2a; --line-strong:#949494;
  --card-line:#4d4d4d;   /* sul nero l'ombra non esiste: il bordo fa il rilievo */
  --orange:#ff7f34; --orange-deep:#ff9d5c; --orange-tint:#241206;
  --legame:#6b9bff; --legame-text:#8db4ff; --legame-tint:#0b1430;
  --gold:#e0b34a; --gold-tint:#201a08;
  --ok:#4ec27d; --ok-bg:#10241a; --bad:#ff6a5a; --bad-bg:#2a100d; --amber:#e0a92a;
  --ring:#ff9d5c;
  --btn-p-bg:#ff7f34; --btn-p-fg:#000000;   /* su nero: arancio pieno, testo nero (AAA 8.3) */
  --grad-p:linear-gradient(var(--btn-p-bg),var(--btn-p-bg));
  --shadow:none;
  --shadow-pop:none;
  --bg:var(--paper);
}
@media (prefers-color-scheme:dark){
  html[data-theme="auto"]{
    --paper:#000000; --paper-2:#141414; --paper-3:#1f1f1f;
    --ink:#ffffff; --ink-2:#e8e8e8; --ink-3:#b5b5b5;
    --line:#3d3d3d; --line-soft:#2a2a2a; --line-strong:#949494;
    --card-line:#4d4d4d;
    --orange:#ff7f34; --orange-deep:#ff9d5c; --orange-tint:#241206;
    --legame:#6b9bff; --legame-text:#8db4ff; --legame-tint:#0b1430;
    --gold:#e0b34a; --gold-tint:#201a08;
    --ok:#4ec27d; --ok-bg:#10241a; --bad:#ff6a5a; --bad-bg:#2a100d; --amber:#e0a92a;
    --ring:#ff9d5c;
    --btn-p-bg:#ff7f34; --btn-p-fg:#000000;
    --grad-p:linear-gradient(var(--btn-p-bg),var(--btn-p-bg));
    --shadow:none;
    --shadow-pop:none;
  }
}

/* Scala testo (impostazione in Altro) */
html{font-size:100%}
html[data-textsize="grande"]{font-size:118.75%}
html[data-textsize="molto-grande"]{font-size:137.5%}
html[data-textsize="enorme"]{font-size:160%}
html[data-textsize="gigante"]{font-size:185%}

*{box-sizing:border-box}
html,body{margin:0}
/* Il doppio tap non deve zoomare (gesto da pagina web, fuori posto in un'app).
   «manipulation» toglie il doppio-tap-zoom e il ritardo dei 300 ms, ma lascia
   intatto il pinch a due dita, che a chi ci vede poco serve davvero. */
html{touch-action:manipulation}
/* con «Riduci movimento» attivo, il feedback di pressione resta cromatico, zero scatto */
@media (prefers-reduced-motion:reduce){ .btn:active,.game-card:active,.btn.cat:active{transform:none} }
[hidden]{display:none !important}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);   /* superficie unica: niente aloni (DESIGN.md) */
  min-height:100dvh; font-size:1.0625rem; line-height:1.5;
  display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:8px;top:-60px;background:var(--btn-p-bg);color:var(--btn-p-fg);padding:10px 14px;border-radius:8px;z-index:30;transition:top .15s;font-weight:700}
.skip-link:focus{top:8px}

/* ---------------- Masthead ---------------- */
.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top) + 12px) 18px 12px;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.brand-mark{width:30px;height:30px;border-radius:8px;flex:none;display:block}
/* Campanella e Messaggi nel masthead: tocco largo 44px, badge rosso leggibile
   anche con testo ingrandito. Il numero visivo e' aria-hidden: per VoiceOver
   viaggia nell'etichetta del pulsante. */
.top-azioni{margin-left:auto;display:flex;gap:6px;align-items:center}
.top-icona{position:relative;width:44px;height:44px;border:none;background:transparent;
  border-radius:12px;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.top-icona:active{background:color-mix(in srgb, var(--ink) 10%, transparent)}
.top-badge{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;background:#d21f26;color:#fff;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-body)}
.brand{font-family:var(--font-display);font-size:clamp(18px,1.4rem,32px);font-weight:700;letter-spacing:-.01em;color:var(--ink)}

main#main{max-width:680px;width:100%;margin:0 auto;padding:16px 16px calc(88px + env(safe-area-inset-bottom));flex:1}
main#main:focus{outline:none}
.panel:focus{outline:none}

h1{font-family:var(--font-display);font-variation-settings:'opsz' 44;margin:.1em 0 .4em;font-size:2.15rem;line-height:1.08;letter-spacing:-.018em;color:var(--ink);font-weight:700}
h2{font-family:var(--font-display);font-variation-settings:'opsz' 32;margin:.1em 0 .4em;font-size:1.5rem;line-height:1.16;letter-spacing:-.012em;color:var(--ink);font-weight:700}
h3{font-family:var(--font-display);margin:.2em 0 .3em;font-size:1.2rem;line-height:1.25}
h1:focus,h2:focus,h3:focus{outline:none}
.lead{font-size:1.1rem;line-height:1.55;color:var(--ink-2)}
.hint{color:var(--ink-3);font-size:.9rem}
/* Gerarchia tipografica (26/8): eyebrow sopra, titolo serif, lead sotto.
   .eyebrow e' il nome nuovo, .crumb resta per il markup esistente. */
.crumb,.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--orange-deep);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;margin:0 0 10px}
.crumb::before,.eyebrow::before{content:"";width:16px;height:3px;border-radius:2px;background:var(--orange);flex:none}
/* eyebrow nel colore della Parola che Lega, dove serve fuori dalla card eroe */
.crumb.legame,.eyebrow.legame{color:var(--legame-text)}
.crumb.legame::before,.eyebrow.legame::before{background:var(--legame)}

/* Card: elevazione sobria (26/8). Nel chiaro l'ombra morbida stacca dalla
   carta; nel nero assoluto lavora --card-line, un bordo piu' presente. */
.card{background:var(--paper);border:1px solid var(--card-line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);margin-bottom:20px}
/* firma editoriale: un trattino arancione sotto i titoli di sezione */
.card>h2::after{content:"";display:block;width:42px;height:3px;border-radius:2px;background:var(--orange);margin-top:8px}
.card>h1::after{content:"";display:block;width:56px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--orange),var(--orange-deep));margin-top:10px}
.screen{animation:fade .22s ease}
@keyframes fade{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen{animation:none}}

a{color:var(--orange-deep);text-decoration:underline;text-underline-offset:2px}

.field{margin:14px 0}
.field label{display:block;font-weight:700;margin-bottom:6px;font-size:.95rem}
select,input[type="text"],input[type="email"],input[type="password"]{font:inherit;padding:12px;border-radius:12px;border:1.5px solid var(--line);width:100%;background:var(--paper-2);color:var(--ink)}
select:focus,input:focus{border-color:var(--orange)}

.btn{font:inherit;font-weight:600;cursor:pointer;border:1.5px solid transparent;border-radius:var(--radius-s);padding:13px 17px;min-height:52px;background:var(--paper-3);color:var(--ink);width:100%;text-align:left;transition:transform .06s ease,box-shadow .15s ease}
/* premuto percepibile anche senza movimento: lo scatto e' spento da Riduci
   movimento, il cambio cromatico resta */
.btn:active{transform:translateY(1px) scale(.995);filter:brightness(.94)}
.btn:hover:not(:disabled){filter:brightness(.97)}
.btn.primary{background:var(--btn-p-bg);color:var(--btn-p-fg);text-align:center;font-weight:800;letter-spacing:.01em}
.btn.primary:hover:not(:disabled){filter:brightness(1.05)}
.btn.ghost{background:transparent;border-color:var(--line);text-align:center;color:var(--ink)}
.btn.ghost:hover:not(:disabled){background:var(--paper-2);filter:none}
.btn.small{min-height:44px;padding:9px 14px;width:auto;font-size:.95rem}
.btn.apple{background:#000;color:#fff;text-align:center;font-weight:700;border-color:#000;display:flex;align-items:center;justify-content:center;gap:6px}
.btn.apple:hover:not(:disabled){background:#111;filter:none}
.btn[aria-disabled="true"]{pointer-events:none;opacity:.55}
.btn.danger{background:transparent;border-color:var(--bad);color:var(--bad);text-align:center;font-weight:700}
.btn.danger:hover:not(:disabled){background:var(--bad-bg);filter:none}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0}
.btn-row .btn{width:auto;flex:1 1 auto;text-align:center}
.danger-text{color:var(--bad);font-weight:600;background:var(--bad-bg);border:1px solid var(--bad);border-radius:12px;padding:12px 14px}
.row.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
/* ---------------- Commenti ---------------- */
.comments{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
.comment-list{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:12px}
.comment-replies{list-style:none;margin:10px 0 0;padding:0 0 0 14px;border-left:2px solid var(--line-soft);display:flex;flex-direction:column;gap:10px}
.comment-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.comment.mine>.comment-card{border-color:var(--orange);background:var(--orange-tint)}
.comment-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.comment-avatar{flex:0 0 auto;width:30px;height:30px;border-radius:50%;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.85rem}
.comment-meta{margin:0;font-size:.85rem;color:var(--ink-3)}
.comment-body{margin:.3em 0 .5em;white-space:pre-wrap;overflow-wrap:anywhere}
.comment-body.in-review{color:var(--ink-3);font-style:italic}
.comment-actions{display:flex;flex-wrap:wrap;gap:8px}
.comment-input{width:100%;min-height:80px;font:inherit;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);resize:vertical}
.composer{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.report-box,.terms-inline{margin-top:10px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--paper-2)}
.report-box legend{font-weight:700;padding:0 4px}
.terms-details{margin-top:6px}
.terms-details summary{cursor:pointer;color:var(--orange-deep);font-weight:700}
.terms-body p{font-size:.92rem;color:var(--ink-2)}
/* ---------------- Vetrina quiz + banner giochi ---------------- */
/* Card eroe: gradiente leggero dalla tinta calda alla carta. Il testo poggia
   sull'estremo peggiore (la tinta): coppie verificate, tabella in DESIGN.md. */
.feature-quiz{border:2px solid var(--orange);background:var(--grad-eroe);overflow:hidden}
.feature-quiz>.game-banner{margin:-24px -24px 16px;border-radius:0}
/* La Parola che Lega ha il suo accento: blu profondo, stessi contrasti AA */
.feature-legame{border:2px solid var(--legame);background:var(--grad-legame);overflow:hidden}
.feature-legame>.game-banner{margin:-24px -24px 16px;border-radius:0}
.feature-legame .crumb{color:var(--legame-text)}
.feature-legame .crumb::before{background:var(--legame)}
.feature-legame>h2::after,.feature-legame>h1::after{background:var(--legame)}
.game-banner{margin:-4px -4px 14px;border-radius:14px;overflow:hidden;line-height:0}
.game-banner svg{display:block;width:100%;height:auto}
.btn.primary.big{font-size:1.1rem;min-height:58px;margin-top:6px}
/* ---------------- Profilo ---------------- */
.profile-head{display:flex;align-items:center;gap:14px;margin:6px 0 12px}
.profile-avatar{flex:0 0 auto;width:58px;height:58px;border-radius:50%;color:#fff;font-weight:800;font-size:1.6rem;display:flex;align-items:center;justify-content:center}
.profile-name{font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin:0}
.profile-bio{margin:.2em 0 0;color:var(--ink-2)}
.stat-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.stat-box{flex:1 1 60px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center}
.stat-n{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--orange-deep)}
.stat-l{display:block;font-size:.78rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
/* ---------------- Badge ---------------- */
.badge-group{margin-top:14px}
.badge-group h4{margin:.2em 0 .4em;color:var(--ink-2)}
.badge-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.badge-item{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--paper)}
.badge-item.got{border-color:var(--orange);background:var(--orange-tint)}
.badge-item.locked{opacity:.62}
.badge-emoji{flex:0 0 auto;font-size:1.5rem;width:34px;text-align:center}
.badge-text{display:flex;flex-direction:column}
.badge-label{font-weight:700}
.badge-desc{font-size:.86rem;color:var(--ink-2)}
.badge-state{font-size:.76rem}
/* ---------------- Overlay profilo ---------------- */
body.overlay-open{overflow:hidden}
.overlay{position:fixed;inset:0;z-index:60;background:rgba(20,12,4,.55);display:flex;justify-content:center;align-items:flex-start;overflow-y:auto;padding:max(env(safe-area-inset-top),16px) 12px 40px}
.overlay-panel{background:var(--bg);border:1px solid var(--card-line);border-radius:18px;box-shadow:var(--shadow-pop);width:100%;max-width:560px;padding:16px 16px 24px;margin-top:8px}
.overlay-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.overlay-head h2{margin:0;font-size:1.3rem}
.overlay-head .btn{width:auto}
/* nome utente cliccabile ovunque */
.user-link{display:inline;background:none;border:none;padding:0;margin:0;font:inherit;font-weight:700;color:var(--orange-deep);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.user-link:hover{color:var(--orange)}
/* liste utenti */
.user-list{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:8px}
.user-row{display:flex;gap:8px;align-items:center}
.user-row-main{flex:1;display:flex;align-items:center;gap:12px;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;font:inherit;color:var(--ink);width:100%}
.user-row-main:hover{background:var(--paper-2)}
.user-avatar{flex:0 0 auto;width:38px;height:38px;border-radius:50%;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.user-row-text{display:flex;flex-direction:column}
.user-row-name{font-weight:700}
.stat-box.tappable{cursor:pointer}
.stat-box[disabled]{cursor:default}
.profile-jump{margin-top:10px}
.badge-shelf-h{margin-top:16px}
.field-label{display:block;font-weight:600;margin-bottom:4px}
.color-row{display:flex;flex-wrap:wrap;gap:10px}
.swatch{width:44px;height:44px;border-radius:50%;border:3px solid transparent;cursor:pointer}   /* bersaglio di tocco minimo 44pt */
.swatch[aria-checked="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
/* ---------------- Moderazione ---------------- */
.mod-list{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:12px}
.mod-item{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--paper)}
.mod-item .comment-body{margin:.3em 0}
.mod-state{margin:.2em 0 .5em}
.mod-actions{display:flex;flex-wrap:wrap;gap:8px}
/* ---------------- Centro notifiche ---------------- */
.notif-list{list-style:none;padding:0;margin:10px 0;display:flex;flex-direction:column;gap:8px}
.notif-item{border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden}
.notif-item.unread{border-color:var(--orange);background:var(--orange-tint)}
.notif-row{display:block;width:100%;text-align:left;background:none;border:none;padding:12px 14px;font:inherit;color:var(--ink);cursor:pointer}
.notif-row.static{cursor:default}
.notif-row:hover:not(.static){background:var(--paper-2)}
.notif-inner{display:flex;gap:12px;align-items:flex-start}
.notif-emoji{flex:0 0 auto;font-size:1.4rem}
.notif-text{display:flex;flex-direction:column;min-width:0}
.notif-title{font-weight:700}
.notif-body{color:var(--ink-2);overflow-wrap:anywhere}
.notif-time{font-size:.8rem;margin-top:2px}
html[data-theme="dark"] .btn.apple{background:#fff;color:#000;border-color:#fff}
@media (prefers-color-scheme:dark){html[data-theme="auto"] .btn.apple{background:#fff;color:#000;border-color:#fff}}
.apple-logo{font-size:1.05em;line-height:1}
.auth-sep{text-align:center;color:var(--ink-3);font-size:.82rem;margin:12px 0 4px;text-transform:uppercase;letter-spacing:.06em}
.btn:disabled{cursor:default;opacity:.55}
.row{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.row .btn{width:auto;flex:1;min-width:140px}

/* niente border-radius sull'anello globale: a fuoco l'elemento non deve
   cambiare forma; l'anello segue il raggio proprio di pulsanti e card */
:focus-visible{outline:3px solid var(--ring);outline-offset:2px;box-shadow:0 0 0 2px var(--paper)}

/* ---------------- Tab bar ---------------- */
/* ===== Player a tutto schermo («in riproduzione») =====
   Copre tutto, comandi grandi e distanziati: si usa anche senza guardare, e
   chi vede poco trova bersagli larghi. È un dialogo modale. */
.player-full{
  position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  background:var(--paper);
  padding:calc(10px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  overflow-y:auto;
}
.pf-header{width:100%;display:flex;align-items:center;gap:12px}
.pf-chiudi{
  width:48px;height:48px;border-radius:999px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;
}
.pf-occhiello{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:700}
.pf-copertina{
  width:min(62vw,240px);aspect-ratio:1;border-radius:16px;
  background:var(--paper-2, #222) center/cover no-repeat;
  display:grid;place-items:center;font-size:3rem;margin-top:4px;border:1px solid var(--line);
}
/* il titolo non deve mangiarsi lo schermo: al massimo tre righe, poi taglia */
/* Il titolo non deve mangiarsi lo schermo, ma il ritaglio a righe con
   `-webkit-box` faceva collassare l'elemento ad altezza zero e il titolo
   spariva del tutto. Un tetto in altezza fa lo stesso lavoro e non dipende da
   proprieta legacy. */
.pf-titolo{
  font-family:var(--font-display);font-size:1.2rem;line-height:1.32;text-align:center;margin:0;
  max-width:340px;max-height:calc(1.32em * 3);overflow:hidden;
}
.pf-titolo:focus{outline:none}
.pf-sub{color:var(--ink-3);margin:0;font-weight:700;font-size:.9rem}
/* La barra si disegna a mano: `accent-color` da solo lascia la traccia grigia
   su fondo chiaro, e un ipovedente non vede a che punto e l'episodio. Qui la
   parte gia ascoltata e arancione piena, il resto e il grigio delle linee. */
.pf-barra{
  width:100%;max-width:560px;height:44px;-webkit-appearance:none;appearance:none;
  background:transparent;cursor:pointer;
}
.pf-barra::-webkit-slider-runnable-track{
  height:10px;border-radius:999px;
  background:linear-gradient(to right,var(--orange) 0 var(--pct,0%),var(--line) var(--pct,0%) 100%);
}
.pf-barra::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;margin-top:-8px;border-radius:999px;
  background:var(--orange);border:3px solid var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.pf-barra::-moz-range-track{height:10px;border-radius:999px;background:var(--line)}
.pf-barra::-moz-range-progress{height:10px;border-radius:999px;background:var(--orange)}
.pf-barra::-moz-range-thumb{width:26px;height:26px;border-radius:999px;background:var(--orange);border:3px solid var(--paper)}
.pf-tempi{width:100%;max-width:560px;display:flex;justify-content:space-between;color:var(--ink-3);font-size:.9rem;font-variant-numeric:tabular-nums}
/* I tre comandi su UNA riga sola, sempre. Prima erano pillole con dentro
   «Indietro 15s»: col testo lungo non entravano in larghezza e il flex andava
   a capo, sfalsando i tre pulsanti su tre righe diverse. Adesso e una griglia
   a tre colonne uguali, quindi il play resta al centro esatto a qualunque
   dimensione del testo, e i secondi stanno DENTRO l'icona come su Spotify e
   Audible. L'etichetta parlata resta per esteso in aria-label. */
.pf-comandi{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  justify-items:center; gap:8px; width:100%; max-width:360px; margin-top:4px;
}
.pf-skip{
  position:relative; width:64px; height:64px; border-radius:999px;
  border:0; background:none; color:var(--ink); cursor:pointer;
  display:grid; place-items:center; padding:0;
}
.pf-skip:active{opacity:.55}
.pf-ic{width:44px;height:44px;display:block}
.pf-ic-flip{transform:scaleX(-1)}          /* la stessa freccia, specchiata */
/* il numero vive DENTRO l'svg: cosi resta al centro dell'arco a qualunque
   dimensione, invece di scivolare come faceva sovrapposto da fuori */
.pf-ic-t{font-size:15px;font-weight:800;fill:currentColor;font-family:var(--font-body)}
.pf-ic-flip .pf-ic-t{transform:scaleX(-1);transform-origin:25px 24px}   /* il disegno e specchiato, il numero no */
.pf-play{
  width:80px; height:80px; border-radius:999px; border:0; cursor:pointer;
  background:var(--cta-bg); color:var(--cta-fg);
  display:grid; place-items:center; padding:0;
}
.pf-play:active{transform:scale(.96)}
.pf-ic-play{width:40px;height:40px;display:block}
/* Velocita: etichetta sopra, comandi centrati sotto. Con `space-between` su
   schermo stretto l'etichetta restava incollata a sinistra e i tasti a destra,
   con un vuoto in mezzo che sembrava un errore di impaginazione. */
.pf-velocita{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:100%; max-width:360px; margin-top:6px;
}
.pf-vel-lab{font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.pf-vel-ctrl{display:flex;align-items:center;gap:6px}
.pf-vel-ctrl .btn{
  width:52px;min-width:52px;height:52px;padding:0;border-radius:999px;
  font-size:1.5rem;font-weight:700;line-height:1;display:grid;place-items:center;
}
.pf-vel-val{min-width:4.2em;text-align:center;font-weight:800;font-size:1.25rem;font-variant-numeric:tabular-nums}
.mini-play svg{width:22px;height:22px;display:block}
.pf-altro{max-width:560px;width:100%}
.pf-chiudi:focus-visible,.pf-play:focus-visible,.pf-skip:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
body.player-aperto{overflow:hidden}

/* ===== Player ridotto sopra la barra dei pannelli =====
   Sta appoggiato sulla barra e la segue: una riga sola, titolo che scorre
   fino a due righe e il tasto play/pausa grande abbastanza da colpirlo
   senza guardare. Sparisce in modalità partita insieme alla barra. */
.mini-player{
  position:fixed;left:0;right:0;z-index:19;
  /* appoggiato sull'altezza VERA della barra, che cresce coi testi grandi:
     un valore fisso lo farebbe finire sotto la barra ai livelli maggiori */
  bottom:var(--tabbar-h, calc(60px + env(safe-area-inset-bottom)));
  display:flex;align-items:stretch;gap:8px;
  background:color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-top:1px solid var(--line);
  padding:8px 12px;
}
.mini-open{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
  background:none;border:0;padding:4px 0;text-align:left;cursor:pointer;
  font:inherit;color:var(--ink);
}
.mini-eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:700}
.mini-title{
  font-weight:700;font-size:.95rem;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mini-play{
  flex:0 0 auto;width:52px;min-height:52px;border-radius:999px;
  background:var(--cta-bg);color:var(--cta-fg);border:0;cursor:pointer;
  font-size:1.3rem;line-height:1;display:grid;place-items:center;
}
.mini-play:focus-visible,.mini-open:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
/* col player ridotto acceso il contenuto non deve finirci sotto */
body.mini-attivo main#main{padding-bottom:calc(160px + env(safe-area-inset-bottom))}
body.partita-in-corso .mini-player{display:none}

.tab-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;justify-content:space-around;gap:2px;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tab-btn{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;cursor:pointer;color:var(--ink-3);
  font:inherit;font-size:clamp(11px,.72rem,15px);font-weight:700;padding:6px 2px;min-height:56px;border-radius:14px;
  transition:background .15s ease,color .15s ease;
}
.tab-btn svg{width:min(1.55rem,34px);height:min(1.55rem,34px);flex:none}
/* tab attiva: colore AA + barra (segnale non cromatico, WCAG 1.4.1) + fondo caldo */
.tab-btn::before{content:"";width:26px;height:3px;border-radius:2px;background:transparent;flex:none}
.tab-btn[aria-current="page"]{color:var(--orange-deep);background:var(--orange-tint)}
.tab-btn[aria-current="page"]::before{background:currentColor}
.tab-btn[aria-current="page"] svg{stroke-width:2.5}
.tab-btn:hover{color:var(--ink)}

/* ---------------- Liste ---------------- */
.item-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.item-btn{display:block;background:var(--paper-2);border:1px solid var(--line)}
.item-btn:hover{background:var(--paper-3)}
.item-title{font-family:var(--font-display);font-weight:700;display:block;font-size:1.08rem;line-height:1.25;letter-spacing:-.005em}
.item-meta{color:var(--ink-3);font-size:.82rem;display:block;margin-top:4px;font-variant-numeric:tabular-nums}
.item-excerpt{display:block;margin-top:6px;font-size:.95rem;color:var(--ink-2)}
/* Sfida un amico: la lista di chi segui, con il pulsante Sfida a destra */
.sfida-amici{margin-top:14px}
.sub-h{font-family:var(--font-display);font-size:1rem;margin:0 0 8px;color:var(--ink-2)}
.sfida-amici .row.between{padding:8px 0;border-bottom:1px solid var(--line)}
.sfida-amici .row.between:last-child{border-bottom:0}
.item-list.compact{gap:8px}
.item-list.compact li{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
/* anteprima con miniatura */
.item-btn.has-thumb{display:flex;gap:12px;align-items:flex-start}
.item-thumb{width:96px;height:72px;object-fit:cover;border-radius:10px;flex:none;background:var(--paper-3)}
.item-body{flex:1;min-width:0;display:block}

/* Tabellone torneo: albero accessibile (round → match). La frase-riassunto sta
   sull'<li> (aria-label); i figli visibili sono aria-hidden per non ripetere. */
.bracket-round{padding-top:14px}
.bracket-round h3{margin:0 0 10px;font-family:var(--font-display);font-size:1.05rem;color:var(--ink-2)}
.bracket-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:bm}
.bracket-match{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.bracket-match .item-meta{margin-top:6px}
.bracket-match .btn.small{margin-top:10px}
.bracket-match.mine{border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}

/* ===== Home "Prima pagina": testata compatta, hero torneo, taccuino ===== */
.home-head{padding-bottom:14px}
.home-head-top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.5rem}
.home-head h1{font-size:2rem;font-variation-settings:'opsz' 40;margin:.1rem 0 0}
.home-head h1::after{background:linear-gradient(90deg,var(--orange),var(--orange-deep))}
.gettoni-pill{background:var(--paper-3);color:var(--ink);border-radius:999px;padding:6px 14px;font-family:var(--font-display);font-weight:700;font-size:1rem;white-space:nowrap}
#home-agenda{margin-top:10px}
/* Tocca a te: la fascia calda dell'azione urgente */
.turn-card{background:var(--orange-tint);border-color:var(--orange)}
.turn-card .crumb{color:var(--orange-deep)}
/* Hero: il Torneo della settimana, richiamo di prima pagina */
.weekly-hero{border:2px solid var(--orange);background:var(--grad-eroe)}
.weekly-hero .crumb{color:var(--orange-deep)}
.weekly-hero h2{font-size:1.6rem;margin:.1rem 0 .4rem}
.weekly-when{font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin:.2rem 0}
.weekly-rel{color:var(--orange-deep);font-weight:700}
.weekly-count{font-variant-numeric:tabular-nums;font-weight:700;margin:.2rem 0 .6rem}
.weekly-live{font-weight:700;color:var(--orange-deep);font-size:1.1rem}
/* Il Torneo della settimana della Parola che Lega veste il SUO blu
   (identità per gioco, DESIGN.md 26/8): stesse coppie AA già in tabella */
.weekly-hero.legame{border-color:var(--legame);background:var(--grad-legame)}
.weekly-hero.legame .crumb{color:var(--legame-text)}
.weekly-hero.legame .crumb::before{background:var(--legame)}
.weekly-hero.legame>h2::after{background:var(--legame)}
.weekly-hero.legame .weekly-rel,.weekly-hero.legame .weekly-live,
.feature-legame .weekly-rel,.feature-legame .weekly-live{color:var(--legame-text)}
/* riga di conferma nelle card eroe: verde esito, che regge AA anche
   sull'estremo peggiore dei gradienti (coppie in tabella DESIGN.md);
   l'oro si fermava a 4.24:1 sul caldo e non bastava per testo da 17px */
.ok-line{color:var(--ok);font-weight:700}
.weekly-hof{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.weekly-hof summary{font-family:var(--font-display);font-weight:700;cursor:pointer;color:var(--ink-2)}
.btn.big{font-size:1.05rem;padding:14px 18px}
/* Voci di menu (Altro → Guida): link a piena riga, comodi al tocco */
.menu-links{gap:2px}
.menu-links li{border-top:1px solid var(--line)}
.menu-links li:first-child{border-top:0}
.menu-link{display:block;padding:14px 4px;color:var(--orange-deep);font-family:var(--font-display);font-weight:600;text-decoration:none}
.menu-link:hover{background:var(--paper-2)}
.trn-private summary{font-family:var(--font-display);font-weight:700;cursor:pointer;color:var(--ink-2)}
.trn-private[open] summary{margin-bottom:10px}
/* Tornei conclusi: cassetto chiuso di default, stessa veste del codice invito */
.trn-conclusi summary{font-family:var(--font-display);font-weight:700;cursor:pointer;color:var(--ink-2);min-height:44px;display:flex;align-items:center}
.trn-conclusi[open] summary{margin-bottom:10px}

/* Home: la data come testata di giornale */
.home-today .crumb{margin-bottom:10px}
.home-today h1{font-size:2.3rem;font-variation-settings:'opsz' 48;margin-top:0}
.home-today h1::after{background:linear-gradient(90deg,var(--orange),var(--orange-deep))}
/* righe notizie della Home: pulite, senza miniatura, con filetto caldo */
.home-list{gap:0}
.home-list li{border-top:1px solid var(--line)}
.home-list li:first-child{border-top:0}
.home-list .item-btn{background:transparent;border:0;border-radius:0;padding:14px 4px}
.home-list .item-btn:hover{background:var(--paper-2)}

/* articolo in primo piano (Home) */
.feature-card{display:block;padding:0;overflow:hidden;background:var(--paper);border:1.5px solid var(--card-line)}
.feature-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--paper-3)}
.feature-body{display:block;padding:16px}
.feature-kicker{display:block;color:var(--orange-deep);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.feature-title{display:block;font-family:var(--font-display);font-size:1.4rem;line-height:1.2;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}

/* foto grande in cima all'articolo */
.article-hero{display:block;width:100%;border-radius:14px;margin:8px 0 14px;object-fit:cover;background:var(--paper-3)}

.loading,.empty{color:var(--ink-3);padding:8px 0}
.error-box{background:var(--bad-bg);border:1px solid var(--bad);border-radius:12px;padding:14px;margin:10px 0}

/* ---------------- Lettore articolo ---------------- */
.article-body{overflow-wrap:break-word;font-size:1.05rem;line-height:1.65}
.article-body img{max-width:100%;height:auto;border-radius:12px}
.article-body figure{margin:16px 0}
.article-body figcaption{color:var(--ink-3);font-size:.85rem}
.article-body h2,.article-body h3{margin-top:1.1em}
.article-body blockquote{border-left:3px solid var(--orange);margin:14px 0;padding:4px 14px;color:var(--ink-2)}
.back-btn{margin-bottom:12px}
.news-controls{display:flex;align-items:flex-end;gap:10px;margin:14px 0}
.news-controls .news-catfield{flex:1;margin:0}
.news-controls .btn.small{white-space:nowrap}
.read-controls{margin:12px 0}
.read-controls .btn{width:auto}

/* ---------------- Player podcast ---------------- */
.player{display:grid;gap:12px}
.player-title{font-family:var(--font-display);font-weight:700;font-size:1.1rem}
.player-controls{display:flex;gap:10px;flex-wrap:wrap}
.player-controls .btn{width:auto;flex:1;min-width:110px;text-align:center;font-weight:700}
.player-times{display:flex;justify-content:space-between;color:var(--ink-3);font-size:.85rem;font-variant-numeric:tabular-nums}
/* bersaglio 44pt anche per gli slider: sono i controlli più delicati da
   trascinare per un ipovedente */
input[type="range"]{width:100%;accent-color:var(--orange);height:44px;cursor:pointer}
.speed-field{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.speed-field label,.speed-label{font-weight:700}
.speed-field select{width:auto;flex:1}
/* velocità: meno / valore / più, con il numero grande in mezzo. I due
   pulsanti restano larghi abbastanza da colpirli senza guardare. */
.speed-ctrls{display:flex;align-items:center;gap:10px;margin-left:auto}
.speed-ctrls .btn{width:auto;min-width:52px;font-size:1.2rem;font-weight:700;padding:8px 14px}
.speed-val{min-width:3.6em;text-align:center;font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums}
.player-extra{margin-top:2px}
.player-extra .field{margin-bottom:10px}

/* ---------------- Impostazioni ---------------- */
fieldset{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 14px}
legend{font-family:var(--font-display);font-weight:700;padding:0 6px}
.switch{display:flex;gap:10px;align-items:flex-start;font-size:1rem;cursor:pointer;padding:8px 0;min-height:44px}
.switch input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--orange)}
.radio-line{display:flex;gap:10px;align-items:center;padding:8px 0;cursor:pointer;min-height:44px}
.radio-line input{width:22px;height:22px;flex:none;accent-color:var(--orange)}

/* ---------------- Quiz ---------------- */
.question{font-family:var(--font-display);font-variation-settings:'opsz' 36;font-size:1.5rem;line-height:1.2;letter-spacing:-.012em;font-weight:600}
/* Scelta categoria: tre tessere piene, da colpo d'occhio */
.cat-grid{display:grid;gap:14px;margin-top:14px}
.btn.cat{display:flex;align-items:center;gap:16px;font-family:var(--font-display);font-size:1.3rem;font-weight:700;letter-spacing:-.01em;background:var(--paper);border:1.5px solid var(--card-line);border-radius:18px;min-height:84px;padding:14px 18px;box-shadow:var(--shadow);transition:transform .12s ease,border-color .12s ease}
.btn.cat:hover{border-color:var(--orange);background:var(--orange-tint);transform:translateY(-1px)}
.btn.cat:active{transform:translateY(1px)}
.btn.cat .emoji{width:56px;height:56px;border-radius:16px;background:var(--orange-tint);display:flex;align-items:center;justify-content:center;font-size:1.7rem;flex:none;border:1px solid color-mix(in srgb, var(--orange) 25%, transparent)}
@media (prefers-reduced-motion:reduce){.btn.cat,.btn.cat:hover,.btn.cat:active{transform:none;transition:none}}
.emoji{font-size:1.25rem}

.options{display:grid;gap:12px;margin:14px 0}
.btn.option{display:flex;align-items:center;gap:12px;background:var(--paper);border:1.5px solid var(--line);font-weight:600;box-shadow:var(--shadow)}
.btn.option:hover:not(.locked){border-color:var(--orange)}
.btn.option.locked{cursor:default}
.btn.option.locked:hover:not(.correct):not(.wrong){background:var(--paper);filter:none}
.opt-letter{width:34px;height:34px;border-radius:50%;background:var(--orange-tint);color:var(--orange-deep);display:flex;align-items:center;justify-content:center;flex:none;font-weight:800;font-size:1rem}
.opt-text{flex:1}
.btn.option.correct{background:var(--ok-bg);border-color:var(--ok);box-shadow:none}
.btn.option.wrong{background:var(--bad-bg);border-color:var(--bad);box-shadow:none}
.btn.option.correct .opt-letter{background:var(--ok);color:var(--paper)}
.btn.option.wrong .opt-letter{background:var(--bad);color:var(--paper)}
.mark{margin-left:auto;font-weight:800;font-size:1.1rem}
.btn.option.correct .mark{color:var(--ok)}
.btn.option.wrong .mark{color:var(--bad)}

/* Schermata domanda: la domanda è la protagonista, su un pannello caldo */
.qhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.qhead .crumb{margin:0}
h2.question{background:linear-gradient(180deg, var(--orange-tint), transparent 140%);border:1px solid color-mix(in srgb, var(--orange) 18%, var(--line));border-radius:16px;padding:16px 18px;margin:.2em 0 .5em}
.card>h2.question::after{display:none}   /* la domanda ha il suo pannello: niente trattino */
/* pillola in em: il numero non si taglia più col testo ingrandito (185-280%) */
.timer{font-family:var(--font-display);font-size:1.7rem;font-weight:800;min-width:2.2em;min-height:2.2em;padding:.1em .35em;display:flex;align-items:center;justify-content:center;background:var(--btn-p-bg);color:var(--btn-p-fg);border-radius:999px;flex:none;font-variant-numeric:tabular-nums;border:3px solid var(--line-strong)}
.score-mini{margin-top:14px;color:var(--ink-3);font-size:.85rem;text-align:right;font-variant-numeric:tabular-nums}
.score-big{font-family:var(--font-display);font-size:2rem;font-weight:800;margin:12px 0;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.result>h2{font-size:2.1rem;text-align:center}
.result>h2::after{margin-left:auto;margin-right:auto}

/* ---------------- Tabellone partita (semafori) ---------------- */
.board{margin:14px 0}
.board-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.board-side{font-weight:700;color:var(--ink-3);font-size:.9rem;flex:1}
.board-side:last-child{text-align:right}
.board-score{font-family:var(--font-display);font-variation-settings:'opsz' 40;font-size:2.5rem;font-weight:800;letter-spacing:.01em;font-variant-numeric:tabular-nums;text-align:center;line-height:1}
.board-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.board-row{display:flex;align-items:center;gap:10px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-height:44px}
.board-row.future{opacity:.55}
.board-dots{display:flex;gap:6px;flex:none}
.board-cat{flex:1;text-align:center;font-weight:700;font-size:.95rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;line-height:1;color:var(--paper)}
.dot.ok{background:var(--ok)}
.dot.bad{background:var(--bad)}
.dot.off{background:transparent;border:2px solid var(--line);color:transparent}
/* ---- Situazione partita (riepilogo accessibile durante il duello) ---- */
.match-status{margin-top:14px;border:1px solid var(--line);border-radius:12px;background:var(--paper-2)}
.match-status>summary{cursor:pointer;padding:12px 14px;font-weight:700;color:var(--orange-deep);list-style-position:inside}
.match-status[open]>summary{border-bottom:1px solid var(--line)}
.ms-summary-text{font-family:var(--font-body)}
.ms-list{list-style:none;margin:0;padding:8px 12px 12px;display:flex;flex-direction:column;gap:6px}
.ms-row{display:flex;align-items:center;gap:10px;font-size:.9rem}
.ms-row.current{font-weight:700}
.ms-cat{flex:1;text-align:center;color:var(--ink-2)}
.ms-total{margin-top:4px;padding-top:8px;border-top:1px dashed var(--line);font-weight:800}
/* Fine partita: le azioni verso l'avversario (rivincita, segui, messaggio)
   arrivano DOPO il pulsante di uscita, ognuna col suo respiro. Il contenitore
   vuoto (profilo irraggiungibile) sparisce e non lascia margini orfani. */
.fine-azioni{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.fine-azioni:empty{display:none}
/* La riga del messaggio preimpostato: fuori dalla chat il campo .chat-campo
   non ha un genitore flex (flex:1 resta inerte) e collasserebbe alla
   larghezza di default del textarea: qui si allarga a tutta la card. */
.fine-msg-riga .chat-campo{display:block;width:100%}

/* ---------------- Giochi: Sequenza Sonora ---------------- */
/* palco a schermo pieno: un tasto per angolo */
.simon-stage{
  position:fixed;inset:0;z-index:900;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  background:var(--bg);
}
.stage-pad{
  border-radius:0;border:1px solid var(--line);min-height:0;width:auto;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:2rem;font-weight:800;
  background:var(--paper-2);color:var(--ink);
  padding:0;
}
.stage-pad.pad-on{background:var(--btn-p-bg);color:var(--btn-p-fg)}
.simon-hud{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--paper);border:1.5px solid var(--card-line);border-radius:16px;
  box-shadow:var(--shadow-pop);padding:14px 18px;display:grid;gap:8px;justify-items:center;
  min-width:190px;text-align:center;
}
.simon-hud .crumb{margin:0}
.simon-hud .btn{width:auto}
.pad-grid{grid-template-columns:repeat(2,1fr)}
.btn.pad{justify-content:center;text-align:center;font-size:1.2rem;min-height:88px;flex-direction:column;gap:6px;transition:background .12s,transform .08s}
.btn.pad .emoji{font-size:1.5rem}
.btn.pad[aria-disabled="true"]{opacity:.85}
.btn.pad.pad-on{background:var(--btn-p-bg);color:var(--btn-p-fg);border-color:var(--btn-p-bg);transform:scale(1.03)}
.btn.pad.pad-on .opt-letter,.btn.pad.pad-on .emoji{color:var(--btn-p-fg)}

/* ---------------- Giochi: Impiccato ---------------- */
.masked-word{font-family:ui-monospace,'JetBrains Mono',Menlo,monospace;font-size:2rem;letter-spacing:.12em;text-align:center;word-break:break-word;line-height:1.5;color:var(--ink)}
.letter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(46px,1fr));gap:8px;margin-top:12px}
.btn.letter{min-height:52px;padding:8px;width:auto;text-align:center;font-weight:800;font-size:1.15rem;background:var(--paper-2);border:1.5px solid var(--line)}
.btn.letter[aria-disabled="true"]{opacity:.6}
.btn.letter.hit{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.btn.letter.miss{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}

/* ---------------- Hub giochi (arcade): tessere con l'illustrazione in testa ---------------- */
/* minmax in REM: la soglia cresce col testo e le tessere si impilano quando
   la larghezza non le regge più (su schermi larghi possono restare affiancate,
   con righe comunque leggibili) */
.game-grid{display:grid;gap:16px;margin-top:10px;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}
.game-card{display:flex;flex-direction:column;gap:0;text-align:left;background:var(--paper);border:1.5px solid var(--card-line);width:100%;padding:0;overflow:hidden;border-radius:18px;box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .15s ease}
.game-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop);filter:none}
.game-card:active{transform:translateY(1px);box-shadow:var(--shadow);filter:brightness(.94)}
.game-card .g-row{display:flex;align-items:flex-start;gap:10px;width:100%;padding:12px 14px 14px}
.game-card .game-banner{margin:0;max-height:110px;overflow:hidden;display:flex;align-items:center;border-radius:0}
.game-card .g-emoji{display:none}   /* l'illustrazione fa già da insegna */
.game-card .g-body{flex:1;min-width:0}
.game-card .g-name{font-family:var(--font-display);font-weight:700;font-size:1.12rem;display:block;letter-spacing:-.008em}
.game-card .g-desc{color:var(--ink-3);font-size:.85rem;display:block;margin-top:3px}
.game-card .g-best{color:var(--orange-deep);font-size:.8rem;font-weight:800;display:block;margin-top:5px;text-transform:uppercase;letter-spacing:.04em}
@media (prefers-reduced-motion:reduce){.game-card,.game-card:hover{transform:none;transition:none}}

/* ---------------- Statistiche ---------------- */
.card.inner{background:var(--paper-2);box-shadow:none;border:1px solid var(--line);padding:14px;margin:14px 0 0}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:14px 0}
.stat-card{background:var(--paper-2);border:1px solid var(--card-line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.stat-value{font-family:var(--font-display);font-size:1.75rem;font-weight:800;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
.stat-label{font-size:.9rem;font-weight:700}
.stat-hint{color:var(--ink-3);font-size:.78rem}

.chart{margin:20px 0 0}
.chart-title{font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin-bottom:8px}
.chart-svg{width:100%;height:auto;display:block;overflow:visible}
.chart-data{margin-top:8px}
.chart-data summary{cursor:pointer;color:var(--orange-deep);font-size:.85rem;padding:4px 0;min-height:44px;display:flex;align-items:center;font-weight:600}
.data-table{width:100%;border-collapse:collapse;margin-top:6px;font-size:.9rem}
.data-table th,.data-table td{border:1px solid var(--line);padding:7px 10px;text-align:left}
.data-table thead th{background:var(--paper-2)}

/* Anello esiti */
.donut-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:center}
.donut{max-width:220px;flex:0 0 auto}
.donut-track{stroke:var(--line)}
.seg-win{stroke:var(--ok)} .seg-draw{stroke:var(--amber)} .seg-loss{stroke:var(--bad)}
.donut-center-num{font-family:var(--font-display);font-size:clamp(30px,2rem,44px);font-weight:800;fill:var(--ink)}
.donut-center-lbl{font-size:clamp(12px,.8rem,18px);fill:var(--ink-3)}
.chart-legend{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.chart-legend li{display:flex;align-items:center;gap:8px;font-size:.95rem}
.legend-dot{width:14px;height:14px;border-radius:4px;display:inline-block;flex:none}
.legend-dot.seg-win{background:var(--ok)} .legend-dot.seg-draw{background:var(--amber)} .legend-dot.seg-loss{background:var(--bad)}

/* Linea Elo */
.grid-line{stroke:var(--line);stroke-width:1}
.axis-label{font-size:clamp(10px,.62rem,16px);fill:var(--ink-3)}
.line-area{fill:var(--orange);opacity:.14}
.line-path{stroke:var(--orange);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.line-dot{fill:var(--orange)}

/* Barre precisione */
.bar-label{font-size:clamp(12px,.8rem,18px);fill:var(--ink);font-weight:700}
.bar-track{fill:var(--line)}
.bar-fill{fill:var(--orange)}
.bar-value{font-size:clamp(11px,.75rem,17px);fill:var(--ink-3);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------------- Libri del fondatore (dentro gli articoli) ---------------- */
.libro-card{margin:24px 0;border:1.5px solid var(--line);border-left:4px solid var(--orange);border-radius:var(--radius-s);background:var(--paper-2);padding:14px 16px;box-shadow:var(--shadow)}
.libro-card-label{display:inline-flex;align-items:center;gap:8px;color:var(--orange-deep);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}
.libro-card-inner{display:flex;gap:16px;align-items:flex-start}
.libro-card-cover{width:86px;height:auto;border-radius:8px;flex:none;box-shadow:0 6px 18px -6px rgba(60,30,5,.35);background:var(--paper-3)}
.libro-card-body{flex:1;min-width:0}
.libro-card-title{font-family:var(--font-display);font-size:1.18rem;font-weight:700;display:block;line-height:1.2;letter-spacing:-.008em}
.libro-card-sub{color:var(--ink-2);display:block;font-size:.95rem;margin-top:2px}
.libro-card-meta{color:var(--ink-3);font-size:.85rem;display:block;margin:6px 0 10px}
.libro-card-cta{display:inline-block;font-weight:700}

/* ---------------- Sezioni richiudibili (es. sfida con codice) ---------------- */
.disclosure{margin-top:14px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--paper-2)}
.disclosure>summary{cursor:pointer;padding:13px 15px;font-weight:700;color:var(--orange-deep);min-height:48px;display:flex;align-items:center;list-style-position:inside}
.disclosure[open]>summary{border-bottom:1px solid var(--line)}
.disclosure>.disclosure-body{padding:4px 15px 15px}

/* ---------------- Tornei: due tipi distinti ---------------- */
.torneo-tipo{border:1.5px solid var(--line);border-radius:var(--radius-s);padding:14px 16px;margin-top:12px;background:var(--paper-2)}
.torneo-tipo .sub-h{margin-top:0;color:var(--ink)}
.torneo-tipo.torneo-soon{opacity:.72;border-style:dashed}

/* ---------------- Gettoni e serie (portafoglio) ---------------- */
.wallet-row{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 4px}
.wallet-chip{display:inline-flex;align-items:center;gap:7px;background:var(--paper-2);border:1.5px solid var(--line);
  border-radius:999px;padding:8px 15px;font-size:.95rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.wallet-chip strong{color:var(--ink);font-family:var(--font-display);font-size:1.1rem}
.wallet-chip .chip-ico{font-size:1.15rem;line-height:1}

/* ---------------- Classifica ---------------- */
.lb-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.lb-row{display:flex;align-items:center;gap:14px;background:var(--paper);border:1.5px solid var(--card-line);border-radius:18px;padding:12px 16px;box-shadow:var(--shadow)}
.lb-pos{font-family:var(--font-display);font-weight:800;font-size:1.3rem;min-width:2ch;text-align:center;color:var(--ink-3);font-variant-numeric:tabular-nums;flex:none}
.lb-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lb-name{font-family:var(--font-display);font-weight:700;font-size:1.12rem;letter-spacing:-.008em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-meta{color:var(--ink-3);font-size:.84rem;font-variant-numeric:tabular-nums}
.lb-elo{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--ink);font-variant-numeric:tabular-nums;flex:none;display:flex;flex-direction:column;align-items:center;line-height:1}
.lb-elo small{font-size:.62rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
/* il podio si vede: bordo e posizione colorati, mai solo colore (c'è il numero) */
.lb-row.podio-1{border-color:var(--gold);background:var(--gold-tint)}
.lb-row.podio-1 .lb-pos{color:var(--gold)}
.lb-row.podio-2{border-color:color-mix(in srgb, var(--ink-3) 60%, var(--line))}
.lb-row.podio-3{border-color:color-mix(in srgb, var(--orange-deep) 55%, var(--line))}
.lb-row.podio-3 .lb-pos{color:var(--orange-deep)}
.lb-row.lb-me{outline:2px solid var(--orange);outline-offset:1px}
.lb-tu{color:var(--orange-deep);font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.lb-dots{text-align:center;color:var(--ink-3);margin:2px 0;font-weight:800}

/* ---------------- Rifiniture editoriali ---------------- */
.feature-card{box-shadow:var(--shadow-pop)}
.feature-title{font-size:1.5rem;letter-spacing:-.014em;font-variation-settings:'opsz' 36}
.article-body{font-size:1.08rem;line-height:1.68}
.article-body>p:first-of-type::first-letter{font-family:var(--font-display);font-size:3.1em;font-weight:700;float:left;line-height:.82;margin:.06em .12em 0 0;color:var(--orange-deep)}
.player-controls .btn{border-radius:999px}
.player-title{font-size:1.2rem;letter-spacing:-.008em}
.stat-value{color:var(--orange-deep)}
.stat-card{box-shadow:var(--shadow)}
.masked-word{letter-spacing:.16em}
.brand{font-variation-settings:'opsz' 30}

/* ---------------- Sonar (assistente AI) ---------------- */
.sonar-head{align-items:flex-start;margin-bottom:10px}
.sonar-head h1{margin:0}
.sonar-head-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.sonar-welcome{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:14px}
.sonar-welcome .lead{margin:0 0 12px}
.sonar-sugg-h{font-family:var(--font-display);font-size:1.05rem;margin:0 0 10px;color:var(--ink-2)}
.sonar-sugg{display:grid;gap:10px}
.sonar-sugg-btn{display:flex;align-items:center;gap:10px;background:var(--paper-2);border:1px solid var(--line)}
.sonar-sugg-btn:hover{background:var(--paper-3)}
.sonar-sugg-emoji{flex:0 0 auto;font-size:1.25rem}
.sonar-messages{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}
.sonar-msg{border-radius:var(--radius);padding:14px 16px;border:1px solid var(--line);max-width:92%}
.sonar-msg.mine{align-self:flex-end;background:var(--orange-tint);border-color:color-mix(in srgb, var(--orange) 35%, var(--line))}
.sonar-msg.bot{align-self:flex-start;background:var(--paper);box-shadow:var(--shadow)}
.sonar-msg.sonar-errore{border-color:var(--bad);background:var(--bad-bg)}
.sonar-msg-name{margin:0 0 4px;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--orange-deep)}
.sonar-msg.mine .sonar-msg-name{color:var(--ink-3)}
.sonar-msg-body p{margin:.4em 0}
.sonar-msg-body p:first-child{margin-top:0}
.sonar-msg-body p:last-child{margin-bottom:0}
.sonar-msg-body ul{margin:.4em 0;padding-left:1.2em}
.sonar-msg-body li{margin:.25em 0}
.sonar-msg-body a{color:var(--orange-deep);font-weight:600}
.sonar-md-h{font-weight:800}
.sonar-src-title{margin:12px 0 6px;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.sonar-src-list{display:flex;flex-direction:column;gap:6px}
.sonar-src{display:block;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;color:var(--ink);font-size:.92rem;font-weight:600;text-decoration:none}
.sonar-src:hover{background:var(--paper-3)}
.sonar-msg-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.sonar-inputarea{position:sticky;bottom:calc(74px + env(safe-area-inset-bottom));background:var(--bg);padding-top:6px}
.sonar-input{width:100%;font:inherit;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius-s);background:var(--paper);color:var(--ink);resize:vertical;min-height:58px}
.sonar-send{margin-top:8px}
.sonar-disclaimer{margin:8px 0 0}
.sonar-conv-row{display:flex;gap:8px;align-items:stretch}
.sonar-conv-row .sonar-conv-open{flex:1;min-width:0}
.sonar-conv-row .sonar-conv-del{flex:0 0 auto;align-self:center}

/* ---------------- Home 1.4.1 ---------------- */
/* Tocca a te: la regione prioritaria — accento laterale, mai solo colore */
.turn-card{border-left:6px solid var(--orange);border-radius:var(--radius)}
.tocca-row .item-title{font-size:1.12rem}
.sonar-home-row.spento{opacity:.55}
/* niente em-dash nei testi utente (regola DESIGN.md): virgola, che VoiceOver
   legge come pausa naturale */
.sonar-home-row.spento .item-meta::after{content:", sospeso durante le partite"}

/* Coppie di card affiancate (26/8): .card-coppia e' la classe generale per
   hub, sezioni gioco e Home; .trn-coppia (tornei) ne condivide le regole.
   auto-fit + minmax in REM: quando il testo cresce (fino al 185%) la soglia
   cresce con lui e le colonne si impilano quando la larghezza non le regge
   più, senza media query e senza larghezze fisse. Su iPhone al 185% resta
   UNA colonna; su schermi larghi (iPad) due colonne possono restare, perché
   lo spazio basta e le righe restano leggibili. */
.card-coppia,.trn-coppia{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:14px;align-items:stretch}
.card-coppia>.card,.trn-coppia>.card{margin-bottom:0;height:100%}
/* card in coppia: compatte, così stanno affiancate anche sul telefono */
.card-coppia>.card,.trn-coppia>.card{padding:16px}
.card-coppia h2,.trn-coppia h2{font-size:1.25rem}
.card-coppia p,.trn-coppia p{font-size:.95rem;margin:.35em 0}
.card-coppia .btn,.trn-coppia .btn{margin-top:8px}
/* banner dentro una card in coppia: il sangue pieno segue il padding ridotto
   (16px, non 24): senza questa riga la regola delle card eroe sborderebbe */
.card-coppia>.card>.game-banner{margin:-16px -16px 12px}
.trn-sotto{color:var(--ink-2)}
.trn-spiega summary{cursor:pointer;color:var(--orange-text);font-weight:700;font-size:.9rem}

.trn-titolo{margin:2px 0 12px}
.trn-incorso{padding:16px 18px}
.card-coppia>.card,.trn-coppia>.card{display:flex;flex-direction:column}
.card-coppia .btn.primary,.trn-coppia .btn.primary{margin-top:auto}

/* ---------------- Barra a 5 voci, Sonar al centro (5/08) ---------------- */
/* Sonar al centro come pulsante d'onore: icona in un cerchio d'accento,
   sempre percepibile anche a colpo d'occhio. Contrasto: icona --cta-fg su
   --cta-bg (AA/AAA, tabella DESIGN.md). */
.tab-sonar svg{
  background:var(--cta-bg);color:var(--cta-fg);
  border-radius:50%;padding:7px;width:min(2.4rem,52px);height:min(2.4rem,52px);
  margin-top:-14px;
}
.tab-sonar[aria-current="page"] svg{outline:3px solid var(--ring);outline-offset:2px}
/* Modalità partita: barra assente, il match respira su tutto lo schermo */
body.partita-in-corso main#main{padding-bottom:24px}

/* Tab interne Notizie ↔ Podcast (il podcast vive dentro Notizie) */
.sub-tabs{display:flex;gap:8px;margin:0 0 14px}
.sub-tabs .btn{width:auto;flex:1;text-align:center;min-height:46px}
.sub-tabs .btn[aria-current="true"]{background:var(--cta-bg);color:var(--cta-fg);font-weight:800}

/* Interruttori delle notifiche per categoria (Altro): casella e etichetta
   sulla stessa riga, spiegazione sotto, bersaglio ampio. */
.switch-field{margin:14px 0}
.switch-row{display:flex;align-items:center;gap:12px}
.switch-row input[type=checkbox]{width:26px;height:26px;flex:none;accent-color:var(--orange-deep)}
.switch-row label{font-weight:700;margin:0;cursor:pointer}
.switch-field .hint{margin:6px 0 0}

/* ── Presentazione del primo avvio (home board) ────────────────────────────
   Finestra a schermo pieno: copre tutto, e il resto della pagina prende
   `inert` da onboarding.js, quindi dietro non c'è niente né per gli occhi
   né per VoiceOver. Il fondo è opaco al 100%: niente trasparenze, o si
   leggerebbe il contenuto sotto anche solo per contrasto. */
.homeboard{
  position:fixed; inset:0; z-index:200;
  background:var(--paper); color:var(--ink);
  display:flex; flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 16px) 20px calc(env(safe-area-inset-bottom) + 20px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
body.homeboard-aperta{overflow:hidden}
.hb-alto{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;margin-bottom:20px}
.hb-passo{margin:0;font-weight:700;color:var(--ink-3);font-size:.95rem;font-variant-numeric:tabular-nums}
/* centratura sicura: con `justify-content:center` un contenuto piu alto dello
   schermo verrebbe tagliato IN CIMA e quella parte non si puo piu raggiungere
   scorrendo. `margin:auto 0` centra quando c'e spazio e si arrende quando non
   ce n'e, che e cio che serve col testo ingrandito. */
.hb-corpo{flex:1 0 auto;display:flex;flex-direction:column;margin:auto;max-width:34rem;width:100%;padding:8px 0}
.hb-occhiello{margin:0 0 6px;font-weight:800;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-deep)}
.hb-titolo{
  font-family:var(--font-display); font-variation-settings:'opsz' 40;
  font-size:clamp(1.9rem,7vw,2.6rem); font-weight:800; line-height:1.1;
  margin:0 0 16px; letter-spacing:-.01em;
}
.hb-titolo:focus{outline:none}
.hb-titolo:focus-visible{outline:3px solid var(--ring);outline-offset:4px;border-radius:6px}
.hb-testo{margin:0 0 14px;font-size:1.12rem;line-height:1.55}
.hb-dettaglio{margin:0;font-size:1rem;line-height:1.55;color:var(--ink-2);
  border-left:4px solid var(--orange-deep);padding-left:14px}
.hb-scelte{margin:22px 0 18px;display:grid;gap:14px}
.hb-corpo .btn{width:100%;margin-top:10px}
/* i comandi restano incollati in fondo: col testo enorme finivano sotto il
   bordo dello schermo, e li avrebbe persi proprio chi ingrandisce il testo */
.hb-basso{flex:none;display:flex;gap:12px;margin-top:20px;max-width:34rem;width:100%;margin-inline:auto;
  position:sticky;bottom:0;background:var(--paper);padding:12px 0 4px}
.hb-basso .btn{flex:1;min-height:52px;font-size:1.05rem}
.hb-basso .btn:disabled{opacity:.4}
/* niente scorciatoie di movimento per chi le ha disattivate a sistema */
@media (prefers-reduced-motion:no-preference){
  .homeboard .hb-corpo{animation:hb-entra .22s ease-out}
  @keyframes hb-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* ── Chat: messaggi privati (16/8/2026) ───────────────────────────────────
   Il log e una lista normale che si scorre, non un'area live: chi ascolta
   riceve un annuncio secco all'arrivo e poi legge con calma, riga per riga. */
.chat-log{
  list-style:none;margin:12px 0;padding:16px 2px 4px;display:flex;flex-direction:column;gap:12px;
  overflow-y:auto;max-height:50vh;min-height:120px;
}
.chat-msg{position:relative;max-width:85%;padding:10px 12px;border-radius:14px;line-height:1.4}
/* la bolla usa i colori dei pulsanti d'azione, che passano il contrasto AA:
   l'arancio vivo con testo bianco si ferma a 3,5:1 e un ipovedente non legge */
.chat-msg.mia{align-self:flex-end;background:var(--cta-bg);color:var(--cta-fg);border-bottom-right-radius:4px}
.chat-msg.sua{align-self:flex-start;background:var(--paper-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.chat-msg-testo{word-break:break-word}
.chat-msg-ora{display:block;font-size:.78rem;margin-top:4px;font-variant-numeric:tabular-nums}
/* bersaglio pieno da 44 punti, lo standard minimo per il tocco diretto */
.chat-segnala{
  position:absolute;top:-14px;right:-10px;width:44px;height:44px;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;font-size:1rem;
  display:grid;place-items:center;
}
.chat-msg.sua{margin-right:36px}   /* spazio perche il pulsante non copra il testo */
/* La riga di scrittura. Qui c'era il difetto che si vedeva a occhio nudo:
   `.btn` è largo 100% per contratto (i pulsanti dell'app sono a piena riga), e
   dentro un flex quel 100% diventa la base del pulsante. Con `flex:none` non
   poteva nemmeno restringersi, così «Invia» si prendeva tutta la riga e il
   campo di testo si riduceva a una fessura da una lettera per riga.
   Ora: il pulsante torna alla sua larghezza naturale e non cresce, il campo si
   prende tutto il resto. `min-width:0` è obbligatorio, o il textarea si rifiuta
   di scendere sotto la larghezza di default delle colonne. */
.chat-riga-invio{display:flex;gap:10px;align-items:flex-end;margin-top:8px}
.chat-campo{
  flex:1 1 auto;min-width:0;resize:none;border:1.5px solid var(--line);border-radius:14px;
  padding:12px 14px;font:inherit;line-height:1.4;min-height:52px;max-height:35vh;
  background:var(--paper);color:var(--ink);
}
.chat-campo:focus-visible{border-color:var(--cta-bg)}
.chat-invia{flex:0 0 auto;width:auto;min-height:52px;padding-inline:22px}

/* La chat occupa lo schermo intero, non è una cartolina appoggiata in cima.
   `--vv-h` la fissa all'altezza della finestra VISIBILE: su iPhone la tastiera
   copre lo schermo senza rimpicciolire la pagina, e senza questo la riga di
   scrittura finisce sotto i tasti. */
.chat-overlay{padding:0;align-items:stretch;overflow:hidden}
.chat-overlay .overlay-panel{
  display:flex;flex-direction:column;margin:0 auto;border-radius:0;border:0;
  height:var(--vv-h,100dvh);max-height:var(--vv-h,100dvh);
  padding:max(env(safe-area-inset-top),12px) 14px calc(env(safe-area-inset-bottom,0px) + 12px);
}
.chat-overlay .overlay-head{flex:0 0 auto}
.chat-overlay .chat-log{flex:1 1 auto;max-height:none;min-height:0;margin:8px 0 0}
.chat-overlay .chat-riga-invio,
.chat-overlay .terms-inline{flex:0 0 auto}
.chat-overlay .terms-inline{overflow-y:auto;max-height:70%}
/* l'elenco delle conversazioni scorre dentro il foglio, non trascina il foglio */
.chat-overlay .chat-thread-list{flex:1 1 auto;min-height:0;overflow-y:auto}
/* La lista delle chat sta in un pannello flex a tutta altezza e riceve
   flex:1: con poche conversazioni la griglia diventa più alta del contenuto
   e l'align-content di default (stretch) gonfia le righe automatiche per
   riempire lo spazio avanzato, creando fasce vuote fra una chat e l'altra.
   Impacchettate in alto, ogni riga resta alta quanto la sua scheda. */
.chat-thread-list{margin-top:12px;align-content:start}
.chat-thread-btn{
  width:100%;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--paper);
  color:var(--ink);padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:4px;font:inherit;
}
.chat-thread-nome{font-weight:800;display:flex;align-items:center;gap:8px}
.chat-thread-prev{color:var(--ink-3);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-unread-dot{
  background:var(--cta-bg);color:var(--cta-fg);border-radius:999px;min-width:24px;height:24px;
  display:inline-grid;place-items:center;font-size:.8rem;font-weight:800;padding:0 7px;
}

/* ── Profilo a tre schede: Gioco, Trofei, Giornale (17/8/2026) ─────────────
   Il profilo era una scheda di gioco con tutto in fila. Diviso in tre, la
   parte del giornale e quella dei trofei hanno una casa loro. */
/* Le tre schede stavano in una riga a larghezze uguali con min-width:0: già a
   testo «Grande» la parola «Giornale» sforava il suo riquadro e le etichette si
   attaccavano fra loro. Ora la riga va a capo quando serve, e nessuna scheda
   scende sotto la larghezza della propria parola. */
.profilo-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 10px;border-bottom:1px solid var(--line)}
.profilo-tab{
  flex:1 1 auto;min-width:max-content;min-height:48px;padding:10px 12px;font:inherit;font-weight:700;
  background:transparent;border:0;border-bottom:3px solid transparent;color:var(--ink-3);cursor:pointer;
  white-space:nowrap;
}
.profilo-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--cta-bg)}
.profilo-pannello{padding-top:4px}
.profilo-pannello:focus-visible{outline:3px solid var(--ring);outline-offset:3px}
.profilo-pannello>div:empty{display:none}

/* Distintivo e ultimo accesso: sotto l'intestazione, in colonna, liberi di
   andare a capo. Dentro la barra del titolo (che è una riga che taglia quel che
   sborda) finivano fuori schermo. */
.profilo-sottotitolo,.chat-sottotitolo{display:flex;flex-direction:column;gap:2px;margin:0 0 8px}
.profilo-sottotitolo:empty,.chat-sottotitolo:empty{display:none}
.affil-riga{display:flex;align-items:center;gap:8px;margin:0;flex-wrap:wrap}
.affil-simbolo{
  flex:0 0 auto;background:var(--cta-bg);color:var(--cta-fg);border-radius:6px;
  padding:2px 6px;font-size:.7rem;font-weight:800;letter-spacing:.02em;
}
.riga-collegamento{margin:0}

/* bacheca delle attività */
.bacheca-lista,.albo-lista{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:8px}
.bacheca-voce{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;
}
.bacheca-testo{overflow-wrap:anywhere}
.bacheca-quando{flex:0 0 auto;font-size:.8rem;white-space:nowrap}
/* un filo di colore per distinguere a occhio i tipi, senza affidarsi al colore:
   la parola nel testo dice già tutto («Ha vinto», «Ha apprezzato») */
.bacheca-voce.tipo-torneo,.bacheca-voce.tipo-record{border-left:4px solid var(--cta-bg)}
.albo-lista li{display:flex;align-items:center;gap:10px}
.albo-emoji{font-size:1.3rem}
.ruoli-lista{margin-bottom:14px}

/* suggerimenti «persone che potresti seguire» */
.sugg-h{font-size:1rem;margin:4px 0 10px}
.user-row{display:flex;align-items:center;gap:10px}
.user-row .btn.small{flex:none;min-height:44px}

/* Distintivo di affiliazione: il simbolo è decorazione, la parola è il dato.
   Colore pieno del marchio con testo chiaro, contrasto verificato. */
.affil-riga{display:flex;align-items:center;gap:8px;margin:6px 0 0;font-weight:700;font-size:.9rem;color:var(--ink-2)}
.affil-simbolo{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;flex:none;
  background:var(--cta-bg);color:var(--cta-fg);font-size:.65rem;font-weight:800;letter-spacing:-.02em;
}

/* Mi piace: il cuore è decorazione, il testo per lo screen reader è il dato */
.like-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.like-btn .like-n{font-weight:800;font-variant-numeric:tabular-nums}
/* acceso nel rosso semantico del tema in corso: quello fisso del tema chiaro
   scendeva sotto AA sul fondo scuro dei pulsanti (coppie in tabella DESIGN.md) */
.like-btn.acceso{color:var(--bad);border-color:var(--bad)}
.profilo-giornale{margin-top:16px}
.profilo-giornale .pensiero{font-style:italic;margin:2px 0 0}

/* Statistiche del profilo: le materie con la barra come indizio visivo,
   ma la percentuale è sempre scritta (la barra da sola non si ascolta). */
.profilo-gioco{margin-top:16px}
.materia-top{font-weight:800;margin:0 0 10px}
.materie-lista{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.materie-lista li{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:10px}
.materia-nome{font-weight:700;text-transform:capitalize}
.materia-perc{font-variant-numeric:tabular-nums;font-weight:800}

/* Impostazioni e privacy: una pagina, sei sezioni, sommario in cima */
.imp-sommario{list-style:none;margin:8px 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.imp-sez{margin:0 0 22px;padding:0 0 16px;border-bottom:1px solid var(--line)}
.imp-sez:last-child{border-bottom:0}
.imp-sez h3{margin:0 0 10px}
.riga-collegamento{margin:4px 0 0;font-weight:700}