/* assets/css/quiz.css
   Quiz UML (quiz.php). Pagina costruita da zero: schermata iniziale con le modalita, una domanda per schermata
   con grandi aree da toccare, schermata finale. Superfici piene e bordi da 1px; verde e rosso solo per giusto e sbagliato.
   La sfocatura della foto da indovinare fa parte del gioco, non e decorazione. Colori e spaziature da main.css. */

main.qz-pagina {
    width: 100%;
    max-width: calc(760px + var(--sp-4) * 2);
    margin: 0 auto;
    padding: 27px var(--sp-4) 0;
    box-sizing: border-box;
    font-family: var(--font-ui);
    font-variant-numeric: tabular-nums;
    color: var(--text);
    text-align: left;
}
main.qz-pagina a {
    color: inherit;
}
main.qz-pagina button {
    font-family: inherit;
    color: inherit;
}
main.qz-pagina a:focus-visible,
main.qz-pagina button:focus-visible,
main.qz-pagina summary:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}
.qz-schermo[hidden] {
    display: none;
}
.qz-etichetta,
.qz-tipo {
    margin: 0 0 8px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-2);
}
.qz-titolo {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

/* --- Pulsanti --- */
.qz-btn {
    min-height: 44px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 700;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--r-1);
    cursor: pointer;
}
.qz-btn:hover {
    background: var(--surface-2);
}
main.qz-pagina .qz-btn--primo {
    color: var(--voto-testo-scuro);
    background: var(--tile);
    border-color: var(--tile);
}
main.qz-pagina .qz-btn--primo:hover {
    background: #fff;
}
.qz-btn[disabled] {
    opacity: 0.4;
    cursor: default;
}
.qz-btn[hidden] {
    display: none;
}
.qz-link {
    padding: 0;
    font-size: 13px;
    color: var(--text-2) !important;
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* --- Schermata iniziale: sfida del giorno --- */
.qz-giorno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
}
.qz-giorno__testi {
    min-width: 0;
}
.qz-giorno__titolo {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
}
.qz-giorno__stato {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-2);
}
.qz-giorno__azioni {
    flex: none;
}

/* --- Schermata iniziale: modalita libere --- */
.qz-libere {
    margin-top: 40px;
}
.qz-libere__testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
.qz-livelli {
    display: flex;
    flex: none;
    border: 1px solid var(--line);
    border-radius: var(--r-1);
    overflow: hidden;
}
.qz-livelli button {
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
    color: var(--text-2);
    background: none;
    border: 0;
    border-left: 1px solid var(--line);
    cursor: pointer;
}
.qz-livelli button:first-child {
    border-left: 0;
}
.qz-livelli button[aria-checked="true"] {
    font-weight: 700;
    color: var(--text);
    background: var(--surface-2);
    box-shadow: inset 0 -2px 0 var(--text);
}
.qz-modi {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}
.qz-modi li {
    border-bottom: 1px solid var(--line);
}
.qz-modo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 72px;
    padding: 12px 8px;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}
.qz-modo:hover {
    background: var(--surface);
}
.qz-modo__testi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.qz-modo__testi strong {
    font-size: 16px;
    font-weight: 700;
}
.qz-modo__testi span {
    font-size: 13px;
    color: var(--text-2);
}
.qz-modo__record {
    flex: none;
    margin-left: auto;
    font-size: 13px;
    color: var(--text-2);
}
.qz-modo__vai {
    flex: none;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--line);
    border-radius: var(--r-1);
}
.qz-regole {
    margin-top: 24px;
    font-size: 13px;
    color: var(--text-2);
}
.qz-regole summary,
.qz-ripasso summary {
    cursor: pointer;
    color: var(--text);
}
.qz-regole__testo {
    padding-top: 12px;
    line-height: 1.6;
}
.qz-regole__testo ul { margin: 0 0 12px; padding-left: 18px; }
.qz-regole__testo li { margin-bottom: 6px; }
.qz-regole__testo p { margin: 0; }
.qz-regole__testo strong { color: var(--text); font-weight: 700; }
.qz-altro {
    margin: 32px 0 0;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    color: var(--text-2);
}
.qz-altro a {
    color: var(--text) !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.qz-avviso,
.qz-attesa {
    margin: 48px 0;
    font-size: 14px;
    text-align: center;
    color: var(--text-2);
}

/* --- Partita: riga in alto --- */
#qz-partita {
    padding-top: 12px;
}
.qz-hud__riga {
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-size: 13px;
    color: var(--text-2);
}
.qz-hud__conta {
    font-weight: 700;
    color: var(--text);
}
.qz-hud__serie {
    color: var(--text);
}
.qz-hud__serie[hidden] {
    display: none;
}
.qz-hud__punti {
    margin-left: auto;
}
.qz-hud__punti span {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
}
.qz-barra {
    height: 2px;
    margin-top: 10px;
    background: var(--line);
}
.qz-barra span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--text);
    transition: width var(--t) linear;
}

