/* ==========================================================================
   Componenti riusabili. Mobile-first: gli adattamenti desktop dei singoli
   componenti stanno in responsive.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pulsanti
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--tap);
	padding: 0 var(--space-5);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1;
	transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.btn .icon {
	width: 16px;
	height: 16px;
}

.btn--primary {
	background: var(--accent-fill);
	color: var(--on-accent);
	box-shadow: var(--glow);
}

.btn--primary:hover {
	background: var(--accent-fill-hover);
}

.btn--secondary {
	background: var(--surface-2);
	border-color: var(--border);
	color: var(--text);
}

.btn--secondary:hover {
	border-color: var(--accent);
}

.btn--sm {
	min-height: 36px;
	padding: 0 var(--space-4);
	font-size: var(--text-xs);
}

.icon-btn {
	display: inline-grid;
	place-items: center;
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text);
	transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.icon-btn:hover {
	background: var(--surface-2);
}

.icon-btn .icon {
	width: 22px;
	height: 22px;
}

/* --------------------------------------------------------------------------
   Pill di categoria e chip
   -------------------------------------------------------------------------- */

.pill {
	display: inline-flex;
	min-height: 24px;
	align-items: center;
	align-self: flex-start;
	width: fit-content;
	padding: 3px var(--space-2);
	border-radius: var(--radius-xs);
	background: var(--pill-bg);
	color: var(--pill-text);
	font-family: var(--font-heading);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}

a.pill:hover {
	background: var(--accent-fill-hover);
}

.pill--soft {
	background: var(--surface-3);
	color: var(--text);
}

.chips {
	display: flex;
	gap: var(--space-2);
	list-style: none;
	/* Mobile: una riga scorrevole, senza barra visibile. */
	overflow-x: auto;
	scroll-snap-type: x proximity;
	/* Senza, l'aggancio porta il primo chip contro il bordo (o lo nasconde). */
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
	margin-inline: calc(var(--gutter) * -1);
	padding: var(--space-1) var(--gutter);
}

.chips::-webkit-scrollbar {
	display: none;
}

.chips > li {
	flex-shrink: 0;
	scroll-snap-align: start;
}

.chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--chip-bg);
	color: var(--chip-text);
	font-size: var(--text-sm);
	font-weight: 600;
	white-space: nowrap;
	transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.chip:hover,
.chip[aria-current] {
	border-color: var(--accent);
	color: var(--accent-text);
}

.chip--sm {
	min-height: 32px;
	padding: 0 var(--space-3);
	font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--header-bg);
	border-bottom: 1px solid var(--border);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
}

.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}

/* Sotto i 600px la barra admin scorre via: l'header si attacca in cima. */
@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

/* Mobile: logo a sinistra, ricerca e menu a destra. */
.site-header__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--space-1);
	height: var(--header-height);
}

.site-header__inner > .brand {
	order: -1;
	justify-self: start;
	min-width: 0;
}

.site-header__menu {
	order: 3;
}

.site-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-1);
}

.site-header__toggle,
.main-nav {
	display: none;
}

/* Logo: la variante giusta per il tema attivo, il simbolo sotto i 360px. */
.brand {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
}

.brand img {
	width: auto;
}

/* Le altezze dei loghi sono nel CSS stampato in pagina da inc/logos.php. */

.brand__logo--dark,
.brand__symbol,
:root[data-theme="dark"] .brand__logo--light {
	display: none;
}

:root[data-theme="dark"] .brand__logo--dark {
	display: block;
}

@media (max-width: 359px) {
	.brand .brand__logo {
		display: none !important;
	}

	.brand .brand__symbol {
		display: block;
	}
}

.custom-logo {
	max-height: 36px;
	width: auto;
}

/* Menu principale (desktop). Un menu più lungo scorre invece di rompere l'header. */
.main-nav {
	min-width: 0;
}

.main-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.main-nav__list::-webkit-scrollbar {
	display: none;
}

.main-nav__list li {
	flex-shrink: 0;
}

.main-nav__list a {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: var(--header-height);
	padding: 0 var(--space-3);
	color: var(--text);
	font-size: var(--text-sm);
	font-weight: 600;
	transition: color var(--duration) var(--ease);
}

.main-nav__list a:hover {
	color: var(--accent-text);
}

/* Il contenitore scorrevole taglierebbe il focus esterno: lo portiamo dentro. */
.main-nav__list a:focus-visible {
	outline-offset: -6px;
}

.main-nav__list .current-menu-item > a,
.main-nav__list a[aria-current="page"] {
	color: var(--accent-text);
}

.main-nav__list .current-menu-item > a::after,
.main-nav__list a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: var(--space-3);
	right: var(--space-3);
	bottom: 12px;
	height: 2px;
	border-radius: 2px;
	background: var(--accent);
}

/* Cambio tema: mostra il sole in dark (per passare al chiaro) e viceversa. */
.theme-toggle .theme-toggle__moon,
:root[data-theme="dark"] .theme-toggle .theme-toggle__sun {
	display: block;
}

.theme-toggle .theme-toggle__sun,
:root[data-theme="dark"] .theme-toggle .theme-toggle__moon {
	display: none;
}

.theme-toggle--labelled {
	display: inline-flex;
	gap: var(--space-3);
	width: 100%;
	justify-content: flex-start;
	padding: 0 var(--space-4);
	border: 1px solid var(--border);
	background: var(--surface-2);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Bottom navigation (mobile)
   -------------------------------------------------------------------------- */

.bottom-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: var(--header-bg);
	border-top: 1px solid var(--border);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
}

.bottom-nav__list {
	display: grid;
	grid-template-columns: repeat(var(--bottom-nav-items, 5), 1fr);
	height: var(--bottom-nav-height);
	max-width: 560px;
	margin-inline: auto;
	list-style: none;
}

.bottom-nav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	height: 100%;
	color: var(--text-muted);
	font-size: 0.6875rem;
	font-weight: 600;
}

.bottom-nav__item .icon {
	width: 24px;
	height: 24px;
}

.bottom-nav__item:hover {
	color: var(--text);
}

.bottom-nav__item.is-active {
	color: var(--accent-text);
}

.bottom-nav__item.is-active .icon {
	color: var(--accent);
}

/* Cerca è già nella barra in basso: niente lente doppia in alto su mobile. */
@media (max-width: 1023px) {
	.has-bottom-search .site-header__actions [data-search-open] {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Dialog: menu laterale e ricerca (elemento <dialog> nativo)
   -------------------------------------------------------------------------- */

dialog {
	padding: 0;
	border: 0;
	color: var(--text);
}

dialog::backdrop {
	background: var(--overlay);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

body.has-dialog {
	overflow: hidden;
}

.drawer {
	margin: 0;
	width: min(86vw, 360px);
	max-width: none;
	height: 100dvh;
	max-height: none;
	background: var(--surface-1);
	border-right: 1px solid var(--border);
}

.drawer[open] {
	animation: popday-slide-in var(--duration) var(--ease);
}

.drawer__panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--space-3) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
}

.drawer__head,
.search-dialog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-3);
}

.drawer__title,
.search-dialog__title {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 700;
}

.drawer-nav__list {
	list-style: none;
}

.drawer-nav__list a {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 0 var(--space-3);
	border-radius: var(--radius-sm);
	font-size: var(--text-lg);
	font-weight: 600;
}

.drawer-nav__list a:hover {
	background: var(--surface-2);
}

.drawer-nav__list .current-menu-item > a,
.drawer-nav__list a[aria-current="page"] {
	color: var(--accent-text);
	background: var(--surface-2);
}

.drawer__footer {
	margin-top: auto;
	padding-top: var(--space-4);
}

.drawer__social {
	margin-bottom: var(--space-4);
}

.search-dialog {
	box-sizing: border-box;
	margin: 0 auto;
	width: 100%;
	overflow-x: hidden;
	max-width: 760px;
	max-height: 100dvh;
	background: var(--surface-1);
	border: 1px solid var(--border);
	border-top: 0;
	border-radius: 0 0 var(--radius-xl) var(--radius-xl);
	box-shadow: var(--shadow-md);
}

.search-dialog[open] {
	animation: popday-drop-in var(--duration) var(--ease);
}

.search-dialog__panel {
	display: grid;
	/* Colonna bloccata alla larghezza del dialog: campo e chip non escono dallo schermo. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
	padding-top: var(--space-3);
	padding-bottom: var(--space-5);
}

@keyframes popday-slide-in {
	from {
		transform: translateX(-16px);
		opacity: 0;
	}
}

@keyframes popday-drop-in {
	from {
		transform: translateY(-12px);
		opacity: 0;
	}
}

/* --------------------------------------------------------------------------
   Campo di ricerca e suggerimenti
   -------------------------------------------------------------------------- */

.search-form {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: var(--space-1);
	padding-left: var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface-2);
	transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.search-form:focus-within {
	border-color: var(--accent);
	box-shadow: var(--glow);
}

.search-form__icon {
	color: var(--text-muted);
}

.search-form__input {
	flex: 1;
	/* Larghezza 0 + flex: il campo non impone la sua larghezza "naturale" ai contenitori stretti. */
	width: 0;
	min-width: 0;
	height: var(--tap);
	padding: 0 var(--space-3);
	border: 0;
	background: transparent;
	/* 16px minimo: evita lo zoom automatico di iOS. */
	font-size: var(--text-md);
	outline: none;
}

.search-form__input::placeholder {
	color: var(--text-muted);
}

.search-form__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.search-form__submit {
	display: grid;
	place-items: center;
	width: var(--tap);
	height: var(--tap);
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--accent-fill);
	color: var(--on-accent);
}

.search-form__submit:hover {
	background: var(--accent-fill-hover);
}

/* Ricerca istantanea: contenitore di campo e tendina. */
.search-box {
	position: relative;
}

.search-suggestions {
	display: grid;
	gap: var(--space-2);
	max-height: min(70vh, 560px);
	margin-top: var(--space-2);
	padding: var(--space-2);
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface-1);
	box-shadow: var(--shadow-md);
}

.search-suggestions[hidden] {
	display: none;
}

/* In homepage la tendina si sovrappone ai contenuti sotto il campo. */
.search-box--float .search-suggestions {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 30;
}

.search-suggestions__group {
	display: grid;
	gap: 2px;
}

.search-suggestions__group + .search-suggestions__group {
	padding-top: var(--space-2);
	border-top: 1px solid var(--border);
}

.search-suggestions__label {
	padding: var(--space-1) var(--space-2);
	color: var(--text-muted);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.search-suggestions__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--tap);
	padding: var(--space-2);
	border-radius: var(--radius-sm);
	color: var(--text);
	text-decoration: none;
}

.search-suggestions__item:hover,
.search-suggestions__item.is-active {
	background: var(--surface-2);
}

.search-suggestions__item.is-active {
	box-shadow: inset 3px 0 0 var(--accent);
}

.search-suggestions__cover,
.search-suggestions__thumb {
	flex: none;
	border-radius: var(--radius-xs);
	background: var(--surface-2);
	object-fit: cover;
}

.search-suggestions__cover {
	width: 40px;
	height: 53px;
}

.search-suggestions__thumb {
	width: 64px;
	height: 40px;
}

.search-suggestions__body {
	display: grid;
	flex: 1;
	gap: 2px;
	min-width: 0;
}

.search-suggestions__title {
	display: -webkit-box;
	overflow: hidden;
	font-weight: 700;
	line-height: 1.3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.search-suggestions__title mark {
	padding: 0 1px;
	border-radius: 2px;
	background: rgba(var(--accent-rgb, 255, 10, 122), 0.18);
	color: inherit;
}

.search-suggestions__type {
	color: var(--accent-text);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.search-suggestions__meta {
	overflow: hidden;
	color: var(--text-muted);
	font-size: var(--text-xs);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.search-suggestions .search-suggestions__score {
	position: static;
	flex: none;
	width: 36px;
	height: 36px;
	border-width: 2px;
	box-shadow: none;
	color: var(--band);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 700;
}

.search-suggestions__more {
	justify-content: center;
	border-top: 1px solid var(--border);
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	color: var(--accent-text);
	font-size: var(--text-sm);
	font-weight: 700;
}

.search-suggestions__empty {
	padding: var(--space-2);
	color: var(--text-muted);
	font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   Intestazioni di sezione
   -------------------------------------------------------------------------- */

.section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}

.section-head__title {
	font-size: var(--text-xl);
}

.section-head__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-height: var(--tap);
	color: var(--accent-text);
	font-size: var(--text-sm);
	font-weight: 600;
	white-space: nowrap;
}

.section-head__more .icon {
	width: 16px;
	height: 16px;
}

.section-head__more:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Titoli piccoli delle card: Inter è più leggibile di Poppins sotto i 17px. */
.card__title,
.row-card__title,
.game-card__title,
.result-card__title {
	font-family: var(--font-body);
	font-weight: 700;
	letter-spacing: -0.005em;
}

/* --------------------------------------------------------------------------
   Card hero
   -------------------------------------------------------------------------- */

.hero-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	background: var(--surface-2);
	color: #FFFFFF;
}

.hero-card--main {
	aspect-ratio: 4 / 4.4;
	border-radius: var(--radius-xl);
}

.hero-card__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.hero-card__media img,
.hero-card__media .media-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--ease);
}

.hero-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--media-scrim);
}

.hero-card:hover .hero-card__media img {
	transform: scale(1.03);
}

.hero-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
}

.hero-card__title {
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.hero-card--main .hero-card__body {
	gap: var(--space-3);
	padding: var(--space-5);
}

.hero-card--main .hero-card__title {
	font-size: var(--text-2xl);
	line-height: var(--leading-tight);
}

.hero-card__excerpt {
	max-width: 52ch;
	color: rgba(255, 255, 255, 0.86);
	font-size: var(--text-sm);
	line-height: 1.5;
}

.hero-card__cta {
	align-self: flex-start;
	margin-top: var(--space-1);
}

.meta--on-media {
	color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------------------------
   Card verticale / recensione
   -------------------------------------------------------------------------- */

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	background: var(--card-bg);
	box-shadow: var(--shadow-sm);
	transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.card:hover {
	border-color: var(--accent);
}

.card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--surface-3);
}

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

.card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
}

.card__title {
	font-size: var(--text-md);
	line-height: var(--leading-snug);
}

/* --------------------------------------------------------------------------
   Riga (card orizzontale app-like)
   -------------------------------------------------------------------------- */

.row-card {
	position: relative;
	display: grid;
	grid-template-columns: 76px 1fr auto;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2);
	padding-right: var(--space-3);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	background: var(--card-bg);
	transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.row-card:hover {
	border-color: var(--accent);
}

.row-card__media {
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--surface-3);
}

.row-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.row-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.row-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
}

.row-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--text-muted);
	font-size: var(--text-xs);
}

.row-card__chevron {
	width: 18px;
	height: 18px;
	color: var(--text-muted);
}

.row-card__action {
	position: relative;
	z-index: 2;
}

/* --------------------------------------------------------------------------
   Card gioco e franchise
   -------------------------------------------------------------------------- */

.game-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	background: var(--card-bg);
	transition: border-color var(--duration) var(--ease);
}

.game-card:hover {
	border-color: var(--accent);
}

.game-card__media {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--surface-3);
}

.game-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--ease);
}

.game-card:hover .game-card__media img {
	transform: scale(1.04);
}

.game-card__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--space-3);
}

.game-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
}

.cluster-card {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: var(--space-4);
	align-items: start;
	padding: var(--space-4);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	background: var(--card-bg);
}

.cluster-card__media {
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--surface-3);
}

.cluster-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cluster-card__body {
	display: grid;
	gap: var(--space-3);
}

.cluster-card__title {
	font-size: var(--text-lg);
}

.cluster-card__title a:hover {
	color: var(--accent-text);
}

.cluster-card__games {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
}

/* --------------------------------------------------------------------------
   Risultato di ricerca
   -------------------------------------------------------------------------- */

.result-card {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: var(--space-4);
	padding: var(--space-3);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	background: var(--card-bg);
}

.result-card__media {
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--surface-3);
}

.result-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.result-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}

.result-card__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}

.result-card__game {
	color: var(--accent-text);
	font-size: var(--text-xs);
	font-weight: 700;
}

.result-card__title {
	font-size: var(--text-md);
	line-height: var(--leading-snug);
}

.result-card__title a {
	display: inline-block;
	padding-block: 3px;
}

.result-card__title a:hover {
	color: var(--accent-text);
}

.result-card__excerpt {
	color: var(--text-muted);
	font-size: var(--text-sm);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Contenitori: rail, griglie, feed
   -------------------------------------------------------------------------- */

.rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 42%;
	gap: var(--space-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	margin-inline: calc(var(--gutter) * -1);
	padding: 0 var(--gutter) var(--space-1);
	scroll-padding-inline: var(--gutter);
}

.rail::-webkit-scrollbar {
	display: none;
}

.rail > * {
	scroll-snap-align: start;
}

.grid {
	display: grid;
	gap: var(--space-4);
}

.grid--games {
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
}

.feed,
.results {
	display: grid;
	gap: var(--space-3);
}

.ranked {
	display: grid;
	gap: var(--space-3);
	list-style: none;
	counter-reset: ranked;
}

.ranked__item {
	display: grid;
	grid-template-columns: 32px 1fr;
	align-items: center;
	gap: var(--space-2);
	counter-increment: ranked;
}

.ranked__item::before {
	content: counter(ranked);
	color: var(--accent);
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: 700;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Tab sticky
   -------------------------------------------------------------------------- */

.tabs {
	position: sticky;
	top: var(--header-height);
	z-index: 40;
	margin-inline: calc(var(--gutter) * -1);
	margin-bottom: var(--space-5);
	padding-inline: var(--gutter);
	background: var(--bg);
	border-bottom: 1px solid var(--border);
}

/* Solo dove la barra admin resta ferma: sotto i 600px scorre via (vedi l'header). */
@media (min-width: 601px) {
	.admin-bar .tabs {
		top: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 0px));
	}
}

.tabs__list {
	display: flex;
	gap: var(--space-1);
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.tabs__list::-webkit-scrollbar {
	display: none;
}

.tabs__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding: 0 var(--space-3);
	color: var(--text-muted);
	font-size: var(--text-sm);
	font-weight: 600;
	white-space: nowrap;
}

.tabs__item:hover {
	color: var(--text);
}

.tabs__item.is-active {
	color: var(--accent-text);
}

.tabs__item.is-active::after {
	content: "";
	position: absolute;
	left: var(--space-3);
	right: var(--space-3);
	bottom: -1px;
	height: 2px;
	border-radius: 2px;
	background: var(--accent);
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	list-style: none;
	color: var(--text-muted);
	font-size: var(--text-xs);
}

.breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-width: 0;
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: "›";
	opacity: 0.7;
}

.breadcrumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

.breadcrumbs a:hover {
	color: var(--accent-text);
}

.breadcrumbs [aria-current] {
	overflow: hidden;
	max-width: 32ch;
	color: var(--text);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Articolo: meta autore, risposta rapida, indice, FAQ, fonti, voto
   -------------------------------------------------------------------------- */

.author-meta {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.author-meta__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.author-meta__text {
	display: grid;
	flex: 1;
	gap: 2px;
	font-size: var(--text-sm);
}

.author-meta__by a {
	font-weight: 700;
}

.author-meta__by a:hover {
	color: var(--accent-text);
}

/* Azioni accanto all'autore: commenti (tondo con bollino), condividi, preferiti. */
.author-meta__actions {
	display: flex;
	gap: var(--space-2);
	align-items: center;
}

.comment-count,
.share-btn {
	position: relative;
	border: 1px solid var(--border);
	border-radius: 50%;
	color: var(--text);
}

.comment-count:hover,
.share-btn:hover {
	border-color: var(--accent);
	color: var(--accent-text);
}

.count-bubble {
	position: absolute;
	top: -4px;
	right: -4px;
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border: 2px solid var(--bg);
	border-radius: 999px;
	background: var(--accent-fill);
	color: var(--on-accent);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.post-date--updated {
	color: var(--accent-text);
	font-weight: 600;
}

.favorite-btn {
	border: 1px solid var(--border);
}

.favorite-btn[aria-pressed="true"] {
	border-color: var(--accent);
	color: var(--accent);
}

.favorite-btn[aria-pressed="true"] .icon {
	fill: currentColor;
}

.favorite-btn--follow {
	flex-shrink: 0;
	border-color: var(--accent);
	color: var(--accent-text);
}

.favorite-btn--follow[aria-pressed="true"] {
	background: var(--accent-fill);
	border-color: var(--accent-fill);
	color: var(--on-accent);
}

.quick-answer {
	margin: var(--space-5) 0;
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--quick-border);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius-md);
	background: var(--quick-bg);
}

.quick-answer__label {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
	color: var(--accent-text);
	font-family: var(--font-heading);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.quick-answer__label .icon {
	width: 16px;
	height: 16px;
}

.quick-answer__text {
	font-size: var(--text-md);
	line-height: 1.6;
}

.quick-answer__text p + p {
	margin-top: var(--space-2);
}

.toc {
	margin: var(--space-5) 0;
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	background: var(--surface-1);
}

.toc__title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 52px;
	padding: 0 var(--space-4);
	font-family: var(--font-heading);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.toc__title::-webkit-details-marker {
	display: none;
}

.toc__title::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--duration) var(--ease);
}

.toc[open] .toc__title::after {
	transform: rotate(-135deg);
}

.toc__list {
	display: grid;
	padding: 0 var(--space-2) var(--space-3);
	list-style: none;
	counter-reset: toc;
}

.toc__list > li:not(.toc__sub) {
	counter-increment: toc;
}

.toc__list a {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	min-height: 40px;
	padding: var(--space-2);
	border-radius: var(--radius-xs);
	font-size: var(--text-sm);
	line-height: 1.4;
}

.toc__list > li:not(.toc__sub) > a::before {
	content: counter(toc);
	display: inline-grid;
	flex-shrink: 0;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: var(--radius-xs);
	background: var(--surface-3);
	font-size: var(--text-xs);
	font-weight: 700;
}

.toc__sub a {
	padding-left: 44px;
	color: var(--text-muted);
}

.toc__list a:hover,
.toc__list a.is-active {
	background: var(--surface-2);
	color: var(--accent-text);
}

.faq__item {
	border-bottom: 1px solid var(--border);
}

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: 56px;
	padding: var(--space-3) 0;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__question::after {
	content: "+";
	color: var(--accent);
	font-size: var(--text-xl);
	line-height: 1;
}

.faq__item[open] .faq__question::after {
	content: "−";
}

.faq__answer {
	padding-bottom: var(--space-4);
	color: var(--text-muted);
}

.sources__title {
	font-size: var(--text-md) !important;
}

.sources__list {
	display: grid;
	gap: var(--space-2);
	padding-left: var(--space-5);
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.sources__list a {
	color: var(--accent-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Colore della fascia di voto, condiviso da voto, badge e dicitura. */
.score--top,
.score-badge--top,
.card__band--top {
	--band: var(--score-top);
}

.score--high,
.score-badge--high,
.card__band--high {
	--band: var(--score-high);
}

.score--good,
.score-badge--good,
.card__band--good {
	--band: var(--score-good);
}

.score--mid,
.score-badge--mid,
.card__band--mid {
	--band: var(--score-mid);
}

.score--low,
.score-badge--low,
.card__band--low {
	--band: var(--score-low);
}

.score {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin: var(--space-5) 0;
	padding: var(--space-3) var(--space-5);
	border: 1px solid var(--card-border);
	border-left: 6px solid var(--band, var(--accent));
	border-radius: var(--radius-md);
	background: var(--surface-1);
	color: var(--text);
}

.score__value {
	color: var(--band, var(--accent-text));
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: 700;
	line-height: 1;
}

.score__label {
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Badge del voto sulle card: fondo pieno per restare leggibile sulla foto. */
.score-badge {
	position: absolute;
	right: var(--space-3);
	bottom: var(--space-3);
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0;
	border: 3px solid var(--band, var(--accent));
	border-radius: 50%;
	background: var(--surface-1);
	box-shadow: var(--shadow-md);
}

.score-badge__value {
	color: var(--band, var(--accent-text));
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: 1;
}

.card__kicker {
	color: var(--accent-text);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--text-muted);
	font-size: var(--text-sm);
	line-height: 1.5;
}

.card__band {
	color: var(--band);
	font-weight: 700;
}

.hub-link {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--quick-border);
	border-radius: var(--radius-md);
	background: var(--quick-bg);
}

.hub-link:hover {
	border-color: var(--accent);
}

.hub-link__media {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: var(--radius-sm);
}

.hub-link__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hub-link__text {
	display: grid;
	flex: 1;
	gap: 2px;
}

.hub-link__kicker {
	color: var(--accent-text);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hub-link__title {
	font-family: var(--font-heading);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Hub gioco: piattaforme e voto
   -------------------------------------------------------------------------- */

.platforms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
}

.platforms__item {
	padding: 4px var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-xs);
	background: var(--surface-2);
	font-size: var(--text-xs);
	font-weight: 700;
}

.rating {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 100%;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: 600;
}

.rating__stars {
	display: inline-flex;
	gap: 2px;
	color: var(--border);
}

.rating__stars .icon {
	width: 16px;
	height: 16px;
	fill: currentColor;
	stroke: none;
}

.rating__stars[data-value="1"] .icon:nth-child(-n + 1),
.rating__stars[data-value="2"] .icon:nth-child(-n + 2),
.rating__stars[data-value="3"] .icon:nth-child(-n + 3),
.rating__stars[data-value="4"] .icon:nth-child(-n + 4),
.rating__stars[data-value="5"] .icon:nth-child(-n + 5) {
	color: #FFB547;
}

/* --------------------------------------------------------------------------
   Skeleton, stato vuoto, paginazione
   -------------------------------------------------------------------------- */

.skeleton-list {
	display: grid;
	gap: var(--space-3);
}

.skeleton-row {
	display: grid;
	grid-template-columns: 76px 1fr;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
}

.skeleton-row__lines {
	display: grid;
	gap: var(--space-2);
}

.skeleton {
	display: block;
	border-radius: var(--radius-xs);
	background: linear-gradient(90deg, var(--skeleton) 25%, var(--skeleton-shine) 50%, var(--skeleton) 75%) 0 0 / 200% 100%;
	animation: popday-shimmer 1.4s linear infinite;
}

.skeleton--thumb {
	aspect-ratio: 1;
	border-radius: var(--radius-sm);
}

.skeleton--line {
	height: 12px;
}

.skeleton--short {
	width: 55%;
}

@keyframes popday-shimmer {
	to {
		background-position: -200% 0;
	}
}

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

.empty-state {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: var(--space-4);
	max-width: 520px;
	margin: var(--space-6) auto;
	padding: var(--space-6) var(--space-5);
	border: 1px dashed var(--border);
	border-radius: var(--radius-xl);
	text-align: center;
}

.empty-state__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--accent);
}

