/*
 * ImperialCraft - Isola di Aurion (modalità MMORPG)
 * Base, impaginazione e componenti. Le animazioni sono in effetti.css.
 * Stesse tinte della mappa Dynmap (plugins/dynmap/web/css/imperialcraft.css):
 * cuoio, oro, cremisi dello stendardo e pergamena.
 */

:root {
	--notte: #150f0b;
	--notte-2: #1c140f;
	--cuoio: #241a12;
	--cuoio-2: #2e2117;
	--oro: #d4ae62;
	--oro-luce: #f2d68f;
	--oro-scuro: #7d5f27;
	--cremisi: #8e2320;
	--cremisi-luce: #b53a2f;
	--cremisi-scuro: #5c1414;
	--avorio: #e9dcc0;
	--pergamena: #efe3c8;
	--pergamena-2: #b9a888;
	--pergamena-3: #8a7c63;
	--verde: #8fcf7a;
	--mare: #12285a;

	--gotico: 'Grenze Gotisch', Georgia, serif;
	--testo: 'Alegreya', Georgia, 'Times New Roman', serif;
	--maiuscoletto: 'Alegreya SC', 'Alegreya', Georgia, serif;

	--cornice: inset 0 0 0 1px rgba(242, 214, 143, .12), inset 0 0 0 4px rgba(0, 0, 0, .5), inset 0 0 0 5px rgba(212, 174, 98, .35);
	--ombra: 0 12px 34px rgba(0, 0, 0, .55);
	--barra: 66px;
	--margine: clamp(16px, 4vw, 48px);
	--larghezza: 1180px;

	/* angoli d'oro delle cornici (.ornato), uno per lato: generati da un solo disegno capovolto */
	--angolo-as: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23d4ae62'%3E%3Cg transform='matrix(1 0 0 1 0 0)'%3E%3Cpath d='M2.5 46V15C2.5 8 8 2.5 15 2.5H46' stroke-width='1.6'/%3E%3Cpath d='M7.5 46V17.5C7.5 12 12 7.5 17.5 7.5H46' stroke-width='.8' opacity='.55'/%3E%3Cpath d='M2.5 21C12 21 21 12 21 2.5' stroke-width='1'/%3E%3Cpath d='M14 9.5 18.5 14 14 18.5 9.5 14Z' fill='%23d4ae62' stroke='none'/%3E%3Ccircle cx='46' cy='2.5' r='1.6' fill='%23d4ae62' stroke='none'/%3E%3Ccircle cx='2.5' cy='46' r='1.6' fill='%23d4ae62' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
	--angolo-ad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23d4ae62'%3E%3Cg transform='matrix(-1 0 0 1 48 0)'%3E%3Cpath d='M2.5 46V15C2.5 8 8 2.5 15 2.5H46' stroke-width='1.6'/%3E%3Cpath d='M7.5 46V17.5C7.5 12 12 7.5 17.5 7.5H46' stroke-width='.8' opacity='.55'/%3E%3Cpath d='M2.5 21C12 21 21 12 21 2.5' stroke-width='1'/%3E%3Cpath d='M14 9.5 18.5 14 14 18.5 9.5 14Z' fill='%23d4ae62' stroke='none'/%3E%3Ccircle cx='46' cy='2.5' r='1.6' fill='%23d4ae62' stroke='none'/%3E%3Ccircle cx='2.5' cy='46' r='1.6' fill='%23d4ae62' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
	--angolo-bs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23d4ae62'%3E%3Cg transform='matrix(1 0 0 -1 0 48)'%3E%3Cpath d='M2.5 46V15C2.5 8 8 2.5 15 2.5H46' stroke-width='1.6'/%3E%3Cpath d='M7.5 46V17.5C7.5 12 12 7.5 17.5 7.5H46' stroke-width='.8' opacity='.55'/%3E%3Cpath d='M2.5 21C12 21 21 12 21 2.5' stroke-width='1'/%3E%3Cpath d='M14 9.5 18.5 14 14 18.5 9.5 14Z' fill='%23d4ae62' stroke='none'/%3E%3Ccircle cx='46' cy='2.5' r='1.6' fill='%23d4ae62' stroke='none'/%3E%3Ccircle cx='2.5' cy='46' r='1.6' fill='%23d4ae62' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
	--angolo-bd: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23d4ae62'%3E%3Cg transform='matrix(-1 0 0 -1 48 48)'%3E%3Cpath d='M2.5 46V15C2.5 8 8 2.5 15 2.5H46' stroke-width='1.6'/%3E%3Cpath d='M7.5 46V17.5C7.5 12 12 7.5 17.5 7.5H46' stroke-width='.8' opacity='.55'/%3E%3Cpath d='M2.5 21C12 21 21 12 21 2.5' stroke-width='1'/%3E%3Cpath d='M14 9.5 18.5 14 14 18.5 9.5 14Z' fill='%23d4ae62' stroke='none'/%3E%3Ccircle cx='46' cy='2.5' r='1.6' fill='%23d4ae62' stroke='none'/%3E%3Ccircle cx='2.5' cy='46' r='1.6' fill='%23d4ae62' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
	/* grana della pergamena sopra gli sfondi scuri */
	--grana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .8 0 0 0 0 .6 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* clip e non hidden: le comparse da destra (translate) non allargano la pagina sui telefoni */
	overflow-x: clip;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--barra) + 16px);
	-webkit-text-size-adjust: 100%;
	scrollbar-color: var(--oro-scuro) var(--notte);
}

body {
	margin: 0;
	background: var(--grana), var(--notte);
	color: var(--pergamena);
	font-family: var(--testo);
	font-size: 1.125rem;
	line-height: 1.6;
	overflow-x: clip;
}

::selection {
	background: var(--cremisi);
	color: var(--oro-luce);
}

img {
	display: block;
	max-width: 100%;
}

a {
	color: var(--oro-luce);
	text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
	outline: 2px solid var(--oro-luce);
	outline-offset: 3px;
	border-radius: 2px;
}

h1,
h2,
h3,
h4 {
	font-family: var(--gotico);
	font-weight: 700;
	line-height: 1.05;
	margin: 0;
	color: var(--oro-luce);
	letter-spacing: .01em;
}

p {
	margin: 0 0 1em;
}

.icona {
	width: 1.2em;
	height: 1.2em;
	flex: none;
	vertical-align: -.2em;
}

.salta {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 200;
	padding: 8px 14px;
	background: var(--oro);
	color: var(--notte);
}

.salta:focus {
	left: 8px;
}

.nascosto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

[hidden] {
	display: none !important;
}

kbd {
	display: inline-block;
	min-width: 1.9em;
	padding: .05em .45em .12em;
	border-radius: 4px;
	background: linear-gradient(180deg, #3a2c1f, #241a12);
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(212, 174, 98, .55), 0 2px 4px rgba(0, 0, 0, .4);
	font-family: var(--maiuscoletto);
	font-size: .88em;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	color: var(--oro-luce);
	white-space: nowrap;
}

code {
	padding: 1px 6px;
	border-radius: 2px;
	background: rgba(0, 0, 0, .42);
	box-shadow: inset 0 0 0 1px rgba(212, 174, 98, .18);
	color: var(--oro-luce);
	font-family: Consolas, 'Courier New', monospace;
	font-size: .9em;
	/* nelle schede strette il comando va a capo invece di uscire dalla cornice */
	overflow-wrap: anywhere;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* nelle tabelle (che scorrono di lato) il comando resta su una riga */
table code {
	white-space: nowrap;
	overflow-wrap: normal;
}

/* cornice con gli angoli d'oro */
.ornato {
	position: relative;
}

.ornato::before {
	content: "";
	position: absolute;
	z-index: 5;
	inset: 6px;
	pointer-events: none;
	background:
		var(--angolo-as) top left / 38px 38px no-repeat,
		var(--angolo-ad) top right / 38px 38px no-repeat,
		var(--angolo-bs) bottom left / 38px 38px no-repeat,
		var(--angolo-bd) bottom right / 38px 38px no-repeat;
}

/* bordo superiore merlato, come le mura del castello */
.merlato {
	--merlo: 16px;
	padding-top: calc(clamp(72px, 10vw, 128px) + var(--merlo));
	-webkit-mask:
		linear-gradient(#000 0 0) 0 var(--merlo) / 100% calc(100% - var(--merlo)) no-repeat,
		repeating-linear-gradient(90deg, #000 0 30px, transparent 30px 48px) 0 0 / 100% var(--merlo) no-repeat;
	mask:
		linear-gradient(#000 0 0) 0 var(--merlo) / 100% calc(100% - var(--merlo)) no-repeat,
		repeating-linear-gradient(90deg, #000 0 30px, transparent 30px 48px) 0 0 / 100% var(--merlo) no-repeat;
}

/* fregio d'oro sotto i titoli (svg in pagina; il tratto si disegna in effetti.css) */
.fregio {
	display: block;
	width: min(320px, 80%);
	height: 28px;
	margin-top: 14px;
	color: var(--oro);
	overflow: visible;
}

/* ---------- barra in alto ---------- */

.avanzamento {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 120;
	width: 100%;
	height: 3px;
	transform-origin: 0 50%;
	transform: scaleX(var(--letto, 0));
	background: linear-gradient(90deg, var(--cremisi), var(--oro), var(--oro-luce));
	box-shadow: 0 0 10px rgba(242, 214, 143, .6);
	pointer-events: none;
}

.barra {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--barra);
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 0 var(--margine);
	background: rgba(21, 15, 11, .8);
	backdrop-filter: blur(10px) saturate(1.2);
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	border-bottom: 1px solid rgba(212, 174, 98, .28);
	transition: background .3s, box-shadow .3s;
}

.barra.scorsa {
	background: rgba(17, 12, 9, .95);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

.barra-marchio {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--oro-luce);
	font-family: var(--gotico);
	font-size: 1.55rem;
	font-weight: 700;
	white-space: nowrap;
}

.barra-marchio img {
	width: 42px;
	height: 42px;
	border-radius: 4px;
	box-shadow: 0 0 0 1px rgba(212, 174, 98, .5);
}

.barra-nav {
	margin-left: auto;
}

.barra-voci {
	display: flex;
	gap: clamp(14px, 2vw, 26px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.barra-voci a {
	position: relative;
	display: block;
	padding: 6px 0;
	color: var(--pergamena-2);
	text-decoration: none;
	font-family: var(--maiuscoletto);
	font-size: 1.08rem;
	font-weight: 500;
	transition: color .2s;
}

.barra-voci a::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--oro), transparent);
	transition: left .3s, right .3s;
}

.barra-voci a:hover,
.barra-voci a[aria-current="page"] {
	color: var(--oro-luce);
}

.barra-voci a:hover::after,
.barra-voci a[aria-current="page"]::after {
	left: 0;
	right: 0;
}

.barra-apri {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: rgba(212, 174, 98, .08);
	box-shadow: inset 0 0 0 1px rgba(212, 174, 98, .45);
	color: var(--oro-luce);
	cursor: pointer;
}

.barra-apri .icona {
	width: 26px;
	height: 26px;
	vertical-align: middle;
}

/* ---------- bottoni ---------- */

.bottone {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 10px 22px;
	border: 0;
	border-radius: 3px;
	font-family: var(--maiuscoletto);
	font-size: 1.1rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	color: var(--pergamena);
	background: linear-gradient(180deg, #a52c27, var(--cremisi) 55%, var(--cremisi-scuro));
	box-shadow: inset 0 1px 0 rgba(255, 220, 180, .25), inset 0 0 0 1px rgba(242, 214, 143, .35), 0 4px 14px rgba(0, 0, 0, .45);
	transition: transform .15s, filter .2s;
}

.bottone:hover {
	filter: brightness(1.12);
	transform: translateY(-1px);
}

.bottone:active {
	transform: translateY(1px);
}

.bottone .icona {
	width: 1.3em;
	height: 1.3em;
}

.bottone-oro {
	color: #2a1d10;
	background: linear-gradient(180deg, var(--oro-luce), var(--oro) 60%, #b48d45);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(90, 60, 20, .5), 0 4px 14px rgba(0, 0, 0, .45);
}

.bottone-vuoto {
	color: var(--oro-luce);
	background: rgba(21, 15, 11, .55);
	box-shadow: inset 0 0 0 1px rgba(212, 174, 98, .6);
}

.barra .bottone {
	min-height: 40px;
	padding: 6px 16px;
	font-size: 1rem;
}

/* targa con l'indirizzo del server */

.targa {
	position: relative;
	display: inline-flex;
	align-items: stretch;
	min-height: 54px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	font: inherit;
	color: var(--pergamena);
	background: linear-gradient(180deg, var(--cuoio-2), var(--cuoio));
	box-shadow: var(--cornice), 0 6px 20px rgba(0, 0, 0, .5);
}

.targa-ip {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 18px;
	font-family: var(--maiuscoletto);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--oro-luce);
	letter-spacing: .02em;
}

.targa-azione {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
	border-left: 1px solid rgba(212, 174, 98, .4);
	font-family: var(--maiuscoletto);
	font-size: 1rem;
	color: var(--pergamena-2);
	transition: color .2s;
}

.targa:hover .targa-azione {
	color: var(--oro-luce);
}

.targa[data-copiato] .targa-azione {
	color: var(--verde);
}

/* stato del server, letto da Dynmap */

.stato {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 18px;
	margin: 0;
	padding: 7px 16px;
	border-radius: 999px;
	background: rgba(15, 10, 7, .72);
	box-shadow: inset 0 0 0 1px rgba(212, 174, 98, .3);
	font-size: 1rem;
	color: var(--pergamena);
}

.stato > span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.stato .icona {
	color: var(--oro-luce);
}

.stato-punto {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--verde);
}

.stato.spento .stato-punto {
	background: #c0574a;
}

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

.sezione {
	position: relative;
	padding: clamp(72px, 10vw, 128px) var(--margine);
}

.contenuto {
	max-width: var(--larghezza);
	margin: 0 auto;
}

.testata {
	margin-bottom: clamp(36px, 5vw, 56px);
}

.testata.centrata {
	text-align: center;
}

.testata.centrata .sezione-intro,
.testata.centrata .fregio {
	margin-left: auto;
	margin-right: auto;
}

.sezione-titolo {
	font-size: clamp(2.6rem, 6vw, 4.4rem);
}

.sezione-intro {
	max-width: 60ch;
	margin-top: 16px;
	color: var(--pergamena-2);
}

/* ---------- apertura della home ---------- */

.eroe {
	position: relative;
	min-height: min(100svh, 980px);
	display: grid;
	align-items: start;
	justify-items: center;
	margin-top: calc(var(--barra) * -1);
	padding: calc(var(--barra) + clamp(20px, 6vh, 60px)) var(--margine) 120px;
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}

.eroe-sfondo,
.eroe-sfondo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -3;
}

.eroe-sfondo img {
	object-fit: cover;
	object-position: 50% 100%;
}

.eroe::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 60% 40% at 50% 30%, rgba(21, 15, 11, .35), transparent 70%),
		linear-gradient(180deg, rgba(21, 15, 11, .92) 0%, rgba(21, 15, 11, .5) 28%, rgba(21, 15, 11, 0) 52%),
		linear-gradient(0deg, var(--notte) 0%, rgba(21, 15, 11, 0) 30%);
}

.braci {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.eroe .braci {
	z-index: -1;
}

.eroe-stemma {
	width: clamp(140px, 19vw, 210px);
	height: auto;
	margin: 0 auto;
	/* sfuma i bordi dello sfondo del logo senza tagliare la scritta */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
	mask-composite: intersect;
}

.eroe h1 {
	margin-top: 6px;
	font-size: clamp(3.4rem, 10vw, 7.6rem);
	font-weight: 800;
	color: var(--oro-luce);
	filter: drop-shadow(0 2px 0 #4a3412) drop-shadow(0 8px 22px rgba(0, 0, 0, .8));
}

.eroe-sotto {
	max-width: 40ch;
	margin: 16px auto 28px;
	font-size: clamp(1.15rem, 2.2vw, 1.4rem);
	color: var(--pergamena);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .95);
}

.eroe-azioni {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

.eroe-versione {
	margin: 16px 0 18px;
	font-size: 1rem;
	color: var(--pergamena-2);
	text-shadow: 0 1px 6px rgba(0, 0, 0, .95);
}

.scorri {
	position: absolute;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: var(--pergamena-2);
	text-decoration: none;
	font-family: var(--maiuscoletto);
	font-size: .95rem;
}

.scorri .icona {
	width: 26px;
	height: 26px;
	color: var(--oro);
}

/* stendardi appesi ai lati dell'apertura (le strisce dello scudo del logo) */
.stendardo {
	position: absolute;
	top: calc(var(--barra) - 2px);
	z-index: -1;
	width: clamp(70px, 7vw, 104px);
	pointer-events: none;
}

.stendardo.sx {
	left: clamp(24px, 6vw, 110px);
}

.stendardo.dx {
	right: clamp(24px, 6vw, 110px);
}

.stendardo-asta {
	position: relative;
	display: block;
	height: 10px;
	margin: 0 -14px;
	border-radius: 5px;
	background: linear-gradient(180deg, var(--oro-luce), var(--oro-scuro));
	box-shadow: 0 3px 6px rgba(0, 0, 0, .6);
}

.stendardo-asta::before,
.stendardo-asta::after {
	content: "";
	position: absolute;
	top: -3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, var(--oro-luce), var(--oro-scuro));
}

.stendardo-asta::before {
	left: -10px;
}

.stendardo-asta::after {
	right: -10px;
}

.stendardo-telo {
	position: relative;
	height: clamp(260px, 36vh, 380px);
	display: grid;
	place-items: center;
	padding-bottom: 30%;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
	background:
		linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 18%, transparent 82%, rgba(0, 0, 0, .35)),
		linear-gradient(90deg, var(--cremisi) 0 22%, var(--avorio) 22% 32%, var(--cremisi) 32% 45%, #2a1d14 45% 55%, var(--cremisi) 55% 68%, var(--avorio) 68% 78%, var(--cremisi) 78%);
	box-shadow: inset 0 0 0 3px rgba(212, 174, 98, .7), inset 0 0 30px rgba(0, 0, 0, .5);
	transform-origin: 50% 0;
}

.stendardo-telo .icona {
	width: 54%;
	height: auto;
	aspect-ratio: 1;
	padding: 9%;
	border-radius: 50%;
	background: radial-gradient(circle, #2a1d14 62%, var(--oro-scuro) 64%, #2a1d14 72%);
	color: var(--oro-luce);
	box-shadow: 0 0 0 2px var(--oro), 0 4px 10px rgba(0, 0, 0, .6);
}

/* ---------- la leggenda ---------- */

.storia-griglia {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(32px, 6vw, 80px);
	align-items: center;
}

.racconto {
	max-width: 62ch;
	margin-top: 32px;
	font-size: 1.2rem;
	line-height: 1.75;
}

.racconto p:first-child::first-letter {
	float: left;
	margin: .08em .14em 0 0;
	padding: .06em .16em .02em;
	font-family: var(--gotico);
	font-size: 3.7em;
	font-weight: 800;
	line-height: .82;
	color: var(--oro-luce);
	background: linear-gradient(160deg, #a52c27, var(--cremisi-scuro));
	box-shadow: inset 0 0 0 2px rgba(242, 214, 143, .55), 0 4px 10px rgba(0, 0, 0, .4);
}

.racconto em {
	color: var(--oro-luce);
}

.racconto-gancio {
	margin-top: 1.4em;
	padding: 4px 0 4px 18px;
	border-left: 2px solid var(--cremisi-luce);
	font-style: italic;
	font-size: 1.25rem;
	color: var(--oro-luce);
}

.quadro {
	margin: 0;
	padding: 10px;
	background: var(--cuoio);
	box-shadow: var(--cornice), var(--ombra);
}

.quadro-immagine {
	position: relative;
	overflow: hidden;
}

.quadro-immagine .braci {
	z-index: 1;
}

.quadro img {
	width: 100%;
	height: auto;
}

.quadro figcaption {
	padding: 12px 8px 4px;
	font-size: 1rem;
	font-style: italic;
	color: var(--pergamena-2);
}

/* stemmi con i numeri */
.stemmi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 36px 28px;
	margin: clamp(64px, 9vw, 104px) 0 0;
	padding: 0;
	list-style: none;
}

.stemma {
	display: grid;
	justify-items: center;
	text-align: center;
}

.stemma-scudo {
	position: relative;
	display: grid;
	place-items: center;
	width: 112px;
	height: 128px;
	margin-bottom: 16px;
	padding-bottom: 22px;
	clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
	background:
		linear-gradient(90deg, transparent 46%, rgba(233, 220, 192, .14) 46% 54%, transparent 54%),
		linear-gradient(160deg, #a52c27, var(--cremisi-scuro));
	box-shadow: inset 0 0 0 3px var(--oro), inset 0 0 0 6px rgba(0, 0, 0, .35);
}

.stemma-numero {
	font-family: var(--gotico);
	font-size: 3.2rem;
	font-weight: 800;
	line-height: 1;
	color: var(--oro-luce);
	text-shadow: 0 3px 0 rgba(0, 0, 0, .4);
}

.stemma h3 {
	font-size: 1.7rem;
}

.stemma p {
	max-width: 30ch;
	margin: 8px 0 0;
	font-size: 1.02rem;
	color: var(--pergamena-2);
}

/* ---------- il viaggio (gli atti della storia) ---------- */

.sezione-viaggio {
	background:
		radial-gradient(ellipse at 50% 100%, rgba(212, 174, 98, .08), transparent 60%),
		var(--grana),
		var(--notte-2);
}

.viaggio {
	position: relative;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.viaggio::before,
.viaggio::after {
	content: "";
	position: absolute;
	top: 38px;
	left: calc(100% / 14);
	width: calc(100% - 100% / 7);
	pointer-events: none;
}

/* il sentiero tra le tappe: tratteggiato, poi una linea d'oro che lo percorre (effetti.css) */
.viaggio::before {
	border-top: 2px dashed rgba(212, 174, 98, .35);
}

.viaggio::after {
	height: 2px;
	background: linear-gradient(90deg, var(--oro-scuro), var(--oro-luce) 60%, #e7675a);
	box-shadow: 0 0 8px rgba(242, 214, 143, .6);
	transform-origin: 0 50%;
}

/* voci del menu che si vedono solo nel menu dei telefoni */
.solo-menu {
	display: none;
}

.tappa {
	position: relative;
	display: grid;
	justify-items: center;
	align-content: start;
	text-align: center;
}

.tappa-segno {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 78px;
	height: 78px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--cuoio-2), #120c08);
	box-shadow: 0 0 0 2px var(--oro), 0 0 0 6px rgba(21, 15, 11, .95), 0 0 0 7px rgba(212, 174, 98, .35), 0 8px 18px rgba(0, 0, 0, .5);
	color: var(--oro-luce);
}

.tappa-segno .icona {
	width: 36px;
	height: 36px;
}

.tappa-livelli {
	font-family: var(--maiuscoletto);
	font-size: .95rem;
	font-weight: 700;
	color: #e7675a;
}

.tappa h3 {
	margin: 2px 0 8px;
	font-size: 1.45rem;
}

.tappa p {
	margin: 0;
	font-size: .98rem;
	line-height: 1.5;
	color: var(--pergamena-2);
}

.tappa.finale .tappa-segno {
	background: radial-gradient(circle at 35% 30%, #a52c27, var(--cremisi-scuro));
}

/* ---------- i boss ---------- */

.sezione-boss {
	background:
		radial-gradient(ellipse at 50% 0%, rgba(142, 35, 32, .22), transparent 60%),
		var(--grana),
		#1a120d;
}

.bestiario {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
	perspective: 1200px;
}

.boss {
	--tinta: var(--oro);
	--rx: 0deg;
	--ry: 0deg;
	position: relative;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, var(--cuoio-2), var(--cuoio) 40%, #1a120d);
	box-shadow: var(--cornice), var(--ombra);
	transform: rotateX(var(--rx)) rotateY(var(--ry));
	transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s;
}

.boss-ritratto {
	position: relative;
	aspect-ratio: 4 / 5;
	margin: 6px 6px 0;
	overflow: hidden;
	background: #0d0907;
}

.boss-ritratto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter 1.4s ease;
}

/* render del modello 3D (senza sfondo): su un alone del colore del boss */
.boss-ritratto.modello {
	background:
		radial-gradient(ellipse 46% 7% at 50% 92%, rgba(0, 0, 0, .7), transparent),
		radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tinta) 34%, transparent), transparent 62%),
		linear-gradient(180deg, #1a1411, #0c0907);
}

.boss-ritratto.modello img {
	object-fit: contain;
	object-position: 50% 100%;
	padding: 2% 4% 0;
	filter: drop-shadow(0 0 18px color-mix(in srgb, var(--tinta) 30%, transparent));
}

.boss-ritratto::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(26, 18, 13, .95), transparent 28%);
}

/* riflesso che segue il mouse */
.boss-riflesso {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 236, 190, .16), transparent 45%);
	transition: opacity .3s;
}

.boss-livello {
	position: absolute;
	z-index: 6;
	top: 18px;
	left: 18px;
	display: grid;
	place-items: center;
	width: 64px;
	height: 74px;
	margin: 0;
	padding-bottom: 8px;
	clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
	background: linear-gradient(180deg, #a52c27, var(--cremisi-scuro));
	box-shadow: inset 0 0 0 2px var(--oro);
	font-family: var(--gotico);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	color: var(--oro-luce);
	text-shadow: 0 2px 2px rgba(0, 0, 0, .6);
}

.boss-livello small {
	display: block;
	margin-bottom: -10px;
	font-family: var(--maiuscoletto);
	font-size: .78rem;
	font-weight: 500;
	color: var(--pergamena);
}

.boss-corpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 4px 22px 22px;
}

.boss h3 {
	font-size: 2rem;
	color: var(--oro-luce);
}

.boss-titolo {
	margin: 2px 0 12px;
	font-style: italic;
	color: color-mix(in srgb, var(--tinta) 55%, var(--pergamena));
}

.boss-testo {
	font-size: 1.05rem;
	color: var(--pergamena);
}

.boss-luogo {
	display: flex;
	gap: 10px;
	margin: auto 0 0;
	padding-top: 12px;
	border-top: 1px solid rgba(212, 174, 98, .22);
	font-size: .98rem;
	line-height: 1.45;
	color: var(--pergamena-2);
}

