/* Un foglio solo, nessuna dipendenza esterna: il sito deve caricare anche
   con una connessione lenta e restare in piedi fra dieci anni. */

:root {
	--sfondo: #12100e;
	--sfondo-2: #1b1815;
	--bordo: #332d26;
	--testo: #e8e2d9;
	--tenue: #a29a8e;
	--fuoco: #ff8c2b;
	--verde: #6fcf5f;
	--rosso: #e35d4a;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--sfondo);
	color: var(--testo);
	font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.contenuto { max-width: 60rem; margin: 0 auto; padding: 0 1.25rem; }

/* ---------------------------------------------------------------- testata */

header {
	border-bottom: 1px solid var(--bordo);
	background: linear-gradient(180deg, #1e1a16 0%, var(--sfondo) 100%);
	padding: 1.5rem 0 0rem;
	text-align: center;
}

header img { width: 128px; height: 128px; image-rendering: auto; }

h1 { margin: 1rem 0 0.25rem; font-size: 2.6rem; letter-spacing: -0.02em; }

.claim {
	/* niente max-width: e' lui che mandava a capo la frase molto prima del
	   bordo. Il margine sotto resta, e' lo stacco dai pulsanti. */
	margin: 0 auto 1.75rem;
	font-size: 1.2rem;
	color: var(--fuoco);
}

/* Il numero di versione sotto il claim: sta li' per essere CONFRONTATO
   con quello nell'elenco degli addon, non per essere letto. Quindi
   piccolo e smorzato, con in evidenza solo il numero -- l'unica cosa che
   l'occhio deve cercare. Il margine negativo lo riavvicina al claim: sono
   la stessa informazione, "cos'e'" e "a che punto sta". */
.versione {
	margin: -1.4rem auto 1.75rem;
	font-size: 0.85rem;
	opacity: 0.75;
}

.versione b {
	font-variant-numeric: tabular-nums;
	color: var(--fuoco);
}

/* La chiusura del changelog: dice fin dove arrivano le note. Piu' tenue
   delle voci, perche' non e' una novita' ma un confine. */
.coda { color: var(--tenue); }

/* ---------------------------------------------------------------- lingue */

/* In cima a OGNI pagina, e ogni voce porta alla stessa pagina nell'altra
   lingua: chi legge il changelog in italiano e passa all'inglese resta sul
   changelog, non torna in prima pagina. */
.lingue { border-bottom: 1px solid var(--bordo); background: var(--sfondo-2); }

.lingue .contenuto {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	justify-content: center;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	font-size: 0.9rem;
}

.lingue a { color: var(--tenue); text-decoration: none; }
.lingue a:hover { color: var(--fuoco); text-decoration: underline; }
.lingue .qui { color: var(--testo); font-weight: 600; }

/* -------------------------------------------------------------- schermate */

.galleria {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: 1.5rem;
}

.galleria figure { margin: 0; }

/* width:auto, non 100%: le schermate dei menu sono piccole (338px) e
   stirarle a tutta colonna le renderebbe sfocate. Restano alla loro
   dimensione, centrate, e si riducono solo se la colonna e' piu' stretta. */
.galleria img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 6px;
	border: 1px solid #3a332c;
}

.galleria figcaption {
	margin-top: 0.6rem;
	font-size: 0.95rem;
	color: #a29a8e;
}

/* Il click ingrandisce. Nella griglia le schermate grandi stanno in colonne
   da poco piu' di 400px, quindi rimpiccioliscono: la lente le rimette a
   grandezza vera. Tutto con :target, senza JavaScript. */
.galleria a { display: block; cursor: zoom-in; }

.lente {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 50;
	background: rgba(0, 0, 0, 0.88);
	padding: 1.5rem;
}

.lente:target { display: flex; align-items: center; justify-content: center; }

.lente a {
	display: block;
	max-width: 100%;
	max-height: 100%;
	cursor: zoom-out;
}

.lente img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 90vh;
	border-radius: 6px;
	border: 1px solid #3a332c;
}

/* --------------------------------------------------------------- pulsanti */

