/* aspetto.css — Tema dell'interfaccia di Burraco Gold: Dark (predefinito) e Light.
 * Unica fonte dei colori dell'interfaccia: lobby (Next, via <link>) e tavolo (public/bl/index.html).
 * Il tema e' l'attributo data-aspetto="dark|light" su <html> (piu' data-palette, in fondo), applicato prima del primo disegno
 * (copia in localStorage "burraco-aspetto"; la fonte e' profili.preferenze.aspetto).
 * E' indipendente dallo sfondo del tavolo (temi.css, data-tema) e dai dorsi delle carte. */

:root, [data-aspetto="dark"] {
  color-scheme: dark;
  /* fondo delle pagine e superfici — palette "Burraco Gold" (export Line): quasi-nero caldo + oro, PIATTO */
  --a-sfondo: #12100d;
  --a-sfondo-pagina: #12100d;
  --a-barra: #12100d;
  --a-superficie: #1b1814;
  --a-superficie-2: #221e19;
  --a-incavo: #100e0b;
  --a-popup: #1b1814;
  --a-velo: rgba(8, 7, 5, 0.72);
  --a-hover: rgba(255, 255, 255, 0.05);
  --a-bordo: #2c2721;
  --a-bordo-tenue: #2c2721;
  --a-ombra: 0 18px 50px rgba(0, 0, 0, 0.28);
  /* testo */
  --a-testo: #e2dacc;
  --a-forte: #f3eee4;
  --a-tenue: #ada393;
  /* oro: pieno per i pulsanti, "testo" per scritte oro leggibili sullo sfondo */
  --a-oro: #e2b44b;
  --a-oro-chiaro: #f2cc72;
  --a-oro-testo: #e2b44b;
  --a-su-oro: #1b1405;
  /* campi */
  --a-campo: #12100d;
  --a-campo-bordo: #3a342b;
  /* stati */
  --a-ok: #6fd3a0;        --a-ok-sfondo: #16231d;
  --a-errore: #ff9a9a;    --a-errore-sfondo: #2e1716;
  --a-avviso: #f2cc72;    --a-avviso-sfondo: rgba(226, 180, 75, 0.1);   --a-avviso-bordo: rgba(226, 180, 75, 0.32);
  --a-presente: #5fcb8e;  --a-in-partita: #e0806a;
  --a-amico: #8fb4ff;
  --a-squadra-a: #e2b44b; --a-squadra-b: #8fb4ff;
  /* chat */
  --a-bolla: #221e19;
  --a-bolla-mia: rgba(226, 180, 75, 0.14);
  --a-nome-mio: #6fd3a0;

  /* interfaccia del tavolo di gioco (sopra il panno, che resta del colore scelto) */
  --t-pannello: rgba(18, 22, 18, 0.94);
  --t-pannello-grad: linear-gradient(180deg, rgba(30, 34, 30, 0.97), rgba(14, 17, 14, 0.97));
  --t-bordo: rgba(255, 255, 255, 0.14);
  --t-testo: #f6f1e7;
  --t-forte: #ffffff;
  --t-tenue: #a9b5a5;
  --t-riquadro: rgba(255, 255, 255, 0.05);
  --t-bolla: rgba(16, 22, 16, 0.78);
  --t-bolla-testo: #ffffff;
  --t-input: rgba(255, 255, 255, 0.38);
  --t-input-testo: #12130f;
  --t-input-bordo: rgba(255, 255, 255, 0.55);
  --t-scheda: rgba(0, 0, 0, 0.45);
  --t-scheda-testo: #ffffff;
  --t-scheda-tenue: #c9d4c5;
  --t-tasto: rgba(0, 0, 0, 0.45);
  --t-tasto-hover: rgba(0, 0, 0, 0.7);
  --t-tasto-testo: #ffffff;
  --t-barra-velo: rgba(0, 0, 0, 0.6);
  --t-barra-testo: #e9efe4;
  --t-carico: #dfe6d1;
}

