/**
 * Devil Fruit Archive — stile di produzione.
 *
 * Derivato da _design/style.css (mockup Claude Design). Rispetto al
 * mockup, pensato per un artboard a dimensione fissa, qui il layout è
 * reso responsive e a scorrimento naturale: gli strati di sfondo
 * (bg/overlay/vignette/scanlines) sono "position:fixed" cinematici
 * dietro al contenuto invece che ritagliati (overflow:hidden) dentro
 * un canvas di dimensione fissa, e i blocchi specimen/targa passano da
 * un posizionamento assoluto a un layout flessibile (colonna su
 * mobile, riga da 900px in su) — stessa identità visiva, ma reale su
 * qualunque viewport.
 *
 * Tutte le regole sono scope-ate a .dfa-single__frame / body.dfa-single
 * e a .dfa-archive, così il CSS è sicuro da caricare anche dentro una
 * pagina del tema quando si usa lo shortcode [devil_fruit_archive].
 */

:root {
	--bg: #08090a;
	--surface: #0a0b0c;
	--panel: #15171a;
	--silver: #d8dbde;
	--line: rgba(216, 219, 222, .16);
}

/*
 * Il fondo scuro va messo anche su html e body, non solo sui
 * contenitori interni: senza, sotto le nostre pagine resta il colore di
 * sfondo del TEMA attivo. Safari su iOS tinge le proprie barre (in alto
 * lo stato, in basso la barra indirizzi) campionando lo sfondo della
 * pagina, e finiva quindi per mostrarle color oro — il colore del tema —
 * invece che scure. Vedi anche il <meta name="theme-color"> nei
 * template, che lo dichiara in modo esplicito.
 */
html.dfa-single-html,
html.dfa-archive-html,
body.dfa-single,
body.dfa-archive-page {
	margin: 0;
	padding: 0;
	background: var(--bg);
}

.dfa-single__frame,
.dfa-archive {
	background: var(--bg);
	color: var(--silver);
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	-webkit-font-smoothing: antialiased;
}

.dfa-single__frame a,
.dfa-archive a {
	color: var(--silver);
	text-decoration: none;
}
.dfa-single__frame a:hover,
.dfa-archive a:hover {
	color: #fff;
}

.dfa-display { font-family: 'Saira Condensed', sans-serif; }
.dfa-jp { font-family: 'Noto Sans JP', sans-serif; }

/* --------------------------------------------------------------------
   TOP BAR (torna al sito / torna all'archivio) — condivisa tra scheda
   singola e archivio, fuori da .dfa-single__frame/.dfa-archive quindi
   con stile autonomo (non eredita le regole scope-ate qui sopra).
   -------------------------------------------------------------------- */

.dfa-topbar {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 6px;
}

.dfa-topbar__link {
	display: inline-block;
	padding: 11px 22px;
	background: rgba(14, 16, 18, .9);
	border: 1px solid rgba(216, 219, 222, .5);
	font: 400 11px/1 'IBM Plex Mono', ui-monospace, monospace;
	letter-spacing: .18em;
	color: #e8ebee;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.dfa-topbar__link:hover,
.dfa-topbar__link:focus-visible {
	background: rgba(216, 219, 222, .1);
	border-color: rgba(216, 219, 222, .85);
	color: #fff;
}

/* --------------------------------------------------------------------
   SCHEDA SINGOLA
   -------------------------------------------------------------------- */

.dfa-single__frame {
	position: relative !important;
	overflow: hidden;
	min-height: 100vh;
	padding-bottom: 100px;
}

/*
 * NOTA IMPORTANTE sullo z-index di questi livelli — qui stava il bug
 * per cui lo sfondo della scheda singola non compariva mai, mentre
 * quello dell'archivio funzionava.
 *
 * .dfa-single__frame ha un background opaco (var(--bg)) ed è
 * position:relative SENZA z-index, quindi NON crea uno stacking
 * context. Un figlio con z-index NEGATIVO (com'era qui: -2 / -1) non
 * resta confinato nel genitore: risale al primo antenato che crea uno
 * stacking context (body/root) e viene dipinto nel suo livello
 * "negativo", cioè PRIMA — e quindi sotto — al background opaco del
 * genitore stesso. Risultato: immagine caricata, markup corretto, ma
 * completamente coperta dal nero del frame.
 *
 * L'archivio non aveva il problema perché .dfa-archive__bg usa
 * z-index:0 (non negativo) e resta quindi sopra al background del suo
 * contenitore.
 *
 * Soluzione: tutti i livelli di sfondo a z-index:0 (dipinti sopra al
 * background del frame, nell'ordine del DOM) e contenuto a z-index:1.
 * Niente più valori negativi.
 *
 * Si usa inoltre position:absolute ancorato a .dfa-single__frame e non
 * position:fixed: un tema o plugin che applica transform/filter/
 * contain/will-change a un antenato (header sticky, effetti pagina)
 * riaggancerebbe un position:fixed a quell'antenato invece che al
 * viewport, rompendo il posizionamento.
 */
/*
 * Sfondo della scheda: DIMENSIONE NATURALE, mai scalato. Ancorato in
 * alto a SINISTRA, quindi restringendo la finestra sparisce
 * progressivamente da destra invece di rimpicciolirsi.
 *
 * max-width:none è !important perché il reset globale dei temi
 * ("img { max-width: 100% }", presente anche in WoodMart) rimetterebbe
 * altrimenti l'immagine in scala, annullando l'effetto.
 */
.dfa-single__bg {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: auto !important;
	height: auto !important;
	z-index: 0 !important;
	overflow: hidden !important;
	display: flex !important;
	justify-content: flex-start !important;
	line-height: 0;
}

/*
 * Dissolvenza sul bordo DESTRO dell'immagine (è ancorata a sinistra,
 * quindi è lì che su monitor larghi finisce di netto). Si usa una
 * maschera invece di un rettangolo sfumato sovrapposto: la maschera
 * agisce sull'immagine stessa, quindi la dissolvenza parte esattamente
 * dove finisce la foto qualunque sia la sua larghezza — cosa che un
 * elemento sovrapposto non potrebbe sapere, dato che il contenitore è
 * largo quanto la pagina mentre l'immagine no. Sotto resta il fondo
 * scuro della pagina, quindi il raccordo è col colore dello sfondo.
 */
.dfa-single__bg img {
	position: static !important;
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	flex: none !important;
	object-fit: initial !important;
	display: block !important;
	-webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
	mask-image: linear-gradient(to right, #000 55%, transparent 100%);
	opacity: var(--dfa-single-bg-opacity-mobile, 1);
}


/* Raccordo morbido tra la base dell'immagine e il fondo della pagina. */
.dfa-single__bg::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 45%;
	background: linear-gradient(180deg, transparent 0%, var(--bg) 100%);
}

.dfa-single__overlay {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	pointer-events: none;
	/* Velo alleggerito: della foto resta circa il 34% invece del 22%.
	   Le percentuali di sotto i 700px hanno regole proprie nel blocco
	   mobile, che era già stato alleggerito e non cambia. */
	background: linear-gradient(180deg, rgba(8, 9, 10, .72) 0%, rgba(8, 9, 10, .43) 38%, rgba(8, 9, 10, .86) 100%);
}

/*
 * Vignettatura PROPORZIONALE, non in pixel fissi.
 *
 * Prima era "box-shadow: inset 0 0 260px 90px": misure assolute, quindi
 * su un telefono da 390px la fascia piena (90px per lato) occupava già
 * il 46% della larghezza e la sfumatura da 260px copriva tutto il resto
 * — nessun pixel restava non scurito, e l'immagine spariva. Su desktop
 * lo stesso valore incide invece solo per il 13%.
 * Con un gradiente radiale in percentuale l'effetto è identico a
 * qualsiasi larghezza: il centro resta sempre leggibile.
 */
.dfa-single__vignette {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	pointer-events: none;
	/* Alleggerita insieme all'overlay: schiarire solo il centro
	   lasciando i bordi com'erano farebbe risaltare la vignettatura. */
	background: radial-gradient(ellipse 80% 70% at 50% 38%, transparent 0%, rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, .78) 100%);
}

