/* =========================================================
   BOTTONI
   ========================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	padding: 0.9rem 1.75rem;
	border-radius: var(--radius-md);
	border: 2px solid transparent;
	text-decoration: none;
	transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), color var(--transition-base);
	white-space: nowrap;
}

.btn:hover,
.btn:focus {
	transform: translateY(-2px);
}

.btn-primary {
	background: var(--gradient-energy);
	color: var(--color-white);
	box-shadow: var(--shadow-soft);
}

.btn-primary:hover,
.btn-primary:focus {
	box-shadow: var(--shadow-hover);
	color: var(--color-white);
}

.btn-secondary {
	background-color: transparent;
	border-color: var(--color-dark);
	color: var(--color-dark);
}

.btn-secondary:hover,
.btn-secondary:focus {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.section--dark .btn-secondary {
	border-color: var(--color-white);
	color: var(--color-white);
}

.section--dark .btn-secondary:hover,
.section--dark .btn-secondary:focus {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.btn-light {
	background-color: var(--color-white);
	color: var(--color-primary);
}

.btn-light:hover,
.btn-light:focus {
	background-color: var(--color-primary);
	color: var(--color-white);
}

/* =========================================================
   PAGE HERO (intestazione pagine interne)
   ========================================================= */
.page-hero {
	background: var(--gradient-depth);
	color: var(--color-white);
	padding-block: var(--space-xl);
	text-align: center;
}

.page-hero .eyebrow {
	color: var(--color-peach);
}

.page-hero h1 {
	color: var(--color-white);
	margin-bottom: var(--space-sm);
}

.page-hero p {
	color: var(--color-peach);
	max-width: 65ch;
	margin-inline: auto;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
	background: var(--gradient-depth);
	color: var(--color-white);
	padding-block: var(--space-2xl);
	overflow: hidden;
	position: relative;
}

.hero::after {
	content: "";
	position: absolute;
	inset: auto -15% -40% auto;
	width: 60%;
	padding-bottom: 60%;
	background: var(--color-primary);
	opacity: 0.25;
	border-radius: 50%;
	filter: blur(60px);
	pointer-events: none;
}

.hero__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
}

.hero__inner .eyebrow {
	color: var(--color-peach);
}

.hero h1 {
	color: var(--color-white);
	margin-bottom: var(--space-sm);
}

.hero p {
	font-size: 1.15rem;
	color: var(--color-peach);
	margin-bottom: var(--space-lg);
	max-width: 60ch;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

/* CTA ghost nel hero (su sfondo scuro): bordo e testo bianchi, hover rosso */
.hero .btn-secondary {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.75);
	color: var(--color-white);
}

.hero .btn-secondary:hover,
.hero .btn-secondary:focus {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

/* =========================================================
   CARD GENERICA
   ========================================================= */
.card {
	background-color: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	padding: var(--space-lg);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
	height: 100%;
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}

.card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md);
	background: var(--gradient-energy);
	color: var(--color-white);
	margin-bottom: var(--space-sm);
}

.card__icon svg {
	width: 28px;
	height: 28px;
}

.card h3 {
	margin-bottom: var(--space-2xs);
}

.card p {
	color: #5a4a4a;
}

.card a.card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: var(--space-sm);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.95rem;
}

/* Card "passi" (step numerati) */
.step-card {
	text-align: center;
}

.step-card__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--gradient-energy);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.25rem;
	margin-bottom: var(--space-sm);
}

/* Card tipo di Pass */
.pass-card {
	text-align: center;
}

.pass-card__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.3rem var(--space-sm);
	margin-bottom: var(--space-sm);
	border-radius: var(--radius-md);
	background-color: var(--color-gray);
	color: var(--color-dark);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.pass-card__badge--top {
	background: var(--gradient-energy);
	color: var(--color-white);
}

.pass-note {
	max-width: 760px;
	margin-top: var(--space-lg);
	margin-inline: auto;
	text-align: center;
	color: #5a4a4a;
	font-size: 0.9rem;
}

/* Card membro del team */
.team-card {
	text-align: center;
}

.team-card__photo {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	margin: 0 auto var(--space-sm);
	overflow: hidden;
	background: var(--gradient-energy);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 2rem;
	box-shadow: var(--shadow-soft);
}

.team-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.team-card__role {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-primary);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--space-2xs);
}

.team-card__fact {
	font-size: 0.9rem;
	color: #5a4a4a;
	margin-top: var(--space-2xs);
}

/* Card podio della live */
.podio-card {
	text-align: center;
}

.podio-card__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 80px;
	height: 36px;
	padding: 0 var(--space-sm);
	border-radius: var(--radius-md);
	background: var(--gradient-energy);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 0.95rem;
	margin-bottom: var(--space-sm);
}

.podio-card__photo {
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	margin-bottom: var(--space-sm);
}

.podio-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.podio-card .gallery-placeholder {
	margin-bottom: var(--space-sm);
}

/* =========================================================
   BLOCCO CTA-TILT (riutilizzabile)
   ========================================================= */
.cta-tilt {
	background: var(--gradient-energy);
	border-radius: var(--radius-lg);
	padding: var(--space-xl) var(--space-lg);
	text-align: center;
	color: var(--color-white);
	box-shadow: var(--shadow-soft);
}

.cta-tilt h2,
.cta-tilt p {
	color: var(--color-white);
}

.cta-tilt p {
	margin-inline: auto;
	margin-bottom: var(--space-md);
	max-width: 50ch;
	color: var(--color-white);
	opacity: 0.95;
}

.cta-tilt__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

