/* css/letter-scores.css
   ---------------------------------------------------------------
   Stili per la pagina "Punteggi Lettere" (letter-scores.html). Foglio
   dedicato e autonomo, stesso criterio di dictionary.css/manual.css: non
   dipende da host.css. Usa solo le variabili CSS di global.css, quindi
   segue automaticamente il tema chiaro/scuro senza bisogno di regole
   dedicate qui dentro.
   ---------------------------------------------------------------- */

.scores-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 95%;
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem 0 1rem 0;
    gap: 1.2rem;
    box-sizing: border-box;
}

/* Il pulsante "Indietro" non sta più qui dentro: ora è fisso in alto a
   sinistra rispetto alla viewport (.back-btn-fixed, css/global.css), non
   più affiancato al titolo. */
.scores-topbar h1 {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    text-align: center;
}

.scores-intro {
    text-align: center;
    opacity: 0.85;
    font-size: 1rem;
    line-height: 1.5;
    padding: 0 0.5rem;
    /* Stacca il blocco titolo+sottotitolo dal resto del contenuto
       sottostante, oltre al gap già applicato tra tutte le sezioni da
       .scores-page. */
    margin-bottom: 56px;
}

.scores-panel {
    padding: 1.5rem;
}

/* =========================================================
   PANNELLO "STANDARD SCARABEO" — comparsa "a tendina" quando si cambia
   lingua RESTANDO sulla pagina (config.json -> letterScores.animateScarabeoReveal).
   La classe .scores-standard-animating viene aggiunta da js/letter-scores.js
   SOLO nel momento della rivelazione animata (mai al primo caricamento
   pagina, mai quando l'animazione è disattivata da config.json): parte
   chiusa (max-height:0) e la classe .scores-standard-open aggiunta un
   istante dopo fa scorrere il pannello verso il basso. Quando la si
   nasconde di nuovo (lingua senza "frizzy"), il pannello torna invece
   a display:none all'istante, nessuna animazione di chiusura richiesta.
   ========================================================= */
.scores-standard-wrapper.scores-standard-animating {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.4s ease;
}
.scores-standard-wrapper.scores-standard-animating.scores-standard-open {
    /* Abbastanza per il contenuto reale (7 fasce ± qualche riga in più su
       schermi stretti con le lettere che vanno a capo): un valore troppo
       più grande del necessario farebbe SEMBRARE l'animazione più veloce
       del previsto (il contenuto reale verrebbe raggiunto ben prima dei
       0.5s della transition, che però continuerebbe a "salire" oltre,
       invisibile, fino al valore qui sotto). */
    max-height: 800px;
    opacity: 1;
}

.scores-panel-title {
    margin: 0 0 0.4rem 0;
    font-size: 1.3rem;
    text-align: center;
}

.scores-panel-desc {
    text-align: center;
    color: var(--secondary);
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
    line-height: 1.4;
}

/* =========================================================
   SELETTORE LINGUA (pannello "Scrabble Ufficiale", generato a runtime da
   letter-scores.js in base a config.json -> languages)
   ========================================================= */
.scores-lang-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}

.scores-lang-tab {
    cursor: pointer;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.scores-lang-tab.active {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

/* =========================================================
   FASCE DI PUNTEGGIO
   ========================================================= */
/* .scores-tier-* spostati in css/global.css (02/10/2026): condivisi con
   il Punteggio Personalizzato in host/lobby/modalità preconfigurate. */

/* =========================================================
   RESPONSIVE: telefono
   ========================================================= */
@media (max-width: 640px) {
    .scores-panel { padding: 1.1rem; }
}