/* Light: verde chiaro ed elegante (non bianco/grigio), testi verde scuro, oro brunito per i dettagli */
[data-aspetto="light"] {
  color-scheme: light;
  --a-sfondo: #f7f3ea;
  --a-sfondo-pagina: #f7f3ea;
  --a-barra: #f7f3ea;
  --a-superficie: #ffffff;
  --a-superficie-2: #efe8da;
  --a-incavo: #f3eee2;
  --a-popup: #ffffff;
  --a-velo: rgba(40, 32, 20, 0.38);
  --a-hover: rgba(40, 32, 20, 0.05);
  --a-bordo: #e2d9c8;
  --a-bordo-tenue: #e2d9c8;
  --a-ombra: 0 14px 40px rgba(60, 50, 30, 0.1);
  --a-testo: #3a332a;
  --a-forte: #1c1814;
  --a-tenue: #6b6152;
  --a-oro: #e2b44b;
  --a-oro-chiaro: #d7a63f;
  --a-oro-testo: #8a6210;
  --a-su-oro: #1b1405;
  --a-campo: #f7f3ea;
  --a-campo-bordo: #cfc4b0;
  --a-ok: #1f7a4d;        --a-ok-sfondo: #e6f3ec;
  --a-errore: #b3261e;    --a-errore-sfondo: #fbe9e7;
  --a-avviso: #8a6210;    --a-avviso-sfondo: rgba(226, 180, 75, 0.15);   --a-avviso-bordo: rgba(190, 140, 60, 0.42);
  --a-presente: #2fa36b;  --a-in-partita: #b9503a;
  --a-amico: #2a55b8;
  --a-squadra-a: #8a6210; --a-squadra-b: #2a55b8;
  --a-bolla: #efe8da;
  --a-bolla-mia: #fbf0d6;
  --a-nome-mio: #1f7a4d;

  --t-pannello: rgba(236, 246, 239, 0.96);
  --t-pannello-grad: linear-gradient(180deg, rgba(240, 248, 242, 0.98), rgba(220, 236, 225, 0.98));
  --t-bordo: rgba(20, 70, 40, 0.18);
  --t-testo: #163222;
  --t-forte: #0b2416;
  --t-tenue: #44614f;
  --t-riquadro: rgba(20, 90, 50, 0.08);
  --t-bolla: rgba(236, 246, 239, 0.93);
  --t-bolla-testo: #163222;
  --t-input: rgba(246, 251, 247, 0.88);
  --t-input-testo: #0b2416;
  --t-input-bordo: rgba(255, 255, 255, 0.9);
  --t-scheda: rgba(236, 246, 239, 0.9);
  --t-scheda-testo: #163222;
  --t-scheda-tenue: #44614f;
  --t-tasto: rgba(236, 246, 239, 0.9);
  --t-tasto-hover: #f6fbf7;
  --t-tasto-testo: #163222;
  --t-barra-velo: rgba(230, 243, 234, 0.88);
  --t-barra-testo: #1d3a29;
  --t-carico: #f1f8f2;
}

/* ---------- Rilievo: superfici e pulsanti non piatti (luce dall'alto, ombra sotto) ---------- */
/* Rilievo APPIATTITO per il nuovo design (export Line): superfici piatte, bordi netti da 1px,
   oro pieno, nessuna ombra/gradiente. I token restano per compatibilità ma sono neutri. */
:root, [data-aspetto="dark"] {
  --a-luce: transparent;
  --a-superficie-grad: var(--a-superficie);
  --a-rilievo: none;
  --a-rilievo-basso: none;
  --a-incavo-ombra: none;
  --a-oro-grad: var(--a-oro);
  --a-rilievo-oro: none;
  --a-tasto-grad: none;
}
[data-aspetto="light"] {
  --a-luce: transparent;
  --a-superficie-grad: var(--a-superficie);
  --a-rilievo: none;
  --a-rilievo-basso: none;
  --a-incavo-ombra: none;
  --a-oro-grad: var(--a-oro);
  --a-rilievo-oro: none;
  --a-tasto-grad: none;
}

/* ---------- Temi: i valori --a-* e --t-* di ogni tema (data-palette) in scuro e chiaro sono in public/bl/temi-sito.css
 * (generato da scripts/genera-temi.mjs). Qui sopra resta la base. Il contrasto elevato e' ripetuto in fondo a quel foglio,
 * cosi' vale sopra a qualunque tema. ---------- */

