/* Pagina pubblica di VolleyStat. Stessa palette e stessi font dell'app, ma
   questa pagina la vede chiunque: niente dati, niente chiamate, solo testo.
   I font sono serviti da qui, come nell'app: la CSP resta 'self'. */
@font-face{font-family:Archivo;src:url(font/archivo.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(font/bricolage.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  --bg:#16181d;--card:#1f232b;--tile:#272c35;--bd:#2e333d;
  --tx:#edeff3;--mu:#9ba4b0;--acc:#2bd68c;--onac:#05170f;--court:#15705d;
  --disp:"Bricolage Grotesque",Archivo,system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--tx);font-family:Archivo,system-ui,-apple-system,sans-serif}
a{color:var(--acc)}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--disp);letter-spacing:-.02em;margin:0}
.sub{font-size:18px;line-height:1.55;color:var(--mu);margin:0 0 24px;max-width:680px}

/* barra */
.top{max-width:1180px;margin:0 auto;padding:22px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tx);flex-shrink:0}
.mk{width:40px;height:40px;border-radius:11px}
.wordmark{font-family:var(--disp);font-size:27px;font-weight:800}
.wordmark b{color:var(--acc);font-weight:800}
.nav{flex-grow:1;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;font-size:17px;font-weight:600}
.nav a{color:var(--mu);text-decoration:none}
.nav a:hover{color:var(--tx)}
/* Niente sotto i 56px nemmeno qui: si apre dallo stesso tablet. */
.area{flex-shrink:0;min-height:56px;display:inline-flex;align-items:center;gap:10px;padding:0 24px;border-radius:18px;background:var(--acc);color:var(--onac);font-weight:700;font-size:17px;text-decoration:none}

/* apertura */
.hero{max-width:1180px;margin:0 auto;padding:40px 24px 24px;display:flex;gap:48px;align-items:center;flex-wrap:wrap}
.hero-tx{flex:1 1 420px;min-width:0}
.hero h1{font-size:clamp(40px,5.2vw,68px);font-weight:800;line-height:1.02}
.hero h1 span{color:var(--acc)}
.occhiello{font-size:20px;line-height:1.5;color:#b4bcc6;margin:22px 0 28px;max-width:520px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.bottone{min-height:68px;display:inline-flex;align-items:center;padding:0 30px;border-radius:20px;background:var(--card);border:2px solid var(--bd);color:var(--tx);font-weight:700;font-size:19px;text-decoration:none}
.bottone.primario{background:var(--acc);border-color:var(--acc);color:var(--onac)}
.nota{font-size:15px;color:var(--mu);margin:22px 0 0}

/* il campo */
.hero-campo{flex:1 1 400px;min-width:0;background:var(--card);border:1px solid var(--bd);border-radius:26px;padding:18px}
.crt{position:relative;width:100%;aspect-ratio:1/.62;background:var(--court);border:3px solid #fff;border-radius:8px}
.crt::before{content:"";position:absolute;left:-10px;right:-10px;top:-8px;height:6px;border-radius:3px;background:repeating-linear-gradient(90deg,#fff 0 6px,var(--bg) 6px 10px)}
.crt::after{content:"";position:absolute;left:0;right:0;top:36%;border-top:3px solid rgba(255,255,255,.75)}
.pc{position:absolute;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;border:3px solid #fff;background:var(--card);color:var(--tx);display:flex;flex-direction:column;align-items:center;justify-content:center}
.pc b{font-size:23px;line-height:1}
.pc small{font-size:11px;font-weight:600;opacity:.85}
.pc.srv{background:var(--acc);color:var(--onac);border-color:var(--onac)}
.pc.off{opacity:.45}
.sotto{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:15px;color:var(--mu)}
.sotto b{color:var(--tx);font-size:19px}

/* sezioni */
.sez{max-width:1180px;margin:0 auto;padding:44px 24px}
.sez h2{font-size:clamp(28px,3.4vw,36px);font-weight:800;margin-bottom:8px}
.sez h2.piccolo{font-size:28px}
.sez.scura{max-width:none;background:#101216;padding:48px 0;margin-top:10px}
.sez.scura .dentro{max-width:1180px;margin:0 auto;padding:0 24px}
.griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.griglia.tre{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.carta{background:var(--card);border:1px solid var(--bd);border-radius:22px;padding:24px}
.carta h3{font-size:20px;font-weight:700;margin-bottom:6px}
.carta p{font-size:16px;line-height:1.5;color:#b4bcc6;margin:0}
.ico{width:48px;height:48px;border-radius:14px;background:var(--tile);display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--acc);font-size:24px;font-weight:700}
.passo{display:flex;gap:16px;align-items:flex-start}
.passo h3{font-size:20px;font-weight:700;margin-bottom:4px}
.passo p{font-size:16px;line-height:1.5;color:#b4bcc6;margin:0}
.num{flex-shrink:0;width:46px;height:46px;border-radius:50%;background:var(--acc);color:var(--onac);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px}
.sez.due{display:flex;gap:40px;align-items:center;flex-wrap:wrap}
.sez.due>*{flex:1 1 380px;min-width:0}
.elenco{margin:0;padding-left:20px;font-size:17px;line-height:1.9;color:#b4bcc6}

/* anteprima del foglio */
.foglio{background:#fff;border-radius:18px;padding:20px;color:#1a1a1a}
.fhd{display:flex;align-items:center;gap:10px;border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:10px}
.fhd b{font-size:17px}
.fhd span{margin-left:auto;font-size:13px;color:#666}
.foglio table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.foglio td{padding:5px 2px}
.fth td{color:#a11;font-weight:700}
.foglio tr+tr{border-top:1px solid #eee}
.dif{background:#f6cdc4;text-align:center}
.fft{display:flex;justify-content:space-between;font-size:11px;color:#888;margin-top:12px}

.invito{background:var(--card);border:2px solid var(--bd);border-radius:26px;padding:32px;display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.invito>div{flex:1 1 360px;min-width:0}
footer{border-top:1px solid var(--bd);padding:26px 24px;text-align:center;color:#7b8490;font-size:15px}

@media (max-width:620px){
  .nav{display:none}
  .hero{padding-top:24px;gap:28px}
  .bottone,.area{width:100%;justify-content:center}
  .sez.due{gap:24px}
}