/* Schermate di fine simulazione (TakeSimulation.razor): timbro "UFFICIALE
   TERMINATA" che si stampa sul foglio, e ingresso scaglionato del resto. */
.st-paper { position: relative; overflow: hidden; height: 24rem; border-radius: 1.6rem; background: #fff; box-shadow: 0 .2rem .8rem rgba(10,37,77,.08), 0 0 0 1px #EDF0F5; padding: 2.2rem 2rem; animation: st-up .5s ease-out both, st-shake .35s 1s both; }
.st-paper-title { font-size: 1.1rem; font-weight: 900; letter-spacing: .1em; color: #A0A7B5; margin-bottom: 1.6rem; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-line { height: .9rem; border-radius: 1rem; background: #EEF1F6; margin-bottom: 1.1rem; }
.st-splat { position: absolute; left: 50%; top: 50%; width: 30rem; height: 18rem; margin: -9rem 0 0 -15rem; border-radius: 50%; background: radial-gradient(#C8323A, transparent 70%); opacity: 0; animation: st-splat .6s .95s ease-out both; }
.st-stamp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #C8323A; -webkit-mask-image: url(../img/inchiostro.svg); mask-image: url(../img/inchiostro.svg); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; transform: rotate(-12deg); animation: st-slam .55s .5s cubic-bezier(.3,1.4,.5,1) both; }
.st-stamp-in { border: .55rem solid currentColor; border-radius: 1.4rem; outline: .25rem solid currentColor; outline-offset: -1.4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; white-space: nowrap; padding: 2.4rem 3rem; max-width: calc(100% - 2rem); }
.st-stamp-a { font-size: 1.25rem; font-weight: 900; letter-spacing: .3em; }
.st-stamp-b { font-size: 3rem; font-weight: 900; letter-spacing: .03em; line-height: 1; margin: .5rem 0; }
.st-stamp-c { font-size: 1.05rem; font-weight: 900; letter-spacing: .14em; }
.st-fade { animation: st-fade .5s both; }

@keyframes st-up { from { opacity: 0; transform: translateY(3rem) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes st-slam { 0% { opacity: 0; transform: rotate(-24deg) scale(2.6); } 55% { opacity: 1; transform: rotate(-11deg) scale(.94); } 75% { transform: rotate(-12.5deg) scale(1.03); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }
@keyframes st-shake { 0%,100% { transform: none; } 20% { transform: translate(-.4rem,.3rem); } 40% { transform: translate(.4rem,-.2rem); } 60% { transform: translate(-.2rem,.2rem); } 80% { transform: translate(.2rem,0); } }
@keyframes st-splat { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: .35; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes st-fade { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .st-paper, .st-stamp, .st-splat, .st-fade { animation: none; }
}

/* Busta dell'Ufficiale (OfficialSimulation.razor): chiusa col sigillo in
   ceralacca, si apre quando si parte; consegnata porta il timbro rosso. */
.env { position: relative; aspect-ratio: 1.55; border-radius: .8rem;
    background: linear-gradient(160deg, #F7F1E3 0%, #EFE6D2 100%);
    box-shadow: 0 1.8rem 3.6rem -1rem rgba(10,37,77,.28), 0 .2rem .4rem rgba(10,37,77,.08), inset 0 0 0 1px rgba(120,95,50,.12); }
.env:before { content: ''; position: absolute; inset: 0; border-radius: .8rem; background:
    linear-gradient(to top right, transparent 49.6%, rgba(120,95,50,.10) 50%, transparent 50.4%) left bottom / 50% 62% no-repeat,
    linear-gradient(to top left, transparent 49.6%, rgba(120,95,50,.10) 50%, transparent 50.4%) right bottom / 50% 62% no-repeat; }
.env-pocket { position: absolute; inset: 0; overflow: hidden; border-radius: .8rem; z-index: 1; }
.env-inside { position: absolute; left: 0; right: 0; top: 0; height: 58%; background: linear-gradient(180deg, #CDBE9C, #E2D6BB); -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.env-sheet { position: absolute; left: 8%; right: 8%; top: 0; bottom: 0; background: #fff; border-radius: .6rem .6rem 0 0;
    box-shadow: 0 -.3rem 1rem rgba(0,0,0,.12); padding: 1.6rem 1.8rem; transform: translateY(100%); }
.env-sheet p { font-size: .9rem; font-weight: 900; letter-spacing: .14em; color: #A0A7B5; margin-bottom: 1rem; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.env-sheet i { display: block; height: .6rem; border-radius: 1rem; background: #EEF1F6; margin-bottom: .8rem; }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 58%; z-index: 2; transform-origin: top; border-radius: .8rem .8rem 0 0;
    background: linear-gradient(180deg, #F3EBD9, #E9DEC5); -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%);
    filter: drop-shadow(0 .3rem .4rem rgba(90,70,30,.18)); }
.env-frame { position: absolute; inset: .9rem; z-index: 2; border: 1px solid rgba(184,137,10,.45); border-radius: .4rem; pointer-events: none; }
.env-label { position: absolute; left: 1.8rem; right: 1.8rem; bottom: 1.6rem; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.env-label p { font-size: .9rem; font-weight: 900; letter-spacing: .2em; color: #9C7A2E; }
.env-label b { display: block; font-family: "Source Serif 4", Georgia, serif; font-weight: 500; font-size: 1.9rem; color: #0A254D; margin-top: .3rem; line-height: 1.1; }
.env-label span { text-align: right; font-size: .95rem; font-weight: 800; color: #8A7550; line-height: 1.5; letter-spacing: .04em; flex: none; }
.env-label img { height: 2rem; opacity: .85; display: block; margin: 0 0 .6rem auto; }
.env-seal { position: absolute; left: 50%; top: 57%; width: 9rem; height: 9rem; margin: -4.5rem 0 0 -4.5rem; z-index: 3; }
.env-seal img { position: absolute; inset: 0; width: 100%; height: 100%; }
.env:not(.opening) .env-seal { filter: drop-shadow(0 .5rem .7rem rgba(0,0,0,.35)); }
.env-seal .h1 { -webkit-clip-path: polygon(0 0, 52% 0, 46% 40%, 55% 62%, 47% 100%, 0 100%); clip-path: polygon(0 0, 52% 0, 46% 40%, 55% 62%, 47% 100%, 0 100%); }
.env-seal .h2 { -webkit-clip-path: polygon(52% 0, 100% 0, 100% 100%, 47% 100%, 55% 62%, 46% 40%); clip-path: polygon(52% 0, 100% 0, 100% 100%, 47% 100%, 55% 62%, 46% 40%); }
.env-stamp { position: absolute; left: 0; right: 0; top: 4%; height: 36%; z-index: 4; display: flex; align-items: center; justify-content: center; transform: rotate(-6deg); color: #B8262E; -webkit-mask-image: url(../img/inchiostro.svg); mask-image: url(../img/inchiostro.svg); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; opacity: .92; pointer-events: none; }
.env-stamp div { border: .45rem solid currentColor; border-radius: 1.2rem; outline: .2rem solid currentColor; outline-offset: -1.1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; white-space: nowrap; padding: 1.7rem 2.6rem; max-width: calc(100% - 3rem); }
.env-stamp .a { font-size: .8rem; font-weight: 900; letter-spacing: .32em; }
.env-stamp .b { font-size: 2rem; font-weight: 900; letter-spacing: .03em; line-height: 1; margin: .2rem 0; }
.env-stamp .c { font-size: .8rem; font-weight: 900; letter-spacing: .16em; }
@media (min-width: 1024px) { .env-seal { width: 11rem; height: 11rem; margin: -5.5rem 0 0 -5.5rem; } .env-label b { font-size: 2.4rem; } }

/* Apertura, in sequenza: il sigillo viene premuto, si crepa e le due meta'
   cadono; il lembo si ribalta verso l'alto (resta aperto sopra la busta);
   il foglio esce dalla busta. Poi la pagina si avvicina e sfuma. Solo
   transform e opacity: il browser le fa sulla scheda grafica. */
.env-seal, .env-seal img, .env-flap, .env-sheet { will-change: transform, opacity; }
.env.opening .env-seal { animation: env-press .3s cubic-bezier(.4,0,.2,1) both; }
.env.opening .h1 { animation: env-split-l .2s .3s ease-out both, env-fall-l .75s .5s cubic-bezier(.55,0,.75,.2) both; }
.env.opening .h2 { animation: env-split-r .2s .3s ease-out both, env-fall-r .75s .5s cubic-bezier(.55,0,.75,.2) both; }
.env.opening .env-flap { animation: env-flap .8s 1s cubic-bezier(.45,0,.2,1) both; }
.env.opening .env-sheet { animation: env-sheet .8s 1.65s cubic-bezier(.22,.61,.36,1) both; }
@keyframes env-press { 0% { transform: scale(1); } 50% { transform: scale(.93); } 100% { transform: scale(1); } }
@keyframes env-split-l { to { transform: translate(-.35rem, 0) rotate(-4deg); } }
@keyframes env-split-r { to { transform: translate(.35rem, 0) rotate(4deg); } }
@keyframes env-fall-l { from { transform: translate(-.35rem, 0) rotate(-4deg); opacity: 1; } to { transform: translate(-1.8rem, 7rem) rotate(-35deg); opacity: 0; } }
@keyframes env-fall-r { from { transform: translate(.35rem, 0) rotate(4deg); opacity: 1; } to { transform: translate(1.8rem, 7rem) rotate(35deg); opacity: 0; } }
@keyframes env-flap { 0% { transform: perspective(70rem) rotateX(0); filter: brightness(1); } 55% { filter: brightness(.82); } 100% { transform: perspective(70rem) rotateX(-180deg); filter: brightness(1.05); } }
@keyframes env-sheet { from { transform: translateY(100%); } to { transform: translateY(6%); } }
@media (prefers-reduced-motion: reduce) { .env.opening * { animation-duration: .01s !important; animation-delay: 0s !important; } }

/* Dopo l'apertura la pagina sfuma e si avvicina, poi parte la simulazione. */
.env-page { transition: opacity .45s ease, transform .45s ease; }
.env-page { transform-origin: 50% 35%; }
.env-page.leaving { opacity: 0; transform: scale(1.08); }
.sim-enter { animation: sim-enter .45s ease-out both; }
@keyframes sim-enter { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* Browser senza aspect-ratio (Safari < 15): stessa proporzione con il padding. */
@supports not (aspect-ratio: 1) { .env { height: 0; padding-top: 64.5%; } }

/* Schede delle Simulazioni archiviate (ArchivedSimulations.razor). */
.arc-top:after { content: ''; position: absolute; right: -2.4rem; top: -2.4rem; width: 9rem; height: 9rem; border-radius: 50%; background: rgba(255,255,255,.14); }
.arc-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.arc-blu { background: linear-gradient(135deg, #6AA6F2, #2F6FD8); }
.arc-oro { background: linear-gradient(135deg, #F6CF4A, #C68A00); }
.arc-verde { background: linear-gradient(135deg, #3CC774, #1E7F43); }
.arc-azz { background: linear-gradient(135deg, #5CA8FF, #2462E7); }
.arc-viola { background: linear-gradient(135deg, #8C7CF0, #4B3BB8); }
.arc-locked { background: linear-gradient(135deg, #D5D8DE, #A9AEB8); }

/* Titoletti di sezione oro con filo (Classifica). */
.section-label { display: flex; align-items: center; gap: .8rem; font-size: 1rem; font-weight: 900; letter-spacing: .14em; color: #B8890A; margin-bottom: .4rem; }
.section-label:after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #F2B70D, transparent); }

/* Comparsa morbida di una scritta (usata dall'ECG del ripasso). */
@keyframes rw-in { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }

/* Tracciato ECG del ripasso (EcgProgress.razor): pathLength=1, quindi la
   parte disegnata è 1 - dashoffset. */
.ecg-line { stroke-dasharray: 1; transition: stroke-dashoffset .9s ease-out; }
.ecg-run { stroke-dasharray: .12 1; stroke-dashoffset: .12; animation: ecg-run 1.1s .4s linear 3 both; }
.ecg-done { animation: rw-in .4s .4s ease-out both; }
@keyframes ecg-run { from { stroke-dashoffset: .12; opacity: 1; } 95% { opacity: 1; } to { stroke-dashoffset: -1; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ecg-line { transition: none; } .ecg-run { display: none; } }
/* Bacheca: testo dell'annuncio fermo a 3 righe finché non si tocca "Altro…". */
.ann-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }