/* =============================================================
   site.css — MEADOW KIDS
   Stessa tavolozza, stesso linguaggio di forme del gioco:
   cielo di notte, prato, contorni scuri spessi, pulsanti con
   l'ombra dura sotto che si schiaccia quando li premi.
   ============================================================= */

:root{
  /* identiche a css/game.css del gioco */
  --bg:        #0a1018;
  --panel:     rgba(16, 24, 38, .92);
  --line:      #2c3f63;
  --ink:       #e8f0ff;
  --ink-dim:   #9fb0d0;
  --ink-faint: #6b7c9c;
  --gold:      #ffcf5a;
  --gold-hi:   #ffe9a8;
  --gold-dk:   #a06a12;
  --grass:     #6bbf59;
  --grass-dk:  #2f7a3c;
  --sky:       #7fc4e8;
  --danger:    #ff4d5a;
  --violet:    #9b7bff;
  --twitch:    #a970ff;

  --ol:        #08111c;                 /* il contorno "cotto" degli sprite */
  --hdr-h:     62px;
  --wrap:      1180px;

  --ease:      cubic-bezier(.2,.9,.25,1);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 10px);}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Segoe UI',system-ui,-apple-system,'Trebuchet MS',Roboto,sans-serif,
    'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji','Segoe UI Symbol';
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,canvas,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
ul,ol{list-style:none;}

/* ==================================================================
   IL CIELO — vive dietro tutto il documento e non scorre con esso.
   ================================================================== */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, #16223a 0%, #0c1424 45%, #080d16 100%);}

