/* Font serviti dal sito (niente Google Fonts): sottoinsieme latino, licenza OFL. Sono font variabili: un file copre tutti i pesi. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/font/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700 900; font-display: swap; src: url(/assets/font/playfair-display-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/font/playfair-display-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/assets/font/fredoka-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Temi di Cifrollo: ogni colore e font della schermata passa da queste variabili.
   Il tema si sceglie con <html data-tema="a|b|c">; B (Carta italiana) è il predefinito.
   Valgono anche su un singolo elemento con data-tema (le anteprime in Impostazioni).
   I numeri dei contatori stanno sempre su un contrasto ≥ 4.5:1 (sul giallo il testo è scuro). */

/* ---------- B · Carta italiana (predefinito) ---------- */
:root,
:root[data-tema="b"], [data-tema="b"] {
    color-scheme: light;
    --sfondo: #f6efe2;
    --testo: #3b2a1e;
    --testo-tenue: #7a6450;
    --font: Inter, system-ui, sans-serif;
    --font-titoli: "Playfair Display", Georgia, serif;
    --font-tessere: "Playfair Display", Georgia, serif;
    --accento: #b5532f;
    --accento-testo: #fff;

    --tessera-sfondo: #fffaf0;
    --tessera-testo: #3b2a1e;
    --tessera-bordo: #cdb99a;
    --tessera-bordo-attiva: #8b6f4e;
    --tessera-raggio: 2px;
    --tessera-ombra: none;

    --verde: #3f6a2c;
    --giallo: #e0b440;
    --rosso: #a8472a;
    --contatore-testo: #fff;
    --giallo-testo: #2e2108;
    --contatore-raggio: 50%;

    --tasto-sfondo: #e7dac3;
    --tasto-testo: #3b2a1e;
    --tasto-raggio: 6px;
    --marca-r: #e4b8a6;
    --marca-y: #f0d79a;
    --marca-g: #b9cfa8;

    --pannello: #fffaf0;
    --pannello-testo: #3b2a1e;
    --bordo: #d9c9ad;
    --foglio: #fffbf3;
    --foglio-bordo: #e2d3b8;
    --ombra: 0 1px 2px rgba(59, 42, 30, .06), 0 8px 24px rgba(59, 42, 30, .08);
    --sfondo-img: radial-gradient(1200px 600px at 50% -10%, #fbf6ec 0%, transparent 70%);

    /* Il rotolo di fine partita (gioco.css). Qui il tema B, il predefinito: pergamena antica tra due aste di legno
       con i pomoli di mattone, nastro con le code di rondine, sigillo di ceralacca. A e C cambiano solo quello che differisce. */
    --rotolo-riquadro-sfondo: var(--pannello);
    --rotolo-riquadro-testo: var(--pannello-testo);
    --rotolo-asta-alto: #5b4632;
    --rotolo-asta-basso: #3b2c1e;
    --rotolo-asta-ombra: 0 3px 6px rgba(59, 42, 30, .4);
    --rotolo-asta-fondo: block;
    --rotolo-pomolo: #b5532f;
    --rotolo-pomolo-larg: 14px;
    --rotolo-coda: #7a3018;
    --rotolo-coda-larg: 12px;
    --rotolo-carta-sfondo: radial-gradient(ellipse at 50% 40%, #fffaf0 0, #f3e6c8 70%, #e2cfa5 100%);
    --rotolo-contorno: #cdb99a;
    --rotolo-ombra: inset 0 0 30px rgba(139, 111, 78, .35);
    --rotolo-raggio: 0;
    --rotolo-carta-fondo: 62px;
    --rotolo-apertura: srotola 1.2s .2s cubic-bezier(.3, .8, .3, 1) both;
    --rotolo-testo: #3b2a1e;
    --rotolo-tenue: #5e4631;
    --rotolo-titolo-peso: 900;
    --rotolo-titolo-dim: 24px;
    --rotolo-titolo-spazio: 0;
    --rotolo-titolo-maiusc: none;
    --rotolo-nastro: #b5532f;
    --rotolo-nastro-testo: #fff;
    --rotolo-nastro-ombra: 0 3px 0 #7a3018;
    --rotolo-nastro-rotazione: -2deg;
    --rotolo-nastro-margine: 12px -6px;
    --rotolo-def-stile: italic;
    --rotolo-def-sfondo: transparent;
    --rotolo-def-imbotto: 0;
    --rotolo-sigillo: grid;
    --rotolo-coriandoli: none;
}

/* ---------- A · Pulito e scuro ---------- */
:root[data-tema="a"], [data-tema="a"] {
    color-scheme: dark;
    --sfondo: #121213;
    --sfondo-img: none;
    --testo: #f2f2f2;
    --testo-tenue: #a1a1a6;
    --font: Inter, system-ui, sans-serif;
    --font-titoli: Inter, system-ui, sans-serif;
    --font-tessere: Inter, system-ui, sans-serif;
    --accento: #538d4e;
    --accento-testo: #fff;

    --tessera-sfondo: transparent;
    --tessera-testo: #f2f2f2;
    --tessera-bordo: #3a3a3c;
    --tessera-bordo-attiva: #6b6b6e;
    --tessera-raggio: 4px;
    --tessera-ombra: none;

    --verde: #3f7a3a;
    --giallo: #c9a93a;
    --rosso: #a33a3a;
    --contatore-testo: #fff;
    --giallo-testo: #1d1700;
    --contatore-raggio: 4px;

    --tasto-sfondo: #818384;
    --tasto-testo: #fff;
    --tasto-raggio: 4px;
    --marca-r: #7a3131;
    --marca-y: #8a7526;
    --marca-g: #3f6e3b;

    --pannello: #1e1e20;
    --pannello-testo: #f2f2f2;
    --bordo: #3a3a3c;
    --foglio: #1a1a1b;
    --foglio-bordo: #2c2c2e;
    --ombra: 0 8px 28px rgba(0, 0, 0, .45);

    /* Il rotolo di fine partita: ardesia con righe leggere, asta di metallo, nastro scuro dritto con le tessere. */
    --rotolo-asta-alto: #8e8e93;
    --rotolo-asta-basso: #1c1c1e;
    --rotolo-asta-ombra: 0 2px 6px rgba(0, 0, 0, .6);
    --rotolo-asta-fondo: none;
    --rotolo-pomolo-larg: 0;
    --rotolo-coda-larg: 0;
    --rotolo-carta-sfondo: repeating-linear-gradient(0deg, transparent 0 23px, rgba(255, 255, 255, .035) 23px 24px), linear-gradient(#232326, #1a1a1c);
    --rotolo-contorno: #2c2c2e;
    --rotolo-ombra: 0 6px 16px rgba(0, 0, 0, .35);
    --rotolo-raggio: 0 0 4px 4px;
    --rotolo-carta-fondo: 16px;
    --rotolo-apertura: srotola 1s .2s cubic-bezier(.3, .8, .3, 1) both;
    --rotolo-testo: #f2f2f2;
    --rotolo-tenue: #a1a1a6;
    --rotolo-titolo-peso: 800;
    --rotolo-titolo-dim: 13px;
    --rotolo-titolo-spazio: 4px;
    --rotolo-titolo-maiusc: uppercase;
    --rotolo-nastro: #2a2a2d;
    --rotolo-nastro-testo: #fff;
    --rotolo-nastro-ombra: none;
    --rotolo-nastro-rotazione: 0deg;
    --rotolo-nastro-margine: 12px -16px;
    --rotolo-contorno-nastro: #3a3a3c;
    --rotolo-tessera: var(--verde);
    --rotolo-tessera-persa: #3a3a3c;
    --rotolo-tessera-testo: #fff;
    --rotolo-def-stile: normal;
    --rotolo-sigillo: none;
}

/* ---------- C · Allegro e colorato ---------- */
:root[data-tema="c"], [data-tema="c"] {
    color-scheme: light;
    --sfondo: #6a3ef8;
    --sfondo-img: linear-gradient(180deg, #5b3df5 0%, #8a3ffc 100%);
    --testo: #fff;
    --testo-tenue: #e3dbff;
    --font: Fredoka, Inter, system-ui, sans-serif;
    --font-titoli: Fredoka, Inter, system-ui, sans-serif;
    --font-tessere: Fredoka, Inter, system-ui, sans-serif;
    --accento: #facc15;
    --accento-testo: #2b1a6b;

    --tessera-sfondo: rgba(255, 255, 255, .95);
    --tessera-testo: #2b1a6b;
    --tessera-bordo: rgba(255, 255, 255, .6);
    --tessera-bordo-attiva: #facc15;
    --tessera-raggio: 10px;
    --tessera-ombra: 0 3px 0 rgba(0, 0, 0, .2);

    --verde: #15803d;
    --giallo: #facc15;
    --rosso: #e11d48;
    --contatore-testo: #fff;
    --giallo-testo: #3a2a00;
    --contatore-raggio: 10px;

    --tasto-sfondo: rgba(255, 255, 255, .9);
    --tasto-testo: #2b1a6b;
    --tasto-raggio: 10px;
    --marca-r: #fda4af;
    --marca-y: #fde68a;
    --marca-g: #86efac;

    --pannello: #fff;
    --pannello-testo: #2b1a6b;
    --bordo: rgba(255, 255, 255, .45);
    --foglio: rgba(255, 255, 255, .12);
    --foglio-bordo: rgba(255, 255, 255, .25);
    --ombra: 0 10px 30px rgba(40, 10, 120, .35);

    /* Il rotolo di fine partita: carta bianca con gli angoli tondi, asta gialla, nastro giallo, coriandoli. */
    --rotolo-riquadro-sfondo: linear-gradient(180deg, #5b3df5 0%, #8a3ffc 100%);
    --rotolo-riquadro-testo: #fff;
    --rotolo-asta-alto: #facc15;
    --rotolo-asta-basso: #facc15;
    --rotolo-asta-ombra: 0 4px 0 #c99a00;
    --rotolo-asta-fondo: none;
    --rotolo-pomolo-larg: 0;
    --rotolo-coda-larg: 0;
    --rotolo-carta-sfondo: #fff;
    --rotolo-contorno: transparent;
    --rotolo-ombra: 0 8px 0 rgba(40, 10, 120, .25);
    --rotolo-raggio: 0 0 22px 22px;
    --rotolo-carta-fondo: 20px;
    --rotolo-apertura: rimbalza .8s .2s cubic-bezier(.34, 1.56, .64, 1) both;
    --rotolo-testo: #2b1a6b;
    --rotolo-tenue: #5b4a9e;
    --rotolo-titolo-peso: 700;
    --rotolo-titolo-dim: 26px;
    --rotolo-nastro: #facc15;
    --rotolo-nastro-testo: #2b1a6b;
    --rotolo-nastro-ombra: 0 4px 0 #c99a00;
    --rotolo-nastro-rotazione: -3deg;
    --rotolo-nastro-margine: 12px -16px;
    --rotolo-def-stile: normal;
    --rotolo-def-sfondo: #f1ecff;
    --rotolo-def-imbotto: 10px 12px;
    --rotolo-sigillo: none;
    --rotolo-coriandoli: block;
    --rotolo-coriandolo-1: #facc15;
    --rotolo-coriandolo-2: #f43f5e;
    --rotolo-coriandolo-3: #16a34a;
    --rotolo-coriandolo-4: #6a3ef8;
    --rotolo-coriandolo-5: #0ea5e9;
}