/* ==========================================================================
   Skills Galaxy: la galassia di gioco (tavole 1, 2, 3 e 5).
   Le posizioni sono calcolate da galaxy.js in pt della tavola; qui ci sono
   tipografia, colori e stati. Misure in pt (px dentro la tavola scalata).
   ========================================================================== */

/* --- Area di gioco --------------------------------------------------------- */

/* Desktop: la parte della tavola sotto l'header (da 75 pt, o da 101 pt nella galassia),
   scalata e centrata nello spazio sotto l'header (sg_fit_script() in inc/assets.php). */
html:not(.sg-fluid) .sg-game {
	position: absolute;
	left: var(--ox);
	top: var(--oy);
	width: 841.89px;
	height: 520.28px;
	transform: scale(var(--u));
	transform-origin: 0 0;
}

html:not(.sg-fluid) .sg-view-galaxy .sg-game {
	height: 494.28px;
}

.sg-game:focus {
	outline: none;
}

html:not(.sg-fluid) .sg-viewport {
	position: absolute;
	inset: 0;
}

.sg-viewport[hidden],
.sg-reader[hidden] {
	display: none;
}

.sg-stage {
	position: absolute;
	left: 0;
	top: 0;
}

.sg-stage__bg,
.sg-stage__details {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	pointer-events: none;
}

.sg-stage__bg {
	object-fit: cover;
}

/* Sistema: lo sfondo parte sotto il testo di benvenuto, come nella tavola 2. */
.sg-stage__bg--system {
	top: var(--bg-top);
	height: calc(100% - var(--bg-top));
}

/* Desktop: lo sfondo arriva ai bordi dello schermo. */
html:not(.sg-fluid) .sg-stage__bg {
	left: calc(-1 * var(--gx));
	top: calc(-1 * var(--gy));
	width: calc(100% + 2 * var(--gx));
	height: calc(100% + 2 * var(--gy));
}

html:not(.sg-fluid) .sg-stage__bg.sg-stage__bg--system {
	top: var(--bg-top);
	height: calc(100% - var(--bg-top) + var(--gy));
}

.sg-art {
	position: absolute;
	display: block;
	max-width: none;
	pointer-events: none;
	user-select: none;
}

/* --- Galassia (tavola 1) ---------------------------------------------------- */

.sg-system {
	color: inherit;
	text-decoration: none;
}

.sg-system .sg-system__frame {
	pointer-events: auto;
	cursor: pointer;
	transition: filter 0.3s;
}

.sg-system:hover .sg-system__frame {
	filter: brightness(1.25);
}

.sg-system:focus-visible {
	outline: none;
}

/* Bloccati dalle impostazioni (Impostazioni › Skills Galaxy): restano visibili ma non si aprono. */
.sg-system.is-locked .sg-system__frame,
.sg-moon.is-locked {
	cursor: default;
}

.sg-system.is-locked:hover .sg-system__frame {
	filter: none;
}

.sg-moon.is-locked:hover .sg-art {
	transform: none;
}

.sg-system:focus-visible .sg-system__frame {
	outline: 2px solid var(--sg-yellow);
	outline-offset: 2px;
	border-radius: 50%;
}

.sg-system__planet.is-done,
.sg-system.is-done .sg-art,
.sg-system.is-done .sg-sun__glyph {
	filter: grayscale(1) brightness(0.85);
}

.sg-system.is-done .sg-system__name,
.sg-system.is-done .sg-system__tagline {
	color: #9a98a8 !important;
}

.sg-system__name,
.sg-system__tagline {
	position: absolute;
	translate: -50% 0;
	white-space: nowrap;
	pointer-events: none;
}

.sg-system__name {
	font-family: var(--sg-font-title);
	font-size: 18.2px;
	line-height: 1.08;
	text-transform: uppercase;
}

.sg-system__tagline {
	font-size: 9.6px;
	line-height: 13px;
}

.sg-system__name--big {
	font-size: 24.5px;
}