.dfa-single__scanlines {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	pointer-events: none;
	opacity: .35;
	background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px);
}

/*
 * MOBILE: gli sfondi restano non-fluidi (stesso concetto: ancorati e
 * tagliati, mai stirati), ma resi al 50% della dimensione naturale, così
 * su schermo stretto si vede il doppio dell'immagine invece di un
 * dettaglio ingrandito.
 *
 * Si usa "zoom" e non "transform: scale()" perché zoom incide anche sul
 * layout: il contenitore si accorcia insieme all'immagine e la
 * dissolvenza ::after resta agganciata alla base reale. Con transform
 * l'altezza del contenitore sarebbe rimasta quella a grandezza piena,
 * lasciando la sfumatura staccata dall'immagine.
 */
@media (max-width: 700px) {
	.dfa-single__bg img,
	.dfa-archive__bg img {
		zoom: .5;
	}

	/*
	 * Su mobile l'immagine di sfondo è dimezzata, quindi occupa solo la
	 * fascia alta della pagina — cioè proprio dove il velo è più scuro
	 * (.86 in cima). I due effetti si sommavano e la rendevano quasi
	 * invisibile. Qui il velo parte molto più chiaro e la vignettatura è
	 * più tenue, così la foto si legge.
	 */
	/*
	 * Due livelli sovrapposti, con misure in PIXEL per la fascia alta.
	 * Le percentuali qui non funzionerebbero: sono calcolate sull'intera
	 * altezza della pagina (lunga, per via di targa e research note),
	 * quindi la zona dell'immagine — che sta tutta in cima — ricadrebbe
	 * comunque nella porzione più scura del gradiente.
	 *   1. banda scura alta ~90px, solo dietro l'intestazione, per
	 *      tenere leggibile il titolo;
	 *   2. velo di base molto leggero sull'immagine, che poi scurisce
	 *      verso il fondo pagina dove inizia il testo.
	 */
	.dfa-single__overlay {
		background:
			linear-gradient(180deg, rgba(8, 9, 10, .82) 0px, rgba(8, 9, 10, .5) 90px, rgba(8, 9, 10, 0) 200px),
			linear-gradient(180deg, rgba(8, 9, 10, .21) 0%, rgba(8, 9, 10, .21) 45%, rgba(8, 9, 10, .88) 100%);
	}

	.dfa-single__vignette {
		background: radial-gradient(ellipse 110% 90% at 50% 25%, transparent 0%, rgba(0, 0, 0, .1) 70%, rgba(0, 0, 0, .5) 100%);
	}

	/* La dissolvenza sotto l'immagine partiva al 45% della sua altezza:
	   con l'immagine dimezzata iniziava troppo presto. */
	.dfa-single__bg::after {
		height: 30%;
	}

	/* Le scanline aggiungono un ulteriore velo: alleggerite. */
	.dfa-single__scanlines {
		opacity: .12;
	}
}


