/* ==========================================================================
   STANZA — la stanza della lettura gratuita (lettura.js). Il nome del blocco
   è «stanza» perché .lettura è già il riquadro dell'oroscopo (ruota.css).
   Sta sopra tutta la pagina: a sinistra la cartomante (il video arriva dalla
   hero), a destra il tavolo, che cambia con data-fase:
     tema → mescola → scegli → rivela.
   Sul telefono la cartomante sta in alto e le sue parole le scorrono sotto;
   quando si leggono le carte si fa piccola e lascia spazio al testo.
   Col movimento ridotto niente voli né scintille: le carte appaiono già al
   loro posto e si girano con una dissolvenza.
   ========================================================================== */

html.stanza-aperta,
html.stanza-aperta body {
  overflow: hidden;
}

.stanza {
  position: fixed;
  inset: 0;
  z-index: 150;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--color-text-soft);
  -webkit-overflow-scrolling: touch;
}

.stanza[hidden] {
  display: none;
}

/* il fondo: notte fonda con una nebulosa viola dietro la cartomante */
.stanza__velo {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 68% 9%, rgba(255, 240, 210, 0.75), transparent),
    radial-gradient(1.5px 1.5px at 86% 34%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 41% 62%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 93% 81%, rgba(255, 230, 190, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 7% 88%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 57% 44%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 29% 37%, rgba(200, 230, 255, 0.6), transparent),
    radial-gradient(60% 70% at 24% 42%, rgba(98, 52, 210, 0.42) 0%, transparent 64%),
    radial-gradient(48% 50% at 82% 78%, rgba(255, 92, 200, 0.13) 0%, transparent 60%),
    radial-gradient(40% 40% at 70% 12%, rgba(79, 218, 255, 0.1) 0%, transparent 60%),
    linear-gradient(180deg, #080a28 0%, #04051a 100%);
  background-size: 340px 340px, 420px 420px, 380px 380px, 300px 300px, 460px 460px, 360px 360px, 260px 260px, 320px 320px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}

.stanza__scintille {
  position: fixed;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.stanza.is-aperta .stanza__velo {
  opacity: 1;
}

/* testa, tavolo e parole entrano dopo il velo; il video invece vola subito */
.stanza__testa,
.stanza__tavolo,
.stanza__parole {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.5s var(--ease) 0.12s, translate 0.6s var(--ease) 0.12s;
}

.stanza.is-aperta .stanza__testa,
.stanza.is-aperta .stanza__tavolo,
.stanza.is-aperta .stanza__parole {
  opacity: 1;
  translate: 0 0;
}

/* ---------- Testa: titolo, passi, chiama, musica, chiudi ---------- */
.stanza__testa {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0.85rem clamp(1rem, 3vw, 2.25rem);
  background: #06071e;
}

/* sotto la testata il testo che scorre sfuma, invece di tagliarsi netto */
.stanza__testa::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 1.4rem;
  background: linear-gradient(180deg, #06071e 0%, rgba(6, 7, 30, 0) 100%);
  pointer-events: none;
}

.stanza__titolo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-gold-light);
  white-space: nowrap;
}

.stanza__stella {
  width: 1rem;
  height: 1rem;
  fill: var(--color-gold-light);
  filter: drop-shadow(0 0 6px rgba(255, 200, 95, 0.9));
}

.stanza__passi {
  display: flex;
  gap: 1.1rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.stanza__passi li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  opacity: 0.6;
  transition: opacity var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.stanza__passi li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.stanza__passi li.is-fatto {
  opacity: 0.85;
  color: var(--color-gold);
}

.stanza__passi li.is-fatto::before {
  background: var(--color-gold);
}

.stanza__passi li.is-ora {
  opacity: 1;
  color: var(--color-gold-light);
}

.stanza__passi li.is-ora::before {
  background: var(--color-gold-light);
  box-shadow: 0 0 10px rgba(255, 210, 120, 0.9);
}

.stanza__comandi {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
}

.stanza__chiama {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.6rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: var(--gradient-gold);
  color: var(--color-text-on-gold);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-gold);
  white-space: nowrap;
  transition: box-shadow var(--dur-base) var(--ease), translate var(--dur-base) var(--ease);
}