.empty-state__icon .icon {
	width: 28px;
	height: 28px;
}

.empty-state__title {
	font-size: var(--text-xl);
}

.empty-state__text {
	color: var(--text-muted);
}

.empty-state .search-form {
	width: 100%;
}

.pagination {
	margin-top: var(--space-6);
}

.pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	list-style: none;
}

.pagination a.page-numbers,
.pagination span.page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: var(--tap);
	height: var(--tap);
	padding: 0 var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface-1);
	font-weight: 600;
}

.pagination a.page-numbers:hover {
	border-color: var(--accent);
}

.pagination .current {
	border-color: var(--accent-fill) !important;
	background: var(--accent-fill) !important;
	color: var(--on-accent);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
	margin-top: var(--space-6);
	padding: var(--space-7) 0 var(--space-5);
	border-top: 1px solid var(--border);
	background: var(--bg-deep);
}

.site-footer__top {
	display: grid;
	gap: var(--space-6);
}

/* Logo dell'editore nel footer: la variante giusta per il tema attivo. */
.footer-brand {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
}

.footer-network {
	display: grid;
	gap: var(--space-1);
	justify-items: start;
}

.footer-network__label {
	color: var(--text-muted);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.footer-brand__logo--dark,
:root[data-theme="dark"] .footer-brand__logo--light {
	display: none;
}

:root[data-theme="dark"] .footer-brand__logo--dark {
	display: block;
}

.site-footer__brand {
	display: grid;
	gap: var(--space-3);
	justify-items: start;
	max-width: 340px;
}

.site-footer__tagline {
	color: var(--text-muted);
	font-size: var(--text-sm);
}

/* Colonne: due per riga su mobile, affiancate da tablet in su. */
.site-footer__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5) var(--space-4);
}

.footer-col__title {
	margin-bottom: var(--space-2);
	color: var(--text);
	font-size: var(--text-sm);
	letter-spacing: 0.02em;
}

.footer-col__list {
	list-style: none;
}

.footer-col__list a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.footer-col__list a:hover,
.site-footer__cookie:hover {
	color: var(--accent-text);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-5);
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	border-top: 1px solid var(--border);
}

.site-footer__copy,
.site-footer__note {
	color: var(--text-muted);
	font-size: var(--text-xs);
}

.site-footer__note {
	flex-basis: 100%;
	max-width: 80ch;
}

.site-footer__cookie {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	color: var(--text-muted);
	font-size: var(--text-xs);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Social
   -------------------------------------------------------------------------- */

.icon--brand {
	fill: currentColor;
	stroke: none;
}

.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
}

.social-links__item {
	display: grid;
	place-items: center;
	width: var(--tap);
	height: var(--tap);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface-1);
	color: var(--text-muted);
	transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.social-links__item:hover {
	border-color: var(--accent);
	color: var(--accent-text);
}

.social-links__item .icon {
	width: 18px;
	height: 18px;
}

.social-links--large .social-links__item {
	width: 52px;
	height: 52px;
}

.social-links--large .icon {
	width: 22px;
	height: 22px;
}

/* --------------------------------------------------------------------------
   Card informativa (Chi siamo, Contatti)
   -------------------------------------------------------------------------- */

.info-card {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	background: var(--card-bg);
	transition: border-color var(--duration) var(--ease);
}

.info-card:hover {
	border-color: var(--accent);
}

.info-card__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	color: var(--accent);
}

.info-card__body {
	display: grid;
	flex: 1;
	gap: 2px;
	min-width: 0;
}

.info-card__title {
	font-family: var(--font-heading);
	font-weight: 700;
}

.info-card__text {
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.info-card__cta {
	margin-top: var(--space-1);
	overflow: hidden;
	color: var(--accent-text);
	font-size: var(--text-sm);
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.info-card > .icon-chevron {
	color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Redazione
   -------------------------------------------------------------------------- */

.member-card {
	position: relative;
	display: flex;
	gap: var(--space-4);
	padding: var(--space-4);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	background: var(--card-bg);
	transition: border-color var(--duration) var(--ease);
}

.member-card:hover {
	border-color: var(--accent);
}

.member-card__avatar {
	width: 72px;
	height: 72px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
}

.member-card__body {
	display: grid;
	align-content: start;
	gap: var(--space-1);
	min-width: 0;
}

.member-card__name {
	font-size: var(--text-lg);
}

.member-card__job {
	color: var(--accent-text);
	font-size: var(--text-sm);
	font-weight: 600;
}

.member-card__bio {
	color: var(--text-muted);
	font-size: var(--text-sm);
	line-height: 1.5;
}

.stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
	list-style: none;
}

.stats__item {
	display: grid;
	gap: var(--space-1);
	padding: var(--space-4);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	background: var(--card-bg);
}

.stats__value {
	color: var(--accent-text);
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: 700;
	line-height: 1;
}

.stats__label {
	color: var(--text-muted);
	font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   Box autore (fine articolo)
   -------------------------------------------------------------------------- */

.author-box {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--space-3) var(--space-4);
	align-items: center;
	margin-top: var(--space-5);
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	background: var(--surface-1);
}

.author-box__avatar {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: 50%;
}

.author-box__body {
	display: grid;
	flex: 1;
	gap: 2px;
	min-width: 0;
}

/* Freccia verso la pagina dell'autore. */
.author-box__more {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--border);
	border-radius: 50%;
	color: var(--text-muted);
}

.author-box__more:hover {
	border-color: var(--accent);
	color: var(--accent-text);
}

.author-box__more .icon {
	width: 18px;
	height: 18px;
}

.author-box__kicker {
	color: var(--text-muted);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.author-box__name {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 700;
}

.author-box__name a:hover {
	color: var(--accent-text);
}

.author-box__job {
	color: var(--accent-text);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
}

.author-box__bio {
	grid-column: 1 / -1;
	margin: 0;
	padding-top: var(--space-3);
	border-top: 1px solid var(--border);
	color: var(--text-muted);
	font-size: var(--text-sm);
	line-height: 1.6;
}

/* Da tablet la biografia sta sotto il nome, allineata al testo. */
@media (min-width: 768px) {
	.author-box__bio {
		grid-column: 2 / -1;
		padding-top: 0;
		border-top: 0;
	}
}

/* Dato dell'editore mancante: visibile solo a chi può compilarlo. */
.popday-missing {
	padding: 0 var(--space-1);
	border-radius: 4px;
	background: #FFF3B0;
	color: #5C4400;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Pulsanti di acquisto (affiliazioni)
   -------------------------------------------------------------------------- */

.buy {
	display: grid;
	gap: var(--space-2);
}

.buy__title {
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 700;
}

.buy__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
}

.buy__btn {
	position: relative;
	z-index: 2; /* sopra lo stretched-link delle card */
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--tap);
	padding: 0 var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	color: var(--text);
	font-size: var(--text-sm);
	font-weight: 700;
	transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.buy__btn:hover {
	border-color: var(--accent);
}

.buy__btn .icon {
	width: 18px;
	height: 18px;
	color: var(--accent);
}

.buy__note {
	color: var(--text-muted);
	font-size: var(--text-xs);
	line-height: 1.5;
}

.buy__note a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Versione compatta nelle card: pulsanti piccoli, uno per riga se serve. */
.buy--compact {
	margin-top: var(--space-2);
}

.buy--compact .buy__list {
	gap: var(--space-1);
}

.buy--compact .buy__btn {
	min-height: 34px;
	padding: 0 var(--space-3);
	font-size: var(--text-xs);
}

.buy--compact .buy__btn .icon {
	width: 14px;
	height: 14px;
}

/* --------------------------------------------------------------------------
   Scheda del gioco e "Leggi anche" dentro l'articolo
   -------------------------------------------------------------------------- */

.game-box {
	display: grid;
	gap: var(--space-4);
	margin: var(--space-6) 0;
	padding: var(--space-4);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(130% 120% at 100% 0%, rgba(var(--accent-rgb, 255, 10, 122), 0.08), transparent 55%),
		var(--surface-1);
	font-size: var(--text-md);
	line-height: 1.5;
}

.entry-content .game-box a {
	color: inherit;
	text-decoration: none;
}

/* Riga in alto: cover piccola e dati, come una scheda da app. */
.game-box__head {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr);
	gap: var(--space-3) var(--space-4);
	align-items: center;
}

.game-box__cover {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--surface-3);
	box-shadow: var(--shadow-sm);
}

.game-box__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0 !important;
}

.game-box__id {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.game-box__id > *,
.game-box > * {
	margin: 0 !important;
}

.game-box__kicker {
	color: var(--accent-text);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.game-box__title {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: var(--leading-tight);
}

.game-box__meta,
.game-box__platforms {
	color: var(--text-muted);
	font-size: var(--text-xs);
	line-height: 1.45;
}

.game-box__platforms {
	color: var(--text);
	font-weight: 600;
}

.entry-content .game-box__title a:hover {
	color: var(--accent-text);
}

/* Azioni: Segui e "Guide e news" affiancati, stessa altezza. */
.game-box__actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--space-2);
}

.game-box__actions .btn {
	justify-content: center;
	width: 100%;
	min-height: 40px;
}

.entry-content .game-box .game-box__hub {
	color: var(--on-accent);
}

.game-box__hub .icon {
	width: 16px;
	height: 16px;
}

.platforms--sm .platforms__item {
	padding: 2px var(--space-2);
}

.game-box .buy {
	padding-top: var(--space-3);
	border-top: 1px solid var(--border);
}

