/* temi.css — Sfondi del tavolo. Un tema = un attributo data-tema="<id>" su <html> (tavolo)
 * o su un'anteprima (lobby). Ogni tema definisce:
 *   --tavolo-base    colore di fondo (anche per il caricamento)
 *   --tavolo-sfondo  lo sfondo completo: vignettatura + trama del panno + colore
 * Elenco dei temi (id e nome) anche in public/bl/online.js e app/gioca/page.tsx. */

/* trama del panno: rumore fine in SVG, ripetuto */
:root {
  --trama-panno: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --trama-fibra: repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
  --vignetta: radial-gradient(ellipse 75% 70% at 50% 45%, rgba(255,255,255,.07), rgba(0,0,0,0) 55%, rgba(0,0,0,.5) 100%);
}

/* "Come il tema" (design "Tavolo a 2/3/4"): il panno segue l'aspetto dell'app (verde, scuro = blu notte, chiaro) */
[data-tema="design"] {
  --tavolo-base: #1D4A3B;
  --tavolo-sfondo: radial-gradient(ellipse 75% 80% at 50% 45%, #1D4A3B 0%, #112E24 100%);
}
[data-modo="dark"][data-tema="design"], [data-modo="dark"] [data-tema="design"] {
  --tavolo-base: #1F2B4A;
  --tavolo-sfondo: radial-gradient(ellipse 75% 80% at 50% 45%, #1F2B4A 0%, #131B32 100%);
}
[data-modo="light"][data-tema="design"], [data-modo="light"] [data-tema="design"] {
  --tavolo-base: #D6EADF;
  --tavolo-sfondo: radial-gradient(ellipse 75% 80% at 50% 45%, #D6EADF 0%, #BBD7C8 100%);
}

[data-tema="panno-verde"] {
  --tavolo-base: #0f4a2a;
  --tavolo-sfondo: var(--vignetta), var(--trama-fibra), var(--trama-panno), #0f4a2a;
}
[data-tema="bordeaux"] {           /* design "Tavolo da gioco": radiale bordeaux, senza trama */
  --tavolo-base: #46182a;
  --tavolo-sfondo: radial-gradient(ellipse 70% 75% at 50% 42%, #5E2A38 0%, #4A1C2A 50%, #3A1320 100%);
}
[data-tema="blu-notte"] {
  --tavolo-base: #13284a;
  --tavolo-sfondo: var(--vignetta), var(--trama-fibra), var(--trama-panno), #13284a;
}
[data-tema="grafite"] {
  --tavolo-base: #2a2d31;
  --tavolo-sfondo: var(--vignetta), var(--trama-fibra), var(--trama-panno), #2a2d31;
}
[data-tema="verde-classico"] {        /* lo sfondo originale, piatto */
  --tavolo-base: rgb(0, 85, 0);
  --tavolo-sfondo: rgb(0, 85, 0);
}

/* anteprima di un tema (lobby e pannello Stile) */
.anteprima-tema { background: var(--tavolo-sfondo); background-size: auto, auto, 180px 180px, auto; }

/* Light Mode: ogni colore del tavolo in una variante piu' chiara (stesso colore, non sostituito dal verde).
 * Vale sia per <html data-aspetto="light" data-tema="…"> sia per le anteprime dentro una pagina Light. */
[data-aspetto="light"][data-tema="panno-verde"], [data-aspetto="light"] [data-tema="panno-verde"] {
  --tavolo-base: #2f7d52;
  --tavolo-sfondo: var(--vignetta-chiara), var(--trama-fibra), var(--trama-panno), #2f7d52;
}
[data-aspetto="light"][data-tema="bordeaux"], [data-aspetto="light"] [data-tema="bordeaux"] {
  --tavolo-base: #632838;
  --tavolo-sfondo: radial-gradient(ellipse 70% 75% at 50% 42%, #7C3D4D 0%, #632838 50%, #521F2D 100%);
}
[data-aspetto="light"][data-tema="blu-notte"], [data-aspetto="light"] [data-tema="blu-notte"] {
  --tavolo-base: #2f5d93;
  --tavolo-sfondo: var(--vignetta-chiara), var(--trama-fibra), var(--trama-panno), #2f5d93;
}
[data-aspetto="light"][data-tema="grafite"], [data-aspetto="light"] [data-tema="grafite"] {
  --tavolo-base: #565c63;
  --tavolo-sfondo: var(--vignetta-chiara), var(--trama-fibra), var(--trama-panno), #565c63;
}
[data-aspetto="light"][data-tema="verde-classico"], [data-aspetto="light"] [data-tema="verde-classico"] {
  --tavolo-base: rgb(28, 128, 40);
  --tavolo-sfondo: rgb(28, 128, 40);
}
:root { --vignetta-chiara: radial-gradient(ellipse 75% 70% at 50% 45%, rgba(255,255,255,.12), rgba(0,0,0,0) 60%, rgba(0,0,0,.28) 100%); }