/*
 * Navigazione della scheda: ancorata in alto a sinistra della pagina
 * (.dfa-single__frame e position: relative). Sotto i 700px torna nel
 * flusso, sopra al titolo: li il titolo occupa tutta la larghezza e un
 * bottone sovrapposto in alto a sinistra ci finirebbe addosso.
 */
.dfa-single__nav {
	position: absolute;
	top: 24px;
	left: 24px;
	z-index: 3;
}

.dfa-single__nav .dfa-topbar {
	margin-top: 0;
	justify-content: flex-start;
}

/*
 * Sotto i 1200px la navigazione torna nel flusso, sopra al titolo: il
 * titolo occupa tutta la larghezza disponibile e un bottone appoggiato
 * nell'angolo gli finirebbe sopra (misurato: si sovrapponevano fino a
 * circa 1300px di viewport).
 */
@media (max-width: 1199px) {
	.dfa-single__nav {
		position: static;
		padding: 20px 24px 0;
	}
	.dfa-single__nav .dfa-topbar {
		justify-content: center;
	}
}

.dfa-single__header {
	position: relative !important;
	z-index: 1 !important;
	padding: 24px 24px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

/*
 * Sopra i 1200px il bottone e ancorato all'angolo: l'intestazione gli
 * lascia il posto da entrambi i lati, cosi resta centrata e non ci
 * finisce sotto. Questo blocco DEVE stare dopo la regola qui sopra: ha
 * la stessa specificita e quella usa la scorciatoia "padding", che
 * riscriverebbe anche i lati.
 */
@media (min-width: 1200px) {
	.dfa-single__header {
		padding-left: 190px;
		padding-right: 190px;
	}
}

/* Titolo identico a quello dell'archivio (.dfa-archive__title), così le
   due pagine condividono la stessa testata. */
/*
 * Dimensione e trasparenza arrivano dalle impostazioni come variabili
 * (le stampa class-dfa-template-loader.php). I valori dopo la virgola
 * sono i ripieghi: se l'inline style non c'e — impostazioni mai
 * salvate, cache dello stile vecchia — il titolo resta com'era.
 */
/*
 * Dimensione e visibilita arrivano dalle impostazioni come variabili
 * (le stampa class-dfa-template-loader.php). I valori dopo la virgola
 * sono i ripieghi: se l'inline style non c'e — impostazioni mai
 * salvate, cache dello stile vecchia — il titolo resta com'era.
 *
 * Il titolo sta su UNA RIGA a qualunque larghezza: nowrap glielo impone
 * e il min() lo rimpicciolisce quanto basta perche ci stia. Il
 * coefficiente viene da una misura del font vero: "VEGAPUNK RESEARCH
 * DIVISION" in Saira Condensed 700 con letter-spacing .04em e largo
 * 12,16 volte la propria dimensione, quindi in (100/12,16) = 8,2vw ci
 * sta a filo; 8vw lascia un margine di sicurezza e i px sottratti
 * tengono conto del padding laterale dell'intestazione.
 */
.dfa-single__header-title {
	font: 700 44px/1 'Saira Condensed';
	font-size: min(var(--dfa-title-size-mobile, 44px), calc(8vw - 4px));
	letter-spacing: .04em;
	color: #eef1f3;
	text-align: center;
	white-space: nowrap;
}

/* La visibilita vale solo sul titolo, non sul Catalog ID sotto. */
.dfa-single__header-name {
	opacity: var(--dfa-title-opacity-mobile, 1);
}

/*
 * Catalog ID sotto al titolo. La sua dimensione e una PERCENTUALE del
 * titolo, non una misura fissa: cosi resta agganciato quando il titolo
 * cambia, comprese le riduzioni automatiche su schermo stretto, dove
 * una misura in px lo farebbe diventare piu grande del titolo stesso.
 */
.dfa-single__header-id {
	display: block;
	margin-top: 10px;
	font-size: var(--dfa-id-size, 50%);
	letter-spacing: .08em;
	color: rgba(226, 229, 232, .78);
	opacity: var(--dfa-id-opacity-mobile, 1);
}


.dfa-single__header-rule {
	width: 100%;
	max-width: 1200px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(216, 219, 222, .32) 12%, rgba(216, 219, 222, .32) 88%, transparent);
}

/* Fascia superiore: l'esemplare centrato, col bottone lampada centrato
   sotto di esso. Targa e research note stanno sotto, in
   .dfa-single__cols. */
.dfa-single__content {
	position: relative !important;
	z-index: 1 !important;
	display: flex;
	justify-content: center;
	max-width: 1200px;
	margin: 10px auto 0;
	padding: 0 24px;
}

/* Targa e research note affiancate, 50% e 50%. */
.dfa-single__cols {
	position: relative !important;
	z-index: 1 !important;
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 1200px;
	margin: 50px auto 0;
	padding: 0 24px;
}

@media (min-width: 900px) {
	.dfa-single__content { margin-top: 16px; }
	.dfa-single__cols {
		flex-direction: row;
		align-items: stretch;
		gap: 40px;
	}
	.dfa-single__panel-col,
	.dfa-single__note-col {
		flex: 1 1 50%;
		min-width: 0;
	}
}

/*
 * Esemplare centrato, col bottone lampada centrato sotto e leggermente
 * SOPRA l'immagine (sconfina nella zona del riflesso). Essendo impilati
 * in colonna, la larghezza del bottone non influenza la posizione
 * dell'immagine: cambiando l'etichetta da "SPEGNI" a "ACCENDI LA
 * LAMPADA" l'immagine resta ferma.
 */
