:root{
  --bg:#060708; --bg2:#0B0D10; --panel:#0F1216; --line:#191E25; --line2:#272E38;
  --fg:#EDEFF2; --fg2:#98A1AE; --fg3:#59616D; --fg4:#3A414B;
  --red:#FF0000; --redg:rgba(255,0,0,.12); --gia:#D9A227;
  /* alone dietro il titolo dell'hero: il terreno del gioco puo' essere
     chiarissimo (sabbia) o quasi nero, e un titolo senza alone spariva
     in meta' delle inquadrature. Cambia col tema. */
  --halo:rgba(4,5,6,.92); --halo2:rgba(4,5,6,.55); --haloS:rgba(6,7,8,.42);
  --u1:14px; --u2:22px; --u3:34px; --u4:52px; --u5:78px; --u6:104px;
  --d:"Archivo",Helvetica,Arial,sans-serif;
  --m:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--d);font-size:16px;line-height:1.55;
 -webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--red);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.w{max-width:1300px;margin:0 auto;padding:0 var(--u3)}
@media(max-width:840px){.w{padding:0 var(--u2)}}
@media(max-width:560px){.w{padding:0 16px}:root{--u6:64px;--u5:52px;--u4:34px}}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line2)}
::-webkit-scrollbar-thumb:hover{background:var(--red)}

.mono{font-family:var(--m)}
.lbl{font-family:var(--m);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--fg3)}
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

/* ---------- chrome ---------- */
#prog{position:fixed;top:0;left:0;height:2px;background:var(--red);z-index:80;width:0}
.top{position:fixed;top:0;left:0;right:0;z-index:70;height:54px;
 background:rgba(6,7,8,.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.top .w{height:100%;display:flex;align-items:center;gap:var(--u2)}
.brand{font-weight:800;font-size:15px;letter-spacing:-.032em;font-variation-settings:"wdth" 88;
 white-space:nowrap;display:inline-block;color:var(--red);line-height:1}
.brand i{font-style:normal}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.tnav{display:flex;gap:1px;margin-left:auto}
.tnav a{font-family:var(--m);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
 color:var(--fg3);padding:8px 12px;transition:.16s;position:relative}
.tnav a:hover{color:var(--fg)}
.tnav a.act{color:var(--fg);background:var(--panel)}
.tnav a.act::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;background:var(--red)}
.tact{display:flex;align-items:center;gap:8px;margin-left:var(--u2)}
.tk,.lng{font-family:var(--m);font-size:10px;color:var(--fg3);border:1px solid var(--line2);
 padding:5px 9px;cursor:pointer;transition:.16s;white-space:nowrap;background:none}
.tk:hover,.lng:hover{border-color:var(--red);color:var(--red)}
.burg{display:none;background:none;border:1px solid var(--line2);color:var(--fg2);
 font-family:var(--m);font-size:10px;padding:5px 10px;cursor:pointer;letter-spacing:.12em}
@media(max-width:1000px){
  .tnav{display:none} .burg{display:block} .tact{margin-left:auto}
}
/* menu mobile a tutta pagina */
#mnu{position:fixed;inset:0;z-index:75;background:var(--bg);display:none;padding-top:54px}
#mnu.open{display:block}
#mnu .w{padding-top:var(--u3)}
#mnu a{display:block;font-weight:800;font-size:clamp(30px,9vw,54px);letter-spacing:-.045em;
 font-variation-settings:"wdth" 84;padding:11px 0;border-bottom:1px solid var(--line);
 text-transform:lowercase;transition:.18s;display:flex;align-items:baseline;gap:14px}
#mnu a:hover,#mnu a.act{color:var(--red)}
#mnu a em{font-family:var(--m);font-size:11px;color:var(--fg3);font-style:normal;letter-spacing:.14em}
#mnu .mf{margin-top:var(--u3);font-family:var(--m);font-size:10.5px;color:var(--fg3);line-height:2}

/* ---------- page shell ---------- */
main{padding-top:0}
.pg{display:none}
.pg.on{display:block;animation:fade .4s cubic-bezier(.2,.7,.3,1)}
/* Le sei pagine stanno nello stesso documento e finora era solo il router, a
   JS, a scegliere quale mostrare: al primo fotogramma, e per chi non esegue
   lo script, non se ne vedeva nessuna. Adesso la sceglie anche il CSS, dalla
   classe che il server mette sul body. Il router poi fa il resto. */
body.lp26-r-pill    .pg[data-p="/path"],
body.lp26-r-work    .pg[data-p="/work"],
body.lp26-r-writing .pg[data-p="/writing"],
body.lp26-r-about   .pg[data-p="/about"],
body.lp26-r-book    .pg[data-p="/book"]{display:block}
body.lp26-app:not([class*="lp26-r-"]) .pg[data-p="/"]{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* La riga sopra ogni sezione era larga quanto la finestra, mentre il
   contenuto sta dentro il margine di .w: sotto la carta d'identita' si
   vedeva la carta rientrata e poi un taglio da bordo a bordo. Ora la riga
   e' una riga finta, larga esattamente quanto la colonna del testo. */
section{position:relative;padding:var(--u6) 0;border-top:0}
section::before{content:"";position:absolute;top:0;height:1px;background:var(--line);
 left:max(var(--u3),calc((100vw - 1300px)/2 + var(--u3)));
 right:max(var(--u3),calc((100vw - 1300px)/2 + var(--u3)))}
section:first-child::before{display:none}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--u2);
 padding-bottom:var(--u2);border-bottom:1px solid var(--line);margin-bottom:var(--u4)}
.sn{font-family:var(--m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
h2{font-weight:800;font-size:clamp(28px,5vw,54px);letter-spacing:-.042em;line-height:.96;
 font-variation-settings:"wdth" 86;margin-top:10px}
.shr{font-family:var(--m);font-size:10.5px;color:var(--fg3);text-align:right;line-height:1.8;white-space:nowrap}
@media(max-width:800px){.shr{display:none}.sh{flex-direction:column;align-items:flex-start}}
.lead{font-size:18.5px;color:var(--fg2);max-width:66ch;margin-bottom:var(--u4);letter-spacing:-.012em}
.lead b{color:var(--fg);font-weight:600}

/* ---------- hero ---------- */
#hero{position:relative;height:100svh;min-height:620px;overflow:hidden}
/* width/height espliciti: <canvas> e' un elemento rimpiazzato, quindi con
   width:auto prende la sua dimensione INTRINSECA (l'attributo width, che
   three.js mette a lw*devicePixelRatio) e "right:0" viene ignorato. Su un
   telefono retina il canvas veniva quindi impaginato una volta e mezza piu'
   grande della finestra: la scena usciva a destra e in basso e la pillola
   finiva incastrata nell'angolo, apparentemente ferma. */
#gl{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%}
#hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:radial-gradient(ellipse 94% 76% at 50% 42%,transparent 18%,var(--bg) 90%);
 transition:opacity .5s}
/* la velatura del titolo: sale dal basso, non e' una macchia, e se ne va
   quando parte la partita */
#hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(180deg,transparent 4%,var(--haloS) 46%,var(--haloS) 78%,transparent 100%);
 transition:opacity .55s cubic-bezier(.2,.7,.3,1)}
body.playing #hero::before{opacity:0}
.hin{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;pointer-events:none}
.hlab{font-family:var(--m);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
 color:var(--red);margin-bottom:var(--u2);display:flex;align-items:center;gap:11px}
.hlab::before{content:"";width:32px;height:1px;background:var(--red)}
/* 08/09/2026. Qui c'era il nome alto fino a 164 px. Copriva la scena, era il
   terzo posto in cui compariva (marchio, <title>, dati strutturati) e non
   diceva niente che non fosse gia' scritto. L'H1 adesso e' la frase, che e'
   anche il titolo della pagina: per un motore di ricerca H1 e title finalmente
   coincidono invece di contraddirsi. */
h1.big{font-weight:900;font-size:clamp(31px,4.7vw,64px);line-height:.98;letter-spacing:-.038em;
 max-width:15ch;
 font-variation-settings:"wdth" 82;
 text-shadow:0 2px 5px var(--halo2)}
/* velo dietro al blocco di testo: non un rettangolo, una macchia morbida che
   segue la colonna sinistra e lascia respirare il gioco a destra */
/* «margin:0 auto» dentro un flex a colonna centra e blocca la larghezza: con
   il titolo corto il blocco finiva in mezzo alla scena. */
.hin>.w{position:relative;width:100%}
/* Niente piu' macchia nera dietro il titolo: era un alone, e si vedeva che
   era un alone. Al suo posto la scena stessa si abbassa di luce mentre non
   giochi — una velatura che sale dal basso, come la vignettatura che c'e'
   gia' — e sparisce nell'istante in cui premi. */
.hlab,.htag,.hrot{text-shadow:0 1px 2px var(--halo2)}
h1.big i{color:var(--red);font-style:normal}
h1.big .hbb{font-style:normal;color:var(--fg);position:relative;white-space:nowrap}
h1.big .hbb::after{content:"";position:absolute;left:0;right:0;bottom:.07em;height:.055em;
 background:var(--red)}
.htag{font-size:clamp(16px,2.2vw,25px);color:var(--fg2);max-width:26ch;margin-top:var(--u2);
 line-height:1.32;letter-spacing:-.018em}
.hrot{font-family:var(--m);font-size:11px;color:var(--fg3);margin-top:18px;letter-spacing:.09em;
 height:17px;display:flex;align-items:center;gap:9px}
.hrot b{color:var(--red);font-weight:500}
.hscroll{position:absolute;left:0;right:0;bottom:92px;z-index:3;pointer-events:none}
.hscroll span{font-family:var(--m);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--fg4)}
.hbot{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid var(--line);
 background:rgba(6,7,8,.7);backdrop-filter:blur(10px)}
.hbot .w{display:flex;flex-wrap:wrap;gap:0}
.hs{flex:1;min-width:120px;padding:18px 20px 19px;border-right:1px solid var(--line)}
.hs:first-child{padding-left:0}
.hs:last-child{border-right:0;padding-right:0}
.hs b{display:block;font-family:var(--m);font-size:23px;font-weight:700;letter-spacing:-.03em;
 font-variant-numeric:tabular-nums;line-height:1.05}
.hs em{color:var(--red);font-style:normal}
.hs span{font-family:var(--m);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;
 color:var(--fg3);display:block;margin-top:11px;line-height:1.45}
@media(max-width:820px){
 .hs{min-width:33.3%;border-right:0;padding:12px 14px 13px}
 .hs:first-child{padding-left:0} .hs span{margin-top:8px}
 .hscroll{display:none}}
@media(max-width:520px){.hs{min-width:50%}}

/* ---------- marquee ---------- */
.mq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
 overflow:hidden;background:var(--bg2);padding:15px 0;position:relative}
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,var(--bg2),transparent)}
.mq::after{right:0;background:linear-gradient(270deg,var(--bg2),transparent)}
.mqt{display:flex;gap:0;width:max-content;animation:slide 42s linear infinite}
.mq:hover .mqt{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mqi{font-family:var(--m);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--fg3);padding:0 var(--u3);white-space:nowrap;display:flex;align-items:center;gap:10px;
 border-right:1px solid var(--line);transition:color .2s}
.mqi:hover{color:var(--fg)}
.mqi s{width:4px;height:4px;background:var(--red);text-decoration:none;flex:none}

/* ---------- grids ---------- */
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}}
@media(max-width:620px){.g4,.g2{grid-template-columns:1fr}}
.cell{background:var(--bg);padding:26px 24px 30px;transition:background .25s}
.cell:hover{background:var(--panel)}
.cell dt{font-family:var(--m);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
 color:var(--fg3);line-height:1.6}
.cell dd{font-family:var(--m);font-size:36px;font-weight:700;letter-spacing:-.04em;margin:16px 0 12px;
 font-variant-numeric:tabular-nums;line-height:1}
.cell dd.sm{font-size:14.5px;letter-spacing:0;line-height:1.45;margin:15px 0 12px}
.cell p{font-size:13px;color:var(--fg2);line-height:1.62}
.cell.hot dd{color:var(--red)}

/* ---------- migration clock ---------- */
.ph{border:1px solid var(--line);background:var(--bg2)}
.phh{display:flex;align-items:center;gap:var(--u2);padding:15px 20px;border-bottom:1px solid var(--line);
 font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);flex-wrap:wrap}
.phk{display:flex;align-items:center;gap:8px}
.phk s{width:24px;height:8px;text-decoration:none;flex:none}
.k1{background:var(--fg3)}
.k2{background:repeating-linear-gradient(135deg,var(--gia) 0 4px,transparent 4px 8px);
 border-top:1px solid var(--gia);border-bottom:1px solid var(--gia)}
.k3{background:var(--red)}
.k4{background:var(--fg)}
.k5{background:repeating-linear-gradient(90deg,var(--fg3) 0 5px,transparent 5px 10px)}
.phgrp{font-family:var(--m);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg4);
 padding:16px 20px 7px;border-bottom:1px solid var(--line);background:var(--panel)}
.phb{padding:0}
/* 08/09/2026. La colonna del nome era 158 px: «ML-KEM \00b7 FIPS 203» piu' la
   targhetta «APPROVED» ne chiedono 173, e la targhetta usciva mozzata. Adesso
   la colonna e' larga abbastanza e, se un nome resta lungo, si accorcia il
   nome — mai la targhetta, che e' l'informazione. */
.phrow{display:grid;grid-template-columns:224px 1fr;align-items:center;gap:0 20px;
 padding:0 20px;height:42px;position:relative;transition:background .18s;cursor:pointer;
 border-bottom:1px solid var(--line)}
