/**
 * OneDayQuiz — Restyling bacheca (Fase 7-bis.12).
 *
 * Foglio di rifinitura caricato DOPO il CSS del motore (handle `o-main`) e scoped
 * al contenuto quiz (`.odq-quiz-content`): non riscrive il motore, lo rifinisce.
 * Nessun id/classe usato dal JS viene rinominato. Token agganciati al design
 * system del child theme (--brand-blue/--brand-purple ecc.).
 *
 * Blocco 1 — design token
 * Blocco 2 — area titolo (kicker + o-main-title editoriale)
 * Blocco 3 — barra punteggi (quiz-stats → card con etichette)
 */

/* ===================================================== 0 · COLONNA WALL === */
/* La colonna editoriale del child theme è max-width:880px (ok per legali/contatti);
   sulle pagine-quiz serve più respiro per barra punteggi, tiles e collezioni.
   Doppia classe → (0,2,0) batte `.odq-page__container` a prescindere dall'ordine. */
.odq-page__container--quiz.odq-page__container{max-width:1080px;}

/* Fondino violetto chiaro su TUTTA la pagina-quiz (dietro titolo, barra punteggi, wall). */
.odq-main.odq-page--quiz{background:#f6f4fb;}

/* ============================================================= 1 · TOKEN === */
.odq-quiz-content{
	--q-ink:#1b1830;
	--q-body:#2b2840;
	--q-muted:#6a6680;
	--q-line:rgba(27,24,48,.1);
	--q-surface:#fff;
	--q-surface-2:#f4f2fb;                 /* neutro con lieve bias viola */
	--q-ground:#f6f4fb;                    /* fondino violetto chiaro (tutta la pagina) */
	--q-blue:var(--brand-blue,#2181c1);
	--q-purple:var(--brand-purple,#7a3ff2);
	--q-gold:#e0a94a;
	--q-serif:'Iowan Old Style','Palatino Linotype',Georgia,'Times New Roman',serif;
	--q-sans:"Montserrat",system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
	/* colori-voto/stato del motore, riusati per i chip icona */
	--q-rank:#2181c1; --q-score:#f2b602; --q-correct:#41c541; --q-wrong:#e60000; --q-skip:#ff8100;
}

/* ====================================================== 2 · AREA TITOLO === */
.odq-quiz-content .odq-kicker{
	display:inline-block;
	font-family:var(--q-sans);
	font-weight:700;
	font-size:12px;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--q-purple);
	background:rgba(122,63,242,.10);
	padding:5px 11px;
	border-radius:999px;
	margin:0 0 12px;
}

/* Titolo editoriale coerente col tema; annulla il banner scuro/colorato del motore.
   `!important` su background per battere la catena `.o-main-title{…!important}` del
   motore se l'ordine di combinazione Breeze dovesse cambiare. */
.odq-quiz-content .o-main-title{
	font-family:var(--q-serif);
	font-weight:700;
	font-size:clamp(2rem,4vw,2.8rem);
	line-height:1.1;
	letter-spacing:-.015em;
	color:var(--q-ink);
	background:none !important;
	padding:0;
	margin:0 0 6px;
	text-align:left;
}
/* Fase 1.1: il contenitore del titolo. L'H1 ci sta dentro `display:inline` e la "i"
   della tipologia è il nodo che lo segue, così il pulsante resta attaccato all'ultima
   parola come quando era DENTRO l'H1 — senza però finire nel testo che il crawler
   legge («Quiz Classicoi»). Il font-size sta qui e non solo sull'H1 perché le misure
   del pulsante sono in `em`: fuori dall'H1 quegli `em` si misurano sul contenitore. */
.odq-quiz-content .o-main-title-wrap{
	font-family:var(--q-serif);
	font-size:clamp(2rem,4vw,2.8rem);
	line-height:1.1;
	margin:0 0 6px;
	text-align:left;
}
.odq-quiz-content .o-main-title-wrap .o-main-title{
	display:inline;
	font-size:inherit;
	margin:0;
}
.odq-quiz-content .o-main-title::before{content:none !important;display:none !important;}

/* Bacheca (30/09/2026): occhiello a sinistra e «Come si gioca» a destra sulla stessa riga,
   H1 sotto; su telefono il link scende sotto l'H1. Griglia e non flex perché l'ordine
   visivo cambia fra i due casi senza duplicare il link nell'HTML. */
.odq-quiz-content .odq-wall-titlebar{
	display:grid;grid-template-columns:minmax(0,1fr) auto;
	grid-template-areas:"kicker link" "title title";
	align-items:center;column-gap:16px;
}
.odq-quiz-content .odq-wall-titlebar .odq-kicker{grid-area:kicker;justify-self:start;}
.odq-quiz-content .odq-wall-titlebar .o-main-title-wrap{grid-area:title;}
.odq-quiz-content .odq-howto-link{
	grid-area:link;justify-self:end;margin:0 0 12px;
	display:inline-flex;align-items:center;gap:7px;
	padding:6px 13px;border:1px solid rgba(122,63,242,.32);border-radius:999px;
	font-family:var(--q-sans);font-weight:700;font-size:13px;line-height:1.2;
	color:var(--q-purple) !important;background:transparent;text-decoration:none;
	transition:background .15s ease,border-color .15s ease;
}
.odq-quiz-content .odq-howto-link:hover,.odq-quiz-content .odq-howto-link:focus-visible{
	background:rgba(122,63,242,.08);border-color:var(--q-purple);opacity:1;
}
.odq-quiz-content .odq-howto-link i{font-size:15px;}
@media (max-width:767px){
	.odq-quiz-content .odq-wall-titlebar{grid-template-columns:minmax(0,1fr);grid-template-areas:"kicker" "title" "link";}
	.odq-quiz-content .odq-howto-link{justify-self:start;margin:8px 0 4px;}
}

/* "i" con la descrizione della tipologia, accanto (non dentro) all'H1 delle 9
   pagine-tipologia
   (templates/sections/quiz-type-info.php + tippy in odq-components.js).
   Dimensioni in `em`: il titolo è un clamp(), l'icona deve seguirlo invece di
   restare un francobollo a 2.8rem e un macigno a 2rem.
   ⚠️ Il reset del tema padre colora TUTTI i <button> di magenta su hover/focus
   (`button:focus,button:hover{background:#c36}`, 0,1,1): questi selettori stanno
   a (0,3,0) e (0,4,0), quindi passano sopra senza bisogno di !important. */
.odq-quiz-content .o-main-title-wrap .odq-type-info{
	display:inline-flex;align-items:center;justify-content:center;
	width:.52em;height:.52em;min-width:22px;min-height:22px;
	padding:0;margin:0 0 0 .62em;vertical-align:middle;position:relative;top:-.08em;
	border:1.5px solid var(--q-purple,#7a3ff2);border-radius:50%;
	background:transparent;color:var(--q-purple,#7a3ff2);
	font-family:var(--q-serif);font-style:italic;font-weight:700;
	font-size:.42em;line-height:1;letter-spacing:0;cursor:pointer;
	transition:background .14s ease,color .14s ease;
}
/* Il cerchio è 22px, il dito no: area di tocco allargata senza toccare il disegno. */
.odq-quiz-content .o-main-title-wrap .odq-type-info::after{
	content:"";position:absolute;top:-11px;right:-11px;bottom:-11px;left:-11px;border-radius:50%;
}
.odq-quiz-content .o-main-title-wrap .odq-type-info:hover,
.odq-quiz-content .o-main-title-wrap .odq-type-info:focus,
.odq-quiz-content .o-main-title-wrap .odq-type-info:focus-visible{
	background:var(--q-purple,#7a3ff2);color:#fff;
}
/* Il contenuto è una frase intera, non un'etichetta: più aria del tooltip standard.
   `odq-type` è il secondo tema passato a tippy (odq-components.js) → classe
   `.odq-type-theme` sul popper, che è come tippy 4 espone i temi multipli. */
.tippy-tooltip.odq-type-theme{
	font-family:var(--q-sans);font-size:13.5px;line-height:1.5;
	padding:9px 12px;text-align:left;
}

/* ==================================================== 3 · BARRA PUNTEGGI === */
#odq-quiz-main-stats{display:block;width:auto;margin:20px 0 0;}
#odq-quiz-main-stats ul.odq-stats{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin:0;
	padding:0;
	list-style:none;
}
#odq-quiz-main-stats ul.odq-stats li{
	float:none;
	width:auto;
	flex:1 1 140px;
	min-width:140px;
	display:flex;
	align-items:center;
	gap:12px;
	text-align:left;
	padding:12px 14px;
	background:var(--q-surface);
	border:1px solid var(--q-line);
	border-radius:12px;
	box-shadow:0 1px 2px rgba(27,24,48,.05);
}

/* Icona → chip quadrato colorato (batte `#…ul li span{display:inline-block}`). */
#odq-quiz-main-stats .odq-stats li > [class*="o-icon-"]{
	display:grid;
	place-items:center;
	flex:none;
	width:38px;
	height:38px;
	border-radius:10px;
	font-size:18px;
	line-height:1;
}
#odq-quiz-main-stats .odq-stats li > .o-icon-rank{background:rgba(33,129,193,.12);}
#odq-quiz-main-stats .odq-stats li > .o-icon-score{background:rgba(242,182,2,.16);}
#odq-quiz-main-stats .odq-stats li > .o-icon-correct{background:rgba(65,197,65,.15);}
#odq-quiz-main-stats .odq-stats li > .o-icon-wrong{background:rgba(230,0,0,.12);}
#odq-quiz-main-stats .odq-stats li > .o-icon-skip{background:rgba(255,129,0,.15);}

/* Corpo: numero sopra, etichetta sotto. */
#odq-quiz-main-stats .odq-stat-body{
	display:flex;
	flex-direction:column;
	line-height:1.15;
	gap:1px;
}
#odq-quiz-main-stats .odq-stat-val{
	font-family:var(--q-sans);
	font-weight:800;
	font-size:20px;
	color:var(--q-ink);
	font-variant-numeric:tabular-nums;
}
#odq-quiz-main-stats .odq-stat-val .o-deg{font-size:15px;color:var(--q-muted);font-weight:700;}
#odq-quiz-main-stats .odq-stat-label{
	font-family:var(--q-sans);
	font-size:11.5px;
	font-weight:600;
	color:var(--q-muted);
	letter-spacing:.01em;
}

@media (max-width:640px){
	#odq-quiz-main-stats ul.odq-stats li{flex:1 1 calc(50% - 5px);min-width:0;}
}

/* ============================================= 4 · PAGELLA (loggato) === */
/* Sezione `sections/quiz-wall.php`: PANORAMICA/COMPLETATI/CORRETTI/MEDIA/TEMPO
   + Qualifiche. Da barre blu + tabelle bordate → card pulite su fondino viola. */

/* Griglia 3 colonne direttamente sul fondino di pagina (niente pannello).
   margin-top: stacca la pagella (1° box "Panoramica") dalla barra punteggi. */
.odq-quiz-content .odq-blocks{
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:auto;
	background:transparent;padding:0;margin-top:28px;
}
.odq-quiz-content .odq-blocks > .o-col-full{grid-column:1 / -1;}
.odq-quiz-content .odq-block-wall{width:auto;float:none;}

/* Titoletti separatori a tutta larghezza (nuovo .odq-sec in quiz-wall.php). */
.odq-quiz-content .odq-sec{grid-column:1 / -1;display:flex;align-items:center;gap:14px;margin:24px 2px 6px;}
.odq-quiz-content .odq-sec h3{
	font-family:var(--q-sans);font-weight:800;font-size:12px;letter-spacing:.12em;
	text-transform:uppercase;color:var(--q-ink);margin:0;white-space:nowrap;
	background:none !important;padding:0;
}
.odq-quiz-content .odq-sec::after{content:"";flex:1;height:1px;background:var(--q-line);}

/* Card. */
.odq-quiz-content .odq-block{
	margin:0;background:var(--q-surface);border:1px solid var(--q-line);border-radius:14px;
	color:var(--q-body);box-shadow:var(--sh1);overflow:hidden;text-align:center;
	display:flex;flex-direction:column;
}
/* Le card-numero (Completati/Media/…) centrano il contenuto verticalmente. */
.odq-quiz-content .odq-block-wall:has(> .odq-block-special){justify-content:center;}
/* Header di card (Panoramica / Migliori Posizioni / …): da barra blu a etichetta. */
.odq-quiz-content .odq-block h2,
.odq-quiz-content .odq-block h3{
	background:none !important;color:var(--q-muted) !important;font-family:var(--q-sans);
	font-weight:800;font-size:11.5px;letter-spacing:.10em;text-transform:uppercase;
	padding:14px 16px 6px;margin:0;text-align:left;
}

/* Numerone: 120px→56px; blu default (media/tempo tengono odq-good/bad-score !important). */
.odq-quiz-content .odq-block-special{
	font-size:56px;height:auto;padding:16px 10px 6px;font-weight:800;line-height:1;
	color:var(--q-blue);font-variant-numeric:tabular-nums;text-align:center;
	display:flex;flex-direction:column;align-items:center;gap:14px;
}
.odq-quiz-content .odq-block-wall > span{
	display:block;padding:0 16px 18px;min-height:0;font-size:13px;color:var(--q-muted);
}

/* Progress (SOLO pagella, dentro .odq-blocks): sottile, arrotondata, gradient.
   NB: scoping a .odq-blocks per non sconfinare su tiles/collezioni. */