.dfa-single__specimen-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/*
 * Niente altezza fissa: il primo livello resta nel flusso e detta
 * l'altezza del blocco, che quindi combacia con le proporzioni reali
 * dello scatto. Con un'altezza fissa (era 590px) restava sopra e sotto
 * una fascia vuota, e l'immagine non poteva crescere oltre quella
 * misura pur avendo spazio a disposizione.
 */
.dfa-single__specimen {
	position: relative;
	width: 100%;
	max-width: 560px;
	filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .85));
}

@media (min-width: 1100px) {
	.dfa-single__specimen { max-width: 680px; }
}

/*
 * Le due versioni (accesa/spenta) si alternano in dissolvenza da 1s al
 * clic sul bottone. Sovrapposto è SEMPRE il secondo livello, qualunque
 * sia: così se manca l'immagine in evidenza il blocco non si affloscia
 * a zero.
 */
.dfa-single__specimen-layer {
	transition: opacity 1s ease;
}
.dfa-single__specimen-layer + .dfa-single__specimen-layer {
	position: absolute;
	inset: 0;
}
/*
 * Quale scatto si vede: la combinazione di due interruttori
 * indipendenti, il modello (base o variante) e la lampada (accesa o
 * spenta). Tutti i livelli partono trasparenti e se ne riaccende uno
 * solo: elencare le quattro combinazioni per esteso è più lungo di una
 * catena di override, ma non lascia dubbi su cosa vince e non dipende
 * dall'ordine delle regole nel file.
 */
.dfa-single__specimen-layer { opacity: 0; }

.dfa-single__specimen:not(.is-variant):not(.is-unlit) .dfa-single__specimen-layer--lit,
.dfa-single__specimen:not(.is-variant).is-unlit .dfa-single__specimen-layer--unlit,
.dfa-single__specimen.is-variant:not(.is-unlit) .dfa-single__specimen-layer--variant-lit,
.dfa-single__specimen.is-variant.is-unlit .dfa-single__specimen-layer--variant-unlit {
	opacity: 1;
}

.dfa-single__specimen img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

/* Il livello sovrapposto si adatta al riquadro del primo. */
.dfa-single__specimen-layer + .dfa-single__specimen-layer img {
	height: 100%;
	object-fit: contain;
}

/* I due bottoni affiancati sotto l'esemplare. Lo scavalcamento
   sull'immagine sta qui e non sui bottoni, così restano allineati. */
.dfa-single__actions {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	/* Sconfina sull'immagine, all'altezza del riflesso. */
	margin-top: -58px;
}