.phrow:last-child{border-bottom:0}
.phrow:hover{background:rgba(255,255,255,.03)}
.phrow>b{font-family:var(--m);font-size:11px;letter-spacing:.05em;
 color:var(--fg2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phrow:hover>b{color:var(--fg)}
.trk{position:relative;height:100%}
.seg{position:absolute;top:50%;transform:translateY(-50%);height:8px;transition:height .18s}
.phrow:hover .seg{height:12px}
.s-exp{background:repeating-linear-gradient(90deg,var(--fg3) 0 5px,transparent 5px 10px);height:4px!important}
.phrow>b{display:flex;align-items:center;gap:9px;overflow:visible;min-width:0}
.phrow>b .pnm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.stt{margin-left:auto}
.stt{font-family:var(--m);font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;
 font-style:normal;padding:2px 5px;border:1px solid var(--line2);color:var(--fg4);
 white-space:nowrap;flex:none}
.stt.s-deprecated{border-color:var(--gia);color:var(--gia)}
.stt.s-disallowed{border-color:var(--red);color:var(--red)}
.stt.s-approved{border-color:var(--fg2);color:var(--fg2)}
.stt.s-expected{border-color:var(--fg4);color:var(--fg4)}
@media(max-width:900px){.stt{display:none}}
.s-use{background:var(--fg3)}
.s-dep{background:repeating-linear-gradient(135deg,var(--gia) 0 4px,transparent 4px 8px);
 border-top:1px solid var(--gia);border-bottom:1px solid var(--gia)}
.s-dis{background:var(--red)}
.s-ok{background:var(--fg)}
.mk{position:absolute;top:50%;transform:translate(-50%,-50%);width:8px;height:8px;
 background:var(--bg2);border:2px solid var(--fg);border-radius:50%;z-index:4}
.now{position:absolute;top:0;bottom:0;width:1px;background:var(--red);z-index:3}
.nowl{position:absolute;top:-1px;transform:translateX(-50%);font-family:var(--m);font-size:8.5px;
 letter-spacing:.16em;color:var(--red);text-transform:uppercase;z-index:5;background:var(--bg2);padding:0 5px}
.phax{display:grid;grid-template-columns:158px 1fr;gap:0 20px;padding:11px 20px 15px;
 border-top:1px solid var(--line)}
.phax .tk2{position:relative;height:14px}
.phax i{position:absolute;top:0;transform:translateX(-50%);font-family:var(--m);
 font-size:9px;color:var(--fg3);font-style:normal}
.antlab{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line)}
.antlab div{flex:1;min-width:190px;padding:15px 18px;border-right:1px solid var(--line);
 font-family:var(--m);font-size:9.5px;color:var(--fg3);line-height:1.9}
.antlab div:last-child{border-right:0}
.antlab b{display:block;color:var(--fg);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:4px}
.antlab b.r{color:var(--red)}
.antlab .cd{font-family:var(--m);font-size:17px;font-weight:700;color:var(--red);
 letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#phnext b,#phdead b{color:var(--red)}
@media(max-width:760px){
 .phrow,.phax{grid-template-columns:124px 1fr;gap:0 12px;padding-left:13px;padding-right:13px}
 .phrow>b{font-size:9.5px}
 .phgrp{padding-left:13px}
}

/* ---------- generations ---------- */
.stk{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);
 border:1px solid var(--line)}
@media(max-width:1120px){.stk{grid-template-columns:repeat(3,1fr)}}
@media(max-width:660px){.stk{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.stk{grid-template-columns:1fr}}
.sg{background:var(--bg);padding:24px 20px 26px;transition:background .25s;position:relative;
 display:flex;flex-direction:column;min-height:200px}
.sg:hover{background:var(--panel)}
.sg::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--red);
 transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.sg:hover::before{transform:scaleX(1)}
.sg b{font-family:var(--m);font-size:10.5px;color:var(--red);letter-spacing:.1em;display:block}
.sg h4{font-weight:800;font-size:17px;letter-spacing:-.028em;margin:11px 0 14px;line-height:1.1}
.sg ul{list-style:none;margin-top:auto;border-top:1px solid var(--line2);padding-top:13px}
.sg li{font-family:var(--m);font-size:10px;color:var(--fg3);line-height:1.95;letter-spacing:.02em}
.sg li:first-child{color:var(--fg2)}

/* ---------- booking ---------- */
.bk{display:grid;grid-template-columns:1fr 340px;gap:1px;background:var(--line);border:1px solid var(--line)}
/* La nota fiscale stava sotto il modulo, nella colonna stretta: allungava
   quella e lasciava sotto il calendario un vuoto della stessa altezza.
   Ora la colonna del modulo prende tutte e due le righe e la nota occupa
   il buco, che era esattamente della sua misura. */
.bkl{grid-column:1;grid-row:1}
.bkr{grid-column:2;grid-row:1/span 2}
.bkn{grid-column:1;grid-row:2}
@media(max-width:900px){.bk{grid-template-columns:1fr}
 .bkl,.bkr,.bkn{grid-column:auto;grid-row:auto}}
.bkl,.bkr{background:var(--bg2)}
.bkl{padding:22px}
.cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cal-h b{font-family:var(--m);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.cal-h button{background:none;border:1px solid var(--line2);color:var(--fg3);font-family:var(--m);
 font-size:12px;width:28px;height:28px;cursor:pointer;transition:.16s;line-height:1}
.cal-h button:hover{border-color:var(--red);color:var(--red)}
.cal-h button:disabled{opacity:.3;cursor:not-allowed}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-g .wd{font-family:var(--m);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
 color:var(--fg4);text-align:center;padding-bottom:7px}
.cal-g button{aspect-ratio:1;background:none;border:1px solid transparent;color:var(--fg2);
 font-family:var(--m);font-size:12px;cursor:pointer;transition:.14s;position:relative;
 display:flex;align-items:center;justify-content:center}
.cal-g button:hover:not(:disabled){border-color:var(--fg3);color:var(--fg)}
.cal-g button:disabled{color:var(--fg4);opacity:.35;cursor:not-allowed}
.cal-g button.free::after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
 width:3px;height:3px;background:var(--red);border-radius:50%}
.cal-g button.on{background:var(--red);border-color:var(--red);color:#fff}
.cal-g button.on::after{background:#fff}
.bkr{padding:22px;display:flex;flex-direction:column}
.bkr .st{font-family:var(--m);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--fg3);margin-bottom:13px}
.slot{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:20px}
.slot button{background:none;border:1px solid var(--line2);color:var(--fg2);font-family:var(--m);
 font-size:11px;padding:9px 4px;cursor:pointer;transition:.14s}
.slot button:hover{border-color:var(--fg3);color:var(--fg)}
.slot button.on{background:var(--red);border-color:var(--red);color:#fff}
.bkf{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.bkf input,.bkf select{background:var(--bg);border:1px solid var(--line2);color:var(--fg);
 font-family:var(--m);font-size:11.5px;padding:10px 11px;outline:none;transition:.14s;width:100%}
.bkf input:focus,.bkf select:focus{border-color:var(--red)}
.bkf input::placeholder{color:var(--fg4)}
/* Il prezzo stava dentro la voce del menu, in fondo a una riga lunga e dello
   stesso colore di tutto il resto. E' un numero: esce dalla tendina, va sotto
   su una riga sua, in rosso. */
.bpr{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
 margin:12px 1px 14px;padding-top:11px;border-top:1px solid var(--line);
 font-family:var(--m);line-height:1.1}
.bpr b{font-size:21px;font-weight:700;letter-spacing:-.025em;color:var(--red)}
.bpr em{font-style:normal;font-size:8.5px;font-weight:400;letter-spacing:.2em;
 text-transform:uppercase;color:var(--fg4);white-space:nowrap}
.bpr.free b{font-size:17px;color:var(--fg2)}
.bkf button{background:var(--red);border:0;color:#fff;font-family:var(--m);font-size:10.5px;
 letter-spacing:.15em;text-transform:uppercase;padding:13px;cursor:pointer;transition:.16s;margin-top:4px}
.bkf button:hover{filter:brightness(1.15)}
.bkf button:disabled{background:var(--line2);color:var(--fg4);cursor:not-allowed}
/* In attesa di giorno e ora: non e' spento, e' un'istruzione. Si puo'
   premere — e se lo premi ti porta al calendario invece di non fare nulla. */
.bkf button.attesa{background:var(--line2);color:var(--fg2);cursor:pointer;
 font-weight:500;letter-spacing:.02em}
.bkf button.attesa:hover{background:var(--line);color:var(--fg)}
@keyframes lampo{0%,100%{box-shadow:0 0 0 0 rgba(185,28,28,0)}
 28%{box-shadow:0 0 0 3px rgba(185,28,28,.38)}}
.cal-g.lampo,.slot.lampo{animation:lampo .85s ease-out 2;border-radius:9px}
@media (prefers-reduced-motion:reduce){.cal-g.lampo,.slot.lampo{animation:none;
 box-shadow:0 0 0 3px rgba(185,28,28,.3)}}
/* Il campo che manca si segna dov'e', non solo in fondo al modulo. */
.bkf .manca{border-color:var(--red);background:rgba(185,28,28,.045)}
.bkf .manca::placeholder{color:var(--red);opacity:.75}
.bkn{font-family:var(--m);font-size:9.5px;color:var(--fg4);line-height:1.9;
 background:var(--bg2);padding:16px 22px 20px}
@media(max-width:900px){.bkn{padding:16px 22px 20px}}

/* ---------- le fonti sotto una donazione ----------
   Non sono decorazione: sono la differenza fra "l'ho fatto" e "lo trovi
   scritto da qualcun altro". Quindi si vedono, e si aprono di lato. */
.fonti{display:flex;flex-direction:column;gap:6px;margin-top:13px}
.fonti a{display:block;text-decoration:none;
 font-family:var(--m);font-size:9.5px;letter-spacing:.06em;line-height:1.45;
 border:1px solid var(--line2);padding:8px 10px;color:var(--fg2);transition:.2s}
.fonti a:hover{border-color:var(--red);background:var(--redg)}
.fonti a s{display:inline-block;width:4px;height:4px;background:var(--red);
 text-decoration:none;margin-right:7px;vertical-align:middle}
.fonti a b{color:var(--fg);font-weight:600}
.fonti a em{display:block;font-style:normal;color:var(--fg3);margin-top:3px}

/* ---------- la firma ----------
   Il PNG e' nero pieno con la forma nel canale alpha: invertirlo da'
   inchiostro bianco netto. Sul tema chiaro si lascia com'e'. Niente secondo
   file da tenere allineato, niente rettangoli sul fondo sbagliato. */
.firma{margin:15px 0 2px;display:block}
.firma img{display:block;width:min(160px,44%);height:auto;opacity:.9;
 filter:invert(1)}
:root[data-theme="light"] .firma img{filter:none;opacity:.8}
@media(max-width:640px){.firma{margin-top:11px}
 .firma img{width:min(124px,58%)}}

/* ---------- selettore ambito ---------- */
.dom{border:1px solid var(--line);background:var(--bg2);margin-bottom:var(--u3)}
.domh{padding:16px 20px 14px;border-bottom:1px solid var(--line)}
.domh b{font-family:var(--d);font-size:17px;font-weight:700;letter-spacing:-.022em;display:block}
.domh span{font-family:var(--m);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
 color:var(--fg3);display:block;margin-bottom:8px}
.domb{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line)}
@media(max-width:900px){.domb{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.domb{grid-template-columns:1fr}}
.domb button{background:var(--bg2);border:0;text-align:left;padding:17px 16px 19px;cursor:pointer;
 transition:.18s;font-family:var(--d);color:var(--fg2);position:relative}
.domb button:hover{background:var(--panel);color:var(--fg)}
.domb button em{display:block;font-family:var(--m);font-size:8.5px;letter-spacing:.15em;
 text-transform:uppercase;color:var(--fg4);font-style:normal;margin-bottom:9px}
.domb button strong{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.domb button.on{background:var(--red);color:#fff}
.domb button.on em{color:rgba(255,255,255,.7)}
.domb button.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#fff}

/* ---------- servizi ---------- */
.svc{border:1px solid var(--line);background:var(--bg2)}
.sv{display:grid;grid-template-columns:210px 1fr 210px;gap:0;border-bottom:1px solid var(--line);
 transition:background .22s;position:relative}
.sv:last-child{border-bottom:0}
.sv:hover{background:var(--panel)}
.sv::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red);
 transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.sv:hover::before{transform:scaleY(1)}
@media(max-width:1000px){.sv{grid-template-columns:1fr}}
.sv-a{padding:26px 24px;border-right:1px solid var(--line)}
.sv-b{padding:26px 24px;border-right:1px solid var(--line)}
.sv-c{padding:26px 24px}
@media(max-width:1000px){.sv-a,.sv-b{border-right:0;border-bottom:1px solid var(--line)}}
.sv-a .k{font-family:var(--m);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3)}
.sv-a h3{font-weight:800;font-size:24px;letter-spacing:-.032em;margin:10px 0 12px;line-height:1.05}
.sv-a .pr{font-family:var(--m);font-size:22px;font-weight:700;color:var(--red);
 letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.sv-a .tt{font-family:var(--m);font-size:9.5px;color:var(--fg4);letter-spacing:.09em;margin-top:9px}
.sv-b .q{font-family:var(--d);font-size:16.5px;font-weight:600;letter-spacing:-.018em;
 line-height:1.32;margin-bottom:11px}
.sv-b p{font-size:13.5px;color:var(--fg2);line-height:1.6}
.sv-c b{font-family:var(--m);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--fg3);display:block;margin-bottom:11px}
.sv-c ul{list-style:none}
.sv-c li{font-family:var(--m);font-size:10.5px;color:var(--fg2);line-height:1.5;
 padding:4px 0 4px 14px;position:relative}
.sv-c li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:1px;background:var(--red)}
.sv-c .tool{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
 font-family:var(--m);font-size:9.5px;color:var(--fg4);letter-spacing:.05em;line-height:1.7}

/* ---------- presence ---------- */
.busy{display:flex;align-items:center;gap:8px;font-family:var(--m);font-size:9.5px;
 letter-spacing:.1em;color:var(--fg3);border:1px solid var(--line2);padding:5px 10px;
 white-space:nowrap;overflow:hidden;max-width:250px}
.busy s{width:6px;height:6px;border-radius:50%;text-decoration:none;flex:none;animation:pulse 2.4s infinite}
.busy s.o{background:#37C79A}.busy s.l{background:var(--gia)}.busy s.f{background:var(--red)}
.busy em{font-style:normal;color:var(--fg2);text-overflow:ellipsis;overflow:hidden}
@media(max-width:1240px){.busy{display:none}}

.wk{border:1px solid var(--line);background:var(--bg2)}
.wkh{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);
 font-family:var(--m);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg3);flex-wrap:wrap}
.wkh .lg{display:flex;align-items:center;gap:6px}
.wkh .lg s{width:6px;height:6px;border-radius:50%;text-decoration:none}
.wkh .lg s.o{background:#37C79A}.wkh .lg s.l{background:var(--gia)}.wkh .lg s.f{background:var(--red)}
.wkb{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line)}
@media(max-width:700px){.wkb{grid-template-columns:repeat(2,1fr)}}
.wkd{background:var(--bg2);padding:16px 15px 18px;transition:background .22s}
.wkd:hover{background:var(--panel)}
.wkd .dn{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wkd .dn b{font-family:var(--m);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg)}
.wkd .dn s{width:7px;height:7px;border-radius:50%;text-decoration:none;flex:none}
.wkd .dn s.o{background:#37C79A}.wkd .dn s.l{background:var(--gia)}.wkd .dn s.f{background:var(--red)}
.wkd .ld{display:flex;gap:2px;margin:13px 0 11px}
.wkd .ld i{flex:1;height:22px;background:var(--line2);transition:background .3s}
.wkd .ld i.on{background:var(--fg3)}
.wkd .ld i.hot{background:var(--red)}
.wkd p{font-size:12px;color:var(--fg2);line-height:1.5}
.wkd span{font-family:var(--m);font-size:9px;color:var(--fg4);letter-spacing:.09em;display:block;margin-top:8px}

/* ---------- bars ---------- */
.sup{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--u4)}
@media(max-width:860px){.sup{grid-template-columns:1fr}}
.bar{padding:12px 0;border-bottom:1px solid var(--line)}
.bar .bt{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
 font-family:var(--m);font-size:10.5px;margin-bottom:8px}
.bar .bt b{color:var(--fg);text-transform:uppercase;font-size:11px;letter-spacing:.13em;font-weight:500}
.bar .bt span{color:var(--fg3);font-size:9px;white-space:nowrap}
.btr{height:3px;background:var(--line2);position:relative;overflow:hidden}
.btr i{position:absolute;inset:0 auto 0 0;width:0;background:var(--red);
 transition:width 1.1s cubic-bezier(.2,.7,.3,1)}
.bar.sec .btr i{background:var(--fg3)}

/* ---------- timeline ---------- */
.lfilt{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--u3)}
.lf{font-family:var(--m);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
 background:none;border:1px solid var(--line2);color:var(--fg3);padding:6px 11px;cursor:pointer;transition:.16s}
.lf:hover{color:var(--fg);border-color:var(--fg3)}
.lf.on{background:var(--red);border-color:var(--red);color:#fff}
.yr{display:grid;grid-template-columns:82px 1fr;gap:0 var(--u2);border-top:1px solid var(--line2)}
.yr>b{font-family:var(--m);font-size:11.5px;font-weight:700;color:var(--red);padding:20px 0 0;
 letter-spacing:.06em;position:sticky;top:72px;align-self:start}
.ev{display:grid;grid-template-columns:1fr auto;gap:10px 18px;align-items:start;cursor:pointer;
 padding:17px 0;border-bottom:1px solid var(--line);transition:.18s}
.ev:hover{background:var(--bg2);box-shadow:-14px 0 0 var(--bg2),14px 0 0 var(--bg2)}
.ev h3{font-weight:700;font-size:17.5px;letter-spacing:-.022em;line-height:1.24}
.ev p{font-size:13.5px;color:var(--fg2);margin-top:5px;max-width:66ch;line-height:1.5;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tg{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.t{font-family:var(--m);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;
 padding:3px 7px;border:1px solid var(--line2);color:var(--fg3);white-space:nowrap}
.t.antenna,.t.gap{border-color:var(--red);color:var(--red)}
.t.gap{background:var(--redg)}
.ev.gap h3{color:var(--red)}
/* Il fondo rosso partiva sul filo del testo: le lettere sembravano
   incollate al bordo del blocco. Stesso trattamento delle righe antenna —
   barra a sinistra e rientro — cosi' il colore comincia PRIMA del testo. */
.ev.gap{background:linear-gradient(90deg,var(--redg),transparent 60%);
 border-left:2px solid var(--red);padding-left:16px;margin-left:-18px}
.ev.antenna{border-left:2px solid var(--red);padding-left:16px;margin-left:-18px}
@media(max-width:780px){
 .yr{grid-template-columns:1fr}.yr>b{position:static;padding:18px 0 4px}
 .ev{grid-template-columns:1fr}.tg{justify-content:flex-start}
 .ev.antenna,.ev.gap{margin-left:0;padding-left:13px}
}

/* ---------- table ---------- */
.tw{overflow-x:auto;border:1px solid var(--line);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:13.5px}
th{font-family:var(--m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);
 text-align:left;padding:12px 15px;background:var(--panel);border-bottom:1px solid var(--line)}
td{padding:13px 15px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .18s;cursor:pointer}
tbody tr:hover{background:var(--bg2)}
td.n{font-family:var(--m);font-weight:700;font-size:13px;white-space:nowrap}
td.n i{color:var(--red);font-style:normal}
td.d{color:var(--fg2);max-width:40ch}
td.k{font-family:var(--m);font-size:10.5px;color:var(--fg3);white-space:nowrap}

/* ---------- cards ---------- */
.fil{background:var(--bg);padding:32px 28px 34px;position:relative;overflow:hidden;
 transition:background .3s;display:flex;flex-direction:column}
.fil:hover{background:var(--panel)}
.fil::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--red);
 transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.fil:hover::before{transform:scaleX(1)}
.fil .k{font-family:var(--m);font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:var(--red)}
.fil h3{font-weight:800;font-size:25px;letter-spacing:-.032em;margin:12px 0 10px;font-variation-settings:"wdth" 88}
.fil>p{font-size:14px;color:var(--fg2);line-height:1.55}
.fil .pr{font-family:var(--m);font-size:19px;font-weight:700;letter-spacing:-.02em;
 color:var(--red);margin:-4px 0 13px;font-variant-numeric:tabular-nums}
.fil ul{list-style:none;margin-top:17px;padding-top:15px;border-top:1px solid var(--line2);flex:1}
.fil li{font-family:var(--m);font-size:11px;color:var(--fg3);padding:5px 0 5px 14px;position:relative;line-height:1.5}
.fil li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:1px;background:var(--red)}

/* ---------- slider ---------- */
.sl{position:relative;border:1px solid var(--line);background:var(--bg2);overflow:hidden}
.slt{display:flex;transition:transform .55s cubic-bezier(.3,.8,.3,1)}
.sli{min-width:100%;padding:var(--u4) var(--u3)}
.sli .k{font-family:var(--m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.sli blockquote{font-weight:700;font-size:clamp(21px,3.4vw,36px);letter-spacing:-.034em;line-height:1.14;
 margin:16px 0;max-width:22ch;font-variation-settings:"wdth" 88}
.sli p{color:var(--fg2);max-width:62ch;font-size:15px}
.sli p+p{margin-top:10px}
.slc{display:flex;gap:1px;border-top:1px solid var(--line);background:var(--line)}
.slc button{flex:1;background:var(--bg2);border:0;color:var(--fg3);font-family:var(--m);
 font-size:9px;letter-spacing:.15em;text-transform:uppercase;padding:12px 8px;cursor:pointer;transition:.18s}
.slc button:hover{color:var(--fg);background:var(--panel)}
.slc button.on{color:#fff;background:var(--red)}

/* ---------- dyor ---------- */
.dyor{border:1px solid var(--line2);background:var(--panel);padding:var(--u2) 22px;
 display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:start}
@media(max-width:620px){.dyor{grid-template-columns:1fr;gap:10px}}
.dyor .dt{font-family:var(--m);font-size:10px;letter-spacing:.2em;color:var(--red);
 border:1px solid var(--red);padding:5px 9px;white-space:nowrap}
.dyor p{font-size:13.5px;color:var(--fg2);line-height:1.6;max-width:78ch}
.dyor p+p{margin-top:7px}

/* ---------- live panel ---------- */
.live{border:1px solid var(--line);background:var(--bg2)}
.liveh{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line);
 font-family:var(--m);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg3)}
.liveh s{width:6px;height:6px;background:var(--red);border-radius:50%;text-decoration:none;
 animation:pulse 2.4s infinite;flex:none}
.liveh em{margin-left:auto;font-style:normal;color:var(--fg4)}
.liveb{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
@media(max-width:800px){.liveb{grid-template-columns:repeat(2,1fr)}}
.lvc{background:var(--bg2);padding:18px}
.lvc b{display:block;font-family:var(--m);font-size:26px;font-weight:700;letter-spacing:-.03em;
 font-variant-numeric:tabular-nums;line-height:1}
.lvc span{font-family:var(--m);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--fg3);display:block;margin-top:7px}
.lvlog{border-top:1px solid var(--line);padding:14px 18px;font-family:var(--m);font-size:10.5px;
 color:var(--fg3);line-height:1.95;max-height:110px;overflow-y:auto}
.lvlog i{color:var(--red);font-style:normal}

/* ---------- modal / palette ---------- */
#md{position:fixed;inset:0;z-index:90;display:none;background:rgba(4,5,6,.82);backdrop-filter:blur(10px)}
#md.open{display:flex;align-items:center;justify-content:center;padding:22px}
.mdb{max-width:640px;width:100%;background:var(--panel);border:1px solid var(--line2);
 box-shadow:0 40px 100px rgba(0,0,0,.8);animation:pop .28s cubic-bezier(.2,.8,.3,1);max-height:86vh;overflow-y:auto}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.mdh{padding:20px 24px 16px;border-bottom:1px solid var(--line);display:flex;
 justify-content:space-between;align-items:flex-start;gap:16px;position:sticky;top:0;background:var(--panel)}
.mdh .y{font-family:var(--m);font-size:10.5px;color:var(--red);letter-spacing:.14em}
.mdh h3{font-weight:800;font-size:23px;letter-spacing:-.032em;line-height:1.14;margin-top:8px}
.mdx{font-family:var(--m);font-size:15px;color:var(--fg3);cursor:pointer;line-height:1;padding:3px 6px;flex:none}
.mdx:hover{color:var(--red)}
.mdc{padding:20px 24px 24px}
.mdc p{color:var(--fg2);font-size:15px}
.mdc .mt{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
 font-family:var(--m);font-size:10px;color:var(--fg3);letter-spacing:.07em;line-height:2}
.mdc .mt b{color:var(--fg)}

/* ---- pagamento dentro il sito ---- */
#pay{position:fixed;inset:0;z-index:120;display:none;background:rgba(6,7,8,.9);
 backdrop-filter:blur(8px);padding:5vh 20px}
#pay.open{display:block}
.paybox{max-width:520px;height:90vh;height:90dvh;margin:0 auto;background:var(--panel);
 border:1px solid var(--line2);display:flex;flex-direction:column;overflow:hidden;
 box-shadow:0 40px 100px rgba(0,0,0,.8)}
.payh{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 18px;
 border-bottom:1px solid var(--line);background:var(--bg)}
.payh b{font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--fg2);font-weight:400}
.payh a{margin-left:auto;font-family:var(--m);font-size:10px;letter-spacing:.08em;
 color:var(--fg3);border-bottom:1px solid var(--line2);padding-bottom:2px}
.payh a:hover{color:var(--red);border-color:var(--red)}
.payh button{background:none;border:0;color:var(--fg3);font-family:var(--m);font-size:15px;
 cursor:pointer;line-height:1;padding:3px 5px}
.payh button:hover{color:var(--red)}
.payw{position:relative;flex:1;min-height:0;background:#fff}
#payif{width:100%;height:100%;border:0;display:block;background:#fff}
.payload{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 gap:10px;font-family:var(--m);font-size:11px;letter-spacing:.1em;color:#64748b;
 background:#fff;text-transform:uppercase}
.payload s{width:7px;height:7px;background:var(--red);border-radius:50%;text-decoration:none;
 animation:semeResp 1.1s infinite}
.payload.off{display:none}
@media(max-width:760px){
 #pay{padding:0}
 .paybox{max-width:none;height:100%;height:100dvh;border:0}
 .payh a{font-size:9.5px}
}

#pal{position:fixed;inset:0;z-index:100;display:none;background:rgba(6,7,8,.88);backdrop-filter:blur(8px);padding-top:12vh}
#pal.open{display:block}
.pbox{max-width:620px;margin:0 auto;background:var(--panel);border:1px solid var(--line2);box-shadow:0 30px 90px rgba(0,0,0,.7)}
#pq{width:100%;background:none;border:0;border-bottom:1px solid var(--line2);color:var(--fg);
 font-family:var(--m);font-size:16px;padding:18px 20px;outline:none}
#pq::placeholder{color:var(--fg3)}
#pr{max-height:52vh;overflow-y:auto}
.pi{display:flex;align-items:center;gap:14px;padding:11px 20px;cursor:pointer;
 border-bottom:1px solid var(--line);font-size:13.5px}
.pi:hover{background:var(--bg2)}
.pi em{font-family:var(--m);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
 color:var(--fg3);font-style:normal;margin-left:auto;white-space:nowrap}

footer{border-top:1px solid var(--line);padding:var(--u4) 0 var(--u5)}
/* Le tre colonne avevano 6, 4 e 3 righe: finivano a tre altezze diverse e
   sopra non c'era niente a tenerle in riga. Un filo sopra ognuna le fa
   partire insieme, lo stretch le fa finire insieme. */
/* Tre colonne da un terzo con dentro sei parole ciascuna: il piede sembrava
   sparso. Le colonne adesso sono larghe quanto il loro contenuto e lo spazio
   che avanza va tutto alla frase grande, che resta appesa a destra. */
.fg{display:grid;grid-template-columns:max-content max-content max-content minmax(0,1fr);
 gap:var(--u3) var(--u4);align-items:stretch}
.fg>*{border-top:1px solid var(--line);padding-top:15px}
.fc{display:flex;flex-direction:column}
@media(max-width:1000px){.fg{grid-template-columns:max-content max-content max-content;
 gap:var(--u3) var(--u3)}}
@media(max-width:720px){.fg{grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:var(--u2) var(--u3)}}
.fc b{font-family:var(--m);font-size:9px;letter-spacing:.17em;text-transform:uppercase;
 color:var(--fg3);display:block;margin-bottom:11px}
.fc a,.fc span{display:block;font-family:var(--m);font-size:11px;color:var(--fg2);line-height:2;transition:.16s}
.fc a:hover{color:var(--red)}
/* Era la sola parola «backbone.». Adesso e' la frase intera, ma la frase e'
   lunga il triplo: se restava a 72 px sfondava la colonna. Si incolonna nella
   sua cella, con un massimo in caratteri, e «backbone» resta la parola che
   si legge per prima. */
/* Il flex serve a spingere la frase in fondo alla cella, che e' alta quanto
   le colonne accanto. Ma se il flex lo prende .fbig, allora <em>, <br> e <i>
   diventano tre elementi di blocco e la frase si spacca in tre righe. Il flex
   avvolge UN figlio solo, lo span; dentro lo span il testo resta testo. */
.fbig{font-weight:900;font-size:clamp(19px,2.7vw,38px);letter-spacing:-.04em;line-height:.98;
 font-variation-settings:"wdth" 80;color:var(--line2);text-transform:lowercase;
 text-align:right;max-width:15ch;margin-left:auto;
 display:flex;flex-direction:column;justify-content:flex-start}
.fbig>span{display:block}
.fbig em{font-style:normal;color:var(--fg4)}
.fbig i{font-style:normal;color:var(--red)}
@media(max-width:1000px){.fbig{grid-column:1/-1;text-align:left;margin-left:0;max-width:none;
 font-size:clamp(19px,4.4vw,32px);display:block}}
.fbar{border-top:1px solid var(--line);margin-top:var(--u3);padding-top:18px;
 font-family:var(--m);font-size:9.5px;color:var(--fg4);letter-spacing:.06em;
 display:flex;flex-wrap:wrap;gap:8px 24px}
/* ---------- LIGHT ---------- */
:root[data-theme="light"]{
  --bg:#F6F7F9; --bg2:#FFFFFF; --panel:#FFFFFF; --line:#E3E7ED; --line2:#CBD2DB;
  --fg:#0B0E13; --fg2:#4C5563; --fg3:#79818E; --fg4:#A9B0BA;
  --redg:rgba(255,0,0,.07);
  --halo:rgba(246,247,249,.95); --halo2:rgba(246,247,249,.62); --haloS:rgba(246,247,249,.52);
}
:root[data-theme="light"] .top{background:rgba(246,247,249,.9)}
:root[data-theme="light"] .hbot{background:rgba(246,247,249,.82)}
:root[data-theme="light"] .mq{background:var(--bg2)}
:root[data-theme="light"] .brand .dot{box-shadow:0 0 0 3px rgba(255,0,0,.12)}
:root[data-theme="light"] .lvlog i{font-weight:700}
:root[data-theme="light"] #hero::after{
  background:radial-gradient(ellipse 104% 88% at 50% 46%,transparent 34%,var(--bg) 96%)}
:root[data-theme="light"] .s-n{background:var(--fg)}
:root[data-theme="light"] .k2{background:var(--fg)}
:root[data-theme="light"] .fbig{color:#DDE2E9}
:root[data-theme="light"] .mq::before{background:linear-gradient(90deg,var(--bg2),transparent)}
:root[data-theme="light"] .mq::after{background:linear-gradient(270deg,var(--bg2),transparent)}
:root[data-theme="light"] .mdb,:root[data-theme="light"] .pbox{box-shadow:0 40px 100px rgba(20,26,36,.22)}
:root[data-theme="light"] #md{background:rgba(240,242,246,.8)}
:root[data-theme="light"] #pal{background:rgba(240,242,246,.86)}
:root[data-theme="light"] .phrow:hover{background:rgba(11,14,19,.032)}
:root[data-theme="light"] .pk{box-shadow:0 0 0 3px var(--bg2)}

/* ---------- la pillola ---------- */
#strato{position:fixed;inset:0;z-index:44;pointer-events:none;opacity:0;
 transition:opacity .45s}
#strato.on{opacity:1}
#strato canvas{display:block;width:100%;height:100%}
#chip{position:fixed;z-index:47;background:var(--red);color:#fff;font-family:var(--m);
 font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:9px 16px;
 opacity:0;pointer-events:none;transform:translate(-50%,-8px) scale(.9);
 transition:opacity .25s,transform .25s;white-space:nowrap}
#chip.on{opacity:1;pointer-events:auto;transform:translate(-50%,0) scale(1)}
/* il punto pulsava fino al 25% di opacita': meta' del tempo il marchio
   sembrava 'lucaprata com' con un buco. Ora respira senza sparire. */
@keyframes semeResp{0%,100%{opacity:1}50%{opacity:.62}}
#seme{display:inline-block;width:.34em;height:.34em;background:var(--red);border-radius:50%;
 margin:0 .11em;vertical-align:.1em;transition:opacity .22s;animation:semeResp 2.6s infinite}
/* Il punto NON sparisce piu' dal logo. Prima usciva di scena appena la
   pillola se ne andava per la pagina e il marchio restava "lucaprata com",
   con un buco al posto del punto: sembrava un errore di composizione.
   Ora resta sempre, smette solo di pulsare quando la pillola e' fuori. */
#seme.via{animation:none}
/* il punto del logo che si tuffa dentro al gioco quando inizi a giocare */
.semefly{position:fixed;z-index:95;background:var(--red);border-radius:50%;
 pointer-events:none;transform-origin:50% 50%;margin:-3px 0 0 -3px;
 animation:semeVola .58s cubic-bezier(.34,.02,.2,1) forwards}
@keyframes semeVola{
 0%{transform:translate(0,0) scale(1);opacity:1}
 62%{opacity:1}
 100%{transform:translate(var(--dx),var(--dy)) scale(var(--s));opacity:0}}
@media(prefers-reduced-motion:reduce){.semefly{display:none}}
.pillhint{font-family:var(--m);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg4)}
.pillhint b{color:var(--red);font-weight:400}

/* ---------- identity card ---------- */
/* 08/09/2026 sera. Il fondo della scheda distava cinque punti su 255 da
   quello della pagina: la scheda non si vedeva, si vedevano solo i suoi due
   bordi, e quello sotto sembrava una riga tirata sotto la faccia. Una
   superficie appena sollevata e il bordo torna a essere il bordo di qualcosa. */
.idc{display:grid;grid-template-columns:132px 1fr;gap:0;align-items:stretch;
 border:1px solid var(--line2);border-radius:2px;
 background:linear-gradient(180deg,rgba(255,255,255,.040),rgba(255,255,255,.014))}
:root[data-theme="light"] .idc{border-color:var(--line);
 background:linear-gradient(180deg,#fff,#F9FAFC)}
/* 08/09/2026. Prima: cornice bianca, foto piccola centrata, didascalia sotto,
   dentro una card chiara e alta. Sembrava un santino. Ora la foto e' una
   colonna piena che va da bordo a bordo e la card e' alta quanto il testo:
   niente aria morta, niente cornicetta. */
.idcx{display:flex;flex-direction:column;justify-content:center;
 padding:var(--u2) var(--u3);min-width:0}
/* La foto NON va sopra il nome sul telefono: diventava un francobollo
   grigio in mezzo a una card bianca, con la dolcevita nera che si scioglieva
   nel fondo. Resta accanto al nome, incorniciata, con la sua didascalia. */
.idpw{margin:0;flex:none;border-right:1px solid var(--line);border-left:3px solid var(--red);
 background:var(--bg);position:relative;overflow:hidden;display:block}
.idph{display:block;width:100%;height:100%;min-height:180px;object-fit:cover;object-position:50% 12%;
 /* la sorgente e' gia' in bianco e nero: qui si scalda appena, cosi' legge
    come una scelta e non come una foto scolorita */
 filter:contrast(1.06) brightness(1.03) sepia(.10)}
.idpw figcaption{position:absolute;left:0;right:0;bottom:0;
 font-family:var(--m);font-size:8px;letter-spacing:.16em;
 text-transform:uppercase;color:#fff;padding:6px 8px;
 background:linear-gradient(180deg,transparent,rgba(0,0,0,.82) 58%);
 display:flex;align-items:center;gap:6px;white-space:nowrap}
.idpw figcaption s{width:4px;height:4px;background:var(--red);text-decoration:none;flex:none}
@media(max-width:640px){
 .idc{grid-template-columns:96px 1fr}
 .idcx{padding:var(--u1) var(--u2)}
 .idph{min-height:0}
 .idpw figcaption{font-size:6.5px;letter-spacing:.08em;padding:5px 6px}
}
@media(max-width:380px){.idc{grid-template-columns:82px 1fr}}
.idn{font-weight:800;font-size:clamp(24px,3.4vw,36px);letter-spacing:-.04em;line-height:1;
 font-variation-settings:"wdth" 86}
.idr{font-family:var(--m);font-size:10.5px;color:var(--fg3);letter-spacing:.09em;
 text-transform:uppercase;margin-top:7px;line-height:1.5}
.idr b{color:var(--red);font-weight:500}
/* i cinque link non vanno mai a capo: se non ci stanno si scorrono di lato,
   cosi' la card resta alta uguale su ogni schermo invece di crescere di
   una riga per volta. */
.idl{display:flex;flex-wrap:nowrap;gap:6px;margin-top:13px;overflow-x:auto;
 scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;
 -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);
 mask-image:linear-gradient(90deg,#000 92%,transparent)}
.idl::-webkit-scrollbar{display:none}
.idl a{font-family:var(--m);font-size:10px;letter-spacing:.09em;color:var(--fg2);flex:none;
 white-space:nowrap;
 border:1px solid var(--line2);padding:6px 11px;transition:.16s;display:flex;align-items:center;gap:7px}
.idl a:hover{border-color:var(--red);color:var(--red);background:var(--redg)}
.idl a s{width:4px;height:4px;background:var(--red);text-decoration:none;flex:none}
.idl a.vf::after{content:"verified";font-size:8px;letter-spacing:.14em;color:var(--fg4);text-transform:uppercase}

/* ---------- channels grid ---------- */
.chg{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
@media(max-width:900px){.chg{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.chg{grid-template-columns:1fr}}
.chc{background:var(--bg);padding:var(--u2) 20px var(--u3);transition:.25s;display:block;position:relative}
.chc:hover{background:var(--panel)}
.chc::after{content:"↗";position:absolute;top:var(--u2);right:20px;font-family:var(--m);
 font-size:12px;color:var(--fg4);transition:.2s}
.chc:hover::after{color:var(--red);transform:translate(2px,-2px)}
.chc .cn{font-family:var(--m);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3)}
.chc .ch{font-weight:700;font-size:19px;letter-spacing:-.025em;margin:10px 0 6px}
.chc .cd{font-size:13px;color:var(--fg2);line-height:1.5}
.chc .cm{font-family:var(--m);font-size:9.5px;color:var(--fg4);margin-top:11px;letter-spacing:.08em}

.slog{font-weight:900;font-size:clamp(30px,6.4vw,86px);letter-spacing:-.05em;line-height:.92;
 font-variation-settings:"wdth" 82;max-width:15ch}
.slog i{color:var(--red);font-style:normal}

/* ---------- HUD del gioco ---------- */
/* una sola barra in fondo: legenda, aiuto, uscita — niente accavallamenti */
.gbar{position:absolute;left:0;right:0;bottom:0;z-index:6;border-top:1px solid var(--line);
 background:rgba(6,7,8,.72);backdrop-filter:blur(10px);
 opacity:0;transform:translateY(8px);pointer-events:none;transition:.45s cubic-bezier(.2,.7,.3,1)}
body.playing .gbar{opacity:1;transform:none;pointer-events:auto}
.gbar .w{display:flex;align-items:center;gap:var(--u3);min-height:52px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px}
.glg{display:flex;gap:16px;font-family:var(--m);font-size:8.5px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--fg3)}
.glg span{display:flex;align-items:center;gap:7px;white-space:nowrap}
.glg i{width:11px;height:11px;display:block;flex:none}
.sh-use{background:#8A93A0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.sh-dep{background:repeating-linear-gradient(135deg,#D9A227 0 3px,#0B0B0B 3px 6px)}
.sh-dis{background:#FF0000;clip-path:polygon(50% 0,100% 100%,0 100%)}
.ghint{font-family:var(--m);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;
 color:var(--fg4);white-space:nowrap}
.ghint b{color:var(--red);font-weight:400}
#gexit{margin-left:auto;font-family:var(--m);font-size:8.5px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--fg3);background:none;border:1px solid var(--line2);
 padding:8px 13px;cursor:pointer;transition:.2s;white-space:nowrap}
#gexit:hover{border-color:var(--red);color:var(--red)}
@media(max-width:820px){.gbar .w{gap:12px}.ghint{display:none}.glg{gap:11px;font-size:7.5px}}

/* il pulsante di avvio, da solo al centro */
#gstart{position:static;transform:none;z-index:7;
 background:var(--red);color:#fff;border:0;font-family:var(--m);font-size:11px;
 letter-spacing:.2em;text-transform:uppercase;padding:15px 30px;cursor:pointer;
 transition:opacity .4s,transform .4s;animation:pulse 2.6s infinite}
body.playing #gstart{opacity:0;pointer-events:none;animation:none;transform:translateY(10px)}
.gsub{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);z-index:7;
 font-family:var(--m);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--fg4);white-space:nowrap;transition:opacity .4s}
body.playing .gsub{opacity:0}

/* la barra dei numeri sparisce mentre giochi */
body.playing .hbot{opacity:0;pointer-events:none;transition:opacity .4s}

:root{--zone:#C8A05A}
#hero{background:#0C0A07}
/* I numeri stanno sopra la scena: appena la pillola passa su un tratto
   illuminato finiscono su fondo bianco e non si leggono piu'. Una velatura
   che sfuma verso il basso li tiene leggibili e sul terreno scuro non si
   vede nemmeno. */
.ghud{position:absolute;left:0;right:0;top:64px;z-index:8;pointer-events:none}
.ghud::before{content:"";position:absolute;left:0;right:0;top:-64px;bottom:-34px;
 background:linear-gradient(180deg,rgba(6,7,8,.80) 0%,rgba(6,7,8,.62) 46%,transparent 100%);
 pointer-events:none}
:root[data-theme="light"] .ghud::before{
 background:linear-gradient(180deg,rgba(247,248,250,.86) 0%,rgba(247,248,250,.66) 46%,transparent 100%)}
.ghud .w{position:relative;display:flex;align-items:flex-start;gap:var(--u3);flex-wrap:wrap}
.gz{border-left:2px solid var(--zone);padding-left:13px}
.gz b{display:block;font-weight:900;font-size:clamp(22px,3.4vw,38px);letter-spacing:-.04em;
 line-height:1;color:var(--zone);font-variation-settings:"wdth" 84;text-transform:uppercase}
.gz i{display:block;font-family:var(--m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--fg3);font-style:normal;margin-top:7px}
.gz p{font-size:13px;color:var(--fg2);max-width:38ch;margin-top:9px;line-height:1.45}
.gstat{margin-left:auto;text-align:right}
.ginv{font-family:var(--m);font-size:30px;font-weight:700;letter-spacing:-.035em;line-height:1;
 font-variant-numeric:tabular-nums;display:flex;align-items:baseline;justify-content:flex-end;gap:1px}
.ginv s{color:var(--fg4);text-decoration:none;font-size:16px}
.ginvl{font-family:var(--m);font-size:8px;letter-spacing:.17em;text-transform:uppercase;
 color:var(--fg4);margin-top:7px}
/* .gstat e' largo quanto il suo figlio piu' largo, che ora e' la riga degli
   elementi: .gsplit si stirava e il suo fondo dipingeva un rettangolo vuoto
   alla sinistra dei tre contatori. Niente fondo sul contenitore: la riga la
   fanno i bordi delle celle. */
.gsplit{display:flex;gap:0;justify-content:flex-end;margin-top:13px;
 background:none;width:fit-content;margin-left:auto}
.gsplit span+span{border-left:1px solid var(--line)}
.gsplit span{display:flex;flex-direction:column;align-items:center;gap:5px;
 background:rgba(6,7,8,.55);padding:8px 9px 9px;width:82px;flex:none;
 text-align:center}
.gsplit u{white-space:nowrap}
.gsplit i{width:10px;height:10px;display:block;flex:none}
.gsplit b{font-family:var(--m);font-size:15px;font-weight:700;color:var(--fg);
 font-variant-numeric:tabular-nums;line-height:1}
.gsplit u{font-family:var(--m);font-size:7px;letter-spacing:.13em;text-transform:uppercase;
 color:var(--fg4);text-decoration:none}
@media(max-width:760px){.ginv{font-size:20px}.gsplit span{min-width:0;padding:6px 8px}
 .gsplit b{font-size:12px}.gsplit u{display:none}}
.gstat div b{display:block;font-family:var(--m);font-size:19px;font-weight:700;
 font-variant-numeric:tabular-nums;line-height:1}
.gstat div span{font-family:var(--m);font-size:8px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--fg4);display:block;margin-top:5px}
@media(max-width:760px){
 .ghud{top:56px} .ghud .gz p{display:none!important} .gstat{gap:15px}
 .gz b{font-size:26px} .gz i{font-size:8.5px;margin-top:5px}
 .gstat div b{font-size:16px}
}


.hin{transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
body.playing .hin{opacity:0;transform:translateY(-18px);pointer-events:none}


@media(max-width:760px){}
#gcw{position:absolute;right:var(--u3);top:50%;transform:translateY(-50%);z-index:5;
 text-align:center;pointer-events:none}
#gcomp{font-size:34px;color:var(--zone);line-height:1;opacity:0;transition:opacity .4s;
 filter:drop-shadow(0 0 8px var(--zone))}
#gcdist{display:block;font-family:var(--m);font-size:11px;font-weight:700;letter-spacing:.14em;
 color:var(--zone);margin-top:6px}
@media(max-width:760px){#gcw{right:14px;top:auto;bottom:200px;transform:none}}






@media(max-width:760px){}

/* Il fondo era al 90% e sotto passava la HUD: le parole della scheda e
   quelle dei contatori finivano nello stesso rettangolo e non si leggeva
   piu' niente. Pieno e sfocato: quello che sta sotto torna a essere
   sfondo. */
#gcard{position:absolute;left:var(--u3);bottom:118px;z-index:8;max-width:320px;
 background:rgba(6,7,8,.96);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
 border:1px solid var(--zone);border-left-width:3px;padding:15px 17px;
 opacity:0;transform:translateY(10px);transition:.35s cubic-bezier(.2,.7,.3,1);pointer-events:none}
#gcard.on{opacity:1;transform:none}
/* LA PRIMA RIGA. Prima diceva "2030 · The chain · 5 of 19" e non si capiva
   cosa fosse quella roba: adesso davanti c'e' l'etichetta di che cos'e', e
   il conteggio va a destra da solo invece di stare in coda al testo. */
#gcard i,#gcore i{display:flex;align-items:center;gap:8px;font-family:var(--m);
 font-size:9px;letter-spacing:.15em;text-transform:uppercase;font-style:normal}
#gcard i{color:var(--zone)}
#gcard i s,#gcore i s{text-decoration:none;flex:none;font-size:7.5px;letter-spacing:.2em;
 padding:2px 6px;border:1px solid var(--line2);color:var(--fg4)}
#gcard i u,#gcore i u{text-decoration:none;margin-left:auto;flex:none;
 font-size:8.5px;letter-spacing:.1em;color:var(--fg4)}
#gcard b{display:block;font-weight:800;font-size:17px;letter-spacing:-.024em;margin:7px 0 6px;color:#fff}
#gcard.big{max-width:520px;border-color:var(--red);border-left-width:4px}
#gcard.big b{font-size:23px;line-height:1.15}
#gcard.big span{font-size:13.5px;margin-top:4px}
/* Tre righe e basta: mentre guidi non si legge un paragrafo, e una scheda
   che cresce col testo e' quella che diventa invasiva. Per intero sta nella
   collezione. */
#gcard span,#gcore span{font-size:12.5px;color:var(--fg2);line-height:1.5;
 display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
/* la scheda delle regole: li' le righe SONO il contenuto */
#gcore.regole span{display:block;-webkit-line-clamp:none;overflow:visible;
 font-size:12px;line-height:1.65}
#gcore.regole span b{color:var(--zone);font-weight:600}
#gcore.regole{max-width:460px}
/* anche sul computer la scheda del perche' e' la piu' alta del gioco:
   cresce dal basso e arrivava a toccare la riga "next:" della HUD.
   Si ferma dove finisce la HUD, e il resto scorre. */
#gcore.regole{max-height:calc(100% - var(--hudb,262px) - 150px);overflow-y:auto}
/* sul telefono la scheda del perche' non ci sta tutta e va scorsa: testo
   piu' fitto, cosi' se ne vede il doppio senza toccare niente */
@media(max-width:760px){
 #gcore.regole span{font-size:11px;line-height:1.5}
 #gcore.regole b{font-size:16px;line-height:1.2}
 /* e si ferma piu' in alto del tasto SALTO: e' la scheda piu' lunga del
    gioco e con il pollice sul salto la si copriva */
 #gcore.regole{max-height:calc(100svh - var(--hudb,262px) - var(--gb-h)
   - var(--gc-h) - var(--gb-gap)*7)}
}
/* LA RIGA IN FONDO. "IN USE" e il bottone rosso erano due elementi in
   linea, di due altezze diverse, uno appiccicato all'altro. Ora sono una
   riga: pastiglia a sinistra, bottone a destra, stessa altezza esatta. */
.gfoot{display:flex;align-items:center;gap:9px;margin-top:13px;flex-wrap:wrap}
.gfoot .gs{margin-top:0;display:inline-flex;align-items:center;flex:none;
 font-family:var(--m);font-size:8.5px;letter-spacing:.16em;font-style:normal;
 height:30px;padding:0 10px}
.gfoot .gcta{margin-top:0;margin-left:auto;height:30px;padding:0 12px;flex:none;
 font-size:9px;letter-spacing:.14em}
.gs-use{background:#2A313B;color:#C6CDD6}
.gs-dep{background:repeating-linear-gradient(135deg,#D9A227 0 5px,#0B0B0B 5px 10px);color:#fff;
 text-shadow:0 0 4px #000}
.gs-dis{background:#FF0000;color:#fff}
@media(max-width:760px){#gcard{left:14px;right:14px;max-width:none;top:auto;bottom:184px}}

/* ════════ IL FONDO DELL'HERO, A FASCE ════════
   Prima ogni pezzo aveva il suo scostamento, aggiustato a mano una patch
   per volta: 70, 80, 104, 120, 146, 156, 164, 184. Su un telefono da 844px
   si accavallavano. Adesso le misure stanno qui, una volta sola, e ogni
   pezzo si appoggia alla fascia sotto di se'. */
:root{--gb-h:52px;   /* barra in fondo */
      --gc-h:104px;  /* fascia dei comandi: joypad e salto */
      --gb-gap:16px} /* la stessa distanza fra tutte le fasce */
#pad{position:absolute;left:20px;bottom:104px;width:104px;height:104px;z-index:7;
 border:1px solid var(--line2);border-radius:50%;display:none;touch-action:none;
 background:rgba(6,7,8,.4);backdrop-filter:blur(4px)}
body.touch #pad,body.touch #jbtn{opacity:.62;transition:opacity .25s}
body.touch.playing #pad,body.touch.playing #jbtn{opacity:1}
#knob{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;
 border-radius:50%;background:var(--red);transition:transform .05s}
#jbtn{position:absolute;right:20px;bottom:120px;width:72px;height:72px;z-index:7;
 border:1px solid var(--line2);border-radius:50%;display:none;background:rgba(6,7,8,.4);
 color:var(--fg2);font-family:var(--m);font-size:9px;letter-spacing:.14em;
 backdrop-filter:blur(4px);touch-action:none}
body.touch #pad,body.touch #jbtn{display:block}

/* ---------- prove fotografiche ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
 border:1px solid var(--line)}
@media(max-width:1000px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gal{grid-template-columns:1fr}}
.gi{position:relative;background:var(--bg2);aspect-ratio:4/3;overflow:hidden;display:block;
 cursor:pointer}
.gi img{width:100%;height:100%;object-fit:cover;display:block;
 filter:grayscale(1) contrast(1.05) brightness(.92);transition:filter .5s,transform .7s cubic-bezier(.2,.7,.3,1)}
.gi:hover img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.04)}
.gi .slot{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
 align-items:center;gap:9px;background:
 repeating-linear-gradient(45deg,transparent 0 10px,rgba(127,135,150,.05) 10px 20px);
 font-family:var(--m);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg4);
 text-align:center;padding:16px}
.gi .slot b{font-size:22px;color:var(--fg3);letter-spacing:-.02em;font-weight:700}
.gi .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;
 background:linear-gradient(transparent,rgba(0,0,0,.86));pointer-events:none;
 transform:translateY(4px);opacity:.92;transition:.3s}
.gi:hover .cap{transform:none;opacity:1}
.gi .cap i{font-family:var(--m);font-size:9px;letter-spacing:.16em;color:var(--red);
 font-style:normal;display:block;margin-bottom:4px}
.gi .cap span{font-size:13px;font-weight:600;color:#fff;line-height:1.3;display:block;letter-spacing:-.01em}
:root[data-theme="light"] .gi .cap{background:linear-gradient(transparent,rgba(0,0,0,.75))}

/* ---------- accessibilità ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
.ev:focus-visible,.phrow:focus-visible,tr:focus-visible{
  outline:2px solid var(--red);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:120;background:var(--red);color:#fff;
 font-family:var(--m);font-size:11px;padding:11px 16px;letter-spacing:.12em;text-transform:uppercase}
.skip:focus{left:0}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  .mqt{animation:none}
  #seme,.busy s,.liveh s{animation:none}
  .slt{transition:none}
  *{transition-duration:.01ms!important}
}
/* tasti rapidi */
.kb{position:fixed;right:14px;bottom:14px;z-index:60;font-family:var(--m);font-size:9px;
 letter-spacing:.14em;text-transform:uppercase;color:var(--fg4);background:var(--panel);
 border:1px solid var(--line);padding:7px 11px;pointer-events:none;opacity:0;transition:opacity .3s}
.kb.on{opacity:1}
@media(max-width:900px){.kb{display:none}}

/* ---- fallback document pages (archive, posts, 404) ---- */
.lp26-doc .h1{font-size:clamp(30px,5vw,58px);font-weight:800;letter-spacing:-.035em;
 line-height:1.02;margin:0 0 var(--u3);color:var(--fg);font-variation-settings:"wdth" 92}
/* Il template scriveva padding:120px 0 90px dentro .w e cosi' azzerava i
   margini laterali: il testo legale finiva incollato al bordo mentre testata
   e piede restavano rientrati. Qui si toccano solo sopra e sotto, i lati
   restano quelli di .w — la stessa colonna di tutto il resto del sito. */
.w.docpad{padding-top:120px;padding-bottom:90px}
@media(max-width:760px){.w.docpad{padding-top:96px;padding-bottom:64px}}
.lp26-doc .h1{max-width:20ch}
.lp26-doc .prose{max-width:74ch;font-size:15.5px;line-height:1.72;color:var(--fg2)}
.lp26-doc .prose h2{font-size:22px;font-weight:800;color:var(--fg);margin:var(--u4) 0 var(--u1)}
.lp26-doc .prose h3{font-size:17px;font-weight:700;color:var(--fg);margin:var(--u3) 0 8px}
.lp26-doc .prose p{margin:0 0 var(--u2)}
.lp26-doc .prose a{color:var(--red);text-decoration:none;border-bottom:1px solid var(--redg)}
.lp26-doc .prose a:hover{border-bottom-color:var(--red)}
.lp26-doc .prose ul,.lp26-doc .prose ol{margin:0 0 var(--u2);padding-left:20px}
.lp26-doc .prose li{margin:0 0 6px}
.lp26-doc .prose img{max-width:100%;height:auto}
.lp26-doc .prose blockquote{border-left:2px solid var(--red);padding-left:16px;margin:0 0 var(--u2);color:var(--fg)}
/* Il testo legale arriva da langa-tools-pro con tabelle, codice e h4 che qui
   non erano mai stati vestiti: uscivano con lo stile del browser. Le tabelle
   possono essere piu' larghe della colonna di lettura, quindi scorrono da
   sole invece di sfondare la pagina. */
.lp26-doc .prose h4{font-size:14px;font-weight:700;color:var(--fg);margin:var(--u2) 0 6px;
 font-family:var(--m);letter-spacing:.04em}
.lp26-doc .prose strong{color:var(--fg);font-weight:700}
.lp26-doc .prose code{font-family:var(--m);font-size:12.5px;color:var(--fg);
 background:var(--bg2);border:1px solid var(--line);padding:1px 5px;white-space:nowrap}
.lp26-doc .prose table{width:100%;max-width:none;border-collapse:collapse;
 margin:0 0 var(--u3);font-size:12.5px;display:block;overflow-x:auto}
.lp26-doc .prose thead th{font-family:var(--m);font-size:9px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--fg3);text-align:left;font-weight:400;
 border-bottom:1px solid var(--line2);padding:0 14px 9px 0;white-space:nowrap}
.lp26-doc .prose td{border-bottom:1px solid var(--line);padding:11px 14px 11px 0;
 vertical-align:top;color:var(--fg2);line-height:1.55}
.lp26-doc .prose tbody tr:last-child td{border-bottom:0}
.lp26-doc .prose td:first-child{font-family:var(--m);font-size:11.5px;color:var(--fg);white-space:nowrap}
.lp26-doc .prose hr{border:0;border-top:1px solid var(--line);margin:var(--u3) 0}
/* il bottone delle preferenze cookie e' un'azione, non un link nel testo */
.lp26-doc .prose .langa-legal-open-preferences{display:inline-flex;align-items:center;
 font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--fg);border:1px solid var(--line2);border-bottom-color:var(--line2);
 padding:9px 15px;cursor:pointer;transition:.18s;background:none}
.lp26-doc .prose .langa-legal-open-preferences:hover{border-color:var(--red);
 background:var(--red);color:#fff}

/* ---- mobile: one clean stack, nothing overlaps ---- */
@media(max-width:760px){
 #hero{min-height:0;height:100svh}
 .hin{justify-content:flex-start;padding-top:120px}
 h1.big{font-size:clamp(28px,8.2vw,42px);max-width:13ch}
 .htag{font-size:15px;max-width:22ch;margin-top:14px}
 .hrot{font-size:9.5px;margin-top:12px;height:auto}
 .hbot .w{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .hbot .w::-webkit-scrollbar{display:none}
 .hs{flex:0 0 auto;min-width:0;width:auto;padding:10px 15px 11px;border-right:1px solid var(--line)}
 .hs b{font-size:18px}
 .hs span{margin-top:6px;font-size:7.5px;letter-spacing:.12em;white-space:nowrap}
 #gstart{padding:13px 22px;font-size:10px}
 .gsub{left:16px;right:16px;bottom:80px;transform:none;white-space:normal;text-align:center;line-height:1.6}
 body.playing .gsub{opacity:0}
 body.touch #pad,body.touch #jbtn{display:block}
 #pad{left:16px;bottom:66px;width:92px;height:92px}
 #knob{width:34px;height:34px;margin:-17px 0 0 -17px}
 #jbtn{right:16px;bottom:76px;width:64px;height:64px}
 .gbar .w{min-height:44px;flex-wrap:nowrap;overflow:hidden;gap:10px}
 .glg{gap:9px;font-size:7px}
 #gexit{padding:6px 10px;font-size:7.5px}
}
@media(max-width:760px){
 .gsplit{display:none}
 .ghud .w{gap:12px}
 .hin{padding-top:168px}
 .hlab{font-size:8.5px;letter-spacing:.18em;margin-bottom:16px}
 .hlab::before{width:20px}
 .gsub{color:var(--fg3)}
 .hbot{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
}

/* ---- bussola: dove sta il prossimo algoritmo ---- */
#gcw{width:132px}
#gcname{display:block;font-family:var(--m);font-size:8.5px;letter-spacing:.13em;
 text-transform:uppercase;color:var(--fg2);font-style:normal;margin-top:5px;line-height:1.4}
#gcw::before{content:"next";display:block;font-family:var(--m);font-size:7.5px;
 letter-spacing:.22em;text-transform:uppercase;color:var(--fg4);margin-bottom:8px;
 opacity:0;transition:opacity .4s}
body.playing #gcw::before{opacity:1}
@media(max-width:760px){#gcw{width:104px;right:12px;bottom:auto;top:120px}
 #gcomp{font-size:26px} #gcdist{font-size:10px} #gcname{font-size:7.5px}}
#gcw{opacity:0;transition:opacity .4s}
/* la bussola sta sopra il terreno illuminato: senza un fondo proprio, in
   chiaro spariva. Pannello leggero + ombra, in tutti e due i temi. */
#gcw{background:rgba(6,7,8,.42);backdrop-filter:blur(5px);border:1px solid var(--line);
 padding:9px 10px 10px}
#gcname,#gcw::before{color:var(--fg2)}
:root[data-theme="light"] #gcw{background:rgba(255,255,255,.80);border-color:rgba(0,0,0,.16)}
:root[data-theme="light"] #gcname,:root[data-theme="light"] #gcw::before{color:#3A3A3A}
:root[data-theme="light"] #gcdist{color:#7A4A00}

/* ---- social: glifi disegnati qui, non marchi presi in prestito ---- */
.fsoc{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
 border:1px solid var(--line);margin-top:var(--u4)}
@media(max-width:980px){.fsoc{grid-template-columns:repeat(3,1fr)}}
/* Due colonne fino in fondo: a una colonna erano otto righe alte e il
   footer sul telefono diventava una pagina a se'. */
@media(max-width:700px){.fsoc{grid-template-columns:repeat(2,1fr)}}
.fs{display:flex;align-items:center;gap:13px;padding:16px 18px;background:var(--bg);
 transition:background .18s,color .18s;min-width:0}
.fs:hover{background:var(--panel)}
.fs svg{width:21px;height:21px;flex:none;stroke:var(--fg3);fill:none;stroke-width:1.5;
 stroke-linecap:square;stroke-linejoin:miter;transition:stroke .18s}
.fs:hover svg{stroke:var(--red)}
.fs span{display:flex;flex-direction:column;gap:3px;min-width:0}
.fs b{font-family:var(--m);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
 color:var(--fg);font-weight:500;transition:color .18s}
.fs:hover b{color:var(--red)}
.fs i{font-family:var(--m);font-size:10.5px;font-style:normal;color:var(--fg3);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- fotografie dentro la voce che raccontano ---- */
.mdi{display:none}
.mdi.on{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
 border:1px solid var(--line);margin:var(--u2) 0}
.mdi.on.multi{grid-template-columns:1fr 1fr}
@media(max-width:560px){.mdi.on.multi{grid-template-columns:1fr}}
.mdi figure{margin:0;background:var(--bg2);position:relative}
.mdi img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
 filter:grayscale(.25) contrast(1.04)}
.mdi figcaption{padding:10px 12px 12px;font-family:var(--m);font-size:9.5px;
 letter-spacing:.08em;color:var(--fg2);line-height:1.6}
.mdi figcaption i{color:var(--red);font-style:normal;margin-right:9px}
.mdi figcaption span{display:block;color:var(--fg3);margin-top:5px;letter-spacing:.02em;
 font-size:10px;line-height:1.55}
.evp{display:inline-block;font-family:var(--m);font-size:8px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--red);border:1px solid var(--redg);
 padding:2px 7px;margin-left:11px;vertical-align:middle;text-decoration:none}
.lead.sub{color:var(--fg3);font-size:14px;margin-top:calc(var(--u2)*-1 + 10px)}

/* ---- touch: la scheda in alto, la bussola a meta' altezza, il pad in basso ---- */
body.touch #gcard.big{max-width:none}
/* La bussola stava a meta' altezza solo con `body.touch`. Su una finestra
   stretta senza tocco restava in alto a destra, cioe' DENTRO la fascia dei
   conteggi (misurato: y120-213 contro un HUD che arriva a 202). Adesso e'
   la larghezza a decidere, che e' quello che conta per il posto. */
body.touch #gcw{top:54%;bottom:auto;right:10px;width:96px;transform:none}
@media(max-width:760px){#gcw{top:54%;bottom:auto;right:10px;width:96px;transform:none}
 #gcomp{font-size:26px} #gcname{font-size:7.5px}}
body.touch #gcomp{font-size:26px}
body.touch #gcname{font-size:7.5px}
/* si vedono sempre, non solo a partita avviata: sono l'unico modo di guidare
   sul telefono e devono essere visibili prima di iniziare. */
body.touch #pad,body.touch #jbtn{display:block}

/* ---- comprare: bottone sul livello di servizio ---- */
.buy{display:flex;flex-direction:column;gap:4px;align-items:flex-start;margin-top:var(--u2);
 background:var(--red);color:#fff;border:0;padding:12px 15px;cursor:pointer;width:100%;
 font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
 transition:filter .18s;text-align:left}
.buy:hover{filter:brightness(1.14)}
.buy s{text-decoration:none;font-size:9px;letter-spacing:.1em;opacity:.82;text-transform:none}
.buy.free{background:none;border:1px solid var(--line2);color:var(--fg2)}
.buy.free:hover{border-color:var(--red);color:var(--red);filter:none}

/* ---- checkout ---- */
#co{position:fixed;inset:0;z-index:120;background:rgba(3,4,5,.86);backdrop-filter:blur(7px);
 display:none;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow:auto}
#co.open{display:flex}
.cobox{position:relative;width:100%;max-width:560px;background:var(--panel);
 border:1px solid var(--line2);padding:var(--u3)}
.cox{position:absolute;right:12px;top:11px;background:none;border:0;color:var(--fg3);
 font-size:15px;cursor:pointer;padding:6px;line-height:1}
.cox:hover{color:var(--red)}
.coh{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--u2);
 border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:var(--u2)}
.con{font-weight:800;font-size:21px;letter-spacing:-.026em;color:var(--fg)}
.cop{text-align:right;white-space:nowrap}
.cop b{display:block;font-family:var(--m);font-size:25px;font-weight:700;color:var(--red);
 letter-spacing:-.02em;line-height:1}
.cop s{text-decoration:none;font-family:var(--m);font-size:9px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--fg3);display:block;margin-top:5px}
#cof label{display:block;font-family:var(--m);font-size:9px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--fg3);margin-bottom:13px}
#cof label span{color:var(--red)}
#cof input,#cof textarea{display:block;width:100%;margin-top:7px;background:var(--bg);
 border:1px solid var(--line2);color:var(--fg);padding:12px 13px;font-family:var(--m);
 font-size:16px;letter-spacing:.01em;text-transform:none}
#cof input:focus,#cof textarea:focus{outline:none;border-color:var(--red)}
#cof textarea{resize:vertical;line-height:1.6}
#co-website,#bhp{position:absolute;left:-9999px;width:1px;height:1px}
.corow{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:520px){.corow{grid-template-columns:1fr;gap:0}}
.come{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 var(--u2)}
.come span{font-family:var(--m);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--fg3);border:1px solid var(--line);padding:6px 10px}
.cogo{width:100%;background:var(--red);color:#fff;border:0;padding:15px;cursor:pointer;
 font-family:var(--m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
 transition:filter .18s}
.cogo:hover{filter:brightness(1.14)}
.cogo:disabled{opacity:.55;cursor:default;filter:none}
.cofoot{font-family:var(--m);font-size:9.5px;line-height:1.75;color:var(--fg4);
 margin:14px 0 0;letter-spacing:.02em}
.cofoot b{color:var(--fg3);font-weight:500}
.coerr{font-family:var(--m);font-size:10.5px;line-height:1.6;color:var(--red);
 border-left:2px solid var(--red);padding-left:11px;margin:14px 0 0}
:root[data-theme="light"] #co{background:rgba(246,247,249,.9)}

/* ---- REGOLA FERMA: nessun campo sotto i 16px. Sotto quella soglia iOS
   ingrandisce la pagina al focus e non la rimette piu' a posto. Vale per
   tutti i campi del sito, presenti e futuri. ---- */
input:not([type="checkbox"]):not([type="radio"]),textarea,select,
#pq,.bkf input,.bkf select,#cof input,#cof textarea{font-size:16px}
.bkf input,.bkf select{padding:12px 12px}
/* le etichette e i micro-testi restano piccoli: e' il CAMPO che non puo' scendere */
.bkf label,.bkf .lb{font-size:9px}
/* paese e partita IVA affiancati, e il lampo rosso quando si arriva qui
   da un bottone Buy dei livelli */
.bkrow{display:grid;grid-template-columns:76px 1fr;gap:8px}
.bkrow input{width:100%}
.bkr.flash{animation:bkFlash 1.4s ease-out}
@keyframes bkFlash{0%{box-shadow:inset 0 0 0 2px var(--red)}100%{box-shadow:inset 0 0 0 2px transparent}}
#berr{margin-top:10px}
/* i legali raggiungibili dal footer, non solo dal banner dei cookie */
.flegal a{color:var(--fg3);border-bottom:1px solid var(--line2);padding-bottom:1px}
.flegal a:hover{color:var(--red);border-color:var(--red)}

/* ---- ricerca: a schermo intero sul telefono, niente zoom ---- */
/* iOS non rispetta overflow:hidden sull'html: il fondo continua a scorrere e
   la pagina sembra saltare. Si fissa il body e si rimette lo scroll dov'era. */
body.pallock{position:fixed;left:0;right:0;width:100%;overflow:hidden}
#pal{padding-top:10vh}
.pbox{max-width:660px}
.pi{display:flex;align-items:center;gap:12px;padding:12px 20px;cursor:pointer;
 border-bottom:1px solid var(--line);font-size:14px;line-height:1.35}
.pi.on{background:var(--bg2);box-shadow:inset 2px 0 0 var(--red)}
.pi .pt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pi .pt b{color:var(--red);font-weight:600}
.pi .pg2{font-family:var(--m);font-size:8px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--fg4);font-style:normal;border:1px solid var(--line);padding:3px 6px;
 margin-left:auto;flex:none}
.pi em:last-child{font-family:var(--m);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
 color:var(--fg3);font-style:normal;white-space:nowrap;flex:none}
.pi.none{color:var(--fg3);cursor:default;font-family:var(--m);font-size:12px}
#pr{max-height:58vh}
@media(max-width:760px){
 #pal{padding:0;height:100%;height:100dvh}
 .pbox{max-width:none;height:100%;height:100dvh;border:0;display:flex;flex-direction:column}
 /* 16px netti: sotto questa soglia iOS ingrandisce al fuoco. Mai scendere. */
 #pq{padding:20px 16px;flex:none;font-size:16px}
 #pr{max-height:none;flex:1}
 .pi{padding:14px 16px;font-size:15px}
 .pi em:last-child{display:none}
}

/* ---- barra del gioco: legenda cliccabile, non piu' tre scritte mute ---- */
.glg{display:flex;gap:6px;flex-wrap:wrap}
.lgi{display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);
 color:var(--fg3);font-family:var(--m);font-size:8.5px;letter-spacing:.14em;
 text-transform:uppercase;padding:7px 10px;cursor:pointer;transition:.18s;white-space:nowrap}
.lgi:hover{border-color:var(--red);color:var(--fg)}
.lgi i{width:11px;height:11px;display:block;flex:none}
.lgi b{font-family:var(--m);font-size:11px;color:var(--fg);font-weight:700;
 font-variant-numeric:tabular-nums;margin-left:2px}
#ginfo{display:flex;align-items:center;gap:9px;background:none;border:1px solid var(--line2);
 color:var(--fg3);font-family:var(--m);font-size:8.5px;letter-spacing:.16em;
 text-transform:uppercase;padding:7px 12px;cursor:pointer;transition:.18s;white-space:nowrap}
#ginfo:hover{border-color:var(--red);color:var(--red)}
#ginfo s{width:15px;height:15px;border:1px solid currentColor;border-radius:50%;
 display:flex;align-items:center;justify-content:center;text-decoration:none;
 font-size:9px;font-style:italic;flex:none}
#gexit{margin-left:auto}
@media(max-width:760px){#ginfo span{display:none}.lgi{padding:6px 8px;font-size:7.5px;gap:6px}
 .lgi b{font-size:10px}}

/* ---- pannello: cosa sono quelle icone ---- */
#gi{position:fixed;inset:0;z-index:130;background:rgba(3,4,5,.9);backdrop-filter:blur(8px);
 display:none;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow:auto}
#gi.open{display:flex}
.gibox{position:relative;width:100%;max-width:640px;background:var(--panel);
 border:1px solid var(--line2);padding:var(--u3)}
.gix{position:absolute;right:12px;top:11px;background:none;border:0;color:var(--fg3);
 font-size:15px;cursor:pointer;padding:6px;line-height:1}
.gix:hover{color:var(--red)}
.gih em{font-family:var(--m);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
 color:var(--red);font-style:normal;display:block;margin-bottom:11px}
.gih h3{font-weight:800;font-size:clamp(21px,3.2vw,29px);letter-spacing:-.03em;
 line-height:1.1;margin:0 0 var(--u2);color:var(--fg)}
.gip{font-size:14.5px;line-height:1.65;color:var(--fg2);margin:0 0 var(--u3)}
.gip b{color:var(--fg)}
.gis{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);
 padding:14px 0}