.stanza__chiama:hover {
  translate: 0 -1px;
  box-shadow: var(--shadow-gold-hover);
}

.stanza__tondo {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(240, 195, 90, 0.5);
  border-radius: 50%;
  background: rgba(8, 10, 38, 0.7);
  color: var(--color-gold-light);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.stanza__tondo:hover,
.stanza__tondo:focus-visible {
  border-color: var(--color-gold-light);
  box-shadow: 0 0 1.2rem rgba(139, 77, 255, 0.55);
  outline: none;
}

.stanza__tondo .icona {
  width: 1.2rem;
  height: 1.2rem;
}

/* musica spenta: la nota barrata. La barra sta nel simbolo dello sprite,
   dove i selettori non arrivano: la accende la variabile, che invece passa */
.stanza__tondo[aria-pressed="false"] {
  --barra: 1;
  color: var(--color-text-muted);
}

/* ---------- Corpo: cartomante a sinistra, tavolo a destra ---------- */
.stanza__corpo {
  display: grid;
  grid-template-columns: minmax(16rem, 0.78fr) minmax(0, 1.5fr);
  align-items: start;
  align-content: center;
  min-height: calc(100svh - 4.6rem);
  gap: clamp(1.5rem, 4vw, 4rem);
  width: 100%;
  max-width: 1340px;
  margin-inline: auto;
  padding: 0.5rem clamp(1rem, 3vw, 2.5rem) 3rem;
}

.stanza__cartomante {
  position: sticky;
  top: 4.6rem;
  width: 100%;
  max-width: calc((100svh - 7rem) * 0.75);
  aspect-ratio: 3 / 4;
  margin: 0;
  justify-self: center;
}

.stanza__cartomante .cartomante__schermo,
.stanza__stesa {
  position: absolute;
  inset: 0;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 84%, transparent 100%);
  mask-composite: intersect;
}

.stanza__stesa {
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
  pointer-events: none;
}

.stanza__stesa.is-visibile {
  opacity: 1;
}

/* le parole della cartomante, sotto di lei */
.stanza__parole {
  position: absolute;
  inset: auto 4% 1% 4%;
  z-index: 2;
  min-height: 3.4em;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(240, 195, 90, 0.32);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(10, 12, 46, 0.78) 0%, rgba(5, 6, 28, 0.9) 100%);
  box-shadow: var(--ombra-lastra);
  font-size: 1.06rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text);
  text-align: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.stanza__parole::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 50%;
  width: 1rem;
  height: 1rem;
  translate: -50% 0;
  background: var(--color-gold-light);
  clip-path: path("M8 0c.4 3.9 3.1 6.6 8 8-4.9 1.4-7.6 4.1-8 8-.4-3.9-3.1-6.6-8-8 4.9-1.4 7.6-4.1 8-8Z");
  filter: drop-shadow(0 0 6px rgba(255, 210, 120, 0.9));
}

.stanza__tavolo {
  position: relative;
  min-width: 0;
  padding-top: clamp(0.5rem, 3vh, 2rem);
}

.tappa[hidden] {
  display: none;
}

.tappa__titolo {
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-text);
  text-align: center;
}

.tappa__aiuto {
  margin-top: var(--space-3);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-align: center;
}

.tappa__tema {
  margin-bottom: var(--space-4);
  font-size: 0.95rem;
  text-align: center;
  color: var(--color-text-muted);
}

.tappa__tema strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-gold-light);
}

.tappa__tema .link-underline {
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-text-soft);
  cursor: pointer;
}

/* ---------- Fase 1: i temi ---------- */
.temi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  max-width: 44rem;
  margin-inline: auto;
}