.boss-luogo .icona {
	margin-top: 2px;
	color: var(--oro);
}

.boss-luogo b {
	font-family: var(--maiuscoletto);
	font-weight: 700;
	color: var(--oro);
}

/* boss sigillati: nome e volto si vedono solo dopo aver rotto il sigillo */

.boss-velo {
	color: var(--pergamena-2);
	font-style: italic;
	font-size: 1.05rem;
}

.sigillo summary {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 4px 0 14px;
	cursor: pointer;
	list-style: none;
	font-family: var(--maiuscoletto);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--oro-luce);
}

.sigillo summary::-webkit-details-marker {
	display: none;
}

.sigillo summary:hover > span:last-child {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.cera {
	position: relative;
	flex: none;
	width: 46px;
	height: 46px;
}

.cera-meta {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, transparent 52%, rgba(0, 0, 0, .28) 54%, transparent 60%),
		radial-gradient(circle at 35% 30%, #cf4a40, #7a1612 70%);
	box-shadow: 0 3px 8px rgba(0, 0, 0, .6);
}

.cera-meta.sx {
	clip-path: polygon(0 0, 52% 0, 44% 22%, 56% 40%, 46% 58%, 55% 78%, 48% 100%, 0 100%);
}

.cera-meta.dx {
	clip-path: polygon(52% 0, 100% 0, 100% 100%, 48% 100%, 55% 78%, 46% 58%, 56% 40%, 44% 22%);
}

.cera .icona {
	position: absolute;
	inset: 11px;
	width: 24px;
	height: 24px;
	color: rgba(60, 8, 6, .75);
	pointer-events: none;
}

.sigillo[open] summary {
	display: none;
}

.boss.sigillato:has(.sigillo[open]) .boss-velo {
	display: none;
}

.boss.sigillato:not(:has(.sigillo[open])) .boss-ritratto img {
	filter: blur(16px) brightness(.45) saturate(.6);
	transform: scale(1.12);
}

.boss.sigillato:not(:has(.sigillo[open])) .boss-ritratto::before {
	content: "?";
	position: absolute;
	z-index: 1;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--gotico);
	font-size: 7rem;
	font-weight: 800;
	color: rgba(242, 214, 143, .7);
	text-shadow: 0 4px 30px rgba(0, 0, 0, .9);
}

