/* ═══════════════════════════════════════════════════════════════════
   TOKEN — l'unico posto dove esistono valori "crudi".
   Un componente che scrive un colore o una misura fuori da qui è un bug.
   ═══════════════════════════════════════════════════════════════════ */
:root {
	/* --- marca ------------------------------------------------------ */
	--green:#75ab4b;
	--green-rgb:117,171,75;
	--green-dark:#507633;
	--green-deep:#3a5524;
	--green-light:#93c66c;
	--green-soft:rgba(var(--green-rgb),0.14);
	--ink:#27282A;
	--ink-rgb:39,40,42;
	--ink-2:#1d1f21;          /* banda più scura: topbar, fondi profondi */
	--ink-3:#34373b;          /* rilievi dentro le bande */

	/* --- il campo (superfici chiare) -------------------------------- */
	--field:#f2f1ea;          /* la carta: un bianco caldo, da manifesto */
	--card:#ffffff;           /* schede */
	--card-2:#ecebe2;        /* fasce alternate, celle zebrate */

	/* --- testo ------------------------------------------------------ */
	--text:#23262a;
	--text-muted:#5d6469;
	--text-faint:#8a9096;
	--text-inverse:#f2f4f1;             /* sul carbone */
	--text-inverse-muted:#a7adad;
	--text-on-green:#16260b;            /* sul verde pieno: scuro, AA */

	/* --- bordi ------------------------------------------------------ */
	--border:rgba(35,40,35,0.12);
	--border-strong:rgba(35,40,35,0.22);
	--border-inverse:rgba(255,255,255,0.12);

	/* --- esiti (un sito di calcio vive di questi tre) ---------------- */
	--win:#3c8a27;
	--draw:#c08f0a;
	--lose:#c03a2e;
	--win-soft:rgba(60,138,39,0.13);
	--draw-soft:rgba(192,143,10,0.15);
	--lose-soft:rgba(192,58,46,0.12);

	/* --- la texture delle bande --------------------------------------
	   Le righe diagonali del carbone storico, ridisegnate in CSS:
	   nessuna immagine, nessuna richiesta, scala a ogni risoluzione. */
	--pinstripe:repeating-linear-gradient(135deg,
		rgba(255,255,255,0.028) 0 2px, transparent 2px 7px);

	/* --- tipografia --------------------------------------------------
	   Due voci: la display (condensata, maiuscola, da maglia da gioco)
	   per titoli, punteggi e numeri; la testuale per tutto il resto. */
	--font:"Roboto", "Segoe UI", Arial, sans-serif;
	--font-display:"Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
	--font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--text-xs:0.75rem;
	--text-sm:0.875rem;
	--text-base:1rem;
	--text-md:1.125rem;
	--text-lg:clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
	--text-xl:clamp(2.125rem, 1.5rem + 2.4vw, 3.5rem);
	--text-2xl:clamp(3.25rem, 1.9rem + 5.6vw, 7rem);

	--weight-normal:400;
	--weight-medium:500;
	--weight-bold:700;

	--leading-tight:1.1;
	--leading-normal:1.6;
	--tracking-wide:0.04em;

	/* --- spazio (griglia di 4px: il "pixel" del creeper) ------------- */
	--px:4px;
	--space-1:4px;
	--space-2:8px;
	--space-3:12px;
	--space-4:16px;
	--space-5:24px;
	--space-6:32px;
	--space-7:48px;
	--space-8:72px;

	/* --- forma: il taglio --------------------------------------------
	   --cut è la misura del taglio diagonale; --cut-shape la sagoma
	   parallelogramma pronta per i clip-path (bottoni, targhe, chip). */
	--cut:10px;
	--cut-shape:polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
	--radius:4px;
	--radius-lg:8px;

	--shadow-1:0 1px 2px rgba(20,26,18,0.10), 0 1px 8px rgba(20,26,18,0.06);
	--shadow-2:0 6px 24px rgba(20,26,18,0.14);
	--shadow-lift:0 14px 34px rgba(20,26,18,0.18);

	/* L'ombra DURA da manifesto: spostata, mai sfocata. Il colore si cambia
	   per contesto ridefinendo --hard (sull'hero scuro diventa verde cupo). */
	--hard:var(--ink);
	--shadow-hard:5px 5px 0 var(--hard);
	--shadow-hard-sm:3px 3px 0 var(--hard);
	--shadow-hard-lg:8px 8px 0 var(--hard);

	/* Il pixel dei bordi dissolti (multipli di 4). */
	--pixel:12px;
	--focus-ring:0 0 0 3px rgba(var(--green-rgb),0.45);

	/* --- movimento --------------------------------------------------- */
	--ease:cubic-bezier(0.2,0.7,0.3,1);
	--fast:130ms;
	--normal:240ms;

	/* --- struttura ---------------------------------------------------- */
	--container:1200px;
	--container-narrow:780px;
	--topbar-h:38px;
	--nav-h:84px;

	--z-dropdown:100;
	--z-header:200;
	--z-overlay:300;
	--z-modal:400;
}


/* ══════════ BASE ══════════ */
/* ───────────────────────────────────────────────────────────────────
   Azzeramento e regole di base
   ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after {box-sizing:border-box;}

* {margin:0; padding:0;}

html {
	-webkit-text-size-adjust:100%;
	scroll-behavior:smooth;
}

body {
	background:var(--field);
	color:var(--text);
	font-family:var(--font);
	font-size:var(--text-base);
	line-height:var(--leading-normal);
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	overflow-x:hidden;   /* i cunei diagonali sporgono: mai scroll laterale */
}

img, svg, video {max-width:100%; height:auto; display:block;}

ul, ol {list-style:none;}

a {color:var(--green-dark); text-decoration:none;}
a:hover {color:var(--green-deep);}

button {
	font:inherit;
	color:inherit;
	background:none;
	border:0;
	cursor:pointer;
}

input, select, textarea {font:inherit; color:inherit;}

table {border-collapse:collapse; border-spacing:0; width:100%;}

hr {border:0; border-top:1px solid var(--border); margin-block:var(--space-5);}

strong, b {font-weight:var(--weight-bold);}

small {font-size:var(--text-sm);}

::selection {background:var(--green); color:var(--text-on-green);}

/* Focus visibile, sempre: la tastiera è un ingresso di serie A. */
:focus-visible {
	outline:none;
	box-shadow:var(--focus-ring);
	border-radius:2px;
}

/* ───────────────────────────────────────────────────────────────────
   Titoli: la voce display, condensata e maiuscola come una maglia
   ─────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
	font-family:var(--font-display);
	font-weight:var(--weight-bold);
	line-height:var(--leading-tight);
	text-transform:uppercase;
	letter-spacing:0.01em;
}

h1 {font-size:var(--text-xl);}
h2 {font-size:var(--text-lg);}
h3 {font-size:var(--text-md);}
h4 {font-size:var(--text-base); letter-spacing:var(--tracking-wide);}

p {margin-block:0;}
p + p {margin-block-start:var(--space-3);}

/* ───────────────────────────────────────────────────────────────────
   Il creeper — disegnato in CSS, nessuna immagine.
   Maschera su currentColor: scala, cambia colore, pesa zero.
   ─────────────────────────────────────────────────────────────────── */
.c-creeper {
	width:1.1em;
	height:1.1em;
	display:inline-block;
	vertical-align:-0.16em;
	background:currentColor;
	-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M1 1h2v2H1zM5 1h2v2H5zM3 3h2v2H3zM2 4h4v2H2zM2 6h1v1H2zM5 6h1v1H5z'/></svg>") center / contain no-repeat;
	mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M1 1h2v2H1zM5 1h2v2H5zM3 3h2v2H3zM2 4h4v2H2zM2 6h1v1H2zM5 6h1v1H5z'/></svg>") center / contain no-repeat;
}

/* Variante "piena": faccia su tessera verde, per timbri e stati vuoti. */
.c-creeper--solid {
	width:1.4em;
	height:1.4em;
	background:var(--green);
	-webkit-mask:none;
	mask:none;
	position:relative;
	border-radius:2px;
}
.c-creeper--solid::after {
	content:"";
	position:absolute;
	inset:12%;
	background:var(--green-deep);
	-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M1 1h2v2H1zM5 1h2v2H5zM3 3h2v2H3zM2 4h4v2H2zM2 6h1v1H2zM5 6h1v1H5z'/></svg>") center / contain no-repeat;
	mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M1 1h2v2H1zM5 1h2v2H5zM3 3h2v2H3zM2 4h4v2H2zM2 6h1v1H2zM5 6h1v1H5z'/></svg>") center / contain no-repeat;
}

/* ───────────────────────────────────────────────────────────────────
   Utilità
   ─────────────────────────────────────────────────────────────────── */

/* Solo screen reader */
.u-sr {
	position:absolute;
	width:1px; height:1px;
	padding:0; margin:-1px;
	overflow:hidden;
	clip-path:inset(50%);
	white-space:nowrap;
	border:0;
}

/* Salto al contenuto: INVISIBILE finché non riceve il focus da tastiera.
   (Nel prototipo precedente restava a schermo: era un bug, non una scelta.) */
.u-skip {
	position:fixed;
	inset-block-start:var(--space-3);
	inset-inline-start:var(--space-3);
	z-index:var(--z-modal);
	padding:var(--space-2) var(--space-4);
	background:var(--green);
	color:var(--text-on-green);
	font-weight:var(--weight-bold);
	clip-path:var(--cut-shape);
	transform:translateY(-200%);
}
.u-skip:focus-visible {transform:none;}

.u-stack {display:flex; flex-direction:column; gap:var(--space-3);}
.u-stack--lg {gap:var(--space-5);}
.u-mt {margin-block-start:var(--space-3);}
.u-row {display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;}
.u-between {justify-content:space-between;}
.u-push {margin-inline-start:auto;}

.u-faint {color:var(--text-faint); font-size:var(--text-sm);}
.u-muted {color:var(--text-muted);}
.u-nums {font-variant-numeric:tabular-nums;}

