/* =============================================================================
   VIDEOLUDO — foglio di stile comune
   I colori e i caratteri sono quelli dell'index: se un giorno ridisegni il
   sito, si cambiano le variabili qui sotto e tutta l'area utente segue.
   ============================================================================= */

:root{
  --void:#04060D; --panel:#0A0E1B; --panel-2:#111832;
  --edge:rgba(170,190,255,.13); --edge-2:rgba(170,190,255,.26);
  --text:#F4F6FC; --muted:#97A0C0; --dim:#5E6788;
  --freddo:#2B8CFF; --caldo:#FF6B1A; --amber:#FFB81F; --lime:#33D677;
  --rosso:#FF2D3D;
  --freddo-rgb:43,140,255; --caldo-rgb:255,107,26;
  --fiamma:linear-gradient(100deg,#FFB81F 0%,#FF6B1A 45%,#FF2D3D 100%);
  --acc:var(--freddo);
  --ease:cubic-bezier(.2,.8,.2,1);
  --slowe:cubic-bezier(.2,.8,.2,1);
  --slow:.32s var(--slowe);
  --slower:.5s var(--slowe);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--void);color:var(--text);
  font-family:'Share Tech Mono',ui-monospace,monospace;
  font-size:clamp(15px,.4vw + 14px,16px);line-height:1.65;
  min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{font-family:'Russo One',sans-serif;font-weight:400;line-height:1.08;margin:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* ── atmosfera: le stesse luci dell'index, più quiete ── */
.glowfield{position:fixed;inset:0;z-index:-2;pointer-events:none}
.glowfield i{position:absolute;display:block;border-radius:50%;filter:blur(120px)}
.glowfield i:nth-child(1){width:62vw;height:48vw;left:-24vw;top:-22vw;background:#7A2A06;opacity:.38;
  animation:breath 19s ease-in-out infinite alternate}
.glowfield i:nth-child(2){width:34vw;height:34vw;right:-10vw;top:52vh;background:#0B3F96;opacity:.36;
  animation:breath 25s ease-in-out infinite alternate-reverse}
.glowfield i:nth-child(3){width:46vw;height:46vw;left:26vw;bottom:-26vw;background:#0D2A7A;opacity:.3;
  animation:breath 15s ease-in-out infinite alternate}
@keyframes breath{from{opacity:.2;transform:scale(1)}to{opacity:.42;transform:scale(1.12)}}
.vignette{position:fixed;inset:0;z-index:298;pointer-events:none;
  background:radial-gradient(130% 95% at 50% 40%,transparent 38%,rgba(2,3,9,.34) 74%,rgba(2,3,8,.78) 100%)}

@media (prefers-reduced-motion:reduce){
  .glowfield i{animation:none}
}

/* ── testata ── */
header{position:sticky;top:0;z-index:90;background:rgba(4,6,13,.9);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--edge)}
header::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,#FFB81F 0%,var(--caldo) 18%,var(--rosso) 34%,transparent 50%,
    transparent 62%,var(--freddo) 84%,#22C3F0 100%);opacity:.85}
.nav{display:flex;align-items:center;flex-wrap:wrap;row-gap:4px;
  gap:clamp(14px,2.4vw,30px);padding:13px 0;
  width:min(1300px,92vw);margin:0 auto}
.mark{font-family:'Russo One',sans-serif;font-size:clamp(20px,2.5vw,25px);letter-spacing:.03em;
  margin-right:auto;color:#fff;white-space:nowrap;text-shadow:0 2px 0 rgba(0,0,0,.6)}
.mark b{font-weight:400;background:var(--fiamma);-webkit-background-clip:text;background-clip:text;
  color:transparent;text-shadow:none;filter:drop-shadow(0 0 10px rgba(var(--caldo-rgb),.35))}
.nav .link{font-size:13px;letter-spacing:.16em;color:var(--muted);padding:10px 2px;
  transition:color var(--slow)}
.nav .link:hover{color:#fff}
/* Le voci stanno in un contenitore che sul computer non si vede, spinte a
   destra dal marchio. */
.voci{display:flex;align-items:center;flex-wrap:wrap;gap:inherit}
.menu-apri{display:none}

/* ── la testata sul telefono: MENU e l'elenco che si apre (vedi assets/js/menu.js) ── */
@media (max-width:760px){
  .nav{position:relative;flex-wrap:nowrap;padding:8px 0}
  .menu-apri{display:inline-flex;align-items:center;gap:11px;min-height:44px;padding:0 14px;
    background:rgba(255,255,255,.03);border:1px solid var(--edge-2);color:var(--text);cursor:pointer;
    font-family:'Share Tech Mono',monospace;font-size:13px;letter-spacing:.16em}
  .menu-apri i{width:16px;height:2px;background:currentColor;
    box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor;transition:transform var(--slow)}
  .nav.aperto .menu-apri{border-color:var(--freddo);background:rgba(var(--freddo-rgb),.16)}
  .nav.aperto .menu-apri i{transform:rotate(90deg)}
  .js .voci{display:none}
  .js .nav.aperto .voci{display:flex;position:absolute;top:100%;left:-4vw;right:-4vw;z-index:5;
    flex-direction:column;align-items:stretch;gap:0;padding:4px 4vw 16px;
    background:rgba(4,6,13,.98);border-bottom:1px solid var(--edge-2);
    box-shadow:0 24px 40px -20px rgba(0,0,0,.9)}
  .nav.aperto .voci > *{margin:0}
  .nav.aperto .voci .link{display:flex;align-items:center;min-height:50px;padding:0 2px;
    font-size:14px;color:var(--text);border-bottom:1px solid var(--edge);text-align:left}
}

/* ── col dito: niente collegamenti alti quattordici pixel ── */
@media (pointer:coarse){
  .mark{padding:6px 0}
  .sotto a,.riga-biscotti a{display:inline-flex;align-items:center;min-height:44px}
}

/* ── contenitore centrale ── */
.centro{display:flex;justify-content:center;align-items:flex-start;
  padding:clamp(30px,6vw,68px) 20px 60px}
.scheda{width:100%;max-width:440px;background:var(--panel);
  border:1px solid var(--edge);padding:clamp(26px,4vw,38px);position:relative;
  box-shadow:inset 0 3px 0 var(--freddo)}
.scheda::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(var(--freddo-rgb),.06),transparent 44%)}
.scheda > *{position:relative}
.scheda.larga{max-width:620px}

.occhiello{font-size:11px;letter-spacing:.28em;color:var(--acc);margin-bottom:12px}
.scheda h1{font-size:clamp(25px,4.4vw,33px);margin-bottom:10px}
.sottotitolo{color:var(--muted);font-size:14px;margin-bottom:26px}

/* ── moduli ── */
.campo{margin-bottom:19px}
.campo label{display:block;font-size:11px;letter-spacing:.2em;color:var(--muted);margin-bottom:7px}
.campo input{
  width:100%;background:#070A14;color:var(--text);
  border:1px solid var(--edge-2);padding:13px 15px;
  font-family:'Share Tech Mono',ui-monospace,monospace;font-size:15px;
  transition:border-color var(--slow),box-shadow var(--slower),background var(--slow);
}
.campo input:hover{border-color:rgba(170,190,255,.4)}
.campo input:focus{outline:none;border-color:var(--acc);background:#08101F;
  box-shadow:0 0 0 1px var(--acc)}
.campo input::placeholder{color:var(--dim)}
.campo.errato input{border-color:var(--rosso)}
.campo .aiuto{font-size:12px;color:var(--dim);margin-top:6px}
.campo .errore{font-size:12.5px;color:var(--rosso);margin-top:6px}

.campo-doppio{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:420px){.campo-doppio{grid-template-columns:1fr}}

.spunta{display:flex;gap:11px;align-items:flex-start;margin-bottom:22px;
  font-size:13px;color:var(--muted);cursor:pointer}
.spunta input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--freddo);flex:none;cursor:pointer}