.stars{position:absolute;inset:0;opacity:.75;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 14%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 78% 9%,  #cfe6ff, transparent),
    radial-gradient(1.2px 1.2px at 33% 29%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 62% 38%, #ffe9a8, transparent),
    radial-gradient(1.2px 1.2px at 88% 24%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 22% 52%, #bcd8ff, transparent),
    radial-gradient(1.2px 1.2px at 52% 62%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 92% 58%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 6%  72%, #ffe9a8, transparent),
    radial-gradient(1.4px 1.4px at 44% 84%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 71% 76%, #cfe6ff, transparent);
  background-repeat:no-repeat;
  animation:twinkle 5.5s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.75;}50%{opacity:.42;}}

/* La luna è atmosfera, non un elemento della pagina: sta dietro tutto e
   deve restare abbastanza spenta da non sembrare un pulsante gigante che
   segue lo scorrimento. */
.moon{position:absolute;right:6vw;top:7vh;width:clamp(58px,7vw,104px);aspect-ratio:1;border-radius:50%;
  opacity:.34;
  background:radial-gradient(circle at 36% 32%, #fffbe8, #ffe27a 58%, #e6bf52 100%);
  box-shadow:0 0 70px rgba(255,226,122,.22), 0 0 160px rgba(255,226,122,.10);
  animation:moonBob 14s ease-in-out infinite;}
@keyframes moonBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}

.hills{position:absolute;left:-5%;right:-5%;bottom:0;height:34vh;
  background:
    radial-gradient(ellipse 55% 100% at 18% 100%, var(--grass-dk) 0%, transparent 70%),
    radial-gradient(ellipse 60% 100% at 72% 100%, #276a34 0%, transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(20,58,30,.55) 62%, rgba(16,48,26,.85) 100%);
  opacity:.55;}

/* ==================================================================
   TIPOGRAFIA COMUNE
   ================================================================== */
.wrap{width:min(var(--wrap), calc(100% - 40px));margin-inline:auto;position:relative;z-index:2;}

.eyebrow{font-size:clamp(10px,1.15vw,12.5px);font-weight:900;letter-spacing:.32em;text-transform:uppercase;
  color:var(--grass);margin-bottom:14px;display:flex;align-items:center;gap:10px;}
.eyebrow::before{content:'';width:26px;height:3px;border-radius:2px;background:currentColor;flex:none;}
.eyebrow.gold{color:var(--gold);}
.eyebrow.purple{color:var(--twitch);}
.eyebrow.green{color:var(--grass);}
.eyebrow.red{color:var(--danger);}

.h2{
  font-size:clamp(28px,5.2vw,62px);font-weight:900;line-height:.98;letter-spacing:-.5px;
  text-transform:uppercase;margin-bottom:18px;max-width:16ch;
  background:linear-gradient(180deg,#fff6dc 0%,#ffc94e 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  /* contorno in `em` per lo stesso motivo del marchio: a 28 px, cioè
     questo titolo su un telefono, 2,6 px fissi impastano le lettere */
  -webkit-text-stroke:.042em #46280e;paint-order:stroke fill;
  filter:drop-shadow(0 4px 0 rgba(48,26,10,.45));
}
/* ⚠ `background-image`, non la scorciatoia `background`: la scorciatoia
   riazzera `background-clip`, il testo smette di ritagliare il gradiente
   e il titolo diventa un rettangolo pieno. È lo stesso inciampo annotato
   in css/game.css del gioco. */
.h2-violet{background-image:linear-gradient(180deg,#f0e6ff 0%,#9b7bff 100%);-webkit-text-stroke-color:#2b1b52;
  filter:drop-shadow(0 4px 0 rgba(30,18,60,.55));}
.h2-purple{background-image:linear-gradient(180deg,#f6ecff 0%,#a970ff 100%);-webkit-text-stroke-color:#2a1450;
  filter:drop-shadow(0 4px 0 rgba(30,12,60,.55));}
.h2-red{background-image:linear-gradient(180deg,#ffe4e6 0%,#ff4d5a 100%);-webkit-text-stroke-color:#4d0d16;
  filter:drop-shadow(0 4px 0 rgba(70,10,20,.5));}
.h2-huge{font-size:clamp(34px,7.4vw,88px);max-width:14ch;margin-inline:auto;text-align:center;}

.h3{font-size:clamp(17px,2.4vw,27px);font-weight:900;letter-spacing:2px;text-transform:uppercase;
  color:var(--ink);margin:64px 0 6px;display:flex;align-items:center;gap:12px;}
.h3::after{content:'';flex:1;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--line),transparent);}
.h3-boss{color:#ffd0d4;}

.lede{font-size:clamp(14px,1.75vw,19px);line-height:1.6;color:#cddcf6;max-width:62ch;margin-bottom:12px;}
.lede.big{font-size:clamp(15.5px,2.1vw,22px);color:var(--ink);font-weight:600;}
.body{font-size:clamp(13.5px,1.55vw,16.5px);line-height:1.72;color:var(--ink-dim);max-width:60ch;margin-bottom:14px;}
.sub{font-size:clamp(12.5px,1.4vw,15px);color:var(--ink-faint);margin-bottom:26px;}

/* ==================================================================
   PULSANTI — copiati dal gioco: ombra dura sotto, si schiacciano.
   ================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 34px;border-radius:44px;
  font-weight:900;font-size:clamp(13px,1.6vw,17px);letter-spacing:1.4px;text-transform:uppercase;
  white-space:nowrap;position:relative;
  transition:transform .08s var(--ease), box-shadow .08s var(--ease), filter .14s;
}
.btn-gold{color:#1a1206;background:linear-gradient(180deg,#ffe089,#ffb63f);
  box-shadow:0 6px 0 #9a5a10, 0 10px 26px rgba(0,0,0,.45);}
.btn-blue{color:#fff;background:linear-gradient(180deg,#8fb6ff,#4a72dc);
  box-shadow:0 6px 0 #27408c, 0 10px 26px rgba(0,0,0,.42);}
.btn:hover{filter:brightness(1.08);}
.btn:active{transform:translateY(4px);}
.btn-gold:active{box-shadow:0 2px 0 #9a5a10, 0 4px 12px rgba(0,0,0,.45);}
.btn-blue:active{box-shadow:0 2px 0 #27408c, 0 4px 12px rgba(0,0,0,.45);}
.btn:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px;}
.btn-sm{padding:9px 20px;font-size:12.5px;letter-spacing:1.2px;box-shadow:0 4px 0 #9a5a10,0 6px 14px rgba(0,0,0,.4);}
.btn-sm:active{box-shadow:0 1px 0 #9a5a10;}
.btn-big{padding:16px 42px;font-size:clamp(14px,1.9vw,19px);}
.btn-huge{padding:clamp(18px,2.6vw,26px) clamp(30px,5vw,64px);font-size:clamp(16px,2.6vw,26px);
  border-radius:60px;box-shadow:0 9px 0 #9a5a10, 0 16px 40px rgba(0,0,0,.5);}
.btn-huge:active{box-shadow:0 3px 0 #9a5a10, 0 6px 16px rgba(0,0,0,.5);}

/* ==================================================================
   HEADER
   ================================================================== */
.hdr{
  position:fixed;top:0;left:0;right:0;height:var(--hdr-h);z-index:60;
  /* ⚠ L'allineamento lo fa `space-between`, NON dei `margin-left:auto`
     incastrati fra loro. Prima il marchio spingeva a destra il menu e il
     menu spingeva a destra il resto, con una regola in piu' per quando i
     due erano adiacenti (`.hdr-nav + .hdr-right`). Sul telefono il menu
     e' `display:none` ma RESTA NEL DOCUMENTO, quindi quel selettore
     fratello combaciava lo stesso — e con due classi batteva il
     `margin-left:auto` della media query, che ne ha una. Risultato:
     lingua e GIOCA appiccicati al logo invece che a destra.
     Con `space-between` il caso «menu assente» viene da se'. */
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 clamp(12px,2.2vw,24px);
  background:linear-gradient(180deg, rgba(8,13,22,.94), rgba(8,13,22,.62) 70%, transparent);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  transition:background .25s, border-color .25s;
  border-bottom:2px solid transparent;
}
.hdr.stuck{background:rgba(8,13,22,.96);border-bottom-color:rgba(44,63,99,.7);}

.hdr-brand{display:flex;align-items:center;gap:9px;flex:none;}
.hdr-mark{font-size:22px;animation:bob 3.4s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-5deg);}50%{transform:translateY(-4px) rotate(5deg);}}
.hdr-name{font-weight:900;font-size:16px;letter-spacing:.6px;color:var(--gold-hi);}
.hdr-name i{font-style:normal;color:var(--sky);}

.hdr-nav{display:flex;gap:clamp(8px,1.5vw,20px);}
.hdr-nav a{font-size:12.5px;font-weight:800;letter-spacing:.7px;color:var(--ink-dim);
  padding:6px 2px;position:relative;transition:color .16s;white-space:nowrap;}
.hdr-nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease);}
.hdr-nav a:hover{color:var(--ink);}
.hdr-nav a:hover::after,.hdr-nav a.on::after{transform:scaleX(1);}
.hdr-nav a.on{color:var(--gold-hi);}

.hdr-right{display:flex;align-items:center;gap:10px;flex:none;}

/* --- selettore lingua: due tasti e una pastiglia che scorre --- */
.lang{position:relative;display:flex;padding:3px;border-radius:22px;
  background:rgba(10,16,28,.9);border:2px solid var(--line);}
.lang-b{position:relative;z-index:2;padding:5px 11px;border-radius:18px;
  font-size:12px;font-weight:900;letter-spacing:1.2px;color:var(--ink-faint);
  transition:color .2s;}
.lang-b.on{color:#1a1206;}
.lang-pill{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:18px;z-index:1;
  background:linear-gradient(180deg,#ffe089,#ffb63f);
  transition:transform .28s var(--ease);}
.lang[data-on="it"] .lang-pill{transform:translateX(100%);}

/* ==================================================================
   HERO
   ================================================================== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--hdr-h) + 26px) 20px 90px;overflow:hidden;z-index:2;}

/* --- il fondale: il gioco che gioca da solo --- */
.hero-stage{position:absolute;inset:0;overflow:hidden;background:#0a1018;}
.hero-stage-inner{position:absolute;inset:-2px;}
/* Il gioco stende un velo scuro sopra la vetrina, perché nel suo menu i
   pulsanti vengono prima del prato. Qui il prato È il contenuto, quindi
   si recupera la luminosità dall'esterno invece di toccare il gioco. */
.hero-stage iframe{width:100%;height:100%;border:0;display:block;
  opacity:0;transition:opacity 1.1s ease;pointer-events:none;
  filter:brightness(1.34) saturate(1.12) contrast(1.04);}
.hero-stage.on iframe{opacity:1;}
.hero-stage canvas{width:100%;height:100%;display:block;}

/* scanline + vignettatura: fa "cabinato" e stacca il testo dal prato */
.hero-scan{position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px);}
.hero-scrim{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 62% 52% at 50% 46%, rgba(6,10,20,.50) 0%, rgba(6,10,20,.16) 58%, rgba(6,10,20,.66) 100%),
    linear-gradient(180deg, rgba(8,13,22,.82) 0%, rgba(8,13,22,.04) 28%, rgba(8,13,22,.46) 76%, var(--bg) 100%);}

.hero-inner{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;}

.hero-kicker{font-size:clamp(10px,1.2vw,12.5px);font-weight:900;letter-spacing:.26em;text-transform:uppercase;
  color:var(--sky);margin-bottom:clamp(14px,2.4vw,26px);text-shadow:0 2px 10px rgba(0,0,0,.9);}

/* --- il marchio: mai tradotto --- */
.wordmark{line-height:.86;margin-bottom:clamp(12px,2vw,20px);
  filter:drop-shadow(0 6px 0 rgba(48,26,10,.5)) drop-shadow(0 14px 34px rgba(0,0,0,.7));
  animation:wmGlow 4.6s ease-in-out infinite;}
@keyframes wmGlow{
  0%,100%{filter:drop-shadow(0 6px 0 rgba(48,26,10,.5)) drop-shadow(0 14px 34px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(255,200,90,.18));}
  50%    {filter:drop-shadow(0 6px 0 rgba(48,26,10,.5)) drop-shadow(0 14px 34px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(255,214,120,.45));}}
.wordmark span{display:block;font-weight:900;paint-order:stroke fill;}
/* ⚠ IL CONTORNO VA IN `em`, NON IN PIXEL.
   A 140 px un contorno da 4 px è il tratto giusto; sullo stesso testo a
   30 px — cioè il logo italiano su un telefono — sono 4 px addosso a
   lettere alte 30, e il contorno si mangia le pance delle lettere: si
   legge una macchia scura al posto del titolo. Legandolo al corpo il
   tratto resta proporzionato a qualunque misura. */
.wm-1{font-size:clamp(46px,11.4vw,140px);letter-spacing:1px;
  background:linear-gradient(180deg,#fff6dc 0%,#ffc94e 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;-webkit-text-stroke:.032em #46280e;}
.wm-2{font-size:clamp(40px,10vw,124px);letter-spacing:10px;margin-top:-.04em;
  background:linear-gradient(180deg,#eaf6ff 0%,#6fc9ff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;-webkit-text-stroke:.030em #1e3a7a;}

/* «I RAGAZZUOLI DEL PASCOLO» sono ventitré caratteri contro gli undici di
   MEADOW KIDS: alle misure inglesi sfonderebbe lo schermo. Stessi colori,
   stessi contorni, corpo e spaziatura tarati sulla riga più lunga. */
/* Misurato: a 1280 px «I RAGAZZUOLI» e' largo 7,2 volte il suo corpo, e
   nell'hero ci sono 1225 px utili. Alla prima taratura (7,1vw) il logo
   italiano ne occupava 656 su 1225 — piu' PICCOLO dell'inglese, che a
   corpo pieno ne occupa 681, e si vedeva. A 11,4vw con tetto a 130 px ne
   occupa 937, cioe' il 73%: la stessa presenza dell'inglese, non un
   ripiego. La spaziatura della seconda riga va in `em`, se no a 34 px
   sarebbero cinque pixel fra una lettera e l'altra. */
[data-lang="it"] .wm-1{font-size:clamp(34px,11.4vw,130px);letter-spacing:0;}
[data-lang="it"] .wm-2{font-size:clamp(26px,8.7vw,100px);letter-spacing:.05em;}

.hero-tag{font-size:clamp(16px,2.9vw,32px);font-weight:900;letter-spacing:.5px;
  color:var(--ink);text-shadow:0 3px 0 rgba(8,13,22,.9), 0 6px 22px rgba(0,0,0,.8);
  margin-bottom:clamp(22px,3.6vw,38px);}

.hero-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;}
.cta-dot{color:var(--gold);font-size:26px;font-weight:900;opacity:.6;}

/* In basso a destra: in alto a sinistra finiva addosso al marchio, che è
   la cosa più larga della pagina. */
.hero-live{position:absolute;right:clamp(14px,3vw,34px);bottom:54px;z-index:5;
  display:flex;align-items:center;gap:8px;padding:6px 13px;border-radius:20px;
  background:rgba(8,13,22,.72);border:2px solid rgba(255,77,90,.5);
  font-size:10.5px;font-weight:900;letter-spacing:.2em;color:#ffd0d4;
  opacity:0;transition:opacity .5s;}
.hero-live.on{opacity:1;}
.hero-live .dot{width:8px;height:8px;border-radius:50%;background:var(--danger);
  box-shadow:0 0 10px var(--danger);animation:pulseDot 1.5s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.7);}}

.hero-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:10px;font-weight:900;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint);}
.hero-scroll i{font-style:normal;font-size:18px;color:var(--gold);animation:arrow 1.8s ease-in-out infinite;}
@keyframes arrow{0%,100%{transform:translateY(0);opacity:.5;}50%{transform:translateY(7px);opacity:1;}}

/* nastro di merendine e alieni che scorre a fondo hero */
.hero-strip{position:absolute;left:0;right:0;bottom:0;height:34px;z-index:4;overflow:hidden;
  background:linear-gradient(180deg,#1b2b1d,#122016);border-top:3px solid var(--ol);
  border-bottom:3px solid var(--ol);}
.hero-strip-run{display:flex;gap:26px;white-space:nowrap;font-size:17px;line-height:34px;
  animation:strip 26s linear infinite;will-change:transform;}
.hero-strip-run span{flex:none;opacity:.8;}
@keyframes strip{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* --- la scena disegnata: sprite veri su un prato, quando il gioco vivo
       non è il caso (telefono, movimento ridotto, iframe che non parte) --- */
.hero-fb{position:absolute;inset:0;overflow:hidden;}
.hero-fb-sky{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 22%, rgba(127,196,232,.16), transparent 68%),
    radial-gradient(ellipse 120% 60% at 50% 100%, rgba(47,122,60,.5), transparent 70%),
    linear-gradient(180deg,#0e1a2e,#0a1018);}
.hero-fb-grass{position:absolute;left:-4%;right:-4%;bottom:-2%;height:38%;border-radius:44% 44% 0 0;z-index:1;
  background:linear-gradient(180deg,var(--grass-dk),#1e5a2a);
  box-shadow:inset 0 6px 0 rgba(107,191,89,.5);}
.hero-fb-grass::after{content:'';position:absolute;inset:0;opacity:.35;
  background:repeating-linear-gradient(94deg, rgba(255,255,255,.05) 0 3px, transparent 3px 15px);}
/* ⚠ La compagnia va SOPRA il prato. Nel documento la collina viene dopo,
   quindi senza z-index copriva tutti quelli disegnati in basso: sul
   telefono restavano un disco volante e una collina vuota, e il
   ragazzuolo — il soggetto della scena — non si vedeva affatto. */
.hero-fb-cast{position:absolute;inset:0;z-index:2;}
.hero-fb .fb{position:absolute;display:block;}
.hero-fb .fb canvas{width:100%;height:100%;}
.hero-fb .fb-k {width:clamp(150px,20vw,260px);aspect-ratio:1;left:50%;bottom:14%;transform:translateX(-50%);
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.6));animation:kidIdle 3.2s ease-in-out infinite;}
.hero-fb .fb-e1{width:clamp(64px,8vw,108px);aspect-ratio:1;left:12%;top:26%;animation:foeBob 3.4s ease-in-out infinite;}
.hero-fb .fb-e2{width:clamp(54px,6.4vw,86px);aspect-ratio:1;right:16%;top:20%;animation:foeBob 2.7s ease-in-out infinite;}
.hero-fb .fb-e3{width:clamp(62px,7.4vw,100px);aspect-ratio:1;right:9%;bottom:22%;animation:foeBob 3.9s ease-in-out infinite;}
.hero-fb .fb-e4{width:clamp(48px,5.6vw,76px);aspect-ratio:1;left:22%;bottom:26%;animation:foeBob 3.1s ease-in-out infinite;}
/* Sul telefono la colonna di testo occupa tutta la fascia centrale, e il
   ragazzuolo al centro finiva NASCOSTO dietro il pulsante GIOCA ORA: nella
   scena restavano un disco volante e una collina. Qui la compagnia si
   sposta agli angoli bassi, sotto i pulsanti, dove si vede. */
@media (max-width:620px){
  .hero-fb .fb-e2,.hero-fb .fb-e4{display:none;}
  .hero-fb .fb-k {width:104px;left:23%;bottom:4%;}
  .hero-fb .fb-e1{width:60px;left:7%;top:20%;}
  .hero-fb .fb-e3{width:64px;right:9%;bottom:7%;}
}

/* ==================================================================
   SEZIONI
   ================================================================== */
.sec{position:relative;z-index:2;padding:clamp(64px,9vw,130px) 0;}
.sec::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;}

/* comparsa alla prima inquadratura */
.rise{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease), transform .6s var(--ease);}
.rise.in{opacity:1;transform:none;}

/* --------------------------------------------------------- TRAILER */
.sec-trailer{text-align:center;}
.sec-trailer .eyebrow{justify-content:center;}
.sec-trailer .h2{margin-inline:auto;text-align:center;max-width:18ch;}
.sec-trailer .lede{margin-inline:auto;text-align:center;margin-bottom:clamp(28px,4vw,46px);}

.tv{position:relative;max-width:1000px;margin-inline:auto;}
.tv-frame{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/9;
  background:#05080f;border:5px solid var(--ol);
  box-shadow:0 0 0 3px rgba(255,207,90,.28), 0 26px 70px rgba(0,0,0,.72), 0 0 90px rgba(107,191,89,.10);}
.tv-frame video{width:100%;height:100%;object-fit:cover;background:#05080f;}
/* IL FONDO DEL TELEVISORE — una scena, non un gradiente.
   Sta SOTTO il pulsante: nell'ordine del documento viene dopo, quindi
   senza z-index si mangiava la pastiglia dorata del play. */
.tv-poster{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
  transition:opacity .4s;}
.tvp-sky{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 18%, rgba(127,196,232,.16), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(47,122,60,.42), transparent 72%),
    linear-gradient(180deg,#0e1a2e 0%,#101d2e 45%,#0a1018 100%);}

/* il prato su cui stanno i ragazzuoli */
.tvp-grass{position:absolute;left:-6%;right:-6%;bottom:-8%;height:34%;border-radius:46% 46% 0 0;
  background:linear-gradient(180deg,#2a6b35,#153f1f);
  box-shadow:inset 0 5px 0 rgba(107,191,89,.34);}
.tvp-grass::after{content:'';position:absolute;inset:0;opacity:.3;
  background:repeating-linear-gradient(93deg, rgba(255,255,255,.05) 0 3px, transparent 3px 16px);}

.tv-poster [data-sprite]{position:absolute;display:block;}
.tv-poster [data-sprite] canvas{width:100%;height:100%;}

/* il boss incombe dietro a tutto, sbiadito: è profondità, non un soggetto */
.tvp-boss{height:52%;aspect-ratio:1;left:50%;top:3%;translate:-50% 0;
  opacity:.30;filter:blur(1px) drop-shadow(0 10px 26px rgba(0,0,0,.6));
  animation:bossFloat 7s ease-in-out infinite;}

/* le orde, in mezzo */
.tvp-foe{filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));}
.tvp-foe.f1{height:15%;aspect-ratio:1;left:9%;top:13%;animation:foeBob 3.4s ease-in-out infinite;}
.tvp-foe.f2{height:13%;aspect-ratio:1;right:11%;top:10%;animation:foeBob 2.9s ease-in-out infinite;}
.tvp-foe.f3{height:14%;aspect-ratio:1;left:17%;top:40%;animation:foeBob 3.8s ease-in-out infinite;}
.tvp-foe.f4{height:12%;aspect-ratio:1;right:19%;top:37%;animation:foeBob 3.1s ease-in-out infinite;}
.tvp-foe.f5{height:18%;aspect-ratio:1;right:4%;bottom:22%;animation:foeBob 4.2s ease-in-out infinite;}
.tvp-foe.f6{height:14%;aspect-ratio:1;left:3%;bottom:20%;animation:foeBob 3.5s ease-in-out infinite;}

/* I tre ragazzuoli davanti: Vinz al centro e più grande, è il volto del
   gioco. ⚠ Misurati sull'ALTEZZA del riquadro, non sulla larghezza: in un
   16:9 un 21% di larghezza diventa un 37% di altezza, e le teste
   finivano addosso alla scritta «AVVIA IL TRAILER». */
.tvp-kid{filter:drop-shadow(0 14px 18px rgba(0,0,0,.6));}
.tvp-kid.k1{height:27%;aspect-ratio:1;left:27%;bottom:9%;animation:kidIdle 3.6s ease-in-out infinite;}
.tvp-kid.k2{height:33%;aspect-ratio:1;left:50%;bottom:5%;translate:-50% 0;
  animation:kidIdle 3.1s ease-in-out infinite;}
.tvp-kid.k3{height:27%;aspect-ratio:1;right:26%;bottom:9%;animation:kidIdle 4s ease-in-out infinite;}

/* Vignettatura: la pastiglia dorata e le due righe di scritta devono
   staccarsi dalla scena. Il centro si scurisce, e i bordi pure — così
   sembra un fotogramma e non un collage. */
.tvp-vign{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 40% 40% at 50% 42%, rgba(6,10,20,.72), rgba(6,10,20,.20) 68%, transparent),
    radial-gradient(ellipse 85% 80% at 50% 50%, transparent 55%, rgba(6,10,20,.55) 100%);}

@media (max-width:620px){
  /* su schermo stretto la scena si affolla: restano il boss, i tre
     ragazzuoli e due nemici */
  .tvp-foe.f3,.tvp-foe.f4,.tvp-foe.f6{display:none;}
  .tvp-kid.k1{left:20%;} .tvp-kid.k3{right:19%;}
}
.tv.playing .tv-poster,.tv.playing .tv-play{opacity:0;pointer-events:none;}

/* Il gruppo del play sta un po' sopra il centro esatto: al centro cadeva
   sulle teste dei ragazzuoli della scena dietro. */
.tv-play{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding-bottom:13%;
  transition:opacity .35s, transform .18s var(--ease);}
/* La pastiglia è l'elemento vero e il triangolo è il suo pseudo: così
   restano centrati per costruzione invece che per aggiustamenti a mano. */
.tv-tri{width:clamp(76px,10vw,104px);aspect-ratio:1;border-radius:50%;flex:none;
  display:grid;place-items:center;margin-bottom:clamp(16px,2.4vw,24px);
  background:linear-gradient(180deg,#ffe089,#ffb63f);
  box-shadow:0 8px 0 #9a5a10, 0 14px 40px rgba(0,0,0,.6);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);}
.tv-tri::after{content:'';width:0;height:0;border-style:solid;
  border-width:17px 0 17px 28px;border-color:transparent transparent transparent #1a1206;
  margin-left:7px;}
.tv-play:hover .tv-tri{transform:scale(1.07);}
.tv-play:active .tv-tri{transform:translateY(5px) scale(1.02);box-shadow:0 3px 0 #9a5a10, 0 6px 18px rgba(0,0,0,.6);}
.tv-label{font-weight:900;font-size:clamp(13px,1.8vw,18px);letter-spacing:2px;color:var(--ink);
  text-shadow:0 3px 0 rgba(8,13,22,.9);}
.tv-sub{font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);}

.tv-legs{display:flex;justify-content:center;gap:min(48vw,420px);margin-top:-2px;}
.tv-legs i{width:16px;height:26px;background:var(--ol);border-radius:0 0 8px 8px;
  transform:rotate(8deg);transform-origin:top center;}
.tv-legs i:first-child{transform:rotate(-8deg);}

/* -------------------------------------------------------- FEATURES */
.sec-features::before{background:radial-gradient(ellipse 80% 50% at 50% 0%, rgba(107,191,89,.07), transparent 70%);}
/* Otto caratteristiche: quattro e quattro. Con `auto-fit` uscivano cinque
   sopra e tre sotto, che è la riga spaiata tipica dei modelli generici. */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,18px);
  margin-top:clamp(28px,4vw,44px);}
.feat{position:relative;padding:22px 20px 20px;border-radius:18px;
  background:linear-gradient(180deg, rgba(24,34,54,.94), rgba(14,21,35,.94));
  border:3px solid var(--ol);
  box-shadow:0 6px 0 rgba(6,10,18,.85), 0 14px 34px rgba(0,0,0,.45);
  transform:rotate(var(--tilt,0deg));
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;}
.feat::after{content:'';position:absolute;inset:3px;border-radius:13px;border:2px solid var(--fc,var(--line));
  opacity:.5;pointer-events:none;transition:opacity .22s;}
.feat:hover{transform:rotate(var(--tilt,0deg)) translateY(-7px) scale(1.02);
  box-shadow:0 12px 0 rgba(6,10,18,.85), 0 22px 46px rgba(0,0,0,.5);}
.feat:hover::after{opacity:1;}
.feat-ic{font-size:30px;display:block;margin-bottom:10px;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));
  transition:transform .28s var(--ease);}
.feat:hover .feat-ic{transform:scale(1.18) rotate(-8deg);}
.feat b{display:block;font-size:clamp(16px,2vw,21px);font-weight:900;letter-spacing:.3px;
  color:var(--fc,var(--gold));margin-bottom:6px;}
.feat em{font-style:normal;font-size:13.5px;line-height:1.5;color:var(--ink-dim);}

.f-kids{--fc:#46bd46;} .f-weapons{--fc:#ffd86b;} .f-hordes{--fc:#8fe04a;} .f-builds{--fc:#7fdcff;}
.f-boss{--fc:#ff8a5a;} .f-prin{--fc:#9b7bff;} .f-coop{--fc:#6effb0;} .f-twitch{--fc:#a970ff;}

/* le sedici armi, in fila */
.armory{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:clamp(26px,3.4vw,40px);}
.arm{display:flex;align-items:center;gap:7px;padding:7px 13px 7px 9px;border-radius:30px;
  background:rgba(16,24,38,.88);border:2px solid var(--ol);
  box-shadow:0 3px 0 rgba(6,10,18,.8);
  font-size:12px;font-weight:800;color:var(--ink-dim);
  transition:transform .18s var(--ease), color .18s, border-color .18s;}
.arm i{font-style:normal;font-size:16px;}
.arm b{color:var(--ac,var(--gold));font-weight:900;}
.arm span{opacity:.55;font-size:11px;}
.arm:hover{transform:translateY(-4px) rotate(-1.5deg);color:var(--ink);border-color:var(--ac,var(--gold));}

/* ------------------------------------------------------ IL PRESIDE */
.sec-principal{overflow:hidden;}
.sec-principal::before{
  background:
    radial-gradient(ellipse 60% 60% at 78% 40%, rgba(155,123,255,.16), transparent 68%),
    linear-gradient(180deg, transparent, rgba(20,12,42,.55) 40%, transparent);}
.prin-glow{position:absolute;right:-10%;top:12%;width:min(62vw,720px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgba(155,123,255,.20), transparent 62%);
  filter:blur(24px);animation:prinBreath 7s ease-in-out infinite;pointer-events:none;}
@keyframes prinBreath{0%,100%{opacity:.65;transform:scale(1);}50%{opacity:1;transform:scale(1.12);}}

.prin-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,60px);align-items:center;}

.prin-steps{margin-top:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:2px;}
.prin-steps li{display:flex;gap:16px;align-items:flex-start;padding:13px 14px;border-radius:14px;
  transition:background .2s;}
.prin-steps li:hover{background:rgba(155,123,255,.09);}
.prin-steps b{font-size:clamp(20px,2.6vw,30px);font-weight:900;color:var(--violet);opacity:.55;
  line-height:1;min-width:44px;}
.prin-steps strong{display:block;font-size:clamp(13px,1.6vw,16px);font-weight:900;letter-spacing:1.4px;color:var(--ink);}
.prin-steps em{font-style:normal;display:block;font-size:13px;color:var(--ink-faint);margin-top:3px;}

.prin-side{display:flex;flex-direction:column;align-items:center;gap:18px;}
.prin-portrait{position:relative;width:min(100%,380px);aspect-ratio:1;display:grid;place-items:center;}
.prin-portrait::before{content:'';position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle, rgba(155,123,255,.28), transparent 66%);
  animation:prinBreath 4.4s ease-in-out infinite;}
.prin-sprite{position:relative;width:100%;height:100%;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.6));
  animation:prinFloat 5.6s ease-in-out infinite;}
