/* Effetti del tavolo nella palette dell'invito: cielo, blu notte, carta bianca, giallo; tratto a fumetto, ombra piena senza sfumature. */
.fx-tavolo{--fx-notte:#18213e;--fx-cielo:#b2e0dd;--fx-giallo:#ffd23f;--fx-rosso:#a52a17;--fx-carta:#fff;--fx-pip:radial-gradient(circle,#18213e 0 2.3px,transparent 2.8px);position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden;font-family:'DM Sans','Nunito',system-ui,sans-serif;color:var(--fx-notte)}
.fx-tavolo *{box-sizing:border-box}
.fx-volto{display:block;width:44px;height:44px;flex:none;overflow:hidden;border:2.5px solid var(--fx-notte);border-radius:50%;background:var(--fx-cielo)}
/* Ritratto a figura intera: stessa inquadratura sulla testa delle miniature della Lavagnetta (zoom 1.4 attorno al 37%). */
.fx-volto>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform-origin:50% 37%;transform:translateY(13%) scale(1.4)}
.fx-volto--lettera{display:grid;place-items:center;font:400 22px/1 Anton,Impact,sans-serif}

/* 1. Tiro: il vassoio accusa il colpo e, se c'e' una combinazione, un adesivo giallo per un secondo. */
.dice-stage.fx-atterra{animation:fx-atterra .3s ease-out}
.fx-combo{position:absolute;max-width:calc(100vw - 32px);padding:4px 12px 3px;border:2.5px solid var(--fx-notte);border-radius:10px;background:var(--fx-giallo);box-shadow:3px 4px 0 var(--fx-notte);font:700 20px/1.05 'Barlow Condensed',Impact,sans-serif;letter-spacing:.02em;text-transform:uppercase;text-align:center;white-space:nowrap;transform:translateX(-50%) rotate(-3deg);animation:fx-combo 1.1s cubic-bezier(.2,1.4,.4,1) both}
.fx-combo--forte{padding:5px 15px 4px;background:var(--fx-carta);color:var(--fx-rosso);font-size:26px;animation-duration:1.5s}