/* --- Partita: la domanda --- */
.qz-domanda {
    padding-top: 32px;
    transition: opacity var(--t);
}
.qz-domanda.is-cambio {
    opacity: 0;
}
.qz-testo {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.qz-sotto {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 0;
    font-size: 16px;
    font-weight: 700;
}
.qz-sotto__logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.qz-citazione {
    margin: 16px 0 0;
    padding: 0;
    font-size: 18px;
    line-height: 1.55;
    color: var(--text);
    quotes: "\00AB" "\00BB";
}
.qz-citazione::before { content: open-quote; }
.qz-citazione::after { content: close-quote; }
.qz-media {
    margin: 24px 0 0;
}
.qz-media img {
    display: block;
}
.qz-media--stemma {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
}
.qz-media--stemma img {
    max-width: 150px;
    max-height: 150px;
    object-fit: contain;
}
/* Lo stemma da indovinare e velato, perche quasi tutti hanno il nome scritto dentro: si scopre dopo la risposta */
.qz-media--stemma {
    overflow: hidden;
}
.qz-media--stemma img {
    transition: filter 300ms linear;
}
.qz-media--stemma.is-velato img {
    filter: blur(5px);
}
.qz-media--foto {
    width: 220px;
    height: 220px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
}
.qz-media--foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: scale(1.08);   /* i bordi sfocati restano fuori dalla cornice */
    transition: filter 600ms linear;
}
.qz-media--volto {
    margin-top: 16px;
}
.qz-media--volto img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    object-position: center top;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
}
.qz-media--coppia {
    display: flex;
    gap: 12px;
}
.qz-vale {
    margin: 10px 0 0;
    font-size: 13px;
    text-align: center;
    color: var(--text-2);
}

/* --- Partita: le risposte --- */
.qz-opzioni {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}
.qz-opzioni--lunghe,
.qz-opzioni--ordine {
    grid-template-columns: minmax(0, 1fr);
}
.qz-op {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    cursor: pointer;
    transition: background-color var(--t), border-color var(--t), opacity var(--t);
}
.qz-op:hover:not([disabled]) {
    background: var(--surface-2);
    border-color: var(--text-2);
}
.qz-op[disabled] {
    cursor: default;
    opacity: 1;
}
.qz-op__t {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}
.qz-opzioni--lunghe .qz-op {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
}
.qz-op__img {
    flex: none;
    width: 36px;
    height: 36px;
    object-fit: contain;
}
.qz-op__img--volto {
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    background: var(--surface-2);
}
/* Vero o falso: due grandi aree */
.qz-opzioni--vf .qz-op {
    justify-content: center;
    min-height: 96px;
    font-size: 20px;
    text-align: center;
}
.qz-opzioni--vf .qz-op__t {
    flex: none;
}
/* Confronto tra due giocatori: due riquadri alti con la foto */
.qz-opzioni--duello .qz-op {
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    min-height: 240px;
    padding: 24px 16px;
    font-size: 18px;
    text-align: center;
}
.qz-opzioni--duello .qz-op__t {
    flex: none;
}
.qz-opzioni--duello .qz-op__img {
    width: 128px;
    height: 128px;
    border: 1px solid var(--line);
}
/* Metti in ordine: il numero a destra */
.qz-opzioni--ordine {
    display: flex;
    flex-direction: column;
}
.qz-op__n {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 14px;
    font-weight: 800;
    border: 1px solid var(--line);
    border-radius: var(--r-1);
}
.qz-op.is-scelta {
    border-color: var(--text);
}
.qz-op.is-scelta .qz-op__n {
    color: var(--voto-testo-scuro);
    background: var(--tile);
    border-color: var(--tile);
}
.qz-aiuto {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--text-2);
}
.qz-conferma {
    display: block;
    width: 100%;
    margin-top: 16px;
}
.qz-conferma[hidden],
.qz-aiuto[hidden],
.qz-vale[hidden] {
    display: none;
}
/* Dopo la risposta */
.qz-op.is-giusta {
    border-color: var(--win);
    background: rgba(47, 210, 122, 0.14);
}
.qz-op.is-sbagliata {
    border-color: var(--loss);
    background: rgba(255, 77, 94, 0.14);
}
.qz-op.is-spenta {
    opacity: 0.45;
}
.qz-op.is-giusta .qz-op__n {
    border-color: var(--win);
}
.qz-op.is-sbagliata .qz-op__n {
    border-color: var(--loss);
}