@keyframes prinFloat{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-14px) rotate(1deg);}}
.prin-eye{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 40%, rgba(255,77,90,.12), transparent 40%);
  animation:eyeScan 5s linear infinite;}
@keyframes eyeScan{0%,100%{opacity:0;}45%{opacity:0;}50%{opacity:1;}55%{opacity:0;}}

/* l'altoparlante */
.pa{width:min(100%,440px);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg, rgba(28,20,54,.96), rgba(16,12,34,.96));
  border:3px solid var(--ol);box-shadow:0 6px 0 rgba(6,10,18,.8), 0 16px 40px rgba(0,0,0,.5);}
.pa-head{display:flex;align-items:center;gap:8px;padding:9px 13px;
  background:rgba(155,123,255,.16);border-bottom:2px solid rgba(155,123,255,.3);
  font-size:10px;font-weight:900;letter-spacing:.24em;color:#d9ccff;}
.pa-ic{font-style:normal;font-size:14px;}
.pa-led{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--danger);
  box-shadow:0 0 10px var(--danger);animation:pulseDot 1.4s ease-in-out infinite;}
.pa-line{padding:18px 16px;min-height:5.4em;display:flex;align-items:center;
  font-size:clamp(14px,1.8vw,18px);font-weight:700;line-height:1.45;color:#efe8ff;}
.pa-line::after{content:'';width:9px;height:1.2em;margin-left:3px;background:var(--violet);
  animation:caret .9s steps(1) infinite;flex:none;}
@keyframes caret{0%,49%{opacity:1;}50%,100%{opacity:0;}}

.prin-final{font-size:clamp(12.5px,1.5vw,15px);font-weight:900;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--danger);text-align:center;text-shadow:0 2px 12px rgba(255,77,90,.4);}

