/* 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;
}

/* ---------- Palette: varianti di colore di Dark e Light (data-palette su <html>) ----------
 * Dark: bosco (predefinita, sopra), notte, vino, ardesia, elite. Light: avorio (predefinita, sopra), cielo, cipria, elite.
 * Ogni palette cambia solo fondi, superfici e testi tenui: l'oro resta il colore del marchio. */
/* Verde (tema base del design, scelto con l'aspetto "verde"): verde scuro e oro */
[data-aspetto="dark"][data-palette="verde"] {
  --a-sfondo: #0f2a21;
  --a-sfondo-pagina: #0f2a21;
  --a-barra: #0f2a21;
  --a-superficie: #14352a;
  --a-superficie-2: #1c4436;
  --a-incavo: #0b211a;
  --a-popup: #14352a;
  --a-velo: rgba(4, 14, 10, 0.72);
  --a-bordo: #285444;
  --a-bordo-tenue: #1f4638;
  --a-testo: #dde8e2;
  --a-forte: #f2f6f1;
  --a-tenue: #9fb8ac;
  --a-oro-testo: #f0c35a;
  --a-campo: #0f2a21;
  --a-campo-bordo: #386b58;
  --a-bolla: #1c4436;
  --a-ok-sfondo: #0b211a;
}
[data-aspetto="dark"][data-palette="notte"] {
  --a-sfondo: #141d33;
  --a-sfondo-pagina: radial-gradient(120% 90% at 50% 0%, #2c3d6b 0%, #1b2749 55%, #10182f 100%);
  --a-barra: rgba(14, 22, 44, 0.95);
  --a-superficie: rgba(34, 49, 90, 0.88);
  --a-incavo: rgba(8, 14, 32, 0.5);
  --a-popup: linear-gradient(180deg, #29396a, #18223f);
  --a-tenue: #bcc7e2;
  --a-campo: rgba(6, 12, 28, 0.5);
  --a-nome-mio: #a9c8ff;
}
[data-aspetto="dark"][data-palette="vino"] {
  --a-sfondo: #3a1620;
  --a-sfondo-pagina: radial-gradient(120% 90% at 50% 0%, #6e2c3b 0%, #47192b 55%, #2b0e18 100%);
  --a-barra: rgba(44, 14, 22, 0.95);
  --a-superficie: rgba(90, 32, 47, 0.88);
  --a-incavo: rgba(30, 8, 14, 0.5);
  --a-popup: linear-gradient(180deg, #612637, #3b1622);
  --a-tenue: #e3c6ca;
  --a-campo: rgba(26, 6, 12, 0.5);
  --a-nome-mio: #f5bca6;
}
[data-aspetto="dark"][data-palette="ardesia"] {
  --a-sfondo: #1d2024;
  --a-sfondo-pagina: radial-gradient(120% 90% at 50% 0%, #3d434b 0%, #262a30 55%, #15171a 100%);
  --a-barra: rgba(20, 22, 25, 0.95);
  --a-superficie: rgba(50, 55, 63, 0.88);
  --a-incavo: rgba(0, 0, 0, 0.35);
  --a-popup: linear-gradient(180deg, #363b43, #202328);
  --a-tenue: #c6cbd2;
  --a-campo: rgba(0, 0, 0, 0.35);
  --a-nome-mio: #a7d7b0;
}
[data-aspetto="light"][data-palette="avorio"] {
  --a-sfondo: #efe6d4;
  --a-sfondo-pagina: radial-gradient(120% 90% at 50% 0%, #fdf8ee 0%, #f2e8d5 55%, #e3d4b6 100%);
  --a-barra: rgba(249, 243, 230, 0.95);
  --a-superficie: rgba(255, 251, 243, 0.94);
  --a-superficie-2: #f0e6d0;
  --a-incavo: #ebe0c9;
  --a-popup: linear-gradient(180deg, #fffaf0, #f1e6cf);
  --a-velo: rgba(40, 28, 10, 0.35);
  --a-hover: rgba(90, 60, 20, 0.07);
  --a-bordo-tenue: rgba(90, 60, 20, 0.17);
  --a-testo: #2f2515; --a-forte: #1d160a; --a-tenue: #6b5a3f;
  --a-campo: #fffdf8; --a-campo-bordo: rgba(90, 60, 20, 0.26);
  --a-bolla: #f3ead7; --a-nome-mio: #7a4e10;
  --t-pannello: rgba(252, 247, 236, 0.96);
  --t-pannello-grad: linear-gradient(180deg, rgba(255, 251, 242, 0.98), rgba(240, 230, 208, 0.98));
  --t-bordo: rgba(90, 60, 20, 0.2);
  --t-testo: #2f2515; --t-forte: #1d160a; --t-tenue: #6b5a3f;
  --t-riquadro: rgba(90, 60, 20, 0.07);
  --t-bolla: rgba(252, 247, 236, 0.94); --t-bolla-testo: #2f2515;
  --t-scheda: rgba(252, 247, 236, 0.9); --t-scheda-testo: #2f2515; --t-scheda-tenue: #6b5a3f;
  --t-tasto: rgba(252, 247, 236, 0.9); --t-tasto-hover: #fffdf8; --t-tasto-testo: #2f2515;
  --t-barra-velo: rgba(246, 238, 222, 0.9); --t-barra-testo: #3a2e1a;
}
[data-aspetto="light"][data-palette="cielo"], [data-aspetto="light"][data-palette="notte"] {
  --a-sfondo: #d6e5f3;
  --a-sfondo-pagina: radial-gradient(120% 90% at 50% 0%, #f0f6fd 0%, #d9e8f6 55%, #bdd3e9 100%);
  --a-barra: rgba(233, 243, 252, 0.95);
  --a-superficie: rgba(245, 250, 255, 0.94);
  --a-superficie-2: #dce9f5;
  --a-incavo: #d4e3f1;
  --a-popup: linear-gradient(180deg, #f6faff, #dce9f5);
  --a-velo: rgba(10, 30, 60, 0.35);
  --a-hover: rgba(20, 60, 110, 0.08);
  --a-bordo-tenue: rgba(20, 50, 90, 0.17);
  --a-testo: #14273d; --a-forte: #0a1a2d; --a-tenue: #46607e;
  --a-campo: #f8fbff; --a-campo-bordo: rgba(20, 50, 90, 0.26);
  --a-bolla: #e2edf8; --a-nome-mio: #1d5fa8;
  --t-pannello: rgba(240, 247, 254, 0.96);
  --t-pannello-grad: linear-gradient(180deg, rgba(246, 250, 255, 0.98), rgba(220, 233, 245, 0.98));
  --t-bordo: rgba(20, 50, 90, 0.2);
  --t-testo: #14273d; --t-forte: #0a1a2d; --t-tenue: #46607e;
  --t-riquadro: rgba(20, 60, 110, 0.08);
  --t-bolla: rgba(240, 247, 254, 0.94); --t-bolla-testo: #14273d;
  --t-scheda: rgba(240, 247, 254, 0.9); --t-scheda-testo: #14273d; --t-scheda-tenue: #46607e;
  --t-tasto: rgba(240, 247, 254, 0.9); --t-tasto-hover: #f8fbff; --t-tasto-testo: #14273d;
  --t-barra-velo: rgba(228, 239, 250, 0.9); --t-barra-testo: #1a3150;
}
[data-aspetto="light"][data-palette="cipria"], [data-aspetto="light"][data-palette="vino"] {
  --a-sfondo: #f1dfdc;
  --a-sfondo-pagina: radial-gradient(120% 90% at 50% 0%, #fdf3f1 0%, #f4e1dd 55%, #e6c7c1 100%);
  --a-barra: rgba(251, 239, 236, 0.95);
  --a-superficie: rgba(255, 248, 246, 0.94);
  --a-superficie-2: #f3e2de;
  --a-incavo: #efdcd7;
  --a-popup: linear-gradient(180deg, #fff8f6, #f3e1dc);
  --a-velo: rgba(50, 15, 15, 0.35);
  --a-hover: rgba(120, 40, 40, 0.07);
  --a-bordo-tenue: rgba(100, 40, 40, 0.16);
  --a-testo: #3a1f1f; --a-forte: #250f10; --a-tenue: #7a5250;
  --a-campo: #fffaf9; --a-campo-bordo: rgba(100, 40, 40, 0.25);
  --a-bolla: #f6e7e3; --a-nome-mio: #9a3b3b;
  --t-pannello: rgba(253, 244, 242, 0.96);
  --t-pannello-grad: linear-gradient(180deg, rgba(255, 248, 246, 0.98), rgba(243, 225, 220, 0.98));
  --t-bordo: rgba(100, 40, 40, 0.2);
  --t-testo: #3a1f1f; --t-forte: #250f10; --t-tenue: #7a5250;
  --t-riquadro: rgba(120, 40, 40, 0.07);
  --t-bolla: rgba(253, 244, 242, 0.94); --t-bolla-testo: #3a1f1f;
  --t-scheda: rgba(253, 244, 242, 0.9); --t-scheda-testo: #3a1f1f; --t-scheda-tenue: #7a5250;
  --t-tasto: rgba(253, 244, 242, 0.9); --t-tasto-hover: #fffaf9; --t-tasto-testo: #3a1f1f;
  --t-barra-velo: rgba(249, 236, 233, 0.9); --t-barra-testo: #4a2626;
}
/* Verde e Ardesia in chiaro (approvati da Andrea il 27/10: ogni tema ha la versione scura e quella chiara) */
[data-aspetto="light"][data-palette="verde"] {
  --a-sfondo: #dcefe4;
  --a-sfondo-pagina: radial-gradient(120% 90% at 50% 0%, #f2fbf6 0%, #dcefe4 55%, #c0dccd 100%);
  --a-barra: rgba(236, 248, 241, 0.95);
  --a-superficie: rgba(246, 252, 248, 0.94);
  --a-superficie-2: #dcefe4;
  --a-incavo: #d3e9dc;
  --a-popup: linear-gradient(180deg, #f6fcf8, #dcefe4);
  --a-velo: rgba(10, 40, 25, 0.35);
  --a-hover: rgba(20, 90, 55, 0.08);
  --a-bordo-tenue: rgba(20, 70, 45, 0.17);
  --a-testo: #15301f; --a-forte: #0b1f13; --a-tenue: #4a6a58;
  --a-campo: #f8fdfa; --a-campo-bordo: rgba(20, 70, 45, 0.26);
  --a-bolla: #e3f2e9; --a-nome-mio: #1f7a4d;
  --t-pannello: rgba(241, 250, 245, 0.96);
  --t-pannello-grad: linear-gradient(180deg, rgba(246, 252, 248, 0.98), rgba(220, 239, 228, 0.98));
  --t-bordo: rgba(20, 70, 45, 0.2);
  --t-testo: #15301f; --t-forte: #0b1f13; --t-tenue: #4a6a58;
  --t-riquadro: rgba(20, 90, 55, 0.08);
  --t-bolla: rgba(241, 250, 245, 0.94); --t-bolla-testo: #15301f;
  --t-scheda: rgba(241, 250, 245, 0.9); --t-scheda-testo: #15301f; --t-scheda-tenue: #4a6a58;
  --t-tasto: rgba(241, 250, 245, 0.9); --t-tasto-hover: #f8fdfa; --t-tasto-testo: #15301f;
  --t-barra-velo: rgba(229, 245, 236, 0.9); --t-barra-testo: #1b3a27;
}
[data-aspetto="light"][data-palette="ardesia"] {
  --a-sfondo: #e2e5e7;
  --a-sfondo-pagina: radial-gradient(120% 90% at 50% 0%, #f5f6f7 0%, #e2e5e7 55%, #c9ced2 100%);
  --a-barra: rgba(240, 242, 243, 0.95);
  --a-superficie: rgba(249, 250, 250, 0.94);
  --a-superficie-2: #e4e7e9;
  --a-incavo: #dcdfe2;
  --a-popup: linear-gradient(180deg, #fafbfb, #e4e7e9);
  --a-velo: rgba(20, 24, 28, 0.35);
  --a-hover: rgba(40, 48, 56, 0.07);
  --a-bordo-tenue: rgba(40, 48, 56, 0.16);
  --a-testo: #24292d; --a-forte: #14181b; --a-tenue: #5a6268;
  --a-campo: #fcfcfd; --a-campo-bordo: rgba(40, 48, 56, 0.25);
  --a-bolla: #e8ebed; --a-nome-mio: #3c5566;
  --t-pannello: rgba(245, 246, 247, 0.96);
  --t-pannello-grad: linear-gradient(180deg, rgba(250, 251, 251, 0.98), rgba(226, 229, 231, 0.98));
  --t-bordo: rgba(40, 48, 56, 0.2);
  --t-testo: #24292d; --t-forte: #14181b; --t-tenue: #5a6268;
  --t-riquadro: rgba(40, 48, 56, 0.07);
  --t-bolla: rgba(245, 246, 247, 0.94); --t-bolla-testo: #24292d;
  --t-scheda: rgba(245, 246, 247, 0.9); --t-scheda-testo: #24292d; --t-scheda-tenue: #5a6268;
  --t-tasto: rgba(245, 246, 247, 0.9); --t-tasto-hover: #fcfcfd; --t-tasto-testo: #24292d;
  --t-barra-velo: rgba(236, 238, 240, 0.9); --t-barra-testo: #2c3236;
}

/* ---------- 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;
}

/* Élite: viola Élite (#5B4BD1) e oro, scuro e chiaro (ricavata da Notte e Cielo ruotando la tinta). Solo per gli Élite. */
/* Élite: stessa tinta del viola Élite (#5B4BD1) dei temi in line.css */
[data-aspetto="dark"][data-palette="elite"] {
  --a-sfondo: #1E1842;
  --a-sfondo-pagina: radial-gradient(120% 90% at 50% 0%, #3A2F80 0%, #261F58 55%, #1C1640 100%);
  --a-barra: rgba(30, 24, 66, 0.95);
  --a-superficie: rgba(48, 40, 104, 0.9);
  --a-incavo: rgba(16, 11, 40, 0.45);
  --a-popup: linear-gradient(180deg, #3A3080, #271F5A);
  --a-tenue: #C9C1EC;
  --a-campo: rgba(14, 9, 36, 0.45);
  --a-nome-mio: #B0A5FF;
  /* superfici che altrimenti restano marrone-nero del tema di base */
  --a-superficie-2: #352D70; --a-bordo: #4A4088; --a-bordo-tenue: #3E3578; --a-campo-bordo: #52478F; --a-bolla: #322A68; --a-velo: rgba(12, 8, 30, 0.74);
  --t-pannello: rgba(36, 29, 78, 0.95); --t-pannello-grad: linear-gradient(180deg, rgba(48, 40, 104, 0.97), rgba(30, 24, 66, 0.97)); --t-bolla: rgba(30, 24, 66, 0.85);
}
[data-aspetto="light"][data-palette="elite"] {
  --a-sfondo: #ECE7FA;
  --a-sfondo-pagina: radial-gradient(120% 90% at 50% 0%, #FBFAFF 0%, #F1ECFD 55%, #DFD7F7 100%);
  --a-barra: rgba(255, 255, 255, 0.92);
  --a-superficie: rgba(255, 255, 255, 0.95);
  --a-superficie-2: #EDE8FB;
  --a-incavo: #E8E2FA;
  --a-popup: linear-gradient(180deg, #FFFFFF, #F1ECFD);
  --a-velo: rgba(16, 4, 66, 0.35);
  --a-hover: rgba(31, 9, 121, 0.08);
  --a-bordo-tenue: rgba(29, 11, 99, 0.17);
  --a-testo: #190F42; --a-forte: #0E0631; --a-tenue: #4A4370;
  --a-campo: #F9F8FF; --a-campo-bordo: rgba(29, 11, 99, 0.26);
  --a-bolla: #E5DFFB; --a-nome-mio: #4B3BC4;
  --t-pannello: rgba(255, 255, 255, 0.96);
  --t-pannello-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(237, 232, 251, 0.98));
  --t-bordo: rgba(29, 11, 99, 0.2);
  --t-testo: #15112B; --t-forte: #0E0A24; --t-tenue: #4A4370;
  --t-riquadro: rgba(31, 9, 121, 0.08);
  --t-bolla: rgba(242, 239, 255, 0.94); --t-bolla-testo: #190F42;
  --t-scheda: rgba(242, 239, 255, 0.9); --t-scheda-testo: #190F42; --t-scheda-tenue: #4D3F85;
  --t-tasto: rgba(242, 239, 255, 0.9); --t-tasto-hover: #F9F8FF; --t-tasto-testo: #190F42;
  --t-barra-velo: rgba(231, 225, 253, 0.9); --t-barra-testo: #211357;
}

/* ---------- 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="dark"][data-palette="verde"] { --a-animale: #C8E6D3; }
[data-aspetto="dark"][data-palette="notte"] { --a-animale: #C8D8F2; }
[data-aspetto="dark"][data-palette="vino"] { --a-animale: #F2CED6; }
[data-aspetto="dark"][data-palette="ardesia"] { --a-animale: #D6DDE4; }
[data-aspetto="dark"][data-palette="elite"] { --a-animale: #D8CDF7; }
[data-aspetto="light"] { --a-animale: initial; }
[data-aspetto="light"][data-palette="cielo"], [data-aspetto="light"][data-palette="notte"] { --a-animale: #CFE6F7; }
[data-aspetto="light"][data-palette="cipria"], [data-aspetto="light"][data-palette="vino"] { --a-animale: #F8D3DD; }
[data-aspetto="light"][data-palette="elite"] { --a-animale: #E2D8FA; }
[data-aspetto="light"][data-palette="verde"] { --a-animale: #CDEBD9; }
[data-aspetto="light"][data-palette="ardesia"] { --a-animale: #DCE1E5; }

/* "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; }