/* ===================================================================
   SFIDE A TEMA — sfide/index.html, verifica.html, admin.html
   I colori stanno in css/tema.css (sezione 2-ter): qui solo variabili.
   Un tocco di audacia in un posto solo: il cielo con la luna in testa e
   la candela che fa da cronometro. Il resto è sobrio.
   =================================================================== */
@import url("../css/tema.css?v=5");

.sf-pagina { background: var(--bg); }

/* [hidden] deve vincere sui display:grid/flex qui sotto */
.sf [hidden], .sf-pagina [hidden] { display: none !important; }

.sf-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------ il cielo */
.sf-cielo {
    position: relative;
    overflow: hidden;
    /* in fondo, sotto le colline, il cielo torna scuro: lì sopra ci sono i
       pannelli, e la scena finisce dove cominciano */
    background: linear-gradient(180deg, var(--sfida-notte) 0%, var(--sfida-notte-2) calc(100% - 64px),
                                var(--sfida-notte) calc(100% - 64px));
    color: var(--sfida-luna);
    min-height: 340px;
    display: flex;
    align-items: flex-start;
}

/* css/mobile.css dà a «main section:first-of-type» un padding con
   !important (pensato per gli hero delle altre pagine): qui il cielo ha
   già il suo, e la scena è disegnata a filo. */
main.sf section.sf-cielo:first-of-type { padding: 0 !important; }

.sf-scena {
    position: absolute; left: 0; right: 0; top: 0; bottom: 63px;
    width: 100%; height: calc(100% - 63px);
}
.sf-pagina .brand { text-decoration: none; color: inherit; }

.sf-stelle circle { fill: var(--sfida-luna); opacity: .7; }
.sf-luna { fill: var(--sfida-luna); }
.sf-luna-ombra { fill: var(--sfida-notte-2); opacity: .12; }
.sf-pipistrelli path { fill: var(--sfida-notte); }
.sf-colle-lontano { fill: var(--sfida-notte-2); filter: brightness(1.35); }
.sf-castello { fill: var(--sfida-notte); }
.sf-castello .sf-finestra { fill: var(--sfida-zucca); opacity: .9; }
.sf-castello .sf-porta { fill: var(--sfida-notte-2); }
.sf-gambo { fill: var(--sfida-notte-2); }
.sf-colle { fill: var(--sfida-notte); }
.sf-zucche ellipse { fill: var(--sfida-zucca); }
.sf-zucche-faccia path { fill: var(--sfida-notte); }

.sf-cielo-testo {
    position: relative;
    padding: 44px 0 130px;
}

/* Sul telefono si vede solo la parte destra della scena: la luna si
   sposta in alto a destra e rimpicciolisce, così non finisce sotto il
   titolo (che è dello stesso colore). */
@media (max-width: 700px) {
    .sf-cielo-testo { padding: 28px 16px 110px; box-sizing: border-box; width: 100%; }
    .sf-castello { opacity: .45; }
    .sf-castello .sf-finestra { display: none; }
    .sf-orto { display: none; }   /* sul telefono finirebbero sotto il conto alla rovescia */
    .sf-luna-gruppo { transform-box: fill-box; transform-origin: center; transform: translate(215px, -75px) scale(.4); }
}

.sf-sopratitolo {
    margin: 0 0 6px;
    font-size: .95rem;
    opacity: .8;
}