.gis i{width:16px;height:16px;flex:none;margin-top:3px}
.gis b{display:block;font-family:var(--m);font-size:10px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--fg);margin-bottom:6px}
.gis span{display:block;font-size:13px;line-height:1.6;color:var(--fg2)}
.gis span b.r{display:inline;color:var(--red);letter-spacing:.02em;text-transform:none;
 font-size:13px;font-family:var(--d)}
.gis.hot{background:var(--bg2);box-shadow:inset 3px 0 0 var(--red);padding-left:12px}
.gig{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
 border:1px solid var(--line);margin:var(--u3) 0}
@media(max-width:600px){.gig{grid-template-columns:repeat(2,1fr)}}
.gig>div{background:var(--bg);padding:13px 12px}
.gig em{font-family:var(--m);font-size:8px;letter-spacing:.2em;text-transform:uppercase;
 color:var(--red);font-style:normal;display:block;margin-bottom:7px}
.gig b{display:block;font-weight:800;font-size:14px;letter-spacing:-.02em;color:var(--fg);
 margin-bottom:5px}
.gig span{display:block;font-family:var(--m);font-size:9px;line-height:1.6;color:var(--fg3)}
.gik{display:grid;gap:9px;border-top:1px solid var(--line);padding-top:var(--u2)}
.gik div{font-family:var(--m);font-size:10.5px;color:var(--fg2);display:flex;
 align-items:center;gap:10px;flex-wrap:wrap}
.gik kbd{font-family:var(--m);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
 border:1px solid var(--line2);padding:4px 8px;color:var(--fg);background:var(--bg)}
.gif{font-family:var(--m);font-size:10px;line-height:1.75;color:var(--fg4);
 margin:var(--u2) 0 0;border-top:1px solid var(--line);padding-top:14px}

/* ---- l'obiettivo, prima di partire ---- */
/* l'obiettivo sta SOPRA il bottone, non sotto: prima si sovrapponevano */
.gsub{left:50%;right:auto;bottom:156px;transform:translateX(-50%);
 width:min(620px,calc(100% - 44px));text-align:center;line-height:1.7;
 text-transform:none;letter-spacing:.01em;font-size:10.5px;color:var(--fg3);white-space:normal}
.gsub b{display:block;color:var(--fg);font-family:var(--d);font-weight:800;font-size:16px;
 letter-spacing:-.022em;margin-bottom:8px;text-transform:none}
.gsub span{display:block}
@media(max-width:760px){
 .gsub{bottom:164px;left:16px;right:16px;width:auto;transform:none;font-size:9.5px}
 .gsub b{font-size:13.5px;margin-bottom:0}
 .gsub span{display:none}   /* sul telefono resta la riga forte, il resto sta nel pannello */
}
/* la bussola avvisa quando il prossimo e' in alto */
#gcw.air #gcomp{animation:pulse 1.1s infinite}
#gcw.air #gcname{color:var(--red)}

/* ---- niente sovrapposizioni: la barra resta una riga sola ---- */
.gbar .w{flex-wrap:nowrap}
.glg{flex-wrap:nowrap}
@media(max-width:760px){
 /* sul telefono la legenda e' forma + numero: l'etichetta la spiega il pannello */
 .lgi{font-size:0;gap:0;padding:6px 7px}
 .lgi b{font-size:11px;margin-left:6px}
 .gbar .w{gap:7px;min-height:40px;padding-top:7px;padding-bottom:7px}
 #ginfo{padding:6px 8px}
 #gexit{padding:6px 9px;font-size:7.5px}
 /* Joypad e salto: stessa base, stessi margini laterali. Prima stavano a
    74 e 84 dal fondo, cioe' storti fra loro di dieci pixel. */
 :root{--gb-h:40px;--gc-h:88px;--gb-gap:14px}
 body.touch #pad{bottom:calc(var(--gb-h) + var(--gb-gap));left:var(--gb-gap);
  width:var(--gc-h);height:var(--gc-h)}
 body.touch #jbtn{bottom:calc(var(--gb-h) + var(--gb-gap) + 13px);right:var(--gb-gap);
  width:62px;height:62px}
 /* Prima di premere "Take the inventory" i comandi non servono a niente, e
    stavano sopra il bottone: su touch erano display:block sempre. */
 body.touch:not(.playing) #pad,
 body.touch:not(.playing) #jbtn{opacity:0;pointer-events:none}
 /* DASH stava a 206px dal fondo e finiva sotto la scheda della bussola:
    misurato, 73px di sovrapposizione sul nome del nucleo. Sale sopra
    JUMP, nella stessa colonna, con lo stesso margine. */
 body.touch #dbtn{bottom:calc(var(--gb-h) + var(--gb-gap) + 13px + 62px + 10px);
  right:var(--gb-gap);width:56px;height:56px;font-size:9px}
 body.touch:not(.playing) #dbtn{opacity:0;pointer-events:none}
}
/* il suggerimento tastiera stava sopra la barra dei numeri: sale */
.kb{bottom:112px}
@media(max-width:820px){.kb{display:none}}
/* il bottone di avvio sale quando la barra dei numeri va a due righe */
@media(max-width:820px){.gsub{bottom:146px}}
@media(max-width:760px){.gsub{bottom:104px}}

/* ---- il gioco in tema chiaro ----------------------------------------
   La scena 3D ora ha la sua tavolozza chiara (vedi ZONE[].L in app.js).
   Qui si sistema tutto il cromo che era inchiodato su rgba(6,7,8): su
   fondo chiaro erano rettangoli neri sospesi. ---- */
:root[data-theme="light"] .gbar{background:rgba(255,255,255,.86)}
:root[data-theme="light"] .gsplit span{background:rgba(255,255,255,.78)}
:root[data-theme="light"] .gsplit{background:var(--line2)}
:root[data-theme="light"] #gcard{background:rgba(255,255,255,.96);
 box-shadow:0 18px 44px rgba(20,26,36,.16)}
:root[data-theme="light"] #gcard b{color:var(--fg)}
:root[data-theme="light"] #pad,:root[data-theme="light"] #jbtn{
 background:rgba(255,255,255,.62);border-color:var(--line2);color:var(--fg2)}
:root[data-theme="light"] #gi{background:rgba(246,247,249,.9)}
:root[data-theme="light"] .lgi{border-color:var(--line2)}
:root[data-theme="light"] .sh-dep{
 background:repeating-linear-gradient(135deg,#C98B00 0 3px,#20242B 3px 6px)}

/* ---- mentre giochi, il cromo di LANGA Tools si sposta ----------------
   "Protected by Shield" e il bottone Credits sono fixed e finivano sopra
   la barra del gioco e sotto il joypad. Non si cancellano: sono nostri e
   tornano appena esci dal gioco. ---- */
/* Solo mentre il gioco e' davanti agli occhi: .hero-on lo dice
   l'osservatore che gia' ferma il disegno quando l'hero esce di scena.
   Appena scrolli sulle pagine, Credits e Shield tornano. */
body.playing.hero-on #langa-button,
body.playing.hero-on #langa-bottom-border,
body.playing.hero-on #aegis-shield-footer{
 opacity:0!important;pointer-events:none!important;transition:opacity .3s}
#langa-button,#langa-bottom-border,#aegis-shield-footer{transition:opacity .3s}
/* la barra del gioco sta comunque sopra a tutto il resto */
.gbar{z-index:90}

/* ---- footer compatto sul telefono: due colonne, non una lista lunga ---- */
@media(max-width:560px){
 .fg{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--u2) var(--u2)}
 /* "backbone." riempie la cella rimasta vuota accanto a Direct
    invece di prendersi una riga tutta sua */
 .fbig{grid-column:auto;align-self:end;text-align:left;
  font-size:clamp(17px,5.4vw,26px);margin:0;max-width:none}
 .fc a,.fc span{line-height:1.85;font-size:11.5px}
 .fc b{margin-bottom:8px}
 .fsoc{margin-top:var(--u3)}
 .fs{gap:9px;padding:12px 11px}
 .fs svg{width:17px;height:17px}
 .fs b{font-size:9px;letter-spacing:.11em}
 .fs i{font-size:9.5px}
 .fbar{gap:5px 14px;font-size:9px;line-height:1.6}
 footer{padding:var(--u4) 0 var(--u4)}
}
@media(max-width:360px){.fs i{display:none}.fs{padding:13px 10px}}


/* ══════════════════════════════════════════════════════════════════════
   I QUATTRO ELEMENTI — 08/09/2026
   Prima fuoco, terra, acqua e aria erano solo il colore del terreno: non
   c'era niente da prendere e prendere non faceva niente. Ora ogni era ha
   un nucleo che sta di lato al sentiero, da' un potere e apre un capitolo.
   ══════════════════════════════════════════════════════════════════════ */
:root{--e-earth:#CBB48A;--e-water:#35C6FF;--e-fire:#FF7A28;--e-air:#AFC4FF}

/* ---- i quattro segnalini nell'HUD ----
   Vivono dentro .gstat, che ha gia' `.gstat div b{display:block;font-size:19px}`
   e `.gstat div span{display:block}`: senza selettori piu' specifici quelle due
   regole mandavano ogni chip a capo e spaccavano il contatore in due righe. */
/* i quattro poteri, quando li hai tutti, sono quattro pastiglie lunghe:
   in fila con l'etichetta non ci stavano e "ELEMENTS" veniva tagliato.
   L'etichetta prende la sua riga, le pastiglie la loro. */
.gstat .gel{display:flex;justify-content:flex-end;align-items:center;gap:6px;
 flex-wrap:wrap;row-gap:5px;
 flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.gstat .gel>em{display:inline-flex;align-items:baseline;gap:5px;font-style:normal;
 flex:1 0 100%;justify-content:flex-end;
 font-family:var(--m);font-size:8px;letter-spacing:.17em;text-transform:uppercase;
 color:var(--fg4);white-space:nowrap;margin:0}
.gstat .gel>em b{display:inline;font-family:var(--m);font-size:11px;font-weight:700;
 color:var(--fg);line-height:1;margin:0}
.gstat .gel .gec{display:inline-flex;align-items:center;gap:5px;margin:0;
 font-family:var(--m);font-size:8px;letter-spacing:.13em;text-transform:uppercase;
 color:var(--fg3);background:rgba(6,7,8,.55);border:1px solid var(--line2);
 padding:5px 7px;transition:.35s;white-space:nowrap}
.gstat .gel .gec s{width:6px;height:6px;text-decoration:none;flex:none;margin:0;
 background:transparent;border:1px solid currentColor;transform:rotate(45deg)}
.gstat .gel .gec u{display:inline-block;text-decoration:none;opacity:0;max-width:0;
 overflow:hidden;white-space:nowrap;transition:.35s;color:inherit;margin:0}
.gstat .gel .gec.got{color:#fff;border-color:currentColor;box-shadow:0 0 14px -4px currentColor}
.gstat .gel .gec.got u{opacity:.85;max-width:120px;margin-left:3px}
/* il comando: senza, il potere e' un nome e basta */
.gstat .gel .gec i{display:inline-block;font-style:normal;opacity:0;max-width:0;
 overflow:hidden;white-space:nowrap;transition:.3s;font-size:7px;letter-spacing:.14em;
 text-transform:uppercase}
.gstat .gel .gec.got i{opacity:.9;max-width:110px;margin-left:6px;padding:1px 5px;
 border:1px solid currentColor}
.gstat .gel .gec.got s{background:currentColor}
.gstat .gel .e-earth.got{color:var(--e-earth)} .gstat .gel .e-water.got{color:var(--e-water)}
.gstat .gel .e-fire.got{color:var(--e-fire)}   .gstat .gel .e-air.got{color:var(--e-air)}
:root[data-theme="light"] .gstat .gel .gec{background:rgba(255,255,255,.6)}
@media(max-width:760px){
 .gstat .gel{gap:4px;margin-top:9px;padding-top:8px}
 .gstat .gel .gec{font-size:7px;padding:4px 5px;letter-spacing:.08em}
 .gstat .gel .gec.got u{max-width:84px}
 /* sul telefono l'etichetta "ELEMENTS n/4" costava una riga intera alla
    HUD, e quella riga finiva sul titolo. Le quattro pastiglie dicono gia'
    terra/acqua/fuoco/aria e si accendono: l'etichetta e' un doppione. */
 .gstat .gel>em{display:none}
}

/* IL CRONOMETRO. Sta sotto il conteggio, nella stessa colonna: si legge
   con la coda dell'occhio senza staccarsi dalla strada. */
.gtime{display:inline-flex;align-items:baseline;gap:7px;margin-left:9px;
 padding-left:9px;border-left:1px solid var(--line2)}
.gtime b{font-family:var(--m);font-size:11px;font-weight:700;letter-spacing:.08em;
 color:var(--fg);font-variant-numeric:tabular-nums}
.gtime em{font-style:normal;font-size:8px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--fg4)}

/* LA MAPPA DEI TASTI. Il tasto a sinistra, cosa fa a destra, allineati:
   si legge in due secondi perche' non e' un discorso, e' una tabella. */
#gcore.tasti{max-width:340px}
#gcore.tasti i{display:block;font-style:normal;font-family:var(--m);font-size:8.5px;
 letter-spacing:.22em;text-transform:uppercase;color:var(--zone);margin-bottom:11px}
.gtasti{display:flex;flex-direction:column;gap:7px}
.gtasti span{display:flex;align-items:center;gap:11px}
.gtasti b{flex:none;min-width:86px;text-align:center;font-family:var(--m);font-size:10px;
 font-weight:700;letter-spacing:.1em;color:var(--fg);padding:5px 8px;
 border:1px solid var(--line2);background:rgba(255,255,255,.03)}
.gtasti u{text-decoration:none;font-size:12px;color:var(--fg2)}
#gcore.tasti p{margin:13px 0 0;padding-top:12px;border-top:1px solid var(--line2);
 font-size:12px;line-height:1.6;color:var(--fg3)}

/* MENTRE CORRI SPARISCE IL DOPPIONE.
   La frase dell'era, la riga dell'obiettivo e le tre pastiglie di stato
   dicevano quello che gia' dicono la bussola a destra e la barra in basso.
   Fuori dalla partita tornano: li' servono, perche' non c'e' nient'altro. */
/* `opacity:0` li rendeva invisibili ma lasciava lo spazio: sotto il titolo
   dell'era restava mezza colonna vuota con la barra dell'accento lunga il
   doppio del testo. Si toglie l'elemento, non il suo colore. */
body.playing #hnote,
body.playing #gobj,
body.playing .ghud .gsplit{display:none}

/* ═══════════ LA PAGINA QUANDO IL 3D NON C'E' ═══════════
   Il canvas e tutta la plancia del gioco spariscono: senza scena sono
   arredamento che indica una cosa che non esiste. L'eroe resta un eroe —
   titolo, frase, due bottoni — e sotto arriva l'inventario vero. */
.nogl #gl,
.nogl .ghud,
.nogl #gcw,
.nogl #gstk,
.nogl #gkeys,
.nogl #glab,
.nogl #gcard,
.nogl #gcore,
.nogl #gchap,
.nogl #gdead,
.nogl #ghint,
.nogl .gbar,
.nogl #pad,
.nogl #jbtn,
.nogl #dbtn{display:none!important}
/* senza scena l'eroe non deve essere alto uno schermo di nero: si stringe
   sul suo contenuto e lascia spazio a quello che viene dopo */
.nogl #hero{height:auto;min-height:0;padding:calc(var(--u6) + 54px) 0 var(--u5)}
.nogl #hero::before,
.nogl #hero::after{display:none}
.nogl .hin{height:auto}
/* `.gsub` (frase + bottoni) e `.hbot` (la barra dei numeri) sono ancorati
   al fondo dell'eroe: con l'eroe alto quanto il suo contenuto finivano uno
   sopra l'altro. Senza 3D tornano nel flusso, in colonna, dove stanno. */
.nogl .gsub{position:static;transform:none;left:auto;right:auto;bottom:auto;
 width:auto;max-width:none;white-space:normal;text-align:left;
 margin-top:var(--u3);
 /* `.gsub` sta fuori dal contenitore `.w`: senza le sue stesse guide
    finirebbe appiccicato al bordo della finestra */
 max-width:1300px;margin-left:auto;margin-right:auto;padding:0 var(--u3)}
@media(max-width:840px){.nogl .gsub{padding:0 var(--u2)}}
@media(max-width:560px){.nogl .gsub{padding:0 16px}}
.nogl .gacr{justify-content:flex-start}
/* l'eroe senza scena non ha bisogno di mezzo schermo di aria in cima */
.nogl #hero{padding-top:calc(var(--u5) + 54px);
 /* `#hero` ha il fondo scuro fisso perche' normalmente e' solo il muro
    DIETRO la scena 3D: in tema chiaro il terreno lo dipinge il canvas.
    Senza canvas restava nero con sopra il testo del tema chiaro. */
 background:var(--bg)}
/* 224 px di spazio riservato alla plancia del gioco: senza gioco e' aria */
.nogl .hin{padding-top:0}
/* le ombre servivano a staccare il testo dalla scena: su un fondo piatto
   sono solo sporco */
.nogl .hin h1,.nogl .hlab,.nogl .htag,.nogl .hrot,.nogl .gsub{text-shadow:none}
.nogl .gsub{color:var(--fg2)}
.nogl .hbot{position:static;margin-top:var(--u4);background:none;
 backdrop-filter:none;-webkit-mask-image:none;mask-image:none}
/* la pastiglia dello stato: nel gioco e' minuscola dentro una scheda, qui
   deve reggere una riga di elenco */
.ngll em.gs{display:inline-flex;align-items:center;margin:0;padding:4px 9px;
 font-family:var(--m);font-size:9px;font-style:normal;letter-spacing:.14em;
 text-transform:uppercase;text-decoration:none;line-height:1;white-space:nowrap;
 border:1px solid transparent}
/* nel gioco la pastiglia «deprecated» ha le strisce da cantiere: bella
   sopra un reperto in 3D, illeggibile su una riga d'elenco. Qui il
   giallo lo porta il bordo e il testo resta testo. */
.ngll em.gs-dep{background:#171310;color:#F0BE4A;border-color:#8A6A1E;text-shadow:none}
.ngll em.gs-use{background:#151A20;color:#C6CDD6;border-color:#2F3944}
.ngll em.gs-dis{background:#2A0C0C;color:#FF6A6A;border-color:#7A1B1B}

/* L'INVENTARIO IN CHIARO. Le stesse diciannove righe del gioco, lette
   dagli stessi dati: anno, nome, cosa e', stato. */
.ngl{border-top:1px solid var(--line);background:var(--bg)}
.nglw{padding:var(--u5) 0 var(--u6)}
.nglh{margin-bottom:var(--u4)}
.nglh b{display:block;font-size:clamp(28px,4vw,44px);font-weight:800;
 letter-spacing:-.02em;color:var(--fg)}
.nglh span{display:block;max-width:62ch;margin-top:var(--u2);
 font-size:14px;line-height:1.65;color:var(--fg3)}
.ngll{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.ngll li{display:grid;gap:4px 18px;align-items:baseline;
 grid-template-columns:78px minmax(0,1fr);
 padding:14px 0;border-bottom:1px solid var(--line2)}
.ngll i{font-style:normal;font-family:var(--m);font-size:11px;
 letter-spacing:.12em;color:var(--fg4)}
.ngll b{font-size:16px;font-weight:700;color:var(--fg)}
.ngll u{grid-column:2;text-decoration:none;font-size:13px;line-height:1.6;
 color:var(--fg3)}
.ngll em{grid-column:2;justify-self:start;margin-top:3px}
@media(min-width:760px){
 .ngll li{grid-template-columns:92px minmax(0,26ch) minmax(0,1fr) auto;
  align-items:center}
 .ngll u{grid-column:auto}
 .ngll em{grid-column:auto;justify-self:end;margin-top:0}
}

/* LO SCATTO SI VEDE ANCHE FUORI DAL 3D: mezzo secondo di bordo caldo
   attorno al campo. E' il trucco piu' vecchio che c'e' e funziona sempre. */
#hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:9;
 opacity:0;transition:opacity .5s ease-out;
 background:radial-gradient(ellipse at 50% 62%,transparent 38%,rgba(255,90,20,.30) 100%)}
body.scatto #hero::after{opacity:1;transition:opacity .06s}

/* LA RIGA DEI TASTI. Non lampeggia, non se ne va, non chiede niente. */
#gkeys{position:absolute;left:var(--u3);bottom:calc(var(--gb-h) + 16px);
 display:none;align-items:center;gap:7px;z-index:11;pointer-events:none;
 font-family:var(--m);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--fg4)}
#gkeys b{font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--fg3);
 padding:3px 6px;border:1px solid var(--line2);background:rgba(8,9,11,.6)}
#gkeys{gap:17px}
#gkeys span{display:flex;align-items:center;gap:6px}
#gkeys b+b{margin-left:-5px}
/* chiuso: bordo tratteggiato e la ragione scritta di fianco. Il testo del
   tasto resta leggibile — un tasto chiuso va letto, non indovinato. */
#gkeys span.lock b{border-style:dashed;color:var(--fg3)}
#gkeys span.lock{color:var(--fg4)}
#gkeys span.lock::after{content:" \2014 needs the " attr(data-why);opacity:.85}
/* aperto: si accende del colore del suo elemento */
#gkeys span.got b{border-color:var(--zone);color:var(--zone)}
body.playing #gkeys{display:flex}
body.touch #gkeys{display:none!important}
body.parlagrande #gkeys{opacity:.25}

/* IL NUCLEO: potere e tasto, in colonna, senza paragrafo ne' bottoni */
#gcore.potere{max-width:320px;padding:12px 16px 14px}
#gcore.potere i{display:flex;align-items:baseline;gap:8px;font-style:normal;
 font-family:var(--m);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
 color:var(--zone)}
