/* Il vestito del sito: presentazione e pagine legali.
   Sono gli stessi colori del gioco (src/style.css), ripetuti qui perché queste
   pagine non caricano il bundle: devono aprirsi in un attimo anche a chi sta
   solo guardando di cosa si tratta. */
:root{
  --bg:#0e1116; --bg2:#151a22; --card:#1b222d; --line:#2c3645;
  --tx:#e8edf4; --tx2:#9fb0c3; --tx3:#6b7c91; --acc:#e8443a; --gold:#ffd45e;
}
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.6;
}
.riga{ max-width:900px; margin:0 auto; padding:0 20px; }

/* Il bordo rosso in alto è lo stesso della barra del gioco. */
header{ border-top:4px solid var(--acc); background:var(--bg2); border-bottom:1px solid var(--line); }
header .riga{ display:flex; align-items:center; gap:12px; padding:14px 20px; flex-wrap:wrap; }
header img{ width:34px; height:34px; }
header .nome{ font-weight:700; font-size:17px; }
header nav{ margin-left:auto; display:flex; gap:16px; }
header nav a{ color:var(--tx2); font-size:14px; }

a{ color:var(--acc); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Il fuoco deve vedersi: si naviga anche col tabulatore, e questo sito non era
   mai stato guardato da quel punto di vista. */
a:focus-visible, button:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; border-radius:4px; }

h1{ font-size:38px; line-height:1.2; margin:0 0 14px; }
h1 span{ color:var(--acc); }
h2{ font-size:22px; margin:34px 0 10px; }
h3{ font-size:17px; margin:24px 0 6px; color:var(--tx); }
p{ margin:0 0 14px; color:var(--tx2); }
main p strong, main li strong{ color:var(--tx); }
ul{ color:var(--tx2); padding-left:22px; }
li{ margin-bottom:7px; }

.intro{ padding:52px 0 12px; }
.intro p.occhiello{ font-size:19px; max-width:620px; }

.gioca{
  display:inline-block; background:var(--acc); color:#fff; font-weight:700; font-size:19px;
  padding:15px 40px; border-radius:10px; margin:18px 0 8px;
}
.gioca:hover{ background:#ff5b50; text-decoration:none; }
.nota{ font-size:14px; color:var(--tx3); }

.schermate{ display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:16px; margin:14px 0 40px; }
.schermate figure{ margin:0; }
.schermate img{ width:100%; border:1px solid var(--line); border-radius:8px; display:block; background:var(--bg2); }
.schermate figcaption{ font-size:13.5px; color:var(--tx3); padding-top:7px; }

main{ padding-bottom:50px; }
.legale{ padding-top:34px; }
.legale h1{ font-size:30px; }
.aggiornato{ font-size:13.5px; color:var(--tx3); margin-bottom:26px; }

footer{ border-top:1px solid var(--line); background:var(--bg2); padding:22px 0; margin-top:20px; }
footer .riga{ display:flex; gap:18px; flex-wrap:wrap; font-size:14px; color:var(--tx3); }
footer a{ color:var(--tx2); }

@media (max-width:600px){
  h1{ font-size:30px; }
  .intro{ padding-top:34px; }
}