.game-box .buy__title {
	color: var(--text-muted);
	font-size: var(--text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Dentro l'articolo gli stili degli elenchi del testo non devono toccare i pulsanti. */
.entry-content .game-box .buy__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry-content .game-box .buy__list > li {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
}

.entry-content .game-box .buy__list > li::before,
.entry-content .game-box .buy__list > li::marker {
	content: none;
}

.game-box .buy__btn {
	justify-content: center;
	width: 100%;
	white-space: nowrap;
}

.inline-related {
	margin: var(--space-6) 0;
	padding: var(--space-3) var(--space-3) var(--space-2);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	background: var(--surface-1);
}

.inline-related__title {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	margin: 0 0 var(--space-2) var(--space-1) !important;
	color: var(--accent-text);
	font-family: var(--font-heading);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Lineetta rosa prima del titoletto. */
.inline-related__title::before {
	width: 14px;
	height: 3px;
	border-radius: 2px;
	background: var(--accent);
	content: "";
}

.entry-content .inline-related__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry-content .inline-related__list li {
	margin: 0;
	padding: 0;
}

.entry-content .inline-related__list li + li {
	border-top: 1px solid var(--border);
}

.entry-content .inline-related__list li::marker,
.entry-content .inline-related__list li::before {
	content: none;
}

/* Ogni articolo: miniatura, tipo sopra il titolo a tutta larghezza, freccia. */
.entry-content .inline-related__item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: var(--space-3);
	align-items: center;
	padding: var(--space-2) var(--space-1);
	border-radius: var(--radius-sm);
	color: var(--text);
	text-decoration: none;
	transition: background-color var(--duration) var(--ease);
}

.entry-content .inline-related__item:hover {
	background: var(--surface-2);
}

.inline-related__thumb {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: linear-gradient(135deg, var(--surface-3), var(--surface-2));
}

.entry-content .inline-related__thumb img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	border-radius: 0;
}

.inline-related__text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.inline-related__type {
	color: var(--accent-text);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.inline-related__name {
	display: -webkit-box;
	overflow: hidden;
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 700;
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.entry-content .inline-related__item:hover .inline-related__name {
	color: var(--accent-text);
}

.inline-related__go {
	width: 18px;
	height: 18px;
	color: var(--text-muted);
}

@media (min-width: 768px) {
	.entry-content .inline-related__item {
		grid-template-columns: 76px minmax(0, 1fr) auto;
	}

	.inline-related__name {
		font-size: var(--text-md);
	}
}

.hub-link__meta {
	color: var(--text-muted);
	font-size: var(--text-xs);
}

.related-cluster__all {
	margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   Posizioni pubblicitarie
   -------------------------------------------------------------------------- */

.ad-slot {
	--ad-min: var(--ad-min-m, 0px);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: var(--ad-min);
	margin: var(--space-6) auto;
	max-width: 100%;
	overflow: hidden;
	text-align: center;
}

.feed > .ad-slot,
.grid > .ad-slot,
.results > .ad-slot {
	grid-column: 1 / -1;
	margin: 0;
}

.ad-wrap > .ad-slot {
	margin-top: var(--space-4);
	margin-bottom: var(--space-4);
}

.ad-slot__label {
	margin-bottom: var(--space-1);
	color: var(--text-muted);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Le posizioni per un solo dispositivo non occupano spazio sull'altro. */
.ad-slot--desktop {
	display: none;
}

.pd-place {
	--ad-min: var(--ad-min-m, 0px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: max(var(--ad-min), 96px);
	margin: var(--space-6) auto;
	border: 2px dashed var(--accent);
	border-radius: var(--radius-md);
	background: repeating-linear-gradient(135deg, var(--pink-tint), var(--pink-tint) 12px, transparent 12px, transparent 24px);
	text-align: center;
}

:root[data-theme="dark"] .pd-place {
	background: repeating-linear-gradient(135deg, rgba(var(--accent-rgb, 255, 10, 122), 0.12), rgba(var(--accent-rgb, 255, 10, 122), 0.12) 12px, transparent 12px, transparent 24px);
}

.feed > .pd-place,
.grid > .pd-place,
.results > .pd-place {
	grid-column: 1 / -1;
	margin: 0;
}

.pd-place-wrap > .pd-place {
	margin-top: var(--space-4);
	margin-bottom: var(--space-4);
}

.pd-place__info {
	display: grid;
	gap: 2px;
	padding: var(--space-3);
	color: var(--text);
	font-size: var(--text-sm);
}

.pd-place__info strong {
	color: var(--accent-text);
}

/* --------------------------------------------------------------------------
   Filtri della pagina Recensioni
   -------------------------------------------------------------------------- */

.review-filters {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3);
	margin: var(--space-6) 0 var(--space-4);
	padding: var(--space-4);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	background: var(--surface-1);
}

.review-filters__search {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 48px;
	padding: 0 var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
}

.review-filters__bar {
	display: flex;
	gap: var(--space-2);
	align-items: stretch;
}

.review-filters__bar .review-filters__search {
	flex: 1;
	min-width: 0;
}

.review-filters__toggle {
	display: none;
	flex: none;
	white-space: nowrap;
	gap: 6px;
	align-items: center;
	padding: 0 var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	color: var(--text);
	font-weight: 700;
	cursor: pointer;
}

.review-filters__toggle[aria-expanded="true"] {
	border-color: var(--accent);
	color: var(--accent-text);
}

.review-filters__badge {
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--accent-fill);
	color: var(--on-accent);
	font-size: var(--text-xs);
}

.review-filters__row.is-collapsed {
	display: none;
}

@media (max-width: 767px) {
	.review-filters__toggle {
		display: inline-flex;
	}
}

.review-filters__search:focus-within {
	border-color: var(--accent);
}

.review-filters__search .icon {
	color: var(--text-muted);
}

.review-filters__search input {
	flex: 1;
	min-width: 0;
	height: 46px;
	border: 0;
	background: transparent;
	font-size: var(--text-md);
	outline: none;
}

.review-filters__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
	align-items: end;
}

.review-filters__field {
	display: grid;
	gap: var(--space-1);
	min-width: 0;
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--text-muted);
}

.review-filters__field select {
	width: 100%;
	min-height: var(--tap);
	padding: 0 var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	color: var(--text);
	/* 16px su mobile: sotto, iOS ingrandisce la pagina al tocco. */
	font-size: var(--text-md);
	font-weight: 600;
}

.review-filters__field select:focus-visible {
	border-color: var(--accent);
}

.review-filters__actions {
	display: flex;
	gap: var(--space-2);
	grid-column: 1 / -1;
}

.review-filters__actions .btn {
	flex: 1;
}

.review-results__count {
	margin-bottom: var(--space-4);
	color: var(--text-muted);
	font-size: var(--text-sm);
	font-weight: 600;
}

.reviews-top {
	margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   Pagina Guide
   -------------------------------------------------------------------------- */

.guide-topics {
	margin-top: var(--space-4);
}

.chip__count {
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--text-muted);
	font-size: var(--text-xs);
	font-weight: 700;
}

/* Guide per gioco: scheda del gioco con le ultime guide. */
.guide-hubs {
	margin-top: var(--space-5);
}

/* Dopo "Guide per gioco" l'elenco completo riparte con un suo titolo e spazio sopra. */
.guide-all {
	margin-top: var(--space-7);
	padding-top: var(--space-5);
	border-top: 1px solid var(--border);
}

.guide-all .section-head {
	margin-bottom: var(--space-2);
}

.guide-hubs__list {
	grid-auto-columns: 86%;
	align-items: stretch;
}

.guide-hub {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-4);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	background: var(--card-bg);
}

.guide-hub__head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.guide-hub__cover,
.guide-focus__cover {
	display: block;
	flex-shrink: 0;
	overflow: hidden;
	width: 56px;
	aspect-ratio: 3 / 4;
	border: 1px solid var(--card-border);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
}

.guide-hub__cover img,
.guide-hub__cover .media-placeholder,
.guide-focus__cover img,
.guide-focus__cover .media-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.guide-hub__id {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.guide-hub__name {
	margin: 0;
	overflow: hidden;
	font-size: var(--text-md);
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.guide-hub__name a {
	display: block;
	overflow: hidden;
	padding-block: 3px;
	color: var(--text);
	text-overflow: ellipsis;
}

.guide-hub__name a:hover {
	color: var(--accent-text);
}

.guide-hub__count {
	color: var(--accent-text);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.guide-hub__guides {
	display: grid;
	flex: 1;
	align-content: start;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: guide;
}

.guide-hub__guides li {
	position: relative;
	display: grid;
	gap: 2px;
	padding: var(--space-2) 0 var(--space-2) 30px;
	border-top: 1px solid var(--border);
	counter-increment: guide;
}

.guide-hub__guides li::before {
	content: counter(guide);
	position: absolute;
	top: var(--space-2);
	left: 0;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--text-muted);
	font-size: 11px;
	font-weight: 700;
}

.guide-hub__guides a {
	display: -webkit-box;
	overflow: hidden;
	color: var(--text);
	font-weight: 600;
	line-height: var(--leading-snug);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.guide-hub__guides a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.guide-hub__guides a:hover {
	color: var(--accent-text);
}

.guide-hub__guides .post-date {
	color: var(--text-muted);
	font-size: var(--text-xs);
}

.guide-hub__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--tap);
	color: var(--accent-text);
	font-size: var(--text-sm);
	font-weight: 700;
}

.guide-hub__all .icon {
	width: 16px;
	height: 16px;
	transition: transform var(--duration) var(--ease);
}

.guide-hub__all:hover .icon {
	transform: translateX(3px);
}

.guide-hubs__more {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-4);
}

.guide-hubs__more-label {
	color: var(--text-muted);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Gioco scelto: chi è e cosa è stato scritto. */
.guide-focus {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--space-4);
	margin-top: var(--space-4);
	padding: var(--space-4);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, var(--surface-2), var(--card-bg) 60%);
}

.guide-focus__cover {
	width: 72px;
}

.guide-focus__body {
	display: grid;
	gap: var(--space-2);
	align-content: start;
	min-width: 0;
}

