/* ==========================================================================
   Tabacchi La Sicilia — pagine del sorteggio (sito e web app)

   Un solo file per i due temi. Il tema lo decide la classe sul contenitore:
     .sorteggio--natale   notte d'inverno con la neve
     .sorteggio--pasqua   mattina di primavera con i petali
     .sorteggio--neutro   i colori del sito (pagina "codice inviato" senza tema)
   Per cambiare tema a una pagina basta cambiare quella classe e data-tema
   (vedi LEGGIMI); il resto della pagina non cambia.

   Le decorazioni sono le Fluent Emoji 3D di Microsoft (licenza MIT, in
   assets/img/festivita/ con il file della licenza).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Colori dei temi
   -------------------------------------------------------------------------- */

.sorteggio {
  --ls-font-titoli: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --ls-font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --t-cielo-1: #13110f;
  --t-cielo-2: #1c1916;
  --t-cielo-3: #27231f;
  --t-bagliore: rgba(249, 154, 0, .28);
  --t-testo: #f5efe6;
  --t-testo-2: #c9bfb2;
  --t-accento: #f99a00;
  --t-accento-testo: #f99a00;
  --t-pagina: #13110f;
  --t-superficie: #1c1916;
  --t-linea: #3a342e;
  --t-matrice: #2b241d;
  --t-spunta: #f99a00;
  position: relative;
  background: var(--t-pagina);
  color: var(--t-testo);
}

.sorteggio--natale {
  --t-cielo-1: #081127;
  --t-cielo-2: #10224a;
  --t-cielo-3: #1b3768;
  --t-bagliore: rgba(242, 193, 78, .3);
  --t-testo: #f3f6ff;
  --t-testo-2: #c2cde6;
  --t-accento: #f2c14e;
  --t-accento-testo: #f6cf6b;
  --t-pagina: #0b1631;
  --t-superficie: #12224a;
  --t-linea: #284071;
  --t-matrice: #b8302b;
  --t-spunta: #f2c14e;
}

.sorteggio--pasqua {
  --t-cielo-1: #9fd6f7;
  --t-cielo-2: #d4ecfa;
  --t-cielo-3: #fff3df;
  --t-bagliore: rgba(255, 214, 102, .65);
  --t-testo: #2a2140;
  --t-testo-2: #574c6b;
  --t-accento: #7a52c7;
  --t-accento-testo: #6a42b6;
  --t-pagina: #fff8ee;
  --t-superficie: #ffffff;
  --t-linea: #ecdfca;
  --t-matrice: #7a52c7;
  --t-spunta: #3e9a5b;
}

/* --------------------------------------------------------------------------
   2. Cielo della festa (sezione d'apertura)
   -------------------------------------------------------------------------- */

.festa {
  position: relative;
  padding: calc(var(--ls-testata, 76px) + clamp(3rem, 2rem + 5vw, 6.5rem)) 0 clamp(8rem, 6rem + 7vw, 12rem);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 55% 45% at 50% -8%, var(--t-bagliore), transparent 70%),
    linear-gradient(180deg, var(--t-cielo-1) 0%, var(--t-cielo-2) 45%, var(--t-cielo-3) 78%, var(--t-pagina) 100%);
  color: var(--t-testo);
  text-align: center;
}

.sorteggio--pasqua .festa {
  background:
    radial-gradient(circle at 82% 4%, rgba(255, 224, 130, .95) 0 5%, rgba(255, 214, 102, .5) 10%, transparent 34%),
    linear-gradient(180deg, var(--t-cielo-1) 0%, var(--t-cielo-2) 45%, var(--t-cielo-3) 78%, var(--t-pagina) 100%);
}

.festa--breve {
  padding-bottom: clamp(5rem, 4rem + 4vw, 7.5rem);
}

.festa--esito {
  display: flex;
  align-items: center;
  min-height: 92vh;
  min-height: 92svh;
  padding-bottom: clamp(4rem, 3rem + 4vw, 6rem);
}

.festa--esito .container {
  width: 100%;
}

/* Tela delle particelle: la crea sorteggio.js */