/* ----------------------------------------------------- TWITCH MODE */
.sec-twitch{overflow:hidden;}
.tw-bg{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 60% at 50% 30%, rgba(169,112,255,.20), transparent 65%),
    linear-gradient(180deg, transparent, rgba(28,12,52,.6) 45%, transparent);}
.tw-bg::after{content:'';position:absolute;inset:0;opacity:.35;
  background:repeating-linear-gradient(115deg, rgba(169,112,255,.07) 0 2px, transparent 2px 22px);
  animation:twSlide 12s linear infinite;}
@keyframes twSlide{from{background-position:0 0;}to{background-position:220px 0;}}

.sec-twitch .lede{max-width:70ch;}
.tw-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,40px);
  align-items:start;margin-top:clamp(30px,4vw,48px);}

.tw-stage{display:grid;grid-template-columns:1fr 270px;gap:14px;}
.tw-screen{border-radius:18px;padding:22px;position:relative;overflow:hidden;
  background:linear-gradient(180deg, rgba(26,16,52,.97), rgba(14,10,28,.97));
  border:3px solid var(--ol);box-shadow:0 8px 0 rgba(6,10,18,.8), 0 20px 50px rgba(0,0,0,.55);}
.tw-title{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:900;letter-spacing:.2em;
  color:#dcc8ff;margin-bottom:15px;}
.tw-title i{font-style:normal;font-size:13px;}

.tw-opts{display:flex;flex-direction:column;gap:9px;}
.tw-opt{display:flex;align-items:center;gap:13px;padding:15px 16px;border-radius:14px;position:relative;
  background:rgba(255,255,255,.045);border:2px solid rgba(255,255,255,.09);overflow:hidden;
  transition:border-color .3s, background .3s;}
.tw-opt .n{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;z-index:2;
  font-size:15px;font-weight:900;background:rgba(169,112,255,.28);color:#e6d8ff;}
.tw-opt .lab{font-size:clamp(14px,1.6vw,17px);font-weight:900;color:var(--ink);flex:1;z-index:2;}
.tw-opt .pct{font-size:14px;font-weight:900;color:var(--ink-faint);z-index:2;}
.tw-opt .fill{position:absolute;left:0;top:0;bottom:0;width:0;z-index:1;
  background:linear-gradient(90deg, rgba(169,112,255,.42), rgba(169,112,255,.12));
  transition:width .5s var(--ease);}
.tw-opt.gift .n{background:rgba(107,255,176,.25);color:#b6ffdc;}
.tw-opt.gift .fill{background:linear-gradient(90deg, rgba(110,255,176,.36), rgba(110,255,176,.10));}
.tw-opt.win{border-color:var(--gold);background:rgba(255,207,90,.08);}
.tw-opt.win .lab{color:var(--gold-hi);}

.tw-timer{display:flex;align-items:center;gap:10px;margin-top:14px;}
.tw-timer i{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;position:relative;}
.tw-timer i::after{content:'';position:absolute;inset:0;width:var(--p,100%);border-radius:4px;
  background:linear-gradient(90deg,#a970ff,#e0c8ff);transition:width .25s linear;}
.tw-timer span{font-size:10.5px;font-weight:900;letter-spacing:.16em;color:var(--ink-faint);min-width:78px;text-align:right;}

.tw-result{margin-top:14px;padding:13px 15px;border-radius:13px;
  background:rgba(255,207,90,.1);border:2px solid rgba(255,207,90,.35);
  display:flex;align-items:center;gap:11px;opacity:0;transform:translateY(6px);
  transition:opacity .3s, transform .3s;}
.tw-result.on{opacity:1;transform:none;}
.tw-result::before{content:'▸';color:var(--gold);font-weight:900;font-size:16px;
  animation:nudge 1s ease-in-out infinite;}
@keyframes nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(4px);}}
.tw-result b{font-size:10px;font-weight:900;letter-spacing:.18em;color:var(--gold);white-space:nowrap;}
.tw-result span{font-size:clamp(13px,1.5vw,16px);font-weight:900;color:var(--ink);}

.tw-chat{border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  background:rgba(12,10,22,.95);border:3px solid var(--ol);
  box-shadow:0 8px 0 rgba(6,10,18,.8), 0 16px 40px rgba(0,0,0,.5);}
.tw-chat-head{display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:rgba(169,112,255,.2);border-bottom:2px solid rgba(169,112,255,.3);
  font-size:10px;font-weight:900;letter-spacing:.2em;color:#dcc8ff;}
.tw-chat-list{flex:1;padding:10px;display:flex;flex-direction:column;gap:7px;justify-content:flex-end;
  min-height:300px;overflow:hidden;}
.tw-chat-list li{font-size:12.5px;line-height:1.35;color:var(--ink-dim);
  animation:chatIn .3s var(--ease);}
.tw-chat-list li b{color:var(--u,#a970ff);font-weight:900;}
@keyframes chatIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.tw-rules{display:flex;flex-direction:column;gap:11px;}
.tw-rules li{padding:15px 16px;border-radius:15px;position:relative;
  background:rgba(16,24,38,.86);border:3px solid var(--ol);border-left-width:7px;
  border-left-color:var(--twitch);
  box-shadow:0 5px 0 rgba(6,10,18,.75);
  transition:transform .2s var(--ease);}
.tw-rules li:hover{transform:translateX(6px);}
.tw-rules li.good{border-left-color:#6effb0;}
.tw-rules li.elite{border-left-color:var(--gold);}
.tw-rules b{display:block;font-size:12px;font-weight:900;letter-spacing:1.3px;color:var(--ink);margin-bottom:5px;}
.tw-rules li.good b{color:#8dffc6;} .tw-rules li.elite b{color:var(--gold-hi);}
.tw-rules em{font-style:normal;font-size:13px;line-height:1.5;color:var(--ink-dim);}

.tw-foot{margin-top:26px;font-size:12.5px;color:var(--ink-faint);text-align:center;
  padding-top:18px;border-top:2px solid rgba(44,63,99,.5);}

/* ------------------------------------------------------------ CO-OP */
.sec-coop::before{background:radial-gradient(ellipse 70% 60% at 60% 50%, rgba(107,191,89,.09), transparent 70%);}
.coop-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center;}

.coop-keys{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;}
.keycap{padding:9px 16px;border-radius:11px;background:linear-gradient(180deg,#f2f6ff,#c3d0e8);
  color:#16203a;font-size:12.5px;font-weight:900;letter-spacing:1px;
  box-shadow:0 5px 0 #6c7c99, 0 8px 18px rgba(0,0,0,.4);}
.keycap.p2{background:linear-gradient(180deg,#ffe089,#ffb63f);box-shadow:0 5px 0 #9a5a10, 0 8px 18px rgba(0,0,0,.4);}
.keypad{font-size:12px;font-weight:800;color:var(--ink-faint);letter-spacing:.6px;}
.coop-revive{display:flex;align-items:center;gap:9px;margin-top:20px;font-size:13.5px;font-weight:700;color:#a8f0c8;}
.coop-revive i{font-style:normal;font-size:17px;animation:bob 2.2s ease-in-out infinite;}

.coop-stage{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,3vw,50px);
  padding:clamp(20px,4vw,44px) 18px 74px;border-radius:24px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(107,191,89,.20), transparent 70%),
    linear-gradient(180deg, rgba(16,24,38,.5), rgba(20,50,28,.55));
  border:3px solid var(--ol);box-shadow:0 8px 0 rgba(6,10,18,.7), 0 20px 50px rgba(0,0,0,.5);overflow:hidden;}
.coop-floor{position:absolute;left:0;right:0;bottom:0;height:44%;
  background:linear-gradient(180deg, transparent, rgba(47,122,60,.55) 60%, rgba(30,86,42,.8));}
.coop-floor::after{content:'';position:absolute;inset:0;opacity:.4;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 3px, transparent 3px 16px);}

.coop-kid{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;
  width:min(42%,220px);}
.coop-kid .coop-sprite{width:100%;aspect-ratio:1;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.55));}
.coop-kid.k1{animation:coopBobA 3.1s ease-in-out infinite;}
.coop-kid.k2{animation:coopBobB 3.6s ease-in-out infinite;}
@keyframes coopBobA{0%,100%{transform:translateY(0) rotate(-1.5deg);}50%{transform:translateY(-11px) rotate(1.5deg);}}
@keyframes coopBobB{0%,100%{transform:translateY(-8px) rotate(2deg);}50%{transform:translateY(2px) rotate(-2deg);}}
.coop-tag{padding:4px 12px;border-radius:20px;font-size:10.5px;font-weight:900;letter-spacing:.2em;
  background:linear-gradient(180deg,#f2f6ff,#c3d0e8);color:#16203a;box-shadow:0 3px 0 #6c7c99;}
.coop-tag.p2{background:linear-gradient(180deg,#ffe089,#ffb63f);box-shadow:0 3px 0 #9a5a10;}
.coop-build{display:flex;gap:5px;}
.coop-build i{font-style:normal;font-size:15px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:rgba(8,13,22,.8);border:2px solid var(--line);}
.coop-pick{position:absolute;left:0;right:0;bottom:16px;text-align:center;z-index:3;
  font-size:12px;font-weight:800;letter-spacing:.5px;color:#bfe0c6;}

/* ------------------------------------------------------ RAGAZZUOLI */
.sec-kids::before{background:radial-gradient(ellipse 90% 50% at 50% 10%, rgba(255,207,90,.06), transparent 70%);}
/* Sei ragazzuoli: tre e tre. */
.kid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px);
  margin-top:clamp(28px,4vw,44px);}

.kid{position:relative;border-radius:20px;padding:0 20px 20px;overflow:hidden;
  background:linear-gradient(180deg, rgba(24,34,54,.95), rgba(13,20,33,.97));
  border:3px solid var(--ol);
  box-shadow:0 7px 0 rgba(6,10,18,.85), 0 16px 40px rgba(0,0,0,.45);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);}
.kid::before{content:'';position:absolute;left:0;right:0;top:0;height:130px;
  background:radial-gradient(ellipse 70% 100% at 50% 0%, var(--kc), transparent 72%);
  opacity:.28;transition:opacity .3s;}
.kid:hover{transform:translateY(-8px);box-shadow:0 14px 0 rgba(6,10,18,.85), 0 26px 56px rgba(0,0,0,.5);}
.kid:hover::before{opacity:.5;}

.kid-art{position:relative;width:100%;aspect-ratio:1/.92;display:grid;place-items:center;}
.kid-art .kid-sprite{width:88%;height:88%;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.6));
  animation:kidIdle 3.4s ease-in-out infinite;}
@keyframes kidIdle{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-9px) rotate(1deg);}}
.kid-art::after{content:'';position:absolute;bottom:6%;left:50%;transform:translateX(-50%);
  width:46%;height:12px;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(6px);}

.kid-diff{position:absolute;top:14px;right:14px;display:flex;gap:3px;z-index:2;}
.kid-diff i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16);}
.kid-diff i.on{background:var(--danger);box-shadow:0 0 8px rgba(255,77,90,.7);}

.kid-role{display:inline-block;padding:4px 11px;border-radius:16px;margin-bottom:8px;
  font-size:9.5px;font-weight:900;letter-spacing:.2em;
  background:color-mix(in srgb, var(--kc) 22%, transparent);
  color:var(--kc);border:2px solid color-mix(in srgb, var(--kc) 45%, transparent);}
.kid-name{font-size:clamp(22px,2.8vw,30px);font-weight:900;letter-spacing:.5px;line-height:1;
  color:var(--ink);margin-bottom:8px;}
.kid-quote{font-size:13px;font-style:italic;color:var(--kc);margin-bottom:12px;line-height:1.4;opacity:.95;}
.kid-blurb{font-size:13px;line-height:1.55;color:var(--ink-dim);margin-bottom:14px;}

.kid-row{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:12px;
  background:rgba(8,13,22,.55);border:2px solid rgba(44,63,99,.55);margin-bottom:8px;}
.kid-row .ic{font-size:17px;flex:none;line-height:1.2;}
.kid-row .tx{flex:1;min-width:0;}
.kid-row .lab{display:block;font-size:9px;font-weight:900;letter-spacing:.2em;color:var(--ink-faint);margin-bottom:3px;}
.kid-row .val{display:block;font-size:12.5px;font-weight:900;color:var(--ink);margin-bottom:2px;}
.kid-row .txt{display:block;font-size:11.5px;line-height:1.45;color:var(--ink-faint);}
.kid-row.ult{border-color:color-mix(in srgb, var(--kc) 40%, transparent);
  background:color-mix(in srgb, var(--kc) 9%, rgba(8,13,22,.55));}
.kid-row.ult .val{color:var(--kc);}

.kid-unlock{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;letter-spacing:.5px;
  color:var(--ink-faint);margin-top:10px;}
.kid-unlock i{font-style:normal;}
.kid-unlock.free{color:var(--grass);}

/* ------------------------------------------------------- INVASIONE
   La sezione si scalda mentre la si scorre: --chaos va da 0 a 1 e
   comanda allarme, sciame e vibrazione.                              */
.sec-invasion{overflow:hidden;--chaos:0;}
.sec-invasion::before{
  background:radial-gradient(ellipse 90% 60% at 50% 30%, rgba(255,77,90,calc(.05 + .13 * var(--chaos))), transparent 70%);}
.inv-alert{position:absolute;inset:0;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 clamp(60px,14vw,180px) rgba(255,77,90,calc(.10 + .30 * var(--chaos)));
  opacity:calc(.2 + .8 * var(--chaos));}
.inv-alert::after{content:'';position:absolute;inset:0;opacity:calc(.10 * var(--chaos));
  background:repeating-linear-gradient(180deg, rgba(255,77,90,.5) 0 2px, transparent 2px 5px);}

/* Lo sciame: entra man mano che si scende. L'opacità sta sul contenitore
   così l'animazione di ogni alieno resta libera di occuparsi solo della
   traiettoria. */
.inv-swarm{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
  opacity:calc(var(--chaos) * .85);transition:opacity .3s linear;}
.inv-swarm i{position:absolute;left:-8%;font-style:normal;font-size:var(--s,20px);
  will-change:transform;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));}
@keyframes drift{
  from{transform:translate3d(0,0,0) rotate(-8deg);}
  50% {transform:translate3d(58vw,-26px,0) rotate(10deg);}
  to  {transform:translate3d(118vw,0,0) rotate(-8deg);}}
.sec-invasion .wrap{transform:translate(calc(var(--sx,0) * 1px), calc(var(--sy,0) * 1px));}

/* Sedici nemici: otto e otto. */
.foes{display:grid;grid-template-columns:repeat(8,1fr);gap:11px;}
.foe{position:relative;border-radius:15px;padding:12px 12px 14px;text-align:center;overflow:hidden;
  background:linear-gradient(180deg, rgba(22,30,48,.92), rgba(12,18,30,.95));
  border:3px solid var(--ol);box-shadow:0 5px 0 rgba(6,10,18,.8);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);}
