/* =========================================================================
   Ruota della fortuna Metzger® — /ruota
   Si appoggia a styles.css (colori, bottoni, campi, verifica dell'età).
   Pensata per il telefono: ci si arriva inquadrando un QR.
   ========================================================================= */

.pagina-ruota {
  background:
    radial-gradient(circle at 50% 38%, rgba(235, 2, 42, 0.1), transparent 60%),
    var(--crema);
}

.rt {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 22px 16px 28px;
}

/* ------------------------------------------------------------- testata */

.rt-testa {
  text-align: center;
  margin-bottom: 14px;
}

.rt-marchio {
  font-family: var(--slab);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--rosso);
}

.rt-marchio sup {
  font-size: 0.55em;
}

.rt-testa h1 {
  margin: 4px 0 6px;
  font-family: var(--slab);
  font-weight: 900;
  font-size: clamp(2rem, 9vw, 2.8rem);
  line-height: 1.02;
}

.rt-testa h1 span {
  color: var(--rosso);
}

.rt-sotto {
  margin: 0;
  color: var(--grigio);
  font-weight: 600;
}

/* --------------------------------------------------------------- ruota */

.rt-ruota {
  position: relative;
  width: min(86%, 400px);
  margin: 18px auto 44px;
  margin-left: max(0px, calc(50% - 230px));
  aspect-ratio: 1;
}

/* L'elefantino Metzger seduto accanto alla ruota: festeggia o si abbatte con il risultato. */
.rt-elefante {
  position: absolute;
  right: -22%;
  bottom: -15%;
  z-index: 3;
  width: 44%;
  height: auto;
  transform-origin: 50% 100%;
  filter: drop-shadow(4px 4px 0 rgba(28, 27, 24, 0.25));
  pointer-events: none;
}

.gira .rt-elefante {
  animation: rt-tifa 0.5s ease-in-out infinite alternate;
}

.rt-elefante.festa {
  animation: rt-salta 0.45s ease-in-out 4;
}

.rt-elefante.triste {
  transform: rotate(-6deg) translateY(4%);
  filter: drop-shadow(4px 4px 0 rgba(28, 27, 24, 0.25)) saturate(0.55) brightness(0.9);
  transition: transform 0.6s, filter 0.6s;
}

@keyframes rt-tifa {
  to { transform: rotate(-3deg); }
}

@keyframes rt-salta {
  50% { transform: translateY(-14%) rotate(4deg); }
}

.rt-disco {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(6px 6px 0 var(--nero));
}

.rt-spicchio path {
  stroke: var(--nero);
  stroke-width: 2;
}

.rt-spicchio--rosso path {
  fill: var(--rosso);
}

.rt-spicchio--crema path {
  fill: var(--carta);
}

.rt-nome {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
}

.rt-spicchio--nero > path {
  fill: var(--nero);
}

.rt-spicchio--nero .rt-nome {
  fill: var(--crema);
}

/* Sul nero i contorni della faccina e del boccale diventano crema. */
.rt-spicchio--nero .rt-contorno {
  stroke: var(--crema);
}

.rt-nome--due {
  font-size: 15px;
}

.rt-nome--solo {
  font-size: 21px;
}

.rt-spicchio--rosso .rt-nome {
  fill: #fff;
}

.rt-spicchio--crema .rt-nome {
  fill: var(--nero);
}

.rt-bordo {
  fill: none;
  stroke: var(--nero);
  stroke-width: 14;
}

.rt-luce {
  fill: #fff3c4;
  stroke: var(--nero);
  stroke-width: 1.5;
}

.rt-luce--b {
  fill: #f5b400;
}

/* Mentre gira le lampadine lampeggiano a coppie alterne. */
.gira .rt-luce {
  animation: rt-lampeggia 0.24s steps(1) infinite;
}

.gira .rt-luce--b {
  animation-delay: 0.12s;
}

@keyframes rt-lampeggia {
  50% {
    fill: #7a6a3a;
  }
}

.rt-mozzo {
  fill: #fff;
  stroke: var(--nero);
  stroke-width: 5;
}

.rt-puntatore {
  position: absolute;
  top: -3%;
  left: 50%;
  z-index: 2;
  width: 13%;
  transform: translateX(-50%);
  transform-origin: 50% 30%;
  filter: drop-shadow(3px 3px 0 var(--nero));
}

.rt-puntatore path {
  fill: var(--rosso);
  stroke: var(--nero);
  stroke-width: 3;
  stroke-linejoin: round;
}