/* ---------- Contrasto elevato (Impostazioni > Accessibilita'): testi pieni, bordi netti, scelte segnate non solo dal colore ---------- */
[data-aspetto="dark"][data-contrasto="alto"] {
  --a-testo: #ffffff; --a-forte: #ffffff; --a-tenue: #e6efe3;
  --a-bordo: rgba(255, 220, 140, 0.95); --a-bordo-tenue: rgba(255, 255, 255, 0.6); --a-campo-bordo: rgba(255, 255, 255, 0.8);
  --a-superficie: #10261b; --a-superficie-2: #0b1d14; --a-incavo: #06120c; --a-popup: #0d2218; --a-barra: #08170f;
  --a-oro-testo: #ffd98a; --a-bolla: #13301f; --a-bolla-mia: #3a3014;
  --t-testo: #ffffff; --t-forte: #ffffff; --t-tenue: #e6efe3; --t-bordo: rgba(255, 255, 255, 0.7);
  --t-pannello: #0b1510; --t-pannello-grad: #0b1510; --t-scheda: #000000; --t-scheda-tenue: #e6efe3; --t-tasto: #000000;
}
[data-aspetto="light"][data-contrasto="alto"] {
  --a-testo: #000000; --a-forte: #000000; --a-tenue: #1c2b22;
  --a-bordo: #6b4a0e; --a-bordo-tenue: rgba(0, 0, 0, 0.55); --a-campo-bordo: rgba(0, 0, 0, 0.75);
  --a-superficie: #ffffff; --a-superficie-2: #f3f3f3; --a-incavo: #ffffff; --a-popup: #ffffff; --a-barra: #ffffff;
  --a-oro-testo: #5a3c00; --a-bolla: #eeeeee; --a-bolla-mia: #f6e7b8;
  --t-testo: #000000; --t-forte: #000000; --t-tenue: #1c2b22; --t-bordo: rgba(0, 0, 0, 0.7);
  --t-pannello: #ffffff; --t-pannello-grad: #ffffff; --t-scheda: #ffffff; --t-scheda-tenue: #1c2b22; --t-tasto: #ffffff;
}
[data-contrasto="alto"] :is([aria-pressed="true"], [aria-checked="true"], [aria-selected="true"]) { outline: 3px solid var(--a-forte); outline-offset: 2px; }
[data-contrasto="alto"] :is(button, a, input, [role="switch"]):focus-visible { outline: 4px solid #ffcc33 !important; outline-offset: 2px; }
[data-contrasto="alto"] .card { box-shadow: 0 0 0 2px #000000, 0 0 0 3.5px #ffffff; }
[data-contrasto="alto"] .card.scelta { box-shadow: 0 0 0 3px #ffcc33, 0 0 0 5px #000000; }

/* ---------- Animazioni ridotte (scelta dell'utente; quella di sistema e' gestita dove serve) ---------- */
[data-animazioni="ridotte"] *, [data-animazioni="ridotte"] *::before, [data-animazioni="ridotte"] *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.05s !important; scroll-behavior: auto !important;
}

/* ---------- Sfondo degli animali dei livelli (design "13. LIVELLI · sfondo animali per tema") ----------
 * Le immagini (public/livelli) hanno lo sfondo trasparente: dietro l'animale una tinta chiara del colore del tema.
 * Nei temi chiari Avorio --a-animale non c'e' (initial): ogni animale usa il suo pastello originale (var(--pastello)). */
:root, [data-aspetto="dark"] { --a-animale: #ECE0C8; }
[data-aspetto="light"] { --a-animale: initial; }

/* "Tutto in stampatello" (Impostazioni > Accessibilità; preferenze.js mette html[data-maiuscolo="si"]): tutte le scritte
 * dell'interfaccia in MAIUSCOLO, lobby e tavolo. Restano come sono i campi in cui si scrive (quello che si digita non cambia)
 * e gli elementi con la classe "come-scritto": i NICKNAME dei giocatori restano come li ha scritti ciascuno (maiuscole e
 * minuscole originali). Nella lobby: componente <Nick> (components/lobby/Nick.tsx) o className="come-scritto" sugli
 * elementi che contengono solo il nick. Al tavolo (public/bl): la classe dove il nome sta insieme ad altro ("Tu", "&"),
 * e qui sotto gli elementi del tavolo che contengono sempre e solo il nick (postazioni, menu e popup del giocatore,
 * giocatori in alto su telefono). */
html[data-maiuscolo="si"] body,
html[data-maiuscolo="si"] :is(button, select, option, optgroup, input[type="button"], input[type="submit"]) { text-transform: uppercase; }   /* il browser li rimette a "none" */
html[data-maiuscolo="si"] :is(input:not([type="button"]):not([type="submit"]), textarea, [contenteditable="true"], .come-scritto) { text-transform: none; }
html[data-maiuscolo="si"] :is(.scheda-g .sg-txt > b > i, #menu-g .mg-nome, #profilo-g .pg-testa h2, .tel-g > b) { text-transform: none; }
html[data-maiuscolo="si"] :is(input, textarea)::placeholder { text-transform: uppercase; }