.sf-titolo {
    margin: 0;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 800;
    font-size: clamp(2.1rem, 6.4vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: .01em;
    color: var(--sfida-luna);
    max-width: 14ch;
}

.sf-descrizione {
    margin: 14px 0 0;
    max-width: 46ch;
    font-size: 1.08rem;
    line-height: 1.5;
}

.sf-stato {
    display: inline-block;
    margin: 18px 0 0;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(244, 230, 184, .12);
    border: 1px solid rgba(244, 230, 184, .35);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- la griglia */
.sf-griglia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 28px;
    margin-top: -64px;
    position: relative;
    align-items: start;
}

@media (max-width: 900px) {
    .sf-griglia { grid-template-columns: minmax(0, 1fr); margin-top: -56px; }
}

.sf-pannello,
.sf-classifica {
    box-sizing: border-box;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: 0 14px 40px rgba(26, 18, 48, .18);
    padding: 26px;
}

@media (max-width: 520px) {
    .sf-pannello, .sf-classifica { padding: 18px 16px; }
}

.sf-pannello h2,
.sf-classifica h2 {
    margin: 0 0 12px;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: 1.45rem;
    color: var(--sfida-viola);
}

.sf-regole {
    margin: 0 0 22px;
    padding-left: 1.2em;
    line-height: 1.55;
    color: var(--ink-2);
}
.sf-regole li { margin-bottom: 4px; }
.sf-regole strong { color: var(--ink); }

/* ---------------------------------------------------------- il modulo */
.sf-modulo { display: grid; gap: 14px; }

.sf-campo { display: grid; gap: 6px; font-weight: 600; color: var(--ink); }
.sf-campo em { font-style: normal; font-weight: 400; color: var(--ink-2); }

.sf-campo input,
.sf-casella-riga input {
    font: inherit;
    font-size: 1.05rem;
    min-height: 48px;
    padding: 10px 14px;
    border: 2px solid var(--border-gray);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
    width: 100%;
    box-sizing: border-box;
}
.sf-campo input:focus,
.sf-casella-riga input:focus {
    outline: none;
    border-color: var(--sfida-viola);
    box-shadow: 0 0 0 4px rgba(74, 42, 122, .18);
}

.sf-errore {
    margin: 0;
    color: var(--sfida-sbagliato);
    font-weight: 600;
}

.sf-nota { margin: 0; font-size: .88rem; color: var(--ink-2); line-height: 1.5; }
.sf-nota a { color: var(--sfida-viola); }

.sf-bottone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 22px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--sfida-viola);
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 1.02rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform .08s ease, filter .15s ease;
}
.sf-bottone:hover { filter: brightness(1.12); }
.sf-bottone:active { transform: translateY(1px); }
.sf-bottone:focus-visible { outline: 3px solid var(--sfida-zucca); outline-offset: 3px; }
.sf-bottone[disabled] { opacity: .55; cursor: wait; }
.sf-bottone-grande { min-height: 54px; font-size: 1.1rem; }
.sf-bottone-chiaro {
    background: transparent;
    color: var(--sfida-viola);
    box-shadow: inset 0 0 0 2px var(--sfida-viola);
}

/* -------------------------------------------------------- la partita */
.sf-partita { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

.sf-hud {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 14px;
}
.sf-hud-voce { display: grid; gap: 2px; }
.sf-hud-etichetta { font-size: .82rem; color: var(--ink-2); }
.sf-hud-valore {
    font-family: 'Fredoka', var(--font-body);
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--sfida-viola);
    font-variant-numeric: tabular-nums;
}

/* La candela: la cera si accorcia col tempo (--quota da 1 a 0, la scrive
   sfide.js). Quando resta poco, la fiamma diventa rossa. */
.sf-candela {
    --quota: 1;
    margin-left: auto;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}
.sf-candela svg { width: 34px; height: 82px; overflow: visible; }
.sf-cera {
    fill: var(--sfida-luna);
    stroke: rgba(74, 42, 122, .35);
    stroke-width: 1;
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transform: scaleY(max(.06, var(--quota)));
}
.sf-stoppino, .sf-fiamma, .sf-fiamma-alone {
    transform: translateY(calc((1 - max(.06, var(--quota))) * 62px));
}
.sf-stoppino { fill: var(--ink); }
.sf-piattino { fill: var(--sfida-viola); }
.sf-fiamma { fill: var(--sfida-zucca); transform-origin: 20px 24px; }
.sf-fiamma-alone { fill: var(--sfida-zucca); opacity: .18; }
.sf-candela.poco .sf-fiamma { fill: var(--sfida-sbagliato); }
.sf-secondi {
    font-family: 'Fredoka', var(--font-body);
    font-weight: 600;
    font-size: 1.6rem;
    min-width: 2.2ch;
    text-align: right;
    color: var(--sfida-viola);
    font-variant-numeric: tabular-nums;
}
.sf-candela.poco .sf-secondi { color: var(--sfida-sbagliato); }

