/* 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. Light: salvia (predefinita, sopra), avorio, cielo, cipria.
 * 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"] {
  --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"] {
  --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;
}

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

/* Elite: viola Elite (#5B4BD1) e oro, scuro e chiaro (ricavata da Notte e Cielo ruotando la tinta). Solo per gli Elite. */
[data-aspetto="dark"][data-palette="elite"] {
  --a-sfondo: #181037;
  --a-sfondo-pagina: radial-gradient(120% 90% at 50% 0%, #342473 0%, #21154F 55%, #140C33 100%);
  --a-barra: rgba(18, 10, 48, 0.95);
  --a-superficie: rgba(41, 27, 97, 0.88);
  --a-incavo: rgba(11, 5, 35, 0.5);
  --a-popup: linear-gradient(180deg, #312172, #1D1344);
  --a-tenue: #C1B7E7;
  --a-campo: rgba(9, 3, 31, 0.5);
  --a-nome-mio: #BAA9FF;
}
[data-aspetto="light"][data-palette="elite"] {
  --a-sfondo: #DAD2F7;
  --a-sfondo-pagina: radial-gradient(120% 90% at 50% 0%, #F2EEFF 0%, #DDD5FA 55%, #C2B8EE 100%);
  --a-barra: rgba(235, 231, 254, 0.95);
  --a-superficie: rgba(247, 245, 255, 0.94);
  --a-superficie-2: #DFD9F8;
  --a-incavo: #D8D0F5;
  --a-popup: linear-gradient(180deg, #F8F6FF, #DFD9F8);
  --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: #4D3F85;
  --a-campo: #F9F8FF; --a-campo-bordo: rgba(29, 11, 99, 0.26);
  --a-bolla: #E5DFFB; --a-nome-mio: #2E0CB9;
  --t-pannello: rgba(242, 239, 255, 0.96);
  --t-pannello-grad: linear-gradient(180deg, rgba(248, 246, 255, 0.98), rgba(223, 217, 248, 0.98));
  --t-bordo: rgba(29, 11, 99, 0.2);
  --t-testo: #190F42; --t-forte: #0E0631; --t-tenue: #4D3F85;
  --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;
}