/* 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.
 * I panni del Negozio (nero-oro, autunno, natale) si vedono nelle scelte solo se comprati (lib/negozio.ts). */

/* 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%);
}
/* Light: "Come il tema" usa lo stesso panno verde scuro (il verde chiaro e' stato tolto: resa troppo bassa) */

[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);
}

/* ---- Panni del Negozio (lib/negozio.ts): al tavolo solo per chi li ha comprati ---- */
[data-tema="nero-oro"] {            /* "Nero e oro": nero profondo con l'alone oro sul bordo */
  --tavolo-base: #1a1816;
  --tavolo-sfondo: radial-gradient(ellipse 80% 85% at 50% 45%, rgba(0,0,0,0) 62%, rgba(201,162,74,.26) 100%), var(--trama-fibra), var(--trama-panno), radial-gradient(ellipse 75% 80% at 50% 45%, #2a2622 0%, #12100e 100%);
}
[data-tema="autunno"] {             /* "Autunno": marrone caldo, come le foglie */
  --tavolo-base: #5a3a22;
  --tavolo-sfondo: var(--vignetta), var(--trama-fibra), var(--trama-panno), radial-gradient(ellipse 75% 80% at 50% 45%, #6e4a2c 0%, #3f2715 100%);
}
[data-tema="natale"] {              /* "Panno Natale": rosso con i puntini bianchi */
  --tavolo-base: #7a1a22;
  --tavolo-sfondo: var(--vignetta), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='38'><circle cx='19' cy='19' r='1.7' fill='white' fill-opacity='.16'/></svg>"), var(--trama-panno), radial-gradient(ellipse 75% 80% at 50% 45%, #8e2029 0%, #5a1017 100%);
}
[data-aspetto="light"][data-tema="nero-oro"], [data-aspetto="light"] [data-tema="nero-oro"] { --tavolo-base: #2a2623; }
[data-aspetto="light"][data-tema="autunno"], [data-aspetto="light"] [data-tema="autunno"] { --tavolo-base: #6e4a2c; }
[data-aspetto="light"][data-tema="natale"], [data-aspetto="light"] [data-tema="natale"] { --tavolo-base: #8e2029; }

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