#gcore.potere i u{text-decoration:none;color:var(--fg4)}
#gcore.potere b.gpow-b{display:block;margin-top:5px;font-size:21px;font-weight:800;
 letter-spacing:.03em;color:var(--fg)}
#gcore.potere u.gpow-k{display:inline-block;margin-top:8px;text-decoration:none;
 font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
 padding:4px 9px;border:1px solid var(--zone);color:var(--zone)}

/* IL CAPITOLO RIDOTTO A UNA PAROLA. Niente riquadro, niente righe: il
   nome dell'elemento in mezzo al campo, un secondo e mezzo, via. */
#gchap.solo{background:none;border:0;box-shadow:none;padding:0;
 text-align:center;left:0;right:0;max-width:none;pointer-events:none}
#gchap.solo b{display:block;font-family:var(--m);font-size:34px;font-weight:800;
 letter-spacing:.24em;text-transform:uppercase;color:var(--zone);
 text-shadow:0 2px 26px rgba(0,0,0,.85)}
#gchap.solo i{display:block;margin-top:4px;font-style:normal;font-family:var(--m);
 font-size:9px;letter-spacing:.3em;color:var(--fg4)}
@media(max-width:760px){#gchap.solo b{font-size:26px;letter-spacing:.18em}}

/* ---- ogni scheda del gioco ha un'uscita ---- */
#gcard,#gcore{pointer-events:none}
#gcard.on,#gcore.on{pointer-events:auto}
.gcta{display:inline-flex;align-items:center;gap:7px;margin-top:13px;
 font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
 background:var(--red);color:#fff;border:0;padding:9px 13px;cursor:pointer;
 transition:.2s;font-weight:600}
.gcta s{text-decoration:none;transition:transform .2s}
.gcta:hover{filter:brightness(1.15)} .gcta:hover s{transform:translateX(4px)}
.gcx{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--fg3);
 font-size:19px;line-height:1;cursor:pointer;padding:4px 6px;transition:.2s}
.gcx:hover{color:var(--fg)}
#gcard{padding-right:30px}

/* ---- il banner di un nucleo ---- */
/* IL NUCLEO STA DOVE STA IL REPERTO. Prima era largo il doppio, in mezzo
   allo schermo, con la riga colorata in cima invece che di lato: sembrava
   un'altra cosa. E' la stessa cosa, quindi ha la stessa forma e lo stesso
   angolo — sullo schermo c'e' sempre un riquadro solo, sempre li'. */
#gcore{position:absolute;left:var(--u3);bottom:118px;z-index:9;max-width:320px;
 background:rgba(6,7,8,.96);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
 border:1px solid var(--line2);border-left:3px solid var(--fg3);
 padding:15px 30px 15px 17px;
 opacity:0;transform:translateY(10px);transition:.35s cubic-bezier(.2,.7,.3,1)}
#gcore.on{opacity:1;transform:none}
#gcore i{color:var(--fg3)}
#gcore b{display:block;font-weight:800;font-size:17px;letter-spacing:-.024em;
 line-height:1.15;margin:7px 0 6px;color:#fff}
/* la pastiglia del potere: al posto dello stato, stessa riga, stessa altezza */
#gcore .gpow{color:#060708;font-weight:700;background:var(--fg3)}
/* il nome del potere grande, e sotto il tasto: si legge in mezzo secondo */
#gcore .gpow-b{font-size:clamp(22px,4vw,32px);letter-spacing:-.02em;line-height:1;
 margin:9px 0 0}
#gcore .gpow-k{display:inline-block;text-decoration:none;font-family:var(--m);
 font-size:9px;letter-spacing:.2em;text-transform:uppercase;margin:8px 0 8px;
 padding:4px 9px;border:1px solid currentColor;color:var(--zone)}
#gcore.el-earth .gpow-k{color:var(--e-earth)} #gcore.el-water .gpow-k{color:var(--e-water)}
#gcore.el-fire .gpow-k{color:var(--e-fire)}   #gcore.el-air .gpow-k{color:var(--e-air)}
#gcore.el-earth{border-left-color:var(--e-earth)} #gcore.el-earth i{color:var(--e-earth)}
#gcore.el-earth .gpow{background:var(--e-earth)}
#gcore.el-water{border-left-color:var(--e-water)} #gcore.el-water i{color:var(--e-water)}
#gcore.el-water .gpow{background:var(--e-water)}
#gcore.el-fire{border-left-color:var(--e-fire)}   #gcore.el-fire i{color:var(--e-fire)}
#gcore.el-fire .gpow{background:var(--e-fire)}
#gcore.el-air{border-left-color:var(--e-air)}     #gcore.el-air i{color:var(--e-air)}
#gcore.el-air .gpow{background:var(--e-air)}
:root[data-theme="light"] #gcore{background:rgba(255,255,255,.96)}
:root[data-theme="light"] #gcore b{color:var(--fg)}
:root[data-theme="light"] #gcard{background:rgba(255,255,255,.96)}
:root[data-theme="light"] #gcard b{color:var(--fg)}
@media(max-width:760px){#gcore{left:14px;right:14px;max-width:none;padding:14px 30px 15px 15px}}

/* ---- DASH: esiste solo quando il nucleo di fuoco e' tuo ---- */
#dbtn{position:absolute;right:22px;bottom:206px;z-index:7;width:74px;height:74px;
 border:1px solid var(--e-fire);background:rgba(255,122,40,.14);color:var(--e-fire);
 font-family:var(--m);font-size:9px;letter-spacing:.14em;cursor:pointer;
 display:none;touch-action:manipulation;transition:.15s}
:root[data-c-fire="1"] body.playing #dbtn,
html[data-c-fire="1"] body.playing #dbtn{display:block}
#dbtn.cool{opacity:.32;color:var(--fg3);border-color:var(--line2);background:transparent}
#dbtn:active{background:rgba(255,122,40,.34)}

/* ---- i quattro capitoli chiusi ---- */
.lkg{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
 border:1px solid var(--line);margin-top:var(--u4)}
@media(max-width:900px){.lkg{grid-template-columns:1fr}}
.lockd{position:relative;background:var(--bg);padding:var(--u2) var(--u2) var(--u2);
 min-height:270px;overflow:hidden}
.lkh i{font-family:var(--m);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--fg4);font-style:normal;display:block}
.lkh h3{font-size:clamp(21px,2.4vw,30px);font-weight:800;letter-spacing:-.03em;margin:6px 0 3px}
.lkh span{font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--fg3)}
.lkb{margin-top:15px;font-size:14px;line-height:1.62;color:var(--fg2);
 filter:blur(7px);opacity:.30;user-select:none;transition:filter .8s,opacity .8s}
.lkb p+p{margin-top:11px}
.lkb .lkf{margin-top:14px;padding-top:11px;border-top:1px solid var(--line);
 font-family:var(--m);font-size:11px;letter-spacing:.02em;color:var(--fg3);line-height:1.5}
.lkv{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
 align-items:flex-start;gap:7px;padding:var(--u2);
 background:linear-gradient(180deg,transparent 6%,var(--bg) 46%);transition:opacity .5s}
/* SOLO il figlio diretto: .lkgo sta dentro .lkv, e con ".lkv s" il rettangolo
   del lucchetto finiva anche intorno alla freccia del bottone. */
.lkv>s{width:14px;height:18px;text-decoration:none;border:2px solid var(--fg3);
 border-top:0;position:relative;flex:none}
.lkv>s::before{content:"";position:absolute;left:1px;right:1px;bottom:100%;height:9px;
 border:2px solid var(--fg3);border-bottom:0}
.lkv b{font-family:var(--m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--fg3)}
.lkv p{font-size:15.5px;font-weight:700;letter-spacing:-.018em;color:var(--fg);line-height:1.3;
 max-width:30ch}
.lkv em{font-style:normal;font-size:12px;color:var(--fg3)}
.lkv em b{font-family:var(--d);font-size:12px;letter-spacing:0;text-transform:none;color:var(--fg2)}
.lkgo{display:inline-flex;align-items:center;gap:8px;margin-top:5px;cursor:pointer;
 font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
 background:var(--red);color:#fff;border:0;padding:10px 14px;font-weight:600;transition:.2s}
.lkgo s{text-decoration:none;transition:transform .2s}
.lkgo:hover{filter:brightness(1.15)} .lkgo:hover s{transform:translateY(-3px)}
.lockd.open .lkb{filter:none;opacity:1}
.lockd.open .lkv{opacity:0;pointer-events:none}
.lockd.open{outline:1px solid var(--line2);outline-offset:-1px}
.lockd[data-core="earth"].open{box-shadow:inset 3px 0 0 var(--e-earth)}
.lockd[data-core="water"].open{box-shadow:inset 3px 0 0 var(--e-water)}
.lockd[data-core="fire"].open{box-shadow:inset 3px 0 0 var(--e-fire)}
.lockd[data-core="air"].open{box-shadow:inset 3px 0 0 var(--e-air)}
.gsub2{display:inline;color:var(--fg2)}

/* ══════════════════════════════════════════════════════════════════════
   SPIGOLI VIVI OVUNQUE — richiesta di Luca 08/09/2026
   Il tema non aveva angoli arrotondati: i soli border-radius sono i cerchi
   veri (punti, pomello del joypad). Il tondo veniva da LANGA Tools PRO —
   banner dei cookie, pulsanti, barra dei credits — che qui viene azzerato.
   ══════════════════════════════════════════════════════════════════════ */
#langa-cookie-banner,#langa-cookie-banner *,
.lcb,.lcb *,.lcb-btn,.lcb-prefs,.lcb-panel,
#langa-credits-iframe,#langa-credits-btn,
[id^="langa-"] ,[id^="langa-"] *,[class^="lcb"],[class^="lcb"] *{
 border-radius:0!important}

/* la barra "Protected by Shield" e' fissa e centrata a tutta pagina: non
   c'entrava niente con la colonna del sito. Il suo justify-content:center e'
   INLINE e !important, quindi nessuna regola di foglio lo batte: si sposta
   il figlio con i margini automatici, che in flexbox vincono sull'allineamento
   del contenitore. Cosi' "Protected by Shield" parte dal bordo sinistro della
   colonna, come ogni altra riga della pagina. */
#aegis-shield-footer{min-height:22px!important}
#aegis-shield-footer>a{position:absolute!important;bottom:4px!important;
 left:calc(max(0px,(100vw - 1300px)/2) + var(--u3))!important}
@media(max-width:840px){#aegis-shield-footer>a{
 left:calc(max(0px,(100vw - 1300px)/2) + var(--u2))!important}}
@media(max-width:560px){#aegis-shield-footer>a{
 left:calc(max(0px,(100vw - 1300px)/2) + 16px)!important}}
/* e la pagina non finisce piu' sotto la barra fissa */
.ft{padding-bottom:38px}

/* il paragrafo sotto il titolo: era --fg4 (#3A414B) senza alone, cioe'
   invisibile sopra il terreno chiaro del gioco. */
.gsub{color:var(--fg2)!important;text-shadow:0 0 26px var(--halo),0 0 10px var(--halo)}
.gsub b{color:var(--fg)}
.gsub .gsub2{color:var(--fg)}


/* ══════════════════════════════════════════════════════════════════════
   LANGA TOOLS PRO — spigoli vivi e colori del sito
   Il plugin porta i suoi angoli tondi e un banner cookie grigio chiaro con
   pulsanti bianchi: su un sito nero e rosso e' una patacca. Qui il tondo
   viene azzerato ovunque (campi compresi) e i pulsanti diventano
   rosso/nero con il testo bianco. I valori base stanno anche nelle
   impostazioni del plugin: questo e' la rete di sicurezza.
   ══════════════════════════════════════════════════════════════════════ */
.langa-legal-cookiebanner{--langa-legal-radius:0px!important}
[class*="lcb"],[class*="lcb"] *,
[class*="langa-legal"],[class*="langa-legal"] *,
[id*="langa-"],[id*="langa-"] *,
[class*="langa-tools"],[class*="langa-tools"] *{border-radius:0!important}
/* Attenzione: "via il border radius" vuol dire via gli ANGOLI TONDI, non via
   i cerchi. Il joypad, il pomello, il tasto SALTO e le pastiglie di stato sono
   cerchi: squadrarli aveva rotto i comandi del gioco. Qui si azzerano solo i
   raggi diversi da 50%. */
