/* Biglietto per Federica — pensato per il telefono */
:root {
  --rosa: #ff8fab;
  --rosa-scuro: #e05780;
  --rosso: #ff4d79;
  --carta: #fffaf5;
  --inchiostro: #3b1d2a;
  --oro: #f6c667;
  --scritto: "Snell Roundhand", "Segoe Script", "Brush Script MT", "Apple Chancery", cursive;
  --serio: Georgia, "Times New Roman", serif;
  --normale: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2c0f33; }
body { font-family: var(--normale); color: #fff; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
p, h1, h2, dl, dd { margin: 0; }

#palco { position: fixed; inset: 0; overflow: hidden; }

.scena {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; transform: scale(1.04);
  transition: opacity .6s, transform .6s, visibility 0s .6s;
}
.scena.attiva { opacity: 1; visibility: visible; transform: none; transition: opacity .6s, transform .6s; z-index: 2; }

#s-busta1 { background: radial-gradient(120% 90% at 50% 20%, #ffd6e0, #ff8fab 55%, #e05780); }
#s-ticket { background: linear-gradient(170deg, #ff9eb5, #e05780 55%, #8e2c6b); }
#s-attesa { background: radial-gradient(100% 80% at 50% 40%, #6a1e55, #2c0f33); }
#s-busta2, #s-enigma { background: radial-gradient(120% 90% at 50% 20%, #33416e, #1b2145 60%, #120f2b); }
#s-capito { background: #0b0612; }
#s-virus { background: #008080; padding: 0; }
#s-parigi { background: linear-gradient(180deg, #120f2b 0%, #3a1f5c 45%, #b8477f 80%, #ffb4a2 100%); justify-content: flex-start; gap: 0; }

/* testi di scena */
.sopra { font-family: var(--scritto); font-size: clamp(2.4rem, 11vw, 3.4rem); line-height: 1.1; text-align: center; text-shadow: 0 2px 12px rgba(120, 20, 60, .35); }
.sopra.piccolo { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
.sopra.chiaro { color: var(--oro); text-shadow: none; }
.invito { font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; opacity: .85; text-align: center; animation: respira 1.8s ease-in-out infinite; }
.invito.ritardo { opacity: 0; animation: none; }
.attiva .invito.ritardo { animation: compari .6s 2.2s forwards, respira 1.8s 2.8s ease-in-out infinite; }
.grande { font-family: var(--serio); font-size: clamp(2.2rem, 10vw, 3.2rem); text-align: center; line-height: 1.15; }
.medio { font-family: var(--scritto); font-size: clamp(1.6rem, 7.5vw, 2.2rem); color: #ffc2d1; text-align: center; opacity: 0; }
.attiva .medio { animation: compari .8s 1s forwards; }
.puntini i { font-style: normal; animation: respira 1.2s infinite; }
.puntini i:nth-child(2) { animation-delay: .2s; }
.puntini i:nth-child(3) { animation-delay: .4s; }

@keyframes respira { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes compari { to { opacity: .9; } }
@keyframes dondola { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-8px); } }
@keyframes batte { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(1); } 45% { transform: scale(1.14); } }
.batte { transform-box: fill-box; transform-origin: center; animation: batte 1.4s infinite; }

/* ───── busta ───── */
.busta {
  --b-scuro: #c9184a; --b-lato: #ff5c8a; --b-basso: #ff7096; --b-aletta: #ff4d79; --b-sigillo: #a4133c;
  position: relative; width: min(82vw, 340px); aspect-ratio: 3 / 2;
  border: 0; padding: 0; background: none; perspective: 900px;
  filter: drop-shadow(0 18px 22px rgba(80, 10, 40, .35));
  animation: dondola 3.2s ease-in-out infinite;
}
.busta > span { position: absolute; display: block; }
.b-dietro { inset: 0; background: var(--b-scuro); border-radius: 10px; }
.b-lettera {
  left: 6%; right: 6%; top: 8%; bottom: 6%; background: var(--carta); border-radius: 6px; z-index: 1;
  display: grid !important; place-items: center;
  transition: transform 1s .5s cubic-bezier(.2, .8, .2, 1);
}
.cuore-l { width: 34%; fill: var(--rosso); opacity: .9; }
.punto-d { font-family: var(--serio); font-size: 4rem; color: #1b2145; }
.b-davanti { inset: 0; background: var(--b-lato); clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); border-radius: 10px; z-index: 2; }
.b-davanti::after { content: ""; position: absolute; inset: 0; background: var(--b-basso); clip-path: polygon(0 100%, 50% 44%, 100% 100%); }
.b-aletta {
  inset: 0; background: var(--b-aletta); clip-path: polygon(0 0, 100% 0, 50% 58%); border-radius: 10px;
  transform-origin: top; z-index: 3; transition: transform .7s ease-in, z-index 0s .35s;
}
.b-sigillo {
  left: 50%; top: 56%; width: 21%; aspect-ratio: 1; margin: -10.5% 0 0 -10.5%; z-index: 4;
  border-radius: 50%; background: var(--b-sigillo); display: grid !important; place-items: center;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .18), 0 3px 6px rgba(0, 0, 0, .3);
  transition: transform .4s, opacity .4s; animation: batte 1.4s infinite;
}
.b-sigillo svg { width: 52%; fill: #ffd6e0; }
.busta.aperta { animation: none; }
.busta.aperta ~ .invito { animation: none; opacity: 0; transition: opacity .3s; }
.busta.aperta .b-sigillo { transform: scale(0); opacity: 0; animation: none; }
.busta.aperta .b-aletta { transform: rotateX(180deg); z-index: 0; }
.busta.aperta .b-lettera { transform: translateY(-64%); }

.posta-aerea { --b-scuro: #0d1330; --b-lato: #f4efe6; --b-basso: #fffaf5; --b-aletta: #e9e1d2; --b-sigillo: #c9184a; }
.posta-aerea .b-dietro { background: repeating-linear-gradient(135deg, #c9184a 0 14px, #fffaf5 14px 28px, #2a4494 28px 42px, #fffaf5 42px 56px); }
.posta-aerea .b-davanti, .posta-aerea .b-aletta { inset: 7px; border-radius: 5px; }

/* ───── ticket ───── */
.ticket-ombra { filter: drop-shadow(0 18px 24px rgba(60, 5, 40, .45)); }
.attiva .ticket-ombra { animation: entra .9s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes entra { from { transform: translateY(60px) rotate(-6deg) scale(.8); opacity: 0; } to { transform: rotate(-1.5deg); opacity: 1; } }
.ticket {
  --strappo: 86px;
  width: min(88vw, 360px); background: var(--carta); color: var(--inchiostro); border-radius: 18px; overflow: hidden;
  -webkit-mask: radial-gradient(circle 12px at 0 calc(100% - var(--strappo)), #0000 97%, #000) , radial-gradient(circle 12px at 100% calc(100% - var(--strappo)), #0000 97%, #000);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 12px at 0 calc(100% - var(--strappo)), #0000 97%, #000) intersect, radial-gradient(circle 12px at 100% calc(100% - var(--strappo)), #0000 97%, #000);
}
.t-cielo { position: relative; height: clamp(120px, 24vh, 170px); background: linear-gradient(180deg, #2b1055 0%, #b8477f 62%, #ffb4a2 100%); }
.t-cielo > svg { width: 100%; height: 100%; display: block; }
.t-etichetta { position: absolute; left: 14px; top: 12px; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .5); border-radius: 99px; padding: 4px 10px; }
.t-corpo { padding: 16px 20px 18px; text-align: center; }
.t-occhiello { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rosa-scuro); }
.ticket h1 { font-family: var(--serio); font-size: clamp(1.55rem, 7vw, 1.9rem); line-height: 1.15; margin: 4px 0 6px; }
.t-luogo { font-size: .9rem; color: #7a5566; }
.t-dati { display: grid; grid-template-columns: auto auto 1fr; gap: 12px 26px; margin-top: 16px; text-align: left; }
.t-dati .largo { grid-column: 1 / -1; }
.t-dati dt { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: #a77f8f; }
.t-dati dd { font-family: var(--serio); font-size: 1.15rem; font-weight: bold; }
.t-matrice { height: var(--strappo); border-top: 2px dashed #e7c4cf; margin: 0 14px; padding: 12px 6px 0; text-align: center; }
.t-barre { height: 36px; background: repeating-linear-gradient(90deg, var(--inchiostro) 0 2px, #0000 2px 5px, var(--inchiostro) 5px 9px, #0000 9px 11px, var(--inchiostro) 11px 12px, #0000 12px 16px); }
.t-matrice p { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #a77f8f; margin-top: 7px; }

/* ───── indovinello ───── */
.foglio { width: min(90vw, 380px); max-height: 100%; overflow-y: auto; background: var(--carta); color: var(--inchiostro); border-radius: 14px; padding: 22px 20px 18px; text-align: center; box-shadow: 0 18px 30px rgba(0, 0, 0, .45); }
.attiva .foglio { animation: entra .8s cubic-bezier(.2, .9, .3, 1.2) both; }
.f-titolo { font-family: var(--scritto); font-size: 2.1rem; color: var(--rosa-scuro); }
.f-testo { font-family: var(--serio); font-style: italic; font-size: clamp(.92rem, 4.1vw, 1.05rem); line-height: 1.55; margin: 8px 0 12px; }
.f-domanda { font-weight: 700; margin-bottom: 12px; }
#risposta { display: flex; gap: 8px; }
#campo { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 12px 14px; border: 2px solid #e7c4cf; border-radius: 12px; background: #fff; color: var(--inchiostro); user-select: text; -webkit-user-select: text; }
#campo:focus { outline: none; border-color: var(--rosso); }
#risposta button { border: 0; border-radius: 12px; padding: 0 16px; background: var(--rosso); color: #fff; font-weight: 700; }
.f-esito { min-height: 2.6em; font-size: .9rem; color: var(--rosa-scuro); margin-top: 10px; }
.f-resa { border: 0; background: none; color: #a77f8f; text-decoration: underline; font-size: .85rem; padding: 6px; }
.trema { animation: trema .4s; }
@keyframes trema { 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }

/* ───── glitch ───── */
#palco.glitch { animation: scossa .16s steps(2) infinite; }
#palco.glitch .scena.attiva { animation: guasto .28s steps(3) infinite; }
#palco.glitch .grande { text-shadow: -4px 0 #ff004c, 4px 0 #00e5ff; }
#palco.glitch::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .08) 0 2px, #0000 2px 5px); mix-blend-mode: overlay; }
@keyframes scossa { 0% { transform: none; } 25% { transform: translate(-7px, 3px) skewX(3deg); } 50% { transform: translate(6px, -4px); } 75% { transform: translate(-3px, -2px) skewX(-4deg); } }
@keyframes guasto {
  0% { filter: none; clip-path: inset(0); }
  33% { filter: hue-rotate(110deg) saturate(4); clip-path: inset(18% 0 42% 0); }
  66% { filter: invert(1); clip-path: inset(52% 0 12% 0); }
  100% { filter: hue-rotate(-70deg) contrast(2); clip-path: inset(0); }
}

/* ───── finti popup ───── */
#finestre { position: absolute; inset: 0; overflow: hidden; }
.finestra {
  position: absolute; width: min(78vw, 290px); background: #c0c0c0; color: #000;
  border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 3px 3px 0 rgba(0, 0, 0, .45);
  font: 13px/1.35 Tahoma, Verdana, sans-serif; animation: spunta .18s steps(3) both;
}
@keyframes spunta { from { transform: scale(.3) rotate(var(--r, 0deg)); opacity: 0; } to { transform: rotate(var(--r, 0deg)); opacity: 1; } }
.f-barra { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: 700; padding: 3px 3px 3px 7px; }
.f-barra span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.f-x, .f-ok { background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; font: inherit; font-weight: 700; }
.f-x { width: 22px; height: 20px; line-height: 1; padding: 0; flex: none; }
.f-corpo { padding: 12px 10px; display: flex; gap: 10px; align-items: flex-start; }
.f-corpo i { font-style: normal; font-size: 26px; line-height: 1; }
.f-corpo b { color: #c00000; }
.f-piede { text-align: center; padding: 0 0 10px; }
.f-ok { padding: 4px 22px; }
.finestra.premio { width: min(88vw, 330px); left: 50% !important; top: 50% !important; margin: -110px 0 0 calc(min(88vw, 330px) / -2); z-index: 99; border-width: 3px; }
.finestra.premio .f-barra { background: linear-gradient(90deg, #a4133c, #ff4d79); }
.finestra.premio .f-corpo { font-size: 15px; }
.finestra.premio .f-ok { padding: 8px 20px; font-size: 15px; background: #ffe066; animation: lampeggia .5s steps(2) infinite; }
@keyframes lampeggia { 50% { background: #ff4d79; color: #fff; } }

/* ───── Parigi ───── */
.p-testo { text-align: center; padding-top: clamp(22px, 7vh, 60px); position: relative; z-index: 2; }
.p-occhiello { font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; color: #ffc2d1; opacity: 0; }
#s-parigi h2 { font-family: var(--scritto); font-weight: 400; font-size: clamp(2.8rem, 13.5vw, 4.2rem); line-height: 1.1; margin: 10px 0 8px; color: #fff; text-shadow: 0 0 24px rgba(255, 190, 120, .7); opacity: 0; }
.p-sotto { font-family: var(--serio); font-style: italic; font-size: clamp(1rem, 4.6vw, 1.2rem); color: #ffe5d9; opacity: 0; }
.attiva .p-occhiello { animation: sali .8s .5s forwards; }
.attiva h2 { animation: sali 1s 1.5s forwards; }
.p-date { display: inline-block; font-size: .95rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #2c0f33; background: var(--oro); border-radius: 99px; padding: 6px 16px; margin-bottom: 12px; opacity: 0; }
.p-firma { font-family: var(--scritto); font-size: clamp(1.4rem, 6.5vw, 1.8rem); color: #ffc2d1; margin-top: 8px; opacity: 0; }
.attiva .p-date { animation: sali .9s 2.5s forwards; }
.attiva .p-sotto { animation: sali .9s 3.3s forwards; }
.attiva .p-firma { animation: sali .9s 4.1s forwards; }
@keyframes sali { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
#torre { position: absolute; left: 50%; bottom: -2px; height: min(54vh, calc(100vh - 300px)); height: min(54dvh, calc(100dvh - 300px)); aspect-ratio: 612 / 1594; transform: translateX(-50%) translateY(105%); transition: transform 1.6s .2s cubic-bezier(.2, .8, .2, 1); }
#torre img { display: block; width: 100%; height: 100%; }
.attiva #torre { transform: translateX(-50%); }
#luci { position: absolute; inset: 0; }
#luci i { position: absolute; margin: -2px 0 0 -2px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 6px 1px rgba(255, 220, 140, .9); animation: brilla 1.1s infinite; }
@keyframes brilla { 0%, 100% { opacity: .1; } 50% { opacity: 1; } }
.p-ancora { position: absolute; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 3; border: 0; background: rgba(18, 15, 43, .45); border-radius: 99px; padding: 7px 12px; font-size: .7rem; letter-spacing: .1em; color: #ffe5d9; opacity: 0; }
.attiva .p-ancora { animation: compari .8s 5s forwards; }

/* ───── cuori che salgono e lampo ───── */
#cuori { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; transition: opacity .5s; }
#cuori.via { opacity: 0; }
#cuori svg { position: absolute; bottom: -12vh; animation: vola linear infinite; }
@keyframes vola {
  0% { transform: translate(0, 0) rotate(-12deg) scale(.8); opacity: 0; }
  12% { opacity: var(--o, .5); }
  50% { transform: translate(var(--dx, 20px), -60vh) rotate(12deg) scale(1); }
  100% { transform: translate(0, -125vh) rotate(-10deg) scale(.9); opacity: 0; }
}
#cuori .scoppio { bottom: auto; animation: scoppia 1.3s ease-out forwards; }
@keyframes scoppia { from { transform: translate(0, 0) scale(.4); opacity: 1; } to { transform: translate(var(--sx), var(--sy)) scale(1.2) rotate(var(--sr)); opacity: 0; } }
#lampo { position: absolute; inset: 0; z-index: 20; background: #fff; opacity: 0; pointer-events: none; }
#lampo.ora { animation: lampo .9s ease-out; }
@keyframes lampo { 0% { opacity: 1; } 100% { opacity: 0; } }

@media (max-height: 620px) {
  .scena { gap: 12px; }
  .t-corpo { padding: 10px 18px 12px; }
  .t-dati { margin-top: 10px; gap: 8px 10px; }
  .foglio { padding: 14px 16px 10px; }
  .f-titolo { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .busta, .b-sigillo, .batte, .invito { animation: none; }
  #palco.glitch, #palco.glitch .scena.attiva { animation-duration: .6s; }
}