/* Le regole del Film (.fv-next, .fv-trama-img, tavolo dei dadi) vivono in film-vista.css, scoperte sotto .film-vista. */
/* Grammatica DajeZii 13/10: mare piatto, Malta sul fondo, banda e gioco in primo piano con sagoma bianca da adesivo e ombra dura in basso a destra. Un solo look, chiaro. */
:root{
  --navy:#18213E; --mare:#B2E0DD; --pietra:#E9D7B4; --carta:#FBF5E9; --giallo:#FFD23F;
  --grigio:#9AA7AE; --grigio-scuro:#6E7C85; --rosso:#C8423B; --ombra:#76AAA9;
  --display:Anton,"Arial Black",system-ui,sans-serif;
  --etichetta:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  color-scheme:light;
}
html,body{height:100%;overflow:hidden}
body{background:var(--mare)}
.schermo{position:relative;overflow:hidden;height:100dvh;max-width:100%;container-type:inline-size;background:var(--mare)}
/* ---------- gioco ---------- */
.gioco{position:relative;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr)}
.testata{display:flex;align-items:center;gap:10px;padding:14px 16px 6px;position:relative;z-index:3}
.titolo{font:400 34px/1 var(--display);color:var(--navy);letter-spacing:.01em;-webkit-text-stroke:0;text-shadow:-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff,5px 5px 0 var(--ombra);margin:0}
.bandiera{margin-left:auto;display:flex;gap:4px}
.bandiera b{width:14px;height:20px;border:2px solid var(--navy);border-radius:2px;background:#fff}
.bandiera b+b{background:var(--rosso)}

.corpo{position:relative;min-height:0;display:grid;grid-template-rows:minmax(0,1fr)}
@container (min-width:700px){.corpo{grid-template-columns:minmax(0,1fr) 400px}}

/* mappa a scorrimento verticale */
.mappa{position:relative;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;min-height:0}
.mappa::-webkit-scrollbar{display:none}
/* Nel gioco: sentiero a nodi sul mare (stile Candy Crush), posizioni calcolate da tappa-film.js. La foto di Malta resta per l'intro. */
.mondo{position:relative;width:100%;min-height:100%;background:var(--mare)}
.strada{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.isola{position:absolute;border-radius:48% 52% 45% 55%/55% 45% 55% 45%;background:var(--pietra);border:3px solid var(--navy);box-shadow:5px 6px 0 var(--ombra);pointer-events:none}
.tappa{position:absolute;z-index:2;transform:translate(-50%,-50%);width:15cqw;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:var(--grigio);border:3px solid var(--grigio-scuro);color:#fff;font:400 clamp(13px,4.6cqw,22px)/1 var(--display);
  box-shadow:0 0 0 3px #ffffffb0,3px 4px 0 3px #0002;filter:saturate(.2);opacity:.82;pointer-events:none;
  animation:spunta .45s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i)*45ms)}
@container (min-width:700px){.tappa{width:5cqw;font-size:clamp(13px,2.2cqw,20px)}}
.tappa.ultima{border-radius:22%;rotate:-8deg}
.tappa.attiva{pointer-events:auto;cursor:pointer;opacity:1;filter:none;width:15cqw;background:var(--carta) var(--miniatura) center/cover;border:4px solid var(--navy);
  box-shadow:0 0 0 4px #fff,6px 7px 0 4px var(--navy);animation:spunta .5s cubic-bezier(.3,1.6,.5,1) both}
/* Solo la tappa attuale si muove: le altre sbloccate restano colorate e ferme, le bloccate grigie e ferme. */
.tappa.corrente{z-index:3;width:22cqw;animation:spunta .5s cubic-bezier(.3,1.6,.5,1) both,salta 1.6s ease-in-out .7s infinite}
@container (min-width:700px){.tappa.attiva{width:5cqw}.tappa.corrente{width:7cqw}}
.tappa.attiva span{position:absolute;right:-10%;top:-12%;width:46%;aspect-ratio:1;border-radius:50%;background:var(--giallo);border:3px solid var(--navy);display:grid;place-items:center;color:var(--navy);font-size:.8em}
.tappa.corrente::before{content:"";pointer-events:none;position:absolute;inset:-18%;border-radius:50%;border:4px solid var(--giallo);animation:onda 1.6s ease-out infinite}
.tappa.attiva:focus-visible{outline:4px solid var(--giallo);outline-offset:6px}
.tappa.votata span{background:var(--navy);color:var(--giallo)}
@keyframes spunta{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}
@keyframes salta{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-62%)}}
@keyframes onda{from{transform:scale(.85);opacity:1}to{transform:scale(1.35);opacity:0}}
@keyframes vola{0%,100%{translate:0 0;rotate:-6deg}50%{translate:6px -8px;rotate:2deg}}

