/* Il tema di novembre, «Castagne e vino novello»: San Martino, il San Andres
   delle Canarie e il Magosto, la sera in cantina con le caldarroste. Il panno
   diventa legno caldo di cantina, sotto tutto il tavolo, sotto la meta'
   dell'avversario con un velo piu' scuro, e sotto i pannelli. Il menu e il VS
   hanno il tralcio di vite in cima e le foglie cadute in basso, il menu il
   cartoccio e la botte ai lati del logo e il VS il braciere, i dorsi una
   foglia di vite col grappolo e il mazzetto una ghirlanda di foglie e ricci
   al posto della cornice d'oro. Il vino sta nel paesaggio, nella vite, nei
   grappoli e nella botte: niente bicchieri, e' un gioco di famiglia. Tutto
   sta sotto html.tema-castagne, che mette e toglie temi.js: tolta la classe,
   il gioco e' quello di sempre. Fuori ci sono i pezzi che il tema veste per
   chi lo porta, anche a chi ha il panno verde (veste-castagne: il profilo e
   la fascia nel VS), l'alone delle castagne della chat, e la miniatura del
   pannello dei temi, in fondo, che si vede anche a tema spento.
   Del panno verde restano la fascia piu' scura sotto i pilastri e il velo
   sotto l'avversario: l'occhio li usa per dividere il tavolo in tre. La
   fascia di mezzo diventa la striscia a quadri, un runner di tovaglia steso
   di traverso sul legno e largo quanto la fila di pesca, pilastri e chiusi:
   li' le carte stanno in fila, e altrove, sotto le colonne che si allungano
   o sotto la mano, i quadri si vedrebbero fra una carta e l'altra e
   farebbero rumore. Un velo la porta sotto il legno, come la fascia scura del
   panno, cosi' verde e ambra dei suggerimenti restano le sole luci del
   tavolo; i posti vuoti hanno un fondo pieno, senno' il loro tratteggio si
   perdeva fra i quadri. Si muove solo l'alone delle caldarroste, in
   opacita'. */

/* Il legno, e pannelli, tessere e pulsanti col suo colore: in tutta la
   pagina col tema acceso, e in un pezzo vestito col tema da solo (temi.js),
   come il profilo di chi ce l'ha aperto da chi ha il panno verde. Il legno
   colora anche la barra del telefono sopra il pezzo vestito. I tasti hanno
   il rosso del vino, scurito; l'oro resta per l'azione principale, il blu di
   Gioca online e il rosso restano come sono. */
html.tema-castagne, .veste-castagne {
    --bg: #4a2715;
    --panel: #321a0d;
    --sopra: #231108;
    --sopra-luce: radial-gradient(ellipse at 50% 38%, #5e321a 0%, #36190c 55%, #1c0d05 100%);
    --tasto: #6e2a22;
    --tasto-luce: linear-gradient(rgba(255, 214, 170, 0.18), rgba(255, 214, 170, 0));
}

/* --- Il legno ------------------------------------------------------------- */

/* Le assi si vedono appena: sopra ci stanno le carte */
html.tema-castagne body {
    background-image:
        url(immagini/castagne/legno.svg),
        radial-gradient(ellipse at 50% 38%, #74401f 0%, #4a2715 50%, #231108 100%);
}

/* Il legno continua sotto l'avversario, con un velo trasparente al posto
   del fondo pieno del panno verde: un colore, non un'altra piastrella */
html.tema-castagne #avversario {
    background: rgba(22, 9, 2, 0.4);
}

/* La striscia a quadri sotto pesca, pilastri e chiusi. Il velo porta i quadri
   chiari al tono del legno e gli altri sotto: col velo di prima la fascia
   restava piu' chiara del legno e la piu' accesa del tavolo vuoto. Le due
   righe crema di sopra e di sotto sono l'orlo della stoffa: senza, la
   striscia sembrava una macchia. Sta in un ::before dietro le carte perche'
   uno sfondo non si stringe sul contenuto: sul telefono va da bordo a bordo,
   sull'iPad si ferma poco oltre la fila e ai lati torna il legno. */
html.tema-castagne #centro {
    position: relative;
    background: none;
}

html.tema-castagne #centro::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: min(100%, calc(var(--cw) * 7.8));
    transform: translateX(-50%);
    background:
        linear-gradient(rgba(243, 227, 195, 0.3), rgba(243, 227, 195, 0.3)) 0 3px / 100% 1px no-repeat,
        linear-gradient(rgba(243, 227, 195, 0.3), rgba(243, 227, 195, 0.3)) 0 calc(100% - 3px) / 100% 1px no-repeat,
        linear-gradient(rgba(34, 12, 6, 0.82), rgba(34, 12, 6, 0.82)),
        url(immagini/castagne/quadri.svg) 0 0 / 24px 24px repeat;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 -2px 6px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