.sg-system__tagline--big {
	font-size: 12.9px;
	line-height: 15.5px;
}

.sg-sun__glyph {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	font-family: var(--sg-font-title);
}

.sg-label {
	position: absolute;
	color: var(--sg-white);
	font-family: var(--sg-font-title);
	line-height: 1.08;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
}

.sg-label--galaxy {
	font-size: 12px;
	translate: -50% 0;
}

.sg-label--galaxy.is-wrap {
	width: min-content;
	white-space: normal;
	text-align: center;
}

.sg-galaxy-title {
	position: absolute;
	margin: 0;
	translate: -50% 0;
	color: var(--sg-yellow-title);
	font-size: 18px;
	font-weight: 600;
	line-height: 21.6px;
	letter-spacing: 0.026em;
	text-align: center;
	white-space: nowrap;
}

.sg-galaxy-note {
	position: absolute;
	margin: 0;
	translate: -50% 0;
	color: var(--sg-white);
	font-size: 9px;
	line-height: 10.8px;
	text-align: center;
	white-space: nowrap;
}

/* Stemma (tavole 1, 2, 5). */
.sg-emblem {
	position: absolute;
}

/* --- Sistema (tavola 2) ----------------------------------------------------- */

.sg-orbits {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

/* Spessore della linea delle orbite della tavola 2, misurato sulle curve. */
.sg-orbits path {
	fill: none;
	stroke: var(--sg-lavender);
	stroke-width: 4.2;
	stroke-linecap: round;
}

.sg-planet,
.sg-moon {
	position: absolute;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
}

.sg-planet .sg-art,
.sg-moon .sg-art {
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s;
}

.sg-planet:hover .sg-art,
.sg-moon:hover .sg-art {
	transform: scale(1.08);
}

.sg-planet:focus-visible,
.sg-moon:focus-visible {
	outline: 2px solid var(--sg-yellow);
	outline-offset: 3px;
}

.sg-planet.is-done .sg-art,
.sg-moon.is-done .sg-art {
	filter: grayscale(1) brightness(0.85);
}

.sg-planet.is-empty {
	cursor: default;
}

.sg-label--planet {
	font-size: 16.1px;
}

/* Alone del colore del fondo: invisibile sul cielo, stacca il testo dove incrocia un'orbita
   o dove una stella dello sfondo cade tra le lettere. */
.sg-label--galaxy,
.sg-galaxy-title,
.sg-galaxy-note,
.sg-label--planet,
.sg-label--moon {
	text-shadow: 0 0 2px var(--sg-night), 0 0 4px var(--sg-night);
}

/* A sinistra e sotto il pianeta i nomi lunghi vanno su due righe. */
.sg-label--planet.is-left,
.sg-label--planet.is-inside {
	width: max-content;
	max-width: 62px;
	white-space: normal;
	text-wrap: balance;
}

.sg-label--planet.is-left {
	translate: -100% -50%;
	text-align: right;
}

.sg-label--planet.is-inside.is-left {
	translate: -100% 0;
}

/* Le etichette dei satelliti stanno verso l'esterno dell'orbita: il punto di ancoraggio è
   il lato dell'etichetta rivolto al satellite. */
.sg-label--moon {
	--tx: 0%;
	--ty: 0%;
	color: var(--sg-lavender);
	font-size: 12.8px;
	translate: var(--tx) var(--ty);
}

.sg-label--moon.is-h-middle {
	--tx: -50%;
}

.sg-label--moon.is-h-end {
	--tx: -100%;
}

.sg-label--moon.is-v-center {
	--ty: -50%;
}

.sg-label--moon.is-v-bottom {
	--ty: -100%;
}

/* Testo di benvenuto in alto (tavola 2): Bahnschrift 12pt bianco. */
.sg-intro {
	position: absolute;
	z-index: 2;
	color: var(--sg-white);
	font-size: 12px;
	line-height: 14.4px;
}

/* Tre righe intere (14.4 pt l'una): sotto ci sono i pulsanti e i satelliti più in alto.
   Se il testo è più lungo sfuma verso il basso e "Leggi tutto" lo apre (galaxy.js). */
.sg-intro__text {
	max-height: 43.2px;
	overflow: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--sg-lavender) transparent;
}