.guide-focus__kicker {
	margin: 0;
	color: var(--accent-text);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.guide-focus__title {
	margin: 0;
	font-size: var(--text-xl);
	line-height: 1.15;
}

.guide-focus__facts {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	color: var(--text-muted);
	font-size: var(--text-sm);
	list-style: none;
}

.guide-focus__actions {
	display: flex;
	flex-wrap: wrap;
	grid-column: 1 / -1;
	gap: var(--space-2);
}

.guide-focus__actions .btn {
	flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   Hub del gioco: dati aggiuntivi (valutazioni, community, obiettivi...)
   -------------------------------------------------------------------------- */

.game-playtime .icon {
	width: 16px;
	height: 16px;
}

.game-playtime strong {
	color: var(--text);
}

.game-playtime__source {
	color: var(--text-muted);
	font-size: 0.6875rem;
	text-decoration: underline;
}


.game-data__grid {
	display: grid;
	gap: var(--space-3);
}

.game-panel {
	display: grid;
	align-content: start;
	gap: var(--space-3);
	min-width: 0;
	padding: var(--space-4);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	background: var(--card-bg);
}

.game-panel__title {
	margin: 0;
	color: var(--text-muted);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.game-ratings__list {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.game-score {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.game-score__value {
	display: inline-flex;
	flex-shrink: 0;
	align-items: baseline;
	justify-content: center;
	min-width: 72px;
	padding: 6px var(--space-2);
	border-radius: var(--radius-md);
	background: var(--surface-2);
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 700;
}

.game-score__value small {
	margin-left: 2px;
	color: var(--text-muted);
	font-size: var(--text-xs);
}

.game-score.is-editorial .game-score__value {
	background: var(--accent-fill);
	color: var(--on-accent);
}

.game-score.is-editorial .game-score__value small {
	color: inherit;
}

.game-score.is-good .game-score__value {
	background: #17702f;
	color: #fff;
}

.game-score.is-mixed .game-score__value {
	background: #f0c20a;
	color: #1d1d1d;
}

.game-score.is-bad .game-score__value {
	background: #c62828;
	color: #fff;
}

.game-score.is-good .game-score__value small,
.game-score.is-mixed .game-score__value small,
.game-score.is-bad .game-score__value small {
	color: inherit;
}

.game-score__label {
	display: grid;
	font-weight: 700;
}

.game-score__label a {
	color: var(--text);
	text-decoration: underline;
	text-decoration-color: var(--border);
}

.game-score__label small {
	color: var(--text-muted);
	font-size: var(--text-xs);
	font-weight: 400;
}

.game-ratings__platforms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	color: var(--text-muted);
	font-size: var(--text-xs);
	list-style: none;
}

.game-ratings__platforms li {
	padding: 3px var(--space-2);
	border-radius: var(--radius-xs);
	background: var(--surface-2);
}

.game-ratings__platforms strong {
	color: var(--text);
}

.game-community__total {
	margin: 0;
	color: var(--text-muted);
}

.game-community__total strong {
	color: var(--text);
	font-family: var(--font-heading);
	font-size: var(--text-xl);
}

.game-community__list {
	display: grid;
	gap: var(--space-2);
	margin: 0;
}

.game-community__row {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	align-items: center;
	gap: var(--space-3);
	font-size: var(--text-sm);
}

.game-community__row dt {
	color: var(--text-muted);
}

.game-community__row dd {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.game-community__bar {
	flex: 1;
	overflow: hidden;
	height: 6px;
	border-radius: 999px;
	background: var(--surface-2);
}

.game-community__bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--accent);
}

.game-community__row--beaten .game-community__bar span { background: #1f8a3b; }
.game-community__row--dropped .game-community__bar span { background: #c62828; }
.game-community__row--toplay .game-community__bar span { background: #7a3ff2; }

.game-stores__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.game-stores__list .icon {
	width: 14px;
	height: 14px;
	margin-left: 4px;
}

/* Trofei e obiettivi */

.game-achievements__summary {
	margin: calc(var(--space-2) * -1) 0 var(--space-3);
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.achievements {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.achievement {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	background: var(--card-bg);
}

.achievement__icon {
	display: grid;
	place-items: center;
	overflow: hidden;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	color: var(--accent);
}

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

.achievement__body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.achievement__name {
	font-weight: 700;
	line-height: 1.3;
}

.achievement__desc {
	color: var(--text-muted);
	font-size: var(--text-sm);
	line-height: 1.4;
}

.achievement__percent {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: 4px;
	color: var(--text-muted);
	font-size: var(--text-xs);
	font-weight: 700;
	white-space: nowrap;
}

.achievement__bar {
	flex: 0 1 120px;
	overflow: hidden;
	height: 5px;
	border-radius: 999px;
	background: var(--surface-2);
}

.achievement__bar span {
	display: block;
	height: 100%;
	background: var(--text-muted);
}

.achievement.is-uncommon .achievement__bar span {
	background: #1f6feb;
}

.achievement.is-rare {
	border-color: color-mix(in srgb, #d4a017 45%, var(--card-border));
}

.achievement.is-rare .achievement__bar span {
	background: #d4a017;
}

.achievement.is-rare .achievement__percent {
	color: var(--text);
}

.achievements__more {
	margin-top: var(--space-3);
}

.achievement-set + .achievement-set {
	margin-top: var(--space-6);
}

.achievement-set__title {
	margin: 0 0 var(--space-2);
	font-size: var(--text-lg);
}

.achievement-set__badge {
	display: inline-flex;
	align-items: center;
	margin-right: var(--space-2);
	padding: 2px 8px;
	border-radius: var(--radius-xs);
	background: #1b2838;
	color: #fff;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.achievement__desc.is-secret {
	font-style: italic;
}

.achievement-set__credit {
	margin: var(--space-3) 0 0;
	color: var(--text-muted);
	font-size: var(--text-xs);
}

.achievement-set__credit a {
	color: inherit;
	text-decoration: underline;
}

.achievements__more > summary {
	list-style: none;
	cursor: pointer;
}

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

.achievements__more[open] > summary {
	margin-bottom: var(--space-3);
}

/* Requisiti PC */

.game-reqs__grid {
	display: grid;
	gap: var(--space-3);
}

.game-reqs__list {
	display: grid;
	gap: var(--space-2);
	margin: 0;
}

.game-reqs__list > div {
	display: grid;
	gap: 2px;
}

.game-reqs__list dt {
	color: var(--text-muted);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.game-reqs__list dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.game-reqs__text {
	margin: 0;
	color: var(--text-muted);
	white-space: pre-line;
	overflow-wrap: anywhere;
}

/* Immagini, video, DLC */

.game-media__video {
	margin: 0 0 var(--space-4);
}

.game-media__video video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
	background: #000;
}

.game-media__video figcaption {
	margin-top: var(--space-2);
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.game-media__shots {
	grid-auto-columns: 80%;
	margin-block: 0;
	list-style: none;
}

.game-media__shots img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-md);
	object-fit: cover;
	background: var(--surface-2);
}

.game-dlc__list {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.game-dlc__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 2px var(--space-3);
	padding: var(--space-2);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	background: var(--card-bg);
}

.game-dlc__item img {
	grid-row: span 2;
	width: 96px;
	height: 54px;
	border-radius: var(--radius-sm);
	object-fit: cover;
}

.game-dlc__name {
	font-weight: 700;
	line-height: 1.3;
}

.game-dlc__date {
	color: var(--text-muted);
	font-size: var(--text-xs);
}

/* Espansioni e DLC da IGDB: schede delle espansioni, elenco chiuso degli altri DLC. */
.dlc-grid {
	display: grid;
	gap: var(--space-3);
}

.dlc-card {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	background: var(--card-bg);
	scroll-margin-top: calc(var(--header-height) + var(--space-5));
}

.dlc-card:target,
.dlc-list__item:target {
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent);
}

.dlc-card__cover {
	overflow: hidden;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-md);
	background: var(--surface-2);
}

.dlc-card__cover img,
.dlc-card__cover .media-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dlc-card__body {
	display: grid;
	align-content: start;
	gap: 6px;
	min-width: 0;
}

.dlc-card__title {
	font-family: var(--font-heading);
	font-size: var(--text-md);
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.dlc-card__when,
.dlc-list__when {
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.dlc-card__soon {
	color: var(--accent-text);
	font-weight: 700;
}

.dlc-card__posts {
	display: grid;
	gap: 6px;
	margin: var(--space-1) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-sm);
}

.dlc-card__posts li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px var(--space-2);
}

.dlc-card__posts .icon {
	width: 14px;
	height: 14px;
	color: var(--accent-text);
	align-self: center;
}

.dlc-card__posts a {
	font-weight: 600;
}

.dlc-card__posts small {
	color: var(--text-muted);
	font-size: var(--text-xs);
}

.dlc-card__hint {
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.dlc-card .favorite-btn--follow {
	justify-self: start;
}

.dlc-more {
	margin-top: var(--space-3);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	background: var(--card-bg);
}

.dlc-more > summary {
	min-height: 48px;
	padding: var(--space-3) var(--space-4);
	font-weight: 700;
	cursor: pointer;
}

.dlc-list {
	display: grid;
	margin: 0;
	padding: 0 var(--space-4) var(--space-2);
	list-style: none;
}

.dlc-list__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px var(--space-3);
	padding: var(--space-2) 0;
	border-top: 1px solid var(--border);
	border-radius: var(--radius-xs);
}

.dlc-list__name {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.dlc-list__post {
	flex-basis: 100%;
	font-size: var(--text-sm);
}

.dlc-guides {
	margin-top: var(--space-5);
}

.dlc-guides__title {
	margin-bottom: var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--text-md);
}

.game-box__dlc {
	font-size: var(--text-sm);
	font-weight: 600;
}

.release__of {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.game-data-credit {
	margin: calc(var(--space-5) * -1) 0 var(--space-6);
	color: var(--text-muted);
	font-size: var(--text-xs);
}

.game-data-credit a {
	color: inherit;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Galleria a tutto schermo
   -------------------------------------------------------------------------- */

.zoom-btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.zoom-btn img {
	display: block;
}

.zoom-btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

html.has-lightbox {
	overflow: hidden;
}

.lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: #000;
	color: #fff;
	overflow: hidden;
}

.lightbox::backdrop {
	background: #000;
}

.lightbox__bar {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: max(8px, env(safe-area-inset-top)) 8px 8px 16px;
	background: linear-gradient(rgba(0, 0, 0, 0.6), transparent);
}

.lightbox__count {
	font-size: var(--text-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.lightbox__btn {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
}

.lightbox__btn:hover,
.lightbox__btn:focus-visible {
	background: rgba(255, 255, 255, 0.24);
}

.lightbox__track {
	display: flex;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior: contain;
}

.lightbox__track::-webkit-scrollbar {
	display: none;
}

.lightbox__slide {
	display: grid;
	flex: 0 0 100%;
	place-items: center;
	height: 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.lightbox__slide img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.lightbox__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: none;
	transform: translateY(-50%);
}

.lightbox__nav--prev {
	left: 12px;
}

.lightbox__nav--next {
	right: 12px;
}

.lightbox.is-first .lightbox__nav--prev,
.lightbox.is-last .lightbox__nav--next,
.lightbox.is-single .lightbox__nav {
	visibility: hidden;
}

.lightbox__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 24px 16px max(16px, env(safe-area-inset-bottom));
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
	font-size: var(--text-sm);
	text-align: center;
}

@media (hover: hover) and (pointer: fine) {
	.lightbox__nav {
		display: grid;
	}
}

/* --------------------------------------------------------------------------
   Condivisione e lettura
   -------------------------------------------------------------------------- */

/* Fogli (condividi, indice): dal basso su mobile, al centro su desktop. */
.sheet {
	width: 100%;
	max-width: 560px;
	margin: auto auto 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
	background: var(--surface-1);
	color: var(--text);
	box-shadow: var(--shadow-md);
}

.sheet[open] {
	animation: popday-sheet-up var(--duration) var(--ease);
}

.sheet__panel {
	display: grid;
	gap: var(--space-4);
	max-height: 80dvh;
	padding: var(--space-4) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
	overflow-y: auto;
}

.sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sheet__title {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 700;
}

@keyframes popday-sheet-up {
	from {
		transform: translateY(24px);
		opacity: 0;
	}
}

.share-sheet__post {
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.share-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-3);
	list-style: none;
}

.share-grid__item {
	display: grid;
	gap: 6px;
	justify-items: center;
	width: 100%;
	padding: var(--space-2) 0;
	border: 0;
	background: none;
	color: var(--text);
	font-size: var(--text-xs);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.share-grid__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--surface-2);
	transition: transform var(--duration) var(--ease);
}

.share-grid__item:hover .share-grid__icon {
	transform: scale(1.06);
}

.share-grid__item--whatsapp .share-grid__icon { background: #25d366; color: #fff; }
.share-grid__item--telegram .share-grid__icon { background: #229ed9; color: #fff; }
.share-grid__item--facebook .share-grid__icon { background: #1877f2; color: #fff; }
.share-grid__item--x .share-grid__icon,
.share-grid__item--threads .share-grid__icon { background: #000; color: #fff; }
.share-grid__item--linkedin .share-grid__icon { background: #0a66c2; color: #fff; }

/* Riga "condividilo" a fine articolo. */
.share-row {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-6);
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	background: var(--surface-1);
}

.share-row__title {
	font-weight: 700;
}

.share-row__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.share-row__btn {
	display: inline-grid;
	grid-auto-flow: column;
	gap: 6px;
	place-items: center;
	min-width: var(--tap);
	height: var(--tap);
	padding: 0 var(--space-3);
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--text);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.share-row__btn--whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
.share-row__btn--telegram { background: #229ed9; border-color: #229ed9; color: #fff; }
.share-row__btn--facebook { background: #1877f2; border-color: #1877f2; color: #fff; }
.share-row__btn--x { background: #000; border-color: #000; color: #fff; }
.share-row__btn--threads { background: #000; border-color: #000; color: #fff; }
.share-row__btn--linkedin { background: #0a66c2; border-color: #0a66c2; color: #fff; }

.share-row__btn:hover {
	filter: brightness(1.08);
}

/* Telefono: cinque tondi uguali su una riga ("Altro" resta per i lettori di schermo). */
@media (max-width: 599px) {
	.share-row {
		padding: var(--space-4);
	}

	.share-row__title {
		font-size: var(--text-sm);
	}

	.share-row__buttons {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
	}

	.share-row__btn {
		width: 100%;
		padding: 0;
	}

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

/* Barra di avanzamento sotto l'header. */
.reading-progress {
	--p: 0;
	position: fixed;
	top: var(--header-height);
	right: 0;
	left: 0;
	z-index: 55;
	height: 4px;
	background: color-mix(in srgb, var(--border) 55%, transparent);
	pointer-events: none;
}

/* Dentro l'header (lo sposta lo script): attaccata al suo bordo inferiore. */
.site-header > .reading-progress {
	position: absolute;
	top: auto;
	bottom: -3px;
}

.reading-progress__fill {
	display: block;
	height: 100%;
	border-radius: 0 999px 999px 0;
	background: linear-gradient(90deg, var(--accent-deep), var(--accent) 60%, var(--pink-light));
	box-shadow: 0 0 10px rgba(var(--accent-rgb, 255, 10, 122), 0.55);
	transform: scaleX(0);
	transform-origin: left;
}

/* Etichetta che segue la punta: percentuale e minuti che mancano. */
.reading-progress__badge {
	position: absolute;
	top: 10px;
	left: clamp(8px, calc(var(--p) * 100% - 58px), calc(100% - 196px));
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 4px 10px 4px 4px;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	background: var(--surface-1);
	color: var(--text-muted);
	font-size: var(--text-xs);
	font-weight: 600;
	white-space: nowrap;
	box-shadow: var(--shadow-md);
	transition: left 180ms linear, opacity 300ms var(--ease), transform 300ms var(--ease);
}

.reading-progress__badge[hidden] {
	display: none;
}

.reading-progress__pct {
	display: inline-grid;
	place-items: center;
	min-width: 38px;
	height: 22px;
	padding: 0 6px;
	border-radius: var(--radius-pill);
	background: var(--accent-fill);
	color: var(--on-accent, #fff);
	font-family: var(--font-heading);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.reading-progress__badge.is-almost .reading-progress__left {
	color: var(--accent-text);
}

.reading-progress__badge.is-done {
	border-color: var(--score-high);
	color: var(--text);
}

.reading-progress__badge.is-done .reading-progress__pct {
	background: var(--score-high);
	color: var(--bg);
	animation: reading-done 520ms var(--ease) both;
}

.reading-progress__badge.is-gone {
	opacity: 0;
	transform: translateY(-6px);
}

@keyframes reading-done {
	0% {
		transform: scale(0.6);
	}

	70% {
		transform: scale(1.15);
	}

	100% {
		transform: none;
	}
}

/* "Mentre si scorre": visibile solo durante lo scorrimento. */
.reading-progress--idle .reading-progress__badge {
	opacity: 0;
	transform: translateY(-4px);
}

.reading-progress--idle .reading-progress__badge.is-awake {
	opacity: 1;
	transform: none;
}

.reading-progress__pct[hidden],
.reading-progress__left[hidden] {
	display: none;
}

/* Solo percentuale: pastiglia simmetrica. */
.reading-progress__badge:has(.reading-progress__left[hidden]) {
	padding-right: 4px;
}

/* Pastiglia ferma a destra. */
.reading-progress--corner .reading-progress__badge {
	right: var(--gutter);
	left: auto;
}

/* Percentuale dentro la barra. */
.reading-progress--inbar {
	height: 14px;
	background: var(--surface-3);
}

.site-header > .reading-progress--inbar {
	bottom: -14px;
}

.reading-progress--inbar .reading-progress__fill {
	border-radius: 0 999px 999px 0;
}

.reading-progress--inbar .reading-progress__badge {
	top: 0;
	left: clamp(4px, calc(var(--p) * 100% - 52px), calc(100% - 96px));
	height: 100%;
	padding: 0 6px;
	border: 0;
	background: none;
	color: #fff;
	font-size: 10px;
	line-height: 14px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
	box-shadow: none;
}

.reading-progress--inbar .reading-progress__pct {
	min-width: 0;
	height: auto;
	padding: 0;
	background: none;
	color: inherit;
	font-size: inherit;
}

.reading-progress--inbar .reading-progress__badge.is-done .reading-progress__pct {
	background: none;
	color: #fff;
}

/* Solo computer / solo telefono: dall'altra parte resta la linea. */
@media (max-width: 1023px) {
	.reading-progress--on-desktop .reading-progress__badge {
		display: none;
	}

	.reading-progress--on-desktop.reading-progress--inbar {
		height: 4px;
	}

	.site-header > .reading-progress--on-desktop.reading-progress--inbar {
		bottom: -3px;
	}
}

@media (min-width: 1024px) {
	.reading-progress--on-mobile .reading-progress__badge {
		display: none;
	}

	.reading-progress--on-mobile.reading-progress--inbar {
		height: 4px;
	}

	.site-header > .reading-progress--on-mobile.reading-progress--inbar {
		bottom: -3px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.reading-progress__badge {
		transition: none;
	}

	.reading-progress__badge.is-done .reading-progress__pct {
		animation: none;
	}
}

/* Barra di lettura: prende il posto della barra in basso mentre si legge. */
.reading-dock {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 61;
	display: flex;
	gap: var(--space-2);
	align-items: center;
	height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
	padding: 0 var(--space-3) env(safe-area-inset-bottom, 0px);
	border-top: 1px solid var(--border);
	background: var(--surface-1);
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
	transform: translateY(110%);
	transition: transform var(--duration) var(--ease);
}

.bottom-nav {
	transition: transform var(--duration) var(--ease);
}

.is-reading .reading-dock {
	transform: none;
}

.is-reading .bottom-nav {
	transform: translateY(110%);
}

.reading-dock__toc {
	display: flex;
	flex: 1;
	gap: var(--space-2);
	align-items: center;
	min-width: 0;
	height: var(--tap);
	padding: 0 var(--space-2) 0 0;
	border: 0;
	background: none;
	color: var(--text);
	text-align: left;
	cursor: pointer;
}

.reading-dock__ring {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
}

.reading-dock__ring svg:first-child {
	position: absolute;
	inset: 0;
	width: 40px;
	height: 40px;
	transform: rotate(-90deg);
}

.reading-dock__ring circle {
	fill: none;
	stroke: var(--border);
	stroke-width: 3;
}

.reading-dock__ring circle[data-reading-ring] {
	stroke: var(--accent);
	stroke-dasharray: 97.4;
	stroke-dashoffset: 97.4;
	stroke-linecap: round;
}

.reading-dock__ring .icon {
	width: 18px;
	height: 18px;
}

.reading-dock__text {
	display: grid;
	min-width: 0;
}

.reading-dock__kicker {
	color: var(--accent-text);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.reading-dock__section {
	overflow: hidden;
	font-size: var(--text-sm);
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.reading-dock__btn {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--text);
	cursor: pointer;
}

.reading-dock__next {
	display: grid;
	flex: none;
	grid-template-columns: auto auto;
	gap: 2px 6px;
	align-items: center;
	height: 42px;
	padding: 0 var(--space-3);
	border-radius: 999px;
	background: var(--accent-fill);
	font-size: var(--text-xs);
	color: var(--on-accent);
	text-decoration: none;
}

.reading-dock__next .reading-dock__kicker {
	color: inherit;
}

.reading-dock__next .icon {
	width: 18px;
	height: 18px;
}

.toc-sheet__list {
	display: grid;
	gap: 2px;
	list-style: none;
}

.toc-sheet__list a {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	min-height: var(--tap);
	padding: var(--space-2);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-weight: 600;
	text-decoration: none;
}

.toc-sheet__list a:hover,
.toc-sheet__list a.is-current {
	background: var(--surface-2);
}

.toc-sheet__list a.is-current {
	color: var(--accent-text);
}

.toc-sheet__n {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--surface-2);
	font-size: var(--text-xs);
}

.is-current .toc-sheet__n {
	background: var(--accent-fill);
	color: var(--on-accent);
}

.toc-sheet__next {
	display: grid;
	gap: 2px;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--accent-fill);
	color: var(--on-accent);
	text-decoration: none;
}

.toc-sheet__next span {
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Pulsantiera sul testo selezionato (desktop). */
.quote-pop {
	position: absolute;
	z-index: 90;
	display: flex;
	gap: 2px;
	align-items: center;
	padding: 4px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	background: #16161f;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.quote-pop[hidden] {
	display: none;
}

.quote-pop::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	border: 6px solid transparent;
	border-top-color: #16161f;
	transform: translateX(-50%);
}

.quote-pop__btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #fff;
	cursor: pointer;
	transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

.quote-pop__btn .icon {
	width: 18px;
	height: 18px;
}

.quote-pop__btn .icon--brand {
	fill: currentColor;
	stroke: none;
}

.quote-pop__btn[data-quote="copy"]::before {
	content: "";
	position: absolute;
	width: 1px;
	height: 20px;
	margin-left: -40px;
	background: rgba(255, 255, 255, 0.16);
}

.quote-pop__btn:hover,
.quote-pop__btn:focus-visible {
	background: rgba(255, 255, 255, 0.12);
}

.quote-pop__btn[data-quote="whatsapp"]:hover {
	color: #25d366;
}

.quote-pop__btn[data-quote="copy"]:hover {
	color: var(--pink-light, #ff66b3);
}

/* Avviso breve. */
.toast {
	position: fixed;
	bottom: calc(var(--bottom-nav-height) + 16px + env(safe-area-inset-bottom, 0px));
	left: 50%;
	z-index: 100;
	padding: var(--space-2) var(--space-4);
	border-radius: 999px;
	background: var(--text);
	color: var(--bg);
	font-size: var(--text-sm);
	font-weight: 700;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 8px);
	transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
	.reading-dock,
	.bottom-nav,
	.toast {
		transition: none;
	}
}

/* Pulsanti accanto all'autore: tre tondi uguali. */
.author-meta__actions .icon-btn {
	width: 40px;
	height: 40px;
	border: 1px solid var(--border);
	border-radius: 50%;
}

.author-meta__time--bar {
	display: none;
}

/* Telefono: autore e data su una riga intera; sotto, separati da un filo,
   i pulsanti a sinistra e il tempo di lettura a destra. */
@media (max-width: 767px) {
	.author-meta {
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	.author-meta__text {
		flex: 1 1 calc(100% - 52px);
		min-width: 0;
	}

	.author-meta__text .author-meta__time {
		display: none;
	}

	.author-meta .meta > span + span::before {
		content: none;
	}

	.author-meta__actions {
		flex: 1 1 100%;
		padding-top: var(--space-3);
		border-top: 1px solid var(--border);
	}

	.author-meta__time--bar {
		display: inline-flex;
		order: 9;
		gap: 4px;
		align-items: center;
		margin-left: auto;
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
   Prossime uscite
   -------------------------------------------------------------------------- */

.hyped__rail {
	grid-auto-columns: 38%;
	list-style: none;
}

.hyped-card {
	position: relative;
	display: grid;
	gap: 4px;
	align-content: start;
}

.hyped-card__cover {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-lg);
	background: var(--surface-2);
}

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

.hyped-card__rank {
	position: absolute;
	bottom: 6px;
	left: 6px;
	display: grid;
	place-items: center;
	min-width: 30px;
	height: 30px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--accent-fill);
	color: var(--on-accent);
	font-family: var(--font-heading);
	font-weight: 800;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hyped-card__name {
	display: -webkit-box;
	overflow: hidden;
	margin-top: var(--space-1);
	color: var(--text);
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.hyped-card__when,
.hyped-card__hype {
	color: var(--text-muted);
	font-size: var(--text-xs);
}

.hyped-card__hype {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	color: var(--accent-text);
	font-weight: 700;
}

.hyped-card__hype .icon {
	width: 14px;
	height: 14px;
}

.release-periods {
	margin: var(--space-5) 0 var(--space-3);
}

.release-month + .home-section,
.releases-page > .empty-state + .home-section {
	margin-top: var(--space-8);
}

.release-month {
	margin-top: var(--space-6);
}

.release-month__title {
	position: sticky;
	top: var(--header-height);
	z-index: 5;
	display: flex;
	gap: var(--space-2);
	align-items: center;
	margin: 0 calc(var(--gutter) * -1) var(--space-3);
	padding: var(--space-2) var(--gutter);
	background: var(--bg);
	font-family: var(--font-heading);
	font-size: var(--text-xl);
}

@media (min-width: 601px) {
	.admin-bar .release-month__title {
		top: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 0px));
	}
}

.release-month__count {
	display: grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--text-muted);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 700;
}

.release-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3);
}

.release {
	display: grid;
	grid-template-columns: 44px 72px minmax(0, 1fr);
	gap: var(--space-3);
	align-items: start;
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface-1);
}

.release--soon {
	border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.release__date {
	display: grid;
	justify-items: center;
	padding: var(--space-1) 0;
	border-radius: var(--radius-md);
	background: var(--surface-2);
	line-height: 1.1;
	text-align: center;
}

.release--soon .release__date {
	background: var(--accent-fill);
	color: var(--on-accent);
}

.release__weekday,
.release__month {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.release__weekday {
	color: var(--text-muted);
}

.release--soon .release__weekday {
	color: inherit;
}

.release__day {
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 800;
}

.release__cover {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-md);
	background: var(--surface-2);
}

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

.release__body {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.release__title {
	font-family: var(--font-heading);
	font-size: var(--text-md);
	line-height: 1.25;
}

.release__title a {
	color: var(--text);
	text-decoration: none;
}

.release__title a:hover {
	color: var(--accent-text);
}

.release__when {
	display: flex;
	flex-wrap: wrap;
	gap: 4px var(--space-3);
	align-items: center;
	font-size: var(--text-sm);
	font-weight: 700;
}

.release--soon .release__when time {
	color: var(--accent-text);
}

.release__hype {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	color: var(--text-muted);
	font-size: var(--text-xs);
	font-weight: 600;
}

.release__hype .icon {
	width: 14px;
	height: 14px;
	color: var(--accent-text);
}

.release__platforms {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
}

.release__platforms li {
	padding: 2px 8px;
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--text-muted);
	font-size: 11px;
	font-weight: 700;
}

.release__facts,
.release__modes {
	color: var(--text-muted);
	font-size: var(--text-xs);
	line-height: 1.4;
}

.release__modes {
	display: flex;
	gap: 6px;
	align-items: center;
}

.release__modes .icon {
	flex: none;
	width: 14px;
	height: 14px;
}

.release__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
	margin-top: 2px;
}

.release__actions .buy {
	margin: 0;
}

.release__btn {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--space-3);
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--text);
	font-size: var(--text-xs);
	font-weight: 700;
	text-decoration: none;
}

.release__btn .icon {
	width: 16px;
	height: 16px;
}

.release__btn--trailer {
	border-color: transparent;
	background: var(--accent-fill);
	color: var(--on-accent);
}

.release__btn:hover {
	filter: brightness(1.08);
}

.trailer-sheet {
	max-width: 960px;
}

.trailer-sheet__frame {
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-md);
	background: #000;
}

.trailer-sheet__frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* --------------------------------------------------------------------------
   Promemoria delle uscite
   -------------------------------------------------------------------------- */

.remind-btn.is-set {
	border-color: var(--accent);
	color: var(--accent-text);
}

.remind-btn.is-set .icon {
	fill: currentColor;
}

.remind-sheet {
	max-width: 440px;
}

.remind-sheet__game {
	display: flex;
	gap: var(--space-3);
	align-items: center;
}

.remind-sheet__game strong {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--text-md);
	line-height: 1.25;
}

.remind-sheet__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background: var(--accent-fill);
	color: var(--on-accent);
}

.remind-sheet__date {
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.remind-sheet__push {
	display: grid;
	gap: var(--space-2);
}

.remind-sheet__subscribe {
	justify-content: center;
	width: 100%;
}

.remind-sheet__subscribe[aria-pressed="true"] .icon {
	fill: currentColor;
}

.remind-sheet__hint,
.remind-sheet__label {
	color: var(--text-muted);
	font-size: var(--text-xs);
}

.remind-sheet__status:empty {
	display: none;
}

.remind-sheet__status {
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	background: var(--surface-2);
	font-size: var(--text-sm);
}

.remind-sheet__label {
	margin-bottom: var(--space-2);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.remind-sheet__cals ul {
	display: grid;
	gap: var(--space-2);
	list-style: none;
}

.remind-cal {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	min-height: var(--tap);
	padding: 0 var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface-2);
	color: var(--text);
	font-weight: 600;
	text-decoration: none;
}

.remind-cal:hover {
	border-color: var(--accent);
}

.remind-cal__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--text-muted);
}

.remind-cal--google .remind-cal__dot { background: #4285f4; }
.remind-cal--apple .remind-cal__dot { background: #ff3b30; }
.remind-cal--outlook .remind-cal__dot { background: #0f6cbd; }

/* --------------------------------------------------------------------------
   Preferiti: cuore con contatore, acceso quando c'è qualcosa, animazioni
   -------------------------------------------------------------------------- */

.fav-link__icon {
	position: relative;
	display: inline-grid;
	place-items: center;
}

.fav-badge {
	position: absolute;
	top: -6px;
	right: -10px;
	display: grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border: 2px solid var(--bg);
	border-radius: 999px;
	background: var(--accent-fill);
	color: var(--on-accent);
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
}

.fav-badge[hidden] {
	display: none;
}

[data-favorites-target].has-favorites .icon-heart,
[data-favorites-target].has-favorites .fav-link__icon > .icon {
	color: var(--accent);
	fill: var(--accent);
}

.bottom-nav__item.has-favorites {
	color: var(--accent-text);
}

.drawer__favorites {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	margin: var(--space-4) 0 0;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface-2);
	color: var(--text);
	font-weight: 700;
	text-decoration: none;
}

/* Su mobile il cuore sta già nella barra in basso. */
@media (max-width: 1023px) {
	.has-bottom-favorites .site-header__favorites {
		display: none;
	}
}

.is-bumped .fav-link__icon {
	animation: popday-fav-bump 0.45s var(--ease);
}

.favorite-btn.is-popping .icon {
	animation: popday-fav-pop 0.4s var(--ease);
}

.fav-fly {
	position: fixed;
	z-index: 200;
	width: 22px;
	height: 22px;
	color: var(--accent);
	pointer-events: none;
}

.fav-fly .icon {
	width: 22px;
	height: 22px;
	fill: var(--accent);
	filter: drop-shadow(0 2px 6px rgba(230, 0, 109, 0.5));
}

@keyframes popday-fav-bump {
	0% { transform: scale(1); }
	35% { transform: scale(1.35); }
	65% { transform: scale(0.9); }
	100% { transform: scale(1); }
}

@keyframes popday-fav-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.4); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.is-bumped .fav-link__icon,
	.favorite-btn.is-popping .icon {
		animation: none;
	}
}

.drawer__favorites .fav-link__icon {
	margin-right: var(--space-2);
}

/* --------------------------------------------------------------------------
   Seguire: discussioni, avviso in basso, pannello "Il mio PopDay"
   -------------------------------------------------------------------------- */

.comments__follow {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	min-height: 36px;
	margin-left: auto;
	padding: 0 var(--space-3);
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--text);
	font-size: var(--text-sm);
	font-weight: 700;
	cursor: pointer;
}

.comments__follow[hidden] {
	display: none;
}

.comments__follow .icon {
	width: 16px;
	height: 16px;
}

.comments__follow[aria-pressed="true"] {
	border-color: var(--accent);
	color: var(--accent-text);
}

.comments__follow[aria-pressed="true"] .icon {
	fill: currentColor;
}

.comment-form-notify label {
	display: inline-flex;
	gap: var(--space-2);
	align-items: center;
	font-size: var(--text-sm);
	cursor: pointer;
}

.comment-form-notify input {
	width: 18px;
	height: 18px;
	accent-color: var(--accent-fill);
}

.snackbar {
	position: fixed;
	right: var(--gutter);
	bottom: calc(var(--bottom-nav-height) + 12px + env(safe-area-inset-bottom, 0px));
	left: var(--gutter);
	z-index: 110;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	align-items: center;
	justify-content: space-between;
	max-width: 520px;
	margin: 0 auto;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-lg);
	background: #16161f;
	color: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px);
	transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.snackbar.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

.snackbar__text {
	flex: 1 1 220px;
	font-size: var(--text-sm);
	line-height: 1.4;
}

.snackbar__actions {
	display: flex;
	gap: var(--space-2);
}

.snackbar__btn {
	min-height: 36px;
	padding: 0 var(--space-3);
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: var(--text-sm);
	font-weight: 700;
	line-height: 36px;
	text-decoration: none;
	cursor: pointer;
}

.snackbar__btn.is-primary {
	background: var(--accent-fill);
}

.me-status {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-3) var(--space-4);
	align-items: center;
	margin-bottom: var(--space-6);
	padding: var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface-1);
}

.me-status.is-on {
	border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.me-status__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--text-muted);
}

.me-status.is-on .me-status__icon {
	background: var(--accent-fill);
	color: var(--on-accent);
}

.me-status.is-on .me-status__icon .icon {
	fill: currentColor;
}

.me-status__title {
	font-size: var(--text-md);
}

.me-status__text {
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.me-status__actions {
	display: flex;
	grid-column: 1 / -1;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.me-status__actions:not(:has(:not([hidden]))) {
	display: none;
}

.me-section {
	margin-bottom: var(--space-6);
}

.me-section__title {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	margin-bottom: var(--space-3);
	font-size: var(--text-lg);
}

.me-section__title .icon {
	color: var(--accent-text);
}

.me-section__empty {
	padding: var(--space-4);
	border: 1px dashed var(--border);
	border-radius: var(--radius-lg);
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.me-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2);
}

.me-list:empty {
	display: none;
}

.me-row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: var(--space-3);
	align-items: center;
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface-1);
}

.me-row__media {
	overflow: hidden;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md);
	background: var(--surface-2);
}

.me-row__media img,
.me-row__media .media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.me-row__title {
	font-size: var(--text-md);
	line-height: 1.25;
}

.me-row__title a {
	color: var(--text);
	text-decoration: none;
}

.me-row__meta {
	color: var(--text-muted);
	font-size: var(--text-xs);
}

.me-row__toggles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-4);
	margin-top: var(--space-2);
}