/* ── pulsanti ── */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  font-family:'Share Tech Mono',ui-monospace,monospace;font-size:14px;letter-spacing:.14em;
  padding:12px 24px;border:1px solid var(--edge-2);color:var(--text);
  background:rgba(255,255,255,.02);cursor:pointer;width:100%;
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  transition:border-color var(--slow),color var(--slow),box-shadow var(--slow),
             background var(--slow),filter var(--slow),transform var(--slow)}
.btn:hover{border-color:var(--freddo);color:#fff;background:rgba(var(--freddo-rgb),.16);
  box-shadow:inset 0 0 0 1px rgba(var(--freddo-rgb),.5)}
.btn-acc{background:var(--fiamma);border:0;color:#140600;font-family:'Russo One',sans-serif;
  font-size:16px;letter-spacing:.08em}
.btn-acc:hover{background:var(--fiamma);color:#000;box-shadow:none;
  filter:brightness(1.12) saturate(1.1);transform:translateY(-1px)}

/* ── messaggi ── */
.avviso{border:1px solid;border-left-width:3px;padding:13px 16px;margin-bottom:22px;font-size:13.5px}
.avviso.male{border-color:rgba(255,45,61,.55);background:rgba(255,45,61,.09);color:#FFB8BD}
.avviso.bene{border-color:rgba(51,214,119,.5);background:rgba(51,214,119,.08);color:var(--lime)}

/* ── pie' di pagina della scheda ── */
.sotto{margin-top:24px;padding-top:20px;border-top:1px solid var(--edge);
  font-size:13px;color:var(--muted);text-align:center}
.sotto a{color:var(--freddo);transition:color var(--slow)}
.sotto a:hover{color:#fff}

.separatore{display:flex;align-items:center;gap:14px;margin:24px 0;
  font-size:11px;letter-spacing:.22em;color:var(--dim)}
.separatore::before,.separatore::after{content:'';flex:1;height:1px;background:var(--edge)}