@media (prefers-reduced-motion: no-preference) {
    .sf-fiamma { animation: sf-tremola 1.3s ease-in-out infinite alternate; }
    @keyframes sf-tremola {
        from { scale: 1 1; rotate: -3deg; }
        to   { scale: .92 1.08; rotate: 3deg; }
    }
}

.sf-foglio {
    background: var(--sfida-carta);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(74, 42, 122, .16);
    padding: 6px;
}
.sf-tela { display: block; width: 100%; height: auto; }

.sf-avviso {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: rgba(194, 40, 58, .08);
    color: var(--sfida-sbagliato);
    font-weight: 600;
}

.sf-risposta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 16px; }
.sf-casella-riga { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sf-casella-riga input { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.sf-unita { color: var(--ink-2); white-space: nowrap; }
.sf-unita:empty { display: none; }
@media (max-width: 420px) {
    .sf-risposta { grid-template-columns: minmax(0, 1fr); }
}

.sf-scelte {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}
@media (max-width: 520px) { .sf-scelte { grid-template-columns: minmax(0, 1fr); } }

.sf-scelta {
    display: block;
    min-height: 56px;
    padding: 6px;
    border: 2px solid rgba(74, 42, 122, .25);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
}
.sf-scelta:hover { border-color: var(--sfida-viola); }
.sf-scelta:focus-visible { outline: 3px solid var(--sfida-zucca); outline-offset: 2px; }
.sf-scelta canvas { display: block; width: 100%; height: auto; pointer-events: none; }
.sf-scelta[disabled] { cursor: default; opacity: .7; }
.sf-scelta.giusta { border-color: var(--sfida-giusto); background: rgba(26, 127, 69, .08); opacity: 1; }
.sf-scelta.sbagliata { border-color: var(--sfida-sbagliato); background: rgba(194, 40, 58, .06); opacity: 1; }

.sf-esito {
    min-height: 1.6em;
    margin: 14px 0 0;
    font-weight: 700;
    font-size: 1.05rem;
}
.sf-esito.giusta { color: var(--sfida-giusto); }
.sf-esito.sbagliata { color: var(--sfida-sbagliato); }

/* -------------------------------------------------------- il risultato */
.sf-ris-punti {
    margin: 4px 0 14px;
    font-family: 'Fredoka', var(--font-body);
    font-weight: 600;
    color: var(--sfida-zucca-testo);
    line-height: 1;
}
.sf-ris-punti span:first-child { font-size: clamp(3rem, 12vw, 4.6rem); }
.sf-ris-punti span:last-child { font-size: 1.3rem; margin-left: 4px; }

.sf-ris-dati {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 12px;
}
.sf-ris-dati div { background: var(--sfida-carta); border-radius: var(--radius-sm); padding: 10px 12px; }
.sf-ris-dati dt { font-size: .82rem; color: var(--ink-2); }
.sf-ris-dati dd { margin: 2px 0 0; font-weight: 700; font-size: 1.15rem; color: var(--sfida-viola); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .sf-ris-dati { grid-template-columns: minmax(0, 1fr); } }

.sf-ris-migliore { margin: 0 0 18px; color: var(--ink-2); }

.sf-attestato {
    display: grid;
    justify-items: start;
    gap: 8px;
    padding: 16px;
    margin-bottom: 18px;
    border-radius: var(--radius-sm);
    border: 2px dashed rgba(74, 42, 122, .3);
}
.sf-attestato p { margin: 0; }
.sf-codice {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: .06em;
    color: var(--sfida-viola);
    user-select: all;
}

/* ------------------------------------------------------- la classifica */
.sf-classifica { position: sticky; top: 16px; }
@media (max-width: 900px) { .sf-classifica { position: static; } }

.sf-classifica-sotto { margin: -6px 0 12px; font-size: .88rem; color: var(--ink-2); }

.sf-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 620px; overflow-y: auto; }
.sf-lista li {
    display: grid;
    grid-template-columns: 2.2em minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 8px;
    padding: 8px 6px;
    border-radius: 8px;
}
.sf-lista li:nth-child(odd) { background: var(--gray-light); }
.sf-lista li.mio { background: rgba(240, 138, 36, .16); box-shadow: inset 3px 0 0 var(--sfida-zucca); }
.sf-posto { font-weight: 800; color: var(--sfida-viola); font-variant-numeric: tabular-nums; }
.sf-lista li:nth-child(-n+3) .sf-posto { color: var(--sfida-zucca-testo); }
.sf-chi { min-width: 0; }
.sf-chi b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-chi small { display: block; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-quanto { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.sf-quanto small { display: block; font-weight: 400; color: var(--ink-2); }
.sf-vuota { margin: 0; color: var(--ink-2); }

.sf-fondo { text-align: center; margin: 36px auto 48px; color: var(--ink-2); }
.sf-fondo a { color: var(--sfida-viola); font-weight: 600; }

/* ---------------------------------------------------------- la verifica */
.sf-verifica { max-width: 640px; margin: -64px auto 48px; position: relative; }
.sf-verifica-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.sf-verifica-riga input { text-transform: uppercase; font-family: var(--font-mono); letter-spacing: .05em; }
@media (max-width: 420px) { .sf-verifica-riga { grid-template-columns: minmax(0, 1fr); } }
.sf-verdetto { margin-top: 18px; padding: 16px; border-radius: var(--radius-sm); }
.sf-verdetto.valido { background: rgba(26, 127, 69, .08); border: 2px solid var(--sfida-giusto); }
.sf-verdetto.non-valido { background: rgba(194, 40, 58, .06); border: 2px solid var(--sfida-sbagliato); }
.sf-verdetto h3 { margin: 0 0 8px; font-size: 1.1rem; }
.sf-verdetto.valido h3 { color: var(--sfida-giusto); }
.sf-verdetto.non-valido h3 { color: var(--sfida-sbagliato); }
.sf-verdetto dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.sf-verdetto dt { color: var(--ink-2); }
.sf-verdetto dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.sf-cielo-basso { min-height: 0; }
.sf-cielo-basso .sf-cielo-testo { padding-bottom: 96px; }
.sf-torna { color: var(--sfida-luna); }
.sf-campo-input {
    font: inherit; font-size: 1.1rem; min-height: 48px; padding: 10px 14px;
    border: 2px solid var(--border-gray); border-radius: var(--radius-sm);
    width: 100%; box-sizing: border-box; color: var(--ink); background: #fff;
}
.sf-campo-input:focus { outline: none; border-color: var(--sfida-viola); box-shadow: 0 0 0 4px rgba(74, 42, 122, .18); }

/* ------------------------------------------------------------ il pannello */
.sf-admin-corpo { display: grid; gap: 22px; margin-top: -64px; position: relative; padding-bottom: 48px; }
.sf-admin-corpo > div { display: grid; gap: 22px; }
.sf-admin-testata { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sf-admin-testata h2 { margin: 0; }
.sf-azioni { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-tabella-scorre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sf-tabella { width: 100%; border-collapse: collapse; font-size: .95rem; }
.sf-tabella th { text-align: left; font-weight: 600; color: var(--ink-2); padding: 8px; border-bottom: 2px solid var(--line); white-space: nowrap; }
.sf-tabella td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sf-tabella tr.squalificato td { opacity: .5; text-decoration: line-through; }
.sf-tabella tr.squalificato td:last-child { text-decoration: none; opacity: 1; }
.sf-tabella .sf-mini { min-height: 44px; padding: 6px 12px; font-size: .9rem; }
.sf-tabella td.sf-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-tabella code { font-family: var(--font-mono); font-size: .85rem; }
.sf-tabella small { display: block; color: var(--ink-2); }
.sf-celle-azioni { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.sf-etichetta { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.sf-etichetta.aperto { background: rgba(26, 127, 69, .12); color: var(--sfida-giusto); }
.sf-etichetta.attesa { background: rgba(240, 138, 36, .16); color: var(--sfida-zucca-testo); }
.sf-etichetta.chiuso { background: var(--gray-light); color: var(--ink-2); }
.sf-etichetta.bozza { background: rgba(74, 42, 122, .1); color: var(--sfida-viola); }
.sf-modulo-admin { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-modulo-admin .sf-largo { grid-column: 1 / -1; }
@media (max-width: 760px) { .sf-modulo-admin { grid-template-columns: minmax(0, 1fr); } }
.sf-spunta { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; }
.sf-spunta input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--sfida-viola); flex: none; }
.sf-dettaglio-riga td { background: var(--sfida-carta); }
.sf-dettaglio-lista { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; }
.sf-dettaglio-lista li { line-height: 1.45; }
.sf-dettaglio-lista .giusta { color: var(--sfida-giusto); font-weight: 600; }
.sf-dettaglio-lista .sbagliata { color: var(--sfida-sbagliato); font-weight: 600; }
.sf-anteprima { margin: 16px 0 0; padding-left: 1.4em; display: grid; gap: 14px; }
.sf-anteprima li { line-height: 1.5; white-space: pre-line; }
.sf-anteprima .sf-sol { display: block; color: var(--sfida-giusto); font-weight: 700; white-space: normal; }
.sf-anteprima .sf-fam { display: block; font-size: .82rem; color: var(--ink-2); white-space: normal; }
.sf-fig { display: block; font-family: var(--font-mono); font-size: .9rem; color: var(--sfida-viola); white-space: pre; overflow-x: auto; }
.sf-dettaglio-lista li > span:first-child { white-space: pre-line; }
.sf-tabella code { white-space: nowrap; }

/* lo stesso !important di mobile.css arriva anche ai pannelli che sono
   <section>: si rimette il loro */
main.sf section.sf-pannello { padding: 26px !important; }
@media (max-width: 520px) { main.sf section.sf-pannello { padding: 18px 16px !important; } }
.sf-campo-bottone { align-content: end; }
.sf-campo-bottone .sf-bottone { width: 100%; }
@media (max-width: 760px) { .sf-campo-bottone > span { display: none; } }

/* ---------------------------------------------------- conto alla rovescia */
.sf-conto { margin: 22px 0 0; }
.sf-conto-titolo { margin: 0 0 8px; font-weight: 600; opacity: .9; }
.sf-conto-cifre { display: flex; gap: 10px; flex-wrap: wrap; }
.sf-conto-cifre div {
    min-width: 74px;
    padding: 10px 8px 8px;
    border-radius: var(--radius-sm);
    background: rgba(26, 18, 48, .85);
    border: 1px solid rgba(244, 230, 184, .3);
    text-align: center;
}
.sf-conto-cifre span {
    display: block;
    font-family: 'Fredoka', var(--font-body);
    font-weight: 600;
    font-size: clamp(1.9rem, 6vw, 2.6rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--sfida-luna);
}
.sf-conto.apre .sf-conto-cifre span { color: var(--sfida-zucca); }
.sf-conto-cifre small { display: block; margin-top: 4px; font-size: .78rem; opacity: .85; }
.sf-conto-quando { margin: 8px 0 0; font-size: .92rem; opacity: .85; }
@media (max-width: 420px) {
    .sf-conto-cifre { gap: 6px; }
    .sf-conto-cifre div { min-width: 0; flex: 1; padding: 8px 4px 6px; }
}