/* KILLING JACK · Canale 13
   Mondo: una TV pirata che trasmette da un luna park chiuso.
   Notte viola, un riflettore bianco, lampadine viola e verdi.
   Numeri a sette segmenti, titoli al neon, pagine di servizio in Televideo. */

:root{
  color-scheme:dark;
  --night:#0e0719; --velvet:#19092b; --plum:#2c1242; --wood:#1b1220; --wood-2:#120b17;
  --mag:#f528f6; --mag-deep:#7a0f86; --acid:#7dfa3c; --lime:#a9f865; --gold:#f8f338; --cyan:#3fe9ff;
  --ink:#f6f1fb; --dust:#bcacca; --dim:#948aa2; --ghost:#2c1436; --line:#33203f;
  --f-show:"Special Gothic Condensed One","Arial Narrow",sans-serif;
  --f-body:"Sofia Sans","Helvetica Neue",Arial,sans-serif;
  --f-seg:"DSEG7",monospace;
  --f-tvd:"Bedstead","Courier New",monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --keys-h:64px;
  --sec:34px;
  --awn:clamp(66px,10.15vw,150px);
}
@media(min-width:760px){:root{--sec:84px}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* niente riquadri al tocco: il contorno resta solo per chi naviga da tastiera */
:focus:not(:focus-visible){outline:none}
.neon,.sign,.btn,.key,.niche,.ch,.lower,.chan,.board,.ticket,.wheel,.tvd summary,.thumbs button,.x{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
[hidden]{display:none!important}
html{overflow-x:clip;background:var(--night);scroll-padding-top:0;scrollbar-color:var(--mag-deep) var(--night)}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--f-body);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:calc(var(--keys-h) + env(safe-area-inset-bottom,0px))}
::selection{background:var(--mag);color:var(--night)}
img,svg{max-width:100%;display:block}
a{color:var(--acid);text-underline-offset:.2em;text-decoration-thickness:1px}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
h1,h2,h3,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:16px}
@media(min-width:760px){.wrap{padding-inline:32px}}