/* =========================================================
   SEZIONE "SEGUICI" (social, riutilizzabile)
   ========================================================= */
.social-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-md);
}

.social-links__item {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2xs);
	color: var(--color-dark);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.9rem;
}

.social-links__icon {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: auto;
	height: auto;
	padding: 0.6rem 1.2rem;
	border-radius: 999px;
	white-space: nowrap;
	background: var(--gradient-energy);
	color: var(--color-white);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
	box-shadow: var(--shadow-soft);
}

.social-links__icon svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* Colori ufficiali delle piattaforme, testo/icona in bianco */
.social-links__icon--instagram {
	background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

.social-links__icon--facebook {
	background: #1877f2;
}

.social-links__icon--tiktok {
	background: #000000;
}

.social-links__icon--youtube {
	background: #ff0000;
}

.social-links__icon--tilt {
	background: #000000;
}

.social-links__item:hover .social-links__icon,
.social-links__item:focus .social-links__icon {
	transform: translateY(-4px) scale(1.05);
	box-shadow: var(--shadow-hover);
}

.social-links__item:hover,
.social-links__item:focus {
	color: var(--color-primary);
}

.section--dark .social-links__item {
	color: var(--color-white);
}

.section--dark .social-links__item:hover,
.section--dark .social-links__item:focus {
	color: var(--color-peach);
}

/* footer: variante compatta in riga */
.site-footer .social-links {
	justify-content: flex-start;
	gap: var(--space-sm);
}

.site-footer .social-links__icon,
.site-footer .social-links__icon--instagram,
.site-footer .social-links__icon--facebook,
.site-footer .social-links__icon--tiktok,
.site-footer .social-links__icon--youtube,
.site-footer .social-links__icon--tilt {
	width: 44px;
	height: 44px;
	padding: 0;
	gap: 0;
	justify-content: center;
	border-radius: 50%;
}

/* Default: cerchi bianchi con icona scura */
.site-footer .social-links__icon,
.site-footer .social-links__icon--instagram,
.site-footer .social-links__icon--facebook,
.site-footer .social-links__icon--tiktok,
.site-footer .social-links__icon--youtube,
.site-footer .social-links__icon--tilt {
	background: var(--color-white);
	color: var(--color-dark);
	transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

/* Hover: rosso con icona bianca */
.site-footer .social-links__item:hover .social-links__icon,
.site-footer .social-links__item:focus .social-links__icon {
	background: var(--gradient-energy);
	color: var(--color-white);
}

.site-footer .social-links__icon svg {
	width: 22px;
	height: 22px;
	margin: 0;
	line-height: 1;
}

.site-footer .social-links__item {
	font-size: 0;
}

/* =========================================================
   FORM (Fluent Forms - allineamento stile)
   ========================================================= */
.form-wrapper {
	background-color: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	padding: var(--space-lg);
}

.fluent_form input[type="text"],
.fluent_form input[type="email"],
.fluent_form input[type="tel"],
.fluent_form input[type="url"],
.fluent_form textarea,
.fluent_form select,
.frm-fluent-form input,
.frm-fluent-form textarea,
.frm-fluent-form select {
	border: 2px solid var(--color-gray) !important;
	border-radius: var(--radius-sm) !important;
	font-family: var(--font-body) !important;
	padding: 0.75rem 1rem !important;
	transition: border-color var(--transition-base) !important;
}

.fluent_form input:focus,
.fluent_form textarea:focus,
.fluent_form select:focus {
	border-color: var(--color-primary) !important;
	box-shadow: none !important;
}

.fluent_form .ff-btn,
.fluent_form button[type="submit"] {
	background: var(--gradient-energy) !important;
	border: none !important;
	border-radius: var(--radius-md) !important;
	font-family: var(--font-heading) !important;
	font-weight: 700 !important;
	padding: 0.9rem 1.75rem !important;
}

/* =========================================================
   GALLERIA / HIGHLIGHTS
   ========================================================= */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-sm);
}

.gallery-grid img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	transition: transform var(--transition-base);
}

.gallery-grid a:hover img,
.gallery-grid a:focus img {
	transform: scale(1.03);
}

.gallery-placeholder {
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	border: 2px dashed var(--color-peach);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-sm);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--color-secondary);
}

@media (max-width: 880px) {
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.gallery-cta {
	text-align: center;
	margin-top: var(--space-lg);
}

/* Muro loghi collaboratori */
.gallery-grid--logos .partner-logo {
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	box-shadow: var(--shadow-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-sm);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

a.partner-logo:hover,
a.partner-logo:focus {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}

.gallery-grid--logos .partner-logo img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: contain;
	border-radius: 0;
	box-shadow: none;
}

.gallery-grid--logos .partner-logo span {
	font-family: var(--font-heading);
	font-weight: 700;
	text-align: center;
	color: var(--color-secondary);
}

/* =========================================================
   CALENDARIO (Simple Calendar)
   ========================================================= */
.calendar-wrapper {
	background-color: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	padding: var(--space-md);
}

.calendar-placeholder {
	background-color: var(--color-white);
	border: 2px dashed var(--color-peach);
	border-radius: var(--radius-lg);
	padding: var(--space-xl) var(--space-md);
	text-align: center;
	color: var(--color-secondary);
	font-family: var(--font-heading);
	font-weight: 700;
}

.calendar-placeholder p {
	margin-inline: auto;
	color: #5a4a4a;
	font-family: var(--font-body);
	font-weight: 400;
}

/* =========================================================
   CALLOUT (testi importanti / placeholder legali)
   ========================================================= */
.callout {
	background-color: var(--color-peach);
	border-left: 4px solid var(--color-primary);
	border-radius: var(--radius-md);
	padding: var(--space-md);
}

.callout > *:last-child {
	margin-bottom: 0;
}

/* =========================================================
   FAQ (accordion semplice)
   ========================================================= */
.faq-item {
	border-bottom: 1px solid var(--color-gray);
	padding-block: var(--space-sm);
}

.faq-item summary {
	font-family: var(--font-heading);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-sm);
}

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