.festa__cielo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.festa__cielo canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Fascia in basso con il motivo del tema: il paesino innevato o le uova */

.festa__motivo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  height: 52%;
  background-repeat: repeat;
  background-size: 300px auto;
  opacity: .2;
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 30%, #000 52%, transparent 100%);
  mask-image: linear-gradient(0deg, transparent 0%, #000 30%, #000 52%, transparent 100%);
}

.sorteggio--natale .festa__motivo {
  background-image: url("../img/natale.png");
  opacity: .28;
}

.sorteggio--pasqua .festa__motivo {
  background-image: url("../img/pasqua.jpg");
  background-size: 260px auto;
  opacity: .2;
}

.sorteggio--neutro .festa__motivo {
  background-image: radial-gradient(circle, rgba(255, 91, 46, .14) 0 1px, transparent 1.6px);
  background-size: 7px 7px;
  opacity: 1;
}

.festa__contenuto {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.festa__occhiello {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: .45rem 1rem;
  border: 1px solid color-mix(in srgb, var(--t-testo) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--t-testo) 9%, transparent);
  font-family: var(--ls-font-mono, ui-monospace, monospace);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-accento-testo);
}

.sorteggio--pasqua .festa__occhiello {
  background: rgba(255, 255, 255, .7);
  border-color: rgba(122, 82, 199, .25);
}

.festa__titolo {
  max-width: 14ch;
  margin: 0 0 1.25rem;
  font-family: var(--ls-font-titoli, "Arial Narrow", sans-serif);
  font-size: clamp(3.4rem, 1.4rem + 8vw, 8rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.005em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--t-testo);
  text-shadow: 0 6px 40px rgba(0, 0, 0, .25);
}

.sorteggio--pasqua .festa__titolo {
  text-shadow: 0 4px 30px rgba(255, 255, 255, .7);
}

.festa__testo {
  max-width: 36rem;
  margin: 0 auto 2rem;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  color: var(--t-testo-2);
}

.festa__azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

/* --------------------------------------------------------------------------
   3. Decorazioni 3D: galleggiano (CSS) e seguono il puntatore (JS)
   Galleggiano con la proprietà translate, seguono il puntatore con
   transform e ruotano con rotate: tre proprietà separate, nessun conflitto.
   -------------------------------------------------------------------------- */

.festa__decori {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.decoro {
  --prof: .6;
  --durata: 4.6s;
  --ritardo: 0s;
  position: absolute;
  width: clamp(58px, 8vw, 118px);
  height: auto;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .35));
  transform: translate3d(calc(var(--mx, 0) * var(--prof) * 1px), calc(var(--my, 0) * var(--prof) * 1px), 0);
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
  animation: festa-galleggia var(--durata) ease-in-out var(--ritardo) infinite alternate;
}

.sorteggio--pasqua .decoro {
  filter: drop-shadow(0 14px 16px rgba(90, 60, 140, .22));
}

.decoro--1 {
  --prof: .7;
  --durata: 4.2s;
  top: 18%;
  left: 6%;
  rotate: -10deg;
}

.decoro--2 {
  --prof: 1;
  --durata: 5.1s;
  --ritardo: -1.2s;
  top: 15%;
  right: 6%;
  width: clamp(64px, 9vw, 132px);
  rotate: 12deg;
}

.decoro--3 {
  --prof: .45;
  --durata: 3.8s;
  --ritardo: -2s;
  top: 52%;
  left: 3%;
  width: clamp(48px, 6vw, 92px);
  rotate: 9deg;
}

.decoro--4 {
  --prof: .8;
  --durata: 4.8s;
  --ritardo: -.6s;
  top: 50%;
  right: 3%;
  width: clamp(50px, 6.5vw, 98px);
  rotate: -9deg;
}

.decoro--5 {
  --prof: 1.2;
  --durata: 5.6s;
  --ritardo: -3s;
  bottom: 14%;
  left: 17%;
  width: clamp(44px, 5.5vw, 84px);
  rotate: -14deg;
}