.capo{display:flex;align-items:center;gap:12px;padding:14px 16px 8px}
.numero{width:46px;height:46px;flex:none;border-radius:50%;background:var(--giallo);border:3px solid var(--navy);box-shadow:3px 3px 0 var(--navy);display:grid;place-items:center;font:400 26px/1 var(--display)}
.icona-verso{height:46px;width:66px;flex:none;border-radius:10px;border:3px solid var(--navy);background:var(--miniatura) center/cover;box-shadow:3px 3px 0 var(--navy)}
.chiudi{margin-left:auto;width:42px;height:42px;border-radius:50%;border:3px solid var(--navy);background:var(--carta);box-shadow:3px 3px 0 var(--navy);cursor:pointer;display:grid;place-items:center}
.chiudi svg{width:18px;height:18px;stroke:var(--navy);stroke-width:4;stroke-linecap:round}
.chiudi:focus-visible,.faccia:focus-visible,.punto:focus-visible{outline:3px solid var(--rosso);outline-offset:3px}

.giostra{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 16px 10px;scrollbar-width:none;min-height:0}
.giostra::-webkit-scrollbar{display:none}
.carta{flex:0 0 82%;scroll-snap-align:center;display:flex;flex-direction:column;gap:10px;min-height:0}
.media{position:relative;flex:1;min-height:0;border-radius:16px;border:4px solid var(--navy);background:var(--carta);box-shadow:0 0 0 4px #fff,7px 8px 0 4px var(--navy);overflow:hidden}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block}
.media .forma{position:absolute;left:10px;top:10px;width:34px;height:34px;border-radius:50%;background:var(--carta);border:3px solid var(--navy);display:grid;place-items:center}
.media .forma svg{width:18px;height:18px;fill:var(--navy)}
.timbro{position:absolute;right:10px;bottom:10px;width:64px;height:64px;border-radius:14px;background:var(--giallo);border:4px solid var(--navy);box-shadow:4px 4px 0 var(--navy);
  display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:8px;rotate:-12deg;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.8,.5,1)}
.carta.votata .timbro{transform:scale(1)}
.timbro i{width:9px;height:9px;border-radius:50%;background:var(--navy);place-self:center;visibility:hidden}

.dadi{display:flex;justify-content:space-between;gap:6px}
.faccia{flex:1;aspect-ratio:1;max-width:46px;border-radius:9px;background:var(--carta);border:3px solid var(--navy);box-shadow:3px 3px 0 var(--navy);cursor:pointer;padding:5px;
  display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);transition:transform .15s}
.faccia i{width:72%;aspect-ratio:1;border-radius:50%;background:var(--navy);place-self:center;visibility:hidden}
.faccia:hover{transform:translateY(-3px) rotate(-4deg)}
.faccia.scelta{background:var(--giallo);animation:rotola .6s cubic-bezier(.3,1.4,.5,1)}
.carta.votata .faccia:not(.scelta){opacity:.35}
@keyframes rotola{0%{transform:rotate(0) scale(1)}40%{transform:rotate(200deg) scale(1.35) translateY(-14px)}100%{transform:rotate(360deg) scale(1)}}

.punti{display:flex;justify-content:center;gap:10px;padding:8px 0 16px}
.punto{width:12px;height:12px;border-radius:50%;border:2px solid var(--navy);background:transparent;padding:0;cursor:pointer}
.punto.on{background:var(--navy)}
.punto.ok{background:var(--giallo)}