input,textarea,select,.btn,[type="text"],[type="email"],[type="tel"],
[type="number"],[type="search"],[type="url"],[type="password"]{border-radius:0!important}
button:not(#jbtn):not(#dbtn):not(#pad):not(#knob):not(.lgi):not(#ginfo){border-radius:0}

.langa-legal-cookiebanner{
 background:#0B0D10!important;color:#EDEFF2!important;
 border:1px solid #272E38!important;box-shadow:none!important}
.langa-legal-cookiebanner *{font-family:var(--d)!important}
.langa-legal-cookiebanner a,.lcb-link{color:#98A1AE!important;text-decoration:none!important}
.langa-legal-cookiebanner a:hover,.lcb-link:hover{color:#FF0000!important}
.lcb-btn{border:1px solid #FF0000!important;background:transparent!important;
 color:#EDEFF2!important;font-family:var(--m)!important;font-size:11px!important;
 letter-spacing:.1em!important;text-transform:uppercase!important;
 padding:9px 14px!important;cursor:pointer!important;transition:.16s!important;
 box-shadow:none!important;text-shadow:none!important}
.lcb-btn:hover{background:rgba(255,0,0,.14)!important}
.lcb-accept,.lcb-save{background:#FF0000!important;color:#fff!important;font-weight:700!important}
.lcb-accept:hover,.lcb-save:hover{filter:brightness(1.15)!important;background:#FF0000!important}
.lcb-deny{border-color:#272E38!important;color:#98A1AE!important}
.lcb-deny:hover{border-color:#EDEFF2!important;color:#EDEFF2!important;background:transparent!important}
.lcb-view{border-color:#272E38!important;color:#98A1AE!important}
.lcb-view:hover{border-color:#FF0000!important;color:#EDEFF2!important}
:root[data-theme="light"] .langa-legal-cookiebanner{
 background:#0B0D10!important;color:#EDEFF2!important}

/* ---- puntatore del nucleo piu' vicino ---- */
/* dentro la bussola, non un riquadro a parte: su telefono i due si
   sovrapponevano e il bordo colorato sembrava un focus */
#gel{display:none;align-items:center;gap:7px;margin:8px -9px -8px;
 padding:7px 9px;border-top:1px solid var(--line);
 font-family:var(--m);font-size:9px;letter-spacing:.1em;
 text-transform:uppercase;color:var(--fg3)}
#gel.on{display:flex}
#gel s{text-decoration:none;font-size:13px;line-height:1;flex:none;
 transition:transform .12s linear;color:currentColor}
/* Nome e potere su una riga loro, la distanza sotto: in 132px "EARTH ·
   GRIP 114M" non ci sta e si troncava proprio sulla parola che serve. */
#gel{flex-wrap:wrap;row-gap:3px}
#gel em{font-style:normal;flex:1 0 100%;min-width:0;white-space:normal;
 font-size:8px;line-height:1.3;order:2}
#gel s{order:1}
#gel b{font-weight:700;color:var(--fg2);font-size:9.5px;order:1;margin-left:auto}
#gel.e-earth{color:var(--e-earth)} #gel.e-water{color:var(--e-water)}
#gel.e-fire{color:var(--e-fire)}    #gel.e-air{color:var(--e-air)}
@media(max-width:760px){#gel{font-size:8px;margin:7px -8px -7px;padding:6px 8px}}


/* ══════════════════════════════════════════════════════════════════════
   LA R SPECCHIATA — 08/09/2026
   La favicon (r_fav.png, 2022) e' una "r" col gambo a DESTRA e la spalla a
   SINISTRA: e' specchiata. Il marchio sul sito aveva la r normale, quindi
   favicon e logo raccontavano due cose diverse. Ora la r di "prata" e'
   specchiata come la favicon, ovunque compaia il nome.
   ══════════════════════════════════════════════════════════════════════ */
.rx{display:inline-block;transform:scaleX(-1);font-style:inherit;font-weight:inherit}

/* Il paragrafo sotto il titolo era un muro di testo grigio su terreno chiaro,
   e la sfumatura messa per salvarlo era peggio del male. Ora: una riga sola,
   e chi vuole sapere apre il pannello che quelle cose le spiega gia'. */
.gsub{background:none;padding:0;max-width:min(680px,92vw);
 display:flex;flex-direction:column;align-items:center;gap:11px}
.gsub b{font-size:clamp(14px,1.6vw,17px);line-height:1.35}
.gsub span{display:none}
.gsub{text-shadow:0 1px 3px var(--halo2)}
.gsubi{display:inline-flex;align-items:center;gap:8px;cursor:pointer;pointer-events:auto;
 font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
 background:rgba(6,7,8,.6);color:var(--fg);border:1px solid var(--line2);
 padding:9px 15px;transition:.18s;backdrop-filter:blur(5px)}
.gsubi s{text-decoration:none;transition:transform .18s;color:var(--red)}
.gsubi:hover{border-color:var(--red);background:var(--red);color:#fff}
.gsubi:hover s{color:#fff;transform:translateX(4px)}
:root[data-theme="light"] .gsubi{background:rgba(255,255,255,.72)}
/* i due inviti stanno su una riga sola: il rosso decide, l'altro spiega.
   Impilati si toccavano e facevano scena sporca. */
.gacr{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}

/* ---- IL GRUPPO ------------------------------------------------------
   Blocco sotto AEGIS: dice che la tecnologia e' di LANGA e porta ai
   network veri. I link sono esterni: si vedono, non si nascondono. */
.netb{margin-top:var(--u4);border:1px solid var(--line);padding:var(--u3);
 background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.netbh{display:flex;align-items:center;gap:9px;font-family:var(--m);font-size:9.5px;
 letter-spacing:.2em;text-transform:uppercase;color:var(--fg3);margin-bottom:12px}
.netbh s{width:7px;height:7px;background:var(--red);text-decoration:none;flex:0 0 auto}
.netb p{font-size:15px;line-height:1.62;color:var(--fg2);max-width:78ch;margin:0}
.netb p b{color:var(--fg)}
.netl{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.netl a{display:flex;align-items:center;gap:8px;font-family:var(--m);font-size:10px;
 letter-spacing:.06em;color:var(--fg);text-decoration:none;
 border:1px solid var(--line2);padding:9px 13px;transition:.18s}
.netl a s{width:5px;height:5px;background:var(--red);text-decoration:none;flex:0 0 auto}
.netl a em{font-style:normal;color:var(--fg4);letter-spacing:.1em;text-transform:uppercase;font-size:8px}
.netl a:hover{border-color:var(--red);color:var(--fg)}
.netg{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:16px;
 background:var(--line);border:1px solid var(--line)}
.netg a{display:block;padding:14px 13px 15px;text-decoration:none;background:var(--bg);
 transition:.18s}
.netg a b{display:block;font-family:var(--m);font-size:11px;letter-spacing:.18em;
 color:var(--fg);margin-bottom:7px}
.netg a span{display:block;font-size:11.5px;line-height:1.5;color:var(--fg4)}
.netg a:hover{background:var(--bg2)}
.netg a:hover b{color:var(--red)}
@media(max-width:900px){.netg{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.netg{grid-template-columns:1fr}.netb p{font-size:14px}}
@media(max-width:420px){.gacr{gap:9px}.gacr #gstart,.gacr .gsubi{width:100%;justify-content:center}}

/* il tasto SALTO mostra quanto hai caricato, e dice quando hai il doppio */
/* NON toccare position: #jbtn e' absolute nell'hero. Metterlo relative lo
   rimetteva nel flusso e su telefono finiva sopra il joypad. */
#jbtn{overflow:hidden}
#jbtn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--chg,0%);
 background:rgba(255,0,0,.30);transition:height .06s linear;pointer-events:none}
#jbtn.chg{border-color:var(--red);color:#fff}
#jbtn.dbl::before{content:"2\00d7";position:absolute;top:5px;right:7px;font-size:9px;
 color:var(--e-air);letter-spacing:.06em}


/* nessun alone di sistema sui comandi del gioco: resta un anello rosso solo
   per chi naviga da tastiera */
#hero button:focus,#gcw,#gel,#gcard,#gcore{outline:none}
#hero button:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* "View preferences" arrivava bianco (#F3F4F6) da una regola piu' specifica
   del plugin e il testo era chiaro: invisibile finche' non ci passavi sopra. */
.langa-legal-cookiebanner .lcb-btn.lcb-view,
.langa-legal-cookiebanner .lcb-btn.lcb-deny,
.lcb .lcb-btn.lcb-view,.lcb .lcb-btn.lcb-deny{
 background:transparent!important;background-image:none!important;
 color:#EDEFF2!important;border:1px solid #3A414B!important;box-shadow:none!important}
.langa-legal-cookiebanner .lcb-btn.lcb-view:hover,
.langa-legal-cookiebanner .lcb-btn.lcb-deny:hover,
.lcb .lcb-btn.lcb-view:hover,.lcb .lcb-btn.lcb-deny:hover{
 border-color:#FF0000!important;color:#fff!important;background:rgba(255,0,0,.12)!important}


/* ---- etichetta del nodo che stai inseguendo ----
   "i paletti, cerchi, triangoli cosa fanno?" — adesso quello in testa si
   presenta: nome e stato, agganciati alla sua posizione sullo schermo. */
/* Era una scheda uguale alle altre, e sullo schermo di schede ce n'era
   gia' una. Questo e' un cartellino appeso al nodo: una riga, il nome, e
   lo stato come pallino. Si legge senza smettere di guardare la strada. */
#glab{position:fixed;left:0;top:0;z-index:6;pointer-events:none;opacity:0;
 transition:opacity .22s;white-space:nowrap;
 display:flex;align-items:center;gap:7px;
 background:rgba(6,7,8,.80);border:1px solid var(--line2);border-bottom-width:2px;
 padding:5px 10px;backdrop-filter:blur(5px)}
#glab.on{opacity:1}
#glab b{font-size:11px;font-weight:700;letter-spacing:-.01em;color:#fff}
#glab em{font-family:var(--m);font-size:7px;letter-spacing:.16em;
 text-transform:uppercase;font-style:normal;color:var(--fg3);
 display:flex;align-items:center;gap:5px}
#glab em::before{content:"";width:5px;height:5px;flex:none;background:currentColor}
#glab.gs-use{border-bottom-color:#8A93A0} #glab.gs-use em{color:#8A93A0}
#glab.gs-dep{border-bottom-color:#D9A227} #glab.gs-dep em{color:#D9A227}
#glab.gs-dis{border-bottom-color:#FF0000} #glab.gs-dis em{color:#FF3A3A}
:root[data-theme="light"] #glab{background:rgba(255,255,255,.9)}
:root[data-theme="light"] #glab b{color:var(--fg)}
/* Sul telefono non era un'etichetta sul nodo: era inchiodata in un punto
   fisso e diventava una seconda scheda bianca, identica alla striscia, che
   ripeteva quello che la bussola dice gia' ("NEXT · 37m · IL NOME"). Tre
   scatole per due informazioni. Qui ne resta una. */
@media(max-width:760px){#glab{display:none!important}}

/* ---- i quattro nuclei dentro il pannello "how it works" ---- */
.gic{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
 border:1px solid var(--line);margin:var(--u2) 0}
@media(max-width:640px){.gic{grid-template-columns:1fr}}
.gic>div{background:var(--bg);padding:13px 15px}
.gic em{display:block;font-family:var(--m);font-size:8px;letter-spacing:.2em;
 text-transform:uppercase;font-style:normal;color:var(--fg4)}
.gic b{display:block;font-family:var(--m);font-size:13px;letter-spacing:.08em;margin:4px 0 5px}
.gic span{display:block;font-size:12.5px;color:var(--fg2);line-height:1.5}
.gic .e-earth b{color:var(--e-earth)} .gic .e-water b{color:var(--e-water)}
.gic .e-fire b{color:var(--e-fire)}   .gic .e-air b{color:var(--e-air)}

/* ---- preloader ----
   Prima del primo frame WebGL lo schermo era nero e basta. */
#pl{position:fixed;inset:0;z-index:9999;background:var(--bg);
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
 transition:opacity .6s ease}
#pl.off{opacity:0;pointer-events:none}
/* la capsula e' il marchio: nel preloader era un rettangolo netto */
#pl s{width:16px;height:34px;text-decoration:none;position:relative;display:block;
 border-radius:8px;
 background:linear-gradient(180deg,#F3F1EC 0 50%,var(--red) 50% 100%);
 animation:plspin 1.5s cubic-bezier(.6,0,.3,1) infinite}
#pl em{font-family:var(--d);font-weight:800;font-size:13px;letter-spacing:-.02em;
 font-style:normal;color:var(--fg3)}
#pl em i{color:var(--red);font-style:normal}
@keyframes plspin{0%{transform:rotate(0) scaleY(1)}
 45%{transform:rotate(180deg) scaleY(.82)}
 55%{transform:rotate(180deg) scaleY(1.08)}
 100%{transform:rotate(360deg) scaleY(1)}}
@media(prefers-reduced-motion:reduce){#pl s{animation:none}}

/* ══════════════════════════════════════════════════════════════════════
   TRAGUARDI E FINALE — 08/09/2026
   Prima si arrivava a 19/19 e usciva una schedina come tutte le altre:
   non si capiva di aver finito, e per strada non c'era nessun segno di
   quanto mancasse. Ora la barra dice a che punto sei, ogni era chiusa e'
   un traguardo, e alla fine c'e' un conto vero.
   ══════════════════════════════════════════════════════════════════════ */

/* la barra dei 19: ogni tacca e' un algoritmo, il colore e' il suo stato */
.gstat .gpb{display:flex;gap:2px;justify-content:flex-end;margin-top:11px}
.gstat .gpb s{display:block;width:9px;height:5px;text-decoration:none;flex:none;
 background:var(--line2);opacity:.55;transition:.4s cubic-bezier(.2,.7,.3,1)}
.gstat .gpb s.brk{margin-left:7px}
.gstat .gpb s.got{opacity:1;height:9px;margin-top:-4px}
.gstat .gpb s.p-use.got{background:#8A93A0}
.gstat .gpb s.p-dep.got{background:#D9A227}
.gstat .gpb s.p-dis.got{background:#FF0000;box-shadow:0 0 10px -2px #FF0000}
@media(max-width:760px){.gstat .gpb s{width:6px}.gstat .gpb s.brk{margin-left:5px}}

/* il pannello finale */
#gend{position:fixed;inset:0;z-index:120;display:none;align-items:center;
 justify-content:center;padding:var(--u3) var(--u2);
 background:rgba(4,5,6,.72);backdrop-filter:blur(7px);overflow-y:auto}
#gend.on{display:flex}
.gendb{position:relative;width:min(720px,100%);background:var(--bg2);
 border:1px solid var(--line2);border-top:3px solid var(--red);
 padding:var(--u3) var(--u3) var(--u2);
 animation:gendIn .5s cubic-bezier(.2,.7,.3,1)}
@keyframes gendIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.gendb>i{font-family:var(--m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
 font-style:normal;display:block;color:var(--red)}
.gendb h4{font-size:clamp(24px,3.6vw,38px);font-weight:800;letter-spacing:-.035em;
 line-height:1.06;margin:11px 0 var(--u2)}
.gect{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
 border:1px solid var(--line);margin-bottom:var(--u2)}
.gect>div{background:var(--bg);padding:14px 15px}
.gect b{display:block;font-family:var(--m);font-size:28px;font-weight:700;line-height:1;
 font-variant-numeric:tabular-nums}
.gect span{display:block;font-family:var(--m);font-size:8.5px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--fg4);margin-top:7px;line-height:1.4}
.gect .w b{color:var(--gia)} .gect .r b{color:var(--red)}
.gedl{border-left:2px solid var(--red);padding:2px 0 2px 14px;margin-bottom:var(--u2)}
.gedl .k{display:block;font-family:var(--m);font-size:8.5px;letter-spacing:.18em;
 text-transform:uppercase;color:var(--fg4);margin-bottom:7px}
.gedl i{display:block;font-style:normal;font-family:var(--m);font-size:12px;
 color:var(--fg2);line-height:1.75}
.gedl i b{color:var(--fg);font-weight:700}
.gendb p{font-size:14.5px;line-height:1.6;color:var(--fg2)}
.gendb p+p{margin-top:11px}
.gendb .gelock{font-family:var(--m);font-size:11.5px;color:var(--gia);
 border-top:1px solid var(--line);padding-top:12px;margin-top:14px}
.gebtn{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--u2)}
.gebtn .gcta{margin-top:0}
.gebtn .gcta:last-child{background:transparent;color:var(--fg);border:1px solid var(--line2)}
.gebtn .gcta:last-child:hover{border-color:var(--red);background:var(--redg)}
@media(max-width:640px){
 .gendb{padding:var(--u2) var(--u2) var(--u1)}
 .gect{grid-template-columns:1fr}
 .gebtn .gcta{width:100%;justify-content:center}
}


/* ══════════════════════════════════════════════════════════════════════
   LA COLLEZIONE — 08/09/2026
   Le schede uscivano e sparivano. Quello che hai raccolto e' il senso del
   gioco: qui si riguarda, si scorre, e le caselle vuote dicono cosa manca.
   ══════════════════════════════════════════════════════════════════════ */
#glogb{display:inline-flex;align-items:center;gap:7px;font-family:var(--m);font-size:9px;
 letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);cursor:pointer;
 background:none;border:1px solid var(--line2);padding:7px 11px;transition:.18s}
#glogb s{width:7px;height:7px;text-decoration:none;flex:none;
 background:transparent;border:1px solid currentColor;transform:rotate(45deg)}
#glogb b{color:var(--fg);font-weight:700;font-size:11px}
#glogb u{text-decoration:none;color:var(--fg4)}
#glogb:hover{border-color:var(--red);color:var(--fg)}
#glogb.full{border-color:var(--red);color:var(--red)}
#glogb.full s{background:var(--red)}

#glog{position:fixed;inset:0;z-index:120;display:none;align-items:flex-start;
 justify-content:center;padding:var(--u3) var(--u2);
 background:rgba(4,5,6,.74);backdrop-filter:blur(7px);overflow-y:auto}
#glog.on{display:flex}
.glogb{position:relative;width:min(980px,100%);background:var(--bg2);
 border:1px solid var(--line2);border-top:3px solid var(--red);
 padding:var(--u3) var(--u3) var(--u2);animation:gendIn .45s cubic-bezier(.2,.7,.3,1)}
.glogb>i{font-family:var(--m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
 font-style:normal;display:block;color:var(--red)}
.glogb h4{font-size:clamp(20px,2.8vw,30px);font-weight:800;letter-spacing:-.03em;
 line-height:1.1;margin:9px 0 6px}
.glogp{font-size:13.5px;color:var(--fg2);line-height:1.55;margin-bottom:var(--u2)}
.glogg{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:1px;
 background:var(--line);border:1px solid var(--line)}
.lgc{background:var(--bg);padding:12px 13px 11px;min-height:104px;
 display:flex;flex-direction:column}
.lgc em{font-family:var(--m);font-size:9px;letter-spacing:.16em;color:var(--fg4);
 font-style:normal}
.lgc b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.02em;margin:5px 0 4px;
 line-height:1.15}
.lgc span{display:block;font-size:11.5px;color:var(--fg3);line-height:1.45;flex:1}
.lgc s{display:inline-block;text-decoration:none;font-family:var(--m);font-size:7.5px;
 letter-spacing:.16em;margin-top:9px;padding:3px 6px;align-self:flex-start}
.lgc.gs-use s{background:#2A313B;color:#C6CDD6}
.lgc.gs-dep s{background:#D9A227;color:#0B0B0B}
.lgc.gs-dis s{background:#FF0000;color:#fff}
.lgc.gs-use{box-shadow:inset 2px 0 0 #8A93A0}
.lgc.gs-dep{box-shadow:inset 2px 0 0 #D9A227}
.lgc.gs-dis{box-shadow:inset 2px 0 0 #FF0000}
.lgc.void{opacity:.34}
.lgc.void b{color:var(--fg4)}
.lgc.void s{background:transparent;border:1px dashed var(--line2);color:var(--fg4)}
.glogc{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
 border:1px solid var(--line);border-top:0}
@media(max-width:760px){.glogc{grid-template-columns:1fr 1fr}}
.lgk{background:var(--bg);padding:12px 13px;opacity:.4}
.lgk.got{opacity:1}
.lgk em{display:block;font-family:var(--m);font-size:8px;letter-spacing:.2em;
 text-transform:uppercase;font-style:normal;color:var(--fg4)}
.lgk b{display:block;font-family:var(--m);font-size:12px;letter-spacing:.08em;margin:4px 0 4px}
.lgk u{display:block;text-decoration:none;font-family:var(--m);font-size:9px;
 letter-spacing:.1em;text-transform:uppercase;color:var(--fg4);margin-bottom:5px}
.lgk span{display:block;font-size:11.5px;color:var(--fg3);line-height:1.45}
.lgk.e-earth.got b{color:var(--e-earth)} .lgk.e-water.got b{color:var(--e-water)}
.lgk.e-fire.got b{color:var(--e-fire)}   .lgk.e-air.got b{color:var(--e-air)}
.glogf{font-family:var(--m);font-size:11.5px;color:var(--fg3);margin-top:var(--u2);
 display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.glogf .gcta{margin-top:0}
/* il tabellone di fine corsa: tempo, catena piu' lunga, record */
.getime{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 20px;
 font-family:var(--m);margin:var(--u2) 0}
.getime b{font-size:22px;font-weight:800;letter-spacing:.02em;color:var(--fg);
 font-variant-numeric:tabular-nums}
.getime s{text-decoration:none;font-size:8.5px;letter-spacing:.18em;
 text-transform:uppercase;color:var(--fg4);margin-right:8px}
@media(max-width:640px){
 .glogb{padding:var(--u2) var(--u2) var(--u1)}
 .glogg{grid-template-columns:1fr 1fr}
 .lgc{min-height:0;padding:10px}
 /* il testo per intero e' il motivo per cui la collezione esiste: nasconderlo
    sul telefono voleva dire lasciare l'utente senza la frase di nessuno dei
    diciannove, visto che in gioco la scheda si ferma a tre righe. */
 .lgc b{font-size:12.5px} .lgc span{font-size:10.5px;line-height:1.4}
}

/* il tasto DASH, la prima volta, dice cosa fa */
#dbtn.hint{animation:dbp 1.1s ease-in-out 4}
#dbtn.hint::before{content:"SHIFT \2014 burst of speed";position:absolute;bottom:calc(100% + 8px);
 right:0;white-space:nowrap;font-family:var(--m);font-size:8.5px;letter-spacing:.12em;
 background:var(--e-fire);color:#0B0B0B;padding:4px 8px;font-weight:700;z-index:3}
/* sul telefono non c'e' nessun tasto SHIFT, e il fumetto finiva sulla bussola */
body.touch #dbtn.hint::before{content:"tap for a burst of speed";right:auto;left:0}
@media(hover:none){#dbtn.hint::before{content:"tap for a burst of speed";right:auto;left:0}}
@keyframes dbp{0%,100%{box-shadow:0 0 0 0 rgba(255,122,40,0)}
 50%{box-shadow:0 0 0 7px rgba(255,122,40,.20)}}


/* ---- il rigo dei messaggi del gioco ----
   Un rigo solo, in alto al centro, che dice cosa e' appena successo e
   sparisce da solo. Serve perche' il mondo adesso reagisce e senza una
   parola non si capirebbe perche'. */
#ghint{position:absolute;left:50%;top:118px;transform:translate(-50%,-8px);z-index:9;
 pointer-events:none;opacity:0;transition:.28s cubic-bezier(.2,.7,.3,1);
 font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
 white-space:nowrap;background:rgba(6,7,8,.86);border:1px solid var(--line2);
 border-bottom-width:2px;padding:8px 14px;color:var(--fg)}
#ghint.on{opacity:1;transform:translate(-50%,0)}
#ghint.z0{border-bottom-color:var(--e-earth)} #ghint.z1{border-bottom-color:var(--e-water)}
#ghint.z2{border-bottom-color:var(--e-fire)}  #ghint.z3{border-bottom-color:var(--e-air)}
:root[data-theme="light"] #ghint{background:rgba(255,255,255,.92)}
/* Su telefono in basso c'erano tre inquilini: questo, la riga dell'obiettivo
   e il joypad. Il messaggio e' di passaggio, quindi sale in alto; la riga
   dell'obiettivo, che e' permanente, si tiene il posto in basso. */
@media(max-width:760px){#ghint{top:104px;bottom:auto;font-size:8.5px;padding:7px 10px;
 max-width:calc(100vw - 28px);overflow:hidden;text-overflow:ellipsis}}

/* la riga dell'avversario nel pannello */
.gis.gisw{border-left:2px solid var(--red)}

/* ---- la barra dei comandi su telefono ----
   con la collezione in piu' non ci stava: ora scorre di lato e i bottoni
   hanno una superficie da dito. */
@media(max-width:760px){
 .gbar .w{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:8px;
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 93%,transparent);
  mask-image:linear-gradient(90deg,#000 93%,transparent)}
 .gbar .w::-webkit-scrollbar{display:none}
 .gbar .glg,.gbar button{flex:none}
 #glogb{padding:9px 12px}
 #ginfo span{display:none}
 #gexit{font-size:8.5px;padding:9px 11px}
}


/* ════════ TELEFONO: LA HUD NON SI ACCAVALLA PIU' ════════
   Misurato a 390x844 prima di questa regola:
     #ghint  y104-134  sopra  .gz  y56-148   (il titolo della zona)
     #glab   y262-307  sopra  .w   y206-369  (la riga degli elementi)
   Ogni pezzo ha la sua fascia e non entra in quella di un altro. */
@media(max-width:760px){
 /* Il suggerimento scende sotto il blocco del titolo, in mezzo allo schermo
    vuoto, dove non copre niente. */
 /* Misurato: a 62px il suggerimento entrava per cinque pixel nel piede
    della bussola ("Earth · GRIP"). A 30 la fascia e' libera e sopra il
    pad restano tredici pixel. */
 #ghint{top:auto;bottom:calc(var(--gb-h) + var(--gc-h) + var(--gb-gap)*2 + 30px);
  max-width:calc(100vw - 32px);text-align:center}
 /* L'etichetta del reperto smette di inseguire l'oggetto: si ferma in basso
    a sinistra. Le coordinate le scrive il JS nello stile in linea, quindi
    qui servono gli !important, altrimenti perde. */
 #glab{position:absolute!important;left:var(--gb-gap)!important;right:auto!important;
  top:auto!important;bottom:calc(var(--gb-h) + var(--gc-h) + var(--gb-gap)*2)!important;
  /* il JS scrive anche una translate per inseguire l'oggetto: va spenta,
     se no la posizione qui sopra viene traslata via lo stesso */
  transform:none!important;max-width:calc(100vw - 32px)}
 /* "collection 3/19": sul telefono il totale non aggiunge niente e ruba
    trenta pixel alla barra, che poi deve scorrere. */
 #glogb u{display:none}
 /* "show the title" era largo un terzo dello schermo. */
 #gexit{font-size:0;padding:9px 12px}
 #gexit::after{content:"title";font-size:8.5px;letter-spacing:.14em}
 /* Il pannello del reperto nella fascia libera sopra i comandi. */
 /* La scheda del reperto nella fascia libera fra il titolo e la bussola.
    Prima stava a top:108, cioe' addosso al blocco del titolo (56-202).
    Il massimo di altezza le impedisce di allungarsi sugli altri: se il
    testo e' lungo, scorre dentro. */
 /* Le misure fisse (214, poi 262) duravano fino alla riga successiva che
    la HUD si prendeva. Adesso la fascia la misura il gioco: vedi --hudb.
    Qui resta solo lo scorrimento, per le schede lunghe. */
 #gcard,#gcore,#gchap{overflow-y:auto;-webkit-overflow-scrolling:touch}
 /* Quando un harvester ti prende, la scheda del reperto non e' piu' il
    punto: sparisce per i due secondi della rottura, cosi' "a harvester got
    you" resta da solo al centro invece di attraversarla. Spostare il
    pannello della rottura sarebbe stato peggio: e' l'unica cosa che in quel
    momento devi leggere, e sta al centro perche' li' guardi. */
 body.broken #gcard,body.broken #gcore{opacity:0;pointer-events:none;transition:opacity .08s}
}

/* ════════ TELEFONO: LE TABELLE DIVENTANO SCHEDE ════════
   720px di tabella dentro 358 di schermo: il contenitore scorreva di lato e
   si leggeva mezza colonna per volta. Sotto i 700 la riga si apre in
   verticale e ogni campo si presenta con il nome della sua colonna. */
@media(max-width:700px){
 .tw{overflow-x:visible;-webkit-mask-image:none;mask-image:none}
 /* table ha min-width:720px, che e' quello che costringeva allo scorrimento:
    va tolto insieme al resto, se no la scheda resta larga come la tabella. */
 .tw table,.tw tbody,.tw tr,.tw td{display:block;width:auto;max-width:none;min-width:0}
 .tw td.n{white-space:normal}
 /* l'intestazione non serve piu': ogni cella dice da se' che campo e' */
 .tw thead{display:none}
 .tw tr{border:1px solid var(--line);padding:13px 15px;margin-bottom:9px;
  background:var(--bg2)}
 .tw tr:last-child{margin-bottom:0}
 .tw td{border:0;padding:4px 0;font-size:13px;line-height:1.5}
 .tw td::before{content:attr(data-l);display:block;font-family:var(--m);font-size:8px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--fg4);margin-bottom:1px}
 /* il nome e' il titolo della scheda: non gli serve l'etichetta */
 .tw td.n{font-size:15.5px;font-weight:700;letter-spacing:-.015em;padding-top:0;
  padding-bottom:7px;margin-bottom:6px;border-bottom:1px solid var(--line)}
 .tw td.n::before{display:none}
}

/* ---- LA CATENA ----
   Sta sotto la bussola, compare solo da due in su e se ne va da sola.
   Non deve mai coprire il gioco: e' un numero, non un pannello. */
#gstk{position:absolute;left:var(--u2);top:46%;transform:translate(-14px,-50%);z-index:9;
 pointer-events:none;opacity:0;transition:.22s cubic-bezier(.2,.7,.3,1);
 display:flex;flex-direction:column;align-items:flex-start;gap:2px}
#gstk.on{opacity:1;transform:translate(0,-50%)}
#gstk b{font-family:var(--m);font-size:30px;font-weight:800;line-height:.9;
 letter-spacing:-.04em;color:var(--red);
 text-shadow:0 0 18px rgba(255,0,0,.45),0 2px 0 rgba(0,0,0,.55)}
#gstk u{font-family:var(--m);font-size:8px;letter-spacing:.24em;text-transform:uppercase;
 text-decoration:none;color:var(--fg3)}
@media(max-width:760px){
 #gstk{top:auto;bottom:262px;left:14px;transform:translate(0,10px)}
 #gstk.on{transform:translate(0,0)}
 #gstk b{font-size:22px}
}
@media(prefers-reduced-motion:reduce){#gstk{transition:none}}

/* la riga della catena nel pannello */
.gis.gisc{border-left:2px solid var(--e-water)}


/* ══════════════════════════════════════════════════════════════════════
   /book — 08/09/2026
   Tre cose che non andavano: le cinque aree erano indistinguibili, i quattro
   livelli sbrodolavano in verticale, e la nota legale stava in una colonna
   stretta in fondo a sinistra come se fosse un ripensamento.
   ══════════════════════════════════════════════════════════════════════ */

/* ---- il segno di ogni area ---- */
.domb button{display:flex;flex-direction:column;align-items:flex-start}
.domb button .di{width:23px;height:23px;display:block;margin-bottom:12px;color:var(--fg4);
 transition:color .18s}
.domb button .di svg{width:100%;height:100%;display:block}
.domb button:hover .di{color:var(--red)}
.domb button.on .di,.domb button.on:hover .di{color:#fff}
@media(max-width:900px){.domb button .di{width:20px;height:20px;margin-bottom:9px}}
/* Da telefono le aree stavano una sotto l'altra come cinque cartelloni:
   l'icona a sinistra e il testo accanto le riduce a righe. */
@media(max-width:480px){
 .domb button{display:grid;grid-template-columns:21px 1fr;gap:2px 13px;
  align-items:center;padding:13px 16px}
 .domb button .di{grid-row:1/3;width:21px;height:21px;margin:0;align-self:center}
 .domb button em{grid-column:2;margin:0}
 .domb button strong{grid-column:2;font-size:14.5px}
}

/* ---- il carosello dei livelli ---- */
.svcw{position:relative}
.svc{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);
 overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;
 -webkit-overflow-scrolling:touch;cursor:grab;overscroll-behavior-x:contain}
.svc::-webkit-scrollbar{display:none}
.svc.drag{cursor:grabbing;scroll-snap-type:none}
.svc.drag *{user-select:none}
.sv{display:flex;flex-direction:column;flex:0 0 min(384px,84vw);background:var(--bg2);
 scroll-snap-align:start;border-bottom:0}
.sv-a,.sv-b{border-right:0;border-bottom:1px solid var(--line)}
.sv-c{flex:1}
/* le tre fasce si allineano fra le schede: senza, «What you get» partiva a
   quote diverse e il nastro sembrava storto */
.sv-a{padding:22px 22px 24px;min-height:234px}
.sv-b{min-height:156px}
.sv-b,.sv-c{padding:20px 22px 22px}
@media(max-width:520px){.sv-a{min-height:0}.sv-b{min-height:0}}
.sv-a h3{font-size:26px}
.sv-b .q{font-size:15.5px}
@media(max-width:1000px){.sv{display:flex}}
@media(max-width:520px){.sv{flex:0 0 88vw}.sv-a h3{font-size:23px}}

/* Le frecce stanno nella barra sotto, non sopra le schede: sopra coprivano il
   testo proprio della scheda che stai leggendo. */
.svcf{display:flex;align-items:center;gap:9px;margin-top:12px;
 font-family:var(--m);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
 color:var(--fg4)}
.svca{width:36px;height:30px;background:none;border:1px solid var(--line2);color:var(--fg2);
 cursor:pointer;font-size:17px;line-height:1;flex:none;
 display:flex;align-items:center;justify-content:center;transition:.16s}
.svca:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff}
.svca:disabled{opacity:.28;cursor:not-allowed}
.svcf .svcd{margin-left:5px}
.svcd{display:flex;gap:5px}
.svcd button{width:26px;height:3px;background:var(--line2);border:0;padding:0;cursor:pointer;
 transition:background .2s}
.svcd button.on{background:var(--red)}
.svcd button:hover{background:var(--fg3)}
@media(hover:none){.svcf span{display:none}}

/* ---- la nota in fondo, a tutta larghezza ---- */
.bkft{margin-top:var(--u3);padding-top:16px;border-top:1px solid var(--line);
 display:grid;grid-template-columns:1fr 1fr;gap:var(--u2) var(--u3)}
@media(max-width:820px){.bkft{grid-template-columns:1fr;gap:16px}}
.bkft b{display:block;font-family:var(--m);font-size:9px;letter-spacing:.18em;
 text-transform:uppercase;color:var(--red);margin-bottom:8px}
.bkft p{font-size:12.5px;color:var(--fg3);line-height:1.72;max-width:none}

/* ---- il calendario dice quanto e' pieno ---- */
.cal-g button{display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:6px;padding:0;aspect-ratio:auto;min-height:54px}
@media(max-width:560px){.cal-g button{min-height:44px;gap:4px}}
.cal-g button u{text-decoration:none;font-variant-numeric:tabular-nums;line-height:1;
 font-size:13px}
.cal-g button.free u{color:var(--fg)}
.cal-g button.free{border-color:var(--line2)}
.cal-g button.free::after{display:none}          /* il vecchio pallino unico */
/* pallini, non barrette: tondi come quelli della legenda qui sopra */
.dts{display:flex;gap:3px;text-decoration:none;line-height:0}
.dts i{width:5px;height:5px;display:block;border-radius:50%;background:var(--line2)}
.dts i.dtf{background:#37C79A}
.dts i.dtx{background:var(--red);opacity:.42}
.cal-g button:disabled .dts i.dtx{opacity:.3}
.cal-g button.on .dts i.dtf{background:#fff}
.cal-g button.on .dts i.dtx{background:rgba(255,255,255,.42);opacity:1}

.cleg{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:14px;
 padding-top:12px;border-top:1px solid var(--line);
 font-family:var(--m);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
 color:var(--fg4)}
.cleg span{display:flex;align-items:center;gap:6px}
.cleg em{flex:1 1 100%;font-style:normal;text-transform:none;letter-spacing:.02em;
 font-size:9.5px;line-height:1.7;color:var(--fg4)}


/* ══════════════════════════════════════════════════════════════════════
   LA ROTTURA — 08/09/2026
   «non si sfascia mai / non muore mai». Adesso si sfascia, e mentre e'
   sfasciata lo schermo lo dice: due secondi in cui non comandi niente.
   ══════════════════════════════════════════════════════════════════════ */
#gdead{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.94);
 z-index:14;pointer-events:none;opacity:0;transition:.2s cubic-bezier(.2,.7,.3,1);
 text-align:center;min-width:300px;
 background:rgba(6,7,8,.9);border:1px solid var(--red);border-top-width:3px;
 padding:19px 26px 20px}
#gdead.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#gdead i{display:block;font-family:var(--m);font-size:9px;letter-spacing:.28em;
 text-transform:uppercase;font-style:normal;color:var(--red)}
#gdead b{display:block;font-size:20px;font-weight:800;letter-spacing:-.025em;margin:8px 0 7px}
#gdead span{display:block;font-family:var(--m);font-size:9.5px;letter-spacing:.04em;
 color:var(--fg3);line-height:1.6}
:root[data-theme="light"] #gdead{background:rgba(255,255,255,.94)}
@media(max-width:760px){#gdead{min-width:0;width:calc(100vw - 40px);padding:15px 18px 16px}
 #gdead b{font-size:16px}}

/* ══════════════════════════════════════════════════════════════════════
   I CAPITOLI — 09/09/2026
   Le ere c'erano gia': quattro mondi, quattro fisiche. Ma il confine non
   lo annunciava nessuno, e cambiare gravita' senza una riga sembra un
   difetto, non un capitolo. Due secondi e mezzo di titolo, e mentre e'
   sopra le altre schede tacciono — cosi' non ce ne sono mai due insieme.
   ══════════════════════════════════════════════════════════════════════ */
#gchap{position:absolute;left:50%;top:41%;transform:translate(-50%,-50%) scale(.96);
 z-index:15;pointer-events:none;opacity:0;transition:.34s cubic-bezier(.2,.7,.3,1);
 text-align:center;width:min(560px,calc(100vw - 40px));
 background:rgba(6,7,8,.86);border-top:3px solid var(--zone);
 padding:20px 26px 22px}
#gchap.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#gchap i{display:block;font-family:var(--m);font-size:9px;letter-spacing:.30em;
 text-transform:uppercase;font-style:normal;color:var(--fg4)}
#gchap b{display:block;font-weight:800;font-size:clamp(24px,4.4vw,40px);
 letter-spacing:-.03em;line-height:1.05;margin:9px 0 8px;color:#fff}
#gchap span{display:block;font-family:var(--m);font-size:9.5px;letter-spacing:.16em;
 text-transform:uppercase;margin-bottom:11px}
#gchap u{display:block;text-decoration:none;font-size:12.5px;line-height:1.55;
 color:var(--fg2);max-width:44ch;margin:0 auto}
#gchap.z0{border-top-color:var(--e-earth)} #gchap.z0 span{color:var(--e-earth)}
#gchap.z1{border-top-color:var(--e-water)} #gchap.z1 span{color:var(--e-water)}
#gchap.z2{border-top-color:var(--e-fire)}  #gchap.z2 span{color:var(--e-fire)}
#gchap.z3{border-top-color:var(--e-air)}   #gchap.z3 span{color:var(--e-air)}
:root[data-theme="light"] #gchap{background:rgba(255,255,255,.93)}
:root[data-theme="light"] #gchap b{color:var(--fg)}
/* ══════════════════════════════════════════════════════════════════════
   UN POSTO SOLO — 09/09/2026
   «vedo banner di banner su elementi, su cose». Sei scatole in sei punti
   diversi che potevano uscire insieme. Adesso stanno tutte nello stesso
   rettangolo e il codice ne accende una per volta: se sono nello stesso
   posto, sovrapporsi e' impossibile per costruzione, non per fortuna.
   ══════════════════════════════════════════════════════════════════════ */
#ghint,#gcard,#gcore,#gchap,#gdead{
 position:absolute;left:var(--u3);right:auto;top:auto;bottom:118px;
 width:auto;max-width:420px;min-width:0;z-index:12;
 transform:translateY(10px)}
#ghint.on,#gcard.on,#gcore.on,#gchap.on,#gdead.on{transform:none}
@media(max-width:760px){
 #ghint,#gcard,#gcore,#gchap,#gdead{left:14px;right:14px;max-width:none;
  top:auto;bottom:calc(var(--gb-h) + var(--gc-h) + var(--gb-gap)*2.4)}
 /* la fascia in alto non e' un numero fisso: la HUD cresce quando prendi i
    poteri e quando e' partito il cronometro. Il gioco misura dove finisce
    e lo scrive qui. */
 #gcore,#gchap{top:var(--hudb,262px);bottom:auto;
  max-height:calc(100svh - var(--hudb,262px) - var(--gb-h) - var(--gc-h) - var(--gb-gap)*4);
  overflow-y:auto}
}

/* ══════════════════════════════════════════════════════════════════════
   LA STRISCIA DEL REPERTO — 09/09/2026
   «fa cagare e occupa tutto». Aveva ragione: un pannello alto trecento
   pixel, largo tutto lo schermo, diciannove volte, in mezzo al campo da
   gioco. Adesso e' una riga alta 44 che si legge in un colpo d'occhio, e
   se vuoi saperne di piu' la tocchi e si apre la collezione.
   Sta dopo le regole del telefono apposta: deve vincere su quelle.
   ══════════════════════════════════════════════════════════════════════ */
#gcard.mini{display:flex;align-items:center;gap:11px;flex-wrap:nowrap;
 width:max-content;max-width:calc(100% - 28px);right:auto;
 height:44px;padding:0 14px;overflow:hidden;cursor:pointer;
 max-height:none;border-left-width:3px}
/* la striscia nuda: nome e conteggio, niente riquadro pesante */
#gcard.nuda{background:rgba(8,9,11,.80);border-color:var(--line2);
 padding:9px 14px;max-width:none;width:auto}
#gcard.nuda b{font-size:13px}
#gcard.mini i{display:flex;align-items:center;gap:7px;flex:none;font-size:8.5px;
 letter-spacing:.14em;color:var(--zone);text-transform:uppercase}
#gcard.mini i s{text-decoration:none;font-size:7px;letter-spacing:.18em;
 padding:2px 5px;border:1px solid var(--line2);color:var(--fg4)}