.faq-item summary::after {
	content: "+";
	font-size: 1.5rem;
	color: var(--color-primary);
	flex-shrink: 0;
	transition: transform var(--transition-base);
}

.faq-item[open] summary::after {
	transform: rotate(45deg);
}

.faq-item p {
	margin-top: var(--space-sm);
	color: #5a4a4a;
}

/* =========================================================
   BOTTONE "TORNA SU"
   ========================================================= */
.back-to-top {
	position: fixed;
	right: var(--space-sm);
	bottom: var(--space-sm);
	z-index: 900;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-white);
	box-shadow: var(--shadow-soft);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top svg {
	width: 22px;
	height: 22px;
}

.back-to-top:hover,
.back-to-top:focus {
	background-color: var(--color-secondary);
	box-shadow: var(--shadow-hover);
}

/* Nasconde il bottone quando il cookie wall di Complianz blocca l'interazione col resto della pagina */
body.cmplz-banner-active .back-to-top {
	display: none;
}

/* =========================================================
   COUNTDOWN DIRETTA
   ========================================================= */
.countdown-section {
	background: var(--gradient-depth);
	padding: var(--space-lg) 0;
}

.countdown-widget {
	text-align: center;
	color: var(--color-white);
}

.countdown-label {
	color: var(--color-peach);
	font-size: 1rem;
	letter-spacing: 0.02em;
	margin-bottom: var(--space-md);
	opacity: 0.9;
}

.countdown-timer {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: var(--space-xs);
	flex-wrap: wrap;
	max-width: 100%;
	margin-bottom: var(--space-md);
	box-sizing: border-box;
}

.countdown-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 72px;
}

.countdown-unit-label .label-short {
	display: none;
}

.countdown-value {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(2.25rem, 6vw, 3.5rem);
	line-height: 1;
	color: var(--color-white);
}

.countdown-unit-label {
	color: var(--color-peach);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	margin-top: 0.3rem;
	opacity: 0.75;
	text-transform: uppercase;
}

.countdown-sep {
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: clamp(2.25rem, 6vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
	opacity: 0.35;
}

.countdown-cta {
	margin-top: var(--space-sm);
}

/* Mobile: timer compatto, una riga se c'entra, altrimenti griglia 2x2 ordinata */
@media (max-width: 480px) {
	.countdown-timer {
		gap: var(--space-2xs);
	}

	.countdown-value,
	.countdown-sep {
		font-size: clamp(1.6rem, 7vw, 2.5rem);
	}

	.countdown-unit {
		min-width: 56px;
	}
}

@media (max-width: 380px) {
	.countdown-timer {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-2xs) var(--space-sm);
	}

	.countdown-sep {
		display: none;
	}

	.countdown-unit {
		min-width: 0;
	}

	.countdown-unit-label .label-full {
		display: none;
	}

	.countdown-unit-label .label-short {
		display: inline;
	}
}

/* =========================================================
   TARGHETTA ON AIR (fissa, tutte le pagine)
   ========================================================= */
.onair-badge {
	align-items: center;
	background-color: var(--color-dark);
	border-radius: var(--radius-md);
	bottom: var(--space-sm);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
	color: var(--color-white);
	display: flex;
	gap: 0.65rem;
	left: var(--space-sm);
	padding: 0.65rem 1rem;
	position: fixed;
	z-index: 950;
	/* Slide-in da sinistra; .is-visible porta a translateX(0) */
	transform: translateX(calc(-100% - var(--space-sm) - 4px));
	transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Il display:flex qui sopra sovrascriverebbe l'[hidden] dello user-agent:
   senza questa regola la targhetta resta nell'albero di accessibilita' e il
   suo link resta raggiungibile con Tab anche a diretta spenta. */
.onair-badge[hidden] {
	display: none;
}

.onair-badge.is-visible {
	transform: translateX(0);
}

/* Pulsazione lenta (~1.3 s) su opacità + alone: nessun lampeggio rapido */
.onair-badge__spia {
	animation: onair-pulse 1.3s ease-in-out infinite;
	background-color: var(--color-primary);
	border-radius: 50%;
	flex-shrink: 0;
	height: 10px;
	width: 10px;
}

@keyframes onair-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(227, 6, 19, 0.55);
		opacity: 1;
	}
	50% {
		box-shadow: 0 0 0 7px rgba(227, 6, 19, 0);
		opacity: 0.75;
	}
}