.tema {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: clamp(1.1rem, 2.6vw, 1.8rem) 1rem;
  border: 1px solid rgba(240, 195, 90, 0.38);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(139, 77, 255, 0.2) 0%, transparent 70%),
    var(--lastra);
  box-shadow: var(--ombra-lastra), inset 0 1px 0 rgba(255, 236, 175, 0.18);
  color: var(--color-text);
  text-align: center;
  cursor: pointer;
  transition:
    translate var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.tema:hover,
.tema:focus-visible {
  translate: 0 -4px;
  border-color: var(--color-gold-light);
  box-shadow:
    var(--ombra-lastra),
    0 0 2.2rem rgba(139, 77, 255, 0.5),
    inset 0 0 1.4rem rgba(79, 218, 255, 0.16);
  outline: none;
}

.tema[aria-pressed="true"] {
  border-color: var(--color-gold-light);
  box-shadow: var(--ombra-lastra), 0 0 2.6rem rgba(255, 196, 90, 0.45);
}

.tema__icona {
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: 0.2rem;
  color: var(--color-gold-light);
  filter: drop-shadow(0 0 8px rgba(255, 200, 95, 0.6));
}

.tema__nome {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 600;
}

.tema__nota {
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

/* ---------- Fase 2: il mazzo e l'anello che si riempie ---------- */
.mescola {
  position: relative;
  display: grid;
  place-items: center;
  width: min(19rem, 78vw);
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 77, 255, 0.22) 0%, rgba(8, 10, 38, 0) 68%);
  color: inherit;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.mescola:active {
  cursor: grabbing;
}

.mescola:focus-visible {
  outline: 2px solid var(--azzurro);
  outline-offset: 6px;
}

.mescola__anello {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  rotate: -90deg;
  overflow: visible;
}

.mescola__anello circle {
  fill: none;
  stroke-width: 1.6;
}

.mescola__fondo {
  stroke: rgba(240, 195, 90, 0.22);
  stroke-dasharray: 0.006 0.0194;
}

.mescola__pieno {
  stroke: var(--color-gold-light);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px rgba(255, 205, 105, 0.95));
}

.mazzo {
  position: relative;
  width: 34%;
  aspect-ratio: 480 / 916;
  transition: scale 0.3s var(--ease);
}

.mazzo__carta {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0.6rem 1.2rem -0.4rem rgba(1, 2, 12, 0.9), 0 0 0 1px rgba(240, 195, 90, 0.45);
}

.mazzo__carta img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* lo spessore del mazzo */
.mazzo__carta:nth-child(1) { translate: 3px 4px; }
.mazzo__carta:nth-child(2) { translate: 2.5px 3.5px; }
.mazzo__carta:nth-child(3) { translate: 2px 3px; }
.mazzo__carta:nth-child(4) { translate: 1.5px 2.5px; }
.mazzo__carta:nth-child(5) { translate: 1px 2px; }
.mazzo__carta:nth-child(6) { translate: 0.5px 1.5px; }
.mazzo__carta:nth-child(7) { translate: 0 1px; }
.mazzo__carta:nth-child(8) { translate: -0.5px 0.5px; }

.mescola:active .mazzo,
.mazzo.is-mescolando {
  scale: 1.04;
}

.mazzo.is-mescolando .mazzo__carta {
  box-shadow: 0 0.6rem 1.2rem -0.4rem rgba(1, 2, 12, 0.9), 0 0 0 1px rgba(255, 215, 120, 0.8), 0 0 1.6rem rgba(255, 196, 90, 0.35);
}

.mescola__testo {
  position: absolute;
  bottom: -2.6rem;
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: 90vw;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-gold-light);
  text-shadow: 0 0 12px rgba(255, 196, 90, 0.5);
}

.tappa--mescola .tappa__aiuto {
  margin-top: 3.4rem;
}

/* ---------- Fase 3: tre caselle e il ventaglio dei 22 Arcani ---------- */
.caselle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.6rem, 2vw, 1.6rem);
  width: min(100%, 30rem);
  margin: 0 auto var(--space-4);
  padding: 0;
  list-style: none;
  transition: width 0.7s var(--ease);
}

.casella {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  text-align: center;
}

.casella__breve {
  display: none;
}