.sigillo h3 {
	margin-top: 2px;
}

/* boss finale: in fondo, largo */

.boss-finale {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

.boss-finale .boss-ritratto {
	aspect-ratio: 16 / 9;
	margin: 6px 0 6px 6px;
}

.boss-finale .boss-ritratto::after {
	background: linear-gradient(270deg, rgba(26, 18, 13, .9), transparent 30%);
}

.boss-finale .boss-corpo {
	justify-content: center;
	padding: 32px clamp(22px, 4vw, 48px);
}

.boss-finale h3 {
	font-size: clamp(2.2rem, 4vw, 3.2rem);
}

.boss-finale .boss-livello {
	width: 80px;
	height: 92px;
	font-size: 2.6rem;
}

.boss-finale .boss-luogo {
	margin-top: 18px;
}

/* ---------- l'isola ---------- */

.anteprima-isola {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(32px, 6vw, 80px);
	align-items: center;
}

.anteprima-isola .bottone {
	margin-top: 28px;
}

.elenco-segni {
	display: grid;
	gap: 12px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	color: var(--pergamena-2);
	font-size: 1.05rem;
}

.elenco-segni li {
	display: flex;
	gap: 12px;
}

.elenco-segni .icona {
	margin-top: 3px;
	color: var(--oro);
}

.carta {
	margin: 0;
	padding: 10px;
	background: var(--cuoio);
	box-shadow: var(--cornice), var(--ombra);
}

.carta-isola {
	position: relative;
	container-type: inline-size;
}

.carta-isola img {
	width: 100%;
	height: auto;
}

.carta-scritta {
	position: absolute;
	transform: translate(-50%, -50%);
	font-family: var(--maiuscoletto);
	font-size: clamp(9px, 2.5cqw, 17px);
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	white-space: nowrap;
	color: #fff4d6;
	text-shadow: 0 0 3px #000, 0 0 3px #000, 0 1px 6px rgba(0, 0, 0, .9);
	pointer-events: none;
}

.carta-scritta b {
	display: block;
	font-family: var(--testo);
	font-size: .82em;
	font-weight: 700;
	color: var(--oro-luce);
}

/* ---------- come entrare ---------- */

.entra {
	text-align: center;
}

.passi {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	max-width: 1080px;
	margin: 0 auto 44px;
	padding: 0;
	list-style: none;
	text-align: left;
}

.passo {
	padding: 30px 26px 26px;
	background: linear-gradient(180deg, var(--cuoio-2), var(--cuoio));
	box-shadow: var(--cornice), var(--ombra);
}

.passo-numero {
	display: block;
	margin-bottom: 8px;
	font-family: var(--gotico);
	font-size: 3rem;
	font-weight: 800;
	line-height: 1;
	color: #c94a3e;
	text-shadow: 0 3px 0 rgba(0, 0, 0, .4);
}

.passo h3 {
	font-size: 1.65rem;
	margin-bottom: 8px;
}

.passo p {
	margin: 0;
	color: var(--pergamena-2);
	font-size: 1.05rem;
}

.entra-azioni {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

.entra .stato {
	margin-top: 24px;
}

/* ---------- piede ---------- */

.piede {
	position: relative;
	padding: 72px var(--margine) 32px;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(142, 35, 32, .18), transparent 60%),
		var(--grana),
		#0e0906;
	color: var(--pergamena-3);
	font-size: 1rem;
}

.piede-griglia {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
	gap: 36px;
}

.piede-marchio {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.piede-marchio img {
	width: 72px;
	height: 72px;
	border-radius: 4px;
	box-shadow: 0 0 0 1px rgba(212, 174, 98, .45);
}

.piede-marchio strong {
	display: block;
	margin-bottom: 4px;
	font-family: var(--gotico);
	font-size: 1.6rem;
	color: var(--oro-luce);
}

.piede-marchio p {
	margin: 0;
}

.piede h2 {
	margin-bottom: 12px;
	font-size: 1.35rem;
	color: var(--oro);
}

.piede ul {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.piede a {
	color: var(--pergamena-2);
	text-decoration: none;
}

.piede a:hover {
	color: var(--oro-luce);
	text-decoration: underline;
}

.piede .targa {
	min-height: 46px;
}

.piede .targa-ip {
	font-size: 1.05rem;
}

.piede-fondo {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	max-width: var(--larghezza);
	margin: 48px auto 0;
	padding-top: 20px;
	border-top: 1px solid rgba(212, 174, 98, .16);
	font-size: .95rem;
}

.piede-fondo p {
	margin: 0;
}

.in-cima {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: grid;
	place-items: center;
	width: 50px;
	height: 56px;
	padding: 0 0 8px;
	border: 0;
	clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
	background: linear-gradient(180deg, #a52c27, var(--cremisi-scuro));
	box-shadow: inset 0 0 0 2px var(--oro);
	color: var(--oro-luce);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity .3s, transform .3s, visibility .3s;
}

.in-cima.visibile {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.in-cima .icona {
	width: 24px;
	height: 24px;
}

/* ---------- testata delle pagine interne (guida, regolamento) ---------- */

.pagina-testata {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	min-height: clamp(380px, 56vh, 560px);
	margin-top: calc(var(--barra) * -1);
	padding: calc(var(--barra) + 40px) var(--margine) 64px;
	overflow: hidden;
	isolation: isolate;
}

.pagina-testata > img {
	position: absolute;
	inset: 0;
	z-index: -3;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pagina-testata .braci {
	z-index: -1;
}

.pagina-testata::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(180deg, rgba(21, 15, 11, .85), rgba(21, 15, 11, .2) 40%, rgba(21, 15, 11, .6) 72%, var(--notte)),
		linear-gradient(90deg, rgba(21, 15, 11, .8), transparent 65%);
}

.pagina-testata h1 {
	overflow-wrap: break-word;
	font-size: clamp(3rem, 8vw, 6.2rem);
	font-weight: 800;
	filter: drop-shadow(0 2px 0 #4a3412) drop-shadow(0 6px 20px rgba(0, 0, 0, .85));
}

.pagina-testata p {
	max-width: 56ch;
	margin: 14px 0 0;
	font-size: 1.25rem;
	color: var(--pergamena);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .95);
}

.briciole {
	display: flex;
	gap: 8px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	font-family: var(--maiuscoletto);
	font-size: 1rem;
	color: var(--pergamena-2);
}

.briciole li + li::before {
	content: "›";
	margin-right: 8px;
	color: var(--oro);
}

.briciole a {
	color: var(--pergamena-2);
}

/* ---------- pagine lunghe con l'indice a lato ---------- */

.documento {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: clamp(32px, 5vw, 64px);
	max-width: var(--larghezza);
	margin: 0 auto;
	padding: 40px var(--margine) 96px;
}

.indice {
	position: sticky;
	top: calc(var(--barra) + 24px);
	align-self: start;
	max-height: calc(100svh - var(--barra) - 48px);
	overflow-y: auto;
	padding: 24px 18px;
	background: linear-gradient(180deg, var(--cuoio-2), var(--cuoio));
	box-shadow: var(--cornice);
	scrollbar-width: thin;
}

.indice h2 {
	margin: 0 0 12px 8px;
	font-size: 1.5rem;
}

.indice ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.indice a {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 6px 8px;
	border-left: 2px solid transparent;
	color: var(--pergamena-2);
	text-decoration: none;
	font-size: 1rem;
	line-height: 1.3;
	transition: color .2s, border-color .2s, background .2s;
}

.indice a .icona {
	color: var(--oro-scuro);
	transition: color .2s;
}

.indice a:hover,
.indice a.attiva {
	color: var(--oro-luce);
	border-left-color: var(--oro);
	background: rgba(212, 174, 98, .07);
}

.indice a.attiva .icona {
	color: var(--oro-luce);
}

.capitolo {
	padding: 0 0 56px;
	margin-bottom: 56px;
	border-bottom: 1px solid rgba(212, 174, 98, .16);
}

.capitolo:last-child {
	margin-bottom: 0;
	border-bottom: 0;
}

.capitolo-titolo {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: clamp(2.1rem, 4.6vw, 3.1rem);
}

.capitolo-titolo .segno {
	display: grid;
	place-items: center;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #a52c27, var(--cremisi-scuro));
	box-shadow: 0 0 0 2px var(--oro), 0 0 0 5px rgba(21, 15, 11, .9), 0 0 0 6px rgba(212, 174, 98, .3);
	color: var(--oro-luce);
}

.capitolo-titolo .segno .icona {
	width: 28px;
	height: 28px;
}

.capitolo > p {
	max-width: 68ch;
}

.capitolo h3 {
	margin: 36px 0 12px;
	font-size: 1.8rem;
}

.capitolo ul:not([class]),
.capitolo ol:not([class]) {
	max-width: 68ch;
	padding-left: 1.3em;
}

.capitolo li {
	margin-bottom: .45em;
}

.capitolo li::marker {
	color: var(--oro);
}

.capitolo .fregio {
	margin: 14px 0 28px;
}

/* riquadro "consiglio" */
.nota {
	display: flex;
	gap: 14px;
	max-width: 68ch;
	margin: 26px 0;
	padding: 18px 20px;
	background: linear-gradient(90deg, rgba(212, 174, 98, .12), rgba(212, 174, 98, .02));
	border-left: 3px solid var(--oro);
	font-size: 1.05rem;
}

.nota .icona {
	width: 26px;
	height: 26px;
	color: var(--oro-luce);
}

.nota p {
	margin: 0;
}

.nota.rossa {
	background: linear-gradient(90deg, rgba(181, 58, 47, .18), rgba(181, 58, 47, .03));
	border-left-color: var(--cremisi-luce);
}

.nota.rossa .icona {
	color: #e7675a;
}

/* griglia di schede (classi, regole in breve...) */
.schede {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap: 22px;
	margin: 28px 0;
	padding: 0;
	list-style: none;
}

.scheda {
	padding: 26px 22px 22px;
	background: linear-gradient(180deg, var(--cuoio-2), var(--cuoio));
	box-shadow: var(--cornice), 0 8px 22px rgba(0, 0, 0, .4);
	transition: transform .3s, box-shadow .3s;
}

.scheda:hover {
	transform: translateY(-4px);
	box-shadow: var(--cornice), 0 16px 32px rgba(0, 0, 0, .55), 0 0 22px rgba(212, 174, 98, .12);
}

.scheda-segno {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #3a2a1c, #140d09);
	box-shadow: 0 0 0 2px var(--oro), 0 4px 10px rgba(0, 0, 0, .5);
	color: var(--oro-luce);
}

.scheda-segno .icona {
	width: 28px;
	height: 28px;
}

.scheda h3,
.scheda h4 {
	margin: 0 0 6px;
	font-size: 1.6rem;
}

.scheda p {
	margin: 0;
	font-size: 1rem;
	color: var(--pergamena-2);
}

.scheda .specializza {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(212, 174, 98, .2);
	font-size: .95rem;
}

.scheda .specializza b {
	font-family: var(--maiuscoletto);
	color: var(--oro);
}

.etichette {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.etichette li {
	margin: 0;
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(212, 174, 98, .1);
	box-shadow: inset 0 0 0 1px rgba(212, 174, 98, .3);
	font-size: .85rem;
	color: var(--oro-luce);
}

/* tabelle */
.tabella-scorre {
	max-width: 100%;
	margin: 24px 0;
	overflow-x: auto;
	background: var(--cuoio);
	box-shadow: var(--cornice);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}

caption {
	padding: 14px 16px 6px;
	text-align: left;
	font-style: italic;
	color: var(--pergamena-2);
}

th,
td {
	padding: 11px 16px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid rgba(212, 174, 98, .14);
}

thead th {
	font-family: var(--maiuscoletto);
	font-weight: 700;
	color: var(--oro);
	background: rgba(0, 0, 0, .25);
	border-bottom-color: rgba(212, 174, 98, .4);
}

tbody tr {
	transition: background .2s;
}

tbody tr:hover {
	background: rgba(212, 174, 98, .05);
}

tbody th {
	font-weight: 700;
	color: var(--pergamena);
}

/* fasce di livello */
.fasce {
	display: grid;
	gap: 10px;
	margin: 28px 0;
	padding: 22px 22px 16px;
	background: var(--cuoio);
	box-shadow: var(--cornice);
	list-style: none;
}

.fascia {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	margin: 0;
	font-size: .98rem;
}

.fascia-nome {
	line-height: 1.2;
	color: var(--pergamena);
}

.fascia-nome small {
	display: block;
	font-size: .85rem;
	color: var(--pergamena-3);
}

.fascia-binario {
	position: relative;
	height: 18px;
	border-radius: 3px;
	background: repeating-linear-gradient(90deg, rgba(212, 174, 98, .06) 0 calc(10% - 1px), rgba(212, 174, 98, .22) calc(10% - 1px) 10%);
}

.fascia-barra {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--da);
	width: var(--lungo);
	border-radius: 3px;
	background: linear-gradient(90deg, var(--cremisi), var(--oro));
	box-shadow: 0 0 10px rgba(212, 174, 98, .35);
	transform-origin: 0 50%;
}

.fascia.dopo .fascia-barra {
	background: linear-gradient(90deg, #5a3d8a, #9b6fd6);
	box-shadow: 0 0 10px rgba(155, 111, 214, .35);
}

.fasce-scala {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 14px;
	margin: 0;
	font-family: var(--maiuscoletto);
	font-size: .85rem;
	color: var(--pergamena-3);
}

.fasce-scala span {
	display: flex;
	justify-content: space-between;
}

/* barre dello schermo (guida: lo schermo) */
.hud {
	display: grid;
	gap: 14px;
	max-width: 620px;
	margin: 26px 0;
	padding: 22px;
	background: linear-gradient(180deg, rgba(18, 40, 90, .35), rgba(0, 0, 0, .4)), var(--cuoio);
	box-shadow: var(--cornice);
}

.hud-riga {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	font-family: var(--maiuscoletto);
	font-size: .98rem;
}

.hud-barra {
	height: 14px;
	border-radius: 2px;
	background: rgba(0, 0, 0, .55);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
	overflow: hidden;
}

.hud-barra span {
	display: block;
	height: 100%;
	width: var(--pieno);
	background: var(--colore);
	box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25), inset 0 -3px 0 rgba(0, 0, 0, .25);
}

/* tasti */
.tasti {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 4px 28px;
	margin: 24px 0;
	padding: 0;
	list-style: none;
}

.tasti li {
	display: flex;
	gap: 14px;
	align-items: baseline;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px dashed rgba(212, 174, 98, .18);
	font-size: 1.02rem;
}

.tasti li > span:first-child {
	flex: none;
	min-width: 96px;
}

/* comandi */
.cerca-comandi {
	position: relative;
	max-width: 420px;
	margin: 22px 0 6px;
}

.cerca-comandi .icona {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--oro);
	pointer-events: none;
}

.cerca-comandi input {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px 10px 44px;
	border: 0;
	border-radius: 3px;
	background: var(--cuoio);
	box-shadow: var(--cornice);
	color: var(--pergamena);
	font: inherit;
}

.cerca-comandi input::placeholder {
	color: var(--pergamena-3);
}

.comandi-vuoto {
	padding: 18px 16px;
	font-style: italic;
	color: var(--pergamena-2);
}

/* domande frequenti */
.domande {
	max-width: 74ch;
	margin: 24px 0 0;
}

.domanda {
	margin-bottom: 10px;
	background: var(--cuoio);
	box-shadow: var(--cornice);
}

.domanda summary {
	position: relative;
	display: flex;
	align-items: center;
	padding: 16px 52px 16px 20px;
	cursor: pointer;
	list-style: none;
	font-family: var(--gotico);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--oro-luce);
}

.domanda summary::-webkit-details-marker {
	display: none;
}

.domanda summary .icona {
	position: absolute;
	right: 18px;
	color: var(--oro);
	transition: transform .3s;
}

.domanda[open] summary .icona {
	transform: rotate(180deg);
}

.domanda-risposta {
	padding: 0 20px 18px;
	color: var(--pergamena);
}

.domanda-risposta p:last-child {
	margin: 0;
}

/* regolamento */
.articoli {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: articolo;
}

.articoli > li {
	position: relative;
	max-width: 70ch;
	margin: 0 0 14px;
	padding-left: 64px;
	counter-increment: articolo;
}

.articoli > li::before {
	content: attr(data-sezione) "." counter(articolo);
	position: absolute;
	left: 0;
	top: .15em;
	min-width: 48px;
	padding: 1px 6px;
	border-radius: 2px;
	background: rgba(142, 35, 32, .35);
	box-shadow: inset 0 0 0 1px rgba(212, 174, 98, .35);
	font-family: var(--maiuscoletto);
	font-size: .9rem;
	font-weight: 700;
	text-align: center;
	color: var(--oro-luce);
}

.articoli strong {
	color: var(--oro-luce);
}

.due-colonne {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	margin: 24px 0;
}

.lista-si,
.lista-no {
	margin: 0;
	padding: 24px 24px 14px;
	background: var(--cuoio);
	box-shadow: var(--cornice);
}

.lista-si h3,
.lista-no h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 1.5rem;
}

.lista-si ul,
.lista-no ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lista-si li,
.lista-no li {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 1rem;
}

.lista-si .icona {
	margin-top: 3px;
	color: var(--verde);
}

.lista-no .icona {
	margin-top: 3px;
	color: #e7675a;
}

.gravita {
	display: inline-block;
	padding: 1px 10px;
	border-radius: 999px;
	font-family: var(--maiuscoletto);
	font-size: .85rem;
	font-weight: 700;
	white-space: nowrap;
}

.gravita.lieve {
	background: rgba(143, 207, 122, .14);
	color: #b7e6a6;
}

.gravita.media {
	background: rgba(212, 174, 98, .16);
	color: var(--oro-luce);
}

.gravita.grave {
	background: rgba(181, 58, 47, .28);
	color: #f0a196;
}

.gravita.gravissima {
	background: rgba(92, 20, 20, .75);
	color: #ffc7bd;
	box-shadow: inset 0 0 0 1px rgba(231, 103, 90, .5);
}

.aggiornato {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	font-size: 1rem;
	color: var(--pergamena-2);
}

/* ---------- pagina della mappa ---------- */

.pagina-mappa {
	display: grid;
	grid-template-columns: 350px minmax(0, 1fr);
	height: calc(100svh - var(--barra));
	min-height: 520px;
}

.zone {
	overflow-y: auto;
	padding: 28px 22px 32px var(--margine);
	background: var(--grana), linear-gradient(180deg, var(--cuoio), var(--notte-2));
	border-right: 1px solid rgba(212, 174, 98, .25);
	scrollbar-width: thin;
}

.zone h1 {
	font-size: 2.7rem;
}

.zone-intro {
	margin: 10px 0 14px;
	font-size: 1.02rem;
	color: var(--pergamena-2);
}

.zone .stato {
	margin-bottom: 18px;
	font-size: .92rem;
}

.zone-elenco {
	margin: 0;
	padding: 0;
	list-style: none;
}

.zona {
	position: relative;
	display: block;
	width: 100%;
	padding: 12px 12px 12px 16px;
	border: 0;
	border-left: 2px solid transparent;
	background: none;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: var(--pergamena);
	transition: background .2s, border-color .2s, padding .2s;
}

.zona:hover,
.zona[aria-pressed="true"] {
	padding-left: 20px;
	background: linear-gradient(90deg, rgba(212, 174, 98, .12), transparent);
	border-left-color: var(--oro);
}

.zona-nome {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-family: var(--gotico);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--oro-luce);
}

.zona-nome span {
	flex: none;
	padding-top: 3px;
	font-family: var(--maiuscoletto);
	font-size: .95rem;
	color: var(--oro);
}

.zona-testo {
	display: block;
	margin-top: 3px;
	font-size: .98rem;
	line-height: 1.45;
	color: var(--pergamena-2);
}

.zone-dopo {
	margin: 18px 0 0;
	padding: 14px;
	border: 1px dashed rgba(212, 174, 98, .35);
	font-size: .98rem;
	color: var(--pergamena-2);
}

.zone-dopo strong {
	font-family: var(--gotico);
	font-size: 1.25rem;
	color: var(--oro-luce);
}

.zone .bottone {
	margin-top: 20px;
	width: 100%;
}

.mappa-cornice {
	position: relative;
	min-height: 0;
	padding: 10px;
	background: var(--cuoio);
	box-shadow: var(--cornice);
}

.mappa-cornice iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: #162c59;
}