/* ---------- numeri a sette segmenti: lo spento è disegnato ---------- */
.seg{position:relative;display:inline-block;font-family:var(--f-seg);font-weight:700;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.seg i{font-style:normal;color:var(--ghost)}
.seg b{position:absolute;inset:0;font-weight:700}
.seg-price{color:var(--gold);font-size:1.7rem}
.seg-price b{text-shadow:0 0 12px rgba(248,243,56,.45)}
.seg-price::after{content:"€";font-family:var(--f-show);font-size:.62em;margin-left:.22em;color:var(--gold);vertical-align:.12em}
.seg-off b{display:none}
.seg-off::after{color:var(--ghost)}

/* ---------- titoli: insegne al neon ---------- */
.neon{font-family:var(--f-show);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.01em;text-wrap:balance;font-size:clamp(2.7rem,12.2vw,5.6rem)}
.neon-m{font-size:clamp(2.6rem,10vw,4.6rem)}
.tube{display:block;color:#fff}
.t-mag{color:#ffe9ff;text-shadow:0 0 2px #fff,0 0 10px var(--mag),0 0 26px var(--mag),0 0 58px rgba(245,40,246,.55)}
.t-acid{color:#f2ffe9;text-shadow:0 0 2px #fff,0 0 10px var(--acid),0 0 26px var(--acid),0 0 58px rgba(125,250,60,.5)}
@keyframes strike{0%,100%{opacity:1}6%{opacity:.25}9%{opacity:1}17%{opacity:.4}21%{opacity:1}48%{opacity:.75}53%{opacity:1}}
@keyframes ignite{0%{opacity:.08;text-shadow:none}18%{opacity:.9}24%{opacity:.15}40%{opacity:1}46%{opacity:.35}62%,100%{opacity:1}}
.hero .tube{animation:ignite 1.5s var(--ease) both}
.hero .t-acid{animation-delay:.5s}
.neon:hover .tube,.neon.flick .tube{animation:strike .75s 1}
.neon:hover .t-acid,.neon.flick .t-acid{animation-delay:.12s}

/* insegna dipinta: i titoli di sezione */
.sign{font-family:var(--f-show);font-weight:400;text-transform:uppercase;line-height:.95;letter-spacing:.015em;font-size:clamp(2.3rem,8.4vw,3.8rem);color:var(--ink);text-wrap:balance}
.sec-lede{color:var(--dust);max-width:56ch;margin-top:14px}

/* ---------- pulsanti ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border:0;border-radius:10px;font-family:var(--f-show);font-size:1.5rem;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;transition:transform .18s var(--ease),box-shadow .25s,filter .2s}
.btn:active{transform:translateY(3px)}
/* pulsanti fotografici: le estremità restano intere, il centro si allunga con la scritta */
.btn-mag,.btn-acid{min-height:0;height:var(--h);padding:0;border-radius:0;border-style:solid;background:none;white-space:nowrap;transition:transform .12s var(--ease),filter .2s}
.btn-mag{height:auto;aspect-ratio:2842/659;width:300px;max-width:100%;border:0;color:#1c0320;text-shadow:0 1px 0 rgba(255,255,255,.35);background:url(img/pulsante-magenta.webp) 50%/100% 100% no-repeat;filter:drop-shadow(0 10px 14px rgba(0,0,0,.6))}
.btn-acid{--h:58px;color:#06210a;text-shadow:0 1px 0 rgba(255,255,255,.45);border-width:0 calc(var(--h)*.5);
  border-image:url(img/pulsante-verde.webp) 0 100 fill/0 calc(var(--h)*.5) stretch;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}
.btn-mag:hover,.btn-acid:hover{filter:brightness(1.1) drop-shadow(0 10px 14px rgba(0,0,0,.6))}
/* premuti: la foto del pulsante schiacciato, senza spostarlo */
.btn-mag:active,.btn-acid:active{transform:none}
.btn-mag:active{background-image:url(img/pulsante-magenta-premuto.webp)}
.btn-acid:active{border-image-source:url(img/pulsante-verde-premuto.webp)}
.btn-mag:active,.btn-acid:active,.key:active{text-shadow:none}
.keys-bottom::after{content:"";position:absolute;width:0;height:0;overflow:hidden;background:url(img/pulsante-magenta-premuto.webp),url(img/pulsante-verde-premuto.webp),url(img/tasto-mag-premuto.webp),url(img/tasto-acid-premuto.webp),url(img/tasto-gold-premuto.webp),url(img/tasto-cyan-premuto.webp)}
.btn[disabled]{background:var(--plum);color:var(--dust);box-shadow:none;cursor:not-allowed;filter:none;text-shadow:none;transform:none}
.btn-wide{width:100%}
.txtlink{font-size:1.05rem;color:var(--ink)}
.txtlink:hover{color:var(--acid)}

/* ---------- testata e telecomando ---------- */
.top{position:absolute;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;gap:16px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 0;pointer-events:none}
.top>*{pointer-events:auto}
.mark img{width:62px;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.7));transition:transform .4s var(--ease)}
.mark:hover img{transform:rotate(-7deg) scale(1.05)}
.chan{margin-left:auto;font-family:var(--f-show);font-size:1.5rem;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 2px 10px #000}
.onair{font-weight:400;margin-left:.3em;color:var(--ink);white-space:nowrap}
.onair::before{content:"";display:inline-block;width:.46em;height:.46em;margin:0 .3em .1em 0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffb0a8,#ff2a1e 45%,#b80a0a);box-shadow:0 0 0 1.5px #1d0506,0 0 10px 2px rgba(255,45,35,.85);animation:rec 1.6s steps(1) infinite}
@keyframes rec{50%{opacity:.25;box-shadow:0 0 0 1.5px #1d0506}}
.keys{display:flex;gap:6px}
.key{flex:1;display:grid;place-items:center;min-height:48px;padding:0 10px 2px;font-family:var(--f-show);font-size:1.22rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:#0c0612;text-shadow:0 1px 0 rgba(255,255,255,.35);background:50%/100% 100% no-repeat;transition:filter .15s}
.key:hover{filter:brightness(1.08)}
/* tasti: la gomma del bordo resta grigia, il colore sta solo sulla faccia */
.k-mag{background-image:url(img/tasto-mag.webp)}.k-acid{background-image:url(img/tasto-acid.webp)}.k-gold{background-image:url(img/tasto-gold.webp)}.k-cyan{background-image:url(img/tasto-cyan.webp)}
.k-mag:active{background-image:url(img/tasto-mag-premuto.webp)}.k-acid:active{background-image:url(img/tasto-acid-premuto.webp)}.k-gold:active{background-image:url(img/tasto-gold-premuto.webp)}.k-cyan:active{background-image:url(img/tasto-cyan-premuto.webp)}
.keys-top{display:none}
.keys-bottom{position:fixed;inset:auto 0 0 0;z-index:40;gap:8px;padding:8px 10px calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(#322a3a,#17111d 55%,#0d0912);border-top:1px solid #5a4e66;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 -10px 24px rgba(0,0,0,.6)}
@media(min-width:980px){
  html{scroll-padding-top:84px}
  body{padding-bottom:0}
  .keys-bottom{display:none}
  .keys-top{display:flex;margin-left:auto}
  .keys-top .key{flex:none;min-height:38px;font-size:1.1rem}
  .chan{margin-left:22px}
  .top{position:fixed;padding:12px 32px;background:linear-gradient(rgba(14,7,25,.92),rgba(14,7,25,0))}
  .mark img{width:84px}
}

/* ---------- apertura ---------- */
.hero{position:relative;display:grid}
.stage{position:relative;isolation:isolate;background:#000}
.stage-img{width:100%;height:auto;aspect-ratio:928/1152;object-fit:cover}
.stage::after{content:"";position:absolute;inset:auto 0 0 0;height:22%;background:linear-gradient(transparent,var(--night));pointer-events:none}
.illus{position:absolute;z-index:3;right:8px;top:44%;writing-mode:vertical-rl;font-family:var(--f-tvd);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(246,241,251,.78);text-shadow:0 1px 3px #000}

/* tabellone: foto del cartello appeso alle catene, cifre e targhette accese dal codice */
.board{position:absolute;z-index:2;left:50%;top:0;width:94%;max-width:560px;aspect-ratio:870/457;translate:-50% 0;container-type:inline-size;background:url(img/tabellone.webp) 50%/100% 100% no-repeat;filter:drop-shadow(0 18px 22px rgba(0,0,0,.75));transform-origin:50% 0;will-change:transform,rotate;animation:cala 1s cubic-bezier(.22,1,.36,1) both,dondola 4.6s ease-in-out both}
/* Il tabellone scende sulle catene e poi oscilla come un pendolo che si smorza: ogni tratto rallenta agli estremi, così non va a scatti. */
@keyframes cala{0%{transform:translateY(-60%);opacity:0}30%{opacity:1}100%{transform:none;opacity:1}}
@keyframes dondola{0%{rotate:-4deg}17%{rotate:3deg}34%{rotate:-2.1deg}51%{rotate:1.4deg}68%{rotate:-.85deg}84%{rotate:.4deg}100%{rotate:0deg}}
.board-digits,.board-labels{position:absolute;left:8.03%;width:83.4%;display:grid;grid-template-columns:repeat(4,1fr);place-items:center}
.board-digits{top:49%;height:26.3%}
.board-digits .colon{position:absolute;top:50%;translate:-50% -50%;font-family:var(--f-seg);font-weight:700;font-size:8.6cqw;line-height:1;color:var(--mag);text-shadow:0 0 1.4cqw rgba(245,40,246,.7)}
.seg-count{font-size:9.6cqw;color:var(--mag)}
.seg-count i{color:#24102c}
.seg-count b{text-shadow:0 0 1.6cqw rgba(245,40,246,.75)}
.board-labels{top:79.4%;height:8.8%;font-family:var(--f-show);font-size:3.3cqw;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:#e9d3ae}
.board.is-live .seg-count,.board.is-live .colon{color:var(--acid)}.board.is-live .seg-count b,.board.is-live .colon{text-shadow:0 0 1.6cqw rgba(125,250,60,.75)}

.lower{position:absolute;z-index:2;left:5%;right:5%;bottom:5%;display:block;padding:0;border:0;background:none;text-align:left;border-radius:6px;transition:transform .3s var(--ease)}
.lower:hover{transform:translateY(-3px)}
.lower-main{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(24,8,40,.94);border:2px solid var(--mag);border-bottom:0;border-radius:6px 6px 0 0;padding:9px 14px 7px}
.lower-title{font-family:var(--f-show);font-size:clamp(1.45rem,6.2vw,2.3rem);line-height:1;text-transform:uppercase;letter-spacing:.02em}
.lower-sub{display:block;background:var(--lime);color:#0b1407;font-weight:600;padding:5px 14px 6px;border-radius:0 0 6px 6px;font-size:1rem}
.lower .seg-price{font-size:clamp(1.5rem,6vw,2.2rem)}

.pitch{display:grid;gap:11px;padding:8px 16px 48px;justify-items:center;text-align:center}
.pitch .drop-line{order:1}.pitch .actions{order:2}.pitch .lede{order:3}
.lede{color:var(--dust);max-width:46ch}
.drop-line{font-family:var(--f-tvd);font-size:.86rem;line-height:1.35;color:var(--lime);max-width:46ch}
.drop-line.out{color:var(--mag)}
.actions{display:grid;gap:9px;justify-items:center;width:100%;max-width:560px}
.actions .btn-mag{width:100%;max-width:440px;font-size:1.8rem}
.actions .btn-acid{--h:54px;font-size:1.3rem}

@media(min-width:980px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,min(50vw,84vh));align-items:center;gap:0;max-width:1264px;margin-inline:auto;padding:70px 32px 30px;min-height:100vh}
  .pitch{order:-1;justify-items:start;text-align:left;padding:0;position:relative;z-index:3;margin-right:-9%}
  .stage{overflow:visible;background:none}
  .stage-img{-webkit-mask-image:radial-gradient(ellipse 62% 60% at 54% 48%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 62% 60% at 54% 48%,#000 62%,transparent 100%)}
  .mark img{width:84px}
  .board{top:3%;width:86%}
  .pitch .actions,.pitch .lede,.pitch .drop-line{order:0}
  .stage::after{display:none}
  .lower{left:2%;right:6%;bottom:12%}
  .actions{justify-items:start}
  .actions .btn-mag{width:380px}
  .hero .neon{font-size:clamp(3.4rem,5.7vw,5.2rem)}
  .hero .tube{white-space:nowrap}
}

/* ---------- banco dei premi ---------- */
.booth{position:relative;padding-top:calc(var(--awn) + 24px);padding-bottom:var(--sec);background:
  radial-gradient(120% 60% at 50% 0,#22103380,transparent 70%),var(--night)}
.awning{position:absolute;inset:0 0 auto 0;height:var(--awn);background:url(img/tendone.webp) 50% 0/auto 100% no-repeat;filter:drop-shadow(0 12px 12px rgba(0,0,0,.75))}
.bulbs{position:absolute;inset:calc(var(--awn) + 8px) 0 auto 0;display:flex;justify-content:space-around;padding-inline:10px}
.bulbs i{width:11px;height:11px;border-radius:50%;background:var(--mag);box-shadow:0 0 12px 2px var(--mag);animation:blink 2.4s steps(1) infinite}
.bulbs i:nth-child(even){background:var(--acid);box-shadow:0 0 12px 2px var(--acid);animation-delay:1.2s}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.28}}
.booth.chase .bulbs i{animation:chase .5s steps(1) 4}
.booth.chase .bulbs i:nth-child(3n+1){animation-delay:.16s}.booth.chase .bulbs i:nth-child(3n+2){animation-delay:.33s}
@keyframes chase{0%,33%{opacity:1}34%,100%{opacity:.15}}
.booth-head{display:grid;gap:14px;margin:26px 0 30px;max-width:60ch}
.booth-head p{color:var(--dust)}
.shelf-note{margin-top:14px;font-family:var(--f-tvd);font-size:.8rem;color:var(--dust)}
.tv-screen .illus{writing-mode:horizontal-tb;top:9%;right:8%;font-size:.6rem}

.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px;border-radius:10px;background:linear-gradient(rgba(20,9,28,.38),rgba(20,9,28,.38)),#22142c url(img/scaffale.jpg) 50% 0/cover;box-shadow:inset 0 0 0 2px #3a2646,0 30px 60px -30px #000}
.niches{display:contents}
.niche{position:relative;display:grid;grid-template-rows:auto 1fr;padding:0;border:0;border-radius:6px;background:var(--wood-2);text-align:left;overflow:hidden;box-shadow:inset 0 0 0 1px #000,inset 0 14px 22px -8px #000;transition:transform .3s var(--ease),box-shadow .3s}
.niche:hover{transform:translateY(-3px)}
.hole{position:relative;display:block;aspect-ratio:1;background:radial-gradient(60% 50% at 50% 0,rgba(255,255,255,.2),transparent 70%),#07040a;overflow:hidden}
.hole img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .7s var(--ease),filter .4s}
.niche:hover .hole img{transform:scale(1.06)}
.lamp{position:absolute;z-index:2;left:50%;top:5px;width:9px;height:9px;translate:-50% 0;border-radius:50%;background:#fff6d8;box-shadow:0 0 10px 3px rgba(255,246,216,.85)}
.tag{position:absolute;z-index:2;right:6px;top:10px;min-width:1.9em;padding:8px 5px 4px;background:#e9d3ae;color:#24160c;font-family:var(--f-show);font-size:1.25rem;line-height:1;text-align:center;border-radius:3px 3px 5px 5px;rotate:5deg;box-shadow:0 3px 6px rgba(0,0,0,.6)}
.tag::before{content:"";position:absolute;left:50%;top:3px;width:4px;height:4px;translate:-50% 0;border-radius:50%;background:#24160c}
.plate{display:grid;gap:3px;padding:8px 8px 10px;align-content:start}
.plate>b{font-family:var(--f-show);font-weight:400;font-size:1.22rem;line-height:1;text-transform:uppercase;letter-spacing:.02em}
.plate .seg-price{font-size:1.25rem;justify-self:start}
.plate em{font-style:normal;font-family:var(--f-tvd);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.empty{position:absolute;inset:0;display:grid;place-items:start;padding:20px 44px 0 8px;line-height:1.2;font-family:var(--f-tvd);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dust);text-align:left}
.shot .empty{place-items:start center;padding:26% 6px 0;text-align:center}
.niche.is-off .lamp{background:#2a2430;box-shadow:none}
.niche.is-off .hole{background:#060309}
.shot.off{background:#060309}
.niche.is-off .hole img{filter:grayscale(1) brightness(.28) contrast(1.1)}
.niche.is-off .plate>b{color:var(--dim)}
.niche.is-off .tag{background:#7d7262;color:#120d09}
.niche.is-sold .hole img{filter:grayscale(.7) brightness(.5)}
.stamp{position:absolute;z-index:3;left:50%;top:50%;translate:-50% -50%;rotate:-10deg;padding:2px 10px;border:2px solid var(--mag);color:var(--mag);background:rgba(14,7,25,.75);font-family:var(--f-show);font-size:1.2rem;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.niche.picked{box-shadow:inset 0 0 0 1px #000,0 0 0 3px var(--gold),0 0 40px 2px rgba(248,243,56,.5)}
.niche.picked .lamp{animation:strike .7s 2}

.niche:first-child{grid-column:1/-1}
.niche:first-child .hole{aspect-ratio:16/10}
.wheelbox{grid-column:1/-1;display:grid;gap:14px;justify-items:center;text-align:center;padding:18px 10px 20px;border-radius:6px;background:var(--wood-2);box-shadow:inset 0 0 0 1px #000}
.wheel{width:min(76vw,300px);aspect-ratio:720/766}
.wheel{position:relative}
.wheel .rot{position:absolute;left:11.944%;top:16.057%;width:75.833%;aspect-ratio:1;border-radius:50%;overflow:hidden;will-change:transform;backface-visibility:hidden;transition:transform 3.4s cubic-bezier(.17,.67,.14,1)}
.wheel .rot img,.wheel .rot svg,.wheel-frame{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.wheel-frame{pointer-events:none}
#ptr{transform-origin:100px 6px;transform-box:view-box}
#ptr.hit{animation:ptr .5s ease-out}
@keyframes ptr{25%{transform:rotate(-16deg)}55%{transform:rotate(9deg)}80%{transform:rotate(-4deg)}}
.wheel-txt{display:grid;gap:8px;min-width:0;justify-items:center}
.wheel-txt h3{font-family:var(--f-show);font-weight:400;font-size:1.5rem;line-height:1;text-transform:uppercase}
.wheel-txt p{color:var(--dust);font-size:.92rem;line-height:1.35}
.wheel-txt .btn{--h:56px;font-size:1.2rem}
.wheel-res{font-family:var(--f-tvd);font-size:.8rem;color:var(--gold)!important;min-height:1.3em}

@media(min-width:760px){
  .shelf{grid-template-columns:repeat(5,1fr);gap:14px;padding:18px}
  .niche:first-child{grid-column:auto}.niche:first-child .hole{aspect-ratio:1}
  .wheelbox{grid-column:span 2}
  .plate{padding:12px 14px 16px}
  .plate>b{font-size:1.6rem}.plate .seg-price{font-size:1.6rem}.plate em{font-size:.8rem}
  .tag{font-size:1.7rem;right:12px}
  .lamp{width:12px;height:12px;top:8px}
  .wheelbox{grid-template-columns:auto 1fr;align-items:center;justify-items:start;text-align:left;padding:18px;gap:22px}
  .wheel{width:clamp(190px,22vw,240px)}
  .wheel-txt{justify-items:start}
  .empty{font-size:.8rem;place-items:start center;padding:26% 6px 0;text-align:center}
}

/* ---------- manifesto ---------- */
.manifesto{padding-block:var(--sec);background:linear-gradient(var(--night),var(--velvet) 30%,var(--velvet) 70%,var(--night))}
.man-grid{display:grid;gap:44px}
.man-say{display:grid;gap:16px;max-width:62ch}
.man-say h2{margin-bottom:10px}
.man-say p{color:var(--dust)}
.man-say .big{font-size:1.3rem;line-height:1.4;color:var(--ink)}
.signed{font-family:var(--f-show);font-size:1.5rem;text-transform:uppercase;letter-spacing:.04em;color:var(--acid)!important}
.signed::before{content:"";display:inline-block;width:38px;height:2px;background:var(--acid);vertical-align:.3em;margin-right:12px}
.laws{display:grid;gap:22px;counter-reset:l;align-content:start}
.laws li{counter-increment:l;display:grid;grid-template-columns:auto 1fr;gap:2px 18px;align-items:start}
.laws li::before{content:counter(l);grid-row:span 2;font-family:var(--f-seg);font-weight:700;font-size:2.6rem;line-height:1;color:var(--mag);text-shadow:0 0 14px rgba(245,40,246,.6)}
.laws b{font-family:var(--f-show);font-weight:400;font-size:1.85rem;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.laws span{color:var(--dust)}
@media(min-width:900px){.man-grid{grid-template-columns:1.2fr 1fr;gap:80px;align-items:center}}

/* ---------- biglietto ---------- */
.booth-ticket{padding-block:var(--sec)}
.ticket-grid{display:grid;gap:44px;align-items:center}
.perks{display:grid;gap:16px;margin:26px 0 30px}
.perks li{display:grid;gap:2px;padding-left:20px;border-left:1px solid var(--line)}
.perks b{font-weight:800}
.perks span{color:var(--dust)}
.ticket{position:relative;max-width:520px;width:100%;justify-self:center;aspect-ratio:2035/1101;container-type:inline-size;color:#1c0a12;rotate:-2.5deg;background:url(img/biglietto.webp) 50%/100% 100% no-repeat;filter:drop-shadow(0 22px 30px rgba(0,0,0,.7));transition:rotate .5s var(--ease),translate .5s var(--ease)}
.ticket:hover{rotate:0deg;translate:0 -6px}
.ticket-main{position:absolute;left:8.5%;top:10%;width:62.5%;bottom:10%;display:grid;gap:1.1cqw;align-content:center;font-size:3.5cqw;line-height:1.25}
.ticket-top{font-family:var(--f-tvd);font-size:2.55cqw;letter-spacing:.05em;text-transform:uppercase}
.ticket-main strong{font-family:var(--f-show);font-weight:400;font-size:9.8cqw;line-height:.95;text-transform:uppercase;color:#7a0c83}
.ticket-main span{font-weight:600}
.ticket-main em{font-size:3.1cqw}
.ticket-stub{position:absolute;left:75.6%;width:18.8%;top:8%;bottom:8.5%;display:grid;place-items:center;align-content:center;gap:1.4cqw;writing-mode:vertical-rl}
.seg-stub{font-size:5.6cqw;color:#1c0320}.seg-stub i{color:rgba(28,3,32,.16)}
.tk-stamp{left:57%;top:85%;font-size:4.8cqw;padding:.1em .5em;rotate:-11deg;border:.5cqw solid #0d7a34;color:#0d7a34;background:rgba(240,223,194,.35);letter-spacing:.1em;mix-blend-mode:multiply}
.ticket-stub small{font-family:var(--f-show);font-size:3.6cqw;text-transform:uppercase;letter-spacing:.1em}
@media(min-width:900px){.ticket-grid{grid-template-columns:1fr 1fr;gap:72px}}

/* ---------- puntate: il televisore ---------- */
.episodes{padding-block:var(--sec);background:var(--velvet)}
.tv-grid{display:grid;gap:36px;align-items:center}
.tv{position:relative;aspect-ratio:1370/969;filter:drop-shadow(0 30px 34px rgba(0,0,0,.7))}
.tv-frame{position:absolute;z-index:3;inset:0;width:100%;height:100%;pointer-events:none}
.tv-screen{position:absolute;left:9.2%;top:12.7%;width:63.7%;height:69.4%;border-radius:9%/11%;overflow:hidden;background:#050307}
.tv-screen img,.tv-screen iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.tv-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(rgba(0,0,0,.22) 0 2px,transparent 2px 4px);box-shadow:inset 0 0 70px 14px rgba(0,0,0,.8)}
.tv-screen.playing::after{display:none}
.tv-play{position:absolute;z-index:2;inset:0;margin:auto;width:84px;height:84px;border:0;border-radius:50%;background:var(--mag);box-shadow:0 0 0 5px #000,0 0 40px var(--mag);transition:transform .25s var(--ease)}
.tv-play:hover{transform:scale(1.08)}
.tv-play::after{content:"";position:absolute;inset:0;margin:auto;translate:4px 0;width:0;height:0;border-left:26px solid #14031a;border-top:16px solid transparent;border-bottom:16px solid transparent}
.tv-msg{position:absolute;z-index:2;left:0;right:0;bottom:12%;padding:6px 10px;line-height:1.3;background:rgba(0,0,0,.82);text-align:center;font-family:var(--f-tvd);font-size:clamp(.72rem,3.2vw,1rem);text-transform:uppercase;letter-spacing:.06em;color:var(--lime);text-shadow:2px 0 var(--mag)}
.channels{display:grid;gap:8px;margin-top:22px}
.ch{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px 14px;border:0;border-radius:8px;background:rgba(14,7,25,.55);text-align:left;transition:background .2s,transform .2s var(--ease)}
.ch:hover{transform:translateX(4px)}
.ch[aria-pressed=true]{background:var(--mag);color:#14031a}
.ch .seg{font-size:1.5rem;color:var(--acid)}
.ch[aria-pressed=true] .seg{color:#14031a}.ch[aria-pressed=true] .seg i{color:rgba(20,3,26,.2)}
.ch>b{font-family:var(--f-show);font-weight:400;font-size:1.45rem;line-height:1;text-transform:uppercase}
.ch small{font-family:var(--f-tvd);font-size:.72rem;text-transform:uppercase;opacity:.8}
@media(min-width:900px){.tv-grid{grid-template-columns:1.25fr 1fr;gap:64px}}

/* ---------- pacco ---------- */
.parcel{padding-block:var(--sec)}
.parcel-grid{display:grid;gap:36px;align-items:center}
.parcel-fig{position:relative;border-radius:12px;overflow:hidden;rotate:1.5deg;box-shadow:0 34px 60px -30px #000}
.parcel-fig img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.parcel-fig .illus{writing-mode:horizontal-tb;top:auto;bottom:8px;right:10px}
.contents{display:grid;gap:0;margin-top:24px;counter-reset:c}
.contents li{padding:13px 0;border-top:1px solid var(--line)}
@media(min-width:900px){.parcel-grid{grid-template-columns:1fr 1.1fr;gap:72px}}

/* ---------- Televideo: le pagine di servizio ---------- */
.tvd-section{padding-block:calc(var(--sec) - 16px) var(--sec)}
.tvd{font-family:var(--f-tvd);font-size:1.02rem;line-height:1.38;background:#000;color:#fff;padding:14px 14px 22px;border-radius:4px}
.tvd-head{display:flex;gap:.8em;color:#fff;margin-bottom:6px;white-space:nowrap;font-size:.9em}
.tvd-head span:nth-child(2){color:var(--gold)}
.tvd-clock{margin-left:auto;color:var(--gold)}
.tvd-title{font-family:var(--f-tvd);font-weight:400;font-size:1.9rem;line-height:1.25;padding:2px 10px;color:#000;text-transform:uppercase}
.tvd-sub{font-family:var(--f-tvd);font-weight:400;font-size:1.02rem;padding:1px 10px;color:#000;margin:22px 0 10px;text-transform:uppercase}
.bg-mag{background:var(--mag)}.bg-acid{background:var(--acid)}.bg-gold{background:var(--gold)}.bg-cyan{background:var(--cyan)}
.tvd-cols{display:grid;gap:8px}
.tvd-table{width:100%;border-collapse:collapse}
.tvd-table th{font-weight:400;text-align:left;color:var(--cyan);padding:3px 4px}
.tvd-table td{padding:3px 4px;vertical-align:top}
.tvd-table td:nth-child(2){white-space:nowrap}
.tvd-table td:last-child,.tvd-table th:last-child{text-align:right;white-space:nowrap}
.tvd-table td:last-child{color:var(--gold)}
.tvd-note{color:var(--lime);margin-top:12px}
.tvd-pages{display:grid;gap:2px}
.tvd-pages a{color:#fff;text-decoration:none;padding:6px 4px;min-height:44px;display:flex;gap:1em;align-items:center}
.tvd-pages a b{font-weight:400;color:var(--gold)}
.tvd-pages a:hover{background:var(--cyan);color:#000}.tvd-pages a:hover b{color:#000}
.tvd details{border-bottom:1px dotted #444}
.tvd summary{list-style:none;cursor:pointer;padding:11px 28px 11px 4px;position:relative;color:#fff}
.tvd summary::-webkit-details-marker{display:none}
.tvd summary::after{content:"+";position:absolute;right:6px;top:10px;color:var(--gold)}
.tvd details[open] summary{color:var(--gold)}
.tvd details[open] summary::after{content:"-"}
.tvd details p{padding:0 4px 14px;color:var(--lime)}
.tvd dl{display:grid;grid-template-columns:auto 1fr;gap:4px 1.2em;margin:0}
.tvd dt{color:var(--cyan)}.tvd dd{margin:0}
.tvd h3:first-child{margin-top:12px}
.tvd .tvd-warn{color:var(--gold)}
.tvd a{color:var(--cyan)}
.tvd ul{display:grid;gap:8px;margin:0;padding:0}
.tvd ul li::before{content:"> ";color:var(--mag)}
@media(min-width:900px){.tvd-head{gap:1.2em;font-size:1em}.tvd{padding:22px 26px 30px;font-size:1.08rem}.tvd-cols{grid-template-columns:1fr 1fr;gap:44px}.tvd-title{font-size:2.4rem}}

/* ---------- chiusura ---------- */
.foot{border-top:1px solid var(--line);padding-block:44px 28px}
.foot-grid{display:grid;gap:24px;align-items:start}
.foot-logo{width:132px;height:auto}
.foot-txt{display:grid;gap:10px;color:var(--dust);font-size:.95rem;max-width:70ch}
.ver{font-family:var(--f-tvd);font-size:.72rem;color:var(--dim)}
.warn{font-weight:800;color:var(--lime)}
.social{display:flex;flex-wrap:wrap;gap:6px 20px}
.social a{font-family:var(--f-show);font-size:1.3rem;text-transform:uppercase;letter-spacing:.04em}
@media(min-width:760px){.foot-grid{grid-template-columns:auto 1fr;gap:44px}}
.proto{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:28px;padding-top:16px;border-top:1px dashed var(--line);font-family:var(--f-tvd);font-size:.8rem;color:var(--dust)}
.seg-switch{display:flex;flex-wrap:wrap;gap:6px}
.seg-switch button{background:transparent;border:1px solid var(--line);border-radius:6px;padding:8px 12px;font-family:var(--f-tvd);font-size:.8rem;color:var(--ink)}
.seg-switch button[aria-pressed=true]{background:var(--acid);border-color:var(--acid);color:#07140a}

/* ---------- scheda del premio ---------- */
.sheet{position:fixed;inset:0;z-index:60;display:grid;align-items:end;justify-items:center;overflow-y:auto;overscroll-behavior:contain;background:rgba(5,2,8,.86)}
.sheet-in{width:100%;max-width:1060px;margin-top:40px;background:var(--night);border-radius:18px 18px 0 0;box-shadow:0 0 0 1px var(--line);padding:14px 16px calc(28px + env(safe-area-inset-bottom,0px));display:grid;gap:18px;animation:rise .5s var(--ease)}
@keyframes rise{from{transform:translateY(40px);opacity:0}}
.sheet-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--f-tvd);font-size:.85rem;text-transform:uppercase;color:var(--lime)}
.x{width:46px;height:46px;border-radius:50%;border:0;background:var(--plum);display:grid;place-items:center;transition:background .2s,rotate .3s var(--ease)}
.x:hover{background:var(--mag);rotate:90deg}
.x svg{width:18px;height:18px;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.sheet-body{display:grid;gap:20px}
.shot{position:relative;border-radius:12px;overflow:hidden;background:#07040a;aspect-ratio:1}
.shot img{width:100%;height:100%;object-fit:cover}
.gal{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.gal::-webkit-scrollbar{display:none}
.gal img{flex:0 0 100%;scroll-snap-align:center}
.gal-n{position:absolute;z-index:2;left:10px;bottom:8px;padding:2px 8px;border-radius:4px;background:rgba(0,0,0,.7);font-family:var(--f-tvd);font-size:.75rem;color:var(--ink)}
.gal-a{position:absolute;z-index:2;top:50%;translate:0 -50%;width:44px;height:44px;border-radius:50%;border:0;background:rgba(14,7,25,.78);display:grid;place-items:center;transition:background .2s,opacity .2s}
.gal-a svg{width:18px;height:18px;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.gal-prev{left:8px}.gal-prev svg{rotate:180deg}.gal-next{right:8px}
.gal-a:hover{background:var(--mag)}.gal-a:hover svg{stroke:#14031a}
.gal-a[disabled]{opacity:0;pointer-events:none}
.thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.thumbs button{flex:0 0 62px;aspect-ratio:1;padding:0;border:0;border-radius:8px;overflow:hidden;background:#07040a;opacity:.6;transition:opacity .2s}
.thumbs button[aria-current=true]{opacity:1;box-shadow:0 0 0 2px var(--gold)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.shot.off img{filter:grayscale(1) brightness(.3)}
.shot .illus{writing-mode:horizontal-tb;top:auto;bottom:8px}
.shot .empty{font-size:.85rem}
.sheet-info{display:grid;gap:16px;align-content:start;min-width:0}
.sheet-info .neon{font-size:clamp(2.8rem,11vw,4.6rem)}
.pline{font-family:var(--f-show);font-size:1.5rem;line-height:1.05;text-transform:uppercase;color:var(--lime)}
.story{font-size:1.1rem;max-width:58ch}
.motive{display:grid;gap:4px;padding:12px 14px;border-radius:8px;background:var(--velvet)}
.motive b{font-family:var(--f-show);font-weight:400;font-size:1.2rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mag)}
.buy{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;padding-top:16px;border-top:1px solid var(--line)}
.buy .seg-price{font-size:2.6rem}
.buy small{display:block;color:var(--dust);font-size:.85rem;margin-top:6px;max-width:34ch}
.na{font-family:var(--f-show);font-size:2rem;text-transform:uppercase;color:var(--dim)}
.photo-note{font-size:.85rem;color:var(--dust)}
.video{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(min-width:860px){
  .sheet{align-items:center;padding:28px}
  .sheet-in{margin-top:0;border-radius:18px;padding:22px 26px 28px}
  .sheet-body{grid-template-columns:1fr 1.05fr;gap:34px}
}

.banner{position:relative;z-index:50;background:var(--acid);color:#07140a;font-weight:800;text-align:center;padding:9px 16px}
.toast{position:fixed;left:50%;bottom:calc(var(--keys-h) + 22px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:80;max-width:calc(100% - 32px);background:var(--gold);color:#16130a;font-weight:800;padding:10px 18px;border-radius:8px;text-align:center;box-shadow:0 14px 30px -10px #000}
#confetti{position:fixed;inset:0;width:100%;height:100%;z-index:90;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  /* la ruota è il gioco stesso: con le animazioni ridotte gira lo stesso, ma meno e più piano */
  .wheel .rot{transition:transform 2s cubic-bezier(.2,.7,.2,1)!important}
}