/* --- Partita: esito della risposta --- */
.qz-esito {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.qz-esito[hidden] {
    display: none;
}
.qz-esito__testa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--text-2);
}
.qz-esito__testa strong {
    font-size: 18px;
    font-weight: 800;
}
.qz-esito.is-giusto .qz-esito__testa strong { color: var(--win); }
.qz-esito.is-sbagliato .qz-esito__testa strong { color: var(--loss); }
.qz-esito__spiega {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.55;
}
.qz-esito__link {
    display: inline-block;
    font-size: 13px;
    color: var(--text) !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.qz-avanti {
    display: block;
    width: 100%;
    margin-top: 16px;
}
.qz-esci {
    margin: 32px 0 0;
    text-align: center;
}

/* --- Fine --- */
#qz-fine {
    padding-top: 32px;
    text-align: center;
}
.qz-fine__punti {
    margin: 8px 0 0;
    font-size: 72px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
.qz-fine__unita {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-2);
}
.qz-fine__giudizio {
    max-width: 520px;
    margin: 16px auto 0;
    font-size: 18px;
    line-height: 1.5;
}
.qz-fine__numeri {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin: 32px 0 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.qz-fine__numeri div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 8px;
    border-left: 1px solid var(--line);
}
.qz-fine__numeri div:first-child {
    border-left: 0;
}
.qz-fine__numeri dd {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
}
.qz-fine__numeri dt {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-2);
}
.qz-fine__record {
    margin: 16px 0 0;
    font-size: 14px;
    color: var(--text-2);
}
.qz-fine__record[hidden] {
    display: none;
}
.qz-fine__azioni {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}
.qz-ripasso {
    margin-top: 32px;
    font-size: 13px;
    text-align: left;
}
.qz-ripasso[hidden] {
    display: none;
}
.qz-ripasso summary {
    text-align: center;
}
.qz-ripasso__elenco {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}
.qz-ripasso__elenco li {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 2px 12px;
    padding: 12px 0;
    line-height: 1.5;
    border-bottom: 1px solid var(--line);
}
.qz-ripasso__esito {
    grid-row: span 3;
    font-weight: 700;
}
.qz-ripasso__elenco .is-giusto .qz-ripasso__esito { color: var(--win); }
.qz-ripasso__elenco .is-sbagliato .qz-ripasso__esito { color: var(--loss); }
.qz-ripasso__q {
    font-weight: 700;
}
.qz-ripasso__s {
    color: var(--text-2);
}
.qz-ripasso__elenco a {
    grid-column: 2;
    justify-self: start;
    color: var(--text) !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

@media (max-width: 767px) {
    main.qz-pagina {
        padding-top: 20px;
    }
    .qz-giorno {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px;
    }
    .qz-giorno__titolo { font-size: 18px; }
    .qz-giorno__azioni .qz-btn { width: 100%; }
    .qz-libere { margin-top: 32px; }
    .qz-libere__testa {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .qz-livelli button {
        flex: 1;
        min-height: 44px;
    }
    #qz-partita { padding-top: 0; }
    .qz-hud__riga { gap: 10px; }
    .qz-hud__modo { display: none; }
    .qz-domanda { padding-top: 24px; }
    .qz-testo { font-size: 21px; }
    .qz-citazione { font-size: 16px; }
    .qz-media { margin-top: 20px; }
    .qz-media--stemma { height: 170px; }
    .qz-media--stemma img { max-width: 130px; max-height: 130px; }
    .qz-media--foto { width: 200px; height: 200px; }
    .qz-opzioni {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin-top: 20px;
    }
    /* vero o falso e confronto restano affiancati: due grandi aree */
    .qz-opzioni--vf,
    .qz-opzioni--duello {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .qz-opzioni--duello .qz-op {
        min-height: 200px;
        padding: 16px 8px;
        font-size: 15px;
    }
    .qz-opzioni--duello .qz-op__img { width: 96px; height: 96px; }
    .qz-fine__punti { font-size: 56px; }
    .qz-fine__giudizio { font-size: 16px; }
    .qz-fine__numeri dd { font-size: 22px; }
    .qz-fine__azioni { flex-direction: column; }
    .qz-ripasso__elenco li { grid-template-columns: 72px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .qz-domanda,
    .qz-op,
    .qz-barra span,
    .qz-media--foto img,
    .qz-media--stemma img { transition: none; }
}