.odq-quiz-content .odq-blocks .progress{margin:0;width:78%;height:8px;border-radius:999px;background:var(--q-surface-2);overflow:hidden;}
.odq-quiz-content .odq-blocks .progress .progress-bar,
.odq-quiz-content .odq-blocks .progress .progress-bar-quiz{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--q-blue),var(--q-purple)) !important;}
.odq-quiz-content .odq-blocks .progress .odq-good-score-bg,
.odq-quiz-content .odq-blocks .progress .odq-excellent-score-bg{background:linear-gradient(90deg,#9bc504,#41c541) !important;}
.odq-quiz-content .odq-blocks .progress .odq-ok-score-bg{background:linear-gradient(90deg,#ffb03c,#ff6f00) !important;}
.odq-quiz-content .odq-blocks .progress .odq-bad-score-bg{background:linear-gradient(90deg,#ff8a3c,#e23b2e) !important;}

/* ---- PANORAMICA: la tabella 5-col diventa una riga di 5 mini-card ---- */
.odq-quiz-content .odq-blocks .odq-table-5cols{
	display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;width:100%;padding:0 16px 16px;border-collapse:separate;
}
.odq-quiz-content .odq-blocks .odq-table-5cols tbody,
.odq-quiz-content .odq-blocks .odq-table-5cols tr{display:contents;}
.odq-quiz-content .odq-blocks .odq-table-5cols td{
	display:block;width:auto;padding:14px;border:1px solid var(--q-line) !important;border-radius:12px;
	background:var(--q-surface);text-transform:none;text-align:left;
}
.odq-quiz-content .odq-blocks .odq-table-5cols td > span{display:block;}
.odq-quiz-content .odq-blocks .odq-table-5cols td svg{
	width:22px;height:22px;min-height:0;margin:0 0 8px;padding:7px;border-radius:10px;
	background:var(--q-surface-2);box-sizing:content-box;display:block;
}
.odq-quiz-content .odq-blocks .odq-table-5cols td > span > div:first-of-type{font-size:12px;color:var(--q-muted);font-weight:700;margin-bottom:2px;}
.odq-quiz-content .odq-blocks .odq-table-5cols td .o-font-big{display:block;font-size:24px;color:var(--q-ink) !important;font-weight:800;line-height:1;margin-bottom:4px;}
.odq-quiz-content .odq-blocks .odq-table-5cols td i{font-style:normal;font-size:11.5px;color:var(--q-muted);font-weight:600;}

/* ---- BEST/WORSE: righe compatte su una sola linea ---- */
.odq-quiz-content .best_worse_subjects .odq-table{display:block;width:100%;border-collapse:collapse;padding:0 0 8px;}
.odq-quiz-content .best_worse_subjects tbody{display:block;}
.odq-quiz-content .best_worse_subjects tr{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--q-line);}
.odq-quiz-content .best_worse_subjects tr:first-child{border-top:0;}
.odq-quiz-content .best_worse_subjects tr:hover{background:var(--q-surface-2);}
/* Neutralizza l'hover-td del motore (.odq-table tr:hover td{background:#fafafa}) che
   creava l'evidenziazione parziale: l'hover ora è sull'intera riga. */
.odq-quiz-content .best_worse_subjects tr:hover td{background:transparent !important;color:inherit !important;}
.odq-quiz-content .best_worse_subjects td{border:0 !important;padding:0;width:auto;height:auto !important;text-transform:none;text-align:left;font-weight:600;background:transparent;}
.odq-quiz-content .best_worse_subjects td:nth-child(1){min-width:50px;}
.odq-quiz-content .best_worse_subjects td:nth-child(2){flex:1;}
.odq-quiz-content .best_worse_subjects td:nth-child(3){margin-left:auto;color:var(--q-muted);white-space:nowrap;}
.odq-quiz-content .best_worse_subjects td .o-font-big{font-size:15px;color:var(--q-ink);font-weight:800;}
.odq-quiz-content .best_worse_subjects td svg{display:inline-block !important;width:24px !important;height:24px !important;min-height:0 !important;margin:0 !important;vertical-align:middle;}
.odq-quiz-content .best_worse_subjects td span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--q-body);text-transform:capitalize;}

/* Fix leggibilità: la classe media aveva testo bianco su bianco. */
.odq-quiz-content .odq-table td.odq-pagella-average{color:var(--q-ink) !important;border:0 !important;}
.odq-quiz-content .o-color-blue{color:var(--q-blue) !important;}

/* ---- QUALIFICHE: riga di card avatar (SVG reali invariati). ---- */
.odq-quiz-content .odq-cert-list{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding:8px 16px 16px;}
.odq-quiz-content .odq-block-certificates{
	flex:1 1 120px;max-width:160px;margin:0;border:1px solid var(--q-line) !important;
	color:var(--q-body) !important;border-radius:14px;padding:14px 8px;align-items:center;gap:6px;box-shadow:none;
}
.odq-quiz-content .odq-block-certificates h3{
	background:none !important;color:var(--q-ink) !important;padding:0 !important;margin:0;
	font-size:12px;font-weight:700;text-transform:none;letter-spacing:0;
}
.odq-quiz-content .odq-block-certificates svg{width:54px;height:54px;min-height:0;}
.odq-quiz-content .odq-block-certificates .o-bg-gray,
.odq-quiz-content .odq-block-certificates .o-bg-blue{
	display:inline-block;min-width:34px;padding:3px 12px;border-radius:999px;font-weight:800;font-variant-numeric:tabular-nums;
}
.odq-quiz-content .odq-block-certificates .o-bg-gray{background:var(--q-surface-2) !important;color:var(--q-muted) !important;}
.odq-quiz-content .odq-block-certificates .o-bg-blue{background:rgba(122,63,242,.14) !important;color:var(--q-purple) !important;}

/* La sezione qualifiche sta fuori da .odq-blocks: nessun pannello, sul fondino di pagina. */
.odq-quiz-content .odq-block-certwrap{background:transparent !important;border:0 !important;box-shadow:none !important;border-radius:0;overflow:visible;padding:0;}
/* Il suo filetto è fuori griglia → non riceve il gap: gli do il margine equivalente agli altri. */
.odq-quiz-content .odq-sec--cert{margin-top:38px;}

@media (max-width:820px){
	.odq-quiz-content .odq-blocks{grid-template-columns:1fr;}
	.odq-quiz-content .odq-blocks .odq-table-5cols{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ============================ 5 · TIPOLOGIE + COLLEZIONI === */
/* Contenitori: via il pannello bianco → stanno sul fondino di pagina. */
.odq-quiz-content .o-quiz-type,
.odq-quiz-content .o-quiz-collections{background:transparent !important;padding:0 !important;margin:34px 0 0;}
.odq-quiz-content .o-quiz-type > h2,
.odq-quiz-content .o-quiz-collections > h2{
	position:relative;font-family:var(--q-serif);font-weight:700;font-size:clamp(22px,2.6vw,28px);
	color:var(--q-ink);letter-spacing:-.3px;line-height:1.15;text-align:left;
	margin:0 0 22px;padding:0 0 12px;background:none !important;
}
.odq-quiz-content .o-quiz-type > h2::after,
.odq-quiz-content .o-quiz-collections > h2::after{
	content:"";position:absolute;left:0;bottom:0;width:52px;height:3px;border-radius:3px;
	background:linear-gradient(90deg,var(--q-purple),var(--q-blue));
}

/* 2026-09-08: tipologie passate a GRID, uguale a `.o-collections-list`.
   Prima: layout float del motore (`.o-cols`=float:left + margin 2%), che rientrava di ~21px
   rispetto alle card delle collezioni — i due blocchi della stessa pagina non erano
   allineati a sinistra. Con la stessa grid delle collezioni l'allineamento è esatto per
   costruzione (misurato: entrambe a 342px, card 248px).
   L'overflow che aveva fatto scartare la grid in passato era il min-content dell'immagine:
   si evita con `min-width:0` sulle li (una traccia grid non scende sotto il min-content
   senza). Sotto i 768px restano 2 per riga come col float; sopra, auto-fill dà 3 su tablet
   e 4 su desktop, come prima. */
.odq-quiz-content .o-quiz-type{
	display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;list-style:none;
}
@media (min-width:768px){
	.odq-quiz-content .o-quiz-type{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
}
.odq-quiz-content .o-quiz-type > h2{grid-column:1 / -1;}
.odq-quiz-content .o-quiz-type li{float:none !important;width:auto !important;min-width:0;margin:0 !important;}

/* --- TIPOLOGIE: cover a filo, bordo storico 2px, ombra morbida, hover lift --- */
/* 2026-09-08: `overflow` da hidden a visible. Serviva a ritagliare la cover sugli angoli
   tondi, ma non serve piu': l'immagine ha 14px di padding e un raggio suo di 8px, quindi
   non tocca mai il bordo della card. Con hidden il badge "Novita'!", che sta a cavallo del
   bordo superiore, veniva tagliato a meta'. */
.odq-quiz-content .o-quiz-type li{
	padding:0 !important;border-width:2px !important;border-radius:16px;overflow:visible;
	box-shadow:0 2px 4px rgba(27,24,48,.05),0 10px 24px rgba(52,40,110,.10) !important;
	transition:transform .16s ease,box-shadow .16s ease;
}
.odq-quiz-content .o-quiz-type li:hover{
	transform:translateY(-4px);
	box-shadow:0 8px 16px rgba(27,24,48,.08),0 18px 36px rgba(52,40,110,.16) !important;
}
.odq-quiz-content .o-quiz-type li img{padding:14px !important;box-sizing:border-box;width:100%;display:block;}
.odq-quiz-content .o-quiz-type-flash{
	/* 2026-09-08: badge spostato in alto a destra. Le nuove immagini delle tipologie hanno
	   il wordmark in alto a SINISTRA e il badge ci finiva sopra. Spostato a cavallo del bordo
	   superiore destro della card (come faceva la regola originale, top:-12px right:0): cosi'
	   non copre ne' il nome ne' la pastiglia QUIZ. Verificato in pagina su tutte e nove. */
	top:-11px !important;left:auto;right:12px !important;border-radius:999px;
	padding:4px 11px;font-size:11px;font-weight:800;letter-spacing:.02em;box-shadow:0 2px 6px rgba(0,0,0,.2);
}
/* Barra progressi per tipo (completati/totale) — colore del tipo. */
.odq-quiz-content .o-type-progress{padding:0 14px 14px;margin-top:-2px;text-align:center;}
.odq-quiz-content .o-type-progress .progress{margin:0 0 6px;width:100%;height:6px;border-radius:999px;background:var(--q-surface-2);overflow:hidden;}
.odq-quiz-content .o-type-progress .progress-bar-quiz{height:6px;border-radius:999px;background:var(--q-blue);}
.odq-quiz-content .o-type-progress-label{font-size:12px;font-weight:700;color:var(--q-muted);font-variant-numeric:tabular-nums;}
.odq-quiz-content .o-border-classic  .o-type-progress .progress-bar-quiz{background:#00c8cf;}
.odq-quiz-content .o-border-visual   .o-type-progress .progress-bar-quiz{background:#ffb000;}
.odq-quiz-content .o-border-visual2  .o-type-progress .progress-bar-quiz{background:#ff00e1;}
.odq-quiz-content .o-border-smart    .o-type-progress .progress-bar-quiz{background:#ff7900;}
.odq-quiz-content .o-border-si-o-no  .o-type-progress .progress-bar-quiz{background:#90c;}
.odq-quiz-content .o-border-clue     .o-type-progress .progress-bar-quiz{background:#cc0a00;}
.odq-quiz-content .o-border-audio    .o-type-progress .progress-bar-quiz{background:#c9b9a1;}
.odq-quiz-content .o-border-zoom     .o-type-progress .progress-bar-quiz{background:#36c5ed;}
.odq-quiz-content .o-border-indovina .o-type-progress .progress-bar-quiz{background:#02b322;}

/* --- COLLEZIONI: card con cover a filo + footer (progress, conteggio, CTA) --- */
.odq-quiz-content .o-collections-list{
	display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;
	list-style:none;margin:0;padding:0;
}
.odq-quiz-content .o-quiz-collections li{
	float:none !important;width:auto !important;   /* la card era float:left (.product) → collassava nella griglia */
	border:1px solid var(--q-line) !important;border-radius:16px !important;overflow:hidden;
	background:var(--q-surface);padding:0 0 14px !important;margin:0 !important;
	display:flex;flex-direction:column;text-align:center;
	box-shadow:0 2px 4px rgba(27,24,48,.05),0 10px 24px rgba(52,40,110,.10) !important;
	transition:transform .16s ease,box-shadow .16s ease;
}
.odq-quiz-content .o-quiz-collections li:hover{
	transform:translateY(-4px);box-shadow:0 8px 16px rgba(27,24,48,.08),0 18px 36px rgba(52,40,110,.16) !important;
}
.odq-quiz-content .o-collection-link{display:block;color:inherit;text-decoration:none;}
.odq-quiz-content .o-collection-link img{padding:0 !important;width:100%;display:block;}

/* --- CORONA PREMIUM sulla cover (8 set. 2026) ---
   Pastiglia bianca e corona oro: l'oro da solo, su copertine chiare, sparisce. Il bianco la
   stacca da qualunque illustrazione e non introduce colori — `--q-gold` è già un token.
   Ancorata alla card (`.products li` è `position:relative`), che comincia esattamente dove
   comincia la cover. Sta PRIMA di `.quiz-average` nel DOM, quindi in hover l'overlay del
   voto le passa sopra: voluto. */
.odq-quiz-content .o-collection-card .odq-coll-premium{
	position:absolute;top:10px;left:10px;z-index:2;
	display:inline-flex;align-items:center;justify-content:center;
	width:28px;height:28px;border-radius:50%;
	background:var(--q-surface);border:1px solid var(--q-line);
	box-shadow:0 2px 6px rgba(27,24,48,.18);
}
.odq-quiz-content .o-collection-card .odq-coll-premium svg{
	width:15px;height:15px;display:block;fill:var(--q-gold);
}
.odq-quiz-content .o-collection-card{font-size:13px;color:var(--q-muted);font-weight:600;}

/* --- TITOLO DELLA CARD (2026-09-07) ---
   Era `display:none` qui e in `.products li a h2{display:none !important}` (onedayquiz.css,
   ora rimossa): il nome stava dentro la cover, quindi ogni copertina nuova era un lavoro di
   grafica da rifare a ogni quiz in più. Ora l'informazione è nella card.

   Gli `!important` qui NON servono a vincere un pareggio — sul bundle
   (`.products li a h2{color:#2181c1;font-size:18px}`, 1 classe) basta la specificità di
   questo selettore (2 classi). Sono una guardia: le regole di questa card nel bundle sono
   scritte con !important, e dove c'è un ID il pareggio si perde davvero — vedi il blocco
   `#o-dynamic .o-collection-link > h2` più sotto, che deve ridichiarare `display`.

   L'altezza è FISSA a due righe anche per i titoli di una riga sola: le card stanno in
   griglia e devono restare allineate. Oltre le due righe si tronca con ellissi — «Harry
   potter e la pietra filosofale» e «Le 7 Meraviglie del mondo moderno» sono i casi reali,
   e nel pannello dashboard la card è stretta. */
.odq-quiz-content .o-collection-link > h2{
	display:-webkit-box !important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
	margin:12px 14px 0 !important;padding:0 !important;
	font-family:var(--q-sans);font-size:16px;font-weight:700;line-height:1.25;
	min-height:calc(2 * 1.25 * 16px);          /* due righe sempre, anche con una riga sola */
	color:var(--q-ink) !important;letter-spacing:-.2px;text-wrap:balance;
}

/* --- BADGE: quantità · argomento · modalità ---
   Sono <span> dentro un <div>: `.products li` e `.o-quiz-collections li` sono selettori
   discendenti (float, bordo, ombra, padding della card), quindi una lista annidata qui
   erediterebbe il frame-card. */
.odq-quiz-content .o-collection-card .odq-coll-badges{
	display:flex;flex-wrap:wrap;justify-content:center;gap:5px;
	margin:8px 12px 2px;
	align-content:flex-start;
}
/* DUE righe riservate per la fila di badge, ma SOLO da quando la griglia ha più di una
   colonna. Misurato: in una card da 220px i tre badge non stanno in riga quando almeno uno
   è un conteggio («50 quiz · 10 argomenti · 6 modalità» chiede 243px contro 194
   disponibili), e succede sulla maggioranza delle collezioni. Senza riserva le card che
   vanno a capo spingono barre, conteggio e pulsante 27px più in basso delle vicine: il
   riquadro resta allineato (la griglia stira), il contenuto no.

   Sotto i ~527px di viewport la griglia è a UNA colonna (misurato: 520 → 1, 620 → 2), ogni
   card è sola nella sua riga e non ha vicine con cui allinearsi: lì la riserva sarebbe solo
   27px di vuoto sotto i badge, su ogni card, sul viewport che conta di più. Da qui il
   breakpoint. 11px * 1.45 di interlinea + 6px di padding = 22px per riga, più il gap. */
@media (min-width:540px){
	.odq-quiz-content .o-collection-card .odq-coll-badges{min-height:calc(2 * (11px * 1.45 + 6px) + 5px);}
}

.odq-quiz-content .o-collection-card .odq-coll-badge{
	display:inline-block;padding:3px 9px;border-radius:999px;
	background:var(--q-surface-2);color:var(--q-muted);
	font-family:var(--q-sans);font-size:11px;font-weight:700;line-height:1.45;
	letter-spacing:.01em;white-space:nowrap;
}
/* Il badge modalità con un nome solo porta il colore della tipologia su un PALLINO: le
   classi `.odq-quiz-type-<slug>-color` (tutte e nove in onedayquiz.css) stanno sul pallino,
   quindi lì `currentColor` è il colore del tipo mentre l'etichetta resta leggibile.
   Sul TESTO non si può: 7 colori su 9 danno 1,8-3,3:1 su bianco, contro il 4,5:1 che
   servirebbe a 11px (misurati: classic 2,07 · visual 1,83 · audio 1,92 · zoom 2,03 ·
   smart 2,63 · indovina 2,81 · visual2 3,31; passano solo si-o-no e clue). */
.odq-quiz-content .o-collection-card .odq-coll-badge--type{padding-left:7px;}
.odq-quiz-content .o-collection-card .odq-coll-dot{
	display:inline-block;width:7px;height:7px;border-radius:50%;
	background:currentColor;margin-right:5px;vertical-align:baseline;flex:none;
}
/* Più modalità: un pallino ciascuna, SOVRAPPOSTI di 3px. In fila sette pallini prendono
   ~70px, e in un badge dentro una card da 220 la riga andrebbe a capo una terza volta;
   sovrapposti ne prendono 31. L'alone è del colore del badge, non bianco, così i pallini
   restano distinti su qualunque fondo senza introdurre un colore nuovo. */
.odq-quiz-content .o-collection-card .odq-coll-dots{
	display:inline-flex;align-items:center;margin-right:5px;vertical-align:baseline;
}
.odq-quiz-content .o-collection-card .odq-coll-dots .odq-coll-dot{
	margin-right:-3px;box-shadow:0 0 0 1.5px var(--q-surface-2);
}
.odq-quiz-content .o-collection-card .odq-coll-dots .odq-coll-dot:last-child{margin-right:0;}
.odq-quiz-content .o-collection-card .progress{
	width:calc(100% - 32px);margin:8px auto 0;height:6px;border-radius:999px;background:var(--q-surface-2);overflow:hidden;
}
/* La 1ª barra (completamento) tiene il colore della media (classi odq-*-score-bg del motore);
   la 2ª resta neutra. Non forziamo il background così i colori-voto restano. */
.odq-quiz-content .o-collection-card .progress .progress-bar-quiz{height:6px;border-radius:999px;}

/* Riempimento animato. Prima lo faceva `uProgressBar()` animando la `width` da 0; ora la
   width la scrive il server (altrimenti sull'hub le barre restavano vuote, vedi
   o-class-quiz.php), quindi non c'è più niente da cui animare in JS.

   Si anima `transform:scaleX()`, NON la width: la larghezza finale resta quella giusta
   dal primo frame — se il JS non parte, o se il foglio non arriva, la barra è comunque
   corretta — e una trasformazione non fa rifare il layout a ogni fotogramma come farebbe
   la width. `transform-origin:left` la fa crescere da sinistra.

   ⚠️ NIENTE `fill-mode`, ed è il punto delicato. Col `both` che avevo messo prima la barra
   resta a `scaleX(0)` — cioè INVISIBILE — ogni volta che l'animazione non parte: scheda in
   background, pagina non renderizzata, sottoalbero saltato da `content-visibility`. Misurato:
   larghezza 0px anche dopo cinque secondi. Sarebbe stato rimettere in piedi, per un'altra
   strada, esattamente il difetto appena chiuso sull'hub.
   Senza fill-mode lo stato a riposo è quello naturale, `scaleX(1)`: se l'animazione non parte
   la barra è semplicemente già piena, che è la cosa giusta da vedere. L'animazione può solo
   aggiungere, mai togliere. */
@keyframes odq-bar-fill{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.odq-quiz-content .o-collection-card .progress .progress-bar-quiz{
	transform-origin:left center;
	animation:odq-bar-fill .9s cubic-bezier(.22,.61,.36,1);
}
/* Chi ha chiesto meno movimento al sistema operativo vede la barra già piena. */
@media (prefers-reduced-motion:reduce){
	.odq-quiz-content .o-collection-card .progress .progress-bar-quiz{animation:none;}
}
.odq-quiz-content .o-collection-card .progress .progress-bar-quiz:not([class*="score"]){background:var(--q-blue);}
.odq-quiz-content .o-collection-card .blue{
	display:inline-block;margin:12px auto 0;padding:9px 22px;border-radius:999px;
	background:var(--q-blue);color:#fff !important;font-weight:700;font-size:13px;text-decoration:none;cursor:pointer;
}
/* Lo stato finale (Inizia! / In corso... / Completato) va SEMPRE in fondo alla card.
   Da quando barre e conteggio compaiono solo a collezione iniziata, due card nella stessa
   riga possono avere ~34px di contenuto in meno l'una dell'altra: il riquadro resta
   allineato perché la griglia stira, ma i pulsanti no.

   Lo spinge giù uno spaziatore flessibile, NON un `margin-top:auto` sul pulsante. Motivo:
   `auto` vale zero quando lo spazio libero è zero, e succede proprio nel caso più comune —
   per un anonimo nessuna card ha le barre, quindi sono tutte alte uguali, l'avanzo è zero e
   il pulsante finirebbe appiccicato ai badge. Lo spaziatore ha un `min-height`, quindi il
   distacco c'è comunque. */
.odq-quiz-content .o-collection-card .odq-coll-fill{flex:1 1 auto;min-height:12px;}

/* Sotto i ~540px la card è sola nella sua riga e larga ~325px: il titolo a 16px e i badge
   a 11px, sotto una cover da 325, si perdono. Qui crescono. Vale SOLO in questa fascia —
   da 540 in su le card tornano strette (220-260px) e le misure di prima sono giuste.

   ⚠️ Va DOPO le regole base di badge/pallino/pulsante: la specificità è la stessa, quindi
   decide l'ordine nel file. Messo sopra, `.odq-coll-badge{font-size:11px}` lo annullava
   in silenzio — il titolo cresceva e i badge no. */
@media (max-width:539px){
	.odq-quiz-content .o-collection-link > h2{
		font-size:19px;margin:14px 16px 0 !important;
		min-height:calc(2 * 1.25 * 19px);       /* sempre due righe, come sopra */
	}
	.odq-quiz-content .o-collection-card .odq-coll-badges{gap:6px;margin:10px 14px 2px;}
	.odq-quiz-content .o-collection-card .odq-coll-badge{font-size:12.5px;padding:4px 11px;}
	.odq-quiz-content .o-collection-card .odq-coll-dot{width:8px;height:8px;margin-right:6px;}
	.odq-quiz-content .o-collection-card > .blue{font-size:14px;padding:10px 26px;}
}

/* --- BACHECA (loggato): collezioni raggruppate per avanzamento (22 ott. 2026) ---
   «Completate» in una tendina chiusa, in griglia di miniature: la card intera servirebbe
   solo a rifare spazio a ciò che non serve più. */
.odq-quiz-content .o-quiz-collections--done{margin-top:8px;}
.odq-quiz-content .odq-coll-done > summary{
	cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
	padding:10px 20px;border-radius:999px;border:1.5px solid var(--q-line);background:var(--q-surface);
	font-weight:700;font-size:14px;color:var(--q-ink,#1b1830);
}
.odq-quiz-content .odq-coll-done > summary::-webkit-details-marker{display:none;}
.odq-quiz-content .odq-coll-done > summary::after{content:"\25BE";font-size:12px;transition:transform .16s ease;}
.odq-quiz-content .odq-coll-done[open] > summary::after{transform:rotate(180deg);}
.odq-quiz-content .odq-coll-done > summary:hover{border-color:var(--brand-purple,#7a3ff2);}
.odq-quiz-content .o-collections-list--done{
	grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;margin-top:16px;
}
.odq-quiz-content .o-quiz-collections .o-collection-card--done{padding:0 0 8px !important;border-radius:12px !important;box-shadow:none !important;}
.odq-quiz-content .o-quiz-collections .o-collection-card--done:hover{transform:none;box-shadow:none !important;border-color:var(--brand-purple,#7a3ff2) !important;}
.odq-quiz-content .o-collection-card--done .odq-coll-done-name{display:block;margin:8px 8px 0;font-size:12px;font-weight:700;line-height:1.25;}
.odq-quiz-content .o-collection-card--done .odq-coll-done-avg{display:block;margin-top:2px;font-size:11px;color:var(--q-muted);}

/* --- BACHECA: bottone "Vedi tutte le collezioni" (→ hub /collezioni/) --- */
.odq-quiz-content .o-collections-all{margin:22px 0 0;text-align:center;}
.odq-quiz-content .o-collections-all-btn{
	display:inline-flex;align-items:center;gap:9px;
	padding:12px 26px;border-radius:999px;
	border:1.5px solid var(--q-line);background:var(--q-surface);
	color:var(--q-ink,#1b1830) !important;font-weight:700;font-size:14px;text-decoration:none;cursor:pointer;
	transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.odq-quiz-content .o-collections-all-btn:hover{
	border-color:var(--brand-purple,#7a3ff2);transform:translateY(-2px);
	box-shadow:0 8px 18px rgba(52,40,110,.14);
}

/* ============================ HUB COLLEZIONI (/collezioni/) === */
.odq-quiz-content .odq-collhub{margin:0;}
.odq-quiz-content .odq-collhub-head{margin:0 0 26px;}
.odq-quiz-content .odq-collhub-lead{
	max-width:680px;margin:10px 0 0;color:var(--q-muted);font-size:15px;line-height:1.55;
	text-wrap:balance;   /* evita l'orfano ("volta." da solo sull'ultima riga) */
}
.odq-quiz-content .odq-collhub-grid{margin-top:6px;}

/* Filtri (accesso + tema) */
/* Ricerca nell'hub collezioni (22 ott. 2026): campo + pulsante in riga, sopra i filtri a chip. */
.odq-quiz-content .odq-collhub-search{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 18px;max-width:560px;}
.odq-quiz-content .odq-collhub-search input[type=search]{
	min-width:0;padding:11px 18px;border-radius:999px;border:1.5px solid var(--q-line);
	background:var(--q-surface);font-size:15px;color:var(--q-ink,#1b1830);box-shadow:none;
}
.odq-quiz-content .odq-collhub-search input[type=search]:focus{border-color:var(--brand-purple,#7a3ff2);outline:0;}
.odq-quiz-content .odq-collhub-search button{
	padding:11px 24px;border-radius:999px;border:0;background:var(--brand-purple,#7a3ff2);color:#fff;font-weight:700;font-size:14px;cursor:pointer;
}
.odq-quiz-content .odq-collhub-search button:hover,.odq-quiz-content .odq-collhub-search button:focus{background:var(--brand-purple,#7a3ff2);color:#fff;}
.odq-quiz-content .odq-search-wrap{position:relative;flex:1 1 240px;min-width:0;}
.odq-quiz-content .odq-search-wrap input[type=search]{width:100%;}
.odq-quiz-content .odq-suggest{
	position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;margin:0;padding:6px;list-style:none;
	background:var(--q-surface);border:1px solid var(--q-line);border-radius:16px;
	box-shadow:0 10px 28px rgba(52,40,110,.16);max-height:340px;overflow:auto;
}
.odq-quiz-content .odq-suggest[hidden]{display:none;}
.odq-quiz-content .odq-suggest li{margin:0;padding:0;}
.odq-quiz-content .odq-suggest a{
	display:flex;flex-direction:column;gap:1px;padding:9px 14px;border-radius:10px;
	color:var(--q-ink,#1b1830);text-decoration:none;font-weight:600;font-size:15px;
}
.odq-quiz-content .odq-suggest a small{font-weight:500;font-size:12px;color:var(--q-muted);}
.odq-quiz-content .odq-suggest b{color:var(--brand-purple,#7a3ff2);}
.odq-quiz-content .odq-suggest li.is-active a,.odq-quiz-content .odq-suggest a:hover{background:var(--q-surface-2,#f4f2fb);}
.odq-quiz-content .odq-search-clear{font-size:13px;font-weight:600;color:var(--q-muted);text-decoration:underline;}

/* «+ Filtri»: i gruppi di chip stanno in una tendina, chiusa finché non serve. */
.odq-quiz-content .odq-collhub-more{margin:0 0 14px;}
.odq-quiz-content .odq-collhub-more > summary{
	cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
	padding:8px 18px;border-radius:999px;border:1.5px solid var(--q-line);background:var(--q-surface);
	font-weight:700;font-size:14px;color:var(--q-ink,#1b1830);
}
.odq-quiz-content .odq-collhub-more > summary::-webkit-details-marker{display:none;}
.odq-quiz-content .odq-collhub-more > summary:hover{border-color:var(--brand-purple,#7a3ff2);}
.odq-quiz-content .odq-collhub-more .odq-more-sign::before{content:"+";font-size:16px;line-height:1;}
.odq-quiz-content .odq-collhub-more[open] .odq-more-sign::before{content:"\2212";}
.odq-quiz-content .odq-collhub-more > summary b{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:var(--brand-purple,#7a3ff2);color:#fff;font-size:12px;line-height:20px;text-align:center;}
.odq-quiz-content .odq-collhub-more[open] > .odq-collhub-filters{margin-top:14px;}

.odq-quiz-content .odq-collhub-filters{
	display:flex;flex-direction:column;gap:12px;margin:0 0 22px;
}
.odq-quiz-content .odq-filter-group{
	display:flex;align-items:center;flex-wrap:wrap;gap:8px;
}
.odq-quiz-content .odq-filter-label{
	font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
	color:var(--q-muted);margin-right:4px;min-width:64px;
}
.odq-quiz-content .odq-filter-pill{
	display:inline-flex;align-items:center;height:34px;padding:0 15px;
	border:1px solid var(--q-line);border-radius:999px;background:var(--q-surface);
	color:var(--q-ink,#1b1830) !important;font-weight:700;font-size:13px;text-decoration:none;
	transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.odq-quiz-content .odq-filter-pill:hover{border-color:var(--brand-purple,#7a3ff2);}
.odq-quiz-content .odq-filter-pill.is-active{
	background:var(--brand-purple,#7a3ff2);border-color:var(--brand-purple,#7a3ff2);color:#fff !important;
}
.odq-quiz-content .odq-collhub-empty{margin:24px 0;}
.odq-quiz-content .odq-filter-reset{color:var(--brand-purple,#7a3ff2);font-weight:700;}

/* Paginazione */
.odq-quiz-content .odq-collhub-pager{
	display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
	margin:34px 0 6px;
}
.odq-quiz-content .odq-pager-nums{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;}
.odq-quiz-content .odq-pager-num,
.odq-quiz-content .odq-pager-arrow{
	display:inline-flex;align-items:center;gap:6px;
	min-width:40px;height:40px;padding:0 12px;justify-content:center;
	border:1px solid var(--q-line);border-radius:999px;background:var(--q-surface);
	color:var(--q-ink,#1b1830) !important;font-weight:700;font-size:14px;text-decoration:none;
	transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.odq-quiz-content .odq-pager-num:hover,
.odq-quiz-content .odq-pager-arrow:hover{border-color:var(--brand-purple,#7a3ff2);}
.odq-quiz-content .odq-pager-num.is-current{
	background:var(--brand-purple,#7a3ff2);border-color:var(--brand-purple,#7a3ff2);color:#fff !important;
}
.odq-quiz-content .odq-pager-gap{padding:0 4px;color:var(--q-muted);}
@media (max-width:600px){
	.odq-quiz-content .odq-pager-arrow span{display:none;}   /* solo frecce su mobile */
}

/* ============================ 6 · LOADER + FIX VARI === */
/* Spinner CSS unico (sostituisce i lord-icon Lottie non caricati nel main),
   usato sia dal loader in-contenuto (.o-loader) sia dall'overlay a cambio pagina. */
@keyframes odq-spin{to{transform:rotate(360deg);}}
.odq-spinner{
	display:inline-block;width:40px;height:40px;border-radius:50%;box-sizing:border-box;
	border:4px solid rgba(122,63,242,.18);border-top-color:var(--brand-purple,#7a3ff2);
	animation:odq-spin .8s linear infinite;
}
.odq-spinner--lg{width:56px;height:56px;border-width:5px;}
@media (prefers-reduced-motion:reduce){.odq-spinner{animation-duration:1.6s;}}
.o-loader{display:flex;align-items:center;justify-content:center;padding:48px 0;width:100%;}

/* Riserva d'altezza del contenitore AJAX della bacheca (vedi templates/quiz-page.php).
   Una schermata è il MINIMO che porta il testo SEO che segue sotto la piega — lì il suo
   spostamento non pesa più sul CLS — ed è sempre meno del contenuto reale della bacheca,
   quindi al rilascio della classe non c'è mai un salto all'insù. Niente `100dvh`:
   su mobile la barra del browser che si ritrae lo farebbe cambiare a scroll iniziato.

   ⚠️ QUI C'ERA UN SECONDO SPINNER, un `::after` sulla riserva, e si vedeva: la riserva è
   `display:flex` centrata, quindi il `.o-loader` che odq-onload.js inietta dentro
   #o-quiz-wall e lo pseudo-elemento diventavano DUE FLEX ITEM AFFIANCATI — due rotelle
   una accanto all'altra, che sembravano un errore. Da anonimo non si vedeva niente
   (bacheca resa lato server: né riserva né loader), quindi il difetto viveva solo per
   chi è loggato.
   Era ridondante per costruzione: la riserva si mette SOLO quando il contenitore nasce
   vuoto (quiz-page.php), che è esattamente il caso in cui odq-onload.js dipinge il suo
   loader. Tenuto quello del JS, che è anche l'unico presente nelle navigazioni interne,
   dove la riserva non c'è più.
   E toglieva di mezzo un difetto latente: `releaseReserve()` (odq-setup.js) RIMETTE la
   classe se il contenuto arrivato è più basso della riserva — con il `::after` sarebbe
   comparsa una rotella che gira sopra il contenuto vero, per sempre. */
.odq-quiz-content .odq-reserve{
	min-height:100vh;min-height:100svh;
	display:flex;align-items:center;justify-content:center;
}

/* Collezioni e classifica: fuori schermo il browser ne salta layout e paint.
   Da quando la bacheca è resa lato server (o_Wall::wallPrerender) tutto il wall va
   impaginato PRIMA del primo render, e su PageSpeed mobile — che rallenta la CPU di 4× —
   quella spesa è entrata nella finestra critica: `Style & Layout` 710 ms e LCP da 3,5 a
   4,1 s. `content-visibility` toglie il costo LASCIANDO IL DOM INTERO, che è il punto:
   Google continua a vedere collezioni e classifica senza eseguire JS, ed era metà del
   motivo per cui le abbiamo messe nell'HTML.

   Misurate sul live, entrambe INTERAMENTE sotto la piega su tutti e due i viewport
   (mobile 412x823: collezioni a 1.818, classifica a 3.918; desktop 1350x940: 1.420 e
   1.977) — condizione necessaria, altrimenti si scambierebbe TBT con CLS.

   `contain-intrinsic-size` con `auto`: il numero è solo la stima iniziale, poi il browser
   ricorda la dimensione vera già resa. Le stime sono per breakpoint perché le due altezze
   cambiano molto (collezioni 523px desktop contro 2.066 mobile): una stima sbagliata non
   produce CLS — sono sotto la piega — ma fa ballare la scrollbar mentre si scorre. */
.odq-quiz-content #o-quiz-wall .o-quiz-collections,
.odq-quiz-content #o-quiz-wall .o-wall-rank{
	content-visibility:auto;
}
/* 2026-09-07: la card è cresciuta di ~84px (titolo su due righe fisse + riga badge) e ne ha
   persi ~50 (barre e conteggio, che ora compaiono solo a collezione iniziata). Stime rifatte
   sull'ANONIMO — è quello che misura PageSpeed, e per lui le barre non ci sono mai.

   ⚠️ Non si misurano leggendo l'altezza del blocco: con `content-visibility:auto` e il blocco
   sotto la piega il browser RESTITUISCE LA STIMA, non la misura, quindi si finisce per
   rileggere il proprio numero e crederlo confermato. Bisogna forzare
   `content-visibility:visible` e poi leggere. Fatto così: 595px a 1350 (4 card in UNA riga,
   non due) e 2.244px a 412 (4 card impilate, alte 511 l'una).

   Resta solo la stima iniziale (`auto`): sbagliarla non produce CLS — il blocco è sotto la
   piega su entrambi i viewport — ma fa ballare la scrollbar mentre si scorre. */
.odq-quiz-content #o-quiz-wall .o-quiz-collections{contain-intrinsic-size:auto 600px;}
.odq-quiz-content #o-quiz-wall .o-wall-rank{contain-intrinsic-size:auto 830px;}
@media (max-width:767px){
	.odq-quiz-content #o-quiz-wall .o-quiz-collections{contain-intrinsic-size:auto 2250px;}
	.odq-quiz-content #o-quiz-wall .o-wall-rank{contain-intrinsic-size:auto 900px;}
}
.o-loader-fixed-bg{
	position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;
	background:rgba(246,244,251,.72);backdrop-filter:saturate(140%) blur(2px);
}

/* Blinda lo scroll orizzontale sulla pagina-quiz (clip: non crea scroll-container,
   non rompe sticky/off-canvas fixed). */
.odq-main.odq-page--quiz{overflow-x:clip;}
/* CRITICO (mobile): il pannello off-canvas #o-dashboard è position:fixed width:100%
   right:-100% (chiuso) → estende la larghezza-documento a 2× viewport, così le
   colonne in % (barra punteggi, tipologie, collezioni) si allargano e TUTTO deborda
   a destra. Il clip su .odq-main NON basta (il fixed è relativo al viewport, non a
   .odq-main): serve clippare alla RADICE. Scoped alle sole pagine-quiz via :has. */
html:has(.odq-page--quiz){overflow-x:clip;}

/* Box "valutazione" (recensioni, visibile solo admin via utilRateUsShow) → nascosto:
   causava overflow ed è comunque da rifare in altro modo. */
.odq-quiz-content .odq-block:has(.valutazione){display:none !important;}

/* ============================ 7 · CLASSIFICA (Top 10) + CTA ANONIMO === */
/* Vista anonima (o_Wall::wallDisplay, USER_STATUS === false): tabella Top 10
   generale (rankTable '10','general') + invito alla registrazione. Da tabella
   blu piena del motore → leaderboard a card con podio oro/argento/bronzo, e da
   bottone blu → CTA card con pill viola brand. */

/* Contenitore: via il pannello bianco del motore → sta sul fondino di pagina,
   colonna sola, allineata alle altre sezioni (tipologie/collezioni). */
.odq-quiz-content .o-wall-rank{
	background:transparent !important;padding:0 !important;margin:34px 0 0;
	width:auto;text-align:left;display:block;
}

/* Titolo "Classifica Generale" — serif + accento come le altre sezioni. */
.odq-quiz-content .o-wall-rank > h2{
	position:relative;font-family:var(--q-serif);font-weight:700;
	font-size:clamp(22px,2.6vw,28px);color:var(--q-ink);letter-spacing:-.3px;
	line-height:1.15;text-align:left;margin:0 0 22px;padding:0 0 12px;background:none !important;
}
.odq-quiz-content .o-wall-rank > h2::after{
	content:"";position:absolute;left:0;bottom:0;width:52px;height:3px;border-radius:3px;
	background:linear-gradient(90deg,var(--q-purple),var(--q-blue));
}
/* Bacheca bloccata ("Sblocca la bacheca"): titolo centrato → niente filetto. */
.odq-quiz-content .o-wall-rank.o-wall-locked > h2{padding-bottom:0;}
.odq-quiz-content .o-wall-rank.o-wall-locked > h2::after{content:none;}

/* "Top 10" → chip muto (l'inline font-size:14px del motore va battuto con !important). */
.odq-quiz-content .o-wall-rank > h2 > div{
	display:inline-block;margin-top:10px;font-family:var(--q-sans) !important;
	font-size:11.5px !important;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
	color:var(--q-muted);background:var(--q-surface-2);padding:4px 11px;border-radius:999px;
}

/* Tabella → card leaderboard (separate+overflow per arrotondare gli angoli). */
.odq-quiz-content .odq-quiz-rank{
	width:100%;border-collapse:separate;border-spacing:0;margin:0;
	background:var(--q-surface);border:1px solid var(--q-line);border-radius:16px;
	overflow:hidden;box-shadow:0 2px 4px rgba(27,24,48,.05),0 10px 24px rgba(52,40,110,.08);
}
/* Header (i 3 <th>): sobrio, non più barra blu piena. */
.odq-quiz-content .odq-quiz-rank th{
	background:var(--q-surface-2) !important;color:var(--q-muted) !important;
	font-family:var(--q-sans);font-weight:800;font-size:10.5px;letter-spacing:.10em;
	text-transform:uppercase;text-align:left;padding:12px 16px;border:0 !important;height:auto;
}
.odq-quiz-content .odq-quiz-rank th i{color:var(--q-purple);margin-right:5px;font-size:13px;vertical-align:-1px;}
.odq-quiz-content .odq-quiz-rank th span{display:inline;font-size:inherit;}
/* Colonne: posizione stretta e centrata, punti a destra. */
.odq-quiz-content .odq-quiz-rank th:first-child,
.odq-quiz-content .odq-quiz-rank td:first-child{width:64px;text-align:center;}
.odq-quiz-content .odq-quiz-rank th:last-child,
.odq-quiz-content .odq-quiz-rank td:last-child{width:92px;text-align:right;}

/* Righe corpo: filetto solo in testa alla riga (niente doppio bordo con l'header). */
.odq-quiz-content .odq-quiz-rank td{
	border:0 !important;border-top:1px solid var(--q-line) !important;
	padding:12px 16px;text-align:left;text-transform:none;font-size:14.5px;font-weight:600;
	color:var(--q-body);background:transparent !important;font-variant-numeric:tabular-nums;height:auto;
}
.odq-quiz-content .odq-quiz-rank tr:hover td{background:var(--q-surface-2) !important;color:var(--q-body) !important;}
/* Utente = colonna centrale piena; Punti = blu bold a destra. */
.odq-quiz-content .odq-quiz-rank td:nth-child(2){color:var(--q-ink);font-weight:700;}
.odq-quiz-content .odq-quiz-rank td:last-child{color:var(--q-blue);font-weight:800;}
/* Posizione: coin (`.odq-rank-pos`, wrap PHP). Base = numero pulito; podio (righe-
   dati 2-4) = medaglia colorata oro/argento/bronzo. L'header è la 1ª <tr> (tbody
   implicito), i dati partono dalla 2ª. Vale su wall E pannelli dinamici. */
.odq-quiz-content .odq-quiz-rank td:first-child{color:var(--q-muted);}
.odq-quiz-content .odq-quiz-rank .odq-rank-pos{
	display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 4px;
	font-weight:800;font-size:13px;line-height:1;color:var(--q-muted);
}
.odq-quiz-content .odq-quiz-rank tr:nth-child(n+2):nth-child(-n+4) .odq-rank-pos{
	width:30px;height:30px;min-width:30px;padding:0;border-radius:50%;color:#fff;font-size:14px;
	box-shadow:0 3px 8px rgba(27,24,48,.18);
}
.odq-quiz-content .odq-quiz-rank tr:nth-child(2) .odq-rank-pos{background:linear-gradient(145deg,#f4cf6b,#c8971f);}
.odq-quiz-content .odq-quiz-rank tr:nth-child(3) .odq-rank-pos{background:linear-gradient(145deg,#dfe3ea,#9a9ea8);}
.odq-quiz-content .odq-quiz-rank tr:nth-child(4) .odq-rank-pos{background:linear-gradient(145deg,#e0a578,#b3703a);}
/* current-user (se loggato compare qui): tinta viola invece del nero del motore. */
.odq-quiz-content .odq-quiz-rank td.current-user{
	background:rgba(122,63,242,.08) !important;color:var(--q-ink) !important;font-size:inherit !important;
}
/* Il motore segna la riga dell'utente anche con una manina piazzata in assoluto
   (`top:5px;left:10px`) nella prima cella: cade addosso al numero di posizione, e sul
   podio addosso alla medaglia. La riga si riconosce già dalla tinta viola qui sopra,
   quindi la manina si toglie invece di cercarle un angolo libero che non c'è. */
.odq-quiz-content .odq-quiz-rank td.current-user:first-child:before{content:none !important;}

/* ⚠️ `table-layout:fixed` — senza, la tabella si dimensiona sul CONTENUTO e basta una
   riga con un nome lungo e inspezzabile (il sito ne ha parecchi: email finite in
   `display_name`) perché il min-content della colonna centrale detti la larghezza di
   tutta la tabella. Misurato nel pannello classifica: 510px dentro un contenitore da
   390 → e siccome `#o-dynamic` è `overflow-x:hidden`, la colonna dei punti finiva
   fuori dallo schermo e non era più raggiungibile in nessun modo (le intestazioni,
   dimensionate su quelle colonne gonfie, risultavano per giunta disallineate).
   Con le larghezze dichiarate rispettate la tabella non può superare il contenitore:
   è il nome a troncarsi con l'ellissi. Vale su wall e pannelli (stessa classe).
   NB: in layout fisso comandano le celle della PRIMA riga, che qui sono i <th>.
   ⚠️ ESCLUSA `.odq-table-certificates` (classifica Qualifiche): quella tabella ha
   NOVE colonne (posizione, nome, punti + 6 qualifiche, rankTableTHead case
   'certificates'), e queste larghezze, tarate su tre, schiaccerebbero le altre sei a
   zero. Ha le sue, più in basso nel Blocco 9 insieme al contenitore che la fa
   scorrere. */
.odq-quiz-content .odq-quiz-rank:not(.odq-table-certificates){table-layout:fixed;}
/* ⚠️ In layout fisso una colonna `auto` NON si prende lo spazio che avanza: viene
   dimensionata sul contenuto della prima riga e il resto si spartisce in proporzione
   fra le colonne dichiarate (misurato: 82/114/146 invece di 52/200/92 — il nome
   strizzato e i punti larghi il doppio del necessario). Quindi la si dichiara anche
   lei, con le tre larghezze che fanno esattamente 100%. */
.odq-quiz-content .odq-quiz-rank:not(.odq-table-certificates) th:nth-child(2),
.odq-quiz-content .odq-quiz-rank:not(.odq-table-certificates) td:nth-child(2){width:calc(100% - 156px);}
.odq-quiz-content .odq-quiz-rank:not(.odq-table-certificates) td:nth-child(2){
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

@media (max-width:560px){
	/* Su telefono i 329px utili vanno spartiti stretti: posizione 52 + punti 92,
	   il resto al nome. Le etichette a 10,5px con .10em di spaziatura non ci
	   entrano più, quindi si accorciano i tracking e si toglie il testo della
	   prima colonna: il numero (e la medaglia sul podio) dice già tutto, e
	   lasciarlo manderebbe "POSIZIONE" su tre righe.
	   Anche qui la tabella Qualifiche resta fuori: con nove colonne le sue misure
	   sono un altro problema, e non è quello segnalato. */
	.odq-quiz-content .odq-quiz-rank:not(.odq-table-certificates) th,
	.odq-quiz-content .odq-quiz-rank:not(.odq-table-certificates) td{padding:11px 8px;}
	.odq-quiz-content .odq-quiz-rank:not(.odq-table-certificates) th{font-size:10px;letter-spacing:.04em;}
	.odq-quiz-content .odq-quiz-rank:not(.odq-table-certificates) th i{margin-right:4px;font-size:12px;}
	.odq-quiz-content .odq-quiz-rank:not(.odq-table-certificates) th:first-child span{display:none;}
	/* Nelle due colonne che tengono l'etichetta l'icona è il pezzo sacrificabile:
	   con lei "PUNTEGGIO" non ci sta in 76px e finiva su due righe, sotto al glifo. */
	.odq-quiz-content .odq-quiz-rank:not(.odq-table-certificates) th:not(:first-child) i{display:none;}
	.odq-quiz-content .odq-quiz-rank:not(.odq-table-certificates) th:first-child,
	.odq-quiz-content .odq-quiz-rank:not(.odq-table-certificates) td:first-child{width:52px;}
	.odq-quiz-content .odq-quiz-rank:not(.odq-table-certificates) th:last-child,
	.odq-quiz-content .odq-quiz-rank:not(.odq-table-certificates) td:last-child{width:92px;}
	.odq-quiz-content .odq-quiz-rank:not(.odq-table-certificates) th:nth-child(2),
	.odq-quiz-content .odq-quiz-rank:not(.odq-table-certificates) td:nth-child(2){width:calc(100% - 144px);}
	.odq-quiz-content .odq-quiz-rank:not(.odq-table-certificates) td{font-size:13.5px;}
}

/* CTA card registrazione (wrapper .o-wall-rank-cta aggiunto in o-class-wall.php). */
.odq-quiz-content .o-wall-rank-cta{
	margin:16px 0 0;padding:24px 22px;border-radius:16px;text-align:center;
	background:linear-gradient(135deg,rgba(122,63,242,.09),rgba(33,129,193,.09));
	border:1px solid var(--q-line);
}
.odq-quiz-content .o-wall-rank-cta h3{
	font-family:var(--q-serif);font-weight:700;font-size:21px;color:var(--q-ink);
	margin:0 0 6px;padding:0;background:none !important;text-align:center;letter-spacing:-.2px;
}
.odq-quiz-content .o-wall-rank-cta p{
	font-family:var(--q-sans);font-size:14px;color:var(--q-muted);
	margin:0 auto 18px;max-width:440px;line-height:1.5;
}
/* Bottone: pill viola brand (batte .odq-quiz-button blu del motore, 0,3,0 > 0,1,0). */
.odq-quiz-content .o-wall-rank .odq-quiz-button{
	display:inline-flex;align-items:center;gap:9px;width:auto;min-width:0 !important;
	margin:0 !important;padding:14px 32px !important;border:0 !important;border-radius:999px !important;
	background:var(--q-purple) !important;color:#fff !important;font-family:var(--q-sans);
	font-weight:700;font-size:15px;letter-spacing:.01em;text-align:center;
	box-shadow:0 10px 26px rgba(122,63,242,.32) !important;
	transition:transform .14s ease,box-shadow .14s ease;
}
.odq-quiz-content .o-wall-rank .odq-quiz-button:hover{
	transform:translateY(-2px);box-shadow:0 14px 34px rgba(122,63,242,.42) !important;
}
.odq-quiz-content .o-wall-rank .odq-quiz-button i{padding:0;font-size:16px;}

/* Pulsante flottante "La tua Area": stile del mockup (viola brand, pill, ombra morbida).
   Sovrascrive lo stile inline "essenziale" (blu) attaccato a o-main. */
#o-dashboard-toggle a.o-dashboard-open,
#o-dashboard-toggle a.o-dashboard-close{
	background:var(--brand-purple,#7a3ff2) !important;color:#fff !important;
	padding:13px 22px !important;border-radius:999px !important;gap:10px !important;
	font-weight:700 !important;font-size:15px !important;
	/* Anello bianco (1° layer) → stacca il pulsante dal footer blu quando ci finisce sopra. */
	box-shadow:0 0 0 3px #fff,0 10px 26px rgba(122,63,242,.42) !important;
	transition:transform .14s ease,box-shadow .14s ease !important;
}
#o-dashboard-toggle a:hover{transform:translateY(-2px);box-shadow:0 0 0 3px #fff,0 14px 34px rgba(122,63,242,.5) !important;}
/* Su iPhone la barra di Safari mangia i 20px del `bottom` essenziale e il pulsante finisce
   a filo dei tasti del browser: teniamo conto della safe area. Niente `!important`, così la
   regola `:has(~ #o-dashboard.in)` qui sotto (0,2,0) resta libera di rimetterlo in alto. */
#o-dashboard-toggle{bottom:calc(20px + env(safe-area-inset-bottom,0px));}
/* La barra "Valuta OneDayQuiz" è fissa in fondo e su mobile è larga quanto lo schermo:
   il pulsante flottante ci finiva sopra, coprendo commento e "Ricordamelo più tardi".
   Finché la barra è a video il pulsante si ritira (`odq-rate-open`, messa dal JS).
   ⚠️ Escluso il caso sidebar APERTA: lì il toggle è la X di chiusura e nasconderla
   lascerebbe il pannello senza via d'uscita. */
body.odq-rate-open #o-dashboard-toggle:not(:has(~ #o-dashboard.in)){display:none !important;}

/* --- "La tua Area" in testata (mobile) ------------------------------------------
   Il gemello del flottante, reso da ODQ_Frontend::header_dashboard_trigger() nello
   slot `odq_header_extra` del child theme. Sta dentro l'header sticky, quindi non ha
   bisogno di sapere nulla di admin-bar o safe-area.
   ⚠️ `display` senza !important: il JS lo scrive inline (vedi il commento in PHP). */
.odq-header__area{
	/* Il logo è `flex:1 1 auto` sotto i 1024px: si prende lo spazio libero e spinge
	   questo pulsante e l'hamburger a destra. Non serve nessun margin:auto. */
	display:block;flex:none;margin-right:14px;
	height:42px;line-height:42px;padding:0 15px 0 12px;text-align:center;
	border-radius:999px;background:var(--brand-purple,#7a3ff2);color:#fff;
	font-family:"Montserrat",sans-serif;font-size:14px;font-weight:600;white-space:nowrap;
	box-shadow:0 4px 12px rgba(122,63,242,.34);
	transition:transform .14s ease,box-shadow .14s ease;
}
/* ⚠️ `:visited` alla stessa specificità, non è pignoleria: l'href è `#`, che risolve
   sull'URL corrente ed è quindi VISITATO. Senza questa riga il globale `a:visited`
   (0,1,1) di kit.css batte la classe (0,1,0) e tinge di blu il testo bianco sul viola.
   Col solo glifo il difetto era invisibile a occhio; con l'etichetta si vedrebbe. */
.odq-header__area:visited,.odq-header__area:hover,.odq-header__area:focus{
	color:#fff;
}
.odq-header__area:hover,.odq-header__area:focus{
	transform:translateY(-1px);box-shadow:0 7px 18px rgba(122,63,242,.44);
}
/* Icona ed etichetta stanno IN LINEA dentro un blocco (niente flex: vedi il commento in
   header_dashboard_trigger(), il JS riscrive `display:block` alla chiusura). */
.odq-header__area i{font-size:17px;vertical-align:middle;margin-right:6px;}
.odq-header__area-label{vertical-align:middle;}
/* Sopra il breakpoint dell'header (1024px) comanda il flottante, sotto la testata.
   Qui l'!important è sicuro: sono stati fissi, il JS non ci gioca contro. */
@media(min-width:1025px){
	.odq-header__area{display:none !important;}
}
@media(max-width:1024px){
	#o-dashboard-toggle a.o-dashboard-open{display:none !important;}
}
/* margin-right (non solo `gap`): il JS forza `display:block` inline sul toggle
   (odq-utilities.js) togliendo il flex → senza margin l'icona si attaccava al testo. */
#o-dashboard-toggle a i{font-size:17px !important;margin-right:8px !important;}
/* Con la dashboard APERTA il toggle mostra "Chiudi": lo trasformiamo in una X tonda (senza
   testo) all'angolo in ALTO del PANNELLO (ancorato a destra). Il pannello NON copre
   tutto lo schermo su desktop (400px) → la X va appena fuori dal suo bordo sinistro, sul backdrop.
   ⚠️ TUTTO scopato a `:has(~ #o-dashboard.in)`: a sidebar CHIUSA la regola non si applica, così
   l'inline `display:none` (JS) tiene nascosta la X — prima `display:flex` la mostrava sempre. */
#o-dashboard-toggle:has(~ #o-dashboard.in){
	/* Mobile: il pannello è a tutta larghezza, quindi la X è per forza DENTRO. A sinistra
	   cadeva esattamente sull'avatar dell'utente → angolo alto-DESTRA, dove la testata è
	   vuota (il padding-right qui sotto tiene i nomi lunghi fuori dai piedi). */
	top:79px;bottom:auto;right:14px;left:auto;
}
@media(max-width:767px){
	#o-dashboard.in .o-dashboard-head{padding-right:74px !important;}
}
@media(min-width:768px){                                /* tablet: pannello 30% a destra → appena fuori dal suo bordo sx */
	#o-dashboard-toggle:has(~ #o-dashboard.in){left:auto;right:calc(30% + 10px);}
}
@media(min-width:1024px){                               /* desktop: pannello min(400px,92vw) → appena fuori dal suo bordo sx */
	#o-dashboard-toggle:has(~ #o-dashboard.in){right:calc(min(400px,92vw) + 10px);}
}
/* Il "Chiudi" → cerchio con la sola X (il JS forza display:block inline → serve !important). */
#o-dashboard-toggle:has(~ #o-dashboard.in) a.o-dashboard-close{
	display:flex !important;align-items:center;justify-content:center;
	width:48px !important;height:48px !important;padding:0 !important;gap:0 !important;border-radius:50% !important;
}
#o-dashboard-toggle:has(~ #o-dashboard.in) a.o-dashboard-close span{display:none !important;}
#o-dashboard-toggle:has(~ #o-dashboard.in) a.o-dashboard-close i{margin:0 !important;font-size:20px !important;}

/* ⚠️ Con un pannello dinamico aperto la X della sidebar va SOTTO il pannello.
   Il toggle sta a `top:79px;right:14px` con z-index 1000000 (stile inline di
   frontend.php::enqueue), il bottone chiudi del pannello a `top:10px;right:10px`
   del suo contenuto, che parte da `top:67px`: cadono nello stesso punto, e vinceva
   sempre il toggle — la X viola copriva la X del pannello, cioè l'unico modo di
   chiuderlo. Sotto al pannello (che è opaco e a tutta larghezza) il toggle sparisce
   finché serve, e torna appena il pannello si chiude: nessuna via d'uscita
   persa. `body:has(…)` e non `:has(~ …)` perché nel DOM i pannelli vengono PRIMA del
   toggle (mount_dashboard) e il combinatore fratello guarda solo in avanti. */
body:has(#o-dynamic.in) #o-dashboard-toggle,
body:has(#o-dynamic-sub.in) #o-dashboard-toggle{z-index:9998 !important;}

/* Backdrop scuro quando la dashboard è aperta: dà profondità e serve da area "clic fuori"
   (il JS aggiunge/rimuove .o-dashboard-backdrop e chiude cliccando fuori dal pannello).
   z-index 998 = sotto il pannello (999) e sotto il toggle/X (1000000). */
.o-dashboard-backdrop{
	position:fixed;inset:0;z-index:998;
	background:rgba(18,15,34,.5);
	-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
	animation:odqDashFade .2s ease;
}
@keyframes odqDashFade{from{opacity:0;}to{opacity:1;}}

/* ============================ 8 · PANNELLO "LA TUA AREA" (sidebar) === */
/* Off-canvas #o-dashboard (quiz-dashboard.php): head utente (AJAX) + nav top +
   ricerca + menu accordion (dashMain) + nav bottom. È position:fixed FUORI da
   .odq-quiz-content → i token --q-* vanno ridichiarati qui. Da pannello grigio
   "essenziale" (h3 barre nere, righe con border-left blu, plan badge nero) a
   drawer bianco a card nel linguaggio del restyle. Solo CSS: markup invariato. */
#o-dashboard{
	--q-ink:#1b1830;--q-body:#2b2840;--q-muted:#6a6680;--q-line:rgba(27,24,48,.1);
	--q-surface:#fff;--q-surface-2:#f4f2fb;--q-ground:#f6f4fb;
	--q-blue:var(--brand-blue,#2181c1);--q-purple:var(--brand-purple,#7a3ff2);--q-gold:#e0a94a;
	--q-serif:'Iowan Old Style','Palatino Linotype',Georgia,'Times New Roman',serif;
	--q-sans:"Montserrat",system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
	background:var(--q-ground) !important;padding:0 !important;font-family:var(--q-sans);
	box-shadow:-18px 0 46px rgba(27,24,48,.16);
}
/* Drawer più stretto e leggibile su desktop (era 30% → largo e semivuoto). */
@media (min-width:1024px){
	#o-dashboard{width:400px !important;max-width:92vw;}
	#o-dashboard.out{right:-420px !important;}
}

/* ---- HEAD utente (avatar + plan + nome + rank/score) ---- */
#o-dashboard .o-dashboard-head{
	display:flex !important;align-items:center;gap:16px;width:auto !important;
	padding:26px 20px 22px !important;border-bottom:1px solid var(--q-line);
	background:linear-gradient(160deg,rgba(122,63,242,.12),rgba(33,129,193,.10)) !important;
}
#o-dashboard .o-avatar{
	float:none !important;width:64px !important;height:64px;flex:none;border-radius:50%;overflow:hidden;
	background:var(--q-surface);border:3px solid #fff;box-shadow:0 4px 12px rgba(52,40,110,.18);
}
#o-dashboard .o-avatar img,#o-dashboard .o-avatar svg{width:100% !important;height:100% !important;object-fit:cover;display:block;padding:0 !important;}
#o-dashboard .o-dashboard-info{float:none !important;width:auto !important;flex:1;min-width:0;padding-left:0 !important;}
#o-dashboard .o-dashboard-info .o-dash-user{
	margin:8px 0 8px !important;font-family:var(--q-serif);font-weight:700;
	font-size:19px !important;line-height:1.1 !important;color:var(--q-ink);
}
#o-dashboard .o-user-plan{
	display:inline-flex;align-items:center;gap:5px;text-transform:uppercase;letter-spacing:.08em;
	background:rgba(122,63,242,.14) !important;color:var(--q-purple) !important;
	font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:999px;
}
#o-dashboard .o-user-plan.plan-premium,#o-dashboard .o-user-plan.premium{background:rgba(224,169,74,.20) !important;color:#b57d16 !important;}
#o-dashboard .o-user-plan i{font-size:13px;margin:0 !important;vertical-align:0;}
#o-dashboard .o-dashboard-info .dash-rank,#o-dashboard .o-dashboard-info .dash-score{
	font-weight:800;color:var(--q-ink);font-variant-numeric:tabular-nums;
}
#o-dashboard .o-dashboard-info .dash-rank{border-right:0 !important;padding:0 12px 0 4px !important;}
#o-dashboard .o-dashboard-info .icon-star{padding:0 0 0 4px !important;}

/* ---- NAV TOP (Bacheca / Account / Guida / Premium) → tile a icona ---- */
#o-dashboard .o-dashboard-nav{display:flex !important;gap:8px;margin:0 !important;padding:16px 20px 6px !important;}
#o-dashboard .o-dashboard-nav li{float:none !important;width:auto !important;margin:0 !important;flex:1;list-style:none;text-align:center;}
#o-dashboard .o-dashboard-nav li a{
	display:flex !important;flex-direction:column;align-items:center;gap:6px;
	background:var(--q-surface) !important;border:1px solid var(--q-line);border-radius:12px;
	padding:12px 6px !important;color:var(--q-body) !important;
	transition:transform .14s ease,border-color .14s ease,color .14s ease;
}
#o-dashboard .o-dashboard-nav li a:hover{color:var(--q-purple) !important;border-color:var(--q-purple);transform:translateY(-2px);margin:0 !important;padding:12px 6px !important;}
#o-dashboard .o-dashboard-nav li a i{display:block;font-size:19px;}
#o-dashboard .o-dashboard-nav li a span{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;}
#o-dashboard .o-dashboard-nav li a.plan-premium{background:rgba(224,169,74,.14) !important;border-color:rgba(224,169,74,.42);color:#b57d16 !important;}
#o-dashboard .o-dashboard-nav li a.plan-premium:hover{color:#946213 !important;border-color:#b57d16;}
/* Ospite (30/09/2026): la riga ha la sola «Guida». Una tessera sola a tutta larghezza con
   l'icona sopra sembrava un pulsante vuoto: icona e testo sulla stessa riga. */
#o-dashboard .o-dashboard-nav--guest li a{display:flex !important;flex-direction:row !important;align-items:center;justify-content:center;gap:8px;}
#o-dashboard .o-dashboard-nav--guest li a i{display:inline-block;font-size:17px;}

/* ---- RICERCA (AjaxSearchLite) → tocco leggero: margine + niente overflow ---- */
#o-dashboard #ajaxsearchlite1,#o-dashboard div.asl_w_container{margin:8px 20px 4px !important;width:auto !important;box-sizing:border-box;}
#o-dashboard div.asl_w .probox{border-radius:12px !important;}

/* ---- MENU accordion (dashMain) ---- */
#o-dashboard .o-dashboard-main{clear:none !important;padding:6px 0 0 !important;}
/* Titoli sezione: da barra nera centrata a etichetta muta a sinistra.
   Fase 1.2: erano <h3>, ora <p class="o-dash-sec"> — heading di navigazione fuori
   dalla gerarchia di contenuto. */
#o-dashboard .o-dashboard-main > .o-dash-sec,#o-dashboard .o-dashboard-collection > .o-dash-sec{
	background:transparent !important;color:var(--q-muted) !important;text-align:left !important;
	font-family:var(--q-sans);font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
	padding:18px 20px 6px !important;margin:0 !important;
}
#o-dashboard .o-dashboard-main ul,#o-dashboard .o-dashboard-collection ul{margin:0 !important;padding:0 !important;}
/* Righe: da blocco bianco con border-left blu a riga arrotondata con hover tint. */
#o-dashboard .o-dashboard-main ul li span,#o-dashboard .o-dashboard-collection ul li span{
	display:flex !important;align-items:center;gap:10px;margin:0 10px !important;padding:12px !important;
	background:transparent !important;border-left:0 !important;border-radius:10px;
	font-family:var(--q-sans);font-weight:600 !important;font-size:14.5px !important;color:var(--q-body) !important;
	transition:background .12s ease,color .12s ease;
}
#o-dashboard .o-dashboard-main ul li span:hover,#o-dashboard .o-dashboard-main ul li span.active,
#o-dashboard .o-dashboard-collection ul li span:hover,#o-dashboard .o-dashboard-collection ul li span.active{
	background:var(--q-surface-2) !important;border-left:0 !important;color:var(--q-ink) !important;
}
/* Riga attiva: tint + accento viola netto a sinistra (pseudo-barra arrotondata). */
#o-dashboard .o-dashboard-main ul li span.active{position:relative;}
#o-dashboard .o-dashboard-main ul li span.active::before{
	content:"";position:absolute;left:-4px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--q-purple);
}
#o-dashboard .o-dashboard-main ul li span.active i{color:var(--q-purple);}
#o-dashboard .o-dashboard-main ul li span i,#o-dashboard .o-dashboard-collection ul li span i{padding:0 !important;flex:none;font-size:17px;color:var(--q-purple);}
/* Counter → pill viola compatto (nasconde se vuoto). */
#o-dashboard .o-counter-label{
	float:none !important;margin-left:auto !important;display:inline-flex;align-items:center;justify-content:center;
	min-width:22px;height:20px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:800;
	background:rgba(122,63,242,.14) !important;color:var(--q-purple) !important;
}
#o-dashboard .o-counter-label:empty{display:none !important;}
#o-dashboard .counter-badges:not(:empty){background:rgba(224,169,74,.20) !important;color:#b57d16 !important;}
/* Accordion chevron. */
#o-dashboard .o-accordion .o-accordion-icon{float:none !important;margin-left:auto;padding:0 !important;}
#o-dashboard .o-accordion span .o-counter-label + .o-accordion-icon{margin-left:8px;}
#o-dashboard .o-accordion .o-accordion-icon i{display:block;color:var(--q-muted);font-size:14px;}
/* Sotto-liste (tipologie/materie/collezioni/bonus). */
#o-dashboard .o-accordion ul{padding-left:0 !important;}
#o-dashboard .o-accordion ul li span{margin:0 10px 0 22px !important;padding:9px 12px !important;font-size:13.5px !important;color:var(--q-muted) !important;}
#o-dashboard .o-accordion ul li span i{font-size:13px;color:var(--q-muted);}
#o-dashboard .o-accordion ul li span:hover{color:var(--q-ink) !important;}
/* Righe o-link (Home Page, English version, …): stessa resa della riga span. */
#o-dashboard .o-dashboard-main ul li a.o-link{display:block;color:inherit;}

/* ---- NAV BOTTOM (Segnala / Novità / Valuta / Logout) ---- */
#o-dashboard .o-dashboard-nav-bottom{
	display:flex !important;gap:8px;margin:10px 0 0 !important;padding:12px 20px 30px !important;
	border-top:1px solid var(--q-line);
}
#o-dashboard .o-dashboard-nav-bottom li{float:none !important;width:auto !important;flex:1;padding-bottom:0 !important;list-style:none;text-align:center;}
#o-dashboard .o-dashboard-nav-bottom li a{
	display:flex !important;flex-direction:column;align-items:center;gap:6px;
	background:transparent !important;border:0 !important;border-radius:10px;padding:9px 4px !important;color:var(--q-muted) !important;
	transition:background .12s ease,color .12s ease;
}
#o-dashboard .o-dashboard-nav-bottom li a:hover{background:var(--q-surface-2) !important;color:var(--q-purple) !important;margin:0 !important;transform:none;}
#o-dashboard .o-dashboard-nav-bottom li a i{display:block;font-size:17px;}
#o-dashboard .o-dashboard-nav-bottom li a span{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;}
#o-dashboard .o-dashboard-nav-bottom li:last-child a:hover{color:#e23b2e !important;}

/* ============================ 9 · PANNELLI DINAMICI (#o-dynamic) === */
/* Overlay slide-in (odq-components.js dynamicOpen) che mostrano classifiche
   (rank_show), pagella (schoolReport), posizioni (rank_personal), traguardi
   (badges), qualifiche (certificates), collezioni (quiz_showQuizCollection).
   Sono FUORI da #content: in frontend.php::inject() ai loro `-content` è stata
   aggiunta la classe `odq-quiz-content` → Blocchi 4/5/7 fanno da base; qui i
   selettori `#o-dynamic*` (specificità id → battono `.odq-quiz-content …`)
   rifiniscono la chrome del pannello e i componenti bespoke. Comportamento
   (slide-in, larghezze .in/.in-sub) INVARIATO: solo aspetto. */
#o-dynamic,#o-dynamic-sub{
	--q-ink:#1b1830;--q-body:#2b2840;--q-muted:#6a6680;--q-line:rgba(27,24,48,.1);
	--q-surface:#fff;--q-surface-2:#f4f2fb;--q-ground:#f6f4fb;
	--q-blue:var(--brand-blue,#2181c1);--q-purple:var(--brand-purple,#7a3ff2);--q-gold:#e0a94a;
	--q-serif:'Iowan Old Style','Palatino Linotype',Georgia,'Times New Roman',serif;
	--q-sans:"Montserrat",system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
	background:var(--q-ground) !important;font-family:var(--q-sans);
}
#o-dynamic{box-shadow:18px 0 46px rgba(27,24,48,.14);}
#o-dynamic-sub{border-right:1px solid var(--q-line) !important;box-shadow:18px 0 46px rgba(27,24,48,.16);}
/* Contenuto: colonna leggibile e centrata (l'overlay resta full-width). */
#o-dynamic-content,#o-dynamic-sub-content{padding:clamp(18px,3vw,34px) !important;}


/* Titoli di pannello (h2 ripetuti: "La tua Pagella", "Classifica …", gruppi badge). */
#o-dynamic h2,#o-dynamic-sub h2{
	position:relative;display:block !important;background:none !important;border:0 !important;
	font-family:var(--q-serif);font-weight:700;font-size:clamp(20px,2.4vw,26px);color:var(--q-ink);
	letter-spacing:-.3px;line-height:1.15;margin:6px auto 20px !important;padding:0 0 12px !important;max-width:920px;
}
#o-dynamic h2::after,#o-dynamic-sub h2::after{
	content:"";position:absolute;left:0;bottom:0;width:52px;height:3px;border-radius:3px;
	background:linear-gradient(90deg,var(--q-purple),var(--q-blue));
}
/* h2 non-primo (gruppi badge successivi): più spazio sopra. */
#o-dynamic h2 ~ h2{margin-top:30px !important;}
/* Sottotitolo "Top N" della classifica (div inline dentro l'h2 di rankTable). */
#o-dynamic h2 > div{
	display:inline-block;margin-top:10px;font-family:var(--q-sans) !important;font-size:11.5px !important;
	font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--q-muted);
	background:var(--q-surface-2);padding:4px 11px;border-radius:999px;
}

/* Bottone chiudi / refresh (prepend del JS: .o-button.close / .refresh-data). */
#o-dynamic .o-button.close,#o-dynamic-sub .o-button.close,
#o-dynamic .o-button.refresh-data,#o-dynamic-sub .o-button.refresh-data{
	display:inline-flex !important;align-items:center;justify-content:center;width:40px;height:40px;padding:0 !important;
	background:var(--q-surface) !important;border:1px solid var(--q-line) !important;border-radius:50% !important;
	color:var(--q-muted) !important;box-shadow:0 4px 12px rgba(27,24,48,.10);cursor:pointer;z-index:5;
	transition:color .12s ease,border-color .12s ease,transform .12s ease;
}
#o-dynamic .o-button.close:hover,#o-dynamic-sub .o-button.close:hover{color:#e23b2e !important;border-color:#e23b2e;transform:rotate(90deg);}
#o-dynamic .o-button.refresh-data:hover{color:var(--q-purple) !important;border-color:var(--q-purple);}
#o-dynamic .o-button.close:before,#o-dynamic-sub .o-button.close:before{font-size:15px;}
#o-dynamic .o-button.refresh-data:before{font-size:15px;}

/* ---- COLLEZIONI nel pannello (li = .product.o-collection-card, senza il wrapper
   .o-quiz-collections del wall → replico qui il frame-card del Blocco 5). ---- */
#o-dynamic .o-collection-card,#o-dynamic-sub .o-collection-card{
	float:none !important;width:auto !important;margin:0 !important;padding:0 0 14px !important;
	background:var(--q-surface) !important;border:1px solid var(--q-line) !important;border-radius:16px !important;overflow:hidden;
	display:flex;flex-direction:column;text-align:center;
	box-shadow:0 2px 4px rgba(27,24,48,.05),0 10px 24px rgba(52,40,110,.10) !important;
	transition:transform .16s ease,box-shadow .16s ease;
}
#o-dynamic .o-collection-card:hover{transform:translateY(-4px);box-shadow:0 8px 16px rgba(27,24,48,.08),0 18px 36px rgba(52,40,110,.16) !important;}
/* Il titolo della card ORA SI VEDE (2026-09-07), ma qui dentro va difeso dai titoli di
   pannello: `#o-dynamic h2` (specificità 1,0,1) impone serif 20-26px, margini !important e
   un sottolineato a gradiente in ::after. Queste due regole (1,1,1 e 1,1,2) lo riportano
   allo stile card della bacheca. Le proprietà non ridichiarate le eredita dal blocco
   `.odq-quiz-content .o-collection-link > h2`, che vale anche qui perché
   #o-dynamic-content ha la classe `odq-quiz-content`. */
#o-dynamic .o-collection-link > h2,#o-dynamic-sub .o-collection-link > h2{
	/* `display` va ridichiarato: `#o-dynamic h2{display:block!important}` ha un ID e batte
	   comunque il blocco `.odq-quiz-content …` qui sopra, quindi senza questa riga il
	   troncamento a due righe nel pannello non si applica (ed è proprio dove la card è
	   più stretta e i titoli lunghi vanno a capo). */
	display:-webkit-box !important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
	font-family:var(--q-sans) !important;font-size:16px !important;font-weight:700;
	line-height:1.25 !important;letter-spacing:-.2px;
	margin:12px 14px 0 !important;padding:0 !important;max-width:none;
}
#o-dynamic .o-collection-link > h2::after,#o-dynamic-sub .o-collection-link > h2::after{content:none;}
/* Il JS forza inline `width:46%` sui .products li: lo neutralizziamo (griglia dal Blocco 5). */
#o-dynamic .o-collections-list .product{width:auto !important;}

/* ---- PAGELLA dinamica: tabella 4-col .odq-quiz-pagella (diversa dal wall). ---- */
#o-dynamic .odq-quiz-pagella{
	width:100%;border-collapse:separate;border-spacing:0;margin:0 auto;max-width:920px;
	background:var(--q-surface);border:1px solid var(--q-line);border-radius:16px;overflow:hidden;
	box-shadow:0 2px 4px rgba(27,24,48,.05),0 10px 24px rgba(52,40,110,.08);
	/* table-layout:fixed → le 4 colonne restano dentro la larghezza del pannello
	   (senza, il min-content deborda su mobile 375 e il pannello lo taglia). */
	table-layout:fixed;
}
#o-dynamic .odq-quiz-pagella th{
	background:var(--q-surface-2) !important;color:var(--q-muted) !important;text-align:left;
	font-family:var(--q-sans);font-weight:800;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
	padding:12px 14px !important;border:0 !important;height:auto;
}
#o-dynamic .odq-quiz-pagella th i{color:var(--q-purple);margin-right:5px;}
#o-dynamic .odq-quiz-pagella th span{display:inline;font-size:inherit;}
#o-dynamic .odq-quiz-pagella td{
	border:0 !important;border-top:1px solid var(--q-line) !important;padding:10px 14px !important;
	text-align:left;text-transform:none;font-size:14px;font-weight:600;color:var(--q-body);
	height:auto !important;font-variant-numeric:tabular-nums;vertical-align:middle;
}
/* NB: NON azzerare il background sulla cella-voto, altrimenti (specificità 1,2,1)
   ucciderebbe le classi `.odq-*-score-bg` del motore (0,1,0) → testo bianco su bianco. */
#o-dynamic .odq-quiz-pagella td:not(.odq-pagella-average){background:transparent !important;}
#o-dynamic .odq-quiz-pagella td svg{display:inline-block !important;width:26px !important;height:26px !important;min-height:0 !important;margin:0 8px 0 0 !important;vertical-align:middle;}
#o-dynamic .odq-quiz-pagella td span{display:inline;text-transform:capitalize;color:var(--q-ink);font-weight:700;}
#o-dynamic .odq-quiz-pagella td:not(:first-child){text-align:center;}
/* Voto pagella: la cella prende `odq-*-score-bg` dal motore (background !important):
   basta rendere il testo bianco e togliere il bordo bianco del motore. */
#o-dynamic .odq-quiz-pagella td.odq-pagella-average{
	color:#fff !important;border:0 !important;border-top:1px solid var(--q-line) !important;
	font-weight:800;font-size:14px;text-align:center;
}
/* Riga "Globale" (ultima): risalta. */
#o-dynamic .odq-quiz-pagella tr:last-child td{border-top:2px solid var(--q-line) !important;font-weight:800;color:var(--q-ink);}
/* Mobile stretto: compatta la pagella 4-col così resta leggibile a 25%/colonna. */
@media (max-width:560px){
	#o-dynamic .odq-quiz-pagella th{padding:9px 6px !important;font-size:9px !important;letter-spacing:0;}
	#o-dynamic .odq-quiz-pagella th i{margin-right:3px;}
	#o-dynamic .odq-quiz-pagella td{padding:9px 6px !important;font-size:12px;}
	#o-dynamic .odq-quiz-pagella td span{font-size:12px;word-break:break-word;}
	#o-dynamic .odq-quiz-pagella td:first-child{white-space:normal;}

	/* ---- Colonna materia: icona SOPRA, nome SOTTO, sempre ----
	   Le quattro colonne del motore sono al 25% fisso: la materia si ritrovava ~70px
	   utili e il nome andava a capo solo quando era lungo ("Matematic|a",
	   "Videogioc|hi", "Astronomi|a"), mentre "Arte" e "Calcio" restavano in linea →
	   colonna mista, che è la cosa che si nota. Impilare risolve la disomogeneità e
	   dà al nome tutta la larghezza della cella. */
	#o-dynamic .odq-quiz-pagella th:first-child,
	#o-dynamic .odq-quiz-pagella td:first-child{text-align:center;}
	#o-dynamic .odq-quiz-pagella td:first-child svg{
		display:block !important;width:22px !important;height:22px !important;
		margin:0 auto 3px !important;
	}
	#o-dynamic .odq-quiz-pagella td:first-child span{display:block;word-break:normal;}

	/* ---- Larghezze: il voto è al massimo due cifre ("10"), non gli serve un quarto
	   della tabella. Quello che si toglie a lui e alle due colonne numeriche va tutto
	   alla materia, che passa da ~70 a ~155px utili: nessun nome si spezza più. ---- */
	/* Le misure sono prese col canvas sul font vero (Montserrat 800 9px), non a occhio:
	   "COMPLETATI" 62px, "PUNTEGGIO" 58, "PAGELLA"/"GLOBALE" 46, più 12 di padding.
	   Sotto quelle soglie l'etichetta si sillabava ("COMPLE-TATI") e si leggeva peggio. */
	#o-dynamic .odq-quiz-pagella th:nth-child(2),
	#o-dynamic .odq-quiz-pagella td:nth-child(2){width:78px;}
	#o-dynamic .odq-quiz-pagella th:nth-child(3),
	#o-dynamic .odq-quiz-pagella td:nth-child(3){width:74px;}
	#o-dynamic .odq-quiz-pagella th:last-child,
	#o-dynamic .odq-quiz-pagella td:last-child{width:62px;}
	#o-dynamic .odq-quiz-pagella th:first-child,
	#o-dynamic .odq-quiz-pagella td:first-child{width:calc(100% - 214px);}
	/* Le etichette hanno bisogno di tutto lo spazio: via le icone, e le parole che
	   non ci stanno vanno a capo invece di sbordare nella colonna vicina — a colonne
	   strette "COMPLETATI"/"PUNTEGGIO" uscivano dalla cella e finivano sotto al testo
	   della successiva. Le larghezze qui sopra sono tarate perché non serva quasi mai. */
	#o-dynamic .odq-quiz-pagella th i{display:none;}
	#o-dynamic .odq-quiz-pagella th{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;}
}

/* ---- CLASSIFICA QUALIFICHE: nove colonne, quindi scorre ----
   `.odq-table-scroll` è il wrapper che o-class-rank.php mette SOLO attorno a questa
   tabella. Serve un elemento a parte: il pannello è `overflow-x:hidden` e da solo si
   limitava a tagliare via le ultime colonne, senza modo di raggiungerle.
   Sotto i 560px la tabella prende un layout fisso con un `min-width`: le colonne
   restano leggibili (etichette per esteso, niente icone da indovinare) e si scorre di
   lato per le ultime. Sopra i 560px il min-width ci sta comodo e il wrapper è inerte. */
#o-dynamic .odq-table-scroll{
	max-width:920px;margin:0 auto;
	overflow-x:auto;-webkit-overflow-scrolling:touch;
	/* il bordo arrotondato della card viene dalla tabella: qui niente, o si taglierebbe */
	border-radius:16px;
}
/* Nelle Qualifiche l'ultima colonna è "Matricola", non il punteggio: il blu in grassetto
   della regola condivisa `td:last-child` finiva sul conteggio sbagliato. Va rimesso sulla
   colonna dei punti, che qui è la terza. */
#o-dynamic .odq-table-certificates td:last-child{color:var(--q-body);font-weight:600;}
#o-dynamic .odq-table-certificates td:nth-child(3){color:var(--q-blue);font-weight:800;}

/* Larghezze delle nove colonne. Anche qui layout fisso: senza, bastava un nome lungo a
   portare la tabella a 1109px e a farla scorrere pure su desktop, dove invece ci sta.
   Le sei qualifiche restano `auto` e si spartiscono in parti uguali quel che avanza —
   `width:auto` va detto, o si prendono il 33,333% che il motore mette su OGNI cella. */
#o-dynamic .odq-table-certificates{table-layout:fixed;}
#o-dynamic .odq-table-certificates th:first-child,
#o-dynamic .odq-table-certificates td:first-child{width:52px;}
#o-dynamic .odq-table-certificates th:nth-child(2),
#o-dynamic .odq-table-certificates td:nth-child(2){width:150px;}
#o-dynamic .odq-table-certificates td:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#o-dynamic .odq-table-certificates th:nth-child(3),
#o-dynamic .odq-table-certificates td:nth-child(3){width:84px;}
#o-dynamic .odq-table-certificates th:nth-child(n+4),
#o-dynamic .odq-table-certificates td:nth-child(n+4){width:auto;text-align:center;}
/* Le sei qualifiche si spartiscono ~88px a testa: con il corpo e le spaziature della
   classifica a tre colonne, "PROFESSORE" (76px) non ci stava e veniva TAGLIATO — sono
   parole singole, non hanno dove andare a capo. Corpo e padding ridotti quel tanto che
   basta perché tutte e sei stiano su una riga; `hyphens` resta come rete, non come piano. */
#o-dynamic .odq-table-certificates th{
	padding:10px 8px !important;font-size:9.5px;letter-spacing:0;
	overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;
}
#o-dynamic .odq-table-certificates td{padding:10px 8px !important;}
/* L'icona nell'intestazione costa ~18px, ed è esattamente quello che manca alle
   etichette per stare su una riga: resta solo dove sostituisce l'etichetta, cioè in
   "Posizione", che in 52px non entrerebbe comunque. */
#o-dynamic .odq-table-certificates th:not(:first-child) i{display:none;}
#o-dynamic .odq-table-certificates th:first-child span{display:none;}
@media (max-width:560px){
	#o-dynamic .odq-table-scroll .odq-table-certificates{
		/* 44 posizione + 130 nome + 70 punteggio + 6×78 qualifiche. I 78 vengono dalla
		   parola più lunga ("PROFESSORE", 65px misurati) più il padding: si è scelto di
		   tenere le etichette per esteso e far scorrere, invece di lasciare sei icone da
		   indovinare in colonne strette. Le misure vengono dal canvas sul font vero. */
		table-layout:fixed;min-width:742px;
	}
	#o-dynamic .odq-table-scroll .odq-table-certificates th,
	#o-dynamic .odq-table-scroll .odq-table-certificates td{padding:10px 6px !important;font-size:12px;}
	#o-dynamic .odq-table-scroll .odq-table-certificates th{
		font-size:9px;letter-spacing:0;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;
	}
	#o-dynamic .odq-table-scroll .odq-table-certificates th:first-child,
	#o-dynamic .odq-table-scroll .odq-table-certificates td:first-child{width:44px;}
	#o-dynamic .odq-table-scroll .odq-table-certificates th:nth-child(2),
	#o-dynamic .odq-table-scroll .odq-table-certificates td:nth-child(2){width:130px;}
	#o-dynamic .odq-table-scroll .odq-table-certificates td:nth-child(2){
		overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
	}
	#o-dynamic .odq-table-scroll .odq-table-certificates th:nth-child(3),
	#o-dynamic .odq-table-scroll .odq-table-certificates td:nth-child(3){width:76px;}
	/* le sei qualifiche: numeri a una cifra, l'etichetta è la parte larga */
	#o-dynamic .odq-table-scroll .odq-table-certificates th:nth-child(n+4),
	#o-dynamic .odq-table-scroll .odq-table-certificates td:nth-child(n+4){width:82px;text-align:center;}
}

/* ---- LE TUE POSIZIONI (rank_personal): panorama 5-col SENZA .odq-blocks wrapper
   → replico qui la resa a mini-card del Blocco 4 (best/worse eredita, è class-based). ---- */
#o-dynamic .odq-table-5cols{
	display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;width:100%;max-width:920px;margin:0 auto 8px;border-collapse:separate;
}
#o-dynamic .odq-table-5cols tbody,#o-dynamic .odq-table-5cols tr{display:contents;}
#o-dynamic .odq-table-5cols td{
	display:block;width:auto !important;padding:14px !important;border:1px solid var(--q-line) !important;border-radius:12px;
	background:var(--q-surface);text-transform:none;text-align:left;height:auto !important;
}
#o-dynamic .odq-table-5cols td > span{display:block;}
#o-dynamic .odq-table-5cols td svg{width:22px;height:22px;min-height:0;margin:0 0 8px;padding:7px;border-radius:10px;background:var(--q-surface-2);box-sizing:content-box;display:block;}
#o-dynamic .odq-table-5cols td .o-font-big{display:block;font-size:24px;color:var(--q-ink) !important;font-weight:800;line-height:1;margin-bottom:4px;}
#o-dynamic .odq-table-5cols td i{font-style:normal;font-size:11.5px;color:var(--q-muted);font-weight:600;}
@media (max-width:640px){#o-dynamic .odq-table-5cols{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ---- TRAGUARDI/BADGE: gruppi (h2) di tessere .odq-block-quiz-8 con immagine .rank_. ---- */
/* Lo <span> che avvolge le tessere di un gruppo → griglia responsiva (batte l'inline
   width:100% del markup). max-width per allinearsi al resto del contenuto. */
#o-dynamic span:has(> .odq-block-quiz-8){
	display:grid !important;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px;
	width:100% !important;max-width:920px;margin:0 auto;
}
/* Tessera: card compatta (vince sul card generico .odq-block del Blocco 4 per id). */
#o-dynamic .odq-block-quiz-8{
	width:auto !important;margin:0 !important;padding:10px !important;text-align:center;overflow:visible;
	background:var(--q-surface) !important;border:1px solid var(--q-line) !important;border-radius:14px !important;
	box-shadow:0 1px 2px rgba(27,24,48,.05) !important;
}
/* Icona badge (background-image): 250px → 88px. */
#o-dynamic .odq-block-quiz .rank_{height:88px !important;background-size:contain !important;background-repeat:no-repeat;background-position:center;}

/* ============================ 10 · RECENSIONI (bacheca, pubblico) === */
/* Sezione in fondo alla bacheca (utilReviewsSection): riepilogo media+stelle+
   distribuzione + testimonianze curate a quote-card. */
.odq-quiz-content .odq-reviews{margin:44px 0 52px;}
.odq-quiz-content .odq-reviews > h2{
	position:relative;font-family:var(--q-serif);font-weight:700;font-size:clamp(22px,2.6vw,28px);
	color:var(--q-ink);letter-spacing:-.3px;line-height:1.15;text-align:left;margin:0 0 22px;padding:0 0 12px;background:none !important;
}
.odq-quiz-content .odq-reviews > h2::after{
	content:"";position:absolute;left:0;bottom:0;width:52px;height:3px;border-radius:3px;
	background:linear-gradient(90deg,var(--q-purple),var(--q-blue));
}
/* Stelle (linearicons icon-star / -half / -empty). */
.odq-quiz-content .odq-reviews .icon-star,.odq-quiz-content .odq-reviews .icon-star-half{color:var(--q-score);}
.odq-quiz-content .odq-reviews .icon-star-empty{color:rgba(27,24,48,.18);}

/* --- Riepilogo: card con media (sx) + distribuzione (dx) --- */
.odq-quiz-content .odq-reviews-summary{
	display:flex;flex-wrap:wrap;align-items:center;gap:28px;
	background:var(--q-surface);border:1px solid var(--q-line);border-radius:16px;
	padding:22px 26px;box-shadow:0 2px 4px rgba(27,24,48,.05),0 10px 24px rgba(52,40,110,.08);
}
.odq-quiz-content .odq-reviews-avg{text-align:center;flex:0 0 auto;min-width:150px;}
.odq-quiz-content .odq-reviews-avg-num{font-family:var(--q-serif);font-weight:700;font-size:54px;line-height:1;color:var(--q-ink);}
.odq-quiz-content .odq-reviews-avg-stars{font-size:18px;letter-spacing:2px;margin:8px 0 6px;}
.odq-quiz-content .odq-reviews-avg-count{font-size:12.5px;color:var(--q-muted);font-weight:600;}
.odq-quiz-content .odq-reviews-dist{flex:1;min-width:220px;display:flex;flex-direction:column;gap:7px;}
.odq-quiz-content .odq-reviews-dist-row{display:flex;align-items:center;gap:10px;}
.odq-quiz-content .odq-reviews-dist-label{flex:0 0 auto;width:30px;font-size:12.5px;font-weight:700;color:var(--q-muted);display:inline-flex;align-items:center;gap:2px;font-variant-numeric:tabular-nums;}
.odq-quiz-content .odq-reviews-dist-label .icon-star{font-size:11px;color:var(--q-score);}
.odq-quiz-content .odq-reviews-dist-bar{flex:1;height:8px;border-radius:999px;background:var(--q-surface-2);overflow:hidden;}
.odq-quiz-content .odq-reviews-dist-bar > span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#f2b602,#e0a94a);}
.odq-quiz-content .odq-reviews-dist-n{flex:0 0 auto;width:26px;text-align:right;font-size:12px;color:var(--q-muted);font-weight:700;font-variant-numeric:tabular-nums;}

/* --- Testimonianze: griglia di quote-card --- */
.odq-quiz-content .odq-reviews-cards{
	display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:16px;
}
.odq-quiz-content .odq-review-card{
	display:flex;flex-direction:column;gap:10px;margin:0;padding:20px;
	background:var(--q-surface);border:1px solid var(--q-line);border-radius:16px;
	box-shadow:0 1px 2px rgba(27,24,48,.05);position:relative;
}
.odq-quiz-content .odq-review-card::before{
	content:"\201C";position:absolute;top:6px;right:16px;font-family:var(--q-serif);
	font-size:56px;line-height:1;color:rgba(122,63,242,.12);
}
.odq-quiz-content .odq-review-stars{font-size:14px;letter-spacing:1px;}
.odq-quiz-content .odq-review-card blockquote{
	margin:0;font-family:var(--q-serif);font-size:16px;line-height:1.45;color:var(--q-ink);
}
.odq-quiz-content .odq-review-card figcaption{
	margin-top:auto;font-family:var(--q-sans);font-size:12.5px;font-weight:700;color:var(--q-muted);
}
.odq-quiz-content .odq-review-card figcaption::before{content:"— ";color:var(--q-purple);}

@media (max-width:640px){
	.odq-quiz-content .odq-reviews-summary{gap:18px;padding:20px;}
	.odq-quiz-content .odq-reviews-avg{flex:1 1 100%;}
}

/* --- Curatela recensioni (solo admin): pannello strumento, distinto dal pubblico --- */
.odq-quiz-content .odq-reviews-admin{
	margin-top:28px;padding:18px 20px;border:1px dashed rgba(27,24,48,.22);border-radius:14px;
	background:repeating-linear-gradient(45deg,rgba(122,63,242,.03),rgba(122,63,242,.03) 10px,transparent 10px,transparent 20px);
}
.odq-quiz-content .odq-reviews-admin h3{
	font-family:var(--q-sans);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
	color:var(--q-ink);margin:0 0 4px;background:none !important;padding:0;
}
.odq-quiz-content .odq-reviews-admin h3 span{color:var(--q-muted);font-weight:700;letter-spacing:0;text-transform:none;}
.odq-quiz-content .odq-reviews-admin > p{font-family:var(--q-sans);font-size:12.5px;color:var(--q-muted);margin:0 0 12px;}
.odq-quiz-content .odq-radmin-row{
	display:flex;align-items:center;gap:12px;padding:8px 8px;border-top:1px solid var(--q-line);
}
.odq-quiz-content .odq-radmin-row.is-featured{background:rgba(122,63,242,.06);border-radius:8px;}
.odq-quiz-content .odq-radmin-toggle{
	flex:none;width:32px;height:32px;border:1px solid var(--q-line);border-radius:8px;background:var(--q-surface);
	cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s,transform .1s;
}
.odq-quiz-content .odq-radmin-toggle:hover{border-color:var(--q-score);transform:scale(1.06);}
.odq-quiz-content .odq-radmin-toggle:disabled{opacity:.5;cursor:default;}
.odq-quiz-content .odq-radmin-toggle .icon-star{color:var(--q-score);font-size:15px;}
.odq-quiz-content .odq-radmin-toggle .icon-star-empty{color:rgba(27,24,48,.3);font-size:15px;}
.odq-quiz-content .odq-radmin-rating{flex:none;width:34px;font-size:12px;font-weight:800;color:var(--q-score);font-variant-numeric:tabular-nums;}
.odq-quiz-content .odq-radmin-comment{flex:1;min-width:0;font-size:13.5px;color:var(--q-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.odq-quiz-content .odq-radmin-name{flex:none;max-width:130px;font-size:12px;font-weight:700;color:var(--q-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:640px){
	.odq-quiz-content .odq-radmin-comment{white-space:normal;}
	.odq-quiz-content .odq-radmin-name{display:none;}
}

/* ============================ 11 · PAGINA TIPOLOGIA / LISTA QUIZ === */
/* Vista `page_template='list'` (es. /giochi-quiz-online/giochi-a-quiz): la lista
   quiz `ul#o-quiz-list` (riempita via AJAX) + toolbar (loggato) + CTA anonimo +
   testo SEO (.o-text-content, solo anonimo). Il markup riga arriva da
   templates/sections/quiz-list.php (posizionamento assoluto/float): qui lo
   convertiamo a flex e ridisegniamo a card. Scope `.odq-quiz-content` per battere
   la catena base `ul#o-quiz-list li …`. */

/* ---- Contenitore: card unica arrotondata sul fondino violetto ---- */
.odq-quiz-content #o-quiz-list{
	list-style:none;
	margin:22px 0 0;
	padding:0 !important;
	background:var(--q-surface);
	border:1px solid var(--q-line);
	border-radius:18px;
	overflow:hidden;
	box-shadow:0 22px 46px -30px rgba(27,24,48,.55);
}


/* ---- Toolbar (loggato): random / mostra-nascondi / ordina ---- */







/* ---- Riga quiz: da block+assoluti a flex pulito ---- */




/* nascondi la barra-tipo ripetuta: l'identità-tipo è già nel numero colorato */


/* icona materia: da assoluta a tassello guida a sinistra */



/* numero quiz (colore = tipo, dal motore) */

/* nome materia (solo quiz non fatti) */


/* etichette inline */



/* chip punteggio (quiz fatto): da <strong> assoluto a chip in linea, spinto a dx */

/* Quiz LASCIATO: arancione, non rosso (il rosso resta agli errori). Il marker
   `odq-skipped-score-bg` è aggiunto da quiz-list.php accanto alla classe-voto del
   motore, che qui va battuta (`.odq-bad-score-bg{background:red !important}`).
   ⚠️ NON pieno: la fascia 4-5 punti del motore è `#ff6f00`, un arancione quasi
   identico → un lasciato e una risposta esatta mediocre sembravano la stessa cosa.
   Qui il chip è a CONTORNO: resta arancione ma non si confonde con un voto. */




/* stato a destra (freccia play / esito) */




/* stati riga */



/* fatto: bianco pieno, niente pattern a puntini */

/* bloccato (non fatto): tono spento, niente puntini */




/* ---- CTA anonimo "Accedi a più quiz": footer pieno della card ---- */





/* ---- Stato vuoto: "Nessun quiz con questi filtri!" ---- */



/* ---- Testo SEO (.o-text-content / .o-quiz-seocontent) — solo anonimo ---- */
.odq-quiz-content .o-text-content,
.odq-quiz-content .o-quiz-seocontent{
	background:var(--q-surface);
	border:1px solid var(--q-line);
	border-radius:18px;
	box-shadow:0 22px 46px -30px rgba(27,24,48,.5);
	padding:clamp(24px,4vw,46px) !important;
	margin-top:26px;
	font-family:var(--q-sans);
	color:var(--q-body);
	font-size:16.5px;line-height:1.78;
}
.odq-quiz-content .o-text-content > *:first-child{margin-top:0;}
.odq-quiz-content .o-text-content h2{
	font-family:var(--q-serif);font-weight:700;
	font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.15;letter-spacing:-.01em;
	color:var(--q-ink);margin:38px 0 14px;
}
.odq-quiz-content .o-text-content h3{
	font-family:var(--q-sans);font-weight:800;font-size:1.12rem;
	color:var(--q-ink);margin:26px 0 8px;
}
.odq-quiz-content .o-text-content p{margin:0 0 16px;}
.odq-quiz-content .o-text-content strong{color:var(--q-ink);font-weight:700;}
.odq-quiz-content .o-text-content a{
	color:var(--q-purple);text-decoration:underline;text-underline-offset:2px;
	text-decoration-thickness:1px;font-weight:600;
}
.odq-quiz-content .o-text-content a:hover{text-decoration-thickness:2px;}
.odq-quiz-content .o-text-content ul{margin:0 0 18px;padding:0;list-style:none;}
.odq-quiz-content .o-text-content ul li{
	position:relative;padding:0 0 0 26px;margin:0 0 9px;
}
.odq-quiz-content .o-text-content ul li:before{
	content:"";position:absolute;left:4px;top:11px;
	width:7px;height:7px;border-radius:50%;background:var(--q-purple);
}
.odq-quiz-content .o-text-content img{
	max-width:100%;height:auto;border-radius:14px;
	box-shadow:0 22px 40px -24px rgba(27,24,48,.5);margin:6px 0 22px;
}

/* ---- Responsive ---- */
@media (max-width:640px){
	
	
	
	.odq-quiz-content .o-text-content,.odq-quiz-content .o-quiz-seocontent{padding:22px 18px !important;}
}

/* ============ 11b · TIPOLOGIA loggato: filtri, toolbar, aiuti === */
/* Colore-sezione per pagina-tipo (cascata da #content.o-<tipo>): usato per lo
   stato attivo dei filtri e gli accenti. Fallback = viola brand (es. pagine-materia
   che hanno pageclass 'o-subject', senza colore-tipo). */
.o-classic{--q-type:#00c8cf;}
.o-visual{--q-type:#ffb000;}
.o-smart{--q-type:#ff7900;}
.o-si-o-no{--q-type:#9900cc;}
.o-clue{--q-type:#cc0a00;}
.o-audio{--q-type:#b98e63;}      /* audio reale #c9b9a1 troppo chiaro per testo bianco → scurito */
.o-zoom{--q-type:#20b2db;}
.o-indovina{--q-type:#02a01f;}
.o-visual2{--q-type:#e100c8;}

/* Fascia comandi (toolbar + filtri) a tinta UNICA: il fondino lavanda sta sulla
   card `#o-quiz-list` (solo quando c'è `#filters` = loggato), toolbar e #filters
   sono trasparenti sopra → un solo background, niente seam bianco tra i due blocchi.
   `:has` universale nei browser 2026; le righe (bianche a filo) coprono il resto. */
.odq-quiz-content #o-quiz-list:has(#filters){background:var(--q-surface-2);}

/* ---- Toolbar utilità (random / mostra-nascondi / ordina): strip sobria ---- */



 /* via il glifo lnr doppione (resta il :before) */

/* ---- Filtri Tutti / Fatti / Da fare: segmented control ---- */







/* ---- Riepilogo aiuti (.o-hint-list): da barra piena a card pulita ---- */
.odq-quiz-content .o-hint-list:empty{display:none;}
.odq-quiz-content .o-hint-list{
	background:var(--q-surface) !important;
	border:1px solid var(--q-line);
	border-radius:18px;
	box-shadow:0 22px 46px -30px rgba(27,24,48,.5);
	margin:22px 0 0 !important;
	padding:16px 20px 20px !important;
	overflow:visible;
	display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:16px 18px;
}
.odq-quiz-content .o-hint-list .odq-hint-title{
	flex:0 0 100%;text-align:center;
	font-family:var(--q-sans);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
	color:var(--q-muted);margin:0 0 4px;
}
.odq-quiz-content .o-hint-list .odq-hint-title:before{
	content:"\e62b";font-family:"Linearicons";font-weight:400;
	margin-right:7px;color:var(--q-type,var(--q-purple));font-size:14px;vertical-align:-1px;
}
.odq-quiz-content .o-hint-list > a{display:block;text-decoration:none;padding-bottom:9px;opacity:1;}
.odq-quiz-content .o-hint-list .odq-hint{
	width:46px;height:46px;border-radius:50%;margin:0;
	border:1px solid var(--q-line);
	background-color:var(--q-surface-2);
	background-size:contain;background-position:center;background-repeat:no-repeat;
	box-shadow:0 8px 16px -10px rgba(27,24,48,.45);
	transition:transform .12s ease;
}
.odq-quiz-content .o-hint-list > a:hover .odq-hint{transform:translateY(-2px);background-color:#fff;}
.odq-quiz-content .o-hint-list .odq-hint span{
	position:absolute;top:auto;left:50%;bottom:-8px;transform:translateX(-50%);
	min-width:20px;padding:1px 7px;
	background:var(--q-ink);color:#fff;
	font-family:var(--q-sans);font-weight:800;font-size:10.5px;line-height:1.5;
	border-radius:999px;text-shadow:none;text-align:center;
	box-shadow:0 2px 5px -1px rgba(27,24,48,.5);
}

/* ---- Responsive ---- */
@media (max-width:640px){
	
	
	.odq-quiz-content .o-hint-list{gap:14px 12px;padding:14px 14px 18px !important;}
	.odq-quiz-content .o-hint-list .odq-hint{width:42px;height:42px;}
}

/* ============================ 12 · QUIZ SINGOLO — PLAYER (gioco) === */
/* Il player `#quiz-content` è un modale fullscreen (position:fixed;inset:0;bg#333;z-index alto)
   dentro cui il JS mostra, in sequenza: intro-categoria (#odq-show-category) → domanda+risposte
   → risultato. Direzione: SCURO IMMERSIVO RAFFINATO. Sostituiamo il grigio piatto con un fondo
   ink/viola di marca, card arrotondate, tipografia curata, accento --q-type per tipo.
   Tutto CSS-only: NON tocchiamo id/struttura da cui dipende il JS (toggle display, .odq-bombed,
   click risposte, runner). Selettori con prefisso `.odq-quiz-content` per vincere sulla catena a
   soli-ID del motore anche se Breeze ricombina l'ordine dei file. */

/* --- accento per-tipo dentro il player (i marker di tipo sono su elementi foglia) --- */
.odq-quiz-content .odq-quiz-type-classic,.odq-quiz-content [class*="odq-quiz-type-classic"],.odq-quiz-content .odq-answer-classic{--q-type:#00c8cf;}
.odq-quiz-content .odq-quiz-type-visual,.odq-quiz-content [class*="odq-quiz-type-visual-"],.odq-quiz-content .odq-answer-visual{--q-type:#ffb000;}
.odq-quiz-content .odq-quiz-type-smart,.odq-quiz-content [class*="odq-quiz-type-smart"],.odq-quiz-content .odq-answer-smart{--q-type:#ff7900;}
.odq-quiz-content .odq-quiz-type-si-o-no,.odq-quiz-content [class*="odq-quiz-type-si-o-no"],.odq-quiz-content .odq-answer-si-o-no{--q-type:#9900cc;}
.odq-quiz-content .odq-quiz-type-clue,.odq-quiz-content [class*="odq-quiz-type-clue"],.odq-quiz-content .odq-answer-clue{--q-type:#cc0a00;}
.odq-quiz-content .odq-quiz-type-audio,.odq-quiz-content [class*="odq-quiz-type-audio"],.odq-quiz-content .odq-answer-audio{--q-type:#b98e63;}
.odq-quiz-content .odq-quiz-type-zoom,.odq-quiz-content [class*="odq-quiz-type-zoom"],.odq-quiz-content .odq-answer-zoom{--q-type:#20b2db;}
.odq-quiz-content .odq-quiz-type-indovina,.odq-quiz-content [class*="odq-quiz-type-indovina"],.odq-quiz-content .odq-answer-indovina{--q-type:#02a01f;}
.odq-quiz-content .odq-quiz-type-visual2,.odq-quiz-content [class*="odq-quiz-type-visual2"],.odq-quiz-content .odq-answer-visual2{--q-type:#e100c8;}

/* Marker DEDICATO per il RISULTATO (banner + tessere): serve solo a fissare --q-type sul tipo
   giocato. NON usare .odq-quiz-type-<tipo> sui contenitori risultato: il MOTORE ha una regola
   `.odq-quiz-type-<tipo>{background-color:<tinta> !important}` che tingerebbe di colore pieno il
   contenitore (fondo teal dietro le tessere + info-answer piena). Questo prefisso il motore non lo conosce. */
.odq-quiz-content .odq-rtype-classic{--q-type:#00c8cf;}
.odq-quiz-content .odq-rtype-visual{--q-type:#ffb000;}
.odq-quiz-content .odq-rtype-smart{--q-type:#ff7900;}
.odq-quiz-content .odq-rtype-si-o-no{--q-type:#9900cc;}
.odq-quiz-content .odq-rtype-clue{--q-type:#cc0a00;}
.odq-quiz-content .odq-rtype-audio{--q-type:#b98e63;}
.odq-quiz-content .odq-rtype-zoom{--q-type:#20b2db;}
.odq-quiz-content .odq-rtype-indovina{--q-type:#02a01f;}
.odq-quiz-content .odq-rtype-visual2{--q-type:#e100c8;}

/* box-sizing coerente: il motore assume content-box + padding grossi → le larghezze % sforano.
   Border-box su ciò che dimensioniamo nel player (scoped, niente effetti sul resto). */


/* --- chrome del player: fondo immersivo ink/viola --- */
.odq-quiz-content #quiz-content{
	background:radial-gradient(120% 120% at 50% -10%,#241f3d 0%,#17132a 55%,#120f22 100%) !important;
	padding:44px max(4%,18px) 64px !important;
	color:#fff;
}
/* L'intro-overlay #odq-show-category è a sua volta fixed;inset:0 e nel motore è OPACO (#333):
   copre la partita durante intro+countdown. DEVE restare opaco (stesso fondo del player),
   altrimenti il gioco sottostante traspare (bug "render strano" all'avvio). */


/* colonna di gioco centrata: su desktop largo il player è fullscreen → senza vincolo la
   domanda/risposte diventano illeggibilmente larghe. Colonna focalizzata max ~860px. */


/* ---------- A · INTRO / "PREPARATI" (categoria) ---------- */
/* icona-materia: da box #222 a badge circolare che "galleggia" sopra la card */




/* card categoria: da fondo pieno --q-type a card scura elevata con accento in alto */

/* sottotitolo tipo → chip kicker in accento */

/* spiegazione aiuti: righe pulite con chip tondo + testo */




/* pulsante Annulla: ghost su scuro (non più bottone bianco pieno) */

/* hover: MANTENERE translateX(-50%) (centraggio del motore) — non azzerarlo o il bottone scatta
   a destra e il click "manca". Niente scale, solo cambio-fondo. */



/* ---------- B · DOMANDA + TIMER ---------- */


/* timer: colonna accento a destra, numero grande */

/* #runner conta l'elapsed con decimali (es. "01.88") che cambia rapidamente: cifre a larghezza
   FISSA (tabular-nums) + box stabile → niente ri-centraggio per-frame (era la "vibrazione"). */



/* ---------- ONDA AUDIO (equalizzatore CSS) ----------
   Compare nel quiz audio durante il countdown iniziale (mentre parte l'audio), poi il
   motore la rimuove. Sostituisce il <lord-icon> Lottie, mai caricato nel main → era vuoto. */









@keyframes odqAudioWave{
	0%,100%{height:12px;opacity:.55;}
	50%{height:40px;opacity:1;}
}

/* ---------- B · AIUTI (bomb/nuclear ecc.) ---------- */




/* ---------- B · RISPOSTE (famiglia classic: classic/visual/audio/zoom/si-o-no) ---------- */
/* NB: smart/clue/indovina/visual2 hanno markup risposte diverso (tastiere/tessere) → NON toccati qui. */




/* stato "bombardata" (JS aggiunge .odq-bombed): card disattivata coerente col fondo */

/* miniatura immagine dentro le risposte (visual/zoom): è un flex-item accanto allo skip.
   La forziamo a RIGA PROPRIA (flex-basis 100%) così lo skip va a capo da solo: altrimenti
   miniatura+skip stanno sulla stessa riga e lo skip si stira all'altezza della miniatura
   (align-items:stretch) → bottone enorme. */



/* pulsante "salta" (skip): pill ghost su scuro, a tutta riga (da solo) sotto le risposte */




/* immagine (visual/zoom) sopra le risposte: cornice arrotondata */


/* ---------- B · TIPO "VISUAL2" (due immagini a confronto) ---------- */
/* Markup diverso dagli altri: `#visual2-quiz` con due `.o-cols.o-cols-2 >
   .odq-quiz-type-visual-large.type-visual2 > img`. Il motore mette float:left + `clear:both`
   sulle card → si IMPILAVANO a sinistra, con altezze diverse (immagini di orientamento
   diverso). Le portiamo a DUE TESSERE PARI affiancate e centrate, ritagliate a rapporto
   costante (object-fit:cover), con badge A/B e hover in accento --q-type (#e100c8). */

/* i due wrapper `.o-cols.o-cols-2` (float:left;width:46%): li neutralizziamo a flex-item 50% */

/* la card-immagine: kill `clear:both` (impilava) + cornice arrotondata a rapporto fisso 4/3.
   NB: la card ha classe `odq-quiz-type-visual-large`, che il selettore-token greedy
   `[class*="odq-quiz-type-visual-"]` (accento visual/zoom) intercetta forzandole
   `--q-type:#ffb000` (oro) → l'hover usciva oro invece del magenta visual2. Riasseriamo qui
   l'accento corretto (#e100c8, come `.o-visual2`) così bordo/glow hover sono coerenti. */


/* badge A / B (dal `data-answer`) in alto a sinistra: identifica le due scelte */

/* hover: lift + bordo/glow accento (NIENTE dim opacity:0.8 del motore) */



/* ---------- B · TIPO "INDIZI" (clue): tessere-indizio + campo risposta + OK ---------- */
/* Il clue ha markup diverso: la "domanda" è una griglia di tessere `#o-quiz-question ol li`
   (svelate/`?`) e la risposta è un input di testo `#clue-quiz > input + .key-enter(OK)`.
   Il nostro `#o-quiz-question{display:flex;align-items:center}` lasciava l'`ol` come flex-item
   che si restringe al contenuto → griglia stretta a sinistra. Forziamo l'`ol` a RIEMPIRE
   (flex-basis 100%) e gestiamo noi la griglia 3-col arrotondata (niente `:has`, non serve). */



/* campo risposta + OK: stessa altezza, arrotondati; lo skip va a riga propria (regola .odq-skip) */





/* ---------- B · tipi SMART (giochi-di-parole) e INDOVINA: caselle-risposta + tastiera ---------- */
/* Il player ha `color:#fff` (fondo scuro) → le caselle-risposta e i tasti-tastiera BIANCHI
   ereditavano testo bianco = LETTERE INVISIBILI. Ripristiniamo testo scuro sulle caselle bianche.
   La geometria della tastiera interattiva del motore resta (float 10%/riga): solo rifiniture. */

/* caselle-risposta: centrate, angoli morbidi, bordo un filo più marcato per leggibilità */


/* Caselle-lettera SEMPRE bianche, anche `disabled`. Il motore le disegna tutte
   `background:#fff`: il grigio non è mai stato una scelta, è Safari su iOS che grigia
   gli input disabilitati con `-webkit-text-fill-color` e un filo di opacità — `color`
   non lo batte (non è questione di !important: è proprio un'altra proprietà), quindi il
   `color:var(--q-ink)` qui sopra non arrivava a destinazione.
   Si vedeva soprattutto in INDOVINA, dove si gioca con la tastiera a schermo e
   `indovinaType()` (odq-quiz-type.js) tiene TUTTE le caselle disabilitate per l'intera
   partita: le lettere già inserite restavano illeggibili. In COMPLETA il motore le
   abilita una alla volta, quindi il grigio cadeva solo sulle caselle ancora da
   riempire — e la casella attiva sembrava "evidenziata" quando invece era solo l'unica
   resa come da disegno. Un'evidenziazione per caso, e per giunta solo su iOS: su
   Android e desktop quel grigio non esiste. Ora è uniforme ovunque, e la casella attiva
   la dichiariamo sul serio qui sotto. */

/* Casella attiva = l'unica ABILITATA (in Completa il motore le abilita una alla volta,
   quindi abilitata e attiva coincidono; regge anche se il focus si perde toccando
   altrove, cosa che `:focus` da solo non farebbe). Serve un anello perché il motore
   spegne il contorno di focus su tutto il sito (`:focus,:active,:visited{outline:none}`)
   e restava solo il cursore che lampeggia.
   In Indovina non c'è nessuna casella abilitata: lì la regola è inerte, per costruzione. */


/* tastiera: colonna centrata (era a tutta larghezza → tasti enormi), contenitore arrotondato */



/* skip smart/indovina: è dentro `.quiz-time-expired-wrap` (non-flex) → lo centriamo a pill */


/* countdown 4-3-2-1: numero grande centrato su bolla accento */



/* ============================ 13 · QUIZ SINGOLO — RISULTATO === */
/* Esito (icona + testo) → banner unico arrotondato; statistiche → tessere pulite. */



/* la <p> colorata deve riempire la cella a tutta altezza del banner (era alta solo quanto l'icona) */



/* Banner unico: coloriamo ENTRAMBE le metà (icona + testo) con lo stesso tono semantico
   → nessun bisogno di :has(), compatibile ovunque. Sull'icona un velo scuro per profondità. */








/* tinte banner (esito) — toni del restyle, stessa tinta della metà-icona → banner continuo */




/* statistiche: tessere chiare arrotondate (score/tempo/bonus/aiuto/totale) */





/* VOTO: il motore mette una classe `-bg` (fondino pieno) DIETRO il numero → via il fondino,
   coloriamo il NUMERO col colore-voto (coerente coi "numeroni" della pagella). Toni leggermente
   scuriti per contrasto su tessera bianca (l'excellent/good del motore sono chiari). */





/* icona-glifo del motore (:before Linearicon) in accento sopra l'etichetta */


/* --- pulsanti azione risultato (Lista/Prossimo/Casuale/materia + Salva/Riscuoti guest) --- */
/* Sono `.odq-quiz-button.quiz-result-go-on` (blu pieno del motore), fratelli dopo .quiz-results.
   Il genitore ha text-align:center → pill in linea, cluster centrato, wrap su mobile. */



/* "Prossimo" = azione primaria → pill pieno accento */



/* ---- Responsive (player) ---- */
@media (max-width:560px){
	.odq-quiz-content #quiz-content{padding:30px 14px 44px !important;}
	/* intro: card e badge più compatti */
	
	
	
	/* domanda + risposte più compatte */
	
	/* timer: colonna più larga + font ridotto — il runner conta con decimali (es. "03.30")
	   che a 28px non entravano in 74px e venivano tagliati. */
	
	
	/* risposte: 1 per riga su mobile (leggibilità) */
	
	/* risultato: icona più piccola, testo ridotto */
	
	
	
	
	
	
	
	/* clue: campo risposta + OK impilati a tutta larghezza (evita overflow su schermo stretto) */
	
	
	/* clue: tessere-indizio un filo più piccole di testo */
	
	/* smart/indovina: caselle-lettera più piccole (una parola lunga a 60px allargava tutta
	   l'area oltre il viewport, trascinando anche la tastiera) + tastiera a piena larghezza */
	
	
	
	
}

/* ==========================================================================
   DAYQUIZ — pannello di avvio "Quiz del Giorno" (Blocco 14)
   Il motore rende #o-dayquiz-head come blocco blu pieno 380px (png "flash"
   esterna + bordo) col moltiplicatore bonus, e #o-dayquiz-start come bottone
   bianco assoluto sovrapposto. Lo trasformiamo in una card compatta coerente
   col resto: coin bonus dorata + bottone accento. Solo CSS, markup invariato.
   ========================================================================== */
.odq-quiz-content #o-quiz-dayquiz{
	/* A tutta larghezza come la card del Quiz del Giorno (30/09/2026; era 600px centrata). */
	max-width:none;margin:10px 0 0; /* = gap della barra punteggi */
	background:linear-gradient(180deg,var(--q-surface,#fff),#faf8ff);
	border:1px solid var(--q-line,rgba(27,24,48,.1));border-radius:22px;
	box-shadow:0 30px 60px -40px rgba(27,24,48,.55);
	padding:30px 26px 34px;text-align:center;position:relative;overflow:hidden;
}
/* filetto accento in alto */
.odq-quiz-content #o-quiz-dayquiz::before{
	content:"";position:absolute;top:0;left:0;right:0;height:5px;
	background:linear-gradient(90deg,var(--q-purple,#7a3ff2),var(--brand-blue,#2181c1));
}
/* testata: via il blocco blu / png esterna / altezza fissa / bordo */
.odq-quiz-content #o-dayquiz-head{
	height:auto !important;width:auto !important;background:none !important;
	border:0 !important;padding:4px 0 0 !important;position:relative !important;
	color:var(--q-ink,#1b1830) !important;
}
/* C'era un kicker «Quiz del Giorno» scritto dal CSS: dal 30/09/2026 questa è la pagina del
   SuperBonus e il nome confondeva. Il titolo è l'H1, la spiegazione la riga sotto. */
/* badge bonus = coin dorata statica e centrata (era span assoluto 100px) */

/* override dei fondini pieni per-livello (.x1..x5): il livello resta leggibile dal valore
   "{N}X"; la coin è sempre dorata (colore-ricompensa già usato per i badge premium). */

/* "bonus" piccolo sopra il moltiplicatore */

/* wrap bottone: annulla i margini negativi/assoluti del motore */
.odq-quiz-content .o-dayquiz-start-wrap{
	position:static !important;margin:22px 0 0 !important;text-align:center;
}
/* bottone avvio = pill accento primaria */
.odq-quiz-content #o-dayquiz-start{
	position:static !important;transform:none !important;
	display:inline-flex !important;align-items:center;gap:10px;
	background:var(--q-purple,#7a3ff2) !important;color:#fff !important;
	border:0 !important;border-radius:40px !important;padding:15px 34px !important;
	font-family:var(--q-sans);font-weight:800;font-size:16px;letter-spacing:.01em;
	box-shadow:0 18px 34px -18px rgba(122,63,242,.85);cursor:pointer;
	transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.odq-quiz-content #o-dayquiz-start:hover{transform:translateY(-2px);filter:brightness(1.05);}

/* stato bloccato "Domani un Nuovo Quiz!" */
.odq-quiz-content #o-dayquiz-start.odq-locked{
	background:var(--q-surface-2,#f4f2fb) !important;color:var(--q-muted,#6a6680) !important;
	box-shadow:none !important;cursor:default;
}
.odq-quiz-content #o-dayquiz-start.odq-locked:hover{transform:none;filter:none;}
@media(max-width:640px){
	.odq-quiz-content #o-quiz-dayquiz{padding:26px 16px 28px;}
	
	.odq-quiz-content #o-dayquiz-start{padding:14px 26px !important;font-size:15px;}
}

/* ============================================================================ */
/* ===== INTESTAZIONE COLLEZIONE nella vista di gioco (16 set. 2026) ========== */
/* Copertina + descrizione + numeri in cima alla lista, dentro lo store.         */
/* Reso da core/templates/sections/collection-intro.php.                        */
/* ============================================================================ */

.odq-quiz-content .odq-coll-intro{
	display:grid;grid-template-columns:168px 1fr;gap:26px;align-items:center;
	background:var(--q-surface);border:1px solid var(--q-line);border-radius:20px;
	/* margin-top 4px: i riquadri dei punteggi hanno 6px di margine sotto, e con questi il box
	   sta a 10px dalla riga, come il `gap` fra un riquadro e l'altro. */
	padding:18px 26px 18px 18px;margin:4px 0 22px;box-sizing:border-box;
	box-shadow:0 1px 2px rgba(27,24,48,.05),0 10px 26px -14px rgba(52,40,110,.28);
}
.odq-quiz-content .odq-coll-intro--nocover{grid-template-columns:1fr;padding:22px 26px;}
.odq-quiz-content .odq-coll-intro-cover{
	aspect-ratio:1/1;border-radius:14px;overflow:hidden;
	box-shadow:0 8px 16px rgba(27,24,48,.1),0 14px 30px -12px rgba(52,40,110,.35);
}
.odq-quiz-content .odq-coll-intro-cover img{width:100%;height:100%;object-fit:cover;display:block;padding:0 !important;margin:0 !important;}
.odq-quiz-content .odq-coll-intro-body{min-width:0;}
.odq-quiz-content .odq-coll-intro-kicker{
	display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px;
	font-family:var(--q-sans);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
	color:var(--q-purple);
}
.odq-quiz-content .odq-coll-intro-badge{
	letter-spacing:.06em;color:#fff;padding:4px 10px;border-radius:999px;font-weight:800;font-size:11px;
}
.odq-quiz-content .odq-coll-intro-badge.is-premium{background:linear-gradient(135deg,#7a3ff2,#5a2fd0);}
.odq-quiz-content .odq-coll-intro-desc{
	font-family:var(--q-sans);font-size:17px;line-height:1.55;color:var(--q-body);
	margin:0 0 14px;max-width:62ch;
}
.odq-quiz-content .odq-coll-intro-facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;}
.odq-quiz-content .odq-coll-intro-facts li{
	display:inline-flex;align-items:baseline;gap:5px;margin:0;
	font-family:var(--q-sans);font-size:13.5px;font-weight:600;color:var(--q-muted);
	background:var(--q-surface-2,#f4f2fb);border-radius:999px;padding:6px 12px;
}
.odq-quiz-content .odq-coll-intro-facts li:before{display:none;}
.odq-quiz-content .odq-coll-intro-facts b{font-weight:800;color:var(--q-ink);font-variant-numeric:tabular-nums;}

/* Situazione dell'utente nella collezione (media voto + quiz completati), sotto i tre numeri. */
.odq-quiz-content .odq-coll-intro-progress{margin:14px 0 4px;max-width:420px;}
.odq-quiz-content .odq-cip-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 5px;font-family:var(--q-sans);font-size:13px;color:var(--q-muted);}
.odq-quiz-content .odq-cip-label{font-weight:600;}
.odq-quiz-content .odq-cip-value b{font-weight:800;color:var(--q-ink);font-variant-numeric:tabular-nums;}
.odq-quiz-content .odq-coll-intro-progress .progress{height:8px;margin:0 0 12px;border-radius:999px;overflow:hidden;background:var(--q-surface-2,#f4f2fb);box-shadow:none;}
.odq-quiz-content .odq-coll-intro-progress .progress-bar-quiz{height:100%;border-radius:999px;}

/* Tipologia: l'immagine (ACF cover_type, quadrata) ha in alto il nome della tipologia.
   Su desktop resta intera, scritta compresa (prova del 16 set. 2026). Sul telefono, dove a
   92px la scritta non si legge, il riquadro 4:3 la ritaglia sulla sola illustrazione: larga
   il 118% e spostata su del 34,5% della larghezza (i margini in % si calcolano sulla
   larghezza). Per tornare al ritaglio ovunque basta togliere la media query qui sotto. */
@media (max-width:640px){
	.odq-quiz-content .odq-coll-intro--type .odq-coll-intro-cover{aspect-ratio:4/3;background:#f4f3f9;}
	.odq-quiz-content .odq-coll-intro--type .odq-coll-intro-cover img{
		width:118%;height:auto;max-width:none;object-fit:initial;margin:-34.5% 0 0 -9% !important;
	}
}

@media (max-width:640px){
	/* Telefono: niente due colonne. Con l'immagine in colonna il testo restava largo metà box
	   e andava a capo ogni due parole (e la pillola degli aiuti si spezzava). L'immagine
	   galleggia a sinistra, il testo le scorre accanto e poi prende tutta la larghezza; le
	   pillole vanno sempre sotto. */
	.odq-quiz-content .odq-coll-intro{display:flow-root;padding:14px 16px;border-radius:16px;}
	.odq-quiz-content .odq-coll-intro-cover{float:left;width:84px;margin:2px 14px 8px 0;border-radius:12px;}
	.odq-quiz-content .odq-coll-intro--type .odq-coll-intro-cover{width:104px;}
	.odq-quiz-content .odq-coll-intro-kicker{font-size:11px;margin-bottom:6px;}
	.odq-quiz-content .odq-coll-intro-desc{font-size:15px;line-height:1.5;margin-bottom:12px;max-width:none;}
	.odq-quiz-content .odq-coll-intro-facts{clear:both;}
	.odq-quiz-content .odq-coll-intro-facts li{font-size:12.5px;padding:5px 10px;}
}

/* Materia (26 set. 2026, sections/subject-intro.php): al posto dell'immagine l'icona della
   materia (SVG a colori 36×36, in stile emoji) su un riquadro viola chiaro. I tre passi di
   «come funziona» (ospite) prendono tutta la larghezza sotto icona e testo. */
.odq-quiz-content .odq-coll-intro--subject .odq-subj-cover{
	display:flex;align-items:center;justify-content:center;
	background:linear-gradient(145deg,#f4f0ff,#e9e2fb);box-shadow:inset 0 0 0 1px rgba(122,63,242,.12);
}
.odq-quiz-content .odq-coll-intro--subject .odq-subj-icon{width:58%;height:58%;}
.odq-quiz-content .odq-coll-intro--subject .odq-subj-icon svg{width:100%;height:100%;display:block;}
.odq-quiz-content .odq-coll-intro--subject{margin-top:14px;}
.odq-quiz-content .odq-coll-intro--subject .odq-coll-intro-desc{margin-bottom:0;}
.odq-quiz-content .odq-coll-intro--subject .odq-howto{grid-column:1/-1;margin:6px 0 0;}
.odq-quiz-content .odq-coll-intro--subject .odq-howto li{background:var(--q-surface-2,#f4f2fb);border-color:transparent;}
/* Dopo il box il titolo «Gioca subito» si stacca meno: il box ha già il suo margine sotto. */
.odq-quiz-content .odq-coll-intro--subject + .odq-subject-h2{margin-top:10px;}
@media (max-width:640px){
	.odq-quiz-content .odq-coll-intro--subject .odq-subj-cover{width:72px;}
	.odq-quiz-content .odq-coll-intro--subject .odq-howto{clear:both;margin-top:14px;}
	.odq-quiz-content .odq-coll-intro--subject .odq-social{clear:both;}
}

/* Quello che sta SOTTO la lista (intestazione della tipologia per il registrato, altre
   tipologie per tutti) resta nascosto finché la lista, che arriva via AJAX, è vuota:
   altrimenti compare in cima per un attimo e poi viene spinto giù dai quiz. */
.odq-quiz-content #o-quiz-list:not(:has(li)) ~ .odq-coll-intro,
.odq-quiz-content #o-quiz-list:not(:has(li)) ~ .odq-type-others{display:none;}
/* Sotto la lista il box si stacca dagli aiuti come la sezione che lo segue. */
.odq-quiz-content .o-hint-list ~ .odq-coll-intro{margin-top:26px;}

/* ---- «Scopri le altre tipologie» sotto la lista (sections/type-others.php) ----
   Il colore della tipologia (`--q-type`, classi .o-<slug>) sta su bordo, pallino e fondo
   schiarito; il testo resta scuro, perché come testo sette colori su nove non si leggono. */
.odq-quiz-content .odq-type-others{margin:34px 0 8px;}
.odq-quiz-content .odq-type-others-h{
	font-family:var(--q-serif);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.2;
	color:var(--q-ink);margin:0 0 14px;
}
.odq-quiz-content .odq-type-others-list{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;}
.odq-quiz-content .odq-type-others-list li{margin:0;padding:0;}
.odq-quiz-content .odq-type-others-list li:before{display:none;}
.odq-quiz-content .odq-type-others-btn{
	display:inline-flex;align-items:center;gap:9px;
	padding:10px 16px 10px 13px;border-radius:999px;
	border:2px solid var(--q-type,var(--q-purple));
	background:color-mix(in srgb,var(--q-type,var(--q-purple)) 12%,#fff);
	font-family:var(--q-sans);font-weight:700;font-size:14.5px;line-height:1.2;
	color:var(--q-ink) !important;text-decoration:none !important;opacity:1;
	transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease;
}
.odq-quiz-content .odq-type-others-btn:before{
	content:"";flex:none;width:11px;height:11px;border-radius:50%;background:var(--q-type,var(--q-purple));
}
.odq-quiz-content .odq-type-others-btn:hover,
.odq-quiz-content .odq-type-others-btn:focus-visible{
	background:color-mix(in srgb,var(--q-type,var(--q-purple)) 22%,#fff);
	transform:translateY(-1px);box-shadow:0 8px 16px -10px rgba(27,24,48,.45);
}
@media (max-width:640px){
	.odq-quiz-content .odq-type-others{margin-top:26px;}
	.odq-quiz-content .odq-type-others-list{gap:8px;}
	.odq-quiz-content .odq-type-others-btn{padding:8px 13px 8px 11px;font-size:13.5px;}
}

/* ============================================================================ */
/* ===== LANDING COLLEZIONE — redesign design pass (7bis.13) ================== */
/* Vista SEO/marketing per utenti non abilitati (anonimo, o free su premium).  */
/* Reso da core/templates/sections/collection-landing.php. Token = Blocco 1.   */
/* ============================================================================ */

.odq-quiz-content .odq-coll-landing{display:flex;flex-direction:column;gap:44px;margin:8px 0 8px;}
.odq-quiz-content .odq-coll-landing *{box-sizing:border-box;}

/* -------------------------------------------------------------- 1 · HERO --- */
.odq-quiz-content .odq-cl-hero{
	display:grid;grid-template-columns:340px 1fr;gap:36px;align-items:center;
	background:var(--q-surface);border:1px solid var(--q-line);border-radius:20px;
	padding:26px;box-shadow:0 1px 2px rgba(27,24,48,.05),0 10px 26px -14px rgba(52,40,110,.28);
}
.odq-quiz-content .odq-cl-cover{
	position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;
	box-shadow:0 8px 16px rgba(27,24,48,.1),0 18px 40px -12px rgba(52,40,110,.35);
}
.odq-quiz-content .odq-cl-cover img{width:100%;height:100%;object-fit:cover;display:block;padding:0 !important;}
.odq-quiz-content .odq-cl-ribbon{
	position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;
	font-family:var(--q-sans);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
	color:#fff;padding:7px 13px;border-radius:999px;
}
.odq-quiz-content .odq-cl-ribbon svg{width:14px;height:14px;}
.odq-quiz-content .odq-cl-ribbon.is-premium{background:linear-gradient(135deg,#7a3ff2,#5a2fd0);box-shadow:0 6px 14px rgba(90,47,208,.4);}
.odq-quiz-content .odq-cl-ribbon.is-free{background:linear-gradient(135deg,#41c541,#2fae2f);box-shadow:0 6px 14px rgba(65,197,65,.35);}

.odq-quiz-content .odq-cl-hero-body{min-width:0;}
.odq-quiz-content .odq-cl-hero-body .odq-cl-kicker{
	display:inline-block;font-family:var(--q-sans);font-weight:700;font-size:12px;letter-spacing:.14em;
	text-transform:uppercase;color:var(--q-purple);background:rgba(122,63,242,.1);
	padding:5px 11px;border-radius:999px;margin:0 0 13px;
}
/* Il titolo riusa .o-main-title (serif, già stilato dal Blocco 2). Solo micro-fix margine. */
.odq-quiz-content .odq-cl-hero .odq-cl-title{margin:0 0 12px;}
.odq-quiz-content .odq-cl-lead{font-family:var(--q-sans);font-size:16.5px;line-height:1.55;color:var(--q-body);margin:0 0 18px;max-width:54ch;}

.odq-quiz-content .odq-cl-facts{
	list-style:none;display:flex;flex-wrap:wrap;gap:22px;margin:0 0 22px;padding:0;
	font-family:var(--q-sans);font-size:14px;color:var(--q-muted);font-weight:600;
}
.odq-quiz-content .odq-cl-facts li{display:inline-flex;align-items:baseline;gap:6px;}
.odq-quiz-content .odq-cl-facts b{font-size:22px;font-weight:800;color:var(--q-ink);line-height:1;font-variant-numeric:tabular-nums;}

.odq-quiz-content .odq-cl-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;}
.odq-quiz-content .odq-cl-btn{
	display:inline-flex;align-items:center;gap:9px;font-family:var(--q-sans);font-weight:700;font-size:15.5px;
	color:#fff !important;text-decoration:none;padding:14px 26px;border-radius:12px;border:0;cursor:pointer;
	background:linear-gradient(135deg,#7a3ff2,#5a2fd0);box-shadow:0 10px 22px -6px rgba(122,63,242,.55);
	transition:transform .15s ease,box-shadow .15s ease;
}
.odq-quiz-content .odq-cl-btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -8px rgba(122,63,242,.62);color:#fff !important;}
.odq-quiz-content .odq-cl-btn svg{width:18px;height:18px;}
.odq-quiz-content .odq-cl-reassure{display:inline-flex;align-items:center;gap:8px;font-family:var(--q-sans);font-size:13px;color:var(--q-muted);}
.odq-quiz-content .odq-cl-reassure svg{width:16px;height:16px;color:var(--q-correct);flex:0 0 auto;}
.odq-coll-landing--premium .odq-cl-reassure svg{color:var(--q-purple);}

/* ----------------------------------------------------------- SEZIONI base -- */
.odq-quiz-content .odq-cl-h{
	font-family:var(--q-serif);font-weight:700;font-size:clamp(1.5rem,2.5vw,1.9rem);
	color:var(--q-ink);letter-spacing:-.01em;margin:0 0 20px;line-height:1.15;text-wrap:balance;
}

/* ------------------------------------------------- 2 · COSA CONTIENE ------- */
.odq-quiz-content .odq-cl-group{margin:0 0 22px;}
.odq-quiz-content .odq-cl-group:last-child{margin-bottom:0;}
.odq-quiz-content .odq-cl-sub{
	display:flex;align-items:center;gap:9px;font-family:var(--q-sans);font-weight:800;font-size:13px;
	letter-spacing:.06em;text-transform:uppercase;color:var(--q-muted);margin:0 0 13px;
}
.odq-quiz-content .odq-cl-sub svg{width:17px;height:17px;color:var(--q-purple);}
.odq-quiz-content .odq-cl-chips{display:flex;flex-wrap:wrap;gap:10px;}
.odq-quiz-content .odq-cl-chip{
	display:inline-flex;align-items:center;gap:8px;font-family:var(--q-sans);font-weight:600;font-size:14px;
	color:var(--q-ink) !important;text-decoration:none;background:var(--q-surface);border:1px solid var(--q-line);
	padding:8px 8px 8px 15px;border-radius:999px;transition:border-color .15s,box-shadow .15s,transform .15s;
}
.odq-quiz-content a.odq-cl-chip:hover{border-color:rgba(122,63,242,.45);box-shadow:0 6px 14px -6px rgba(122,63,242,.4);transform:translateY(-1px);}
.odq-quiz-content .odq-cl-chip i{
	font-style:normal;font-size:12px;font-weight:800;line-height:1;color:var(--q-purple);
	background:rgba(122,63,242,.12);padding:4px 8px;border-radius:999px;font-variant-numeric:tabular-nums;
}
.odq-quiz-content .odq-cl-chip--type i{color:var(--q-blue);background:rgba(33,129,193,.12);}
.odq-quiz-content a.odq-cl-chip--type:hover{border-color:rgba(33,129,193,.45);box-shadow:0 6px 14px -6px rgba(33,129,193,.4);}

/* ------------------------------------------------ 3 · TESTO SEO ------------ */
.odq-quiz-content .odq-cl-editorial{
	background:var(--q-surface);border:1px solid var(--q-line);border-radius:20px;
	padding:clamp(24px,3vw,40px);box-shadow:0 1px 2px rgba(27,24,48,.05);
}
.odq-quiz-content .odq-cl-prose{font-family:var(--q-sans);font-size:16px;line-height:1.7;color:var(--q-body);}
.odq-quiz-content .odq-cl-prose > :first-child{margin-top:0;}
.odq-quiz-content .odq-cl-prose > :last-child{margin-bottom:0;}
.odq-quiz-content .odq-cl-prose p{margin:0 0 16px;max-width:72ch;}
.odq-quiz-content .odq-cl-prose h2{font-family:var(--q-serif);font-weight:700;font-size:1.55rem;color:var(--q-ink);margin:0 0 14px;letter-spacing:-.01em;}
.odq-quiz-content .odq-cl-prose h3{font-family:var(--q-sans);font-weight:800;font-size:17px;color:var(--q-ink);margin:26px 0 10px;}
.odq-quiz-content .odq-cl-prose a{color:var(--q-blue);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(33,129,193,.3);}
.odq-quiz-content .odq-cl-prose a:hover{border-bottom-color:var(--q-blue);}
.odq-quiz-content .odq-cl-prose ul,.odq-quiz-content .odq-cl-prose ol{margin:0 0 16px;padding-left:22px;}
.odq-quiz-content .odq-cl-prose li{margin:0 0 6px;}

/* ------------------------------------------------ 4 · FAQ ------------------ */
.odq-quiz-content .odq-cl-faq-list{display:flex;flex-direction:column;gap:12px;}
.odq-quiz-content .odq-cl-qa{
	background:var(--q-surface);border:1px solid var(--q-line);border-radius:14px;
	padding:4px 20px;box-shadow:0 1px 2px rgba(27,24,48,.04);overflow:hidden;
}
.odq-quiz-content .odq-cl-qa summary{
	list-style:none;cursor:pointer;font-family:var(--q-sans);font-weight:700;font-size:15.5px;color:var(--q-ink);
	padding:16px 30px 16px 0;position:relative;
}
.odq-quiz-content .odq-cl-qa summary::-webkit-details-marker{display:none;}
.odq-quiz-content .odq-cl-qa summary::after{
	content:"";position:absolute;right:2px;top:50%;width:11px;height:11px;margin-top:-7px;
	border-right:2px solid var(--q-purple);border-bottom:2px solid var(--q-purple);
	transform:rotate(45deg);transition:transform .2s ease;
}
.odq-quiz-content .odq-cl-qa[open] summary::after{transform:rotate(-135deg);}
.odq-quiz-content .odq-cl-qa-a{font-family:var(--q-sans);font-size:15px;line-height:1.65;color:var(--q-body);padding:0 0 16px;}
.odq-quiz-content .odq-cl-qa-a p{margin:0 0 10px;}
.odq-quiz-content .odq-cl-qa-a p:last-child{margin:0;}

/* ------------------------------------------------ 5 · BANDA CTA ------------ */
.odq-quiz-content .odq-cl-band{
	display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
	border-radius:20px;padding:36px clamp(24px,4vw,46px);
	background:linear-gradient(135deg,#2a2350,#42267d 55%,#7a3ff2);color:#fff;
	box-shadow:0 14px 30px -14px rgba(52,40,110,.6);
}
.odq-quiz-content .odq-cl-band-txt h2{font-family:var(--q-serif);font-weight:700;font-size:clamp(1.4rem,2.3vw,1.75rem);margin:0 0 8px;color:#fff;}
.odq-quiz-content .odq-cl-band-txt p{font-family:var(--q-sans);font-size:15px;margin:0;color:rgba(255,255,255,.82);max-width:48ch;}
.odq-quiz-content .odq-cl-band .odq-cl-btn{background:#fff;color:var(--q-purple) !important;box-shadow:0 12px 26px -8px rgba(0,0,0,.4);}
.odq-quiz-content .odq-cl-band .odq-cl-btn:hover{color:var(--q-purple) !important;}

/* ------------------------------------------------ 6 · ALTRE COLLEZIONI ----- */
.odq-quiz-content .odq-cl-related-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.odq-quiz-content .odq-cl-rc{
	display:flex;flex-direction:column;text-decoration:none;color:inherit;
	background:var(--q-surface);border:1px solid var(--q-line);border-radius:14px;overflow:hidden;
	box-shadow:0 1px 2px rgba(27,24,48,.05);transition:transform .15s ease,box-shadow .15s ease;
}
.odq-quiz-content .odq-cl-rc:hover{transform:translateY(-4px);box-shadow:0 10px 20px -8px rgba(52,40,110,.28);}
.odq-quiz-content .odq-cl-rc-thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--q-surface-2);}
.odq-quiz-content .odq-cl-rc-thumb img{width:100%;height:100%;object-fit:cover;display:block;padding:0 !important;}
.odq-quiz-content .odq-cl-rc-badge{
	position:absolute;top:8px;left:8px;font-style:normal;font-family:var(--q-sans);font-size:10.5px;font-weight:800;
	letter-spacing:.04em;text-transform:uppercase;color:#fff;padding:4px 8px;border-radius:999px;
}
.odq-quiz-content .odq-cl-rc-badge.is-premium{background:rgba(90,47,208,.92);}
.odq-quiz-content .odq-cl-rc-badge.is-free{background:rgba(47,174,47,.92);}
.odq-quiz-content .odq-cl-rc-meta{padding:11px 13px 13px;display:flex;flex-direction:column;gap:3px;}
.odq-quiz-content .odq-cl-rc-meta b{font-family:var(--q-sans);font-weight:700;font-size:13.5px;color:var(--q-ink);line-height:1.25;}
.odq-quiz-content .odq-cl-rc-meta small{font-family:var(--q-sans);font-size:11.5px;color:var(--q-muted);font-weight:600;}

/* ------------------------------------------------ responsive --------------- */
@media(max-width:860px){
	.odq-quiz-content .odq-cl-hero{grid-template-columns:1fr;gap:22px;}
	.odq-quiz-content .odq-cl-cover{max-width:300px;margin:0 auto;}
	.odq-quiz-content .odq-cl-hero-body{text-align:center;}
	.odq-quiz-content .odq-cl-facts,.odq-quiz-content .odq-cl-cta-row,.odq-quiz-content .odq-cl-chips{justify-content:center;}
	.odq-quiz-content .odq-cl-sub{justify-content:center;}
	/* Su mobile l'hero e' gia' centrato (.odq-cl-hero-body), ma l'H1 riusa
	   .o-main-title, che porta un text-align:left esplicito: l'unica cosa non
	   centrata di tutto il blocco. Stesso discorso per il titolo di "Cosa trovi
	   in..." e di "Altre collezioni", che stanno sopra contenuti centrati.
	   .odq-cl-h e' condivisa da quattro titoli, quindi va sempre qualificata con
	   il blocco: i titoli delle due sezioni di domande restano a sinistra,
	   perche' li' sotto c'e' testo lungo da leggere. */
	.odq-quiz-content .odq-cl-hero-body .odq-cl-title{text-align:center;}
	.odq-quiz-content .odq-cl-contains .odq-cl-h,
	.odq-quiz-content .odq-cl-related .odq-cl-h{text-align:center;}
	.odq-quiz-content .odq-cl-related-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:560px){
	.odq-quiz-content .odq-coll-landing{gap:34px;}
	.odq-quiz-content .odq-cl-hero{padding:18px;}
	.odq-quiz-content .odq-cl-related-grid{grid-template-columns:repeat(2,1fr);}
	.odq-quiz-content .odq-cl-band{padding:26px 20px;}
	.odq-quiz-content .odq-cl-btn{width:100%;justify-content:center;}
}

/* ============================================================================
   GRADIMENTO QUIZ — "Ti è piaciuto il quiz?" nella schermata risultato.
   Il markup vecchio (#guest_feedback, pillole grigie #444 su hover blu) era
   pre-restyle e riservato agli ospiti; ora è `.odq-quiz-feedback`, lo vedono
   tutti e prende i token del resto della schermata. Le regole del motore su
   #guest_feedback restano inerti (quel markup non esiste più).
   ========================================================================== */







/* Il "No" non deve sembrare un errore: stessa gerarchia del "Sì", solo tono neutro. */

/* Dopo il voto resta solo il ringraziamento, senza far collassare il riquadro. */


@media screen and (max-width:600px){
	
	
}

/* ---------------------------------------------------------------------------
   OSPITI — "Il tuo punteggio è stato memorizzato temporaneamente".
   Era un <a> con gli stili in linea (fondo #eee) sul fondo scuro di #quiz-content.
   --------------------------------------------------------------------------- */








/* ---------------------------------------------------------------------------
   VALUTA ONEDAYQUIZ — barra fissa in fondo (`.odq-rate-us`), dalla bacheca dopo
   10 quiz o dalla voce "Valuta" della sidebar. Era rimasta interamente
   pre-restyle: h3 a fascia blu piena, input squadrati, bottone grigio.
   Resta `position:fixed; bottom:0` del motore — cambia solo l'aspetto.
   --------------------------------------------------------------------------- */

.odq-quiz-content .odq-rate-us,
.odq-rate-us{
	left:50% !important;transform:translateX(-50%);
	width:min(560px,94%) !important;
	padding:22px 22px 20px !important;
	border-radius:20px 20px 0 0;
	background:var(--q-surface,#fff) !important;
	box-shadow:0 -8px 60px -12px rgba(0,0,0,.5) !important;
	border:1px solid var(--q-line,rgba(27,24,48,.1));border-bottom:none;
	text-align:center;
}
/* Titolo: da fascia blu piena a intestazione serif del design. */
.odq-rate-us .odq-rate-title{
	background:none !important;color:var(--q-ink,#1b1830) !important;
	font-family:var(--q-serif);font-weight:700 !important;
	font-size:clamp(18px,2.4vw,22px) !important;padding:0 !important;margin:0 0 4px !important;
}
.odq-rate-us .odq-rate-title:before{display:none;}
/* Stelle: più grandi e in oro, sono il gesto principale. */
.odq-rate-us .comment-rating-stars{margin:6px 0 14px;display:flex;justify-content:center;gap:7px;}
.odq-rate-us .comment-star{
	font-size:27px;color:#d8d4e4;cursor:pointer;transition:color .12s ease,transform .12s ease;
}
.odq-rate-us .comment-star:hover{transform:scale(1.12);}
.odq-rate-us .comment-star.icon-star,
.odq-rate-us .comment-star.is-on{color:var(--q-gold,#e0a94a);}
/* Campo + invio: una barra unica arrotondata. */
.odq-rate-us form .form-group{
	display:flex !important;gap:0;margin:0 0 12px !important;width:100% !important;
	border:1.5px solid var(--q-line,rgba(27,24,48,.1));border-radius:999px;overflow:hidden;
	background:var(--q-surface-2,#f4f2fb);
}
.odq-rate-us form .form-group:focus-within{border-color:var(--q-purple,#7a3ff2);}
.odq-rate-us form .form-group input{
	flex:1;width:auto !important;float:none !important;height:46px !important;
	border:none !important;background:transparent !important;
	padding:0 18px;font-family:var(--q-sans);font-size:14px !important;color:var(--q-ink,#1b1830) !important;
	border-radius:0 !important;
}
.odq-rate-us form .form-group input:focus{outline:none;}
.odq-rate-us form .form-group button{
	flex:none;width:56px !important;height:46px !important;border:none !important;
	background:var(--q-purple,#7a3ff2) !important;color:#fff !important;
	border-radius:0 !important;cursor:pointer;font-size:18px;
	display:flex;align-items:center;justify-content:center;
}
.odq-rate-us form .form-group button:hover{filter:brightness(1.08);color:#fff !important;}
.odq-rate-us form .form-group button:disabled{opacity:.7;cursor:default;}
/* Avviso quando manca il commento: prima il pulsante girava e tornava indietro
   in silenzio, e sembrava che la valutazione non funzionasse. */
.odq-rate-us .odq-rate-us-hint{
	display:none;margin:-6px 0 10px;font-family:var(--q-sans);font-size:12.5px;
	font-weight:700;color:var(--q-wrong,#e60000);
}
.odq-rate-us.needs-comment .odq-rate-us-hint{display:block;}
.odq-rate-us .odq-rate-us-later{
	display:inline-block;font-family:var(--q-sans);font-size:12.5px;font-style:normal;
	color:var(--q-muted,#6a6680);text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.odq-rate-us .odq-rate-us-later:hover{color:var(--q-purple,#7a3ff2);}

@media screen and (max-width:600px){
	.odq-rate-us{padding:18px 16px 16px !important;}
	.odq-rate-us .comment-star{font-size:24px;}
}

/* ================================ N · BLOCCO «DOMANDE CON RISPOSTA» (Fase 2) ===
   Reso da ODQ_Domande::render() (core/domande.php). Compare in due contesti:
   dentro la landing di una collezione (accanto alle FAQ) e dentro `.o-text-content`
   delle pagine materia. Per questo i selettori NON sono agganciati a
   `.odq-coll-landing`: il blocco deve stare in piedi da solo.
   Il disegno è di proposito lo stesso delle FAQ (`.odq-cl-qa`) — sono due elenchi di
   domande a fisarmonica, e farli diversi sarebbe una differenza senza significato.
   ⚠️ Niente `display:none` sulla risposta: il testo deve restare nel DOM servito.
   Ci pensa `<details>`, che nasconde senza togliere.                            */
.odq-quiz-content .odq-domande{margin:0 0 34px;}
.odq-quiz-content .odq-domande-h{
	font-family:var(--q-serif);font-weight:700;font-size:clamp(1.5rem,2.5vw,1.9rem);
	color:var(--q-ink);letter-spacing:-.01em;margin:0 0 20px;line-height:1.15;text-wrap:balance;
}
.odq-quiz-content .odq-domande-list{display:flex;flex-direction:column;gap:12px;}
.odq-quiz-content .odq-domanda{
	background:var(--q-surface);border:1px solid var(--q-line);border-radius:14px;
	padding:4px 20px;box-shadow:0 1px 2px rgba(27,24,48,.04);overflow:hidden;
}
.odq-quiz-content .odq-domanda summary{
	list-style:none;cursor:pointer;font-family:var(--q-sans);font-weight:700;font-size:15.5px;
	color:var(--q-ink);padding:16px 30px 16px 0;position:relative;
}
.odq-quiz-content .odq-domanda summary::-webkit-details-marker{display:none;}
.odq-quiz-content .odq-domanda summary::after{
	content:"";position:absolute;right:2px;top:50%;width:11px;height:11px;margin-top:-7px;
	border-right:2px solid var(--q-purple);border-bottom:2px solid var(--q-purple);
	transform:rotate(45deg);transition:transform .2s ease;
}
.odq-quiz-content .odq-domanda[open] summary::after{transform:rotate(-135deg);}
.odq-quiz-content .odq-domanda-r{
	font-family:var(--q-sans);font-size:15px;line-height:1.65;color:var(--q-body);padding:0 0 16px;
}
.odq-quiz-content .odq-domanda-r p{margin:0;}
/* La soluzione in grassetto: si distingue dalla spiegazione che la segue. */
.odq-quiz-content .odq-domanda-r strong{color:var(--q-ink);}

/* ---------------------------------------------------------------------------
   Griglia delle materie — shortcode [odq_materie]
   Da aggiungere a core/library/css/odq-restyle.css.
   Ogni selettore è qualificato con .odq-materie: regola permanente 20.
   --------------------------------------------------------------------------- */

.odq-materie {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px 28px;
	margin: 0 0 1.6em;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.odq-materie.odq-materie--col2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.odq-materie .odq-materie__voce {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.odq-materie .odq-materie__icona {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	margin-top: 2px;
}

.odq-materie .odq-materie__testo {
	display: block;
	min-width: 0; /* senza questo il testo lungo sfonda la colonna della griglia */
}

.odq-materie .odq-materie__nome {
	display: block;
	font-weight: 600;
	text-decoration: none;
}

.odq-materie .odq-materie__nome:hover,
.odq-materie .odq-materie__nome:focus {
	text-decoration: underline;
}

.odq-materie .odq-materie__riga {
	display: block;
	font-size: 0.94em;
	line-height: 1.45;
	opacity: 0.85;
}

/* Il tema disegna un pallino viola come `li::before` su ogni voce dentro
   `.o-text-content`: nella griglia delle materie è rumore, e sposta l'icona.
   Trovato solo guardando la pagina pubblicata: nel CSS della griglia non si vedeva. */
.odq-materie .odq-materie__voce::before {
	content: none !important;
	display: none !important;
}

.odq-materie .odq-materie__voce::marker {
	content: none;
}

/* ---------------------------------------------------------------------------
   Le nove modalità sull'hub, due colonne — shortcode nessuno, markup in pagina.
   Il colore è quello identificativo della tipologia, campionato dai bordi delle
   card (vedi `tipologie-grafiche-nuove.md`): barretta nella tinta piena, nome
   nella variante scura, che sul bianco ha il contrasto che serve.
   Le immagini delle tipologie NON si ripetono qui: stanno già nelle tessere in
   cima alla stessa pagina.
   --------------------------------------------------------------------------- */

.odq-modalita {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px 30px;
	margin: 0 0 1.6em;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.odq-modalita {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.odq-modalita .odq-modalita__voce {
	margin: 0;
	padding: 2px 0 2px 15px;
	border-left: 4px solid var(--odq-tinta, #ccc);
	list-style: none;
	min-width: 0;
}

/* il pallino del tema, come nella griglia delle materie */
.odq-modalita .odq-modalita__voce::before {
	content: none !important;
	display: none !important;
}

.odq-modalita .odq-modalita__nome {
	margin: 0 0 .35em;
	font-size: 1.06em;
	line-height: 1.25;
	color: var(--odq-tinta-scura, inherit);
}

.odq-modalita .odq-modalita__voce p {
	margin: 0;
}

.odq-modalita__voce--classico { --odq-tinta:#52c1c6; --odq-tinta-scura:#2b8388; }
.odq-modalita__voce--visivo   { --odq-tinta:#f4b43e; --odq-tinta-scura:#b8801c; }
.odq-modalita__voce--visivo2  { --odq-tinta:#e732d7; --odq-tinta-scura:#a3168f; }
.odq-modalita__voce--completa { --odq-tinta:#ee8131; --odq-tinta-scura:#a8531a; }
.odq-modalita__voce--siono    { --odq-tinta:#8c1ac5; --odq-tinta-scura:#5c0f84; }
.odq-modalita__voce--indizi   { --odq-tinta:#bb2a1a; --odq-tinta-scura:#7d1a0e; }
.odq-modalita__voce--audio    { --odq-tinta:#c2a882; --odq-tinta-scura:#7d6444; }
.odq-modalita__voce--zoom     { --odq-tinta:#39b7e5; --odq-tinta-scura:#1a6f95; }
.odq-modalita__voce--indovina { --odq-tinta:#4faf3d; --odq-tinta-scura:#2f7a22; }

/* Le domande frequenti, sotto la griglia */
.odq-faq__d {
	display: block;
	margin-bottom: .2em;
}

/* ============================ PAGINA MATERIA (10 set. 2026) === */
/* Quello che la pagina materia rende lato server e che serve al primo paint: «come funziona»
   e il titolo «Gioca subito» (ospite), la riserva d'altezza della lista, la riga sotto il
   titolo delle collezioni, il blocco riassuntivo dei quiz chiusi (ospite). La riga della lista
   e il filtro per modalità stanno in odq-gameplay.css, col resto della lista.
   Nessun colore nuovo: la tinta delle modalità viene dalle `.odq-quiz-type-<slug>-color` di
   onedayquiz.css, e sta sul PALLINO, non sul testo — 7 tinte su 9 su bianco non arrivano a
   3,4:1 (vedi collectionBadges() in o-class-quiz.php, stessa scelta delle card collezione). */

/* Il pallino della modalità: lista, filtro e blocco riassuntivo. `currentColor` è la tinta
   della tipologia (la classe colore ha !important sul `color`). */
.odq-quiz-content .odq-row-dot{
	display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;
	background:currentColor;vertical-align:middle;
}

/* --- Come funziona: tre passi numerati (ospite) --- */
.odq-quiz-content .odq-howto{
	counter-reset:odq-howto;list-style:none;margin:18px 0 0;padding:0;
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
}
.odq-quiz-content .odq-howto li{
	counter-increment:odq-howto;position:relative;margin:0;
	padding:14px 16px 14px 52px;
	background:var(--q-surface);border:1px solid var(--q-line);border-radius:14px;
	font-family:var(--q-sans);font-size:14.5px;font-weight:500;line-height:1.4;color:var(--q-body);
}
.odq-quiz-content .odq-howto li::before{
	content:counter(odq-howto);position:absolute;left:14px;top:12px;
	width:26px;height:26px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	background:var(--q-purple);color:#fff;font-weight:800;font-size:13px;
}
.odq-quiz-content .odq-howto a{color:var(--q-purple);font-weight:700;}
@media (max-width:767px){
	.odq-quiz-content .odq-howto{grid-template-columns:1fr;gap:8px;}
	.odq-quiz-content .odq-howto li{padding:11px 14px 11px 48px;font-size:14px;}
	.odq-quiz-content .odq-howto li::before{top:9px;left:12px;}
}

/* --- «Gioca subito»: stesso titolo delle sezioni della bacheca (Blocco 5) --- */
.odq-quiz-content .odq-subject-h2{
	position:relative;font-family:var(--q-serif);font-weight:700;font-size:clamp(22px,2.6vw,28px);
	color:var(--q-ink);letter-spacing:-.3px;line-height:1.15;text-align:left;
	margin:30px 0 0;padding:0 0 12px;background:none;
}
.odq-quiz-content .odq-subject-h2::after{
	content:"";position:absolute;left:0;bottom:0;width:52px;height:3px;border-radius:3px;
	background:linear-gradient(90deg,var(--q-purple),var(--q-blue));
}

/* --- Riserva d'altezza della lista (ospite): la lista arriva via AJAX e sotto c'è contenuto
   reso lato server. Il numero di righe lo scrive il PHP (--odq-rows); il resto è misurato in
   pagina: una riga è alta 53px sopra i 640px e 49px sotto, e ognuna si porta dietro 6,4px di
   margine inferiore che viene dal tema (`li{margin-bottom:.4em}`) — più 2px di bordo della
   lista, che è border-box. Senza il margine la riserva era corta di 33px su cinque righe.
   Arrotondata per difetto: una riga col voto è un po' più alta, mai più bassa, e la riserva
   non deve mai superare il contenuto. */
.odq-quiz-content #o-quiz-list.odq-list-reserve{min-height:calc(var(--odq-rows,5) * 59px + 2px);}
@media (max-width:640px){
	.odq-quiz-content #o-quiz-list.odq-list-reserve{min-height:calc(var(--odq-rows,5) * 55px + 2px);}
}

/* --- Collezioni della materia: la card e la griglia sono quelle della bacheca (Blocco 5);
   qui c'è solo la riga sotto il titolo, per l'ospite. --- */
.odq-quiz-content .odq-subject-colls .odq-subject-colls__note{
	margin:-10px 0 18px;text-align:left;   /* il contenitore della bacheca centra il testo */
	font-family:var(--q-sans);font-size:14px;line-height:1.4;color:var(--q-muted);
}

/* --- Blocco riassuntivo dei quiz chiusi (ospite) --- */
.odq-quiz-content .odq-subject-locked{
	margin:34px 0 0;padding:22px 24px 24px;
	background:var(--q-surface);border:1px solid var(--q-line);border-radius:18px;
	box-shadow:0 22px 46px -30px rgba(27,24,48,.55);
	text-align:center;
}
.odq-quiz-content .odq-subject-locked__lead{
	margin:0 0 12px;font-family:var(--q-sans);font-size:17px;line-height:1.4;color:var(--q-body);
}
.odq-quiz-content .odq-subject-locked__lead strong{color:var(--q-ink);}
.odq-quiz-content .odq-subject-locked__types{
	list-style:none;margin:0 0 18px;padding:0;
	display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px;
}
.odq-quiz-content .odq-subject-locked__types li{
	display:inline-flex;align-items:center;gap:6px;margin:0;padding:5px 11px;border-radius:999px;
	background:var(--q-surface-2);font-family:var(--q-sans);font-size:13px;font-weight:600;color:var(--q-body);
}
.odq-quiz-content .odq-subject-locked__types b{color:var(--q-ink);font-weight:800;}
/* Il pulsante esce da compButton() come `.odq-quiz-button`, quadrato e bordato: stile del
   motore, ancora in uso nelle schermate di gioco. Qui, e solo qui, prende la pillola viola
   degli altri inviti della pagina («Area» in testata). */
.odq-quiz-content .odq-subject-locked a.odq-subject-locked__cta{
	display:inline-flex;align-items:center;gap:8px;
	padding:12px 26px;border:0;border-radius:999px;
	background:var(--q-purple);color:#fff !important;text-decoration:none;
	font-family:var(--q-sans);font-size:15px;font-weight:700;line-height:1.2;
	box-shadow:0 10px 22px -12px var(--q-purple);transition:filter .14s ease;
}
.odq-quiz-content .odq-subject-locked a.odq-subject-locked__cta:hover{filter:brightness(1.08);}
@media (max-width:640px){
	.odq-quiz-content .odq-subject-locked{padding:18px 16px 20px;}
	.odq-quiz-content .odq-subject-locked__lead{font-size:16px;}
}

/* ==================================================================
   PREMIUM CONGELATO (15 set. 2026) — collezioni «da giocare subito» / «Speciali»
   Nessun colore nuovo: verde e viola sono quelli del nastro della landing e dei badge delle
   correlate (`.odq-cl-ribbon`, `.odq-cl-rc-badge`). Testi e regola in core/access.php.
   ================================================================== */

/* Etichetta di accesso sulla cover della card, solo per l'ospite: stessa posizione della
   corona Premium, che con il Premium spento non esce. */
.odq-quiz-content .o-collection-card .odq-coll-access{
	position:absolute;top:10px;left:10px;z-index:2;max-width:calc(100% - 20px);
	display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
	padding:5px 10px;border-radius:12px;color:#fff;
	font-family:var(--q-sans);font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1.2;
	box-shadow:0 2px 6px rgba(27,24,48,.18);
}
.odq-quiz-content .o-collection-card .odq-coll-access.is-free{background:rgba(47,174,47,.92);}
.odq-quiz-content .o-collection-card .odq-coll-access.is-premium{background:rgba(90,47,208,.92);}
.odq-quiz-content .o-collection-card .odq-coll-access small{
	font-size:10px;font-weight:600;letter-spacing:0;text-transform:none;opacity:.92;
}

/* Sottotitolo del gruppo in bacheca («Senza registrazione», «Gratis per chi ha un account»),
   sotto l'h2 col filetto: stessa misura della nota delle collezioni sulle pagine materia. */
.odq-quiz-content .o-quiz-collections > .odq-coll-group-sub{
	margin:-12px 0 18px;text-align:left;
	font-family:var(--q-sans);font-size:14px;line-height:1.4;color:var(--q-muted);
}

/* Landing collezione giocabile da ospite: il link «Registrati gratis» nella riga sotto il CTA. */
.odq-quiz-content .odq-coll-landing .odq-cl-reassure a{color:var(--q-purple);font-weight:700;text-decoration:underline;white-space:nowrap;}
.odq-quiz-content .odq-coll-landing .odq-cl-play-block{scroll-margin-top:90px;}

/* «Porta questa collezione sul tuo sito» (26 set. 2026, sections/collection-share.php):
   in fondo alla landing e sotto la lista della vista di gioco. Stesso disegno a
   fisarmonica delle FAQ (`.odq-cl-qa`). La card nell'anteprima ha stili inline: sono
   quelli che vedrà chi la incolla, qui non si ritoccano.
   ⚠️ Il pulsante «Copia» è un <button>: il reset di Hello lo colora #c36 su hover/focus
   (0,1,1). `.odq-quiz-content .odq-coll-share .odq-cs-copy` è (0,3,0) e passa sopra. */
.odq-quiz-content .odq-coll-share{margin:34px 0 10px;}
.odq-quiz-content .odq-coll-share .odq-cs{
	background:var(--q-surface);border:1px solid rgba(122,63,242,.28);border-radius:14px;
	padding:4px 20px;box-shadow:0 1px 2px rgba(27,24,48,.04);overflow:hidden;
}
.odq-quiz-content .odq-coll-share .odq-cs summary{
	list-style:none;cursor:pointer;font-family:var(--q-sans);font-weight:700;font-size:15.5px;color:var(--q-ink);
	padding:14px 30px 14px 0;position:relative;display:flex;align-items:center;gap:14px;
}
/* Icona di condivisione nella voce (26/9): la fisarmonica chiusa da sola passava inosservata. */
.odq-quiz-content .odq-coll-share .odq-cs-ico{
	flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
	width:40px;height:40px;border-radius:50%;background:rgba(122,63,242,.1);color:var(--q-purple);
	transition:background .15s ease,color .15s ease;
}
.odq-quiz-content .odq-coll-share .odq-cs-ico svg{display:block;}
.odq-quiz-content .odq-coll-share .odq-cs summary:hover .odq-cs-ico,
.odq-quiz-content .odq-coll-share .odq-cs[open] .odq-cs-ico{background:var(--q-purple);color:#fff;}
.odq-quiz-content .odq-coll-share .odq-cs summary::-webkit-details-marker{display:none;}
.odq-quiz-content .odq-coll-share .odq-cs summary::after{
	content:"";position:absolute;right:2px;top:50%;width:11px;height:11px;margin-top:-7px;
	border-right:2px solid var(--q-purple);border-bottom:2px solid var(--q-purple);
	transform:rotate(45deg);transition:transform .2s ease;
}
.odq-quiz-content .odq-coll-share .odq-cs[open] summary::after{transform:rotate(-135deg);}
.odq-quiz-content .odq-coll-share .odq-cs-body{padding:0 0 20px;}
.odq-quiz-content .odq-coll-share .odq-cs-lead{font-family:var(--q-sans);font-size:15px;line-height:1.6;color:var(--q-body);margin:0 0 18px;}
.odq-quiz-content .odq-coll-share .odq-cs-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px;align-items:start;}
.odq-quiz-content .odq-coll-share .odq-cs-code{display:flex;flex-direction:column;gap:10px;min-width:0;}
.odq-quiz-content .odq-coll-share .odq-cs-code label{font-family:var(--q-sans);font-weight:700;font-size:13px;color:var(--q-muted);margin:0;}
.odq-quiz-content .odq-coll-share .odq-cs-code textarea{
	width:100%;box-sizing:border-box;min-height:150px;resize:vertical;margin:0;
	font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--q-body);
	background:var(--q-ground);border:1px solid var(--q-line);border-radius:10px;padding:12px;
}
.odq-quiz-content .odq-coll-share .odq-cs-copy{
	align-self:flex-start;cursor:pointer;
	font-family:var(--q-sans);font-weight:700;font-size:14px;line-height:1;
	color:#fff;background:var(--q-purple);border:0;border-radius:999px;padding:12px 22px;
	transition:filter .14s ease;
}
.odq-quiz-content .odq-coll-share .odq-cs-copy:hover,
.odq-quiz-content .odq-coll-share .odq-cs-copy:focus{background:var(--q-purple);color:#fff;filter:brightness(1.1);}
.odq-quiz-content .odq-coll-share .odq-cs-copy:focus-visible{outline:2px solid var(--q-ink);outline-offset:2px;}
@media (max-width:640px){
	.odq-quiz-content .odq-coll-share .odq-cs{padding:4px 16px;}
	.odq-quiz-content .odq-coll-share .odq-cs-grid{grid-template-columns:minmax(0,1fr);}
}

/* Barra di condivisione social della collezione (26 set. 2026, sections/collection-social.php):
   nell'hero della landing e nell'intestazione della vista di gioco. Stesso disegno di
   `.odg-share` degli articoli (hub.css, che qui non si carica): cerchi outline, colore della
   rete su hover. Il «copia link» usa `[data-share-copy]` di site-templates.js, che mette
   `.is-copied`. Selettori a (0,3,0): battono `a:visited` del kit e il #c36 di Hello sui <button>. */
.odq-quiz-content .odq-social{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 0;}
.odq-quiz-content .odq-social .odq-social-label{
	font-family:var(--q-sans);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
	color:var(--q-muted);margin-right:4px;
}
.odq-quiz-content .odq-social .odq-social-btn{
	--c:var(--q-purple);
	display:inline-flex;align-items:center;justify-content:center;position:relative;
	width:38px;height:38px;padding:0;margin:0;box-sizing:border-box;
	border:1px solid var(--q-line);border-radius:999px;background:#fff;color:var(--q-muted);
	cursor:pointer;text-decoration:none;-webkit-appearance:none;appearance:none;
	transition:color .18s ease,border-color .18s ease,background-color .18s ease,transform .18s ease;
}
.odq-quiz-content .odq-social .odq-social-btn:hover,
.odq-quiz-content .odq-social .odq-social-btn:focus-visible{color:#fff;background:var(--c);border-color:var(--c);transform:translateY(-2px);}
.odq-quiz-content .odq-social .odq-social-btn svg{display:block;}
.odq-quiz-content .odq-social .odq-social-btn--whatsapp{--c:#25d366;}
.odq-quiz-content .odq-social .odq-social-btn--facebook{--c:#1877f2;}
.odq-quiz-content .odq-social .odq-social-btn--x{--c:#000;}
.odq-quiz-content .odq-social .odq-social-btn--telegram{--c:#229ed9;}
.odq-quiz-content .odq-social .odq-social-copied{
	position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
	background:var(--q-ink);color:#fff;font-family:var(--q-sans);font-size:11px;font-weight:600;
	padding:3px 9px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;
	transition:opacity .18s ease,transform .18s ease;
}
.odq-quiz-content .odq-social .odq-social-btn--copy.is-copied .odq-social-copied{opacity:1;transform:translateX(-50%) translateY(0);}
/* Telefono: etichetta sopra e le sei icone su una riga (con l'etichetta accanto, «copia» restava solo a capo). */
@media (max-width:480px){
	.odq-quiz-content .odq-social .odq-social-label{flex:0 0 100%;margin:0 0 2px;}
	.odq-quiz-content .odq-coll-share .odq-cs summary{font-size:14.5px;gap:10px;}
	.odq-quiz-content .odq-coll-share .odq-cs-ico{width:34px;height:34px;}
	.odq-quiz-content .odq-coll-share .odq-cs-ico svg{width:18px;height:18px;}
}
@media print{.odq-quiz-content .odq-social{display:none !important;}}

/* ======================================== QUIZ DEL GIORNO APERTO A TUTTI (30/09/2026) ===
   Card della pagina /quiz-del-giorno/ (o_Daily::panel, arriva via AJAX) e riquadro del
   SuperBonus per l'ospite (o_Dayquiz::dayquizPanel). Il posto della card è riservato
   (min-height) perché il testo sotto non salti quando arriva. Il pulsante ha la forma di
   `.odq-cl-btn`, la CTA viola del sito. */
.odq-quiz-content .odq-page-lead{font-family:var(--q-sans);font-size:16px;line-height:1.55;color:var(--q-body);margin:2px 0 22px;text-wrap:pretty;}
/* Dalla barra punteggi lo stesso stacco che c'è fra i suoi riquadri (gap 10px). */
.odq-quiz-content .odq-daily-slot{min-height:230px;margin-top:10px;}
.odq-quiz-content .odq-daily-card{
	background:var(--q-surface,#fff);border:1px solid var(--q-line,#e6e3f0);border-radius:18px;
	padding:22px 24px 24px;box-shadow:0 14px 34px -22px rgba(40,20,90,.35);
	font-family:var(--q-sans);
}
.odq-quiz-content .odq-daily-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 14px;}
.odq-quiz-content .odq-daily-date{font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--q-muted);}
.odq-quiz-content .odq-daily-type{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:var(--q-surface-2,#f5f3fa);font-weight:700;font-size:13px;color:var(--q-ink);}
.odq-quiz-content .odq-daily-type .odq-row-dot{width:10px;height:10px;border-radius:50%;background:currentColor;display:inline-block;}
.odq-quiz-content .odq-daily-coin{
	margin-left:auto;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
	width:56px;height:56px;border-radius:50%;
	background:radial-gradient(circle at 35% 30%,#ffe08a,#e0a94a 70%);color:#5b3a00;
	font-weight:800;font-size:18px;line-height:1;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12);
}
.odq-quiz-content .odq-daily-coin em{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px;}
.odq-quiz-content .odq-daily-coin.is-guest{background:var(--q-surface-2,#f5f3fa);color:var(--q-muted);box-shadow:none;border:1px dashed var(--q-line,#d9d4ea);}
.odq-quiz-content .odq-daily-title{font-family:var(--q-serif);font-weight:700;font-size:clamp(1.4rem,3vw,1.8rem);line-height:1.2;color:var(--q-ink);margin:0 0 16px;}
.odq-quiz-content .odq-daily-play{
	display:inline-flex;align-items:center;gap:9px;font-family:var(--q-sans);font-weight:700;font-size:15.5px;
	color:#fff !important;text-decoration:none;padding:14px 26px;border-radius:12px;border:0;cursor:pointer;
	background:linear-gradient(135deg,#7a3ff2,#5a2fd0);box-shadow:0 10px 22px -6px rgba(122,63,242,.55);
	transition:transform .15s ease,box-shadow .15s ease;
}
/* Il tema padre colora di #c36 ogni <button> su hover/focus. */
.odq-quiz-content .odq-daily-play:hover,.odq-quiz-content .odq-daily-play:focus{background:linear-gradient(135deg,#7a3ff2,#5a2fd0);color:#fff !important;transform:translateY(-2px);box-shadow:0 16px 30px -8px rgba(122,63,242,.62);}
.odq-quiz-content .odq-daily-play.is-loading{opacity:.7;cursor:progress;transform:none;}
.odq-quiz-content .odq-daily-play i{font-size:18px;}
.odq-quiz-content .odq-daily-note{margin:14px 0 0;font-size:14px;color:var(--q-muted);}
.odq-quiz-content .odq-daily-note a,.odq-quiz-content .odq-daily-more a{color:var(--q-purple);font-weight:700;}
.odq-quiz-content .odq-daily-result{margin:0 0 8px;font-weight:700;font-size:16px;color:var(--q-ink);}
.odq-quiz-content .odq-daily-result--correct{color:#1f8a3b;}
.odq-quiz-content .odq-daily-result--wrong{color:#c0392b;}
.odq-quiz-content .odq-daily-next{margin:0 0 16px;font-size:14px;color:var(--q-muted);}
.odq-quiz-content .odq-daily-countdown{font-weight:800;color:var(--q-ink);font-variant-numeric:tabular-nums;}
.odq-quiz-content .odq-daily-signup{
	display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:12px;
	border:1.5px solid var(--q-purple,#7a3ff2);color:var(--q-purple) !important;font-weight:700;font-size:14.5px;text-decoration:none;
}
.odq-quiz-content .odq-daily-signup:hover{background:rgba(122,63,242,.08);}
.odq-quiz-content .odq-daily-msg{margin:0;color:var(--q-muted);}
.odq-quiz-content .odq-daily-more{margin:14px 2px 0;font-family:var(--q-sans);font-size:14px;color:var(--q-muted);}
/* Dentro la card del SuperBonus (#o-quiz-dayquiz), che ha già bordo e fondo: niente seconda cornice. */
.odq-quiz-content .odq-superbonus-guest{
	background:none;border:0;padding:0;
	font-family:var(--q-sans);font-size:15px;line-height:1.55;color:var(--q-body);
}
.odq-quiz-content .odq-superbonus-guest > p:first-child{margin:0 0 16px;}
.odq-quiz-content #o-store-dayquiz #o-quiz-list:empty{display:none;}
@media (max-width:480px){
	.odq-quiz-content .odq-daily-card{padding:18px 16px 20px;}
	.odq-quiz-content .odq-daily-play,.odq-quiz-content .odq-daily-signup{width:100%;justify-content:center;}
}

/* SuperBonus: a che punto della coda sei (o_Dayquiz::dayquizProgress, 30/09/2026). */
.odq-quiz-content #o-quiz-dayquiz .odq-superbonus-progress{margin:14px 0 0;font-family:var(--q-sans);font-size:14px;font-weight:600;color:var(--q-muted);}