.dfa-single__lamp-btn,
.dfa-single__variant-btn {
	display: inline-block;
	padding: 10px 18px;
	background: rgba(14, 16, 18, .9);
	border: 1px solid rgba(216, 219, 222, .5);
	font: 400 10px/1 'IBM Plex Mono', ui-monospace, monospace;
	letter-spacing: .18em;
	color: #e8ebee;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.dfa-single__lamp-btn:hover,
.dfa-single__lamp-btn:focus-visible,
.dfa-single__variant-btn:hover,
.dfa-single__variant-btn:focus-visible {
	background: rgba(216, 219, 222, .1);
	border-color: rgba(216, 219, 222, .85);
	color: #fff;
}

/* Modello senza versione spenta: il bottone della lampada resta lì ma
   spento, così i due bottoni non ballano cambiando variante. */
.dfa-single__lamp-btn[disabled] {
	opacity: .4;
	cursor: default;
}
.dfa-single__lamp-btn[disabled]:hover {
	background: rgba(14, 16, 18, .9);
	border-color: rgba(216, 219, 222, .5);
	color: #e8ebee;
}

/* Il modello in vista è marcato, come una linguetta selezionata. */
.dfa-single__variant-btn[aria-pressed="true"] {
	background: rgba(216, 219, 222, .16);
	border-color: rgba(216, 219, 222, .8);
	color: #fff;
}

.dfa-single__panel-col {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

.dfa-single__panel {
	position: relative;
	padding: 32px 30px 28px;
	background: linear-gradient(155deg, #191c1f 0%, #0e1012 55%, #141719 100%);
	border: 1px solid rgba(216, 219, 222, .26);
	box-shadow: 0 24px 50px rgba(0, 0, 0, .72), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.dfa-single__panel-screw {
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #c9ccd0, #4a4e52);
}
.dfa-single__panel-screw--tl { left: 10px; top: 10px; }
.dfa-single__panel-screw--tr { right: 10px; top: 10px; }
.dfa-single__panel-screw--bl { left: 10px; bottom: 10px; }
.dfa-single__panel-screw--br { right: 10px; bottom: 10px; }

/* Valore in chiaro come nelle righe SPECIAL NOTE / PROPRIETARIO; è
   l'etichetta a restare smorzata (vedi .dfa-single__panel .label). */
.dfa-single__panel-id {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font: 400 12px/1.5 'IBM Plex Mono';
	letter-spacing: .16em;
	color: rgba(226, 229, 232, .88);
}

.dfa-single__panel-rule {
	height: 1px;
	margin: 18px 0;
	background: rgba(216, 219, 222, .18);
}

/*
 * Nome + katakana affiancati all'immagine del frutto, quando c'è.
 * L'immagine sta a DESTRA per non spostare il nome: così CATALOG ID,
 * nome, TYPE, SPECIAL NOTE e PROPRIETARIO restano tutti allineati sullo
 * stesso margine sinistro. Per metterla a sinistra basta aggiungere qui
 * flex-direction: row-reverse.
 * Senza immagine il blocco resta identico a prima: un flex con un solo
 * figlio.
 */
.dfa-single__panel-heading {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* min-width: 0 lascia che il nome vada a capo dentro il flex invece di
   forzare l'allargamento della targa. */
.dfa-single__panel-heading-text {
	flex: 1 1 auto;
	min-width: 0;
}

.dfa-single__panel-thumb {
	flex: 0 0 auto;
	width: 72px;
	line-height: 0;
}

.dfa-single__panel-thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.dfa-single__panel-name {
	font: 700 46px/.98 'Saira Condensed';
	letter-spacing: .02em;
	color: #eef1f3;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .9);
	word-break: break-word;
}

.dfa-single__panel-kana {
	margin-top: 8px;
	font: 500 20px/1 'Noto Sans JP';
	letter-spacing: .14em;
	color: rgba(216, 219, 222, .66);
}

.dfa-single__panel-details {
	display: flex;
	flex-direction: column;
	gap: 11px;
	font: 400 13px/1.5 'IBM Plex Mono';
	letter-spacing: .1em;
	color: rgba(226, 229, 232, .88);
}

/* Regola unica per tutte le etichette della targa (CATALOG ID, TYPE,
   SPECIAL NOTE, PROPRIETARIO, EX PROPRIETARIO): etichetta smorzata,
   valore chiaro. */
.dfa-single__panel .label { color: rgba(216, 219, 222, .44); }

/*
 * Research note: sfumata sia sopra sia SOTTO, così si fonde col fondo
 * pagina da entrambi i lati invece di chiudersi con uno stacco netto.
 * Il bordo superiore diventa una linea sfumata ai lati (::before) e in
 * fondo il gradiente scende fino a trasparente (::after).
 */
.dfa-single__note {
	position: relative !important;
	z-index: 1 !important;
	padding: 26px 24px 40px;
	background: linear-gradient(180deg,
		rgba(8, 9, 10, 0) 0%,
		rgba(8, 9, 10, .72) 22%,
		rgba(8, 9, 10, .72) 70%,
		rgba(8, 9, 10, 0) 100%);
}

.dfa-single__note::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(216, 219, 222, .28) 15%, rgba(216, 219, 222, .28) 85%, transparent);
}

.dfa-single__note-head {
	display: flex;
	align-items: center;
	gap: 16px;
	font: 400 11px/1 'IBM Plex Mono';
	letter-spacing: .26em;
	color: rgba(216, 219, 222, .46);
}

.dfa-single__note-rule {
	flex: 1;
	height: 1px;
	background: rgba(216, 219, 222, .14);
}

/* Stesso font del testo della targa (.dfa-single__panel-details):
   IBM Plex Mono regular, non corsivo. */
.dfa-single__note-text {
	margin: 18px 0 0;
	font: 400 13px/1.5 'IBM Plex Mono';
	letter-spacing: .1em;
	color: rgba(226, 229, 232, .88);
}

@media (min-width: 640px) {
	.dfa-single__panel-name { font-size: 52px; }
	/* Cresce col nome, così resta alta quanto il blocco nome + katakana. */
	.dfa-single__panel-thumb { width: 96px; }
}

/* --------------------------------------------------------------------
   RIGA IN FONDO (single e archivio)

   Sta fuori dai contenitori con lo sfondo fotografico, quindi non ha
   bisogno di z-index: e appoggiata sul fondo pagina.
   -------------------------------------------------------------------- */

/*
 * Volutamente minuta e poco contrastata: e una riga di servizio, deve
 * esserci ma non contendere la scena all'archivio. Niente bordo
 * superiore e stesso fondo della pagina, cosi si fonde invece di
 * sembrare una fascia attaccata sotto.
 */
.dfa-footer {
	background: var(--bg);
	padding: 26px 24px 30px;
}

.dfa-footer__line {
	max-width: 1400px;
	margin: 0 auto;
	text-align: center;
	font: 400 10px/1.7 'IBM Plex Mono', ui-monospace, monospace;
	letter-spacing: .12em;
	color: rgba(216, 219, 222, .3);
}

/* Il link resta un filo piu leggibile del testo attorno, e in hover
   arriva a contrasto pieno: e l'unica cosa cliccabile della riga. */
.dfa-footer__line a {
	color: rgba(216, 219, 222, .42);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}

.dfa-footer__line a:hover,
.dfa-footer__line a:focus-visible {
	color: #eef1f3;
	border-bottom-color: rgba(216, 219, 222, .45);
}

/* --------------------------------------------------------------------
   ARCHIVIO / GRIGLIA (archive-esemplare + shortcode)
   -------------------------------------------------------------------- */

.dfa-archive {
	position: relative !important;
	padding: 50px 24px 70px;
	overflow: hidden;
}

/*
 * Immagine di sfondo decorativa in alto (impostazioni plugin).
 *
 * DIMENSIONE NATURALE, non scalata: l'immagine mantiene i pixel del
 * file originale ed è ancorata al centro in orizzontale e in alto in
 * verticale. Su schermi più stretti dell'immagine viene ritagliata ai
 * lati (overflow:hidden), su schermi più larghi resta della sua misura
 * con il fondo scuro attorno — invece di rimpicciolirsi/ingrandirsi
 * seguendo la larghezza della finestra.
 *
 * Il contenitore è fuori dal flusso, DIETRO al contenuto (z-index 0),
 * che gli scorre sopra partendo a 50px dal bordo superiore. La
 * centratura è ottenuta con flex + justify-content:center e l'immagine
 * come flex item non comprimibile (flex:none), così non viene
 * ristretta per stare nel contenitore.
 *
 * !important sulle regole di layout: queste pagine sono documenti
 * HTML autonomi che, per admin bar/SEO/analytics, caricano comunque
 * wp_head()/wp_footer() e quindi anche il CSS del tema attivo. Temi
 * come WoodMart applicano reset globali (tipicamente
 * "img { max-width: 100%; height: auto }") che altrimenti vincono per
 * ordine di caricamento e rimetterebbero l'immagine in scala,
 * annullando proprio l'effetto voluto qui.
 */
.dfa-archive__bg {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: auto !important;
	z-index: 0 !important;
	overflow: hidden !important;
	display: flex !important;
	justify-content: center !important;
	line-height: 0;
}
/*
 * Come nella scheda singola, ma qui l'immagine è CENTRATA: su monitor
 * più larghi del file il taglio netto c'è da entrambi i lati, quindi la
 * maschera sfuma sia a sinistra sia a destra verso il fondo pagina.
 */
.dfa-archive__bg img {
	position: static !important;
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	flex: none !important;
	object-fit: initial !important;
	display: block !important;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
	opacity: var(--dfa-archive-bg-opacity-mobile, 1);
}
.dfa-archive__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 9, 10, .25) 0%, rgba(8, 9, 10, .6) 60%, var(--bg) 100%);
}