.sg-intro__text.is-clipped {
	mask-image: linear-gradient(to bottom, #000 50%, transparent);
}

.sg-intro__text p {
	margin: 0;
}

.sg-intro__actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

.sg-intro__more {
	margin-left: auto;
}

.sg-intro__more[hidden] {
	display: none;
}

/* Aperto: riquadro scuro sopra il palco con il testo intero, che scorre. */
.sg-intro.is-open {
	z-index: 6;
	background: rgba(0, 0, 36, 0.95);
	box-shadow: 0 0 0 10px rgba(0, 0, 36, 0.95), 0 24px 28px 6px rgba(0, 0, 36, 0.7);
	border-radius: 2px;
}

.sg-intro.is-open .sg-intro__text {
	max-height: 290px;
	overflow-y: auto;
	padding-right: 10px;
}

.sg-intro.is-open .sg-intro__text p + p {
	margin-top: 7px;
}

/* --- Sistema completato (tavola 5) ---------------------------------------- */

.sg-stage.is-complete > :not(.sg-complete, .sg-stage__bg, .sg-emblem) {
	filter: grayscale(1);
}

.sg-stage.is-complete .sg-label {
	opacity: 0.55;
}

.sg-complete {
	position: absolute;
	inset: 0;
	z-index: 20;
	cursor: pointer;
}

.sg-complete:focus {
	outline: none;
}

.sg-complete__text {
	position: absolute;
	margin: 0;
	translate: -50% 0;
	color: var(--sg-yellow-title);
	font-size: 18px;
	font-weight: 600;
	line-height: 21.6px;
	text-align: center;
	white-space: nowrap;
}

/* --- Pagina del satellite (tavola 3) ---------------------------------------- */

html:not(.sg-fluid) .sg-reader {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* Scheda della tavola 3 (46,108 – 792,558), allargata fino ai margini dello schermo;
   pianeta e satellite seguono il suo angolo destro. */
.sg-reader__card {
	position: absolute;
	left: calc(46px - var(--gx));
	right: calc(46px - var(--gx));
	top: 33px;
	bottom: calc(37.28px - var(--gy));
	background: var(--sg-satellite-card);
	border-radius: 28px;
	color: var(--sg-text);
}

.sg-reader > .sg-art {
	z-index: 1;
	margin-left: var(--gx);
}

.sg-reader__title {
	position: absolute;
	left: 34px;
	top: 45px;
	margin: 0;
	color: var(--sg-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 17px;
}

.sg-reader__title:focus {
	outline: none;
}

.sg-reader__scroll {
	position: absolute;
	left: 34px;
	top: 61px;
	right: 29px;
	bottom: 73px;
	padding-right: 45px;
	overflow-y: scroll;
}

.sg-reader__loading,
.sg-reader__error {
	margin: 0;
	font-size: 12px;
}

/* Pulsanti in basso al centro della scheda (tavola 3: 391.9 pt su una scheda di 450). */
.sg-reader__actions {
	position: absolute;
	left: 50%;
	bottom: 31.4px;
	translate: -50% 0;
	display: flex;
	gap: 33px;
}

.sg-reader__action {
	display: inline-flex;
	align-items: center;
	gap: 3.5px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sg-ink);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.sg-reader__action:hover span:last-child {
	text-decoration: underline;
}

.sg-reader__icon {
	display: block;
	width: 26.7px;
	height: 26.7px;
	overflow: hidden;
	border-radius: 50%;
	font-family: var(--sg-font-title);
}

.sg-reader__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Testo del satellite (tavola 3): compatto, senza righe vuote; video a sinistra con il
   testo che gli scorre accanto. */
.sg-prose--satellite > *,
.sg-prose--satellite .wp-block-group > * {
	margin: 0;
}

.sg-prose--satellite .wp-block-embed {
	margin-top: 8px !important;
}
.sg-prose--satellite::after {
	content: '';
	display: block;
	clear: both;
}

.sg-prose--satellite .wp-block-embed {
	float: left;
	width: 288px;
	margin: 0 15px 8px 0;
}

.sg-prose--satellite .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 288 / 170;
}

.sg-prose--satellite .wp-block-embed__wrapper::before {
	display: none;
}

.sg-prose--satellite .wp-block-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* "Attento viaggiatore": corsivo, etichetta in grassetto seguita da un trattino. */
.sg-prose .sg-callout p {
	font-style: italic;
}

.sg-prose .sg-callout strong:first-child::after {
	content: ' -';
	font-weight: 400;
}

/* --- Schermi stretti -------------------------------------------------------- */

.sg-fluid .sg-game {
	position: relative;
}

.sg-fluid .sg-viewport {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
}

.sg-fluid .sg-viewport::before {
	content: '';
	display: block;
	width: var(--stage-w, 100%);
	height: 1px;
}

.sg-fluid .sg-stage {
	transform: scale(var(--k, 1));
	transform-origin: 0 0;
}

.sg-fluid .sg-intro {
	position: static !important;
	width: auto !important;
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.45;
}

.sg-fluid .sg-intro__text {
	max-height: 5.8em;
}

/* Su mobile il testo sta sopra il palco: aperto si allunga nella pagina. */
.sg-fluid .sg-intro.is-open {
	background: none;
	box-shadow: none;
}

.sg-fluid .sg-intro.is-open .sg-intro__text {
	max-height: none;
	overflow: visible;
}


.sg-fluid .sg-reader {
	position: relative;
	padding: 16px;
}

.sg-fluid .sg-reader > .sg-art {
	display: none;
}

.sg-fluid .sg-reader__card {
	position: relative;
	inset: auto;
	padding: 24px 20px;
}

.sg-fluid .sg-reader__title {
	position: static;
	margin-bottom: 12px;
	font-size: 14px;
}

.sg-fluid .sg-reader__scroll {
	position: static;
	max-height: calc(100dvh - 230px);
	padding-right: 10px;
}

.sg-fluid .sg-prose--satellite .wp-block-embed {
	float: none;
	width: 100%;
	margin: 0 0 16px;
}

.sg-fluid .sg-reader__actions {
	position: static;
	translate: none;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 16px;
}

.sg-noscript {
	padding: 24px;
	color: var(--sg-white);
}

.sg-noscript a {
	color: var(--sg-yellow);
}

@media (prefers-reduced-motion: reduce) {
	.sg-seppia * {
		animation: none !important;
	}
}

/* --- Invito a girare il dispositivo ----------------------------------------- */

/* Solo su schermi a sfioramento in verticale (smartphone e tablet): icona in basso a destra. */
.sg-rotate {
	display: none;
}

@media (orientation: portrait) and (pointer: coarse) {
	.sg-rotate {
		position: fixed;
		right: max(16px, env(safe-area-inset-right));
		bottom: max(16px, env(safe-area-inset-bottom));
		z-index: 50;
		display: grid;
		place-items: center;
		width: 52px;
		height: 52px;
		padding: 0;
		border: 1.5px solid rgba(246, 163, 55, 0.6);
		border-radius: 50%;
		background: rgba(0, 0, 36, 0.85);
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
		cursor: pointer;
	}
}

.sg-rotate svg {
	width: 38px;
	height: 38px;
	fill: none;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sg-rotate__phone {
	stroke: var(--sg-white);
	transform-box: view-box;
	transform-origin: 32px 28px;
}

.sg-rotate__arrow {
	stroke: var(--sg-yellow);
}

@media (prefers-reduced-motion: no-preference) {
	.sg-rotate__phone {
		animation: sg-rotate 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	}
}

@keyframes sg-rotate {
	0%,
	30% {
		transform: none;
	}

	55%,
	85% {
		transform: rotate(-90deg);
	}

	100% {
		transform: none;
	}
}