.onair-badge__text {
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.onair-badge__cta {
	background-color: var(--color-primary);
	border-radius: var(--radius-sm);
	color: var(--color-white);
	display: inline-flex;
	align-items: center;
	font-family: var(--font-heading);
	font-size: 0.78rem;
	font-weight: 700;
	padding: 0.3rem 0.7rem;
	text-decoration: none;
	transition: background-color var(--transition-base);
	white-space: nowrap;
}

.onair-badge__cta:hover,
.onair-badge__cta:focus {
	background-color: var(--color-secondary);
	color: var(--color-white);
}

/* Accessibilità: nessuna animazione per chi la disattiva */
@media (prefers-reduced-motion: reduce) {
	.onair-badge {
		transition: none;
	}

	.onair-badge__spia {
		animation: none;
	}
}

/* Nasconde la badge quando il cookie wall di Complianz è attivo */
body.cmplz-banner-active .onair-badge {
	display: none;
}

/* =========================================================
   SEZIONE SPLIT — SPAZIATURE TIPOGRAFICHE E CENTRATURA CTA
   ========================================================= */
.split__content h2 {
	margin-bottom: var(--space-sm);
}

.split__content > p {
	margin-top: 0;
	margin-bottom: var(--space-md);
}

/* CTA autonoma nel blocco testo: centrata orizzontalmente */
.split__content .btn {
	display: block;
	width: fit-content;
	margin-inline: auto;
}

/* =========================================================
   BADGE DOWNLOAD APP TILT
   ========================================================= */
.app-badges-wrapper {
	margin-top: var(--space-md);
}

.app-badges__label {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.85rem;
	margin-bottom: var(--space-2xs);
}

.app-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	align-items: center;
}

.text-center .app-badges {
	justify-content: center;
}

.app-badge img {
	display: block;
	height: 40px;
	width: auto;
	border-radius: 6px;
	transition: opacity var(--transition-base), transform var(--transition-base);
}

.app-badge:hover img,
.app-badge:focus img {
	opacity: 0.85;
	transform: translateY(-2px);
}

/* Variante footer (sfondo scuro) */
.site-footer .app-badges-wrapper {
	margin-top: var(--space-sm);
}

.site-footer .app-badges__label {
	color: var(--color-peach);
	font-size: 0.8rem;
}

/* Striscia download app: compatta, tra due sezioni */
.app-cta-strip {
	background-color: var(--color-gray);
	padding-block: var(--space-md);
}

.app-cta-strip .app-badges {
	justify-content: center;
}

/* La striscia ha gia' il proprio padding: il wrapper non aggiunge margine */
.app-cta-strip .app-badges-wrapper {
	margin-top: 0;
}

.app-cta-strip .app-badges__label {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.85rem;
	margin-bottom: var(--space-2xs);
	text-align: center;
}

/* =========================================================
   BLOG — FILTRI CATEGORIA
   ========================================================= */
.blog-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-bottom: var(--space-lg);
}

.blog-filter {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 1.1rem;
	border-radius: 999px;
	border: 2px solid var(--color-gray);
	background-color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--color-dark);
	transition: border-color var(--transition-base), color var(--transition-base);
}

.blog-filter:hover,
.blog-filter:focus {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.blog-filter--active {
	background: var(--gradient-energy);
	border-color: transparent;
	color: var(--color-white);
}

.blog-filter--active:hover,
.blog-filter--active:focus {
	color: var(--color-white);
}

/* =========================================================
   BLOG — CARD ARTICOLO
   ========================================================= */
.post-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.post-card__image {
	display: block;
	flex-shrink: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.post-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
	transition: transform var(--transition-base);
}

.post-card:hover .post-card__image img {
	transform: scale(1.04);
}

.post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-md);
}

.post-card__cat {
	margin-bottom: var(--space-2xs);
}

.post-card__cat:hover,
.post-card__cat:focus {
	color: var(--color-secondary);
}

.post-card__title {
	margin-bottom: var(--space-xs);
}

.post-card__title a {
	color: var(--color-dark);
}

.post-card__title a:hover,
.post-card__title a:focus {
	color: var(--color-primary);
}

.post-card__excerpt {
	color: #5a4a4a;
	font-size: 0.95rem;
	flex: 1;
	margin-bottom: var(--space-sm);
}

.post-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	margin-top: auto;
}

.post-card__date {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.8rem;
	color: #5a4a4a;
}

/* =========================================================
   BLOG — PAGINAZIONE
   ========================================================= */
.blog-pagination {
	margin-top: var(--space-xl);
	display: flex;
	justify-content: center;
}

.blog-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	align-items: center;
	justify-content: center;
}

.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 var(--space-sm);
	border-radius: var(--radius-md);
	border: 2px solid var(--color-gray);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--color-dark);
	transition: border-color var(--transition-base), color var(--transition-base);
}

.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers:focus {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.blog-pagination .page-numbers.current {
	background: var(--gradient-energy);
	border-color: transparent;
	color: var(--color-white);
}

.blog-pagination .page-numbers.dots {
	border-color: transparent;
	pointer-events: none;
}

/* =========================================================
   BLOG — ARTICOLO SINGOLO
   ========================================================= */
.single-post__meta {
	font-size: 0.9rem;
	color: var(--color-peach);
	opacity: 0.85;
	margin-top: var(--space-xs);
	max-width: none;
}

.single-post__revision-notice {
	font-size: 0.8rem;
	color: var(--color-peach);
	opacity: 0.65;
	margin-top: var(--space-2xs);
	max-width: none;
}

.single-post__hero-img {
	background-color: var(--color-gray);
	padding-block: var(--space-md);
}

.single-post__hero-img img {
	border-radius: var(--radius-lg);
	max-height: 480px;
	width: 100%;
	object-fit: cover;
	box-shadow: var(--shadow-soft);
}

.single-post__content {
	font-size: 1.05rem;
	line-height: 1.8;
	max-width: 760px;
	margin-inline: auto;
}

.single-post__content h2,
.single-post__content h3,
.single-post__content h4 {
	margin-top: var(--space-lg);
	margin-bottom: var(--space-xs);
}

.single-post__content p {
	margin-bottom: var(--space-sm);
	max-width: none;
}

.single-post__content img {
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
}

.single-post__content blockquote {
	border-left: 4px solid var(--color-primary);
	padding-left: var(--space-md);
	margin-left: 0;
	color: #5a4a4a;
	font-style: italic;
}

.single-post__content ul {
	list-style: disc;
	padding-left: 1.5em;
	margin-bottom: var(--space-sm);
}

.single-post__content ol {
	list-style: decimal;
	padding-left: 1.5em;
	margin-bottom: var(--space-sm);
}

.single-post__content li + li {
	margin-top: var(--space-2xs);
}

.single-post__content a {
	color: var(--color-primary);
	text-decoration: underline;
}

.single-post__pages {
	margin-top: var(--space-lg);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	align-items: center;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.9rem;
}

.single-post__pages a {
	color: var(--color-primary);
	text-decoration: none;
}

/* Stato vuoto archivio */
.blog-empty {
	text-align: center;
	padding-block: var(--space-2xl);
	color: #5a4a4a;
	font-family: var(--font-heading);
	font-weight: 600;
	max-width: none;
}

/* =========================================================
   MESSAGGIO PERSONALIZZATO DIRETTA
   ========================================================= */
.messaggio-diretta {
	text-align: center;
	color: var(--color-white);
	max-width: 640px;
	margin-inline: auto;
}

.messaggio-diretta__titolo {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--color-white);
	margin-bottom: var(--space-sm);
}