.foe::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 12%, var(--ec), transparent 70%);opacity:.2;transition:opacity .25s;}
.foe:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 11px 0 rgba(6,10,18,.8), 0 18px 34px rgba(0,0,0,.5);}
.foe:hover::before{opacity:.42;}
.foe-art{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center;margin-bottom:6px;}
.foe-art .foe-sprite{width:76%;height:76%;filter:drop-shadow(0 6px 9px rgba(0,0,0,.6));
  animation:foeBob var(--d,2.6s) ease-in-out infinite;}
@keyframes foeBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
/* «Ragazzuolo Indisciplinato» e «Drone Ricognitore» non stanno in una
   colonna da ottanta pixel: senza questo sbordavano dalla scheda. */
.foe-name{position:relative;font-size:12px;font-weight:900;line-height:1.2;color:var(--ink);margin-bottom:4px;
  overflow-wrap:anywhere;hyphens:auto;}
.foe-role{position:relative;display:inline-block;padding:2px 8px;border-radius:12px;
  font-size:8.5px;font-weight:900;letter-spacing:.14em;
  background:color-mix(in srgb, var(--ec) 20%, transparent);color:var(--ec);}
.foe-dex{position:absolute;inset:auto 0 0;padding:10px;font-size:11px;line-height:1.4;color:var(--ink);
  background:linear-gradient(180deg, rgba(8,13,22,.2), rgba(8,13,22,.97) 30%);
  transform:translateY(101%);transition:transform .26s var(--ease);}