.dfa-archive--shortcode {
	padding: 20px 0;
	overflow: visible;
}

.dfa-archive__scanlines {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .3;
	background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 3px);
}

.dfa-archive__header {
	position: relative !important;
	z-index: 1 !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
	max-width: 1400px;
	margin: 0 auto;
}

/*
 * Come il titolo della scheda: una riga sola a qualunque larghezza.
 * Stessa scritta, stesso font e stesso letter-spacing, quindi vale lo
 * stesso coefficiente misurato (largo 12,16 volte la dimensione, ci sta
 * in 8,2vw; qui si usa 8vw meno il padding laterale della pagina).
 */
.dfa-archive__title {
	font: 700 44px/1 'Saira Condensed';
	font-size: min(44px, calc(8vw - 4px));
	letter-spacing: .04em;
	color: #eef1f3;
	white-space: nowrap;
}

.dfa-archive__subtitle {
	font: 400 14px/1 'IBM Plex Mono';
	letter-spacing: .35em;
	color: rgba(216, 219, 222, .72);
}

.dfa-archive__tag {
	font: 400 11px/1 'IBM Plex Mono';
	letter-spacing: .3em;
	color: rgba(216, 219, 222, .4);
}

.dfa-archive__rule {
	width: 100%;
	height: 1px;
	margin-top: 18px;
	background: linear-gradient(90deg, transparent, rgba(216, 219, 222, .3) 10%, rgba(216, 219, 222, .3) 90%, transparent);
}

.dfa-archive__brandbar {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	font: 400 11px/1 'IBM Plex Mono';
	letter-spacing: .2em;
	color: rgba(216, 219, 222, .44);
}

@media (min-width: 700px) {
	.dfa-archive__title { font-size: min(60px, calc(8vw - 4px)); }
}

.dfa-archive__grid {
	position: relative !important;
	z-index: 1 !important;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	max-width: 1400px;
	margin: 44px auto 0;
}