.casella__etichetta {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.casella__carta {
  position: relative;
  width: 100%;
  aspect-ratio: 480 / 916;
  padding: 0;
  border: 1px dashed rgba(240, 195, 90, 0.5);
  border-radius: var(--radius-md);
  background: rgba(8, 10, 38, 0.45);
  color: inherit;
  perspective: 1200px;
  -webkit-tap-highlight-color: transparent;
}

.casella__carta:disabled {
  cursor: default;
}

/* vuota: una stella appena accennata dove cadrà la carta */
.casella__carta::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 34%;
  aspect-ratio: 1;
  background: rgba(240, 195, 90, 0.34);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.6 5.8 4.7 9.9 10.5 10.5-5.8.6-9.9 4.7-10.5 10.5C11.4 16.7 7.3 12.6 1.5 12 7.3 11.4 11.4 7.3 12 1.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.6 5.8 4.7 9.9 10.5 10.5-5.8.6-9.9 4.7-10.5 10.5C11.4 16.7 7.3 12.6 1.5 12 7.3 11.4 11.4 7.3 12 1.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.casella.is-piena .casella__carta {
  border-color: transparent;
  background: none;
}

.casella.is-piena .casella__carta::before {
  display: none;
}

.casella__giro {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 1s var(--ease);
  opacity: 0;
}

.casella.is-piena .casella__giro {
  opacity: 1;
}

.casella__dorso,
.casella__fronte {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 1.2rem 2rem -0.8rem rgba(1, 2, 12, 0.9), 0 0 0 1px rgba(240, 195, 90, 0.6);
}

.casella__dorso img,
.casella__fronte img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.casella__fronte {
  transform: rotateY(180deg);
  background: #efe3c4;
}

/* da girare: respira d'oro finché non la tocchi */
.casella.is-pronta:not(.is-girata) .casella__carta {
  cursor: pointer;
}

.casella.is-pronta:not(.is-girata) .casella__dorso {
  animation: da-girare 2.2s ease-in-out infinite;
}

.casella.is-pronta:not(.is-girata) .casella__carta:hover .casella__giro,
.casella.is-pronta:not(.is-girata) .casella__carta:focus-visible .casella__giro {
  transform: translateY(-6px) rotateY(-12deg);
}

.casella__carta:focus-visible {
  outline: 2px solid var(--azzurro);
  outline-offset: 4px;
}

@keyframes da-girare {
  0%, 100% { box-shadow: 0 1.2rem 2rem -0.8rem rgba(1, 2, 12, 0.9), 0 0 0 1px rgba(240, 195, 90, 0.6), 0 0 0 rgba(255, 196, 90, 0); }
  50% { box-shadow: 0 1.2rem 2rem -0.8rem rgba(1, 2, 12, 0.9), 0 0 0 1.5px rgba(255, 220, 130, 0.95), 0 0 2rem rgba(255, 196, 90, 0.55); }
}

.casella.is-girata .casella__giro {
  transform: rotateY(180deg);
  animation: si-gira 1s var(--ease);
}

@keyframes si-gira {
  0% { translate: 0 0; scale: 1; }
  45% { translate: 0 -10%; scale: 1.12; }
  100% { translate: 0 0; scale: 1; }
}

.casella.is-girata .casella__fronte {
  box-shadow: 0 1.4rem 2.4rem -0.8rem rgba(1, 2, 12, 0.9), 0 0 0 1.5px rgba(255, 215, 120, 0.9), 0 0 2.6rem rgba(255, 196, 90, 0.4);
}

.casella__nome {
  min-height: 1.3em;
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.3vw, 1.02rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
  font-variant-numeric: lining-nums;
}

/* il ventaglio: ogni carta ruota attorno al centro di un cerchio sotto il
   tavolo (--raggio), di --a gradi; --alza la stacca verso chi guarda */
.ruota-carte {
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.ruota-carte:active {
  cursor: grabbing;
}

.ruota-carte__carta {
  --a: 0;
  --alza: 0;
  position: absolute;
  top: 20px;
  left: calc(50% - var(--carta-w) / 2);
  width: var(--carta-w);
  aspect-ratio: 480 / 916;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  cursor: pointer;
  transform-origin: 50% calc(var(--carta-w) * 916 / 480 / 2 + var(--raggio));
  transform: rotate(calc(var(--a) * 1deg)) translateY(calc(var(--alza) * -1px));
  transition: transform 0.7s var(--ease), filter 0.3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.ruota-carte.is-veloce .ruota-carte__carta {
  transition: transform 0.08s linear, filter 0.3s var(--ease);
}

.ruota-carte__carta img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  box-shadow: 0 0.9rem 1.4rem -0.6rem rgba(1, 2, 12, 0.95), 0 0 0 1px rgba(240, 195, 90, 0.5);
  pointer-events: none;
}

.ruota-carte__carta:hover,
.ruota-carte__carta:focus-visible {
  --alza: 22;
  outline: none;
  filter: drop-shadow(0 0 14px rgba(255, 200, 100, 0.65)) brightness(1.12);
}

.ruota-carte__carta:focus-visible img {
  box-shadow: 0 0.9rem 1.4rem -0.6rem rgba(1, 2, 12, 0.95), 0 0 0 2px var(--azzurro);
}

.tappa__aiuto--ruota {
  display: none;
}

/* ---------- Fase 4: le carte girate e la lettura ---------- */
.stanza[data-fase="rivela"] .ruota-carte,
.stanza[data-fase="rivela"] .tappa__aiuto--ruota {
  display: none;
}

.stanza[data-fase="rivela"] .caselle {
  width: min(100%, 40rem);
}

.tappa--rivela {
  max-width: 44rem;
  margin-inline: auto;
}

.tappa__aiuto--rivela {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-gold-light);
}

.responso {
  display: grid;
  gap: var(--space-4);
}

.responso__carta {
  padding: 1.1rem 1.3rem;
  border: var(--filo-oro);
  border-radius: var(--radius-lg);
  background: var(--lastra);
  box-shadow: var(--ombra-lastra);
  animation: responso-entra 0.6s var(--ease);
}

@keyframes responso-entra {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}

.responso__titolo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.7rem;
  margin-bottom: 0.2rem;
}