.foe:hover .foe-dex,.foe:focus-within .foe-dex{transform:translateY(0);}

/* Otto boss: quattro e quattro, e il Preside chiude in fondo a destra. */
.bosses{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.boss{position:relative;border-radius:18px;padding:16px;overflow:hidden;
  background:linear-gradient(180deg, rgba(26,20,34,.95), rgba(12,10,20,.97));
  border:3px solid var(--ol);box-shadow:0 6px 0 rgba(6,10,18,.85), 0 14px 34px rgba(0,0,0,.45);
  transition:transform .24s var(--ease), box-shadow .24s var(--ease);}
.boss::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 6%, var(--bc), transparent 68%);opacity:.24;transition:opacity .3s;}
.boss:hover{transform:translateY(-9px) scale(1.02);
  box-shadow:0 15px 0 rgba(6,10,18,.85), 0 26px 54px rgba(0,0,0,.55);}
.boss:hover::before{opacity:.46;}
.boss-at{position:relative;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:14px;
  font-size:10px;font-weight:900;letter-spacing:.12em;
  background:rgba(8,13,22,.7);border:2px solid var(--bc);color:var(--bc);margin-bottom:10px;}
.boss-art{position:relative;width:100%;aspect-ratio:1/.86;display:grid;place-items:center;}
.boss-art .boss-sprite{width:84%;height:84%;filter:drop-shadow(0 12px 16px rgba(0,0,0,.65));
  animation:bossFloat var(--d,4.2s) ease-in-out infinite;}