.me-switch {
	display: inline-flex;
	gap: var(--space-2);
	align-items: center;
	min-height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--text);
	font-size: var(--text-sm);
	font-weight: 600;
	cursor: pointer;
}

.me-switch__track {
	position: relative;
	width: 36px;
	height: 20px;
	border-radius: 999px;
	background: var(--border);
	transition: background var(--duration) var(--ease);
}

.me-switch__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	transition: transform var(--duration) var(--ease);
}

.me-switch[aria-checked="true"] .me-switch__track {
	background: var(--accent-fill);
}

.me-switch[aria-checked="true"] .me-switch__thumb {
	transform: translateX(16px);
}

.me-switch:disabled {
	opacity: 0.6;
}

.me-page__note {
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.me-page__note .icon {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 2px;
}

/* Titolo di una sezione con "Segui" accanto. */
.page-header__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	justify-content: space-between;
}

.me-row--news {
	grid-template-columns: 56px minmax(0, 1fr);
}

.me-row__new {
	justify-self: start;
	margin-bottom: 2px;
	font-size: 10px;
}

/* Aggiornamento importante e "Avvisami quando viene aggiornata". */
.update-box {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-5);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface-1);
}

.update-box[hidden] {
	display: none;
}

.update-box.has-note {
	border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
	background: color-mix(in srgb, var(--accent) 7%, var(--surface-1));
}

