/* ==========================================================
   Foglio di stile condiviso dalle pagine di contenuto SEO
   (come-si-gioca.html, ruoli.html): stessa palette e stessi
   font della app in index.html, ma pensato per testo lungo e
   leggibile invece che per le "scene" di gioco.
   ========================================================== */
:root{
    --ink:#05060b;
    --ink-2:#0b0e18;
    --panel:#10131f;
    --panel-2:#171b2b;
    --line: rgba(210,214,230,.14);
    --moon:#f2efe3;
    --moon-dim:#b9bcc9;
    --moon-fioco:#7d8094;

    --buoni:#6fb3d9;
    --buoni-glow: rgba(111,179,217,.55);
    --cattivi:#c15b50;
    --cattivi-glow: rgba(193,91,80,.55);
    --neutrali:#a08ed6;
    --neutrali-glow: rgba(160,142,214,.5);

    --oro:#d8c48a;
    --oro-glow: rgba(216,196,138,.55);

    --font-display:'Cinzel', serif;
    --font-deco:'Cinzel Decorative', serif;
    --font-body:'EB Garamond', serif;
    --font-ui:'Inter', sans-serif;
}

*{ box-sizing: border-box; }
html,body{ min-height:100%; }
body{
    margin:0; background: var(--ink); color: var(--moon-dim);
    font-family: var(--font-body); font-size:1.05rem; line-height:1.7;
    background-image:
        radial-gradient(circle at 15% 0%, rgba(111,179,217,.06), transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(160,142,214,.05), transparent 45%);
    background-attachment: fixed;
}

.pagina{ max-width: 720px; margin:0 auto; padding: 2.6rem 1.4rem 4rem; }

/* Pagine legali (privacy.html, termini.html): stessa impostazione di
   .pagina ma con le classi già presenti in quei due file, per non dover
   toccare il loro markup. */
.contenuto{ max-width: 680px; margin:0 auto; padding: 2.6rem 1.4rem 4rem; }
.aggiornato{
    font-family: var(--font-ui); font-size:.82rem; color: var(--moon-fioco);
    margin: 0 0 2.2rem;
}
.nota{
    margin-top:2.6rem; padding:1.1rem 1.3rem;
    background: var(--panel); border:1px solid var(--line); border-radius:12px;
    font-family: var(--font-ui); font-size:.85rem; color: var(--moon-fioco); line-height:1.6;
}

.torna{
    display:inline-flex; align-items:center; gap:.4rem; margin-bottom:2.2rem;
    font-family: var(--font-ui); font-size:.85rem; color: var(--moon-fioco);
    text-decoration:none; border-bottom:1px solid transparent; transition: all .2s ease;
}
.torna:hover{ color: var(--moon-dim); border-color: var(--line); }

/* Riga di navigazione in cima alle pagine di contenuto: "torna al gioco"
   più il link all'altra pagina di contenuto, per muoversi fra le due
   senza dover scendere fino al footer — niente navbar vera e propria,
   resta coerente con lo stile minimale del sito. */
.pagina-nav-alto{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1.2rem;
    margin-bottom:2.2rem;
}
.pagina-nav-alto .torna{ margin-bottom:0; }

h1{
    font-family: var(--font-display); color: var(--moon);
    font-size: clamp(1.7rem, 5vw, 2.5rem); letter-spacing:.02em;
    line-height:1.3; margin: 0 0 .6rem;
}
.sottotitolo-pagina{
    font-family: var(--font-ui); font-size:.95rem; color: var(--moon-fioco);
    margin: 0 0 2.6rem; line-height:1.5;
}
h2{
    font-family: var(--font-display); color: var(--moon);
    font-size:1.25rem; letter-spacing:.02em; font-weight:600;
    margin: 2.6rem 0 1rem; padding-top:1.8rem; border-top:1px solid var(--line);
}
h2:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
h3{ font-family: var(--font-display); color: var(--moon); font-size:1.05rem; margin:0 0 .4rem; }

p{ margin:0 0 1.1rem; }
strong{ color: var(--moon); font-weight:600; }
ul, ol{ padding-left:1.3rem; margin:0 0 1.1rem; }
li{ margin-bottom:.5rem; }
a{ color: var(--buoni); text-decoration-color: var(--buoni-glow); }
a:hover{ color: var(--moon); }

.cta-wrap{ text-align:center; margin: 2.8rem 0 1.4rem; }
.cta{
    display:inline-block;
    font-family: var(--font-display); font-size:1rem; letter-spacing:.05em;
    text-decoration:none; color: var(--moon);
    background: linear-gradient(180deg, #2a3550, #1a2135);
    border:1px solid rgba(111,179,217,.55); border-radius:10px;
    padding:.85rem 2.1rem; transition: all .25s ease;
}
.cta:hover{ border-color: var(--buoni); box-shadow: 0 0 20px var(--buoni-glow); color: var(--moon); }

/* elenco ruoli */
.filtro-squadre{
    display:flex; gap:.6rem; flex-wrap:wrap; margin: 0 0 2rem;
}
.filtro-squadre a{
    font-family: var(--font-ui); font-size:.78rem; letter-spacing:.03em;
    text-decoration:none; color: var(--moon-fioco);
    border:1px solid var(--line); border-radius:20px; padding:.35rem .9rem;
    transition: all .2s ease;
}
.filtro-squadre a:hover{ color: var(--moon); border-color: var(--moon-dim); }
.ruoli-lista{ display:flex; flex-direction:column; gap:.8rem; }
.ruolo-voce{
    display:flex; gap:1rem; align-items:flex-start;
    background: var(--panel); border:1px solid var(--line); border-radius:12px;
    padding:1rem 1.3rem; border-left-width:3px; scroll-margin-top: 1.5rem;
}
.ruolo-voce[data-squadra="buoni"]{ border-left-color: var(--buoni); }
.ruolo-voce[data-squadra="cattivi"]{ border-left-color: var(--cattivi); }
.ruolo-voce[data-squadra="neutrali"]{ border-left-color: var(--neutrali); }
.ruolo-immagine{
    flex-shrink:0; width:64px; aspect-ratio: 2 / 3; border-radius:8px;
    object-fit:cover; background: linear-gradient(180deg, #12131c, #05060b);
    border:1px solid var(--line);
}
.ruolo-corpo{ flex:1; min-width:0; }
.ruolo-voce h3{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.squadra-tag{
    font-family: var(--font-ui); font-size:.65rem; letter-spacing:.06em; text-transform:uppercase;
    font-weight:600; padding:.2rem .55rem; border-radius:20px;
}
.ruolo-voce[data-squadra="buoni"] .squadra-tag{ color: var(--buoni); background: var(--buoni-glow); }
.ruolo-voce[data-squadra="cattivi"] .squadra-tag{ color: var(--cattivi); background: var(--cattivi-glow); }
.ruolo-voce[data-squadra="neutrali"] .squadra-tag{ color: var(--neutrali); background: var(--neutrali-glow); }
.ruolo-voce p{ margin:0; font-size:1rem; }
@media (max-width: 480px){
    .ruolo-immagine{ width:52px; }
}

footer.pagina-footer{
    margin-top:3.5rem; padding-top:1.6rem; border-top:1px solid var(--line);
    font-family: var(--font-ui); font-size:.78rem; color: var(--moon-fioco);
    text-align:center; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
}
footer.pagina-footer a{ color: var(--moon-fioco); }
footer.pagina-footer a:hover{ color: var(--moon-dim); }