.responso__pos {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.responso__nome {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-text);
}

.responso__chiave {
  margin-bottom: 0.45rem;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.responso__testo {
  min-height: 3.2em;
  line-height: 1.6;
  color: var(--color-text-soft);
}

.sintesi {
  position: relative;
  margin-top: var(--space-5);
  padding: 1.5rem 1.4rem 1.4rem;
  border: 1px solid rgba(240, 195, 90, 0.6);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 95% at 15% 0%, rgba(255, 196, 90, 0.18) 0%, rgba(139, 77, 255, 0.14) 48%, transparent 80%),
    var(--lastra-forte);
  box-shadow: var(--ombra-lastra), 0 0 2.6rem -0.6rem rgba(240, 195, 90, 0.3);
  text-align: center;
  scroll-margin-top: 5rem;
}

.sintesi[hidden],
.approfondisci[hidden] {
  display: none;
}

.sintesi__titolo {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-gold-light);
}

.sintesi__testo {
  margin-bottom: var(--space-4);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--color-text);
}

.sintesi__domanda {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.4;
  color: var(--color-gold-light);
}

.approfondisci {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  text-align: center;
}

.approfondisci__testo {
  max-width: 36rem;
  line-height: 1.6;
}

.approfondisci__tariffe {
  max-width: 34rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.approfondisci__tariffe a {
  color: var(--color-text-soft);
}

.approfondisci__azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.approfondisci__azioni .btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.stanza__nota {
  margin-top: var(--space-6);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  text-align: center;
  opacity: 0.85;
}

/* ---------- Telefono ---------- */
@media (max-width: 900px) {
  .stanza__testa {
    gap: var(--space-2);
    padding: 0.6rem 0.8rem;
  }

  .stanza__titolo {
    font-size: 0.86rem;
  }

  .stanza__titolo-lungo {
    display: none;
  }

  /* mentre si sceglie si vedono le mani che aprono le carte, non il viso;
     mentre si legge, gli occhi */
  .stanza[data-fase="scegli"] .stanza__cartomante :is(video, img) {
    object-position: 50% 84%;
  }

  .stanza[data-fase="rivela"] .stanza__cartomante :is(video, img) {
    object-position: 50% 22%;
  }

  .stanza__passi {
    display: none;
  }

  .stanza__chiama {
    min-height: 2.4rem;
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
  }

  .stanza__chiama .icona {
    display: none;
  }

  .stanza__tondo {
    width: 2.4rem;
    height: 2.4rem;
  }

  .stanza__corpo {
    grid-template-columns: 1fr;
    align-content: start;
    min-height: 0;
    gap: 0.6rem;
    padding: 0 0.9rem 2.5rem;
  }

  .stanza__cartomante {
    position: relative;
    top: 0;
    width: 100%;
    max-width: none;
    height: 30svh;
    aspect-ratio: auto;
    margin-bottom: 3.4rem;
    transition: height 0.7s var(--ease);
  }

  /* mentre si sceglie serve spazio per caselle e ventaglio */
  .stanza[data-fase="scegli"] .stanza__cartomante {
    height: 15svh;
  }

  .stanza__cartomante .cartomante__schermo,
  .stanza__stesa {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 80%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 80%, transparent 100%);
  }

  .stanza__cartomante :is(video, img) {
    object-position: 50% 34%;
  }

  .stanza__parole {
    inset: auto 0 -3.4rem 0;
    padding: 0.7rem 0.9rem;
    font-size: 0.98rem;
  }

  .stanza[data-fase="rivela"] .stanza__cartomante {
    height: 17svh;
  }

  .stanza__tavolo {
    padding-top: 0.6rem;
  }

  .tappa__titolo {
    margin-bottom: var(--space-4);
    font-size: 1.35rem;
  }

  .temi {
    gap: 0.6rem;
  }

  .tema {
    padding: 0.9rem 0.6rem;
  }

  .tema__icona {
    width: 1.8rem;
    height: 1.8rem;
  }

  .tema__nota {
    font-size: 0.8rem;
  }

  .mescola {
    width: min(15rem, 66vw);
  }

  .caselle {
    width: min(100%, 12.5rem);
    margin-bottom: var(--space-2);
  }

  .casella__etichetta {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
  }

  /* sul telefono le etichette corte stanno su una riga */
  .casella__lungo {
    display: none;
  }

  .casella__breve {
    display: inline;
  }

  .tappa__aiuto--ruota {
    display: block;
    margin: 0 0 0.2rem;
    font-size: 0.82rem;
  }

  .stanza[data-fase="rivela"] .caselle {
    width: 100%;
  }

  .responso__carta {
    padding: 0.95rem 1rem;
  }

  .sintesi {
    padding: 1.2rem 1rem;
  }
}

/* sui telefoni stretti la testa tiene solo i comandi: la X deve restare dentro */
@media (max-width: 520px) {
  .stanza__titolo {
    display: none;
  }
}

@media (max-width: 380px) {
  .stanza__chiama span {
    font-size: 0.74rem;
  }
}

/* ---------- Movimento ridotto: niente voli, niente respiro ---------- */
@media (prefers-reduced-motion: reduce) {
  .stanza__velo,
  .stanza__testa,
  .stanza__tavolo,
  .stanza__parole,
  .stanza__stesa,
  .ruota-carte__carta,
  .casella__giro,
  .caselle,
  .stanza__cartomante,
  .tema,
  .mazzo {
    transition: none;
  }

  .casella.is-pronta:not(.is-girata) .casella__dorso,
  .casella.is-girata .casella__giro,
  .responso__carta {
    animation: none;
  }

  /* la carta si gira con una dissolvenza, senza ruotare */
  .casella__giro {
    transform: none !important;
  }

  .casella__fronte {
    transform: none;
    opacity: 0;
  }

  .casella.is-girata .casella__fronte {
    opacity: 1;
  }
}