/* Il tema dei giorni dei morti, variante «La ofrenda»: la sera davanti
   all'altare di casa. Il panno diventa una tovaglia prugna scaldata dalle
   candele, ricamata dappertutto: 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 papel picado in cima e i cempasuchil in basso, i dorsi una
   calavera de azucar e il mazzetto una ghirlanda di fiori al posto della
   cornice d'oro. Tutto sta sotto html.tema-muertos, 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-muertos: il profilo e la fascia nel VS), e la miniatura del
   pannello dei temi, in fondo, che si vede anche a tema spento.
   Sul tavolo il tema cambia solo i fondi, i dorsi e la cornice del mazzetto,
   perche' verde e ambra restano dei suggerimenti: l'arancio dei fiori sta
   solo nella ghirlanda, che e' fatta di fiori e non di un filo acceso come i
   bersagli. Si muove solo l'alone delle candele, in opacita'. */

/* La tovaglia, 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. La tovaglia
   colora anche la barra del telefono sopra il pezzo vestito. L'oro resta per
   l'azione principale, piu' caldo, come la fiamma; il blu di Gioca online e
   il rosso restano come sono. */
html.tema-muertos, .veste-muertos {
    --bg: #3a1026;
    --panel: #270a19;
    --sopra: #1c0611;
    --sopra-luce: radial-gradient(ellipse at 50% 38%, #4c1631 0%, #2c0b1d 55%, #160510 100%);
    --tasto: #5e1d3e;
    --tasto-luce: linear-gradient(rgba(255, 196, 220, 0.18), rgba(255, 196, 220, 0));
}

/* --- La tovaglia ---------------------------------------------------------- */

/* Il ricamo si vede appena: sopra ci stanno le carte */
html.tema-muertos body {
    background-image:
        url(immagini/muertos/ricamo.svg),
        radial-gradient(ellipse at 50% 38%, #61203a 0%, #3a1026 50%, #1c0611 100%);
}

/* La tovaglia continua sotto l'avversario. Col panno verde la sua meta' e'
   una fascia piu' scura, e l'occhio la usa per dividere i due lati: qui la fa
   un velo trasparente sopra il ricamo del body, invece del prugna pieno. Un
   colore, non un'altra piastrella da ridipingere. */
html.tema-muertos #avversario {
    background: rgba(24, 5, 15, 0.42);
}

/* E sotto i pannelli sopra il tavolo, quelli con la sfumatura del tema:
   senza, il ricamo 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-muertos .sopra:not(.veste-verde), .sopra.veste-muertos {
    background-image: url(immagini/muertos/ricamo.svg), var(--sopra-luce);
}

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

/* --- Menu: l'ofrenda ------------------------------------------------------ */

/* Il festone si ripete di lato sugli schermi larghi, come un filo che
   continua; resta fermo mentre il menu scorre */
html.tema-muertos #menu {
    background:
        url(immagini/muertos/festone.svg) 50% 0 / 375px 64px repeat-x,
        url(immagini/muertos/petali-1.svg) 0 100% / 120px 110px no-repeat,
        url(immagini/muertos/petali-2.svg) 100% 100% / 110px 100px no-repeat,
        radial-gradient(circle at 50% 110px, rgba(255, 176, 72, 0.2) 0, rgba(255, 176, 72, 0) 190px);
}

/* le veladoras ai lati del logo, che fa da ritratto */
html.tema-muertos #menu-dentro {
    position: relative;
}

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

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

/* L'alone delle due fiamme in un elemento solo, che respira in opacita':
   e' l'unica cosa che il tema anima */
html.tema-muertos #menu-dentro::after {
    top: -10px;
    width: 320px;
    height: 150px;
    margin-left: -160px;
    background-image:
        radial-gradient(circle at 83px 60px, rgba(255, 214, 120, 0.5) 0, rgba(255, 160, 40, 0.16) 26px, rgba(255, 160, 40, 0) 60px),
        radial-gradient(circle at 237px 60px, rgba(255, 214, 120, 0.5) 0, rgba(255, 160, 40, 0.16) 26px, rgba(255, 160, 40, 0) 60px);
    animation: muertos-fiamma 3.4s ease-in-out infinite;
}

@keyframes muertos-fiamma {
    0%, 100% { opacity: 1; }
    18% { opacity: 0.76; }
    34% { opacity: 0.94; }
    52% { opacity: 0.7; }
    70% { opacity: 0.97; }
    86% { opacity: 0.82; }
}