#gcard.mini b{margin:0;font-size:14px;line-height:1;white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis;min-width:0}
#gcard.mini .gs{margin:0;flex:none;display:inline-flex;align-items:center;
 height:22px;padding:0 8px;font-family:var(--m);font-size:8px;
 letter-spacing:.14em;font-style:normal}
#gcard.mini u{flex:none;text-decoration:none;font-family:var(--m);
 font-size:9px;letter-spacing:.08em;color:var(--fg4)}
@media(max-width:420px){#gcard.mini{gap:8px;padding:0 11px;height:40px}
 #gcard.mini b{font-size:12.5px}
 #gcard.mini i{display:none}}

/* Sul telefono le schede grandi arrivano fin sotto la bussola e la catena:
   mentre una parla, quei due tacciono. Sono letture che restano vere anche
   se spariscono per sette secondi; la scheda no. */
@media(max-width:760px){
 /* la bussola scrive la sua opacita' inline a ogni fotogramma: qui serve
    l'important, altrimenti la regola non la vede nemmeno */
 body.parlagrande #gcw,body.parlagrande #gstk{opacity:0!important;
  pointer-events:none;transition:none}
}

/* una scheda per volta: mentre c'e' il capitolo, tutto il resto tace */
body.chap #gcard,body.chap #gcore,body.chap #ghint,body.chap #gstk{
 opacity:0;pointer-events:none;transition:opacity .08s}
/* il banner del nucleo e' alto e sale fin sotto al suggerimento: quando
   c'e' lui, il suggerimento aspetta il suo turno */
#gcore.on ~ #ghint{opacity:0;pointer-events:none}
/* la rottura ha la precedenza su tutto: sono due secondi e devono
   leggersi. Il capitolo, che sta nello stesso punto, si toglie. */
body.broken #gchap{opacity:0;pointer-events:none;transition:opacity .08s}
@media(max-width:760px){#gchap{padding:16px 18px 18px;top:44%}
 #gchap u{font-size:11.5px}}
@media(prefers-reduced-motion:reduce){#gchap{transition:none}}

/* mentre sei rotto il mondo perde colore: si vede che non stai giocando */
body.broken #gl{filter:saturate(.35) contrast(1.06)}
#gl{transition:filter .22s}
@media(prefers-reduced-motion:reduce){#gdead{transition:none}#gl{transition:none}}


/* ══════════════════════════════════════════════════════════════════════
   L'OBIETTIVO — 08/09/2026
   La riga che non se ne va mai. Sta sotto il nome dell'era, dove l'occhio
   torna comunque, e dice a parole cosa stai facendo. Tutto il resto del
   gioco o sparisce o e' un numero: questa e' la frase.
   ══════════════════════════════════════════════════════════════════════ */
/* Era ancorata a «top:186px». Ma il blocco dell'era sopra e' alto quanto la
   sua descrizione, e nel fuoco la descrizione va su tre righe: questa riga ci
   finiva sopra. Un numero fisso non puo' sapere quanto e' alto un testo, e
   infatti non lo sapeva. Adesso sta dentro il blocco, in flusso, e non puo'
   piu' sovrapporsi a niente. */
#gobj{margin-top:14px;pointer-events:none;
 opacity:0;transform:translateY(-6px);transition:.24s cubic-bezier(.2,.7,.3,1);
 display:none;align-items:baseline;gap:10px;flex-wrap:wrap;max-width:38ch}
#gobj.on{display:flex;opacity:1;transform:translateY(0)}
#gobj s{width:7px;height:7px;flex:none;text-decoration:none;display:block;
 background:var(--red);transform:translateY(-2px);animation:objp 2.2s ease-in-out infinite}
#gobj b{font-size:15px;font-weight:700;letter-spacing:-.015em;color:var(--fg)}
#gobj em{font-family:var(--m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
 font-style:normal;color:var(--fg3);flex:1 1 100%;padding-left:17px;line-height:1.6}
#gobj.z0 s{background:var(--e-earth)} #gobj.z1 s{background:var(--e-water)}
#gobj.z2 s{background:var(--e-fire)}  #gobj.z3 s{background:var(--e-air)}
#gobj.bad s{background:var(--red)}
#gobj.bad b{color:var(--red)}
@keyframes objp{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){#gobj s{animation:none}#gobj{transition:none}}
@media(max-width:900px){
 #gobj{margin-top:11px;max-width:none}
 #gobj b{font-size:13px} #gobj em{font-size:8.5px;padding-left:0}
}


/* ══════════════════════════════════════════════════════════════════════
   LE GALLERIE E L'ETICHETTA «NO AI» — 08/09/2026
   Un progetto con una foto sola non e' un progetto documentato. E per Buzz,
   che esiste apposta per dire «questa e' una fotografia», l'etichetta deve
   stare sopra lo scatto: nel 2026 nessuno lo da' piu' per scontato.
   ══════════════════════════════════════════════════════════════════════ */
.mdi.on.multi{grid-template-columns:1fr 1fr}
@media(min-width:900px){.mdi.on.multi{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:560px){.mdi.on.multi{grid-template-columns:1fr}}
.mdi figure{overflow:hidden}
.mdi .noai{position:absolute;top:0;left:0;z-index:2;
 font-family:var(--m);font-size:8px;letter-spacing:.2em;text-transform:uppercase;
 background:var(--red);color:#fff;padding:5px 9px;font-weight:700}
.mdi figure:hover img{transform:scale(1.03)}
.mdi img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){.mdi img{transition:none}
 .mdi figure:hover img{transform:none}}


/* ══════════════════════════════════════════════════════════════════════
   L'EROE IN UNA COLONNA SOLA — 08/09/2026
   Il titolo stava a sinistra e la chiamata all'azione al centro in basso:
   due centri ottici nella stessa schermata, con un vuoto in mezzo. Ora la
   colonna e' una, si legge dall'alto in basso, e la meta' destra e' della
   scena — che e' la cosa che deve far venire voglia di premere.
   ══════════════════════════════════════════════════════════════════════ */
@media(min-width:901px){
 /* colonna: la frase e il bottone partono dallo stesso filo di sinistra */
 .gsub{left:max(var(--u3),calc((100vw - 1300px)/2 + var(--u3)));right:auto;
  transform:none;text-align:left;bottom:auto;top:calc(50% + 116px);
  width:min(430px,42vw);white-space:normal;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px}
 .gsub b{margin-bottom:6px}
 /* la riga dei due inviti non deve stare stretta nella colonna del testo:
    la frase resta larga 360-430 per leggersi, i bottoni escono di quanto serve */
 .gacr{justify-content:flex-start;flex-wrap:nowrap;width:max-content;max-width:min(560px,58vw)}
}
/* fra tablet e desktop la colonna sinistra e' stretta: si torna al centro */
@media(min-width:901px) and (max-width:1120px){
 .gsub{width:min(360px,46vw)}
}
/* Sopra i 1120 il titolo cresce (clamp fino a 64px) e la riga del ticker
   scendeva addosso alla frase: misurato 14px di sovrapposizione a 1440x900.
   La colonna degli inviti parte piu' in basso. */
@media(min-width:1121px){
 .gsub{top:calc(50% + 146px)}
}
/* Sotto i 520 la riga degli elementi va a capo e la testata del gioco
   diventa alta 202 invece di 146: il titolo ci finiva dentro. Misurato. */
@media(max-width:519px){
 .hin{padding-top:224px}
}


/* ══════════════════════════════════════════════════════════════════════
   L'HUD SI DEVE LEGGERE ANCHE SUL CHIARO — 08/09/2026
   Sul nero andava bene senza fondo. Nell'era del fuoco il terreno e'
   arancione luminoso e il testo bianco spariva dentro. Non ci metto un
   pannello — un rettangolo opaco sopra la scena e' peggio del problema —
   ma un'ombra piu' decisa e una velatura che segue il testo e sfuma via.
   ══════════════════════════════════════════════════════════════════════ */
.ghud .w>div{position:relative}
.ghud .w>div::before{content:"";position:absolute;inset:-14px -22px -16px -20px;z-index:-1;
 background:radial-gradient(120% 100% at 20% 40%,rgba(4,5,6,.62),rgba(4,5,6,0) 72%);
 pointer-events:none}
.ghud .gstat::before{background:radial-gradient(120% 100% at 80% 40%,rgba(4,5,6,.62),rgba(4,5,6,0) 72%)}
:root[data-theme="light"] .ghud .w>div::before{
 background:radial-gradient(120% 100% at 20% 40%,rgba(255,255,255,.72),rgba(255,255,255,0) 72%)}
:root[data-theme="light"] .ghud .gstat::before{
 background:radial-gradient(120% 100% at 80% 40%,rgba(255,255,255,.72),rgba(255,255,255,0) 72%)}
.gz b,.gz i,.gz p,.gstat b,.gstat u,.gstat s,.gstat em,.gstat div{
 text-shadow:0 1px 3px rgba(4,5,6,.75)}
:root[data-theme="light"] .gz b,:root[data-theme="light"] .gz i,
:root[data-theme="light"] .gz p,:root[data-theme="light"] .gstat b,
:root[data-theme="light"] .gstat u,:root[data-theme="light"] .gstat s,
:root[data-theme="light"] .gstat em,:root[data-theme="light"] .gstat div{
 text-shadow:0 1px 3px rgba(255,255,255,.8)}
#gobj b,#gobj em{text-shadow:0 1px 3px rgba(4,5,6,.8)}
:root[data-theme="light"] #gobj b,:root[data-theme="light"] #gobj em{
 text-shadow:0 1px 3px rgba(255,255,255,.85)}

/* le feste non sono «pieno», sono chiuso: si vede che il giorno non esiste */
.cal-g button.hol{opacity:.5}
.cal-g button.hol u{color:var(--red);opacity:.75}
.cal-g button.hol::after{content:"";position:absolute;left:50%;bottom:9px;
 transform:translateX(-50%);width:9px;height:1px;background:var(--red);opacity:.65}

/* 2026-09-22 casella termini prima di Book and pay */
.bkf .bterms{display:flex;gap:9px;align-items:flex-start;font-family:var(--m);font-size:10.5px;
  line-height:1.5;color:var(--fg2);cursor:pointer;margin:2px 0 4px;border-radius:4px}
.bkf .bterms input{width:14px;height:14px;min-width:14px;padding:0;margin:1px 0 0;flex:none;
  accent-color:var(--red);cursor:pointer}
.bkf .bterms a{color:var(--fg);text-decoration:underline;text-underline-offset:2px}
.bkf .bterms.manca,.bkf .bterms.manca a{color:var(--red)}
.bkf .bterms.lampo{animation:lampo .85s ease-out 2}
@media (prefers-reduced-motion:reduce){.bkf .bterms.lampo{animation:none}}