.update-box__note {
	display: flex;
	flex: 1 1 260px;
	gap: var(--space-2);
	align-items: flex-start;
	font-size: var(--text-sm);
	line-height: 1.45;
}

.update-box__note .icon {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--accent-text);
}

.update-box__follow {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--space-3);
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--text);
	font-size: var(--text-sm);
	font-weight: 700;
	cursor: pointer;
}

.update-box__follow[hidden] {
	display: none;
}

.update-box__follow .icon {
	width: 16px;
	height: 16px;
}

.update-box__follow[aria-pressed="true"] {
	border-color: var(--accent);
	color: var(--accent-text);
}

.update-box__follow[aria-pressed="true"] .icon {
	fill: currentColor;
}

.me-scope select {
	min-height: 32px;
	padding: 0 28px 0 var(--space-2);
	border: 1px solid var(--border);
	border-radius: 999px;
	background-color: var(--surface-2);
	color: var(--text);
	font-size: var(--text-xs);
	font-weight: 700;
}

/* "Riprendi da dove eri rimasto". */
.resume-chip {
	position: fixed;
	right: var(--gutter);
	bottom: calc(var(--bottom-nav-height) + 12px + env(safe-area-inset-bottom, 0px));
	left: var(--gutter);
	z-index: 105;
	display: flex;
	gap: var(--space-2);
	align-items: center;
	max-width: 520px;
	margin: 0 auto;
	padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
	border-radius: var(--radius-lg);
	background: #16161f;
	color: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.resume-chip.is-visible {
	opacity: 1;
	transform: none;
}

.resume-chip__text {
	flex: 1;
	min-width: 0;
	font-size: var(--text-sm);
	line-height: 1.35;
}

.resume-chip__go {
	min-height: 36px;
	padding: 0 var(--space-4);
	border: 0;
	border-radius: 999px;
	background: var(--accent-fill);
	color: var(--on-accent, #fff);
	font-size: var(--text-sm);
	font-weight: 700;
	cursor: pointer;
}

.resume-chip__close {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #fff;
	cursor: pointer;
}

@media (min-width: 1024px) {
	.resume-chip {
		bottom: 24px;
	}
}

.me-progress {
	display: block;
	overflow: hidden;
	height: 4px;
	margin-top: var(--space-2);
	border-radius: 999px;
	background: var(--surface-2);
}

.me-progress span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--accent-fill);
}

.me-section__clear {
	margin-top: var(--space-2);
	padding: var(--space-1) 0;
	border: 0;
	background: none;
	color: var(--text-muted);
	font-size: var(--text-sm);
	text-decoration: underline;
	cursor: pointer;
}

.me-section__clear[hidden] {
	display: none;
}

/* Link affiliato del box "Il verdetto". */
.review-box__link {
	display: grid;
	gap: var(--space-2);
	justify-items: start;
	margin-top: var(--space-4);
}