/* Il contenuto largo scorre nel suo contenitore, mai la pagina. */
.c-tablewrap {overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* Movimento ridotto: chi lo chiede, lo ottiene. */
@media (prefers-reduced-motion:reduce) {
	*, *::before, *::after {
		animation-duration:0.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:0.01ms !important;
	}
	html {scroll-behavior:auto;}
}

/* ══════════ LAYOUT ══════════ */
/* ───────────────────────────────────────────────────────────────────
   Contenitori
   ─────────────────────────────────────────────────────────────────── */
.c-container {
	width:min(100% - 2*var(--space-5), var(--container));
	margin-inline:auto;
}

.c-container--narrow {width:min(100% - 2*var(--space-5), var(--container-narrow));}

.c-main {padding-block-end:var(--space-8);}

.c-section {margin-block-start:var(--space-8);}
.c-section:first-child {margin-block-start:var(--space-7);}

/* Colonna contenuto + colonna laterale */
.c-split {
	display:grid;
	grid-template-columns:minmax(0,1fr) 360px;
	gap:var(--space-7);
	align-items:start;
}
.c-split > * {min-width:0;}
.c-split .c-section:first-child {margin-block-start:var(--space-8);}
@media (max-width:980px) {
	.c-split {grid-template-columns:minmax(0,1fr);}
}

.c-grid {
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
	gap:var(--space-5);
}
.c-grid--players {grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));}
@media (max-width:560px) {
	.c-grid--players {grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-3);}
	.c-grid--players .c-player__number {font-size:2.2rem;}
	.c-grid--players .c-player__name {font-size:1.0625rem;}
}

/* ───────────────────────────────────────────────────────────────────
   IL PIXEL DISSOLTO — il bordo che si sgretola in scacchiera.
   Una fascia sola, riusata da hero e piede.
   ─────────────────────────────────────────────────────────────────── */
.c-pixels {
	height:calc(var(--pixel) * 2);
	background:
		conic-gradient(var(--field) 25%, transparent 0 50%, var(--field) 0 75%, transparent 0)
			0 0 / calc(var(--pixel) * 2) calc(var(--pixel) * 2),
		linear-gradient(transparent 0 50%, var(--field) 50%);
	pointer-events:none;
}
.c-pixels--flip {transform:scaleY(-1);}

/* ───────────────────────────────────────────────────────────────────
   TESTATA — una barra sola, scura, asciutta. Niente barra utility:
   social e legali vivono nel piede, la ricerca sta nella barra.
   ─────────────────────────────────────────────────────────────────── */
.c-header {
	position:sticky;
	inset-block-start:0;
	z-index:var(--z-header);
}

.c-topbar {display:none;}   /* markup legacy: se presente, sparisce */

.c-nav {
	position:relative;
	background:var(--ink-2);
	background-image:var(--pinstripe);
	border-block-end:3px solid var(--green);
}

.c-nav .c-container {
	display:flex;
	align-items:center;
	gap:var(--space-5);
	min-height:var(--nav-h);
}

.c-logo {display:flex; align-items:center; flex:none;}
.c-logo img {height:46px; width:auto;}