.mappa-stato {
	position: absolute;
	inset: 10px;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 16px;
	background: var(--mare);
	color: var(--pergamena);
	font-style: italic;
	text-align: center;
}

.mappa-stato .icona {
	width: 64px;
	height: 64px;
	color: var(--oro-luce);
}

.mappa-riserva {
	position: absolute;
	inset: 10px;
	overflow: auto;
	background: var(--mare);
}

.mappa-riserva .carta-isola {
	max-width: 900px;
	margin: 0 auto;
}

.mappa-avviso {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 12px 18px;
	background: rgba(21, 15, 11, .94);
	border-bottom: 1px solid rgba(212, 174, 98, .35);
	font-size: 1rem;
	color: var(--pergamena);
}

.mappa-avviso .icona {
	margin-top: 3px;
	color: var(--oro-luce);
}

.mappa-avviso strong {
	color: var(--oro-luce);
}

/* ---------- schermi medi e piccoli ---------- */

@media (max-width: 1080px) {
	.viaggio {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		row-gap: 40px;
	}

	.viaggio::before,
	.viaggio::after {
		display: none;
	}

	.piede-griglia {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 960px) {
	.barra-apri {
		display: grid;
		place-items: center;
		margin-left: auto;
	}

	.barra-nav {
		position: fixed;
		top: var(--barra);
		left: 0;
		right: 0;
		max-height: calc(100svh - var(--barra));
		overflow-y: auto;
		margin: 0;
		padding: 8px var(--margine) 28px;
		background: var(--grana), rgba(17, 12, 9, .98);
		border-bottom: 1px solid rgba(212, 174, 98, .35);
		box-shadow: 0 20px 40px rgba(0, 0, 0, .6);
		clip-path: inset(0 0 100% 0);
		visibility: hidden;
		transition: clip-path .45s cubic-bezier(.2, .8, .2, 1), visibility 0s .45s;
	}

	.barra.aperta .barra-nav {
		clip-path: inset(0 0 0 0);
		visibility: visible;
		transition: clip-path .45s cubic-bezier(.2, .8, .2, 1);
	}

	.barra-voci {
		flex-direction: column;
		gap: 0;
	}

	.barra-voci a {
		padding: 14px 4px;
		border-bottom: 1px solid rgba(212, 174, 98, .14);
		font-family: var(--gotico);
		font-size: 1.75rem;
		color: var(--oro-luce);
	}

	.barra-voci a::after {
		display: none;
	}

	.barra > .bottone {
		display: none;
	}

	.solo-menu {
		display: block;
	}

	.storia-griglia,
	.anteprima-isola {
		grid-template-columns: 1fr;
	}

	.storia-griglia .quadro {
		max-width: 460px;
	}

	.boss-finale {
		grid-template-columns: 1fr;
	}

	.boss-finale .boss-ritratto {
		margin: 6px 6px 0;
	}

	.boss-finale .boss-ritratto::after {
		background: linear-gradient(0deg, rgba(26, 18, 13, .95), transparent 28%);
	}

	.passi {
		grid-template-columns: 1fr;
		max-width: 560px;
	}

	.documento {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 24px;
	}

	.indice {
		position: relative;
		top: 0;
		max-height: none;
	}

	.indice ol {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
	}

	.pagina-mappa {
		grid-template-columns: 1fr;
		grid-template-rows: 68svh auto;
		height: auto;
	}

	.mappa-cornice {
		grid-row: 1;
	}

	.zone {
		grid-row: 2;
		border-right: 0;
		padding: 28px var(--margine) 40px;
	}

	.stendardo {
		display: none;
	}
}

@media (max-width: 720px) {
	:root {
		--barra: 60px;
	}

	.barra-marchio {
		font-size: 1.35rem;
	}

	.barra-marchio img {
		width: 38px;
		height: 38px;
	}

	.viaggio {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.racconto {
		font-size: 1.12rem;
	}

	.targa-ip {
		font-size: 1.1rem;
		padding: 0 14px;
	}

	.piede-griglia {
		grid-template-columns: 1fr;
	}

	.fascia,
	.fasce-scala {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.fasce-scala > :first-child {
		display: none;
	}

	.due-colonne {
		grid-template-columns: 1fr;
	}

	.articoli > li {
		padding-left: 0;
		padding-top: 30px;
	}

	.hud-riga {
		grid-template-columns: 78px minmax(0, 1fr);
	}

	.in-cima {
		right: 14px;
		bottom: 14px;
	}
}

@media (max-width: 380px) {
	.targa-ip {
		font-size: 1rem;
		padding: 0 10px;
	}

	.targa-azione {
		padding: 0 10px;
	}

	/* "dell'Avventuriero" non ci sta su una riga a 3rem */
	.pagina-testata h1 {
		font-size: 2.3rem;
	}
}

/* contenuto sopra le braci delle sezioni */
.sezione > .contenuto {
	position: relative;
	z-index: 1;
}