/* Il logo col quadrato prugna 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-muertos #logo {
    box-sizing: border-box;
    padding-left: 104px;
    background: url(immagini/muertos/logo.svg) 0 0 / 104px 104px no-repeat;
    border-radius: 20px;
    box-shadow: 0 0 0 3px #e0a53c, 0 0 0 5px #6e2040;
}

html.tema-muertos #menu h1 {
    color: #ffc857;
    background-image: linear-gradient(#fff0c4, #ffc857 55%, #e8932a);
}

html.tema-muertos #motto {
    color: #fff3e0;
}

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

html.tema-muertos .oro {
    background-color: #ffc857;
    background-image: linear-gradient(#ffe39c, #ffc857 55%, #e59a2f);
    color: #3b1405;
}

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

html.tema-muertos #suoni-menu,
html.tema-muertos #lingua-menu,
html.tema-muertos #versione {
    background: rgba(39, 10, 25, 0.85);
    box-shadow: 0 0 0 1px rgba(255, 200, 87, 0.3);
}

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

/* la versione, in fondo a destra, passa sopra i fiori dell'angolo: piena,
   senno' il cempasuchil si vede attraverso il numero. Resta discreta nel
   colore della scritta invece che nella trasparenza */
html.tema-muertos #versione {
    background: #270a19;
    color: rgba(242, 242, 244, 0.65);
    opacity: 1;
}

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

/* Il dorso e' rosa mexicano con la calavera, i chiusi la stessa su viola: 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
   rosa e' piu' cupo di quello del papel picado: acceso, la pesca rubava
   l'occhio al mazzetto. Il bordo e' crema e l'arancio sta dentro, in un
   filo: un bordo arancio, con le colonne accese in ambra, sembrava un
   bersaglio anche lui. */
.carta.dorso.dorso-festa-muertos {
    background: #bf0068 url(immagini/muertos/calavera.svg) 50% 50% / 100% 100% no-repeat;
    border: 3px solid #fff3e0;
}

.coll-dorso.dorso-festa-muertos {
    background: #bf0068 url(immagini/muertos/calavera.svg) 50% 50% / 100% 100% no-repeat;
    border-color: #fff3e0;
}

/* dietro la figurina la calavera sta intera in mezzo al rosa */
.figurina.retro.dorso-festa-muertos {
    background: #bf0068 url(immagini/muertos/calavera.svg) 50% 50% / auto 90% no-repeat;
}

.carta.dorso.dorso-festa-muertos.accantonata {
    background-color: #55217e;
}

/* e le medaglie della cerimonia, prima di girarsi */
.cer-retro.dorso-festa-muertos {
    background: #bf0068 url(immagini/muertos/calavera.svg) 50% 50% / 100% 100% no-repeat;
    border-color: #fff3e0;
}

/* I fiori stanno dietro la carta, come nella cornice di un ritratto
   sull'ofrenda: ne spunta solo la meta' di fuori, 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 i fiori crescono con lei. */
html.tema-muertos .mazzetto {
    z-index: 0;
}

html.tema-muertos .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/muertos/ghirlanda.svg) 0 0 / 100% 100% no-repeat;
    pointer-events: none;
}

html.tema-muertos .mazzetto .etichetta {
    margin-top: calc(var(--cw) * 0.12);
    color: #ffc857;
    text-shadow: 0 1px 3px rgba(20, 4, 12, 0.95);
}

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

html.tema-muertos #banner {
    background: rgba(39, 10, 25, 0.94);
}

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

html.tema-muertos #chat {
    background-color: rgba(31, 8, 20, 0.96);
}

html.tema-muertos #chat-apri circle {
    fill: #270a19;
}

/* Il VS si gioca sopra l'ofrenda: il festone in cima, le candele e i fiori
   in fondo, e in mezzo la loro luce dietro alle fasce */
html.tema-muertos #ingresso {
    background:
        url(immagini/muertos/festone-vs.svg) 50% 0 / 375px 64px repeat-x,
        url(immagini/muertos/ofrenda-vs.svg) 50% 100% / 375px 150px no-repeat,
        radial-gradient(circle at 50% 100%, rgba(255, 160, 60, 0.22) 0, rgba(255, 160, 60, 0) 230px),
        radial-gradient(circle at 50% 50%, rgba(255, 150, 60, 0.14) 0, rgba(255, 150, 60, 0) 220px),
        radial-gradient(ellipse at 50% 50%, #521836 0%, #2a0a1c 62%, #13040c 100%);
}