/* — voci del menu: condensate, corsive, con la sottolineatura a slab — */
.c-menu {
	display:flex;
	align-items:stretch;
	margin-inline-start:auto;
	height:var(--nav-h);
}
.c-menu > li {position:relative; display:flex;}
.c-menu > li > a, .c-menu > li > span {
	position:relative;
	display:flex;
	align-items:center;
	padding-inline:var(--space-4);
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:1.125rem;
	letter-spacing:var(--tracking-wide);
	text-transform:uppercase;
	color:var(--text-inverse);
	cursor:pointer;
	white-space:nowrap;
	transition:color var(--fast) var(--ease);
}
/* Lo slab: un blocco verde che cresce da sinistra sotto la voce. */
.c-menu > li > a::after, .c-menu > li > span::after {
	content:"";
	position:absolute;
	inset-block-end:18px;
	inset-inline:var(--space-4);
	height:5px;
	background:var(--green);
	transform:scaleX(0);
	transform-origin:0 50%;
	transition:transform var(--fast) var(--ease);
}
.c-menu > li:hover > a, .c-menu > li:hover > span,
.c-menu > li:focus-within > a, .c-menu > li:focus-within > span {color:var(--green-light);}
.c-menu > li:hover > a::after, .c-menu > li:hover > span::after,
.c-menu > li:focus-within > a::after, .c-menu > li:focus-within > span::after,
.c-menu > li.is-current > a::after {transform:scaleX(1);}
.c-menu > li.is-current > a {color:#ffffff;}

/* — la ricerca, compatta — */
.c-search {
	order:10;
	display:flex;
	align-items:center;
	background:rgba(255,255,255,0.08);
	box-shadow:inset 0 0 0 1px var(--border-inverse);
}
.c-search input {
	width:150px;
	padding:6px var(--space-2) 6px var(--space-3);
	background:none;
	border:0;
	color:var(--text-inverse);
	font-size:var(--text-sm);
}
.c-search input::placeholder {color:var(--text-inverse-muted);}
.c-search input:focus-visible {box-shadow:none;}
.c-search button {padding:6px var(--space-3); color:var(--green-light);}
.c-search:focus-within {box-shadow:inset 0 0 0 2px var(--green);}

/* — tendine — */
.c-menu > li > ul {
	position:absolute;
	inset-block-start:100%;
	inset-inline-start:0;
	min-width:250px;
	background:var(--ink-2);
	background-image:var(--pinstripe);
	border-block-start:3px solid var(--green);
	box-shadow:var(--shadow-lift);
	padding-block:var(--space-2);
	opacity:0;
	visibility:hidden;
	translate:0 8px;
	transition:opacity var(--fast) var(--ease), translate var(--fast) var(--ease), visibility var(--fast);
	z-index:var(--z-dropdown);
}
.c-menu > li:last-child > ul {inset-inline-start:auto; inset-inline-end:0;}
.c-menu > li:hover > ul, .c-menu > li:focus-within > ul {
	opacity:1;
	visibility:visible;
	translate:0 0;
}
.c-menu > li > ul a {
	display:block;
	padding:var(--space-2) var(--space-4);
	color:var(--text-inverse);
	font-size:var(--text-sm);
}
.c-menu > li > ul a:hover {background:var(--green); color:var(--text-on-green);}
.c-menu > li > ul a small {color:inherit; opacity:0.7;}

/* Terzo livello (archivio): gruppo interno con titoletto verde. */
.c-menu > li > ul li > span {
	display:block;
	padding:var(--space-3) var(--space-4) var(--space-1);
	font-family:var(--font-display);
	font-weight:var(--weight-bold);
	font-size:var(--text-xs);
	letter-spacing:0.08em;
	text-transform:uppercase;
	color:var(--green-light);
}
.c-menu > li > ul ul a {padding-inline-start:var(--space-6);}

.c-menu__toggle {display:none;}

/* — testata stretta — */
@media (max-width:1080px) {
	.c-search {display:none;}
}
@media (max-width:980px) {
	.c-menu__toggle {
		display:inline-flex;
		align-items:center;
		justify-content:center;
		margin-inline-start:auto;
		width:44px; height:44px;
		font-size:1.4rem;
		color:var(--text-inverse);
	}
	.c-menu {
		position:absolute;
		inset-block-start:100%;
		inset-inline:0;
		height:auto;
		margin:0;
		flex-direction:column;
		align-items:stretch;
		background:var(--ink-2);
		background-image:var(--pinstripe);
		border-block-end:3px solid var(--green);
		box-shadow:var(--shadow-lift);
		padding-block:var(--space-2);
		max-height:calc(100dvh - var(--nav-h));
		overflow-y:auto;
	}
	.c-menu[hidden] {display:none;}
	.c-menu > li {display:block;}
	.c-menu > li > a, .c-menu > li > span {padding-block:var(--space-3);}
	.c-menu > li > a::after, .c-menu > li > span::after {display:none;}
	.c-menu > li.is-current > a {color:var(--green-light);}
	.c-menu > li > ul {
		position:static;
		opacity:1;
		visibility:visible;
		translate:none;
		box-shadow:none;
		border-block-start:0;
		border-inline-start:3px solid var(--green-dark);
		margin-inline-start:var(--space-4);
		padding-block:0 var(--space-2);
	}
}

/* ───────────────────────────────────────────────────────────────────
   IL NASTRO — la striscia verde che scorre, da bordocampo.
   Markup: .c-marquee > .c-marquee__track con DUE gruppi identici.
   ─────────────────────────────────────────────────────────────────── */
.c-marquee {
	overflow:hidden;
	background:var(--green);
	color:var(--ink);
	border-block:3px solid var(--ink);
}
.c-marquee__track {
	display:flex;
	width:max-content;
	animation:c-marquee 30s linear infinite;
}
.c-marquee__group {
	display:flex;
	align-items:center;
	flex:none;
	padding-block:var(--space-2);
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:1.25rem;
	letter-spacing:0.06em;
	text-transform:uppercase;
	white-space:nowrap;
}
.c-marquee__group > span {padding-inline:var(--space-5);}
.c-marquee__group .c-creeper {width:0.95em; height:0.95em;}
@keyframes c-marquee {to {transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce) {
	.c-marquee__track {animation:none;}
}

/* ───────────────────────────────────────────────────────────────────
   HERO — la foto in duotone, il titolo enorme, il bordo che si
   sgretola in pixel verso la carta.
   ─────────────────────────────────────────────────────────────────── */
.c-hero {
	position:relative;
	background:var(--ink-2) url("../images/bgMain1.jpg") center 30% / cover no-repeat;
	color:var(--text-inverse);
	isolation:isolate;
	--hard:var(--green-deep);
}
/* La lente duotone: carbone che scurisce, verde che tinge. */
.c-hero::before {
	content:"";
	position:absolute;
	inset:0;
	background:
		linear-gradient(100deg, rgba(var(--ink-rgb),0.92) 8%, rgba(var(--ink-rgb),0.55) 55%, rgba(var(--ink-rgb),0.25) 100%),
		linear-gradient(180deg, rgba(var(--green-rgb),0.18), rgba(var(--green-rgb),0.30));
	z-index:-1;
}
/* Il creeper in filigrana, a destra. */
.c-hero::after {
	content:"";
	position:absolute;
	inset-block-end:12%;
	inset-inline-end:5%;
	aspect-ratio:1;
	height:64%;
	background:var(--green);
	opacity:0.12;
	-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M1 1h2v2H1zM5 1h2v2H5zM3 3h2v2H3zM2 4h4v2H2zM2 6h1v1H2zM5 6h1v1H5z'/></svg>") center / contain no-repeat;
	mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M1 1h2v2H1zM5 1h2v2H5zM3 3h2v2H3zM2 4h4v2H2zM2 6h1v1H2zM5 6h1v1H5z'/></svg>") center / contain no-repeat;
	pointer-events:none;
	z-index:-1;
}
@media (max-width:760px) {.c-hero::after {display:none;}}

.c-hero .c-container {
	padding-block:clamp(64px, 10vw, 128px) clamp(56px, 8vw, 104px);
}

/* La fascia di pixel in chiusura dell'hero. */
.c-hero + .c-pixels, .c-hero .c-pixels {
	position:absolute;
	inset-block-end:0;
	inset-inline:0;
}
.c-hero {padding-block-end:calc(var(--pixel) * 2);}

.c-hero__kicker {
	display:inline-flex;
	align-items:center;
	gap:var(--space-2);
	margin-block-end:var(--space-4);
	font-family:var(--font-display);
	font-weight:var(--weight-bold);
	font-size:var(--text-md);
	letter-spacing:0.14em;
	text-transform:uppercase;
	color:var(--green-light);
}
.c-hero__kicker::before {content:""; width:10px; height:10px; background:var(--green);}

.c-hero__title {
	font-size:var(--text-2xl);
	font-style:italic;
	line-height:0.94;
	letter-spacing:-0.01em;
	max-width:16ch;
	text-wrap:balance;
	color:#ffffff;
	text-shadow:0 2px 24px rgba(0,0,0,0.35);
}
/* La parola marcata: blocco verde, testo d'inchiostro. */
.c-hero__title em {
	font-style:inherit;
	color:var(--ink);
	background:var(--green);
	padding-inline:0.14em;
	box-decoration-break:clone;
	-webkit-box-decoration-break:clone;
}

/* La seconda voce del titolo: presente, ma un gradino sotto. */
.c-hero__title small {
	display:block;
	margin-block-start:0.12em;
	font-size:0.52em;
	color:#ffffff;
	opacity:0.92;
}

.c-hero__sub {
	margin-block-start:var(--space-5);
	max-width:52ch;
	font-size:var(--text-md);
	color:var(--text-inverse);
	opacity:0.9;
}

.c-hero__actions {
	margin-block-start:var(--space-6);
	display:flex;
	gap:var(--space-4);
	flex-wrap:wrap;
}

/* ───────────────────────────────────────────────────────────────────
   TITOLO DI SEZIONE — pixel verde, corsivo enorme, slab d'inchiostro.
   ─────────────────────────────────────────────────────────────────── */
.c-title {
	display:flex;
	align-items:baseline;
	gap:var(--space-4);
	margin-block-end:var(--space-5);
	padding-block-end:var(--space-3);
	border-block-end:4px solid var(--ink);
	font-size:var(--text-xl);
	font-style:italic;
	line-height:1;
	letter-spacing:0;
	color:var(--text);
}
.c-title::before {
	content:"";
	flex:none;
	width:0.42em;
	height:0.42em;
	background:var(--green);
	align-self:center;
}

/* Il sottotitolo dentro il nastro: <small> accanto al testo del titolo. */
.c-title small {
	font-family:var(--font);
	font-style:normal;
	font-weight:var(--weight-normal);
	font-size:var(--text-sm);
	letter-spacing:normal;
	text-transform:none;
	color:var(--text-muted);
	align-self:center;
}

.c-title__aside {
	margin-inline-start:auto;
	font-family:var(--font);
	font-style:normal;
	font-weight:var(--weight-normal);
	font-size:var(--text-sm);
	letter-spacing:normal;
	text-transform:none;
	white-space:nowrap;
}

.c-title + .u-faint {margin-block-start:calc(-1 * var(--space-3)); margin-block-end:var(--space-4);}

@media (max-width:700px) {
	.c-title {flex-wrap:wrap;}
	.c-title__aside {
		flex-basis:100%;
		margin-inline-start:calc(0.42em + var(--space-4));
		white-space:normal;
	}
}

/* ───────────────────────────────────────────────────────────────────
   PIEDE — carbone, il wordmark gigante in filigrana, la galleria,
   il bordo in pixel verso la carta.
   ─────────────────────────────────────────────────────────────────── */
.c-footer {
	position:relative;
	margin-block-start:var(--space-8);
	background:var(--ink-2);
	background-image:var(--pinstripe);
	color:var(--text-inverse);
}
/* Il bordo superiore si sgretola dalla carta al carbone. */
.c-footer::before {
	content:"";
	position:absolute;
	inset-block-start:0;
	inset-inline:0;
	height:calc(var(--pixel) * 2);
	background:
		conic-gradient(var(--field) 25%, transparent 0 50%, var(--field) 0 75%, transparent 0)
			0 0 / calc(var(--pixel) * 2) calc(var(--pixel) * 2),
		linear-gradient(var(--field) 0 50%, transparent 50%);
	pointer-events:none;
}

/* Il wordmark in filigrana: enorme, solo contorno. */
.c-footer__mark {
	padding-block-start:calc(var(--pixel) * 2 + var(--space-6));
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:clamp(4rem, 12vw, 11rem);
	line-height:0.9;
	text-transform:uppercase;
	color:transparent;
	-webkit-text-stroke:1px rgba(255,255,255,0.22);
	user-select:none;
	pointer-events:none;
	white-space:nowrap;
	overflow:hidden;
}

.c-footer__cols {
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
	gap:var(--space-6);
	padding-block:var(--space-6);
}

.c-footer h4 {
	display:flex;
	align-items:center;
	gap:var(--space-2);
	margin-block-end:var(--space-3);
	font-style:italic;
	font-size:var(--text-md);
	letter-spacing:0.06em;
}
.c-footer h4::before {content:""; width:9px; height:9px; background:var(--green);}
.c-footer__cols h4:not(:first-child) {margin-block-start:var(--space-5);}

.c-footer__cols li {padding-block:3px;}
.c-footer__cols a {color:var(--text-inverse-muted); font-size:var(--text-sm);}
.c-footer__cols a:hover {color:var(--green-light);}

.c-social {display:flex; gap:var(--space-2);}
.c-social a {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:38px; height:38px;
	font-size:1.2rem;
	background:var(--ink-3);
	color:var(--text-inverse);
}
.c-social a:hover {background:var(--green); color:var(--text-on-green);}

.c-footer__gallery {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:var(--space-1);
}
.c-footer__gallery a {display:block;}
.c-footer__gallery img {
	width:100%;
	aspect-ratio:1;
	object-fit:cover;
}
.c-footer__gallery + .c-social {margin-block-start:var(--space-3);}

.c-footer__bottom {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--space-4);
	flex-wrap:wrap;
	padding-block:var(--space-4) var(--space-5);
	border-block-start:1px solid var(--border-inverse);
	color:var(--text-inverse-muted);
	font-size:var(--text-sm);
}
.c-footer__bottom a {color:var(--text-inverse-muted); text-decoration:underline; text-underline-offset:3px;}
.c-footer__bottom a:hover {color:var(--green-light);}
.c-footer__bottom .c-creeper {color:var(--green);}

/* ═══════════════════════════════════════════════════════════════════
   COMPOSIZIONE A BANDE (home) — niente colonna+sidebar: sezioni a
   tutta larghezza, ognuna col proprio carattere.
   ═══════════════════════════════════════════════════════════════════ */

/* — hero a due colonne: il claim a sinistra, il TABELLONE a destra — */
.c-hero__grid {
	display:grid;
	grid-template-columns:minmax(0, 1.1fr) minmax(340px, 0.9fr);
	gap:var(--space-7);
	align-items:center;
}
@media (max-width:980px) {
	.c-hero__grid {grid-template-columns:minmax(0,1fr);}
}

/* — il tabellone: l'ultima (o la prossima) partita, in grande — */
.c-billboard {
	background:linear-gradient(160deg, rgba(29,31,33,0.94), rgba(29,31,33,0.86));
	border:1px solid var(--border-inverse);
	border-block-start:4px solid var(--green);
	padding:var(--space-5);
	box-shadow:var(--shadow-hard);
	--hard:var(--green-deep);
}
.c-billboard__label {
	display:inline-flex;
	align-items:center;
	gap:var(--space-2);
	margin-block-end:var(--space-4);
	padding:2px var(--space-3);
	background:var(--green);
	color:var(--ink);
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:var(--text-sm);
	letter-spacing:0.08em;
	text-transform:uppercase;
}
.c-billboard__row {
	display:flex;
	align-items:center;
	gap:var(--space-3);
	padding-block:var(--space-3);
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
	text-transform:uppercase;
	color:#ffffff;
	min-width:0;
}
.c-billboard__row + .c-billboard__row {border-block-start:1px solid var(--border-inverse);}
.c-billboard__row > span {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Il sottolineato "siamo noi" va sul NOME, non sullo scudetto (che è
   anch'esso uno span: senza il :not finiva la riga verde sotto il logo). */
.c-billboard__row.is-us > span:not(.c-teambadge) {
	background:linear-gradient(var(--green), var(--green)) 0 92% / 100% 5px no-repeat;
}
.c-billboard__goals {
	margin-inline-start:auto;
	font-size:clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem);
	line-height:1;
	color:var(--green-light);
	font-variant-numeric:tabular-nums;
}
.c-billboard__row.is-loser .c-billboard__goals {color:var(--text-inverse-muted); opacity:0.75;}
.c-billboard__when {
	font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem);
	color:var(--green-light);
	margin-inline-start:auto;
}
.c-billboard__meta {
	display:flex;
	flex-wrap:wrap;
	gap:var(--space-1) var(--space-3);
	margin-block-start:var(--space-3);
	padding-block-start:var(--space-3);
	border-block-start:1px solid var(--border-inverse);
	font-size:var(--text-xs);
	font-weight:var(--weight-medium);
	letter-spacing:0.05em;
	text-transform:uppercase;
	color:var(--text-inverse-muted);
}
.c-billboard__meta span + span::before {content:"▪ "; color:var(--green);}
.c-billboard__cta {margin-block-start:var(--space-4);}
.c-billboard .c-teambadge {width:36px; height:38px; font-size:0.9rem;}

/* — la rail dei punteggi: uno scoreboard orizzontale, scorrevole — */
.c-scores {
	display:flex;
	overflow-x:auto;
	scroll-snap-type:x proximity;
	background:var(--card);
	border-block:3px solid var(--ink);
	-webkit-overflow-scrolling:touch;
}
.c-scores__item {
	flex:1 0 250px;
	scroll-snap-align:start;
	padding:var(--space-4) var(--space-5);
	color:inherit;
	transition:background var(--fast) var(--ease);
}
.c-scores__item + .c-scores__item {border-inline-start:1px solid var(--border-strong);}
a.c-scores__item:hover {background:var(--green-soft); color:inherit;}
.c-scores__date {
	display:block;
	margin-block-end:var(--space-2);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:var(--text-xs);
	font-weight:var(--weight-medium);
	letter-spacing:0.06em;
	text-transform:uppercase;
	color:var(--text-faint);
}
.c-scores__line {
	display:flex;
	align-items:center;
	gap:var(--space-2);
	padding-block:2px;
	font-family:var(--font-display);
	font-weight:var(--weight-bold);
	font-size:1.0625rem;
	text-transform:uppercase;
	min-width:0;
}
.c-scores__line > span {flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.c-scores__line > b {font-variant-numeric:tabular-nums; font-size:1.125rem;}
.c-scores__line.is-loser {color:var(--text-muted); font-weight:var(--weight-medium);}
.c-scores__line.is-loser > b {font-weight:var(--weight-medium);}
.c-scores__line .c-teambadge {width:22px; height:24px; font-size:0.6rem;}
.c-scores__outcome {flex:none; align-self:center; margin-inline-start:var(--space-2);}

/* — le due anime: split fotografico a tutta larghezza — */
.c-duo {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:4px;
	background:var(--green);
	border-block:3px solid var(--ink);
	margin-block-start:var(--space-8);
}
.c-duo__half {
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	align-items:flex-start;
	min-height:clamp(320px, 38vw, 460px);
	padding:var(--space-7) var(--space-6);
	background-size:cover;
	background-position:center;
	color:#ffffff;
	isolation:isolate;
	overflow:hidden;
}
.c-duo__half::before {
	content:"";
	position:absolute;
	inset:0;
	background:
		linear-gradient(180deg, rgba(var(--ink-rgb),0.35) 0%, rgba(var(--ink-rgb),0.88) 88%),
		linear-gradient(0deg, rgba(var(--green-rgb),0.16), rgba(var(--green-rgb),0.16));
	z-index:-1;
	transition:opacity var(--normal) var(--ease);
}
.c-duo__half:hover::before {opacity:0.82;}
.c-duo__kicker {
	font-family:var(--font-display);
	font-weight:var(--weight-bold);
	font-size:var(--text-sm);
	letter-spacing:0.12em;
	text-transform:uppercase;
	color:var(--green-light);
}
.c-duo__half h3 {
	margin-block:var(--space-1) var(--space-2);
	font-style:italic;
	font-size:clamp(1.75rem, 1.3rem + 2vw, 3rem);
	line-height:1;
	text-shadow:0 2px 16px rgba(0,0,0,0.4);
}
.c-duo__half p {max-width:44ch; font-size:var(--text-sm); opacity:0.85; margin-block-end:var(--space-4);}
.c-duo__links {display:flex; gap:var(--space-3); flex-wrap:wrap;}
@media (max-width:820px) {
	.c-duo {grid-template-columns:1fr;}
}

/* — la banda scura: classifica in negativo con la posizione gigante — */
.c-band {
	position:relative;
	background:var(--ink-2);
	background-image:var(--pinstripe);
	color:var(--text-inverse);
	padding-block:calc(var(--pixel) * 2 + var(--space-7));
	margin-block-start:var(--space-8);
}
.c-band::before, .c-band::after {
	content:"";
	position:absolute;
	inset-inline:0;
	height:calc(var(--pixel) * 2);
	pointer-events:none;
}
.c-band::before {
	inset-block-start:0;
	background:
		conic-gradient(var(--field) 25%, transparent 0 50%, var(--field) 0 75%, transparent 0)
			0 0 / calc(var(--pixel) * 2) calc(var(--pixel) * 2),
		linear-gradient(var(--field) 0 50%, transparent 50%);
}
.c-band::after {
	inset-block-end:0;
	background:
		conic-gradient(var(--field) 25%, transparent 0 50%, var(--field) 0 75%, transparent 0)
			0 0 / calc(var(--pixel) * 2) calc(var(--pixel) * 2),
		linear-gradient(transparent 0 50%, var(--field) 50%);
}

.c-band .c-title {color:#ffffff; border-block-end-color:var(--green);}
.c-band .c-title__aside {color:var(--text-inverse-muted);}

.c-band__grid {
	display:grid;
	grid-template-columns:280px minmax(0,1fr);
	gap:var(--space-7);
	align-items:center;
}
@media (max-width:900px) {
	.c-band__grid {grid-template-columns:minmax(0,1fr);}
}

.c-rankpos {text-align:center;}
.c-rankpos__value {
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:clamp(6rem, 4rem + 8vw, 10rem);
	line-height:0.9;
	color:var(--green);
}
.c-rankpos__value sup {font-size:0.35em; vertical-align:super;}
.c-rankpos__label {
	margin-block-start:var(--space-2);
	font-family:var(--font-display);
	font-weight:var(--weight-bold);
	font-size:var(--text-md);
	letter-spacing:0.06em;
	text-transform:uppercase;
	color:var(--text-inverse-muted);
}

/* Il tabellone in negativo, dentro la banda. */
.c-band .c-tablewrap {background:transparent; border-color:var(--border-inverse);}
.c-band .c-table thead th {background:transparent; border-block-end-color:var(--green); color:var(--text-inverse-muted);}
.c-band .c-table td {border-block-start-color:var(--border-inverse); color:#ffffff;}
.c-band .c-table tbody tr:nth-child(even) {background:rgba(255,255,255,0.035);}
.c-band .c-table tbody tr:hover {background:rgba(var(--green-rgb),0.15);}
.c-band .c-table tr.is-us {background:rgba(var(--green-rgb),0.18) !important; box-shadow:inset 5px 0 0 var(--green);}
.c-band .c-pos {background:var(--ink-3); border-color:var(--border-inverse); color:var(--text-inverse-muted);}
.c-band .c-pos--1 {background:linear-gradient(180deg, #edbf45, #c8961b); border-color:#8a6408; color:#3d2d06;}
.c-band .c-pos--2 {background:linear-gradient(180deg, #dbe1e6, #a9b3bb); border-color:#7c868e; color:#333c43;}
.c-band .c-pos--3 {background:linear-gradient(180deg, #d59d64, #a9713b); border-color:#7d5227; color:#3c2410;}

/* — news editoriali: una in evidenza, le altre compatte — */
.c-newsgrid {
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
	gap:var(--space-5);
	margin-block-start:var(--space-5);
}
.c-bubble--big {grid-template-columns:128px minmax(0,1fr);}
.c-bubble--big .c-bubble__who img {width:128px; height:128px;}
.c-bubble--big .c-bubble__msg {padding:var(--space-5) var(--space-6); font-size:var(--text-md);}
@media (max-width:560px) {
	.c-bubble--big {grid-template-columns:64px minmax(0,1fr);}
	.c-bubble--big .c-bubble__who img {width:64px; height:64px;}
}

/* — la striscia d'invito: verde pieno, da un bordo all'altro — */
.c-cta {
	background:var(--green);
	border-block:3px solid var(--ink);
	color:var(--ink);
	margin-block-start:var(--space-8);
}
.c-cta .c-container {
	display:flex;
	align-items:center;
	gap:var(--space-5);
	flex-wrap:wrap;
	padding-block:var(--space-6);
}
.c-cta .c-creeper {width:44px; height:44px; flex:none;}
.c-cta h3 {font-style:italic; font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); line-height:1;}
.c-cta p {font-size:var(--text-sm); opacity:0.8;}
.c-cta .c-btn {margin-inline-start:auto; background:var(--ink); color:#ffffff; border-color:var(--ink); --hard:var(--green-deep);}
.c-cta .c-btn:hover {color:#ffffff;}
@media (max-width:700px) {
	.c-cta .c-btn {margin-inline-start:0;}
}

/* Contatti nel piede (dai dati societari del BMS: compaiono solo se compilati) */
.c-footer__contacts li {padding-block:3px; font-size:var(--text-sm); color:var(--text-inverse-muted);}
.c-footer__contacts a {color:var(--text-inverse-muted);}
.c-footer__contacts a:hover {color:var(--green-light);}

/* ══════════ UI ══════════ */
/* ───────────────────────────────────────────────────────────────────
   BOTTONI — targhe da manifesto: bordo d'inchiostro, ombra dura.
   All'hover si sollevano verso l'ombra; al click ci si appoggiano.
   ─────────────────────────────────────────────────────────────────── */
.c-btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:var(--space-2);
	padding:var(--space-2) var(--space-5);
	background:var(--green);
	color:var(--ink);
	border:2px solid var(--ink);
	box-shadow:var(--shadow-hard-sm);
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:1.0625rem;
	letter-spacing:var(--tracking-wide);
	text-transform:uppercase;
	transition:translate var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
	cursor:pointer;
}
.c-btn:hover {color:var(--ink); translate:-2px -2px; box-shadow:var(--shadow-hard);}
.c-btn:active {translate:1px 1px; box-shadow:1px 1px 0 var(--hard);}
.c-btn:focus-visible {box-shadow:var(--focus-ring);}

.c-btn--ghost {background:var(--card); color:var(--ink);}
.c-btn--ghost:hover {background:var(--green-soft); color:var(--ink);}
.c-hero .c-btn--ghost {background:transparent; color:#ffffff; border-color:#ffffff; --hard:rgba(255,255,255,0.85);}
.c-hero .c-btn--ghost:hover {background:rgba(255,255,255,0.12); color:#ffffff;}

.c-btn--quiet {
	background:none;
	border:0;
	box-shadow:none;
	padding:var(--space-1) var(--space-2);
	font-family:var(--font);
	font-style:normal;
	font-weight:var(--weight-medium);
	font-size:var(--text-sm);
	letter-spacing:normal;
	text-transform:none;
	color:inherit;
	text-decoration:underline;
	text-underline-offset:4px;
	text-decoration-thickness:2px;
	text-decoration-color:var(--green);
}
.c-btn--quiet:hover {color:var(--green-dark); translate:none; box-shadow:none;}

.c-btn--sm {padding:var(--space-1) var(--space-4); font-size:var(--text-sm); box-shadow:2px 2px 0 var(--hard);}
.c-btn--sm:hover {box-shadow:var(--shadow-hard-sm);}
.c-btn--block {display:flex; width:100%;}

/* ───────────────────────────────────────────────────────────────────
   CHIP ed ETICHETTE
   ─────────────────────────────────────────────────────────────────── */
.c-chips {display:flex; flex-wrap:wrap; gap:var(--space-2);}

.c-chip {
	display:inline-flex;
	align-items:center;
	gap:var(--space-1);
	padding:4px var(--space-3);
	background:var(--card);
	border:1px solid var(--border-strong);
	color:var(--text-muted);
	font-size:var(--text-sm);
	font-weight:var(--weight-medium);
	transition:all var(--fast) var(--ease);
}
a.c-chip:hover {border-color:var(--ink); color:var(--ink); box-shadow:2px 2px 0 var(--hard);}
.c-chip.is-active {
	background:var(--green);
	border:1px solid var(--ink);
	color:var(--ink);
	font-weight:var(--weight-bold);
	box-shadow:2px 2px 0 var(--hard);
}

.c-badge {
	display:inline-block;
	padding:2px var(--space-2);
	background:var(--card-2);
	border:1px solid var(--border-strong);
	color:var(--text-muted);
	font-family:var(--font-display);
	font-size:0.8125rem;
	font-weight:var(--weight-bold);
	letter-spacing:0.05em;
	text-transform:uppercase;
	white-space:nowrap;
}
.c-badge--green {background:var(--green); border-color:var(--ink); color:var(--ink);}
.c-badge--win  {background:var(--win-soft);  border-color:var(--win);  color:var(--win);}
.c-badge--draw {background:var(--draw-soft); border-color:var(--draw); color:#8a6707;}
.c-badge--lose {background:var(--lose-soft); border-color:var(--lose); color:var(--lose);}
.c-badge--role {background:none; border-color:var(--green-dark); color:var(--green-deep);}

/* ───────────────────────────────────────────────────────────────────
   SCHEDE — linee fini a riposo; ombra dura e scarto all'hover.
   ─────────────────────────────────────────────────────────────────── */
.c-card {
	position:relative;
	display:flex;
	flex-direction:column;
	background:var(--card);
	border:1px solid var(--border-strong);
	overflow:hidden;
	transition:translate var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
a.c-card {color:inherit;}
a.c-card:hover {
	translate:-3px -3px;
	border-color:var(--ink);
	box-shadow:var(--shadow-hard);
	color:inherit;
}

.c-card__media {display:block; aspect-ratio:16 / 9; background:var(--card-2); overflow:hidden;}
.c-card__media img {
	width:100%;
	height:100%;
	object-fit:cover;
}

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

.c-card__meta {
	display:flex;
	flex-wrap:wrap;
	gap:var(--space-1) var(--space-2);
	font-size:var(--text-xs);
	font-weight:var(--weight-medium);
	letter-spacing:0.05em;
	text-transform:uppercase;
	color:var(--text-faint);
}
.c-card__meta span + span::before {content:"▪ "; color:var(--green);}

.c-card__title {
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:1.375rem;
	line-height:var(--leading-tight);
	text-transform:uppercase;
	color:var(--text);
}
a.c-card:hover .c-card__title {color:var(--green-deep);}

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

.c-card__foot {
	margin-block-start:auto;
	padding:var(--space-3) var(--space-4);
	border-block-start:1px solid var(--border);
	font-size:var(--text-sm);
	color:var(--text-muted);
}

/* ───────────────────────────────────────────────────────────────────
   SCUDETTO SQUADRA — monogramma su scudo; per i Creepers il crest vero.
   La tinta arriva dal markup come --tb (tonalità 0-359 dal nome).
   ─────────────────────────────────────────────────────────────────── */
.c-teambadge {
	flex:none;
	width:30px;
	height:32px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:linear-gradient(180deg, hsl(var(--tb, 110) 38% 46%), hsl(var(--tb, 110) 42% 32%));
	color:#ffffff;
	font-family:var(--font-display);
	font-weight:var(--weight-bold);
	font-size:0.78rem;
	letter-spacing:0.02em;
	text-shadow:0 1px 2px rgba(0,0,0,0.4);
	clip-path:polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}
.c-teambadge--img {background:none; clip-path:none;}
.c-teambadge--img img {width:100%; height:100%; object-fit:contain;}

/* ───────────────────────────────────────────────────────────────────
   PARTITA — due squadre, la targa del punteggio tagliata nel mezzo.
   ─────────────────────────────────────────────────────────────────── */
.c-match {
	position:relative;
	display:grid;
	/*	Colonne limitate + griglia centrata: su uno schermo largo il
		tabellino resta un blocco compatto al centro della scheda, non un
		filo di testo sperso nel bianco.	*/
	grid-template-columns:minmax(0,340px) auto minmax(0,340px);
	justify-content:center;
	align-items:center;
	gap:var(--space-2) var(--space-4);
	padding:var(--space-4);
	background:var(--card);
	border:1px solid var(--border-strong);
	color:inherit;
	transition:translate var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
a.c-match:hover {
	translate:-3px -3px;
	border-color:var(--ink);
	box-shadow:var(--shadow-hard);
	color:inherit;
}

.c-match__team {
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:var(--space-3);
	min-width:0;
	font-family:var(--font-display);
	font-size:1.375rem;
	font-weight:var(--weight-bold);
	text-transform:uppercase;
	letter-spacing:0.01em;
	text-align:end;
}
.c-match__team > span {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.c-match__team--away {justify-content:flex-start; text-align:start;}
/* Il sottolineato va sul NOME, mai sullo scudetto (anch'esso uno span). */
.c-match__team.is-us > span:not(.c-teambadge) {
	background:linear-gradient(var(--green), var(--green)) 0 88% / 100% 5px no-repeat;
}

.c-match__score {
	display:inline-flex;
	align-items:baseline;
	justify-content:center;
	gap:var(--space-1);
	min-width:100px;
	padding:var(--space-2) var(--space-3);
	background:var(--ink);
	color:#ffffff;
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:1.625rem;
	line-height:1;
	clip-path:var(--cut-shape);
	white-space:nowrap;
}
.c-match__score i {font-style:normal; font-size:1rem; opacity:0.55;}
.c-match__score--win  {background:var(--win); color:#ffffff;}
.c-match__score--draw {background:var(--draw); color:#241c02;}
.c-match__score--lose {background:var(--lose); color:#ffffff;}
.c-match__score--pending {
	background:var(--card-2);
	box-shadow:inset 0 0 0 1px var(--border-strong);
	color:var(--text-muted);
	font-size:1.25rem;
}

.c-match__meta {
	grid-column:1 / -1;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:var(--space-1) var(--space-3);
	margin-block-start:var(--space-1);
	padding-block-start:var(--space-2);
	border-block-start:1px solid var(--border);
	font-size:var(--text-xs);
	font-weight:var(--weight-medium);
	letter-spacing:0.05em;
	text-transform:uppercase;
	color:var(--text-faint);
}
.c-match__meta span + span::before {content:"▪ "; color:var(--green);}

/* Su schermo stretto la partita si impila: squadre una sotto l'altra a
   sinistra, targa del punteggio a destra su entrambe le righe. Niente
   nomi troncati. */
@media (max-width:560px) {
	.c-match {
		grid-template-columns:minmax(0,1fr) auto;
		grid-template-areas:
			"t1 s"
			"t2 s"
			"meta meta";
	}
	.c-match__team {
		grid-area:t1;
		flex-direction:row-reverse;
		justify-content:flex-end;
		text-align:start;
		font-size:1.125rem;
	}
	.c-match__team--away {grid-area:t2; flex-direction:row;}
	.c-match__score {grid-area:s; align-self:center; min-width:78px; font-size:1.25rem;}
	.c-match__meta {grid-area:meta;}
}

/* ───────────────────────────────────────────────────────────────────
   TABELLONI — editoriali: testata leggera, slab d'inchiostro,
   la nostra riga marcata a verde.
   ─────────────────────────────────────────────────────────────────── */
.c-tablewrap {
	background:var(--card);
	border:1px solid var(--border-strong);
}

.c-table {font-size:var(--text-sm);}
.c-table thead th {
	padding:var(--space-2) var(--space-3);
	background:var(--card);
	border-block-end:3px solid var(--ink);
	color:var(--text-muted);
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:var(--text-sm);
	letter-spacing:0.07em;
	text-transform:uppercase;
	text-align:start;
	white-space:nowrap;
}
.c-table td {
	padding:var(--space-2) var(--space-3);
	border-block-start:1px solid var(--border);
	vertical-align:middle;
}
.c-table tbody tr:first-child td {border-block-start:0;}
.c-table tbody tr:nth-child(even) {background:var(--card-2);}
.c-table tbody tr:hover {background:var(--green-soft);}

.c-table__name {width:100%;}
td.c-table__name {font-weight:var(--weight-medium);}
td.c-table__name a {color:inherit;}
td.c-table__name a:hover {color:var(--green-deep);}
.c-table__num {text-align:end; font-variant-numeric:tabular-nums; white-space:nowrap;}
th.c-table__num {text-align:end;}

.c-table tr.is-us {
	background:var(--green-soft) !important;
	box-shadow:inset 5px 0 0 var(--green);
}
.c-table tr.is-us td {font-weight:var(--weight-bold);}

/* Cella "squadra": scudetto + nome sulla stessa riga. */
.c-teamcell {display:flex; align-items:center; gap:var(--space-2); min-width:0;}
.c-teamcell > span {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* Posizione in classifica: tessera; podio in metallo. */
.c-pos {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:26px;
	height:26px;
	padding-inline:var(--space-1);
	background:var(--card-2);
	border:1px solid var(--border-strong);
	color:var(--text-muted);
	font-family:var(--font-display);
	font-weight:var(--weight-bold);
	font-size:0.9375rem;
}
.c-pos--1 {background:linear-gradient(180deg, #edbf45, #c8961b); border-color:#8a6408; color:#3d2d06;}
.c-pos--2 {background:linear-gradient(180deg, #dbe1e6, #a9b3bb); border-color:#7c868e; color:#333c43;}
.c-pos--3 {background:linear-gradient(180deg, #d59d64, #a9713b); border-color:#7d5227; color:#3c2410;}

/* ───────────────────────────────────────────────────────────────────
   NUMERI E STATISTICHE
   ─────────────────────────────────────────────────────────────────── */
.c-stats {
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
	gap:var(--space-4);
}

.c-stat {
	padding:var(--space-4);
	background:var(--card);
	border:1px solid var(--border-strong);
	border-block-start:5px solid var(--green);
	text-align:center;
}
.c-stat__value {
	display:block;
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:clamp(2.2rem, 1.6rem + 2vw, 3.25rem);
	line-height:1;
	color:var(--ink);
	font-variant-numeric:tabular-nums;
}
.c-stat__label {
	display:block;
	margin-block-start:var(--space-2);
	font-size:var(--text-xs);
	font-weight:var(--weight-medium);
	letter-spacing:0.07em;
	text-transform:uppercase;
	color:var(--text-muted);
}

/* Numero di maglia */
.c-number {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:36px;
	background:var(--ink);
	color:var(--green-light);
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:1.25rem;
}
.c-number--empty {background:none; border:2px dashed var(--border-strong); color:var(--text-faint);}

/* ───────────────────────────────────────────────────────────────────
   GIOCATORE — la figurina: foto in duotone che si accende, numero
   gigante, targa del nome.
   ─────────────────────────────────────────────────────────────────── */
.c-player {
	position:relative;
	display:block;
	background:var(--card);
	border:1px solid var(--border-strong);
	overflow:hidden;
	color:inherit;
	transition:translate var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
a.c-player:hover {
	translate:-3px -3px;
	border-color:var(--ink);
	box-shadow:var(--shadow-hard);
	color:inherit;
}

.c-player__photo {
	display:block;   /* nel markup è uno span: senza, l'aspect-ratio collassa */
	aspect-ratio:3 / 4;
	background:linear-gradient(180deg, #e6e5dc, #d2d1c6);
	overflow:hidden;
}
.c-player__photo img {
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:top;
}

.c-player__number {
	position:absolute;
	inset-block-start:2px;
	inset-inline-end:var(--space-3);
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:3.4rem;
	line-height:1;
	color:transparent;
	-webkit-text-stroke:2px #ffffff;
	text-shadow:0 2px 14px rgba(0,0,0,0.35);
	z-index:1;
}

.c-player__body {
	display:block;
	position:relative;
	padding:var(--space-3) var(--space-4) var(--space-4);
	background:var(--card);
	border-block-start:4px solid var(--green);
}
.c-player__name {
	display:block;
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:1.375rem;
	line-height:var(--leading-tight);
	text-transform:uppercase;
}
.c-player__role {
	display:block;
	margin-block-start:2px;
	font-size:var(--text-xs);
	font-weight:var(--weight-medium);
	letter-spacing:0.06em;
	text-transform:uppercase;
	color:var(--text-muted);
}

/* Persona (organigramma, staff): riga compatta con avatar. */
.c-person {display:flex; align-items:center; gap:var(--space-3);}
.c-person__avatar {
	flex:none;
	width:48px;
	height:48px;
	object-fit:cover;
	border:2px solid var(--ink);
	box-shadow:3px 3px 0 var(--green);
	background:var(--card-2);
}
.c-person__name {font-weight:var(--weight-bold);}

/* ───────────────────────────────────────────────────────────────────
   FUMETTO — le news in stile Hattrick: il personaggio parla al Capo.
   Avatar nella cornice pixel, nuvoletta con la coda.
   ─────────────────────────────────────────────────────────────────── */
.c-bubble {
	display:grid;
	grid-template-columns:96px minmax(0,1fr);
	gap:var(--space-5);
	align-items:start;
}
.c-bubble__who {text-align:center;}
.c-bubble__who img {
	width:96px;
	height:96px;
	object-fit:cover;
	border:2px solid var(--ink);
	box-shadow:4px 4px 0 var(--green);
}
.c-bubble__name {
	margin-block-start:var(--space-3);
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:var(--text-base);
	text-transform:uppercase;
	line-height:1.2;
}
.c-bubble__role {font-size:var(--text-xs); color:var(--text-muted);}

.c-bubble__msg {
	position:relative;
	padding:var(--space-4) var(--space-5);
	background:var(--card);
	border:1px solid var(--border-strong);
}
.c-bubble__msg::before {
	content:"";
	position:absolute;
	inset-block-start:34px;
	inset-inline-start:-8px;
	width:15px;
	height:15px;
	background:var(--card);
	border-inline-start:1px solid var(--border-strong);
	border-block-end:1px solid var(--border-strong);
	transform:rotate(45deg);
}
.c-bubble__msg h3 {
	margin-block-end:var(--space-2);
	font-style:italic;
	font-size:1.25rem;
}
.c-bubble__date {
	display:block;
	margin-block-end:var(--space-2);
	font-size:var(--text-xs);
	color:var(--text-faint);
	text-align:end;
}

@media (max-width:560px) {
	.c-bubble {grid-template-columns:64px minmax(0,1fr); gap:var(--space-4);}
	.c-bubble__who img {width:64px; height:64px;}
}

/* ───────────────────────────────────────────────────────────────────
   IMPIANTO (campo da gioco)
   ─────────────────────────────────────────────────────────────────── */
.c-field {display:block;}
.c-field .c-card__media {aspect-ratio:16 / 10;}
.c-field address {font-style:normal; font-size:var(--text-sm); color:var(--text-muted);}

/* ───────────────────────────────────────────────────────────────────
   MESSAGGI E STATI
   ─────────────────────────────────────────────────────────────────── */
.c-note {
	padding:var(--space-3) var(--space-4);
	background:var(--card);
	border:1px solid var(--border-strong);
	border-inline-start:5px solid var(--ink-3);
	font-size:var(--text-sm);
}
.c-note--ok    {border-inline-start-color:var(--win);  background:linear-gradient(90deg, var(--win-soft), var(--card) 40%);}
.c-note--warn  {border-inline-start-color:var(--draw); background:linear-gradient(90deg, var(--draw-soft), var(--card) 40%);}
.c-note--error {border-inline-start-color:var(--lose); background:linear-gradient(90deg, var(--lose-soft), var(--card) 40%);}

.c-empty {
	padding:var(--space-7) var(--space-5);
	border:2px dashed var(--border-strong);
	text-align:center;
	color:var(--text-muted);
}
.c-empty .c-creeper {
	width:52px;
	height:52px;
	color:var(--green);
	opacity:0.55;
	margin-block-end:var(--space-3);
}

.c-skeleton {
	background:linear-gradient(90deg, var(--card-2) 25%, #e3e2d8 42%, var(--card-2) 60%);
	background-size:200% 100%;
	animation:c-shimmer 1.4s linear infinite;
	color:transparent;
	min-height:1em;
}
@keyframes c-shimmer {to {background-position:-200% 0;}}

/* ───────────────────────────────────────────────────────────────────
   MODULI
   ─────────────────────────────────────────────────────────────────── */
.c-form {display:flex; flex-direction:column; gap:var(--space-4); max-width:var(--container-narrow);}

.c-label {
	display:block;
	margin-block-end:var(--space-1);
	font-size:var(--text-sm);
	font-weight:var(--weight-bold);
}

.c-input, .c-select {
	width:100%;
	padding:var(--space-2) var(--space-3);
	background:var(--card);
	border:1px solid var(--border-strong);
	transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.c-input:focus-visible, .c-select:focus-visible {
	border-color:var(--ink);
	box-shadow:var(--shadow-hard-sm);
	outline:none;
}
.c-input::placeholder {color:var(--text-faint);}

/* ───────────────────────────────────────────────────────────────────
   NAVIGAZIONE SECONDARIA
   ─────────────────────────────────────────────────────────────────── */
.c-tabs {
	display:flex;
	gap:var(--space-2);
	border-block-end:3px solid var(--ink);
	margin-block-end:var(--space-5);
	overflow-x:auto;
}
.c-tabs a {
	padding:var(--space-2) var(--space-4);
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:var(--text-md);
	letter-spacing:var(--tracking-wide);
	text-transform:uppercase;
	color:var(--text-muted);
	white-space:nowrap;
}
.c-tabs a:hover {color:var(--text);}
.c-tabs a.is-active {background:var(--green); color:var(--ink);}

.c-pager {display:flex; justify-content:center; gap:var(--space-2); flex-wrap:wrap;}
.c-pager a, .c-pager span {
	min-width:34px;
	padding:var(--space-1) var(--space-2);
	text-align:center;
	background:var(--card);
	border:1px solid var(--border-strong);
	font-variant-numeric:tabular-nums;
	color:var(--text-muted);
}
.c-pager a:hover {border-color:var(--ink); color:var(--ink); box-shadow:2px 2px 0 var(--hard);}
.c-pager .is-active {background:var(--green); border-color:var(--ink); color:var(--ink); font-weight:var(--weight-bold);}

/* ───────────────────────────────────────────────────────────────────
   PROSA — testi lunghi (policy, regolamenti, descrizioni)
   ─────────────────────────────────────────────────────────────────── */
.c-prose {color:var(--text-muted); font-size:var(--text-sm); line-height:var(--leading-normal);}
.c-prose h4 {margin-block:var(--space-5) var(--space-2); font-style:italic; font-size:1.25rem; color:var(--text);}
.c-prose h5 {margin-block:var(--space-4) var(--space-1); font-style:italic; font-size:1.0625rem; color:var(--text);}
.c-prose p + p {margin-block-start:var(--space-3);}
.c-prose ul {margin-block:var(--space-3); padding-inline-start:var(--space-5); list-style:square;}
.c-prose li {padding-block:2px;}
.c-prose li::marker {color:var(--green);}
.c-prose a {text-decoration:underline; text-underline-offset:3px;}
.c-prose b, .c-prose strong {color:var(--text);}

/* ───────────────────────────────────────────────────────────────────
   FAQ — domanda in evidenza, risposta in prosa
   ─────────────────────────────────────────────────────────────────── */
.c-faq {display:flex; flex-direction:column; gap:var(--space-4);}
.c-faq__item {background:var(--card); border:1px solid var(--border-strong); padding:var(--space-5);}
.c-faq__q {
	display:flex;
	align-items:baseline;
	gap:var(--space-3);
	margin-block-end:var(--space-3);
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:1.375rem;
	line-height:var(--leading-tight);
	text-transform:uppercase;
}
.c-faq__q::before {content:""; flex:none; width:10px; height:10px; background:var(--green); align-self:center;}
.c-faq__a {color:var(--text-muted); font-size:var(--text-sm);}
.c-faq__a p + p {margin-block-start:var(--space-3);}
.c-faq__a b {color:var(--text);}

/* ───────────────────────────────────────────────────────────────────
   404 — il creeper ha fatto esplodere la pagina
   ─────────────────────────────────────────────────────────────────── */
.c-notfound {text-align:center; padding-block:var(--space-8);}
.c-notfound__code {
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:clamp(6rem, 4rem + 10vw, 12rem);
	line-height:0.9;
	color:transparent;
	-webkit-text-stroke:3px var(--green);
}
.c-notfound .c-creeper {width:72px; height:72px; color:var(--ink); margin-block:var(--space-4);}
.c-notfound p {color:var(--text-muted); max-width:44ch; margin-inline:auto;}
.c-notfound .u-row {justify-content:center; margin-block-start:var(--space-5);}

/* ───────────────────────────────────────────────────────────────────
   CALENDARIO MENSILE — griglia da tabellone; su schermo stretto
   diventa agenda (i giorni vuoti spariscono).
   ─────────────────────────────────────────────────────────────────── */
.c-cal__nav {display:flex; align-items:center; gap:var(--space-3); margin-block-end:var(--space-4);}
.c-cal__month {
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:var(--text-lg);
	text-transform:uppercase;
	margin-inline:var(--space-2);
}

.c-cal {
	display:grid;
	grid-template-columns:repeat(7, minmax(0,1fr));
	gap:2px;
	background:var(--border-strong);
	border:1px solid var(--border-strong);
}
.c-cal__head {
	padding:var(--space-1) var(--space-2);
	background:var(--ink);
	background-image:var(--pinstripe);
	color:var(--text-inverse);
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:var(--text-xs);
	letter-spacing:0.08em;
	text-transform:uppercase;
	text-align:center;
}
.c-cal__day {
	min-height:96px;
	padding:var(--space-1) var(--space-2) var(--space-2);
	background:var(--card);
}
.c-cal__day--pad {background:var(--card-2);}
.c-cal__num {
	display:block;
	font-family:var(--font-display);
	font-weight:var(--weight-bold);
	font-size:var(--text-sm);
	color:var(--text-faint);
	text-align:end;
}
.c-cal__day.is-today {box-shadow:inset 0 3px 0 var(--green);}
.c-cal__day.is-today .c-cal__num {color:var(--green-deep);}
.c-cal__event {
	display:block;
	margin-block-start:var(--space-1);
	padding:2px var(--space-2);
	background:var(--green-soft);
	border-inline-start:3px solid var(--green);
	color:var(--text);
	font-size:var(--text-xs);
	line-height:1.35;
}
a.c-cal__event:hover {background:var(--green); color:var(--ink);}
.c-cal__event b {display:block; font-weight:var(--weight-bold);}
.c-cal__event--birthday {border-inline-start-color:var(--draw); background:var(--draw-soft);}
a.c-cal__event--birthday:hover {background:var(--draw); color:#241c02;}

@media (max-width:860px) {
	.c-cal {display:flex; flex-direction:column;}
	.c-cal__head {display:none;}
	.c-cal__day {min-height:0;}
	.c-cal__day--pad, .c-cal__day.is-empty {display:none;}
	.c-cal__num {text-align:start;}
	.c-cal__num::before {content:attr(data-day) " "; color:var(--text-muted);}
}

/* ───────────────────────────────────────────────────────────────────
   PROFILO — testa delle pagine giocatore/avversario: ritratto o
   scudetto a sinistra, anagrafica e numeri a destra.
   ─────────────────────────────────────────────────────────────────── */
.c-profile {
	display:grid;
	grid-template-columns:260px minmax(0,1fr);
	gap:var(--space-6);
	align-items:start;
	margin-block-end:var(--space-6);
}
@media (max-width:760px) {
	.c-profile {grid-template-columns:minmax(0,1fr);}
	.c-profile__photo {max-width:260px;}
}
.c-profile__photo {
	background:linear-gradient(180deg, #e6e5dc, #d2d1c6);
	border:1px solid var(--border-strong);
	box-shadow:var(--shadow-hard);
	overflow:hidden;
}
.c-profile__photo img {
	width:100%;
	aspect-ratio:3 / 4;
	object-fit:cover;
	object-position:top;
}
.c-profile__name {
	font-style:italic;
	font-size:var(--text-xl);
	line-height:1;
}
.c-profile__nick {color:var(--text-muted); font-size:var(--text-sm); margin-block-start:var(--space-1);}
.c-profile .u-row {margin-block-start:var(--space-3);}
.c-profile .c-stats {margin-block-start:var(--space-5);}
.c-profile__desc {margin-block-start:var(--space-4); max-width:60ch; color:var(--text-muted); font-size:var(--text-sm);}

/* Esiti dei rigori nella pagina partita */
.c-pen {display:flex; flex-wrap:wrap; gap:var(--space-2);}
.c-pen__item {
	display:inline-flex;
	align-items:center;
	gap:var(--space-2);
	padding:var(--space-1) var(--space-3);
	background:var(--card);
	border:1px solid var(--border-strong);
	font-size:var(--text-sm);
}
.c-pen__item.is-goal {border-inline-start:4px solid var(--win);}
.c-pen__item.is-miss {border-inline-start:4px solid var(--lose); color:var(--text-muted);}

/* La tendina delle stagioni passate (tournament.chips): chiusa di default,
   il muro di pillole vive qui dentro. */
.c-chips-more {margin-block-start:var(--space-2);}
.c-chips-more > summary {
	display:inline-flex;
	align-items:center;
	gap:var(--space-1);
	padding:4px var(--space-3);
	background:var(--card-2);
	border:1px dashed var(--border-strong);
	color:var(--text-muted);
	font-size:var(--text-sm);
	font-weight:var(--weight-medium);
	cursor:pointer;
	list-style:none;
	user-select:none;
}
.c-chips-more > summary::-webkit-details-marker {display:none;}
.c-chips-more > summary::after {content:"▾"; color:var(--green-dark);}
.c-chips-more[open] > summary::after {content:"▴";}
.c-chips-more > summary:hover {border-color:var(--ink); color:var(--ink);}
.c-chips-more > .c-chips {margin-block-start:var(--space-3);}

/* Nella pillola attiva (verde) il grigio non si legge: la stagione va
   in inchiostro attenuato. */
.c-chip.is-active .u-faint {color:var(--text-on-green); opacity:0.65;}


/* ───────────────────────────────────────────────────────────────────
   GRIGLIA DI PARTITE — box compatti, quattro per riga su desktop.
   Dentro la griglia il tabellino usa il layout impilato (come su
   mobile): squadre una sotto l'altra, punteggio a destra.
   ─────────────────────────────────────────────────────────────────── */
.c-matchgrid {
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
	gap:var(--space-3);
}
.c-matchgrid .c-match {
	grid-template-columns:minmax(0,1fr) auto;
	grid-template-areas:
		"t1 s"
		"t2 s"
		"meta meta";
	justify-content:stretch;
	padding:var(--space-3);
}
.c-matchgrid .c-match__team {
	grid-area:t1;
	flex-direction:row-reverse;
	justify-content:flex-end;
	text-align:start;
	font-size:1.0625rem;
	gap:var(--space-2);
}
.c-matchgrid .c-match__team--away {grid-area:t2; flex-direction:row;}
.c-matchgrid .c-match__score {
	grid-area:s;
	align-self:center;
	min-width:70px;
	font-size:1.25rem;
	padding:var(--space-1) var(--space-2);
}
.c-matchgrid .c-match__score--pending {font-size:1rem;}
.c-matchgrid .c-match__meta {grid-area:meta; justify-content:flex-start;}
.c-matchgrid .c-teambadge {width:24px; height:26px; font-size:0.62rem;}

/* Figurina senza foto: niente "?" d'archivio, una tessera neutra col creeper. */
.c-player__photo--empty {
	display:flex;
	align-items:center;
	justify-content:center;
}
.c-player__photo--empty .c-creeper {
	width:64px;
	height:64px;
	color:var(--border-strong);
}

/* ───────────────────────────────────────────────────────────────────
   GIORNATE A SCHEDE — come il sito storico: ogni giornata è un box
   (testata scura + partite come righe compatte), quattro per riga.
   ─────────────────────────────────────────────────────────────────── */
.c-rounds {
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
	gap:var(--space-4);
	align-items:start;
}

.c-round {
	background:var(--card);
	border:1px solid var(--border-strong);
}
.c-round__head {
	display:flex;
	align-items:center;
	gap:var(--space-2);
	padding:var(--space-2) var(--space-3);
	background:var(--ink);
	background-image:var(--pinstripe);
	color:var(--text-inverse);
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:var(--text-base);
	letter-spacing:0.04em;
	text-transform:uppercase;
	border-block-end:3px solid var(--green);
}
.c-round__head span {
	margin-inline-start:auto;
	font-family:var(--font);
	font-style:normal;
	font-weight:var(--weight-normal);
	font-size:var(--text-xs);
	letter-spacing:normal;
	color:var(--text-inverse-muted);
}

.c-round__match {
	display:grid;
	grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
	align-items:center;
	gap:var(--space-2);
	padding:var(--space-2) var(--space-3);
	color:inherit;
	font-size:var(--text-sm);
}
.c-round__match + .c-round__match {border-block-start:1px solid var(--border);}
a.c-round__match:hover {background:var(--green-soft); color:inherit;}

.c-round__team {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	text-align:end;
}
.c-round__team--away {text-align:start;}
.c-round__team.is-us {
	font-weight:var(--weight-bold);
	background:linear-gradient(var(--green), var(--green)) 0 92% / 100% 3px no-repeat;
}

.c-round__score {
	min-width:44px;
	padding:1px var(--space-2);
	text-align:center;
	background:var(--ink);
	color:#ffffff;
	font-family:var(--font-display);
	font-weight:var(--weight-bold);
	font-size:var(--text-sm);
	clip-path:polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
	white-space:nowrap;
}
.c-round__score--win  {background:var(--win);}
.c-round__score--draw {background:var(--draw); color:#241c02;}
.c-round__score--lose {background:var(--lose);}
.c-round__score--pending {background:var(--card-2); box-shadow:inset 0 0 0 1px var(--border-strong); color:var(--text-muted);}

/* ───────────────────────────────────────────────────────────────────
   TABELLONE (bracket) — la fase finale a colonne: i turni da sinistra
   a destra, i connettori a gomito tra le coppie. Su schermo stretto
   scorre in orizzontale.
   ─────────────────────────────────────────────────────────────────── */
.c-bracket {
	display:flex;
	gap:var(--space-7);
	overflow-x:auto;
	padding-block:var(--space-2);
	-webkit-overflow-scrolling:touch;
}

.c-bracket__col {
	display:flex;
	flex-direction:column;
	flex:1 0 250px;
	min-width:250px;
}
.c-bracket__label {
	margin-block-end:var(--space-3);
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:var(--text-md);
	letter-spacing:0.04em;
	text-transform:uppercase;
	text-align:center;
}

/* Le partite del turno, distribuite in verticale per allinearsi al
   turno successivo. */
.c-bracket__list {
	flex:1;
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	gap:var(--space-4);
}

/* Una COPPIA di partite col gomito verso il turno dopo. */
.c-bracket__pair {
	position:relative;
	flex:1;
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	gap:var(--space-4);
}
.c-bracket__col:not(:last-child) .c-bracket__pair--joined::after {
	content:"";
	position:absolute;
	inset-block:25%;
	inset-inline-end:calc(-1 * var(--space-7) / 2);
	width:calc(var(--space-7) / 2);
	border-block:2px solid var(--border-strong);
	border-inline-end:2px solid var(--border-strong);
	pointer-events:none;
}
/* Il trattino che entra nella partita dal turno precedente. */
.c-bracket__col:not(:first-child) .c-bracket__match::before {
	content:"";
	position:absolute;
	inset-block-start:50%;
	inset-inline-start:calc(-1 * var(--space-7) / 2);
	width:calc(var(--space-7) / 2);
	border-block-start:2px solid var(--border-strong);
	pointer-events:none;
}

.c-bracket__match {
	position:relative;
	display:block;
	background:var(--card);
	border:1px solid var(--border-strong);
	color:inherit;
	transition:translate var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
a.c-bracket__match:hover {
	translate:-2px -2px;
	border-color:var(--ink);
	box-shadow:var(--shadow-hard-sm);
	color:inherit;
	z-index:1;
}

.c-bracket__row {
	display:flex;
	align-items:center;
	gap:var(--space-2);
	padding:var(--space-2) var(--space-3);
	font-size:var(--text-sm);
}
.c-bracket__row + .c-bracket__row {border-block-start:1px solid var(--border);}
.c-bracket__row > span {
	flex:1;
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.c-bracket__row > b {
	font-family:var(--font-display);
	font-weight:var(--weight-bold);
	font-size:var(--text-base);
	font-variant-numeric:tabular-nums;
}
.c-bracket__row.is-winner {font-weight:var(--weight-bold);}
.c-bracket__row.is-winner > b {color:var(--green-deep);}
.c-bracket__row.is-loser {color:var(--text-muted);}
.c-bracket__row.is-us > span {
	background:linear-gradient(var(--green), var(--green)) 0 92% / 100% 3px no-repeat;
}
.c-bracket__when {
	padding:var(--space-1) var(--space-3);
	border-block-start:1px dashed var(--border);
	font-size:var(--text-xs);
	color:var(--text-faint);
	text-transform:uppercase;
	letter-spacing:0.04em;
}

/* L'esito ai rigori, dentro le targhe dei punteggi. */
.c-match__score small, .c-round__score small {
	font-size:0.62em;
	font-style:normal;
	font-weight:var(--weight-medium);
	opacity:0.85;
	letter-spacing:0;
}

/* ───────────────────────────────────────────────────────────────────
   FIGURINA: la tabella delle annate (come il sito storico)
   ─────────────────────────────────────────────────────────────────── */
.c-player__stats {
	display:block;
	border-block-start:1px solid var(--border);
	padding:var(--space-2) var(--space-3);
	background:var(--card);
}
.c-player__stats table {width:100%; font-size:var(--text-xs);}
.c-player__stats th {
	font-family:var(--font-display);
	font-weight:var(--weight-bold);
	letter-spacing:0.05em;
	text-transform:uppercase;
	color:var(--text-faint);
	text-align:start;
	padding:2px 4px;
	border-block-end:2px solid var(--ink);
}
.c-player__stats td {padding:2px 4px; border-block-start:1px solid var(--border); color:var(--text-muted);}
.c-player__stats .u-nums, .c-player__stats th.u-nums {text-align:end;}
.c-player__stats tr.is-total td {border-block-start:2px solid var(--ink); font-weight:var(--weight-bold); color:var(--text);}

/* ───────────────────────────────────────────────────────────────────
   SCHEDA GIOCATORE: citazione, anagrafica, palloni e trofei
   ─────────────────────────────────────────────────────────────────── */
.c-quote {
	position:relative;
	padding:var(--space-4) var(--space-5);
	background:var(--card);
	border:1px solid var(--border-strong);
	border-inline-start:5px solid var(--green);
	font-style:italic;
	color:var(--text-muted);
}
.c-quote strong {
	display:block;
	margin-block-start:var(--space-2);
	font-style:normal;
	font-size:var(--text-xs);
	letter-spacing:0.06em;
	text-transform:uppercase;
	color:var(--text-faint);
	text-align:end;
}

.c-facts th {
	padding:var(--space-1) var(--space-3);
	text-align:start;
	font-size:var(--text-xs);
	font-weight:var(--weight-medium);
	letter-spacing:0.04em;
	text-transform:uppercase;
	color:var(--text-faint);
	white-space:nowrap;
	vertical-align:top;
}
.c-facts td {font-weight:var(--weight-medium);}

.c-balls {display:inline-flex; flex-wrap:wrap; gap:2px; align-items:center;}
.c-balls img {width:15px; height:15px;}

.c-trophygrid {display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:flex-end;}
.c-trophygrid a {display:block; width:64px;}
.c-trophygrid img {width:100%; height:auto; transition:transform var(--fast) var(--ease);}
.c-trophygrid a:hover img {transform:translateY(-3px);}

/* ───────────────────────────────────────────────────────────────────
   PAGINE LEGALI — testo lungo con indice a lato
   ─────────────────────────────────────────────────────────────────── */
.c-legal__eyebrow {
	margin-block-end:var(--space-3);
	font-family:var(--font-display);
	font-weight:var(--weight-bold);
	font-size:var(--text-sm);
	letter-spacing:0.1em;
	text-transform:uppercase;
	color:var(--green-deep);
}
.c-legal__section {margin-block-start:var(--space-7); scroll-margin-block-start:calc(var(--nav-h) + var(--space-5));}
/* Il ritmo del testo: dentro le legali i blocchi arrivano dal JSON uno
   dietro l'altro, e senza questo respiro sembrano un muro unico. */
.c-legal__section .c-prose > * + * {margin-block-start:var(--space-4);}
.c-legal__section .c-prose p {line-height:1.7;}
.c-legal__section .c-prose ul {margin-block:0; padding-inline-start:var(--space-5);}
.c-legal__section .c-prose li + li {margin-block-start:var(--space-2);}
.c-legal__section .c-prose li {line-height:1.65;}
.c-legal__section > h2 {
	margin-block-end:var(--space-3);
	padding-block-end:var(--space-2);
	border-block-end:2px solid var(--border-strong);
	font-style:italic;
	font-size:var(--text-lg);
}
.c-legal__note {
	margin-block-start:var(--space-3);
	padding:var(--space-3) var(--space-4);
	background:var(--card);
	border:1px solid var(--border);
	border-inline-start:4px solid var(--draw);
	font-size:var(--text-sm);
}
.c-legal__toc, .c-legal__related {
	padding:var(--space-4);
	background:var(--card);
	border:1px solid var(--border-strong);
	margin-block-end:var(--space-4);
}
.c-legal__toc {position:sticky; inset-block-start:calc(var(--nav-h) + var(--space-4));}
.c-legal__toc li {padding-block:5px; line-height:1.4;}
.c-legal__toc a {text-decoration:none;}
.c-legal__toc a:hover {text-decoration:underline; text-underline-offset:3px;}
.c-legal__toctitle {
	margin-block-end:var(--space-2);
	font-family:var(--font-display);
	font-style:italic;
	font-weight:var(--weight-bold);
	font-size:var(--text-md);
	text-transform:uppercase;
}
.c-legal__toc ol {counter-reset:toc; font-size:var(--text-sm);}
.c-legal__toc li {counter-increment:toc; padding-block:3px;}
.c-legal__toc li::before {content:counter(toc) ". "; color:var(--green-dark); font-weight:var(--weight-bold);}
.c-legal__toc a, .c-legal__related a {color:var(--text-muted);}
.c-legal__toc a:hover, .c-legal__related a:hover {color:var(--green-deep);}
.c-legal__related li {padding-block:3px; font-size:var(--text-sm);}
.c-legal__related li::before {content:"▪ "; color:var(--green);}