.rt-puntatore circle {
  fill: var(--crema);
  stroke: var(--nero);
  stroke-width: 3;
}

.rt-puntatore.scatta {
  animation: rt-scatta 0.12s ease-out;
}

@keyframes rt-scatta {
  40% {
    transform: translateX(-50%) rotate(-14deg);
  }
}

/* -------------------------------------------------------------- modulo */

.rt-form {
  padding: 20px 18px 18px;
  background: var(--carta);
  border: var(--bordo);
  border-radius: var(--r);
  box-shadow: var(--ombra);
}

.rt-form .campo input {
  font-size: 1.05rem; /* 16px o più: iOS non fa zoom sul campo */
}

.rt-suggerimento {
  margin-top: 8px;
  padding: 6px 12px;
  border: 2px solid var(--rosso);
  border-radius: 999px;
  background: #fff;
  color: var(--rosso);
  font: 800 0.85rem var(--testo);
  cursor: pointer;
}

.rt-legale {
  margin: 0 0 16px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--grigio);
}

.rt-legale a {
  color: var(--rosso);
  font-weight: 700;
}

.rt-avviso {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--crema-2);
  border: 2px dashed var(--nero);
  border-radius: 10px;
  font-size: 0.92rem;
  text-align: center;
}

/* --------------------------------------------------------------- esito */

.rt-esito {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(28, 27, 24, 0.72);
}

.rt-esito[hidden] {
  display: none;
}

.rt-esito__box {
  position: relative;
  overflow: hidden;
  width: min(100%, 420px);
  padding: 28px 22px 22px;
  background: var(--carta);
  border: 3px solid var(--nero);
  border-radius: 18px;
  box-shadow: 10px 10px 0 var(--rosso);
  text-align: center;
  animation: rt-entra 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes rt-entra {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
}

.rt-esito__img {
  position: relative;
  width: 132px;
  height: 132px;
  object-fit: contain;
  margin: 0 auto 6px;
}

.rt-esito__faccina {
  position: relative;
  width: 180px;
  height: auto;
  margin: 0 auto 8px;
}

.rt-esito__faccina[hidden] {
  display: none;
}

.rt-esito__eti {
  position: relative;
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rosso);
}

.rt-esito h2 {
  position: relative;
  margin: 2px 0 10px;
  font-family: var(--slab);
  font-weight: 900;
  font-size: clamp(1.8rem, 8vw, 2.3rem);
  line-height: 1.1;
}

.rt-esito h2:focus {
  outline: none;
}

.rt-esito p {
  position: relative;
  margin: 0 0 18px;
}

.rt-esito small {
  color: var(--grigio);
}

.rt-coriandoli {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rt-coriandoli i {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  animation: rt-cadi 1.8s ease-in forwards;
}

@keyframes rt-cadi {
  to {
    top: 110%;
    transform: rotate(540deg);
  }
}

/* ------------------------------------------ premio aperto dall'email */

.rt-premio {
  padding: 24px 18px;
  background: var(--carta);
  border: var(--bordo);
  border-radius: var(--r);
  box-shadow: var(--ombra);
  text-align: center;
}

.rt-premio__eti {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rosso);
}

.rt-premio h2 {
  margin: 2px 0 8px;
  font-family: var(--slab);
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.1;
}

.rt-premio__img {
  margin: 4px auto 0;
  width: 110px;
  height: 110px;
  object-fit: contain;
}

.rt-premio__qr {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
  margin: 8px auto;
}

.rt-premio__codice {
  margin: 0;
  font: 800 1.25rem/1 'Courier New', monospace;
  letter-spacing: 0.08em;
}

.rt-premio__stato {
  display: inline-block;
  margin: 14px 0 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--verde);
  color: #fff;
  font-weight: 800;
}

.rt-premio.ritirato .rt-premio__stato {
  background: var(--grigio);
}

.rt-premio.ritirato .rt-premio__qr {
  opacity: 0.25;
}

.rt-piede {
  margin: 22px 0 0;
  font-size: 0.75rem;
  color: var(--grigio);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .gira .rt-luce,
  .rt-coriandoli i,
  .rt-esito__box,
  .gira .rt-elefante,
  .rt-elefante.festa {
    animation: none;
  }
}

/* styles.css dà display:block alle immagini: hidden deve vincere. */
.rt-esito__img[hidden],
.rt-premio__img[hidden] {
  display: none;
}

/* styles.css dà display:block ai messaggi d'errore: hidden deve vincere. */
.rt-form .campo__errore[hidden] {
  display: none;
}