/* Il posto vuoto, dove va l'asso, ha un letto scuro pieno e il tratteggio
   crema: il bianco trasparente di sempre, sui quadri, cadeva sul ritmo delle
   loro righe e non si vedeva piu' */
html.tema-castagne #centro .carta.vuota {
    background: rgba(28, 10, 5, 0.78);
    border-color: rgba(243, 227, 195, 0.7);
}

/* le scritte della fila passano sopra i quadri chiari */
html.tema-castagne #centro .etichetta {
    text-shadow: 0 1px 3px rgba(18, 7, 2, 0.95);
}

/* E sotto i pannelli sopra il tavolo, quelli con la sfumatura del tema:
   senza, il legno spariva proprio quando se ne apriva uno. Il profilo e
   l'invito, che hanno un fondo loro, lo mettono fra i loro livelli. */
html.tema-castagne .sopra:not(.veste-verde), .sopra.veste-castagne {
    background-image: url(immagini/castagne/legno.svg), var(--sopra-luce);
}

/* le cerimonie coi raggi e i bauli tengono il loro fondo */
html.tema-castagne #premio, html.tema-castagne #medaglia, html.tema-castagne #medaglie-nuove,
html.tema-castagne #al-sicuro, html.tema-castagne #vinto, html.tema-castagne #baule, html.tema-castagne #baule-apre {
    background-image: var(--sopra-luce);
}

/* --- Menu: la cantina ----------------------------------------------------- */

/* Il tralcio si ripete di lato sugli schermi larghi; resta fermo mentre il
   menu scorre */
html.tema-castagne #menu {
    background:
        url(immagini/castagne/festone.svg) 50% 0 / 375px 64px repeat-x,
        url(immagini/castagne/foglie-1.svg) 0 100% / 120px 110px no-repeat,
        url(immagini/castagne/foglie-2.svg) 100% 100% / 110px 100px no-repeat,
        radial-gradient(circle at 50% 110px, rgba(255, 150, 60, 0.2) 0, rgba(255, 150, 60, 0) 190px);
}

/* il cartoccio e la botte ai lati del logo */
html.tema-castagne #menu-dentro {
    position: relative;
}

html.tema-castagne #menu-dentro::before,
html.tema-castagne #menu-dentro::after {
    content: '';
    position: absolute;
    left: 50%;
    pointer-events: none;
}

html.tema-castagne #menu-dentro::before {
    top: 0;
    width: 240px;
    height: 110px;
    margin-left: -120px;
    background: url(immagini/castagne/cartoccio.svg) 0 0 / 240px 110px no-repeat;
}

/* L'alone delle caldarroste ancora calde, che respira in opacita': e'
   l'unica cosa che il tema anima. Sta sul cartoccio e non sulla botte */
html.tema-castagne #menu-dentro::after {
    top: -10px;
    width: 320px;
    height: 150px;
    margin-left: -160px;
    background-image:
        radial-gradient(circle at 95px 58px, rgba(255, 200, 110, 0.48) 0, rgba(255, 130, 40, 0.16) 28px, rgba(255, 130, 40, 0) 62px);
    animation: castagne-brace 4s ease-in-out infinite;
}

@keyframes castagne-brace {
    0%, 100% { opacity: 1; }
    22% { opacity: 0.74; }
    40% { opacity: 0.92; }
    58% { opacity: 0.7; }
    78% { opacity: 0.96; }
}

/* Il logo col quadrato rosso vino al posto del verde, incorniciato d'oro.
   L'img resta quella di index.html, ridotta a larghezza zero dal padding, e
   il logo nuovo e' il suo sfondo */
html.tema-castagne #logo {
    box-sizing: border-box;
    padding-left: 104px;
    background: url(immagini/castagne/logo.svg) 0 0 / 104px 104px no-repeat;
    border-radius: 20px;
    box-shadow: 0 0 0 3px #e8b04a, 0 0 0 5px #5a2a14;
}

html.tema-castagne #menu h1 {
    color: #f6bd55;
    background-image: linear-gradient(#fff0c8, #f6bd55 55%, #dc7f2c);
}

html.tema-castagne #motto {
    color: #fbefdc;
}

/* --- Pulsanti ------------------------------------------------------------- */