.messaggio-diretta__testo {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--color-peach);
	opacity: 0.9;
	max-width: none;
	margin-bottom: var(--space-md);
}

.messaggio-diretta .social-links {
	justify-content: center;
}

/* =========================================================
   COMMUNITY BOX (chiusura articolo blog)
   ========================================================= */
.community-box {
	background-color: var(--color-gray);
	border-radius: var(--radius-lg);
	padding: var(--space-xl) var(--space-lg);
	text-align: center;
	margin-top: var(--space-xl);
}

.community-box__label {
	display: block;
	margin-bottom: var(--space-sm);
}

.community-box__question {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 800;
	color: var(--color-dark);
	line-height: 1.25;
	margin-bottom: var(--space-sm);
	max-width: 640px;
	margin-inline: auto;
}

/* Senza bottoni social la domanda chiude il box: niente margine in eccesso */
.community-box__question:last-child {
	margin-bottom: 0;
}

.community-box__invite {
	color: #5a4a4a;
	margin-bottom: var(--space-md);
	max-width: none;
}

.community-box .social-links {
	justify-content: center;
}

/* =========================================================
   NEWSLETTER (iscrizione via Brevo)
   Due varianti: piena (articoli, pagina Live & Drop) e compatta (footer).
   ========================================================= */
.newsletter-box {
	background-color: var(--color-gray);
	border-radius: var(--radius-lg);
	padding: var(--space-xl) var(--space-lg);
	margin-top: var(--space-xl);
	text-align: center;
}

.newsletter-box__intro {
	margin-bottom: var(--space-md);
}

.newsletter-box__titolo {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 800;
	line-height: 1.25;
	color: var(--color-dark);
	max-width: 640px;
	margin-inline: auto;
	margin-bottom: var(--space-2xs);
}

.newsletter-box__testo {
	color: #5a4a4a;
	max-width: 52ch;
	margin-inline: auto;
}

.newsletter-form {
	max-width: 540px;
	margin-inline: auto;
	text-align: left;
}

/* Campo trappola per i bot: fuori dallo schermo e fuori dalla tabulazione.
   Non usiamo display:none, che alcuni bot riconoscono e saltano. */
.newsletter-form__trappola {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.newsletter-form__riga {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
}

.newsletter-form__email {
	flex: 1 1 220px;
	min-width: 0;
	padding: 0.9rem 1.1rem;
	border: 2px solid rgba(34, 0, 0, 0.15);
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	color: var(--color-dark);
}

.newsletter-form__email:focus {
	border-color: var(--color-primary);
	outline: none;
}

.newsletter-form__submit {
	flex: 0 0 auto;
}

.newsletter-form__submit:disabled {
	opacity: 0.65;
	cursor: progress;
	transform: none;
}

.newsletter-form__consenso {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2xs);
	max-width: none;
	margin-top: var(--space-sm);
	font-size: 0.85rem;
	line-height: 1.5;
	color: #5a4a4a;
}

/* Il link alla Privacy Policy eredita il colore del testo di consenso: il
   rosso primario su fondo grigio si ferma a 4,37:1, sotto la soglia AA. */
.newsletter-form__consenso a {
	color: inherit;
	text-decoration: underline;
}

.newsletter-form__consenso a:hover,
.newsletter-form__consenso a:focus {
	color: var(--color-dark);
}

.newsletter-form__consenso input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 0.15em;
	accent-color: var(--color-primary);
}

.newsletter-form__esito {
	max-width: none;
	margin-top: var(--space-sm);
	font-weight: 600;
	font-size: 0.9rem;
}

/* Senza messaggio il paragrafo non deve occupare spazio */
.newsletter-form__esito:empty {
	display: none;
}

.newsletter-form__esito.is-successo {
	color: var(--color-success);
}

.newsletter-form__esito.is-avviso {
	color: var(--color-warning);
}

.newsletter-form__esito.is-errore {
	color: var(--color-error);
}

.newsletter-form__esito.is-attesa {
	color: #5a4a4a;
}

/* --- Variante compatta (footer) ---------------------------------------- */

/* Pannello a tinta unita: sopra al gradiente del footer il contrasto del
   testo varierebbe da un capo all'altro della sezione. */