.decoro--6 {
  --prof: .55;
  --durata: 4.4s;
  --ritardo: -1.8s;
  bottom: 12%;
  right: 16%;
  width: clamp(44px, 5.5vw, 86px);
  rotate: 11deg;
}

@keyframes festa-galleggia {
  from {
    translate: 0 -9px;
  }
  to {
    translate: 0 11px;
  }
}

@media (max-width: 767.98px) {
  .decoro--1 {
    top: 11%;
    left: -2%;
  }

  .decoro--2 {
    top: 9%;
    right: -3%;
  }

  .decoro--3, .decoro--4 {
    display: none;
  }

  .decoro--5 {
    bottom: 6%;
    left: 4%;
  }

  .decoro--6 {
    bottom: 5%;
    right: 4%;
  }
}

/* Nella pagina "codice inviato" si vede il gruppo del tema scelto */

.festa__decori--natale, .festa__decori--pasqua, .festa__decori--neutro {
  display: none;
}

.sorteggio--natale .festa__decori--natale, .sorteggio--pasqua .festa__decori--pasqua, .sorteggio--neutro .festa__decori--neutro {
  display: block;
}

/* --------------------------------------------------------------------------
   4. Conto alla rovescia
   -------------------------------------------------------------------------- */

.conto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}

.conto__etichetta, .conto__data {
  margin: 0;
  font-family: var(--ls-font-mono, ui-monospace, monospace);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-testo-2);
}

.conto__cifre {
  display: flex;
  gap: .6rem;
}

.conto__cella {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 5.25rem;
  margin: 0;
  padding: .6rem .85rem .55rem;
  border: 1px solid color-mix(in srgb, var(--t-testo) 18%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--t-testo) 8%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

.sorteggio--pasqua .conto__cella {
  border-color: rgba(122, 82, 199, .18);
  background: rgba(255, 255, 255, .75);
  box-shadow: 0 10px 24px -14px rgba(90, 60, 140, .45);
}

.conto__numero {
  display: block;
  font-family: var(--ls-font-titoli, "Arial Narrow", sans-serif);
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--t-testo);
}

.conto__unita {
  font-family: var(--ls-font-mono, ui-monospace, monospace);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t-testo-2);
}

/* --------------------------------------------------------------------------
   5. Il biglietto: matrice colorata + corpo di carta con il modulo
   -------------------------------------------------------------------------- */

.biglietto-sezione {
  position: relative;
  z-index: 2;
  margin-top: clamp(-7rem, -5rem - 3vw, -5rem);
  padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.biglietto {
  --buco: 17px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 28px;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06);
  overflow: hidden;
}

.sorteggio--pasqua .biglietto {
  box-shadow: 0 40px 80px -40px rgba(90, 60, 140, .45), 0 0 0 1px rgba(122, 82, 199, .12);
}

@media (min-width: 768px) {
  .biglietto {
    grid-template-columns: minmax(220px, 290px) 1fr;
  }
}

.biglietto__matrice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 2rem 1.5rem;
  background-color: var(--t-matrice);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .25));
  color: #fff;
  text-align: center;
  isolation: isolate;
}

.biglietto__matrice::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: 180px auto;
  opacity: .16;
}

.sorteggio--natale .biglietto__matrice::before {
  background-image: url("../img/natale.png");
}

.sorteggio--pasqua .biglietto__matrice::before {
  background-image: url("../img/pasqua.jpg");
  opacity: .22;
}

.biglietto__marchio {
  margin: 0 0 .25rem;
}

.biglietto__logo {
  display: block;
  width: 96px;
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35));
}

.biglietto__serie {
  margin: 0;
  font-family: var(--ls-font-titoli, "Arial Narrow", sans-serif);
  font-size: 1.9rem;
  font-weight: 900;
  line-height: .95;
  text-transform: uppercase;
}

.biglietto__nota {
  max-width: 16rem;
  margin: .25rem 0 0;
  font-size: .875rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .85);
}

.biglietto__corpo {
  position: relative;
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  border-top: 2px dashed #d9cfbf;
  color: #2a241e;
  text-align: left;
}