html.tema-castagne .oro {
    background-color: #f6bd55;
    background-image: linear-gradient(#ffe2a4, #f6bd55 55%, #df8f30);
    color: #3b1a05;
}

/* la linguetta scelta della stagione ha il colore delle altre, e la
   distingue il filo d'oro */
html.tema-castagne .piccolo.scelta {
    background-color: var(--tasto);
}

html.tema-castagne #suoni-menu,
html.tema-castagne #lingua-menu,
html.tema-castagne #versione {
    background: rgba(50, 26, 13, 0.85);
    box-shadow: 0 0 0 1px rgba(246, 189, 85, 0.3);
}

/* l'altoparlante e la sigla della lingua scendono sotto il tralcio: in alto
   coprivano le foglie degli angoli */
html.tema-castagne #suoni-menu,
html.tema-castagne #lingua-menu {
    top: calc(env(safe-area-inset-top, 0px) + 72px);
}

/* la versione, in fondo a destra, passa sopra le foglie dell'angolo: piena,
   senno' la foglia si vede attraverso il numero */
html.tema-castagne #versione {
    background: #321a0d;
    color: rgba(242, 242, 244, 0.65);
    opacity: 1;
}

/* --- Tavolo --------------------------------------------------------------- */

/* Il dorso e' rosso vino con la foglia di vite e il grappolo, i chiusi la
   stessa su verde vite: un marrone si perdeva nel legno. E' il pezzo del
   tema per il dorso (premi.js), e lo porta chi l'ha addosso, con la festa
   accesa o no, sul mazzo, dietro la figurina e nella Collezione. Il bordo e'
   crema e l'oro sta dentro, in un filo, come nel Muertos: un bordo giallo,
   con le colonne accese in ambra, sembrava un bersaglio anche lui. */
.carta.dorso.dorso-festa-castagne {
    background: #7a1f30 url(immagini/castagne/foglia.svg) 50% 50% / 100% 100% no-repeat;
    border: 3px solid #f3e3c3;
}

.coll-dorso.dorso-festa-castagne {
    background: #7a1f30 url(immagini/castagne/foglia.svg) 50% 50% / 100% 100% no-repeat;
    border-color: #f3e3c3;
}

/* dietro la figurina la foglia sta intera in mezzo al vino */
.figurina.retro.dorso-festa-castagne {
    background: #7a1f30 url(immagini/castagne/foglia.svg) 50% 50% / auto 90% no-repeat;
}

.carta.dorso.dorso-festa-castagne.accantonata {
    background-color: #46632a;
}

/* e le medaglie della cerimonia, prima di girarsi */
.cer-retro.dorso-festa-castagne {
    background: #7a1f30 url(immagini/castagne/foglia.svg) 50% 50% / 100% 100% no-repeat;
    border-color: #f3e3c3;
}

/* Le foglie stanno dietro la carta, come una ghirlanda appesa intorno a un
   quadro: ai lati e sotto ne spuntano due terzi, e davanti la carta tiene il
   suo filo d'oro, cosi' il valore resta pulito. Sopra non ce ne sono:
   coprivano il nome dell'avversario. Le misure sono in centesimi di carta, e
   sull'iPad le foglie crescono con lei. */
html.tema-castagne .mazzetto {
    z-index: 0;
}

html.tema-castagne .mazzetto::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: calc(var(--cw) * -0.26);
    left: calc(var(--cw) * -0.26);
    width: calc(var(--cw) * 1.64);
    height: calc(var(--ch) * 1.12 + var(--cw) * 0.52);
    background: url(immagini/castagne/ghirlanda.svg) 0 0 / 100% 100% no-repeat;
    pointer-events: none;
}

/* la scritta scende sotto la fila di foglie: piu' su le foglie le passavano
   dietro le lettere */
html.tema-castagne .mazzetto .etichetta {
    margin-top: calc(var(--cw) * 0.24);
    color: #f6bd55;
    text-shadow: 0 1px 3px rgba(18, 7, 2, 0.95);
}

/* --- Pannelli e VS -------------------------------------------------------- */

html.tema-castagne #banner {
    background: rgba(50, 26, 13, 0.94);
}

/* il cartello del tutorial, la chat e i puntini del suo tasto erano verdi
   scritti a mano */
html.tema-castagne #guida {
    background-color: rgba(38, 19, 9, 0.93);
}

html.tema-castagne #chat {
    background-color: rgba(38, 19, 9, 0.96);
}

html.tema-castagne #chat-apri circle {
    fill: #321a0d;
}

/* Le castagne della chat hanno un alone chiaro: bruno sul pannello scuro, la
   sagoma si staccava poco. Sono di chi porta le faccine, anche col panno
   verde, quindi si riconoscono dal disegno e non dal tema acceso. */