.newsletter-box--compact {
	background-color: var(--color-dark);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	margin-top: var(--space-lg);
	margin-bottom: 0;
	text-align: left;
	display: grid;
	gap: var(--space-md);
}

.newsletter-box--compact .newsletter-box__intro {
	margin-bottom: 0;
}

.newsletter-box--compact .newsletter-box__titolo {
	font-size: 1.125rem;
	color: var(--color-white);
	margin-inline: 0;
}

.newsletter-box--compact .newsletter-box__testo {
	color: var(--color-peach);
	font-size: 0.875rem;
	margin-inline: 0;
}

.newsletter-box--compact .newsletter-form {
	max-width: none;
	margin-inline: 0;
}

.newsletter-box--compact .newsletter-form__consenso {
	color: var(--color-peach);
	font-size: 0.8rem;
}

.newsletter-box--compact .newsletter-form__consenso a:hover,
.newsletter-box--compact .newsletter-form__consenso a:focus {
	color: var(--color-white);
}

.newsletter-box--compact .newsletter-form__esito.is-successo {
	color: var(--color-success-light);
}

.newsletter-box--compact .newsletter-form__esito.is-avviso {
	color: var(--color-warning-light);
}

.newsletter-box--compact .newsletter-form__esito.is-errore {
	color: var(--color-error-light);
}

.newsletter-box--compact .newsletter-form__esito.is-attesa {
	color: var(--color-peach);
}

/* Da tablet in su: testo a sinistra, modulo a destra */
@media (min-width: 720px) {
	.newsletter-box--compact {
		grid-template-columns: 1fr 1.1fr;
		align-items: center;
		gap: var(--space-lg);
		padding: var(--space-lg);
	}
}

/* =========================================================
   MODULO DI RICERCA
   ========================================================= */
.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
}

.search-form__input {
	background-color: var(--color-white);
	border: 2px solid #e2dcda;
	border-radius: var(--radius-sm);
	color: var(--color-dark);
	flex: 1 1 220px;
	min-width: 0;
	padding: 0.7rem 1rem;
	transition: border-color var(--transition-base);
}

.search-form__input::placeholder {
	color: #8a7a7a;
}

.search-form__input:focus {
	border-color: var(--color-primary);
	outline: none;
}

.search-form__submit {
	flex-shrink: 0;
}

/* =========================================================
   PAGINA 404
   ========================================================= */
.error-404 {
	display: grid;
	gap: var(--space-lg);
	margin-inline: auto;
	max-width: 760px;
}

@media (min-width: 780px) {
	.error-404 {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-xl);
		max-width: none;
	}
}

.error-404__titolo {
	font-size: clamp(1.25rem, 3vw, 1.5rem);
	margin-bottom: var(--space-sm);
}

.error-404__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
}

.error-404__blog-link {
	margin-top: var(--space-lg);
}

/* =========================================================
   PAGINA DEDICATA DEL COLLABORATORE (single-partner)
   ========================================================= */
.partner-page__logo {
	margin-inline: auto;
	margin-bottom: var(--space-sm);
	max-width: 160px;
}

.partner-page__logo img {
	border-radius: var(--radius-sm);
	height: auto;
	width: 100%;
}

.partner-page__cover {
	margin-top: calc(var(--space-lg) * -1);
	position: relative;
	z-index: 1;
}

.partner-page__cover img {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	height: auto;
	width: 100%;
}

.partner-page__descrizione {
	margin-bottom: var(--space-lg);
}

/* Titolo, righe di contatto e bottoni seguono tutti la stessa centratura */
.partner-page__contatti {
	background-color: var(--color-gray);
	border-radius: var(--radius-lg);
	margin-inline: auto;
	max-width: 760px;
	padding: var(--space-lg);
	text-align: center;
}

.partner-page__contatti-titolo {
	font-size: clamp(1.25rem, 3vw, 1.5rem);
	margin-bottom: var(--space-sm);
}

.partner-page__contatti-lista {
	display: grid;
	gap: var(--space-xs);
	margin-bottom: var(--space-md);
}

.partner-page__contatti-lista li {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem var(--space-2xs);
	justify-content: center;
}

/* Niente min-width: incolonnava le etichette a sinistra, in contrasto
   con la centratura del resto del box */
.partner-page__contatti-etichetta {
	color: #5a4a4a;
	font-family: var(--font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Indirizzo cliccabile: sottolineatura e icona lo distinguono dal testo statico */
.partner-page__mappa {
	align-items: center;
	color: var(--color-dark);
	display: inline-flex;
	gap: 0.35rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--transition-base);
}

.partner-page__mappa:hover,
.partner-page__mappa:focus {
	color: var(--color-primary);
}

.partner-page__mappa-icona {
	flex-shrink: 0;
	height: 18px;
	width: 18px;
}

/* Ultimo elemento senza margine: la lista puo' chiudere il box */
.partner-page__contatti-lista:last-child {
	margin-bottom: 0;
}

.partner-page__link {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	justify-content: center;
}

.partner-page__ritorno {
	margin-top: var(--space-lg);
}

/* --- Prodotti in mostra --- */
.partner-product {
	background-color: var(--color-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.partner-product:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-4px);
}

.partner-product__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.partner-product__image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.partner-product__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: var(--space-2xs);
	padding: var(--space-md);
}

.partner-product__title {
	font-size: 1.125rem;
}

.partner-product__desc {
	color: #5a4a4a;
	font-size: 0.9rem;
}

.partner-product__price {
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-weight: 700;
}

/* Spinge il bottone in fondo: schede di altezza diversa restano allineate */
.partner-product__link {
	align-self: flex-start;
	margin-top: auto;
}