@keyframes bossFloat{0%,100%{transform:translateY(0) rotate(-1.2deg);}50%{transform:translateY(-12px) rotate(1.2deg);}}
.boss-name{position:relative;font-size:clamp(14px,1.8vw,18px);font-weight:900;line-height:1.05;
  color:var(--bc);margin-bottom:5px;letter-spacing:.3px;}
.boss-title{position:relative;font-size:11.5px;font-style:italic;color:var(--ink-faint);margin-bottom:9px;line-height:1.35;}
.boss-dex{position:relative;font-size:12px;line-height:1.5;color:var(--ink-dim);}
.boss-line{position:relative;margin-top:10px;padding-top:9px;border-top:2px solid rgba(255,255,255,.08);
  font-size:12px;font-weight:800;font-style:italic;color:var(--bc);}
.boss.final{border-color:var(--violet);box-shadow:0 6px 0 rgba(6,10,18,.85), 0 0 44px rgba(155,123,255,.3);}
.boss.final::after{content:attr(data-final);position:absolute;top:14px;right:-30px;width:110px;
  transform:rotate(38deg);text-align:center;padding:4px 0;
  background:var(--violet);color:#140b28;font-size:9px;font-weight:900;letter-spacing:.2em;
  box-shadow:0 3px 10px rgba(0,0,0,.5);}

/* ------------------------------------------------------------- PLAY */
.sec-play{text-align:center;overflow:hidden;padding-block:clamp(80px,11vw,150px);}
.sec-play::before{background:
  radial-gradient(ellipse 70% 60% at 50% 55%, rgba(255,207,90,.14), transparent 68%),
  linear-gradient(180deg, transparent, rgba(30,60,34,.35));}
.play-rays{position:absolute;inset:-40% -10%;pointer-events:none;z-index:0;opacity:.16;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,207,90,.5) 0deg 5deg, transparent 5deg 15deg);
  animation:rays 44s linear infinite;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0%, transparent 62%);
  mask-image:radial-gradient(circle at 50% 50%, #000 0%, transparent 62%);}
@keyframes rays{to{transform:rotate(360deg);}}

.play-bell{font-size:clamp(42px,7vw,80px);margin-bottom:14px;display:inline-block;
  transform-origin:50% 12%;animation:ring 3.4s ease-in-out infinite;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));}
@keyframes ring{
  0%,72%,100%{transform:rotate(0);}
  76%{transform:rotate(16deg);} 80%{transform:rotate(-13deg);}
  84%{transform:rotate(9deg);}  88%{transform:rotate(-6deg);} 92%{transform:rotate(3deg);}}

.sec-play .btn-huge{margin-top:clamp(16px,2.6vw,28px);}
.play-note{margin-top:18px;font-size:13px;font-weight:800;letter-spacing:.6px;color:var(--ink-dim);}

.stores{margin-top:clamp(34px,5vw,60px);}
.stores-lab{display:block;font-size:10px;font-weight:900;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:14px;}
.stores-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.store{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:34px;
  background:rgba(16,24,38,.9);border:3px solid var(--ol);box-shadow:0 4px 0 rgba(6,10,18,.8);
  font-size:13px;font-weight:900;color:var(--ink-dim);transition:transform .18s var(--ease), color .18s, border-color .18s;}
/* Ogni marchio porta il suo colore; l'icona lo prende da `currentColor`,
   così basta una variabile per riga. */
.store-ic{width:20px;height:20px;flex:none;fill:var(--sc,currentColor);color:var(--sc,currentColor);
  transition:transform .2s var(--ease);}
/* il marchio GOG è un logotipo dentro una cornice, non un simbolo:
   gli serve qualche pixel in più per non ridursi a una macchia */