.chat-emoji .fumetto-disegno[src*="/castagne/"] {
    box-sizing: content-box;
    margin: -5px;
    padding: 5px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 222, 176, 0.28) 62%, rgba(255, 222, 176, 0) 100%);
}

/* Il VS si gioca in cantina: il tralcio in cima, il braciere con le
   castagne in fondo, e in mezzo la sua luce dietro alle fasce */
html.tema-castagne #ingresso {
    background:
        url(immagini/castagne/festone-vs.svg) 50% 0 / 375px 64px repeat-x,
        url(immagini/castagne/braciere-vs.svg) 50% 100% / 375px 150px no-repeat,
        radial-gradient(circle at 50% 100%, rgba(255, 120, 40, 0.24) 0, rgba(255, 120, 40, 0) 230px),
        radial-gradient(circle at 50% 50%, rgba(255, 150, 60, 0.12) 0, rgba(255, 150, 60, 0) 220px),
        radial-gradient(ellipse at 50% 50%, #5a2f17 0%, #2e160a 62%, #160904 100%);
}

/* Le fasce restano rossa e blu, perche' dicono chi gioca contro chi, ma
   diventano stoffa come la striscia del tavolo: l'orlo a dentelli, quello
   delle forbici da sarta, e' una maschera, e dentro corre una fila di
   quadretti crema. La maschera si porta via l'ombra della fascia. Sono i
   quadretti, il pezzo del tema per la cornice (premi.js): ce l'ha chi lo
   porta, anche nel VS di chi ha il panno verde, e chi a festa accesa ha
   scelto un'altra cornice non ce l'ha. */
.ingresso-lato.cornice-tema-castagne::before {
    -webkit-mask-image:
        conic-gradient(from 135deg at 50% 0, #000 90deg, transparent 0),
        conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0),
        linear-gradient(#000, #000);
    -webkit-mask-size: 10px 5px, 10px 5px, 100% calc(100% - 10px);
    -webkit-mask-position: 0 0, 0 100%, 0 5px;
    -webkit-mask-repeat: repeat-x, repeat-x, no-repeat;
    mask-image:
        conic-gradient(from 135deg at 50% 0, #000 90deg, transparent 0),
        conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0),
        linear-gradient(#000, #000);
    mask-size: 10px 5px, 10px 5px, 100% calc(100% - 10px);
    mask-position: 0 0, 0 100%, 0 5px;
    mask-repeat: repeat-x, repeat-x, no-repeat;
    background-image:
        url(immagini/castagne/orlo.svg),
        url(immagini/castagne/orlo.svg),
        linear-gradient(90deg, #2f6fed 0%, #1f4fbf 55%, #163a8e 100%);
    background-size: 16px 10px, 16px 10px, 100% 100%;
    background-position: 0 9px, 0 calc(100% - 9px), 0 0;
    background-repeat: repeat-x, repeat-x, no-repeat;
}

.ingresso-lato.cornice-tema-castagne.suo::before {
    background-image:
        url(immagini/castagne/orlo.svg),
        url(immagini/castagne/orlo.svg),
        linear-gradient(270deg, #e0404c 0%, #b0242f 55%, #7e1621 100%);
}

/* --- L'invito della festa ------------------------------------------------- */

/* La schermata del regalo, aprendo il gioco nei giorni della festa (temi.js),
   vestita come il menu: il tralcio in cima, le foglie negli angoli in fondo,
   la luce della brace dietro la tessera e sotto il legno. La veste anche a
   chi ha scelto il panno verde, perche' invita a questo tema. Gli sfondi di
   un pannello che scorre restano fermi, e il contenuto gli passa sotto. */
#invito.veste-castagne {
    padding-top: 76px;
    padding-bottom: 84px;
    background-image:
        url(immagini/castagne/festone.svg),
        url(immagini/castagne/foglie-1.svg),
        url(immagini/castagne/foglie-2.svg),
        radial-gradient(circle at 50% 42%, rgba(255, 150, 60, 0.22) 0, rgba(255, 150, 60, 0) 230px),
        url(immagini/castagne/legno.svg),
        var(--sopra-luce);
    background-position: 50% 0, 0 100%, 100% 100%, 0 0, 0 0, 0 0;
    background-size: 375px 64px, 120px 110px, 110px 100px, auto, auto, auto;
    background-repeat: repeat-x, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
}

/* --- Il profilo ----------------------------------------------------------- */

/* Il profilo di chi porta il tema, per chiunque lo apra, e' un quadro appeso
   in cantina: il tralcio fermo in cima e le foglie ferme negli angoli in
   fondo, come nel menu, la luce della brace che scorre col profilo, il
   legno fermo sotto, e dietro la carta la ghirlanda del mazzetto col suo
   alone. Le misure della ghirlanda sono quelle del mazzetto, in em della
   carta. */
#scheda.veste-castagne {
    padding-top: 76px;
    padding-bottom: 84px;
    background-image:
        radial-gradient(circle at 50% 150px, rgba(255, 150, 60, 0.16) 0, rgba(255, 150, 60, 0) 200px),
        url(immagini/castagne/legno.svg),
        var(--sopra-luce);
    background-attachment: local, scroll, scroll;
}

/* Tralcio e foglie non sono sfondi: da sfondi medaglie e placche gli
   passavano sopra, e il tralcio se ne andava con la testa del profilo. Sono
   fissi come la X, che viene dopo e resta sopra il tralcio. Il tocco li
   attraversa: una placca sotto una foglia si apre lo stesso, e un dito che
   parte dal tralcio fa scorrere il profilo. In fondo il profilo ha il posto
   per uscire da sotto le foglie. */
#scheda.veste-castagne::before,
#scheda.veste-castagne::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
}

/* Dietro il tralcio c'e' il legno stesso: copre quello che scorre e sfuma
   dove il profilo comincia, cosi' fra le foglie non passa una medaglia
   tagliata. E' alto solo quanto il tralcio, perche' una maschera a tutto
   schermo il telefono la ricompone a ogni passo dello scorrimento. La luce
   invece e' grande quanto il pannello, perche' combaci con quella sotto: dvh
   e' la sua altezza anche quando Safari mostra o nasconde la barra. */
#scheda.veste-castagne::before {
    top: 0;
    height: 76px;
    background:
        url(immagini/castagne/festone.svg) 50% 0 / 375px 64px repeat-x,
        url(immagini/castagne/legno.svg),
        var(--sopra-luce) 0 0 / 100% 100vh;
    background-size: 375px 64px, auto, 100% 100dvh;
    -webkit-mask-image: linear-gradient(#000 56px, transparent 76px);
    mask-image: linear-gradient(#000 56px, transparent 76px);
}

#scheda.veste-castagne::after {
    bottom: 0;
    height: 110px;
    background:
        url(immagini/castagne/foglie-1.svg) 0 100% / 120px 110px no-repeat,
        url(immagini/castagne/foglie-2.svg) 100% 100% / 110px 100px no-repeat;
}

/* le foglie sporgono dalla carta: il nome si scosta */
#scheda.veste-castagne .scheda-carta {
    margin-right: 28px;
}

#scheda.veste-castagne .scheda-carta::before,
#scheda.veste-castagne .scheda-carta::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

#scheda.veste-castagne .scheda-carta::before {
    z-index: -1;
    top: -0.73em;
    left: -0.73em;
    width: 4.62em;
    height: 5.95em;
    background: url(immagini/castagne/ghirlanda.svg) 0 0 / 100% 100% no-repeat;
}

#scheda.veste-castagne .scheda-carta::after {
    z-index: -2;
    top: -2.2em;
    left: -2.59em;
    width: 8em;
    height: 8.4em;
    background: radial-gradient(closest-side, rgba(255, 190, 100, 0.4) 0, rgba(255, 130, 40, 0.15) 55%, rgba(255, 130, 40, 0) 100%);
}

/* --- Nel pannello dei temi ------------------------------------------------ */

/* Il legno e un dorso con la foglia, anche a tema spento: e' la vetrina */
.tema-mini-castagne {
    background-color: #4a2715;
    background-image:
        url(immagini/castagne/legno.svg),
        radial-gradient(ellipse at 50% 38%, #74401f 0%, #4a2715 60%, #231108 100%);
}

.tema-mini-castagne i {
    background: #7a1f30 url(immagini/castagne/foglia.svg) 50% 50% / 100% 100% no-repeat;
    border: 2px solid #f3e3c3;
}

/* nella tessera grande dell'invito e del premio il dorso ha il bordo pieno */
.premio-tessera.tema-mini-castagne i {
    border-width: 4px;
}

/* I quadretti sulla figurina: la striscia del tavolo girata a cornice,
   piccola perche' nove pixel di bordo tengano tre file di quadri */
.cornice-tema-castagne {
    --cornice: url(/app/immagini/castagne/quadri.svg) 0 0 / 12px 12px repeat;
    --cornice-luce: rgba(255, 160, 90, 0.4);
}