/* Apocalife · sito ufficiale. Colori del gioco: notte, ruggine, sabbia, giallo radioattivo. Nessun font esterno (privacy). */
:root {
  --fondo: #120d0a; --fondo2: #1c1410; --carta: #241a14; --linea: #3d2e22;
  --testo: #f3e6d4; --tenue: #b9a58c; --ruggine: #f08a3c; --sangue: #c4302b; --giallo: #f2c230; --ok: #7cc46a;
  --titoli: Impact, "Arial Black", "Franklin Gothic Heavy", sans-serif;
  --corpo: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--testo); font: 17px/1.6 var(--corpo); }
img { max-width: 100%; display: block; }
a { color: var(--ruggine); }

/* barra in alto */
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 20px; padding: 10px 24px;
  background: rgba(18, 13, 10, .88); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); }
.marchio img { height: 44px; width: auto; }
.menu { display: flex; gap: 22px; margin-left: auto; }
.menu a { color: var(--testo); text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: .3px; }
.menu a:hover { color: var(--ruggine); }
.menu a.evidenza { color: var(--giallo); }
.lingue { display: flex; gap: 4px; }
.lingue button { background: transparent; color: var(--tenue); border: 1px solid var(--linea); border-radius: 6px; padding: 4px 8px; font-weight: 700; cursor: pointer; }
.lingue button.attiva { background: var(--ruggine); color: #1b1009; border-color: var(--ruggine); }

/* copertina */
.eroe { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; }
.eroe-sfondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.eroe-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,13,10,0) 30%, rgba(18,13,10,.75) 70%, var(--fondo) 100%); }
.eroe-testo { position: relative; max-width: 860px; padding: 0 24px 64px 6vw; }
.occhiello { color: var(--giallo); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-size: 14px; margin: 0 0 8px; }
h1, h2, h3 { font-family: var(--titoli); font-weight: 400; letter-spacing: .5px; line-height: 1.1; }
h1 { font-size: clamp(34px, 5.5vw, 64px); margin: 0 0 14px; text-shadow: 0 3px 18px rgba(0,0,0,.6); }
.sotto { font-size: 19px; color: #ead9c2; max-width: 680px; }
.pulsanti { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 14px; }
.btn { display: inline-block; padding: 12px 24px; border-radius: 10px; border: 2px solid var(--ruggine); color: var(--testo); text-decoration: none;
  font-weight: 800; background: rgba(0,0,0,.35); cursor: pointer; font-size: 16px; }
.btn.primario { background: var(--ruggine); color: #1b1009; }
.btn:hover { filter: brightness(1.1); }
.steam { display: flex; align-items: center; gap: 8px; color: var(--tenue); font-size: 15px; margin: 0; }
.pallino { width: 10px; height: 10px; border-radius: 50%; background: var(--giallo); box-shadow: 0 0 10px var(--giallo); }

/* sezioni */
.sezione { padding: 80px 6vw; max-width: 1280px; margin: 0 auto; }
.sezione.scura { max-width: none; background: var(--fondo2); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.sezione.scura > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
h2 { font-size: clamp(30px, 4vw, 46px); margin: 0 0 12px; color: var(--testo); }
h2::after { content: ""; display: block; width: 70px; height: 4px; background: var(--sangue); margin-top: 10px; border-radius: 2px; }
.intro { color: var(--tenue); max-width: 760px; margin: 0 0 32px; }
.tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }
.scheda { background: var(--carta); border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; }
.scheda img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.scheda h3 { font-size: 24px; margin: 18px 20px 6px; color: var(--ruggine); }
.scheda p { margin: 0 20px 22px; color: #e3d3bd; font-size: 16px; }

/* passi del crafting */
.passi { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.passi li { background: var(--carta); border: 1px solid var(--linea); border-left: 4px solid var(--ruggine); border-radius: 12px; padding: 18px 18px 18px 64px; position: relative; }
.passi .num { position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--ruggine); color: #1b1009;
  display: grid; place-items: center; font-family: var(--titoli); font-size: 20px; }
.passi b { display: block; font-size: 18px; margin-bottom: 4px; }
.passi span:last-child { color: var(--tenue); font-size: 15px; }

/* personaggi */
.personaggi { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }
.pg { background: var(--carta); border: 1px solid var(--linea); border-radius: 14px; padding: 14px 10px; text-align: center; border-top: 4px solid var(--c, var(--ruggine)); }
.pg img { height: 190px; width: auto; margin: 0 auto 8px; object-fit: contain; }
.pg b { display: block; font-size: 15px; }
.pg span { display: block; color: var(--tenue); font-size: 13px; line-height: 1.35; margin-top: 4px; }

/* due colonne */
.due-col { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: center; }
.due-col.inverso { grid-template-columns: 1.25fr 1fr; }
.due-col img { border-radius: 14px; border: 1px solid var(--linea); }
.sezione.due-col > * { margin-left: 0; margin-right: 0; max-width: none; }   /* le due colonne usano tutta la larghezza */
.due-col p { color: #e3d3bd; }

/* galleria */
.galleria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.galleria img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; border-radius: 10px; border: 1px solid var(--linea); cursor: zoom-in; transition: transform .15s; }
.galleria img:hover { transform: scale(1.02); }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; z-index: 50; cursor: zoom-out; padding: 20px; }
.lightbox.aperto { display: flex; }
.lightbox img { max-height: 92vh; border-radius: 8px; }

/* novità */
.novita { text-align: center; max-width: 760px; }
.novita h2::after { margin-left: auto; margin-right: auto; }
.modulo { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 20px; text-align: left; }
.modulo input[type=email] { padding: 13px 16px; border-radius: 10px; border: 1px solid var(--linea); background: var(--carta); color: var(--testo); font-size: 17px; }
.consenso { grid-column: 1 / -1; color: var(--tenue); font-size: 14px; }
.trappola { position: absolute; left: -9999px; }
.esito { grid-column: 1 / -1; margin: 4px 0 0; font-weight: 700; min-height: 1.4em; }
.esito.ok { color: var(--ok); } .esito.ko { color: var(--sangue); }

/* piede */
.piede { text-align: center; padding: 40px 24px 50px; border-top: 1px solid var(--linea); color: var(--tenue); }
.piede-logo { width: 220px; margin: 0 auto 12px; }
.social { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; margin: 10px 0 18px; }
.social b, .collab b { color: var(--testo); font-family: var(--titoli); font-weight: 400; letter-spacing: .5px; font-size: 18px; }
.social a { color: var(--testo); text-decoration: none; font-weight: 700; border: 1px solid var(--linea); border-radius: 999px; padding: 6px 14px; }
.social a:hover { border-color: var(--ruggine); color: var(--ruggine); }
.collab { max-width: 620px; margin: 0 auto 22px; padding: 18px; background: var(--carta); border: 1px solid var(--linea); border-radius: 14px; display: grid; gap: 8px; justify-items: center; }
.collab span { color: #e3d3bd; font-size: 15px; }
.btn.discord { border-color: #5865f2; background: #5865f2; color: #fff; padding: 10px 20px; font-size: 15px; }
.piccolo { font-size: 13px; max-width: 720px; margin: 6px auto 0; }

/* telefono e tablet */
@media (max-width: 1100px) { .personaggi { grid-template-columns: repeat(4, 1fr); } .passi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) {
  .menu { display: none; }
  .lingue { margin-left: auto; }
  .tre, .due-col, .due-col.inverso { grid-template-columns: 1fr; }
  .due-col.inverso img { order: 2; }
  .galleria { grid-template-columns: repeat(2, 1fr); }
  .personaggi { grid-template-columns: repeat(2, 1fr); }
  .passi { grid-template-columns: 1fr; }
  /* su schermi stretti la copertina si vede intera (il logo non viene tagliato) e il testo va sotto */
  .eroe { display: block; min-height: auto; }
  .eroe-sfondo { position: relative; height: auto; }
  .eroe-velo { display: none; }
  .eroe-testo { padding: 18px 16px 40px; }
  .barra { padding: 8px 16px; }
  .sezione { padding: 56px 16px; }
  .modulo { grid-template-columns: 1fr; }
}