/* 4 e 7. Scena a tutto schermo: DajeZii, vittoria, pari merito, sconfitta. Si chiude toccando. */
.fx-scena{position:absolute;inset:0;display:grid;place-items:center;padding:24px 16px;background:#b2e0ddf0;pointer-events:auto;cursor:pointer;animation:fx-entra .18s ease-out both}
.fx-scena--dajezii{background:#ffd23ff2}
.fx-scena--sconfitta{background:#d6e6eff2}
.fx-scena__raggi{position:absolute;inset:-60%;background:repeating-conic-gradient(from 0deg,#ffffffb3 0 5deg,transparent 5deg 15deg);animation:fx-gira 9s linear infinite}
.fx-scena--sconfitta .fx-scena__raggi{display:none}
.fx-scena__fumetto{position:relative;z-index:1;width:min(560px,100%);padding:20px 22px 14px;border:4px solid var(--fx-notte);border-radius:30px;background:var(--fx-carta);box-shadow:8px 10px 0 var(--fx-notte);text-align:center;transform:rotate(-2deg);animation:fx-pop .55s cubic-bezier(.2,1.6,.4,1) both}
.fx-scena--sconfitta .fx-scena__fumetto{transform:rotate(1.5deg)}
.fx-scena__volti{display:flex;justify-content:center;margin:-62px 0 6px}
.fx-scena__volti:empty{display:none}
.fx-scena__volti .fx-volto{width:76px;height:76px;margin:0 -7px;border-width:3.5px;box-shadow:3px 4px 0 var(--fx-notte)}
.fx-scena__titolo{display:block;font:400 clamp(58px,18vw,128px)/.92 Anton,Impact,sans-serif;letter-spacing:.01em;text-transform:uppercase;text-shadow:4px 4px 0 var(--fx-giallo);overflow-wrap:anywhere}
.fx-scena--dajezii .fx-scena__titolo{text-shadow:4px 4px 0 var(--fx-cielo),8px 8px 0 var(--fx-giallo)}
.fx-scena--sconfitta .fx-scena__titolo,.fx-scena--pari .fx-scena__titolo{font-size:clamp(40px,11vw,84px);text-shadow:3px 3px 0 var(--fx-cielo)}
.fx-scena__sotto{margin:10px 0 0;font:800 17px/1.3 'Nunito',system-ui,sans-serif}
.fx-scena__tocca{display:block;margin-top:10px;color:#45576a;font:700 11px/1 'DM Sans',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}

/* Coriandoli: carta piatta e dadi a fumetto che cadono. */
.fx-coriandoli{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fx-carta,.fx-dado{position:absolute;top:-40px;left:var(--x);opacity:0;border:2px solid var(--fx-notte);animation:fx-cade var(--d) var(--t) cubic-bezier(.3,.55,.6,1) forwards}
.fx-carta{width:11px;height:17px;border-radius:2px}
.fx-dado{width:26px;height:26px;border-width:2.5px;border-radius:7px;background:var(--fx-carta)}
.fx-dado--1{background:var(--fx-pip) 50% 50%/8px 8px no-repeat,var(--fx-carta)}
.fx-dado--2{background:var(--fx-pip) 12% 12%/8px 8px no-repeat,var(--fx-pip) 88% 88%/8px 8px no-repeat,var(--fx-carta)}
.fx-dado--3{background:var(--fx-pip) 12% 12%/8px 8px no-repeat,var(--fx-pip) 50% 50%/8px 8px no-repeat,var(--fx-pip) 88% 88%/8px 8px no-repeat,var(--fx-carta)}
.fx-dado--4{background:var(--fx-pip) 12% 12%/8px 8px no-repeat,var(--fx-pip) 88% 12%/8px 8px no-repeat,var(--fx-pip) 12% 88%/8px 8px no-repeat,var(--fx-pip) 88% 88%/8px 8px no-repeat,var(--fx-carta)}
.fx-dado--5{background:var(--fx-pip) 12% 12%/8px 8px no-repeat,var(--fx-pip) 88% 12%/8px 8px no-repeat,var(--fx-pip) 50% 50%/8px 8px no-repeat,var(--fx-pip) 12% 88%/8px 8px no-repeat,var(--fx-pip) 88% 88%/8px 8px no-repeat,var(--fx-carta)}
.fx-dado--6{background:var(--fx-pip) 12% 12%/8px 8px no-repeat,var(--fx-pip) 88% 12%/8px 8px no-repeat,var(--fx-pip) 12% 50%/8px 8px no-repeat,var(--fx-pip) 88% 50%/8px 8px no-repeat,var(--fx-pip) 12% 88%/8px 8px no-repeat,var(--fx-pip) 88% 88%/8px 8px no-repeat,var(--fx-carta)}
.fx-coriandoli--mini{inset:55% -24px -110px;z-index:-1;overflow:visible}
.fx-coriandoli--mini .fx-carta,.fx-coriandoli--mini .fx-dado{top:0;animation-name:fx-cade-mini;transform:scale(.7)}

/* 8. Il colpo di un altro: adesivo in alto con nome e volto, piu' corto della scena propria. Non intercetta i tocchi. */
.fx-annuncio{position:absolute;top:max(78px,calc(env(safe-area-inset-top) + 74px));left:50%;display:flex;align-items:center;gap:10px;width:max-content;max-width:min(380px,calc(100vw - 32px));padding:6px 16px 6px 6px;border:3px solid var(--fx-notte);border-radius:999px;background:var(--fx-carta);box-shadow:3px 4px 0 var(--fx-notte);transform:translateX(-50%);animation:fx-annuncio 2.4s ease both}
.fx-annuncio--dajezii{background:var(--fx-giallo);animation-duration:3s}
.fx-annuncio--zero{background:#d6e6ef}
.fx-annuncio--punti{gap:8px;padding:4px 12px 4px 4px;border-width:2px;box-shadow:2px 3px 0 var(--fx-notte);animation-duration:1.8s}
.fx-annuncio--punti .fx-volto{width:30px;height:30px;border-width:2px}
.fx-annuncio__testo{min-width:0;line-height:1.15}
.fx-annuncio__testo strong{display:block;font:700 19px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.03em;text-transform:uppercase}
.fx-annuncio__testo span{display:block;font:800 14px/1.2 'Nunito',system-ui,sans-serif}
.fx-annuncio--punti .fx-annuncio__testo strong,.fx-annuncio--punti .fx-annuncio__testo span{display:inline;font-size:14px}
.fx-annuncio--punti .fx-annuncio__testo strong{margin-right:6px}

/* 5. Bonus alto: colpo cinema, due bande nere da film e il titolo nella banda alta. */
.fx-cinema i{position:absolute;top:0;left:0;right:0;height:max(64px,10vh);background:var(--fx-notte);animation:fx-banda-su 1.9s ease both}
.fx-cinema i:last-child{top:auto;bottom:0;animation-name:fx-banda-giu}
.fx-cinema strong{position:absolute;top:calc(max(64px,10vh) / 2);left:50%;z-index:1;color:var(--fx-giallo);font:400 clamp(26px,7vw,40px)/1 Anton,Impact,sans-serif;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transform:translate(-50%,-50%);animation:fx-entra-esci 1.9s ease both}

/* 2 e 3. Lo stampo della scheda nella stessa palette; i colpi alti con l'adesivo giallo e lo scoppio a fumetto. */
.score-fx-toast{border:3px solid #18213e;background:#fff;color:#18213e;box-shadow:3px 4px 0 #18213e;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.score-fx-toast--jackpot{background:#ffd23f;color:#18213e;font-size:24px;rotate:-2deg}
.score-fx-toast--zero{border-color:#18213e;background:#d6e6ef;color:#18213e;box-shadow:3px 4px 0 #18213e}
.score-fx-fly{border-color:#18213e;background:#ffd23f;color:#18213e}
.score-fx-particle{color:#18213e;text-shadow:1px 1px 0 #ffd23f}
.score-fx-ring{position:absolute;width:30px;height:30px;border:4px solid #18213e;border-radius:50%;transform:translate(-50%,-50%);animation:fx-anello .6s ease-out forwards}

@keyframes fx-atterra{0%,100%{transform:none}35%{transform:translateY(3px) scaleY(.99)}70%{transform:translateY(-1px)}}
@keyframes fx-combo{0%{opacity:0;transform:translateX(-50%) rotate(-3deg) scale(.4)}18%{opacity:1;transform:translateX(-50%) rotate(-3deg) scale(1.12)}30%,82%{opacity:1;transform:translateX(-50%) rotate(-3deg) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-8px) rotate(-3deg) scale(.96)}}
@keyframes fx-entra{from{opacity:0}to{opacity:1}}
@keyframes fx-gira{to{transform:rotate(360deg)}}
@keyframes fx-pop{0%{opacity:0;transform:rotate(-8deg) scale(.35)}60%{opacity:1;transform:rotate(-1deg) scale(1.06)}100%{transform:rotate(-2deg) scale(1)}}
@keyframes fx-cade{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:1;transform:translate(var(--dx),calc(100dvh + 80px)) rotate(var(--r))}}
@keyframes fx-cade-mini{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.7)}80%{opacity:1}100%{opacity:0;transform:translate(var(--dx),110px) rotate(var(--r)) scale(.7)}}
@keyframes fx-annuncio{0%{opacity:0;transform:translate(-50%,-24px) scale(.9)}10%,86%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-12px) scale(.98)}}
@keyframes fx-banda-su{0%,100%{transform:translateY(-100%)}14%,84%{transform:none}}
@keyframes fx-banda-giu{0%,100%{transform:translateY(100%)}14%,84%{transform:none}}
@keyframes fx-entra-esci{0%,8%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}20%,82%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes fx-anello{0%{opacity:1;width:20px;height:20px}100%{opacity:0;width:150px;height:150px;border-width:1px}}

body.fx-cinema-attivo .score-fx-toast{top:calc(max(64px,10vh) + 14px)}
@media(max-width:699px){.fx-annuncio{max-width:calc(100vw - 56px);padding-right:14px}.fx-annuncio__testo strong{font-size:17px}.fx-annuncio__testo span{font-size:13px}}
@media(min-width:700px){.fx-annuncio{top:84px}.fx-combo{font-size:24px}.fx-combo--forte{font-size:30px}}
@media(prefers-reduced-motion:reduce){
  .fx-tavolo *,.dice-stage.fx-atterra{animation:none!important}
  .fx-coriandoli,.fx-scena__raggi,.score-fx-ring{display:none}
}