/* Le fasce restano rossa e blu, perche' dicono chi gioca contro chi, ma
   diventano stoffa ricamata come la tovaglia: l'orlo a smerli e' una
   maschera, e dentro corre una fila di punto croce. La maschera si porta
   via l'ombra della fascia. E' il ricamo, 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-muertos::before {
    -webkit-mask-image:
        radial-gradient(circle, #000 6.5px, transparent 7px),
        radial-gradient(circle, #000 6.5px, transparent 7px),
        linear-gradient(#000, #000);
    -webkit-mask-size: 16px 14px, 16px 14px, 100% calc(100% - 14px);
    -webkit-mask-position: 0 0, 0 100%, 0 7px;
    -webkit-mask-repeat: repeat-x, repeat-x, no-repeat;
    background-image:
        url(immagini/muertos/orlo.svg),
        url(immagini/muertos/orlo.svg),
        linear-gradient(90deg, #2f6fed 0%, #1f4fbf 55%, #163a8e 100%);
    background-size: 16px 10px, 16px 10px, 100% 100%;
    background-position: 0 12px, 0 calc(100% - 12px), 0 0;
    background-repeat: repeat-x, repeat-x, no-repeat;
}

.ingresso-lato.cornice-tema-muertos.suo::before {
    background-image:
        url(immagini/muertos/orlo.svg),
        url(immagini/muertos/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 festone in cima, i cempasuchil negli angoli in
   fondo, la luce delle candele dietro la tessera e sotto la tovaglia. 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-muertos {
    padding-top: 76px;
    padding-bottom: 84px;
    background-image:
        url(immagini/muertos/festone.svg),
        url(immagini/muertos/petali-1.svg),
        url(immagini/muertos/petali-2.svg),
        radial-gradient(circle at 50% 42%, rgba(255, 176, 72, 0.22) 0, rgba(255, 176, 72, 0) 230px),
        url(immagini/muertos/ricamo.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 ritratto
   sull'ofrenda: il festone fermo in cima e i cempasuchil fermi negli angoli
   in fondo, come nel menu, la luce delle candele che scorre col profilo, la
   tovaglia ferma 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-muertos {
    padding-top: 76px;
    padding-bottom: 84px;
    background-image:
        radial-gradient(circle at 50% 150px, rgba(255, 176, 72, 0.16) 0, rgba(255, 176, 72, 0) 200px),
        url(immagini/muertos/ricamo.svg),
        var(--sopra-luce);
    background-attachment: local, scroll, scroll;
}

/* Festone e fiori non sono sfondi: da sfondi medaglie e placche gli
   passavano sopra, e il festone se ne andava con la testa del profilo. Sono
   fissi come la X, che viene dopo e resta sopra il festone. Il tocco li
   attraversa: una placca sotto un fiore si apre lo stesso, e un dito che
   parte dal festone fa scorrere il profilo, che sopra un pezzo fisso
   resterebbe fermo. In fondo il profilo ha il posto per uscire da sotto i
   fiori, alti al piu' 74 pixel. */
#scheda.veste-muertos::before,
#scheda.veste-muertos::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
}

/* Dietro il festone c'e' la tovaglia stessa, ricamo compreso: copre quello
   che scorre e sfuma dove il profilo comincia, cosi' fermo in cima non si
   vede, e fra le bandierine non passa una medaglia tagliata. E' alta solo
   quanto il festone, 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-muertos::before {
    top: 0;
    height: 76px;
    background:
        url(immagini/muertos/festone.svg) 50% 0 / 375px 64px repeat-x,
        url(immagini/muertos/ricamo.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-muertos::after {
    bottom: 0;
    height: 110px;
    background:
        url(immagini/muertos/petali-1.svg) 0 100% / 120px 110px no-repeat,
        url(immagini/muertos/petali-2.svg) 100% 100% / 110px 100px no-repeat;
}

/* i fiori sporgono dalla carta: il nome si scosta */
#scheda.veste-muertos .scheda-carta {
    margin-right: 28px;
}

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

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

#scheda.veste-muertos .scheda-carta::after {
    z-index: -2;
    top: -2.2em;
    left: -2.59em;
    width: 8em;
    height: 8.4em;
    background: radial-gradient(closest-side, rgba(255, 206, 110, 0.42) 0, rgba(255, 150, 40, 0.16) 55%, rgba(255, 150, 40, 0) 100%);
}

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

/* La tovaglia e un dorso con la calavera, anche a tema spento: e' la vetrina */
.tema-mini-muertos {
    background-color: #3a1026;
    background-image:
        url(immagini/muertos/ricamo.svg),
        radial-gradient(ellipse at 50% 38%, #61203a 0%, #3a1026 60%, #1c0611 100%);
}

.tema-mini-muertos i {
    background: #bf0068 url(immagini/muertos/calavera.svg) 50% 50% / 100% 100% no-repeat;
    border: 2px solid #fff3e0;
}

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

/* Il ricamo sulla figurina: la fascia del VS girata a cornice, stoffa prugna
   col punto croce color crema, come l'orlo */
.cornice-tema-muertos {
    --cornice: url(/app/immagini/muertos/orlo.svg) 0 50% / 16px 10px repeat, linear-gradient(135deg, #b0246e, #6e1446 55%, #4a0b30);
    --cornice-luce: rgba(255, 120, 180, 0.4);
}