/* Perforazione: i mezzi fori sono ritagliati davvero con una maschera su
   matrice e corpo, così dietro si vede quello che c'è (cielo o pagina). */

.biglietto__matrice {
  -webkit-mask:
    radial-gradient(circle var(--buco) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--buco) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle var(--buco) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--buco) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
}

.biglietto__corpo {
  background: #faf6ef;
  -webkit-mask:
    radial-gradient(circle var(--buco) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--buco) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle var(--buco) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--buco) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
}

@media (min-width: 768px) {
  .biglietto__corpo {
    border-top: 0;
    border-left: 2px dashed #d9cfbf;
    -webkit-mask:
      radial-gradient(circle var(--buco) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat,
      radial-gradient(circle var(--buco) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
    mask:
      radial-gradient(circle var(--buco) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat,
      radial-gradient(circle var(--buco) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  }

  .biglietto__matrice {
    -webkit-mask:
      radial-gradient(circle var(--buco) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat,
      radial-gradient(circle var(--buco) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
    mask:
      radial-gradient(circle var(--buco) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat,
      radial-gradient(circle var(--buco) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  }
}

.biglietto__titolo {
  margin: 0 0 .35rem;
  font-family: var(--ls-font-titoli, "Arial Narrow", sans-serif);
  font-size: clamp(2.2rem, 1.8rem + 1.5vw, 3rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  color: #2a241e;
}

.biglietto__sottotitolo {
  margin: 0 0 1.5rem;
  color: #5c534a;
}

.biglietto__avvertenza {
  margin: 1.25rem 0 0;
  font-size: .875rem;
  color: #6b6157;
}

/* Il corpo è di carta anche sul sito scuro: campi chiari */

.biglietto .form-label {
  color: #2a241e;
}

.biglietto .form-control {
  border: 1.5px solid #d6cbb9;
  background-color: #fff;
  color: #2a241e;
}

.biglietto .form-control::placeholder {
  color: #9a8f82;
}

.biglietto .form-control:focus {
  border-color: #e08a00;
  background-color: #fff;
  color: #2a241e;
  box-shadow: 0 0 0 .25rem rgba(249, 154, 0, .25);
}

.biglietto .form-check-input {
  border-color: #a39684;
  background-color: #fff;
}

.biglietto .form-check-input:checked {
  border-color: #f99a00;
  background-color: #f99a00;
}

.biglietto .consenso {
  color: #4a4038;
}

.biglietto a {
  color: #a65800;
}

.biglietto .avviso-modulo {
  background: #fde8e5;
  color: #a52a1f;
}

/* Il campo del codice: monospazio leggibile, lettere maiuscole */

.campo-codice {
  font-family: var(--ls-font-mono, ui-monospace, monospace);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.campo-codice::placeholder {
  font-family: var(--ls-font-testo, system-ui, sans-serif);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.biglietto__invia {
  position: relative;
}

.biglietto__invia.is-attesa::after {
  content: "";
  width: 1.1em;
  height: 1.1em;
  margin-left: .25rem;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: festa-gira .7s linear infinite;
}

@keyframes festa-gira {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   6. Domande frequenti, esito, prossimo sorteggio
   -------------------------------------------------------------------------- */

.domande-sezione .occhiello {
  color: var(--t-accento-testo);
}

.domande__testo {
  margin: 0 0 1.25rem;
  color: var(--t-testo-2);
}

.domande {
  --bs-accordion-bg: var(--t-superficie);
  --bs-accordion-color: var(--t-testo);
  --bs-accordion-border-color: var(--t-linea);
  --bs-accordion-border-radius: 18px;
  --bs-accordion-inner-border-radius: 17px;
  --bs-accordion-btn-color: var(--t-testo);
  --bs-accordion-btn-bg: var(--t-superficie);
  --bs-accordion-active-color: var(--t-accento-testo);
  --bs-accordion-active-bg: var(--t-superficie);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--t-accento) 35%, transparent);
  --bs-accordion-btn-padding-y: 1.15rem;
}

.domande .accordion-button {
  font-weight: 700;
  font-size: 1.0625rem;
}

.domande .accordion-body p {
  margin: 0;
  color: var(--t-testo-2);
}

.sorteggio--natale .domande .accordion-button::after, .sorteggio--neutro .domande .accordion-button::after {
  filter: invert(1) brightness(1.4);
}

.sorteggio .riquadro {
  border-color: var(--t-linea);
  background: var(--t-superficie);
}

.sorteggio .riquadro__testo, .sorteggio .esito__nota {
  color: var(--t-testo-2);
}

.sorteggio--pasqua .riquadro {
  box-shadow: 0 24px 50px -30px rgba(90, 60, 140, .35);
}

.esito {
  padding-top: clamp(3rem, 2rem + 3vw, 5rem);
}

.esito__social {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.5rem 0;
}

.esito__bottone {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-border-width: 0;
}

.esito__bottone--facebook {
  --bs-btn-bg: #1877f2;
  --bs-btn-hover-bg: #0f63d4;
  --bs-btn-active-bg: #0b55b8;
}

.esito__bottone--instagram {
  --bs-btn-bg: #c13584;
  --bs-btn-hover-bg: #a82c72;
  --bs-btn-active-bg: #8f2461;
  background-image: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888);
}

.esito__nota {
  margin: 0;
}

.esito__nota .bi {
  margin-right: .35rem;
  color: var(--t-accento-testo);
}

.prossimo {
  overflow: hidden;
}

.prossimo__decoro {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 120px;
  height: auto;
  rotate: 12deg;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .3));
  animation: festa-galleggia 4.4s ease-in-out infinite alternate;
}

.prossimo .riquadro__titolo, .prossimo .riquadro__testo {
  max-width: calc(100% - 90px);
}

.prossimo .occhiello {
  color: var(--t-accento-testo);
}

.prossimo--natale .prossimo__decoro {
  rotate: 10deg;
}

.prossimo--pasqua .prossimo__decoro {
  rotate: -6deg;
}

.esito__vincitori {
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   7. Pagina "codice inviato": il segno di spunta
   -------------------------------------------------------------------------- */

.spunta {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  margin: 0 0 1.5rem;
  border-radius: 50%;
  background: var(--t-spunta);
  color: #1b1206;
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--t-spunta) 22%, transparent), 0 24px 50px -20px rgba(0, 0, 0, .6);
}

.sorteggio--pasqua .spunta {
  color: #fff;
}

.spunta__segno {
  font-size: 3.4rem;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   8. Pasqua sul sito scuro: la pagina è chiara, i componenti si adeguano
   -------------------------------------------------------------------------- */

body.sito:has(.sorteggio--pasqua) .testata::before {
  opacity: 1;
}

.sorteggio--pasqua .occhiello {
  color: var(--t-accento-testo);
}

.sorteggio--pasqua .titolo-sezione, .sorteggio--pasqua .riquadro__titolo {
  color: var(--t-testo);
}

.sorteggio--pasqua .btn-outline-light {
  --bs-btn-color: var(--t-testo);
  --bs-btn-border-color: rgba(42, 33, 64, .35);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--t-testo);
  --bs-btn-hover-border-color: var(--t-testo);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1c1530;
  --bs-btn-active-border-color: #1c1530;
}

.sorteggio--pasqua .domande .accordion-button:not(.collapsed) {
  box-shadow: inset 0 -1px 0 var(--t-linea);
}

/* --------------------------------------------------------------------------
   9. Web app: la festa diventa una scheda dentro lo schermo dell'app,
   il modulo resta quello dell'app con una matrice a tema sopra
   -------------------------------------------------------------------------- */

.sorteggio--app {
  background: transparent;
  color: inherit;
}

.festa--app {
  margin: 0 0 1rem;
  padding: 1.6rem 1.1rem 1.5rem;
  border-radius: var(--r, 16px);
  box-shadow: var(--sh, 0 .125rem .35rem rgba(0, 0, 0, .07));
}

.festa--app .festa__occhiello {
  margin-bottom: .85rem;
  padding: .3rem .75rem;
  font-size: .6875rem;
}

.festa--app .festa__titolo {
  max-width: 12ch;
  margin-bottom: .75rem;
  font-size: clamp(2.3rem, 1.7rem + 4vw, 3.4rem);
}

.festa--app .festa__testo {
  max-width: 26rem;
  margin-bottom: 1.1rem;
  font-size: .9375rem;
}

.festa--app .festa__motivo {
  height: 60%;
  background-size: 200px auto;
}

.festa--app .decoro {
  width: clamp(44px, 12vw, 64px);
}

.festa--app .decoro--1 {
  top: 6%;
  left: -2%;
}

.festa--app .decoro--2 {
  top: 4%;
  right: -2%;
  width: clamp(48px, 13vw, 70px);
}

.festa--app .decoro--3 {
  display: block;
  top: auto;
  bottom: 4%;
  left: 2%;
}

.festa--app .decoro--4 {
  display: block;
  top: auto;
  bottom: 3%;
  right: 2%;
}

.festa--app .conto__cella {
  min-width: 4.4rem;
  padding: .45rem .6rem .4rem;
  border-radius: 12px;
}

.festa--app .conto__numero {
  font-size: 2.1rem;
}

.festa--esito-app {
  padding-top: 1.9rem;
}

.festa--app .spunta {
  width: 84px;
  height: 84px;
  margin-bottom: 1.1rem;
}

/* Tratto della spunta: lo disegna sorteggio.js; fermo resta visibile */

.spunta__tratto {
  stroke-dasharray: 24;
  stroke-dashoffset: 0;
}

/* Modulo a biglietto */

.biglietto-app {
  --buco: 12px;
  margin-bottom: 1rem;
  overflow: hidden;
}

.biglietto-app__matrice {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.1rem;
  background-color: var(--t-matrice);
  background-image: linear-gradient(120deg, rgba(255, 255, 255, .14), rgba(0, 0, 0, .2));
  color: #fff;
  isolation: isolate;
  -webkit-mask:
    radial-gradient(circle var(--buco) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--buco) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle var(--buco) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--buco) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
}

.biglietto-app__matrice::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: 140px auto;
  opacity: .18;
}

.sorteggio--natale .biglietto-app__matrice::before {
  background-image: url("../img/natale.png");
}

.sorteggio--pasqua .biglietto-app__matrice::before {
  background-image: url("../img/pasqua.jpg");
  opacity: .24;
}

.biglietto-app__logo {
  flex: none;
  width: 44px;
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3));
}

.biglietto-app__serie {
  margin: 0;
  font-family: var(--ls-font-titoli);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.biglietto-app__corpo {
  padding: 1.125rem;
  border-top: 2px dashed var(--line, #dee2e6);
  -webkit-mask:
    radial-gradient(circle var(--buco) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--buco) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle var(--buco) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--buco) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
}

.biglietto-app__corpo .form > .action[type="submit"] {
  margin-top: 1rem;
}

.biglietto-app__corpo .form > .action--outline {
  margin-top: .75rem;
}

.field--codice {
  font-family: var(--ls-font-mono);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.field--codice::placeholder {
  font-family: var(--font, system-ui, sans-serif);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Prossimo sorteggio, nella pagina "concluso" */

.prossimo-app {
  position: relative;
  overflow: hidden;
  padding-right: 5.5rem;
}

.prossimo-app__decoro {
  position: absolute;
  top: 50%;
  right: .5rem;
  width: 72px;
  height: auto;
  translate: 0 -50%;
  rotate: 8deg;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25));
}

/* --------------------------------------------------------------------------
   10. Movimento ridotto
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .decoro, .prossimo__decoro {
    animation: none;
    transition: none;
    transform: none;
  }

  .biglietto__invia.is-attesa::after {
    animation-duration: 1.6s;
  }

}

/* Le schede che salgono sopra il cielo (biglietto, ricevuta, estrazione) coprivano l'ultima riga del cielo (data di chiusura, conto alla rovescia):
   il cielo ora è alto quanto la parte coperta più uno spazio di respiro. */
.festa--breve { padding-bottom: clamp(8.5rem, 8rem + 3vw, 10.5rem); }