.store.gog .store-ic{width:23px;height:23px;}
.store:hover .store-ic{transform:scale(1.12) rotate(-4deg);}
.store.itch{--sc:#fa5c5c;}
.store.gog{--sc:#c86dd7;}
.store.android{--sc:#3ddc84;}
.store.ios{--sc:#e8f0ff;}
.store.live{color:var(--ink);border-color:var(--grass-dk);}
.store.live:hover{transform:translateY(-5px);color:var(--grass);border-color:var(--grass);}
.store.soon{opacity:.62;}
.store.soon em{font-style:normal;font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  padding:2px 7px;border-radius:10px;background:rgba(255,255,255,.09);color:var(--ink-faint);white-space:nowrap;}

/* ----------------------------------------------------------- FOOTER */
.foot{position:relative;z-index:2;padding:52px 0 64px;border-top:3px solid rgba(44,63,99,.5);
  background:linear-gradient(180deg, transparent, rgba(6,10,18,.9));}
.foot-in{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;}

.foot-mark{font-size:17px;font-weight:900;letter-spacing:.8px;color:var(--gold-hi);}
/* ⚠ Lo spazio è nel testo, non un margine: erano attaccate («MEADOWKIDS»),
   e un margine le avrebbe separate solo all'occhio — chi copia la riga si
   porta via lo stesso la parola appiccicata, e chi la ascolta pure. */
.foot-mark i{font-style:normal;color:var(--sky);}
/* la firma col titolo locale: in inglese la stringa è vuota e sparisce */
.foot-alt{font-size:12px;font-weight:800;letter-spacing:1.6px;color:var(--sky);opacity:.75;margin-top:-5px;}
.foot-alt:empty{display:none;}
.foot-tag{font-size:14px;color:var(--ink-dim);font-style:italic;}

/* il filo d'erba che separa il marchio dai crediti */
.foot-rule{width:min(200px,50%);height:3px;border-radius:2px;margin:12px 0 4px;
  background:linear-gradient(90deg,transparent,var(--grass-dk),var(--grass),var(--grass-dk),transparent);
  opacity:.6;}

/* LA FIRMA — tutta la riga è il collegamento alla posta */
.foot-made{display:inline-flex;align-items:center;gap:8px;padding:9px 17px;border-radius:30px;
  background:rgba(16,24,38,.9);border:3px solid var(--ol);box-shadow:0 4px 0 rgba(6,10,18,.8);
  font-size:13px;font-weight:900;color:var(--ink-dim);
  transition:transform .18s var(--ease), color .18s, border-color .18s;}
.foot-made:hover{transform:translateY(-4px);color:var(--ink);border-color:var(--grass-dk);}
.foot-made:active{transform:translateY(0);box-shadow:0 1px 0 rgba(6,10,18,.8);}
.foot-made:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px;}
.foot-flag{width:20px;height:auto;flex:none;display:block;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));transition:transform .2s var(--ease);}
.foot-made:hover .foot-flag{transform:rotate(-6deg) scale(1.08);}
/* la busta compare solo quando ci passi sopra: dice cosa succede a premere,
   senza stare lì a occupare spazio tutto il tempo */
.foot-env{font-style:normal;font-size:14px;max-width:0;opacity:0;overflow:hidden;
  transition:max-width .22s var(--ease), opacity .22s;}
.foot-made:hover .foot-env,.foot-made:focus-visible .foot-env{max-width:22px;opacity:1;}

.foot-rights{font-size:11.5px;color:var(--ink-faint);margin-top:6px;}
.foot-bell{display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:800;letter-spacing:.4px;color:var(--gold);opacity:.8;}
.foot-bell i{font-style:normal;font-size:13px;transform-origin:50% 12%;
  animation:ring 5.5s ease-in-out infinite;}

/* ==================================================================
   IL GIOCO, DENTRO IL SITO
   ================================================================== */
.player{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:#05080f;
  animation:playerIn .3s var(--ease);}
.player[hidden]{display:none;}
@keyframes playerIn{from{opacity:0;transform:scale(.985);}to{opacity:1;transform:none;}}
.player-bar{display:flex;align-items:center;gap:12px;padding:8px 12px;flex:none;
  background:rgba(10,16,28,.97);border-bottom:2px solid var(--line);}
.player-name{font-size:13px;font-weight:900;letter-spacing:.5px;color:var(--gold-hi);}
.player-name i{font-style:normal;color:var(--sky);}
.player-acts{margin-left:auto;display:flex;align-items:center;gap:7px;}
.player-b{padding:7px 13px;border-radius:20px;font-size:11.5px;font-weight:900;letter-spacing:.6px;
  color:#cfe0ff;background:rgba(44,58,92,.8);border:2px solid #3b5183;transition:filter .15s;}
.player-b:hover{filter:brightness(1.25);}
.player-b.close{padding:7px 12px;font-size:13px;background:rgba(255,77,90,.2);border-color:rgba(255,77,90,.5);color:#ffd0d4;}
.player-box{position:relative;flex:1;min-height:0;background:#0a1018;}
.player-box iframe{width:100%;height:100%;border:0;display:block;}
.player-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:#0a1018;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
  transition:opacity .4s;}
.player-load i{font-style:normal;font-size:48px;animation:bob 1.6s ease-in-out infinite;}
.player-load.off{opacity:0;pointer-events:none;}

body.playing{overflow:hidden;}

/* ==================================================================
   RESPONSIVE
   ================================================================== */
/* Le colonne scendono SOLO su numeri che dividono gli elementi, così non
   resta mai la riga spaiata da modello generico: 8→4→2 per i sedici
   nemici, 4→2 per gli otto boss e le otto caratteristiche, 3→2→1 per i
   sei ragazzuoli. È il motivo per cui non compaiono mai 5 o 6 colonne. */
@media (max-width:1080px){
  .hdr-nav a:nth-child(3),.hdr-nav a:nth-child(6){display:none;}
}
@media (max-width:1000px){
  /* la fila da otto si stringe: il testo si adegua prima delle colonne */
  .foe{padding:10px 9px 12px;}
  .foe-name{font-size:11px;}
  .foe-role{font-size:8px;padding:2px 6px;}
}
@media (max-width:980px){
  .kid-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:960px){
  .prin-grid,.coop-grid,.tw-grid{grid-template-columns:1fr;}
  /* ⚠ IL PRESIDE, IN COLONNA, ANDAVA LETTO AL CONTRARIO.
     A due colonne la faccia sta a destra e il testo a sinistra, e si
     leggono insieme. Incolonnando tutto, `.prin-side` portava sopra al
     testo anche l'ALTOPARLANTE e la riga «e alle 18:00 scende di
     persona»: cioè la battuta prima della domanda, e il finale prima
     dell'inizio. Il ritratto va bene che apra — una faccia è un buon
     attacco — ma quei due sono la conclusione e vanno dopo.
     `display:contents` scioglie la colonna e lascia mettere in fila i
     tre pezzi uno per uno. */
  .prin-side{display:contents;}
  .prin-portrait{order:1;width:min(74%,300px);margin-inline:auto;}
  .prin-copy{order:2;}
  .pa{order:3;margin-inline:auto;}
  .prin-final{order:4;}
  .prin-grid{row-gap:24px;}
  .tw-stage{grid-template-columns:1fr;}
  .tw-chat-list{min-height:150px;}
  .h2{max-width:none;}
  .feats{grid-template-columns:repeat(2,1fr);}
  .bosses{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:820px){
  .hdr-nav{display:none;}
  :root{--hdr-h:56px;}
  .foes{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:680px){
  .kid-grid{grid-template-columns:1fr;}
}
@media (max-width:620px){
  /* L'INTESTAZIONE NON CI STAVA. A 375 px: marchio 166 + gruppo destro 174
     + 16 di distanza = 356, in 351 disponibili. Sbordando non resta spazio
     libero, quindi `space-between` non ha niente da distribuire e i tre
     pezzi restano impilati a sinistra — che e' il difetto che si vedeva.

     ⚠ I pixel si prendono dal GRUPPO DESTRO, non dal marchio. Prima li
     avevo tolti rimpicciolendo 🌾 e MEADOW KIDS: funzionava, ma il marchio
     e' la cosa che il sito deve gridare, mentre lingua e pulsante sono
     comandi di servizio — e sul telefono il GIOCA grande sta comunque
     nell'hero due dita piu' sotto. Il marchio resta della sua misura. */
  .hdr{gap:10px;}
  .lang-b{padding:4px 8px;font-size:11px;letter-spacing:1px;}
  .lang{padding:2px;}
  .hdr-right{gap:8px;}
  .hdr-right .btn-sm{padding:8px 14px;font-size:11.5px;letter-spacing:1px;}

  .wrap{width:calc(100% - 28px);}
  .sec{padding:clamp(52px,12vw,80px) 0;}
  .hero{min-height:92svh;padding-bottom:74px;}
  .wm-2{letter-spacing:6px;}
  .hero-cta{gap:10px;flex-direction:column;width:100%;}
  .hero-cta .btn{width:100%;max-width:330px;}
  .cta-dot{display:none;}
  .hero-live{bottom:auto;top:calc(var(--hdr-h) + 8px);right:14px;}
  .feat{padding:16px 13px;}
  .feat b{font-size:15px;}
  .feat em{font-size:11.5px;}
  .foes{gap:8px;}
  .foe-dex{display:none;}
  .foe{padding:9px 8px 11px;}
  .bosses{gap:9px;}
  .boss{padding:11px;}
  /* A ruota libera le quattro pastiglie uscivano due, una e una: tre righe
     di cui due con un pezzo solo in mezzo, che sembra un errore. In due
     colonne fanno un blocco.
     E dentro la pastiglia il nome e l'etichetta vanno INCOLONNATI, non
     affiancati: «coming soon» è più lungo di «in arrivo», e in fila su
     una colonna da 168 px la versione inglese sbordava. */
  .stores-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
  .store{display:grid;grid-template-columns:auto 1fr;align-content:center;
    gap:2px 9px;padding:10px 12px;font-size:12px;text-align:left;}
  .store .store-ic{grid-row:1/-1;grid-column:1;align-self:center;width:19px;height:19px;}
  .store.gog .store-ic{width:21px;height:21px;}
  .store b{grid-column:2;}
  .store.soon em{grid-column:2;justify-self:start;font-size:8.5px;padding:1px 6px;letter-spacing:.08em;}
  .coop-stage{padding-bottom:64px;}
  .tv-legs{gap:60vw;}
  .prin-steps li{padding:10px 6px;gap:12px;}
  .prin-steps b{min-width:34px;}
  .h3{margin-top:44px;}
}
/* Sul telefono i boss restano in due colonne il più a lungo possibile:
   incolonnati uno sotto l'altro sono tre metri di scorrimento, e la fila
   di otto facce è metà del colpo d'occhio della sezione. */
@media (max-width:620px){
  .boss-art{aspect-ratio:1/.76;}
  .boss-title{font-size:10.5px;margin-bottom:7px;}
  .boss-dex{font-size:11px;}
  .boss-at{font-size:9px;padding:2px 8px;margin-bottom:8px;}
  .boss.final::after{top:11px;right:-34px;width:106px;font-size:8px;}
}
@media (max-width:359px){
  .bosses{grid-template-columns:1fr;}
  .foes{grid-template-columns:repeat(2,1fr);}
  /* Sotto i 360 (i telefoni piccoli, tipo SE) non basta piu' stringere i
     comandi: qui cede un po' anche il marchio, ma solo qui. */
  .hdr{gap:7px;}
  .hdr-mark{font-size:19px;}
  .hdr-name{font-size:14px;}
  .hdr-brand{gap:7px;}
  .lang-b{padding:4px 7px;font-size:10.5px;}
  .hdr-right .btn-sm{padding:7px 11px;font-size:11px;}
}

/* Schermi bassi e larghi (telefono orizzontale): l'hero non deve
   costringere a scorrere per vedere i due pulsanti. */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:calc(var(--hdr-h) + 16px);padding-bottom:56px;}
  .wm-1{font-size:clamp(34px,7vw,60px);} .wm-2{font-size:clamp(30px,6vw,52px);}
  .hero-scroll{display:none;}
}

/* ==================================================================
   COMFORT — chi ha chiesto meno movimento, meno movimento avrà.
   Il gioco ha quattro preset di comfort visivo; il sito ne rispetta
   l'equivalente di sistema.
   ================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.06s!important;}
  .rise{opacity:1;transform:none;}
  .hero-strip-run{animation:none;}
  .sec-invasion{--chaos:.25;}
  .sec-invasion .wrap{transform:none;}
}