@media (min-width: 560px) {
	.dfa-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.dfa-archive__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
	.dfa-archive__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.dfa-archive__card {
	position: relative !important;
	overflow: hidden !important;
	/* Altezza fissa: la card ha sempre la stessa forma, sia con
	   sfondo/frutto/entrambi/nessuno dei due (i livelli sotto sono
	   tutti position:absolute e non influenzano il flusso). */
	background: linear-gradient(170deg, #131618, #0c0e10);
	border: 1px solid rgba(216, 219, 222, .16);
	transition: border-color .18s ease, box-shadow .18s ease;
}

/* La card NON si solleva al passaggio del mouse: resta ferma, cambiano
   solo bordo e alone. */
.dfa-archive__card:hover,
.dfa-archive__card:focus-within {
	border-color: rgba(216, 219, 222, .42);
	box-shadow: 0 18px 34px rgba(0, 0, 0, .65), 0 0 22px rgba(216, 219, 222, .07);
}

/*
 * Layout della card: testo (seriale, nome, badge) in basso a SINISTRA,
 * immagine del frutto in basso a DESTRA accanto al nome. min-height dà
 * alla card una forma costante anche quando mancano le immagini.
 */
.dfa-archive__card-link {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 320px;
	position: relative !important;
	padding: 18px;
}
.dfa-archive__card-link:hover,
.dfa-archive__card-link:focus-visible { color: inherit; }

/*
 * Card "coming soon": si vede ma non si apre. Il contenitore è un
 * <div> invece di un <a>, quindi qui si tolgono anche i segnali di
 * interattività — sollevamento, bordo acceso e ritorno al colore
 * dell'immagine in hover — altrimenti la card prometterebbe un clic che
 * non c'è.
 */
.dfa-archive__card--coming {
	cursor: default;
}

/*
 * Bianco e nero elemento per elemento e NON con un grayscale sul
 * contenitore: quello varrebbe anche per la fascia COMING SOON, che
 * deve restare rossa. Un filtro sul genitore agisce sul risultato gia
 * composto, quindi dall'interno non si puo annullare.
 *
 * Due classi battono una, percio queste regole vincono sulle generiche
 * a prescindere dall'ordine nel file.
 */
.dfa-archive__card--coming .dfa-archive__card-bg-character img {
	filter: grayscale(100%);
}
.dfa-archive__card--coming .dfa-archive__card-image img {
	filter: grayscale(100%) brightness(.5) drop-shadow(0 8px 14px rgba(0, 0, 0, .55));
}
.dfa-archive__card--coming .dfa-archive__badge-icon {
	filter: grayscale(100%);
}
.dfa-archive__card--coming .dfa-archive__card-veil {
	background: rgba(0, 0, 0, .5);
}
.dfa-archive__card--coming:hover,
.dfa-archive__card--coming:focus-within {
	border-color: rgba(216, 219, 222, .16);
	box-shadow: none;
}

/* Fascia in alto sulla card, sopra a tutti i livelli dello sfondo. */
.dfa-archive__card-watermark {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	padding: 9px 10px;
	/* Rosso scuro trasparente: sul nero della card la fascia si
	   confondeva con lo sfondo e la scritta passava in secondo piano. */
	background: rgba(110, 16, 21, .78);
	border-bottom: 1px solid rgba(255, 138, 138, .32);
	font: 700 11px/1 'IBM Plex Mono', ui-monospace, monospace;
	letter-spacing: .3em;
	text-align: center;
	text-indent: .3em; /* compensa lo spazio finale del letter-spacing */
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

.dfa-archive__card-corner {
	position: absolute;
	width: 10px;
	height: 10px;
	border-color: rgba(216, 219, 222, .4);
}
.dfa-archive__card-corner--tl { left: 6px; top: 6px; border-left: 1px solid; border-top: 1px solid; }
.dfa-archive__card-corner--tr { right: 6px; top: 6px; border-right: 1px solid; border-top: 1px solid; }
.dfa-archive__card-corner--bl { left: 6px; bottom: 6px; border-left: 1px solid; border-bottom: 1px solid; }
.dfa-archive__card-corner--br { right: 6px; bottom: 6px; border-right: 1px solid; border-bottom: 1px solid; }

/*
 * Composizione di sfondo della card, dal basso verso l'alto:
 *  1. card-bg-character — foto proprietario attuale, zoomata e
 *     ancorata a sinistra, in bianco e nero (a colori solo in hover
 *     della card).
 *  2. card-veil — velo nero piatto al 50% sopra il personaggio, per
 *     scurirlo.
 *  3. card-overlay — leggera dissolvenza verso il basso, solo per
 *     mantenere leggibile il testo (id/nome/badge).
 * Sopra a tutto, il riquadro card-image è ora TRASPARENTE: mostra
 * esclusivamente "Immagine frutto" (mai la featured image del post) e,
 * se non caricata, lascia vedere lo sfondo sottostante invece di un
 * riquadro nero.
 * Tutti i livelli sono position:absolute: non influenzano mai la
 * forma/altezza della card. !important per isolare dal CSS del tema
 * (vedi nota sopra .dfa-archive__bg): senza, un reset del tema su
 * position/width può far "ricadere" questi livelli nel flusso normale,
 * impilandoli come blocchi invece di sovrapporli.
 */
.dfa-archive__card-bg {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	overflow: hidden !important;
}

.dfa-archive__card-bg-character {
	position: absolute !important;
	inset: 0 !important;
}
.dfa-archive__card-bg-character img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: left center !important;
	display: block !important;
	transform: scale(1.2);
	transform-origin: left center;
	/* A colori gia a riposo: il bianco e nero e il segno dei "coming
	   soon", e usarlo anche per gli attivi li faceva sembrare tutti
	   uguali a colpo d'occhio. */
	filter: none;
	transition: filter .3s ease;
}
/* Il mouse accentua, non accende: i colori ci sono gia. */
.dfa-archive__card:hover .dfa-archive__card-bg-character img,
.dfa-archive__card:focus-within .dfa-archive__card-bg-character img {
	filter: saturate(1.35) contrast(1.05);
}

.dfa-archive__card-veil {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	background: rgba(0, 0, 0, .45);
	transition: background .3s ease;
}

/* Il velo a riposo e gia quello che prima si vedeva solo in hover; il
   mouse toglie un altro 10% (non 10 punti). */
.dfa-archive__card:hover .dfa-archive__card-veil,
.dfa-archive__card:focus-within .dfa-archive__card-veil {
	background: rgba(0, 0, 0, .4);
}

.dfa-archive__card-overlay {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	background: linear-gradient(180deg, transparent 0%, transparent 45%, rgba(10, 11, 12, .55) 72%, rgba(10, 11, 12, .95) 100%);
}

/* Immagine frutto: piccola, ancorata in basso a destra, accanto al
   blocco di testo che resta a sinistra. */
.dfa-archive__card-image {
	position: absolute !important;
	right: 14px !important;
	bottom: 12px !important;
	left: auto !important;
	top: auto !important;
	z-index: 1 !important;
	width: 40% !important;
	height: 42% !important;
	background: transparent;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	pointer-events: none;
}

/*
 * A riposo il frutto è scurito del 50%, come lo sfondo del personaggio
 * (che è in bianco e nero); al passaggio del mouse entrambi tornano a
 * piena luminosità e colore.
 *
 * Si usa filter: brightness() e non un riquadro nero sovrapposto perché
 * le immagini frutto sono PNG con trasparenza: un velo rettangolare
 * scurirebbe anche l'area vuota attorno al frutto, mentre il filtro
 * agisce solo sui pixel effettivamente visibili.
 */
.dfa-archive__card-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: bottom right !important;
	filter: brightness(1) drop-shadow(0 8px 14px rgba(0, 0, 0, .55));
	transition: filter .3s ease;
}

.dfa-archive__card:hover .dfa-archive__card-image img,
.dfa-archive__card:focus-within .dfa-archive__card-image img {
	filter: brightness(1.12) saturate(1.25) drop-shadow(0 8px 14px rgba(0, 0, 0, .55));
}

/*
 * NOTA sull'ordine: queste regole del "coming soon" hanno la STESSA
 * specificità di quelle hover qui sopra (due classi + una pseudo-classe
 * + un elemento), quindi a decidere è l'ordine nel file. Devono stare
 * DOPO, altrimenti perdono e la card coming soon si illumina lo stesso
 * al passaggio del mouse.
 */
/* Niente "accensione" al passaggio del mouse: personaggio e frutto
   restano esattamente come a riposo. Queste hanno la stessa
   specificita delle generiche in hover, quindi vincono solo perche
   stanno dopo. */
.dfa-archive__card--coming:hover .dfa-archive__card-bg-character img,
.dfa-archive__card--coming:focus-within .dfa-archive__card-bg-character img {
	filter: grayscale(100%);
}
.dfa-archive__card--coming:hover .dfa-archive__card-image img,
.dfa-archive__card--coming:focus-within .dfa-archive__card-image img {
	filter: grayscale(100%) brightness(.5) drop-shadow(0 8px 14px rgba(0, 0, 0, .55));
}
.dfa-archive__card--coming:hover .dfa-archive__card-veil,
.dfa-archive__card--coming:focus-within .dfa-archive__card-veil {
	background: rgba(0, 0, 0, .5);
}

/* Il testo resta a sinistra: max-width lascia libera la colonna destra
   dove sta l'immagine del frutto, così i due non si sovrappongono. */
.dfa-archive__card-id {
	position: relative;
	z-index: 1;
	max-width: 58%;
	margin-top: 16px;
	font: 700 12px/1 'IBM Plex Mono';
	letter-spacing: .22em;
	color: rgba(216, 219, 222, .55);
}

.dfa-archive__card-name {
	position: relative;
	z-index: 1;
	max-width: 58%;
	margin-top: 9px;
	font: 600 25px/1.1 'Saira Condensed';
	letter-spacing: .02em;
	color: #e9ecee;
}

/* "NO MI" (ed eventuale specifica di modello) a capo sotto il nome, a
   metà della dimensione: font-size in percentuale, così resta sempre
   il 50% del corpo del nome anche se quest'ultimo cambia. */
.dfa-archive__card-name-suffix {
	display: block;
	font-size: 50%;
	line-height: 1.2;
	letter-spacing: .06em;
	color: rgba(233, 236, 238, .82);
}

.dfa-archive__badge {
	position: relative;
	z-index: 1;
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 6px 11px;
	width: max-content;
	border: 1px solid rgba(216, 219, 222, .3);
	font: 400 10px/1 'IBM Plex Mono';
	letter-spacing: .18em;
	color: rgba(226, 229, 232, .8);
}

.dfa-archive__badge-icon {
	width: 9px;
	height: 9px;
	border: 1px solid rgba(226, 229, 232, .85);
	flex: none;
}
.dfa-archive__badge-icon--logia { border-radius: 50%; }
.dfa-archive__badge-icon--zoan { transform: rotate(45deg); }
.dfa-archive__badge-icon--mythical { border-radius: 50%; box-shadow: 0 0 0 3px rgba(226, 229, 232, .18); }

.dfa-archive__empty {
	position: relative;
	z-index: 1;
	padding: 60px 20px;
	text-align: center;
	color: rgba(216, 219, 222, .5);
	letter-spacing: .1em;
}

.dfa-archive .nav-links,
.dfa-archive .page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 40px;
	font: 400 12px/1 'IBM Plex Mono';
	letter-spacing: .12em;
	color: rgba(216, 219, 222, .6);
}