.review-box__disclosure {
	color: var(--text-muted);
	font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   Trofei PopDay
   -------------------------------------------------------------------------- */

/* Medaglia: metallo pieno con riflesso, coppa scura sopra. Bloccata = grigia col lucchetto. */
.trophy-medal {
	position: relative;
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border-radius: 50%;
	color: #2a1a0a;
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.trophy-medal .icon {
	position: relative;
	z-index: 1;
	width: 24px;
	height: 24px;
	stroke-width: 2;
}

.trophy-medal--bronze {
	background: radial-gradient(circle at 30% 25%, #f3c49a, #c27a40 45%, #8a4b22);
}

.trophy-medal--silver {
	background: radial-gradient(circle at 30% 25%, #ffffff, #c5ccd8 45%, #8892a3);
	color: #1f2633;
}

.trophy-medal--gold {
	background: radial-gradient(circle at 30% 25%, #fff2b8, #f2c440 45%, #b9861a);
	color: #3a2600;
}

.trophy-medal--platinum {
	background: radial-gradient(circle at 30% 25%, #ffffff, #d6e2f7 40%, #8ea3cc 75%, #6f7fa8);
	color: #18233d;
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 0 0 2px rgba(142, 163, 204, 0.55), 0 0 12px rgba(160, 190, 255, 0.45);
}

.trophy-medal.is-locked {
	background: var(--surface-3);
	color: var(--text-muted);
	box-shadow: inset 0 0 0 1px var(--border);
}

.trophy-medal--sm {
	width: 30px;
	height: 30px;
}

.trophy-medal--sm .icon {
	width: 16px;
	height: 16px;
}

/* Avviso di sblocco: scende dall'alto come sulle console (o sale dal basso, da PopDay > Trofei). */
.trophy-toasts {
	position: fixed;
	top: calc(var(--header-height) + 12px);
	left: 50%;
	z-index: 120;
	width: min(380px, calc(100vw - 24px));
	transform: translateX(-50%);
	pointer-events: none;
}

.trophy-toast {
	position: relative;
	display: flex;
	gap: var(--space-3);
	align-items: center;
	overflow: hidden;
	padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface-1);
	color: var(--text);
	box-shadow: var(--shadow-md);
	opacity: 0;
	pointer-events: auto;
	transform: translateY(-16px) scale(0.98);
	transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}

.trophy-toast.is-visible {
	opacity: 1;
	transform: none;
}

.trophy-toasts--bottom {
	top: auto;
	bottom: calc(var(--bottom-nav-height) + 16px + env(safe-area-inset-bottom, 0px));
}

.trophy-toasts--bottom .trophy-toast {
	transform: translateY(16px) scale(0.98);
}

.trophy-toasts--bottom .trophy-toast.is-visible {
	transform: none;
}

.trophy-toast__kicker:empty {
	display: none;
}

/* Riflesso che attraversa l'avviso una volta. */
.trophy-toast::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.16) 45%, transparent 60%);
	content: "";
	transform: translateX(-100%);
}

.trophy-toast.is-visible::after {
	animation: trophy-shine 1.1s 0.25s var(--ease) both;
}

.trophy-toast.is-visible .trophy-medal {
	animation: trophy-pop 520ms var(--ease) both;
}

.trophy-toast__body {
	display: grid;
	min-width: 0;
}

.trophy-toast__kicker {
	color: var(--text-muted);
	font-size: var(--text-xs);
	font-weight: 600;
}

.trophy-toast__title {
	overflow: hidden;
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.trophy-toast__more {
	color: var(--accent-text);
	font-size: var(--text-xs);
	font-weight: 600;
}

.trophy-toast--platinum {
	border-color: #8ea3cc;
	box-shadow: var(--shadow-md), 0 0 0 1px rgba(142, 163, 204, 0.35), 0 0 28px rgba(142, 163, 204, 0.3);
}

@keyframes trophy-shine {
	to {
		transform: translateX(100%);
	}
}

@keyframes trophy-pop {
	0% {
		transform: scale(0.4) rotate(-20deg);
	}

	70% {
		transform: scale(1.12) rotate(4deg);
	}

	100% {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.trophy-toast {
		transition: opacity var(--duration) linear;
		transform: none;
	}

	.trophy-toast.is-visible::after,
	.trophy-toast.is-visible .trophy-medal {
		animation: none;
	}
}

/* Barra di avanzamento comune. */
.trophy-bar {
	display: block;
	height: 8px;
	overflow: hidden;
	border-radius: var(--radius-pill);
	background: var(--surface-3);
}

.trophy-bar__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--accent-fill), var(--pink-light));
}

/* Il mio PopDay: riepilogo, giochi, catalogo. */
.trophies-panel[hidden] {
	display: none;
}

.trophies-panel__summary {
	display: grid;
	gap: var(--space-4);
	padding: var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(var(--accent-rgb, 255, 10, 122), 0.12), transparent 55%),
		var(--surface-1);
}

.trophy-level {
	display: flex;
	gap: var(--space-4);
	align-items: center;
}

.trophy-level__badge {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent-fill), var(--pink-light));
	color: var(--on-accent, #fff);
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: 700;
	box-shadow: var(--glow);
}

.trophy-level__info {
	display: grid;
	flex: 1 1 auto;
	gap: var(--space-1);
	min-width: 0;
}

.trophy-level__name {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
}

.trophy-level__meta,
.trophy-level__next {
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.trophy-tiers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	list-style: none;
}

.trophy-tiers__item {
	display: inline-flex;
	gap: var(--space-2);
	align-items: center;
	font-family: var(--font-heading);
	font-weight: 700;
}

.trophies-panel__subtitle {
	margin: var(--space-5) 0 var(--space-3);
	font-size: var(--text-md);
}

.trophies-panel__games {
	display: grid;
	gap: var(--space-3);
}

.trophies-panel__all {
	margin-top: var(--space-5);
}

.trophies-panel__all > summary {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	min-height: var(--tap);
	padding: 0 var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface-1);
	font-family: var(--font-heading);
	font-weight: 700;
	cursor: pointer;
}

.trophies-panel__count {
	margin-left: auto;
	color: var(--text-muted);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
}

.trophy-family {
	margin-top: var(--space-4);
}

.trophy-family__title {
	display: flex;
	align-items: baseline;
	margin-bottom: var(--space-2);
	font-size: var(--text-md);
}

.trophy-family__count {
	margin-left: auto;
	color: var(--text-muted);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
}

.trophy-list {
	display: grid;
	gap: var(--space-2);
	list-style: none;
}

.trophy-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--space-3);
	align-items: center;
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface-1);
}

.trophy-item:not(.is-unlocked) .trophy-item__title {
	color: var(--text-muted);
}

.trophy-item__body {
	display: grid;
	gap: 2px;
}

.trophy-item__title {
	font-family: var(--font-heading);
	font-size: var(--text-sm);
}

.trophy-item__text,
.trophy-item__progress {
	color: var(--text-muted);
	font-size: var(--text-xs);
	line-height: 1.45;
}

.trophy-item__progress {
	color: var(--accent-text);
	font-weight: 700;
}

.trophy-item__tier {
	color: var(--text-muted);
	font-size: var(--text-xs);
	font-weight: 600;
	white-space: nowrap;
}

/* Trofei di un gioco: striscia nell'hub, schede nel pannello, riquadro nell'articolo. */
.game-trophies {
	margin: 0 0 var(--space-5);
}

.game-trophies[hidden] {
	display: none;
}

.game-trophies--article {
	margin: var(--space-6) 0;
}

.game-trophies__card {
	display: grid;
	gap: var(--space-3);
	padding: var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(120% 160% at 0% 0%, rgba(242, 196, 64, 0.1), transparent 55%),
		var(--surface-1);
}

.game-trophies__head {
	display: flex;
	gap: var(--space-3);
	align-items: center;
}

.game-trophies__cover {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-xs);
	object-fit: cover;
}

.game-trophies__titles {
	display: grid;
	min-width: 0;
}

.game-trophies__name {
	overflow: hidden;
	font-family: var(--font-heading);
	font-size: var(--text-md);
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.game-trophies__name:hover {
	color: var(--accent-text);
}

.game-trophies__count {
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.game-trophies__medals {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
}

.game-trophies__medal {
	display: inline-flex;
	gap: var(--space-2);
	align-items: center;
	padding: 3px var(--space-3) 3px 3px;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	background: var(--surface-2);
	color: var(--text-muted);
	font-size: var(--text-xs);
	font-weight: 600;
}

.game-trophies__medal.is-unlocked {
	color: var(--text);
}

.game-trophies__next {
	color: var(--text-muted);
	font-size: var(--text-sm);
	line-height: 1.5;
}

.game-trophies__go {
	justify-self: start;
	color: var(--accent-text);
	font-size: var(--text-sm);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Nel pannello le schede dei giochi sono più compatte: solo le medaglie (i nomi restano per i lettori di schermo). */
.game-trophies__card--compact .game-trophies__medal {
	padding: 3px;
}

@media (min-width: 768px) {
	.trophies-panel__summary {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}

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

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

@media (min-width: 1024px) {
	.trophy-toasts--bottom {
		bottom: 24px;
	}
}

/* Attivazione: Il mio PopDay e invito nella pagina del gioco. */
.trophies-optin {
	display: grid;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(242, 196, 64, 0.12), transparent 55%),
		var(--surface-1);
}

.trophies-optin[hidden],
[data-trophies-on][hidden] {
	display: none;
}

.trophies-optin__medals,
.trophies-invite__medals {
	display: flex;
	gap: var(--space-2);
}

.trophies-optin__body {
	display: grid;
	gap: var(--space-3);
	justify-items: start;
}

.trophies-optin__title {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 700;
}

.trophies-optin__text {
	color: var(--text-muted);
	line-height: 1.6;
}

.trophies-optin__warning {
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
	padding: var(--space-3);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	font-size: var(--text-sm);
	line-height: 1.5;
}

.trophies-optin__warning .icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--accent-text);
}

.trophies-panel__device {
	margin-top: var(--space-4);
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.trophies-panel__device .me-section__clear {
	display: block;
}

.trophies-invite {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3);
	padding: var(--space-4);
	border: 1px dashed var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface-1);
}

.trophies-invite__text {
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1.5;
}

.trophies-invite__note {
	margin-top: var(--space-1);
	color: var(--text-muted);
	font-size: var(--text-xs);
	line-height: 1.5;
}

.trophies-invite .btn {
	justify-self: start;
}

@media (min-width: 768px) {
	.trophies-optin {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
		padding: var(--space-5);
	}

	.trophies-optin__medals {
		flex-direction: column;
	}

	.trophies-invite {
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
	}
}

/* --------------------------------------------------------------------------
   Letto tutto: invito a condividere
   -------------------------------------------------------------------------- */

/* La riga "Ti è stato utile?" si illumina e i pulsanti saltano uno dopo l'altro. */
.share-row.is-celebrating {
	border-color: var(--accent);
	box-shadow: var(--glow);
	animation: share-glow 1.6s var(--ease) 2;
}

.share-row.is-celebrating .share-row__title {
	color: var(--accent-text);
}

.share-row.is-celebrating .share-row__btn {
	animation: share-hop 520ms var(--ease) both;
}

.share-row.is-celebrating .share-row__btn:nth-child(2) { animation-delay: 80ms; }
.share-row.is-celebrating .share-row__btn:nth-child(3) { animation-delay: 160ms; }
.share-row.is-celebrating .share-row__btn:nth-child(4) { animation-delay: 240ms; }
.share-row.is-celebrating .share-row__btn:nth-child(5) { animation-delay: 320ms; }

@keyframes share-glow {
	50% {
		box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 255, 10, 122), 0.4), 0 10px 36px rgba(var(--accent-rgb, 255, 10, 122), 0.32);
	}
}

@keyframes share-hop {
	0%,
	100% {
		transform: none;
	}

	40% {
		transform: translateY(-9px) scale(1.06);
	}

	70% {
		transform: translateY(2px);
	}
}

/* Coriandoli: un'esplosione breve, poi spariscono. */
.confetti {
	position: fixed;
	z-index: 130;
	width: 0;
	height: 0;
	pointer-events: none;
}

.confetti span {
	position: absolute;
	top: -4px;
	left: -3px;
	width: 7px;
	height: 10px;
	border-radius: 2px;
	animation: confetti-fly 1.1s cubic-bezier(0.15, 0.6, 0.3, 1) forwards;
}

.confetti span:nth-child(3n) {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

@keyframes confetti-fly {
	0% {
		opacity: 1;
		transform: translate(0, 0) rotate(0) scale(0.6);
	}

	75% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate(var(--x), calc(var(--y) + 40px)) rotate(var(--r)) scale(1);
	}
}

/* Riquadro che sale dal basso quando la riga non è sullo schermo. */
.share-nudge {
	position: fixed;
	right: 12px;
	bottom: calc(var(--bottom-nav-height) + 12px + env(safe-area-inset-bottom, 0px));
	left: 12px;
	z-index: 110;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--space-2) var(--space-3);
	align-items: center;
	padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3);
	border: 1px solid var(--accent);
	border-radius: var(--radius-lg);
	background: var(--surface-1);
	box-shadow: var(--shadow-md), var(--glow);
	opacity: 0;
	transform: translateY(24px) scale(0.97);
	transition: opacity 280ms var(--ease), transform 380ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.share-nudge.is-visible {
	opacity: 1;
	transform: none;
}

.share-nudge__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent-fill), var(--pink-light));
	color: var(--on-accent, #fff);
	animation: share-pulse 1.8s var(--ease) 0.4s 3;
}

.share-nudge__body {
	min-width: 0;
}

.share-nudge__kicker {
	color: var(--accent-text);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 700;
}

.share-nudge__text {
	color: var(--text-muted);
	font-size: var(--text-xs);
	line-height: 1.45;
}

.share-nudge__close {
	position: absolute;
	top: -10px;
	right: -6px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--text-muted);
	cursor: pointer;
}

@keyframes share-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 255, 10, 122), 0.45);
	}

	60% {
		box-shadow: 0 0 0 12px rgba(var(--accent-rgb, 255, 10, 122), 0);
	}
}

@media (min-width: 1024px) {
	.share-nudge {
		right: 24px;
		bottom: 24px;
		left: auto;
		width: 380px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.share-row.is-celebrating,
	.share-row.is-celebrating .share-row__btn,
	.share-nudge__icon {
		animation: none;
	}

	.share-nudge {
		transform: none;
		transition: opacity var(--duration) linear;
	}
}