/* Grafica «Carta» — carta e inchiostro, oro sui dorsi.
   È il gioco com'è, fatto con più cura: caratteri veri invece di quelli del sistema,
   dorsi che prendono il colore del mazzo, una carta che segue la mano e si illumina. */

body[data-tema="carta"] {
  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: 'Hanken Grotesk', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --barra-colore: #EFE9DC;

  --fondo: #F2EBDB;  --fondo-2: #DCCFB6;
  --carta-sfondo:
    radial-gradient(circle at var(--mx, 50%) var(--my, -10%), rgb(255 253 246 / .75), transparent 46%),
    linear-gradient(168deg, var(--carta-alt), var(--carta) 60%);
}
body[data-tema="carta"][data-livello="2"] { --fondo: #CDBFA5; --fondo-2: #B7A687; }
body[data-tema="carta"][data-livello="3"] { --fondo: #1D1A16; --fondo-2: #0D0C0A; }

/* onde d'oro sullo sfondo, come quelle del marchio, molto grandi */
body[data-tema="carta"]::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-radial-gradient(circle at 50% 56%, transparent 0 86px, rgb(176 141 87 / .2) 86px 87px);
  -webkit-mask-image: radial-gradient(circle at 50% 56%, #000 0%, transparent 72%);
          mask-image: radial-gradient(circle at 50% 56%, #000 0%, transparent 72%);
  animation: carta-respira 7s ease-in-out infinite;
}
@keyframes carta-respira { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
body[data-tema="carta"][data-livello="3"]::before { opacity: .5; }

/* la carta segue la mano: l'inclinazione la dà il JavaScript sul contenitore */
body[data-tema="carta"] #carta-host {
  transform-style: preserve-3d;
  transition: transform 520ms cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

body[data-tema="carta"] .titolo,
body[data-tema="carta"] .domanda { font-optical-sizing: auto; font-weight: 400; }
body[data-tema="carta"] .domanda { letter-spacing: -.012em; }

/* ------------------------------------------------------------ i dorsi
   Quello che c'è scritto sotto lo decide il mazzo: ogni dorso prende il suo colore,
   scurito fino a diventare inchiostro, e ci mette sopra anelli e un filo d'oro. */

body[data-tema="carta"] {
  --retro-sfondo: radial-gradient(110% 80% at 50% 42%,
    color-mix(in srgb, var(--campo, #D9734A) 24%, #130e0b) 0%,
    color-mix(in srgb, var(--campo, #D9734A) 11%, #100c09) 62%,
    #0b0807 100%);
  --retro-fg: #F4EBDD;
  --retro-bordo: color-mix(in srgb, var(--campo, #D9734A) 30%, #2a221b);
}
body[data-tema="carta"] .carta.retro::before {
  content: ''; position: absolute; inset: .6rem; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--campo, #D9734A) 52%, transparent);
  border-radius: calc(var(--raggio-carta) - .35rem);
}
body[data-tema="carta"] .carta.retro .onde-grandi i {
  border-color: color-mix(in srgb, var(--campo, #D9734A) 62%, #fff 6%);
}
body[data-tema="carta"] .carta.retro .nucleo {
  background: var(--campo, #D9734A);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--campo, #D9734A) 20%, transparent),
              0 0 28px 6px color-mix(in srgb, var(--campo, #D9734A) 45%, transparent);
}
body[data-tema="carta"] .carta.retro .dorso-mazzo {
  color: color-mix(in srgb, var(--campo, #D9734A) 70%, #fff 30%);
  letter-spacing: .26em;
}

/* ------------------------------------------------------------ i mazzi: pile di carte vere */

body[data-tema="carta"] .mazzo-riga:not(.bloccato) {
  background: var(--carta-alt);
  box-shadow:
    0 2px 0 -1px var(--carta), 0 3px 0 -1px var(--bordo-carta),
    0 5px 0 -2px var(--carta), 0 6px 0 -2px var(--bordo-carta);
  margin-bottom: 7px;
}
body[data-tema="carta"] .mazzo-riga:not(.bloccato):hover { transform: translate(3px, -2px); }

body[data-tema="carta"] .scelta.forte { box-shadow: 0 8px 18px -12px rgb(28 26 23 / .7); }

/* ------------------------------------------------------------ il sigillo
   Quando si risponde la carta viene sigillata: ceralacca che cade e si stampa. */

.sigillo {
  position: fixed; width: 5.2rem; height: 5.2rem; margin: -2.6rem 0 0 -2.6rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 2rem; color: rgb(255 238 214 / .9);
  background: radial-gradient(circle at 35% 30%, #E58A63, #B5502B 60%, #7E3118);
  box-shadow: inset 0 -4px 8px rgb(0 0 0 / .25), inset 0 3px 6px rgb(255 255 255 / .22), 0 14px 26px -10px rgb(60 20 8 / .6);
  animation: sigillo 1100ms cubic-bezier(.2, .9, .3, 1) both;
}
.sigillo::after {
  content: ''; position: absolute; inset: .45rem; border-radius: 50%;
  border: 1px dashed rgb(255 238 214 / .55);
}
@keyframes sigillo {
  0%   { opacity: 0; transform: translateY(-34px) scale(1.7) rotate(-14deg); }
  28%  { opacity: 1; transform: translateY(0) scale(.94) rotate(3deg); }
  40%  { transform: scale(1.04) rotate(-1deg); }
  52%  { transform: scale(1) rotate(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1) rotate(0); }
}


/* il dorso nel colore del mazzo (base in styles.css): scuro e caldo, con il simbolo chiaro */
body[data-tema="carta"] { --dorso-l1: .38; --dorso-l2: .17; }