.coriandoli{position:absolute;inset:0;pointer-events:none;z-index:9;overflow:hidden}
.coriandoli b{position:absolute;top:-20px;width:10px;height:14px;border:2px solid var(--navy);animation:cade 1.6s ease-in forwards}
@keyframes cade{to{transform:translateY(820px) rotate(540deg)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.faccia:disabled{cursor:default}.faccia:disabled:hover{transform:none}
body{margin:0;font-family:var(--etichetta);color:var(--navy)}
button,input{font:inherit}
.controllo{display:grid;grid-template-columns:minmax(0,1fr) 48px;grid-template-rows:auto auto auto;gap:3px 12px;align-items:center;padding:4px 3px 8px}
.scala{grid-column:1;grid-row:1;width:100%;margin:0;accent-color:var(--navy);cursor:pointer;min-height:30px}
.tacche span{padding:6px 4px;margin:-6px -4px}
.tacche{grid-column:1;grid-row:2;display:flex;justify-content:space-between;padding:0 3px;cursor:pointer;font:700 16px/1 var(--etichetta)}
.anteprima{grid-column:1;grid-row:3;display:flex;gap:3px;justify-content:center;min-height:31px;align-items:center}
.dado{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);place-items:center;flex:none;width:25px;height:25px;padding:2px;box-sizing:border-box;border:2px solid var(--navy);border-radius:5px;background:var(--carta);box-shadow:2px 2px 0 var(--navy)}
.dado i{width:5px;height:5px;border-radius:50%;background:var(--navy);visibility:hidden}.dado i.visibile{visibility:visible}
.dado.barrato::after{content:'';width:25px;height:3px;background:var(--rosso);rotate:-42deg;grid-area:2/1/3/4}
.conferma{grid-column:2;grid-row:1/4;width:44px;height:44px;border:3px solid var(--navy);border-radius:9px;background:var(--giallo);box-shadow:3px 3px 0 var(--navy);display:grid;place-items:center;cursor:pointer}
.conferma .dado{box-shadow:none;transform:rotate(-12deg)}
.conferma:disabled{opacity:.45;cursor:default}
.conferma:focus-visible,.scala:focus-visible{outline:3px solid var(--rosso);outline-offset:3px}
.timbro{display:flex;align-items:center;justify-content:center;gap:1px;width:auto;min-width:64px;height:42px;padding:4px;grid-template:none}
.timbro .dado{width:16px;height:16px;padding:1px;border-width:1px;box-shadow:none;border-radius:3px}
.timbro .dado i{width:3px;height:3px}
.timbro .dado.barrato::after{width:15px;height:2px}
.carta.votata .controllo{opacity:.45;pointer-events:none}
.palco{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:1%;pointer-events:none;visibility:hidden}
.palco.lancio,.palco.atterraggio,.palco.nel-timbro{visibility:visible}
.palco .dado{width:18%;height:auto;aspect-ratio:1;padding:5%;border-width:3px;border-radius:12%;box-shadow:5px 7px 0 var(--navy)}
.palco .dado i{width:70%;height:70%}
.palco .dado:nth-child(2){--scarto:1}.palco .dado:nth-child(3){--scarto:2}.palco .dado:nth-child(4){--scarto:3}.palco .dado:nth-child(5){--scarto:4}
.palco.lancio .dado{animation:dadi-grandi .9s cubic-bezier(.16,.6,.25,1) both;animation-delay:calc(var(--scarto,0)*35ms)}
.palco.atterraggio .dado{animation:colpo-dado .16s ease-out both}
.palco.nel-timbro .dado{animation:verso-timbro .4s ease-in both}
.palco.zero::after{content:'';position:absolute;left:5%;top:50%;width:90%;height:7px;background:#171a20;box-shadow:3px 4px 0 #fff;transform:rotate(-18deg);animation:barra-china .35s ease-out both}
.palco.zero .dado.barrato::after{background:#171a20}
.carta.impatto .media{animation:scossa .22s ease-out}
.carta.impatto .media::after{content:'';position:absolute;inset:0;z-index:4;background:#fff;pointer-events:none;animation:lampo .24s ease-out both}
.carta.impatto.sei .media::after{background:var(--giallo)}
.disco{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;border:4px solid var(--navy);background:var(--giallo);box-shadow:5px 6px 0 var(--navy);cursor:pointer;display:grid;place-items:center}
.disco::before{content:'▶';color:var(--navy);font-size:29px;padding-left:4px}
.disco.suona::before{content:'Ⅱ';padding-left:0}
.disco::after{content:'';position:absolute;inset:10px;border:2px solid var(--navy);border-radius:50%;pointer-events:none}
.disco:focus-visible{outline:3px solid var(--rosso);outline-offset:4px}
.carta.errore .controllo{outline:3px solid var(--rosso)}
@keyframes dadi-grandi{0%{transform:translate(-80%,180%) rotate(-210deg) scale(.5);opacity:0}35%{opacity:1}65%{transform:translate(18%,-32%) rotate(200deg) scale(1.18)}100%{transform:translate(0,0) rotate(720deg) scale(1)}}
@keyframes colpo-dado{0%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes verso-timbro{to{transform:translate(45%,95%) scale(.18);opacity:0}}
@keyframes barra-china{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lampo{from{opacity:.8}to{opacity:0}}
@keyframes scossa{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.tappa.corrente::before{display:none}.tappa.corrente{animation:none}}
.gioco.completo .tappa.ultima{z-index:3;width:22cqw;animation:salta 1.6s ease-in-out infinite}
.porta-serata{position:absolute;z-index:4;transform:translateX(-50%);display:grid;place-items:center;width:58px;height:58px;border:3px solid var(--notte);border-radius:14px;background:var(--giallo);color:var(--notte);font-size:30px;text-decoration:none;box-shadow:3px 4px 0 var(--notte)}
@media (prefers-reduced-motion:reduce){.gioco.completo .tappa.ultima{animation:none}}
@container (min-width:700px){.gioco.completo .tappa.ultima{width:7cqw}}
/* Tappa 0 (Daniele 16/10 17:58): ciak sulla mappa; nella scheda fasce orizzontali una sotto l'altra, scelta al tocco
   (bordo giallo e spunta verde, le altre si spengono), trama chiusa fino alle tre scelte, ciak in fondo. */
.tappa.zero{border-radius:50%}
.tappa.zero.attiva{background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='8' y='26' width='48' height='30' rx='3' fill='%23FBF5E9' stroke='%23FFD23F' stroke-width='3'/%3E%3Cpath d='M8 14l46-8 2 12-46 8z' fill='%23FFD23F' stroke='%23FBF5E9' stroke-width='3'/%3E%3Cpath d='M18 12l6 10M30 10l6 10M42 8l6 10' stroke='%2318213E' stroke-width='4'/%3E%3C/svg%3E") center/58% no-repeat}
.apertura-film .fascia{margin:4px 0 14px}
.capo-fascia{display:flex;align-items:center;gap:8px;padding:0 16px 6px}
.icona-fascia{width:36px;height:36px;flex:none;border-radius:10px;border:3px solid var(--navy);background:var(--carta) center/22px no-repeat;box-shadow:2px 2px 0 var(--navy)}
.icona-fascia.titolo{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16M12 5v15M8 20h8' stroke='%2318213E' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.icona-fascia.canzone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18V5l11-2v13' stroke='%2318213E' stroke-width='2.6' fill='none'/%3E%3Ccircle cx='6' cy='18' r='3' fill='%2318213E'/%3E%3Ccircle cx='17' cy='16' r='3' fill='%2318213E'/%3E%3C/svg%3E")}
.icona-fascia.copertina{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='3' width='16' height='18' rx='2' stroke='%2318213E' stroke-width='2.6' fill='none'/%3E%3Cpath d='M6 17l4-5 3 3 2-2 3 4' stroke='%2318213E' stroke-width='2.2' fill='none'/%3E%3C/svg%3E")}
.capo-fascia .spunta{margin-left:auto;width:24px;height:24px;border-radius:50%;border:3px solid var(--navy);background:var(--carta)}
.fascia.scelta .spunta{background:#3BB273}
.chip-costo{width:30px;height:30px;border-radius:50%;background:var(--rosso);color:#fff;border:3px dashed #fff;outline:2px solid var(--navy);display:grid;place-items:center;font:700 13px/1 var(--etichetta)}
.chip-costo[hidden]{display:none}
.chip-costo.senza{background:var(--grigio-scuro)}
.fila{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;padding:6px 16px 10px;scrollbar-width:none}
.fila::-webkit-scrollbar{display:none}
.fila.errore{animation:scossa .3s ease-out 2}
.prop{position:relative;flex:0 0 62%;scroll-snap-align:start;aspect-ratio:3/4;border:4px solid var(--navy);border-radius:16px;box-shadow:4px 4px 0 var(--navy);background:#fff center/cover no-repeat;padding:0;cursor:pointer;transition:transform .15s,box-shadow .15s,filter .2s}
.fascia[data-forma="titolo"] .prop{aspect-ratio:auto;height:110px;flex-basis:72%;display:grid;place-items:center;padding:10px;font:400 30px/.95 var(--display);color:var(--navy);text-shadow:2px 2px 0 var(--giallo);text-transform:uppercase;overflow-wrap:anywhere}
.fascia[data-forma="canzone"] .prop{aspect-ratio:1}
.prop.on{border-color:var(--giallo);box-shadow:0 0 0 4px var(--navy),6px 6px 0 var(--navy);transform:translateY(-3px)}
.prop.on::after{content:"";position:absolute;top:-12px;right:-12px;width:34px;height:34px;border-radius:50%;border:3px solid var(--navy);background:#3BB273 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' stroke='white' stroke-width='3.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/20px no-repeat}
.fascia.scelta .prop:not(.on){filter:grayscale(.7) opacity(.6)}
.prop:focus-visible{outline:3px solid var(--rosso);outline-offset:3px}
.prop .disco{top:auto;bottom:10px;left:10px;transform:none;width:54px;height:54px}
.prop .disco::before{font-size:22px}
.trama{margin:0 16px;border:4px solid var(--navy);border-radius:16px;box-shadow:4px 4px 0 var(--navy);background:var(--carta);padding:12px;display:flex;flex-direction:column;gap:12px;transition:filter .3s}
.trama.chiusa{filter:grayscale(1) opacity(.45);pointer-events:none}
.trama.chiusa p{visibility:hidden}
.striscia-trama{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.striscia-trama img{width:100%;aspect-ratio:1;object-fit:cover;border:3px solid var(--navy);border-radius:8px;display:block}
.trama p{margin:0;font:700 18px/1.25 var(--etichetta)}
.ciak{align-self:center;height:56px;padding:0 28px;border-radius:28px;border:3px solid var(--navy);background:var(--rosso);color:#fff;box-shadow:4px 4px 0 var(--navy);font:400 22px/1 var(--display);letter-spacing:.04em;cursor:pointer}
.trama.chiusa .ciak{visibility:hidden}
.ciak:focus-visible{outline:3px solid var(--giallo);outline-offset:3px}
.video-intro{position:fixed;inset:0;z-index:50;width:100vw;height:100dvh;object-fit:cover;background:#000}

/* Film: la stessa mappa satellitare e la Sala in un'unica pagina. */
html,body{width:100%;max-width:100%;overflow-x:hidden;background:#06161f}
.schermo{width:min(100%,max(430px,calc((100dvh - 65px)/1.5)));max-width:100%;margin-inline:auto;box-shadow:0 0 70px #0009;background:#06161f}
.gioco{min-width:0;overflow:hidden;isolation:isolate}
.testata{background:#06161f;color:#f1ead9;z-index:4}
.testata .titolo{color:#f1ead9;text-shadow:none}
.corpo{display:block;min-width:0;overflow:hidden}
.mappa{height:100%;overflow:hidden;background:#071720;isolation:isolate}
.mappa-sfondo{position:absolute;inset:-35px;background:url('/partita/img/film/malta/mappa.jpg') center/cover;filter:blur(18px) saturate(.4) brightness(.42)}
.mondo{position:absolute;left:50%;top:50%;width:min(100%,calc((100dvh - 65px)/1.5));min-height:0;height:auto;aspect-ratio:2/3;transform:translate(-50%,-50%);background:url('/partita/img/film/malta/mappa.jpg') center/contain no-repeat;filter:saturate(.62) contrast(1.12) brightness(.92);mask-image:radial-gradient(75% 65% at 50% 50%,#000 72%,transparent 100%)}
.mondo .isola{display:none}
.strada{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke-linecap:round}
.strada .resto{stroke:#fff;stroke-width:5;stroke-dasharray:2 14;opacity:.8}
.strada .fatto{stroke:#f5c518;stroke-width:9}
.mondo .tappa,.mondo .tappa.attiva,.mondo .tappa.corrente,.gioco.completo .tappa.ultima{width:24px;height:24px;aspect-ratio:1;min-width:0;min-height:0;border:2px solid #eee;border-radius:50%;padding:0;background:#18213e;color:#fff;box-shadow:0 0 0 2px #0008;opacity:.65;filter:none;font:700 10px/1 ui-monospace,monospace;animation:none}
.mondo .tappa[hidden]{display:none}
.mondo .tappa span{position:static;width:auto;aspect-ratio:auto;border:0;background:none;color:inherit;font:inherit}
.mondo .tappa.votata{background:#f5c518;color:#18213e;opacity:1;border-color:#18213e}
.mondo .tappa.attiva{pointer-events:auto;opacity:1}
.mondo .tappa.corrente{width:30px;height:30px;z-index:3;background:#c8102e;color:#fff;box-shadow:0 0 0 5px #c8102e66}
.mondo .tappa.corrente::before{inset:-25px;border:2px solid #7dffb0;border-radius:0;animation:aggancio-film .9s ease-out both}
@keyframes aggancio-film{from{opacity:0;transform:scale(2)}to{opacity:1;transform:scale(1)}}
.satellite-hud{position:absolute;inset:0;pointer-events:none;color:#7dffb0;font:10px/1.5 ui-monospace,SFMono-Regular,monospace;background:repeating-linear-gradient(0deg,#7dffb00b 0 1px,transparent 1px 44px),repeating-linear-gradient(90deg,#7dffb00b 0 1px,transparent 1px 44px),repeating-linear-gradient(0deg,transparent 0 2px,#0002 2px 3px)}
.satellite-hud .mirino{position:absolute;width:25px;height:25px;border:2px solid #7dffb0aa}
.satellite-hud .mirino.a{left:10px;top:12px;border-right:0;border-bottom:0}.satellite-hud .mirino.b{right:10px;top:12px;border-left:0;border-bottom:0}.satellite-hud .mirino.c{left:10px;bottom:20px;border-right:0;border-top:0}.satellite-hud .mirino.d{right:10px;bottom:20px;border-left:0;border-top:0}
.coordinate{position:absolute;right:17px;top:14px;text-align:right}.rec{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#e43a38;animation:rec-film 1s steps(2) infinite}@keyframes rec-film{50%{opacity:0}}
.scala-sat{position:absolute;left:18px;bottom:24px;letter-spacing:2px}
.mappa.picchiata .mondo{animation:picchiata-film .95s ease-in forwards;transform-origin:var(--focus-x,50%) var(--focus-y,50%)}
@keyframes picchiata-film{to{transform:translate(-50%,-50%) scale(5) rotate(-6deg);filter:blur(8px)}}
.mappa.picchiata::after{content:'';position:absolute;inset:0;background:#000;animation:velo-film .95s ease-in forwards}@keyframes velo-film{0%,65%{opacity:0}100%{opacity:1}}
@container (min-width:700px){.corpo{display:block}}
@media(prefers-reduced-motion:reduce){.mappa.picchiata .mondo{animation:none}.mappa.picchiata::after{animation:none}}
.mappa.sorvolo .mondo{animation:sorvolo-film 2.2s cubic-bezier(.6,0,.2,1) both;transform-origin:58.6% 84%}
@keyframes sorvolo-film{from{transform:translate(-50%,-50%) scale(3.4);filter:blur(5px)}to{transform:translate(-50%,-50%) scale(1);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.mappa.sorvolo .mondo{animation:none}}
body::before{content:'';position:fixed;inset:-35px;background:url('/partita/img/film/malta/mappa.jpg') center/cover;filter:blur(25px) saturate(.85) brightness(.7);pointer-events:none}
.schermo{position:relative;z-index:1}
/* SALTA sul bordo del video 9:16, non sulla banda sfocata ai lati (Daniele 19/10, iPad). */
.video-intro{display:block;overflow:hidden;background:#000;container-type:size}.video-intro video{position:relative;width:100%;height:100%;object-fit:contain}.video-intro .eco{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(28px) saturate(.9) brightness(.7)}.salta-intro{z-index:1}.salta-intro{position:absolute;right:max(14px,calc((100cqw - 100cqh*9/16)/2 + 14px));bottom:max(26px,calc((100cqh - 100cqw*16/9)/2 + 26px));min-height:44px;padding:0 18px;border:2px solid #fff;border-radius:22px;background:#0009;color:#fff;font:18px var(--display)}
.film-vista{position:absolute;z-index:20;inset:0;background:#07120f;color:#fff;overflow:hidden;font-family:var(--display);isolation:isolate}
/* Proporzioni del bozzetto a 390 px: tre locandine leggibili sopra il feltro. */
/* Ciak della tappa 0 e cartellino della prossima tappa (Daniele 19/10): piccolo, appeso alla tappa da votare. */
.mondo .ciak-zero{position:absolute;z-index:4;width:clamp(84px,20vmin,124px);transform:translate(-50%,calc(-100% - 20px));pointer-events:none;filter:drop-shadow(0 4px 0 #000);animation:ciak-sale .7s cubic-bezier(.3,1.7,.5,1) both}
.mondo .ciak-zero svg{display:block;width:100%;overflow:visible}
.mondo .ciak-zero .stecca{transform-origin:9px 30px;animation:ciak-clack 1.8s ease-in-out .8s infinite}
.mondo .ciak-zero .alone{transform-origin:50% 60%;animation:ciak-alone 1.8s ease-out .8s infinite}
@keyframes ciak-sale{from{transform:translate(-50%,-40%) scale(0) rotate(-20deg)}to{transform:translate(-50%,calc(-100% - 20px)) scale(1)}}
@keyframes ciak-clack{0%,55%{transform:rotate(-24deg)}68%{transform:rotate(2deg)}74%{transform:rotate(-4deg)}80%,100%{transform:rotate(0)}}
@keyframes ciak-alone{0%,66%{opacity:0;transform:scale(.6)}70%{opacity:1}100%{opacity:0;transform:scale(1.5)}}
.mondo .inizia{position:absolute;z-index:5;transform:translate(-50%,22px);display:flex;align-items:center;gap:5px;min-height:28px;padding:4px 11px 4px 9px;border:2.5px solid #000;border-radius:8px;background:#f5c518;color:#18213e;font:15px/1 Anton,Impact,sans-serif;letter-spacing:.06em;box-shadow:0 3px 0 #000;cursor:pointer;white-space:nowrap;animation:inizia-respiro 1.8s ease-in-out infinite}
.mondo .inizia::before{content:'';position:absolute;left:50%;top:-8px;margin-left:-6px;border:6px solid transparent;border-top:0;border-bottom:8px solid #000}
.mondo .inizia span{position:relative;display:flex;align-items:center;gap:5px;overflow:hidden}
.mondo .inizia span::after{content:'';position:absolute;top:-4px;bottom:-4px;width:40%;left:-60%;background:linear-gradient(100deg,transparent,#fff9,transparent);transform:skewX(-20deg);animation:inizia-luce 2.4s ease-in-out 1s infinite}
.mondo .inizia i{display:block;border-left:9px solid #c8102e;border-top:6px solid transparent;border-bottom:6px solid transparent}
.mondo .inizia:active{transform:translate(-50%,25px);box-shadow:0 0 0 #000}
.mappa.picchiata .inizia{opacity:0;transition:opacity .2s}
@keyframes inizia-respiro{50%{scale:1.05}}
@keyframes inizia-luce{0%{left:-60%}55%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){.mondo .ciak-zero,.mondo .ciak-zero .stecca,.mondo .ciak-zero .alone,.mondo .inizia,.mondo .inizia span::after{animation:none}.mondo .ciak-zero .alone{opacity:0}}
/* Audio e casa in alto a destra su mappa, intro e tappe (Daniele 19/10): sopra tutto, dentro la colonna del Film. */
.tasti-alto{position:absolute;z-index:60;top:12px;right:14px;display:flex;gap:8px}
.tasti-alto .suono{color:#f5f5f0;text-decoration:none}
.testata{padding-right:122px}
.gioco .film-vista .alto{padding-right:122px}
.gioco:has(.video-intro) .tasti-alto{right:max(14px,calc((100% - 100dvh*9/16)/2 + 14px))}