.dfa-archive .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	border: 1px solid rgba(216, 219, 222, .25);
}

.dfa-archive .page-numbers.current {
	border-color: rgba(216, 219, 222, .7);
	color: #fff;
}

/* --------------------------------------------------------------------
   VALORI PER SCHERMI LARGHI (impostazioni desktop)

   Questo blocco sta in FONDO al file di proposito: sovrascrive regole
   che hanno la sua stessa specificita, e a parita di specificita vince
   chi viene dopo. Spostarlo piu in alto lo renderebbe inefficace senza
   che nulla segnali l'errore.
   -------------------------------------------------------------------- */

@media (min-width: 700px) {
	.dfa-single__header-title {
		font-size: min(var(--dfa-title-size, 60px), calc(8vw - 4px));
	}

	.dfa-single__header-name {
		opacity: var(--dfa-title-opacity, 1);
	}

	.dfa-single__header-id {
		opacity: var(--dfa-id-opacity, 1);
	}

	.dfa-single__bg img {
		opacity: var(--dfa-single-bg-opacity, 1);
	}

	.dfa-archive__bg img {
		opacity: var(--dfa-archive-bg-opacity, 1);
	}
}

/* Sopra i 1200px l'intestazione lascia 190px liberi per lato al bottone
   dell'archivio: lo spazio per il titolo e quello meno 380px. */
@media (min-width: 1200px) {
	.dfa-single__header-title {
		font-size: min(var(--dfa-title-size, 60px), calc(8vw - 32px));
	}
}