.azioni { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

.bottone {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	border: 1px solid var(--bordo);
	color: var(--testo);
	background: var(--sfondo-2);
}

.bottone.primario { background: var(--fuoco); border-color: var(--fuoco); color: #1a1207; }
.bottone:hover { filter: brightness(1.12); }

/* --------------------------------------------------------------- sezioni  */

section { padding: 0.2rem 0; border-bottom: 1px solid var(--bordo); }

h2 { font-size: 1.5rem; margin: 0 0 1.5rem; }
h3 { font-size: 1.05rem; margin: 0 0 0.4rem; color: var(--fuoco); }

.griglia {
	display: grid;
	gap: 1.5rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.griglia p { margin: 0; color: var(--tenue); }

ul.spoglio { list-style: none; padding: 0; margin: 0; color: var(--tenue); }
ul.spoglio li { padding: 0.3rem 0 0.3rem 1.2rem; position: relative; }
ul.spoglio li::before { content: "·"; position: absolute; left: 0.3rem; color: var(--fuoco); }

code {
	background: var(--sfondo-2);
	border: 1px solid var(--bordo);
	border-radius: 4px;
	padding: 0.1rem 0.35rem;
	font-size: 0.9em;
}

/* Segnaposto per gli screenshot: finche' non ci sono, si vede che mancano
   invece di lasciare un buco muto. */
.scatto {
	border: 1px dashed var(--bordo);
	border-radius: 8px;
	padding: 3rem 1rem;
	text-align: center;
	color: var(--tenue);
	background: var(--sfondo-2);
}

footer {
	padding: 2.5rem 0 3.5rem;
	text-align: center;
	color: var(--tenue);
	font-size: 0.9rem;
}

footer a, .lingua a { color: var(--fuoco); }
/* I link della barra in alto: erano bottoni nella testata, ora stanno
   accanto alle lingue e valgono su tutte le pagine. Il download e' un filo
   piu' marcato -- e' la ragione per cui uno arriva qui. */
.nav-alto { margin-left: 0.9rem; color: var(--fuoco); text-decoration: none; }
.nav-alto:hover { text-decoration: underline; }
.scarica-alto { font-weight: 600; }

/* Gli ultimi aggiunti: una griglia che si adatta invece di colonne fisse,
   cosi' su telefono diventa una colonna sola senza righe a meta'. */
.sottotitolo { color: var(--tenue); margin-top: -0.4rem; }
ul.ultimi { list-style: none; padding: 0; margin: 1.2rem 0 0;
	display: grid; gap: 0.5rem 1.4rem;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
ul.ultimi .oggetto .icona { width: 24px; height: 24px; }

/* Il passaggio fra le due pagine del changelog: staccato dall'ultima
   versione, cosi' non sembra una voce dell'elenco. */
.altre-versioni { margin-top: 2.5rem; padding-top: 1.2rem;
	border-top: 1px solid var(--bordo); font-size: 0.95rem; }
.altre-versioni a { color: var(--fuoco); text-decoration: none; }
.altre-versioni a:hover { text-decoration: underline; }

/* ── Oggetti nel changelog ────────────────────────────────────────────
   Nome colorato per qualita' come in gioco, piu' una scheda al passaggio.
   Tutto in CSS: Wowhead distribuisce uno script che fa lo stesso, ma
   sarebbe la prima richiesta a un dominio esterno di questo sito e la
   prima riga di JavaScript. Per un'icona non vale il prezzo.
   I colori sono quelli del gioco, non scelti da noi. */
.oggetto { position: relative; text-decoration: none; white-space: nowrap; }
.oggetto:hover { text-decoration: underline; }
.q0 { color: #9d9d9d; } .q1 { color: #d8d8d8; } .q2 { color: #1eff00; }
.q3 { color: #0070dd; } .q4 { color: #a335ee; } .q5 { color: #ff8000; }
.q6 { color: #e6cc80; } .q7 { color: #00ccff; }

/* La scheda vive dentro il link: appare al passaggio e alla messa a fuoco
   da tastiera, cosi' esiste anche per chi non usa il mouse. */
.oggetto .scheda {
	position: absolute; left: 0; bottom: 1.6em; z-index: 5;
	display: none; min-width: 12rem; padding: 0.5rem 0.7rem;
	background: var(--sfondo); border: 1px solid var(--bordo);
	border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.45);
	white-space: normal; font-size: 0.85rem; line-height: 1.4;
}
.oggetto:hover .scheda, .oggetto:focus .scheda { display: block; }
.oggetto .scheda b { display: block; }
.oggetto .scheda i { display: block; color: var(--tenue); font-style: normal; }
/* L'icona accanto al nome: bordo scuro e angoli smussati, come le cornici
   degli oggetti in gioco. Allineata alla riga di testo, non sopra. */
.oggetto .icona {
	vertical-align: -0.22em; margin-right: 0.3em;
	border-radius: 3px; border: 1px solid rgba(0,0,0,0.55);
}
.oggetto .scheda .icona-grande {
	float: left; margin: 0 0.5rem 0.2rem 0;
	border-radius: 4px; border: 1px solid rgba(0,0,0,0.55);
}


/* Su schermo stretto la scheda uscirebbe dal bordo: li' si rinuncia,
   resta il nome colorato e il link. Meglio niente che un riquadro
   tagliato a meta'. */
@media (max-width: 40rem) {
	.oggetto .scheda { display: none !important; }
}

/* L'altro addon sulla home: logo e riga di presentazione, il nome e' il
   link. Una riga sola, non una griglia: gli addon sono due, non venti. */
/* ------------------------------------------------------------- vetrina */
/* Le schede degli addon sulla pagina d'ingresso. Tutta la scheda e' un
   link: il bersaglio piu' grande possibile, che su un telefono conta piu'
   dell'eleganza. Due colonne dove c'e' spazio, una sola sul telefono --
   senza media query, ci pensa auto-fit. */
.vetrina {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.25rem;
	margin: 2rem 0 1rem;
}

.addon-scheda {
	display: block;
	padding: 1.5rem 1.25rem;
	border: 1px solid var(--bordo);
	border-radius: 12px;
	background: var(--sfondo-2);
	color: inherit;
	text-decoration: none;
	text-align: center;
	transition: border-color 0.15s, transform 0.15s;
}
.addon-scheda:hover {
	border-color: var(--fuoco);
	transform: translateY(-2px);
}
.addon-scheda img { border-radius: 12px; }
.addon-scheda h2 { margin: 0.75rem 0 0.5rem; font-size: 1.5rem; }
.addon-scheda p { margin: 0; color: var(--tenue); font-size: 0.95rem; }
.addon-scheda .versione-scheda {
	margin-top: 0.5rem;
	font-size: 0.8rem;
	opacity: 0.7;
}
.addon-scheda .vai {
	display: inline-block;
	margin-top: 1rem;
	color: var(--fuoco);
	font-weight: 600;
}

.altro-addon { display: flex; align-items: center; gap: 0.9rem; }
.altro-addon img { border-radius: 8px; }
.altro-addon a { color: var(--fuoco); text-decoration: none; }
.altro-addon a:hover { text-decoration: underline; }

/* Ko-fi: la tazzina sta sulla riga del testo, non sopra. Il colore lo
   eredita (currentColor), quindi segue il tema senza doverlo ripetere. */
.kofi-link { display: inline-flex; align-items: center; gap: 0.4rem; }
img.kofi { height: 1.1em; width: auto; vertical-align: middle; }


.lingua { text-align: right; padding-top: 1rem; font-size: 0.9rem; }
/* La tazza in cima: allineata alle bandiere, un filo staccata dalle lingue.
   Si schiarisce al passaggio, cosi' si capisce che e' cliccabile. */
.kofi-alto { margin-left: 0.6rem; opacity: 0.75; vertical-align: middle; }
.kofi-alto:hover { opacity: 1; }
.kofi-alto img { height: 1.15em; width: auto; vertical-align: middle; }


@media (max-width: 40rem) {
	h1 { font-size: 2rem; }
	header { padding: 2.5rem 0 2rem; }
}