/* =========================================================
   STATO DIRETTA NEL BLOCCO CTA-TILT (countdown compatto)
   ========================================================= */
/* Riga sopra il pulsante: "Prossimo Drop tra 02:14:33:07" oppure
   la spia + "Siamo in diretta ora". Testo sempre bianco pieno:
   sul gradiente rosso della CTA serve per il contrasto AA. */
.cta-tilt__diretta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-xs);
	margin-bottom: var(--space-sm);
	color: var(--color-white);
}

/* L'attributo hidden deve vincere sul display:flex qui sopra */
.cta-tilt__diretta[hidden] {
	display: none;
}

.cta-tilt__diretta-label {
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cta-tilt__diretta--live {
	font-family: var(--font-heading);
	font-size: 0.85rem;
	font-weight: 800;
	gap: 0.55rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Stessa pulsazione lenta della targhetta On Air */
.cta-tilt__spia {
	animation: onair-pulse 1.3s ease-in-out infinite;
	background-color: var(--color-white);
	border-radius: 50%;
	flex-shrink: 0;
	height: 9px;
	width: 9px;
}

/* --- Variante compatta del timer --- */
.countdown-timer--compact {
	align-items: baseline;
	gap: 0.3rem;
	margin-bottom: 0;
	width: auto;
}

.countdown-timer--compact .countdown-unit {
	align-items: baseline;
	flex-direction: row;
	gap: 0.15rem;
	min-width: 0;
}

.countdown-timer--compact .countdown-value,
.countdown-timer--compact .countdown-sep {
	font-size: 1.35rem;
}

.countdown-timer--compact .countdown-sep {
	opacity: 0.45;
}

.countdown-timer--compact .countdown-unit-label {
	color: var(--color-white);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	margin-top: 0;
	opacity: 1;
	text-transform: none;
}

/* Nella variante compatta valgono sempre le etichette abbreviate (g/h/m/s) */
.countdown-timer--compact .label-full {
	display: none;
}

.countdown-timer--compact .label-short {
	display: inline;
}

/* Sotto i 380px il timer principale diventa una griglia 2x2: la variante
   compatta resta invece in linea e va a capo in modo ordinato. */
@media (max-width: 380px) {
	.countdown-timer--compact {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem;
		justify-content: center;
	}

	.countdown-timer--compact .countdown-sep {
		display: inline;
	}

	.countdown-timer--compact .countdown-value,
	.countdown-timer--compact .countdown-sep {
		font-size: 1.2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cta-tilt__spia {
		animation: none;
	}
}

/* =========================================================
   GAMEBROSKI — SCAFFALE, CARTUCCE E SCHERMO DI GIOCO
   ---------------------------------------------------------
   Il richiamo alle console portatili anni '90 e' evocativo: schermo verde a
   cristalli liquidi, bordi spessi, accenti a pixel, la cartuccia come forma
   ricorrente. Nessun marchio, font o asset ufficiale; la base resta la
   palette del brand.
   ========================================================= */

/* --- Scaffale: la sezione che ospita la griglia dell'indice --- */
.gamebroski-scaffale {
	background-color: var(--gb-screen);
	/* Righe orizzontali quasi impercettibili: il ricordo dello schermo LCD,
	   non un effetto vistoso che disturbi la lettura. */
	background-image: repeating-linear-gradient(
		0deg,
		rgba(27, 58, 31, 0.07) 0 1px,
		transparent 1px 4px
	);
}

.gamebroski-vuoto {
	color: var(--gb-screen-ink);
	font-family: var(--font-heading);
	font-weight: 600;
	margin-inline: auto;
	max-width: 46ch;
	text-align: center;
}

/* --- Griglia: mobile-first, una colonna sui telefoni piu' stretti --- */
.gamebroski-griglia {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: 1fr;
}

@media (min-width: 480px) {
	.gamebroski-griglia {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 921px) {
	.gamebroski-griglia {
		gap: var(--space-lg);
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1101px) {
	.gamebroski-griglia {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Il rimando in fondo alla pagina di un gioco mostra al massimo 3 card:
	   con quattro colonne resterebbe un buco in fondo alla riga. */
	.gamebroski-griglia--rimando {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- La cartuccia --- */
.gioco-card {
	height: 100%;
}

.gioco-card__link {
	background-color: var(--color-white);
	border: 3px solid var(--gb-shell);
	border-radius: var(--radius-sm);
	/* Ombra netta invece che sfumata: da' alla card lo spessore di un
	   oggetto fisico, che e' meta' dell'effetto "cartuccia". */
	box-shadow: 0 6px 0 0 var(--gb-shell);
	color: var(--color-dark);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.gioco-card__link:hover,
.gioco-card__link:focus-visible {
	box-shadow: 0 10px 0 0 var(--gb-shell);
	color: var(--color-dark);
	transform: translateY(-4px);
}

.gioco-card__cover {
	aspect-ratio: 3 / 4;
	background-color: var(--gb-screen);
	overflow: hidden;
	position: relative;
}

.gioco-card__cover img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Senza copertina: l'iniziale del gioco sullo schermo verde, cosi' la
   griglia resta allineata anche mentre le grafiche sono in lavorazione. */
.gioco-card__cover-vuota {
	align-items: center;
	color: var(--gb-screen-ink);
	display: flex;
	font-family: var(--font-heading);
	font-size: clamp(3rem, 12vw, 5rem);
	font-weight: 800;
	height: 100%;
	justify-content: center;
	text-transform: uppercase;
	width: 100%;
}

/* Nastro a pixel: l'unico accento dichiaratamente a 8 bit. */
.gioco-card__pixel {
	background: repeating-linear-gradient(
		90deg,
		var(--color-primary) 0 var(--gb-pixel),
		var(--gb-shell) var(--gb-pixel) calc(var(--gb-pixel) * 2)
	);
	bottom: 0;
	height: var(--gb-pixel);
	left: 0;
	position: absolute;
	right: 0;
}

.gioco-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: var(--space-2xs);
	padding: var(--space-sm);
}

.gioco-card__titolo {
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	margin: 0;
	text-transform: uppercase;
}

.gioco-card__desc {
	color: #5a4a4a;
	font-size: 0.9rem;
	margin: 0;
	max-width: none;
}

/* "Gioca": ha l'aspetto di un bottone ma e' uno <span>, perche' il link e'
   la card intera (un <a> dentro un <a> non e' markup valido). */
.gioco-card__cta {
	align-items: center;
	background: var(--gradient-energy);
	border-radius: var(--radius-sm);
	color: var(--color-white);
	display: flex;
	font-family: var(--font-heading);
	font-size: 0.95rem;
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0.04em;
	margin-top: auto;
	padding: 0.6rem 1rem;
	text-transform: uppercase;
	transition: background var(--transition-base);
}

.gioco-card__link:hover .gioco-card__cta,
.gioco-card__link:focus-visible .gioco-card__cta {
	background: var(--color-primary);
}

/* --- Lo schermo: il gioco vero e proprio --- */
.gioco-schermo {
	background-color: var(--gb-shell);
	background-image: repeating-linear-gradient(
		0deg,
		rgba(255, 255, 255, 0.04) 0 1px,
		transparent 1px 4px
	);
	/* Poco respiro sopra e sotto: su telefono ogni pixel speso qui e' spazio
	   tolto al gioco, che deve vedersi senza scorrere. */
	padding-block: var(--space-sm);
}

@media (min-width: 641px) {
	.gioco-schermo {
		padding-block: var(--space-lg);
	}
}

.gioco-schermo__cornice {
	background-color: var(--gb-panel);
	border: 3px solid var(--gb-screen);
	border-radius: var(--radius-sm);
	box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.45);
	margin-inline: auto;
	/* I minigiochi si fermano a 620px: la cornice li contiene con un margine.
	   L'overflow e' una rete di sicurezza — se un gioco crescesse oltre, a
	   scorrere sarebbe la sua cornice, mai la pagina. */
	max-width: 680px;
	overflow-x: auto;
	padding: var(--space-sm);
}

/*
 * I minigiochi dichiarano lo sfondo trasparente e cambiano solo il colore del
 * testo, quindi il fondo lo mette la cornice. Con tema="auto" (il predefinito)
 * seguono le preferenze di sistema: qui facciamo lo stesso, altrimenti su un
 * dispositivo in modalita' scura il testo chiaro finirebbe su fondo chiaro.
 */
@media (prefers-color-scheme: dark) {
	.gioco-schermo__cornice:has([data-theme="auto"]) {
		background-color: var(--gb-panel-dark);
	}
}

.gioco-schermo__cornice:has([data-theme="dark"]) {
	background-color: var(--gb-panel-dark);
}

/* Avviso di shortcode mancante: lo vede solo chi puo' rimediare. */
.gioco-schermo__avviso {
	background-color: rgba(255, 255, 255, 0.08);
	border: 2px dashed var(--gb-screen);
	border-radius: var(--radius-sm);
	color: var(--gb-screen);
	margin-inline: auto;
	max-width: 680px;
	padding: var(--space-sm);
	text-align: center;
}

/* --- Scheda del gioco: nome, descrizione, istruzioni --- */
.gioco-scheda__intestazione {
	margin-inline: auto;
	max-width: 760px;
	text-align: center;
}

.gioco-scheda__intestazione h1 {
	margin-bottom: var(--space-2xs);
}

.gioco-scheda__desc {
	color: #5a4a4a;
	font-size: 1.05rem;
	margin-inline: auto;
	max-width: 60ch;
}

.gioco-istruzioni {
	background-color: var(--gb-screen);
	border: 3px solid var(--gb-shell);
	border-radius: var(--radius-sm);
	box-shadow: 0 6px 0 0 var(--gb-shell);
	color: var(--gb-screen-ink);
	margin-inline: auto;
	margin-top: var(--space-lg);
	max-width: 760px;
	padding: var(--space-md);
}

.gioco-istruzioni__titolo {
	color: var(--gb-screen-ink);
	font-size: 1.25rem;
	letter-spacing: 0.04em;
	margin-bottom: var(--space-2xs);
	text-transform: uppercase;
}

.gioco-istruzioni__testo p {
	max-width: none;
}

.gioco-istruzioni__testo p + p {
	margin-top: var(--space-2xs);
}

.gioco-scheda__tutti {
	margin-top: var(--space-lg);
}

.gioco-scheda__ritorno {
	margin-top: var(--space-md);
}

/*
 * Sulla pagina di un gioco, su schermi piccoli, niente elementi fissi: la
 * targhetta On Air e il bottone "torna su" sono ancorati in basso e
 * finirebbero proprio sopra l'area di gioco. Anche l'intestazione smette di
 * essere appiccicata, cosi' i suoi 76px tornano al gioco appena si scorre.
 * Da tablet in su lo spazio c'e' e restano tutti al loro posto.
 */
@media (max-width: 900px) {
	body.single-gioco .onair-badge,
	body.single-gioco .back-to-top {
		display: none;
	}

	body.single-gioco .site-header {
		position: static;
	}
}