/* ==========================================================================
   Nalim W — design system multipagina
   Rosso rossonero (#e4032e) su due temi, chiaro e scuro. In dark il
   testo rosso usa una variante piu' chiara, in light una piu' scura:
   stesso principio scoperto il 20/08 ottimizzando il vecchio sito
   a pagina singola (contrasto verificato per ciascun contesto).
   ========================================================================== */

:root {
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --content-width: 960px;

  /* Tema chiaro (default) */
  --bg: #faf8f7;
  --surface: #ffffff;
  --surface-hover: #f2eeee;
  --border: rgba(20, 15, 15, 0.12);
  --text: #16110f;
  --text-muted: #6e6360;
  --accent: #e4032e;
  --accent-soft: rgba(228, 3, 46, 0.10);
  --accent-text: #c9032a;
  --accent-text-inverse: #ff3355; /* per testo su sfondi "invertiti" tipo .project-open (bg: var(--text)) */
  --overlay: rgba(250, 248, 247, 0.85);

  --shadow-sm: 0 1px 2px rgba(20, 15, 15, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 15, 15, 0.12);

  color-scheme: light;
}

/* Tema scuro: automatico via preferenza di sistema... */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0c;
    --surface: #161316;
    --surface-hover: #1f191b;
    --border: #2b2226;
    --text: #f2eeee;
    --text-muted: #9c9296;
    --accent: #e4032e;
    --accent-soft: rgba(228, 3, 46, 0.16);
    --accent-text: #ff3355;
    --accent-text-inverse: #c9032a;
    --overlay: rgba(10, 10, 12, 0.85);
    color-scheme: dark;
  }
}

/* ...o forzato dal toggle */
:root[data-theme="dark"] {
  --bg: #0a0a0c;
  --surface: #161316;
  --surface-hover: #1f191b;
  --border: #2b2226;
  --text: #f2eeee;
  --text-muted: #9c9296;
  --accent: #e4032e;
  --accent-soft: rgba(228, 3, 46, 0.16);
  --accent-text: #ff3355;
  --accent-text-inverse: #c9032a;
  --overlay: rgba(10, 10, 12, 0.85);
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  transition: background-color .2s ease, color .2s ease;
}

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

.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding-inline: 24px;
}

a { color: inherit; }

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

.is-hidden { display: none !important; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 8px;
  z-index: 200;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---- Barra novità (ticker notizie in cima) ---- */
.site-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
}

.novita-bar {
  position: relative;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.novita-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 8px 24px;
}

.novita-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.novita-ticker {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.novita-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: novita-scroll 30s linear infinite;
}

.novita-ticker:hover .novita-track,
.novita-ticker:focus-within .novita-track {
  animation-play-state: paused;
}

.novita-item {
  flex-shrink: 0;
  color: var(--text);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.novita-item:hover {
  color: var(--accent-text);
}

.novita-item.is-loading {
  color: var(--text-muted);
  pointer-events: none;
}

.novita-sep {
  flex-shrink: 0;
  color: var(--border);
}

@keyframes novita-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .novita-track {
    animation: none;
  }
  .novita-ticker {
    overflow-x: auto;
  }
}

/* ---- Header ---- */
.site-header {
  background: var(--overlay);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: .65rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}
.brand img { border-radius: 6px; }

/* Wordmark "Nalim W": la W finale porta una sfumatura rossa che scorre.
   Font Saira Semi Condensed, sottoinsieme delle sole 6 lettere N a l i m W
   (~3 kb, self-hosted: nessuna richiesta a Google, nessun cookie). OFL. */
@font-face {
  font-family: "Saira Semi Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/saira-semicondensed-700-nalimw.woff2") format("woff2");
  unicode-range: U+4E, U+57, U+61, U+69, U+6C-6D;
}

.brand-name {
  font-family: "Saira Semi Condensed", var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.005em;
}
.brand-name .wm-w,
.wordmark .wm-w {
  background: linear-gradient(100deg, #e4032e, #ff415f, #e4032e);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wm-slide 6s linear infinite;
}
@keyframes wm-slide { to { background-position: -250% 0; } }
@media (prefers-reduced-motion: reduce) {
  .brand-name .wm-w,
  .wordmark .wm-w { animation: none; background-position: 40% 0; }
}

.main-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem 1.15rem;
  flex: 1;
  min-width: 0;
}
.main-nav a {
  text-decoration: none;
  font-size: .9rem;
  white-space: nowrap;
  color: var(--text-muted);
  position: relative;
  padding-block: .25rem .4rem;
  flex-shrink: 0;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--text);
}
.main-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.nav-toggle {
  display: none;
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
}
.nav-toggle svg { width: 20px; height: 20px; }

.install-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
  transition: background-color .15s ease, border-color .15s ease;
}
.install-btn:hover { background: var(--surface-hover); border-color: var(--accent); }
.install-btn svg { width: 20px; height: 20px; }
.install-btn[hidden] { display: none; }

/* ---- Theme toggle ---- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .25rem;
  flex-shrink: 0;
}
.theme-toggle button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.theme-toggle button svg { width: 15px; height: 15px; }
.theme-toggle button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--accent-text);
  box-shadow: var(--shadow-sm);
}

/* ---- Condividi ---- */
.share-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.share-btn:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
}
.share-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.about-linkedin { margin-top: 16px; text-decoration: none; }

.share-menu { position: relative; display: inline-flex; }
.share-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.share-trigger:hover { background: var(--surface-hover); border-color: var(--accent); }
.share-trigger svg { width: 16px; height: 16px; flex-shrink: 0; }
.share-trigger[disabled] { opacity: .5; cursor: not-allowed; }
.share-trigger[disabled]:hover { background: var(--surface); border-color: var(--border); }
.share-menu-panel {
  position: fixed;
  z-index: 500;
  display: flex;
  flex-direction: column;
  min-width: 168px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.share-menu-panel[hidden] { display: none; }
.share-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.share-option:hover { background: var(--surface-hover); }
.share-option svg { width: 18px; height: 18px; flex-shrink: 0; }

.project-card-links .share-menu-panel { min-width: 152px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  margin: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.875rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 150;
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- Censura "inter" (js/censor.js) ---- */
/* blur in em: proporzionale al testo, resta un filo leggibile a ogni taglia.
   display:inline (non inline-block): cosi' "inter" + "net" non si spezzano
   su due righe (l'inline-block crea un punto di a-capo al suo bordo). */
.milan-censor { filter: blur(0.06em); cursor: help; user-select: none; }

/* ---- Hero home ---- */
/* Foto sfondi: San Siro di notte © Ifichev (CC BY-SA 4.0); Ultras/fumogeni
   © Biser Todorov (CC BY 4.0); skyline notturno di Kyle Sudu (CC0) — via
   Wikimedia Commons. */
/* "notte" = nessuna foto: usa lo sfondo del tema, gia' impostato da `body`
   (regola dedicata rimossa: era ridondante e non seguiva il cambio tema al
   volo su alcuni browser). */
body[data-bg="sansiro"] {
  background:
    linear-gradient(180deg, rgba(10, 10, 12, 0.55) 0%, rgba(10, 10, 12, 0.93) 100%),
    url("/img/san-siro-night.webp") center / cover no-repeat;
}
body[data-bg="trasferta"] {
  background:
    linear-gradient(180deg, rgba(10, 10, 12, 0.6) 0%, rgba(10, 10, 12, 0.94) 100%),
    url("/img/trasferta-city.webp") center / cover no-repeat;
}
body[data-bg="derby"] {
  background:
    linear-gradient(180deg, rgba(5, 5, 6, 0.45) 0%, rgba(5, 5, 6, 0.92) 100%),
    url("/img/derby-ultras.webp") center / cover no-repeat;
}

/* Le foto hanno un'atmosfera scura fissa: se il sito e' in tema chiaro,
   il testo scuro diventerebbe illeggibile sopra di loro. Quando e' attivo
   uno sfondo fotografico si forza la stessa palette del tema scuro,
   indipendentemente dal tema scelto (comportamento del sito originale,
   che aveva un solo tema sempre scuro). */
body[data-bg="sansiro"],
body[data-bg="trasferta"],
body[data-bg="derby"] {
  --bg: #0a0a0c;
  --surface: #161316;
  --surface-hover: #1f191b;
  --border: #2b2226;
  --text: #f2eeee;
  --text-muted: #9c9296;
  --accent-soft: rgba(228, 3, 46, 0.16);
  --accent-text: #ff3355;
  --accent-text-inverse: #c9032a;
  --overlay: rgba(10, 10, 12, 0.85);
  color-scheme: dark;
}

.hero {
  padding-top: 40px;
  padding-bottom: 24px;
  text-align: center;
}

.logo-wrap {
  position: relative;
  display: inline-block;
  margin: 0 auto 24px;
}

.badge-img {
  display: block;
  width: 220px;
  max-width: 60vw;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 4px 18px rgba(228, 3, 46, 0.35));
}

.eyebrow {
  margin: 0 0 18px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wordmark {
  margin: 0 0 10px;
  font-family: "Saira Semi Condensed", var(--font-display, inherit);
  font-size: clamp(2.75rem, 8vw, 4.25rem);
  font-weight: 700;
  letter-spacing: 0;
  text-wrap: balance;
  color: var(--text);
}

.tagline {
  margin: 0 auto 12px;
  max-width: 32ch;
  font-size: 1.0625rem;
  color: var(--text-muted);
}

.days-online {
  margin: 0 0 24px;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.days-online strong {
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

/* ---- Banner "Segui la diretta" (solo nei giorni di partita) ---- */
.matchday-banner {
  position: sticky;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 24px;
  padding: 14px 20px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}
.matchday-banner:hover { background: #ff3350; }
.matchday-banner-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  animation: live-sticky-blink 1.4s ease-in-out infinite;
}
.matchday-banner-arrow { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  .matchday-banner-dot { animation: none; }
}

.bg-switcher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  margin-bottom: 24px;
}

.bg-switcher span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.swatch:hover {
  transform: scale(1.12);
}

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

.swatch--notte { background: #0a0a0c; border-color: var(--border); }
.swatch--sansiro { background: url("/img/san-siro-night.webp") center / cover no-repeat; }
.swatch--trasferta { background: url("/img/trasferta-city.webp") center / cover no-repeat; }
.swatch--derby { background: url("/img/derby-ultras.webp") center / cover no-repeat; }

/* ---- Sezioni home ---- */
.home-section {
  padding-block: 40px;
}
.home-section h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  margin: 0 0 16px;
}
.widget-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-text);
  text-decoration: none;
}
.widget-link:hover { text-decoration: underline; }

.home-widgets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.widget {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 20px;
}
.widget h2 { margin-top: 0; }

.live-status, .live-next {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
}
.live-countdown {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--accent-text);
  font-weight: 600;
}
.live-score {
  margin-top: 10px;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--font-display);
}
.widget .live-minute { margin-top: 6px; }

.recap-summary {
  display: flex;
  align-items: center;
  gap: 14px;
}
.recap-badge {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
}
.recap-badge--win { background: #2e9e4f; }
.recap-badge--draw { background: #6b7280; }
.recap-badge--loss { background: #8a2b2b; }
.recap-meta { flex: 1; min-width: 0; }
.recap-comp {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.recap-teams { font-size: 0.9rem; font-weight: 600; }
.recap-list-empty { color: var(--text-muted); font-size: 0.875rem; margin: 0; }

/* ---- Mascotte GrinEvil che reagisce al risultato (js/grinevil-react.js) ---- */
.grinevil-react { margin: 4px 0 12px; display: flex; justify-content: center; }
/* dimensioni fisse (le stesse di js/grinevil-react.js): riservano lo spazio
   da subito, prima che lo script ridimensioni il canvas, evitando il salto
   di layout dal default 300x150 del canvas. */
.grinevil-react canvas { display: block; width: 76px; height: 100px; }

/* ---- Notizie (elenco completo) ---- */
.news-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.news-list li { border-bottom: 1px solid var(--border); }
.news-list li:last-child { border-bottom: none; }
.news-list a { display: block; padding: 14px 4px; text-decoration: none; color: var(--text); font-size: 0.9375rem; line-height: 1.4; transition: color .15s ease; }
.news-list a:hover { color: var(--accent-text); }
.news-list time { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--text-muted); }
.news-loading { padding: 14px 4px; font-size: 0.9375rem; color: var(--text-muted); }

/* ---- Projects (pagina dedicata: filtri, griglia, voto) ---- */
.project-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; }
.project-tab {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.875rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.project-tab:hover { border-color: var(--accent); color: var(--text); }
.project-tab.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }

.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.project-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background-color .15s ease, border-color .15s ease;
}
.project-card:hover { background: var(--surface-hover); border-color: var(--accent); }
.project-card-image {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #1f191b 0%, #2b2226 55%, #3a1016 100%);
}
.project-card-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(228, 3, 46, 0.1) 1px, transparent 1px),
    linear-gradient(0deg, rgba(228, 3, 46, 0.1) 1px, transparent 1px);
  background-size: 22px 22px;
}
.project-card-image img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; }
.project-carousel { position: absolute; inset: 0; overflow: hidden; }
.project-carousel-track { display: flex; height: 100%; transition: transform .6s ease; }
.project-carousel-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block; }
.project-card-icon { position: relative; font-size: 2.25rem; line-height: 1; }
.project-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.project-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.project-title { font-size: 1.0625rem; font-weight: 600; color: var(--text); }
.project-desc { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.45; flex: 1; margin: 0; }
.project-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.project-rating { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-muted); }
.project-rating-empty { font-size: 0.8125rem; color: var(--text-muted); }
.project-card-links { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.project-open {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent-text-inverse);
  background: var(--text);
  border: 1px solid var(--text);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: 999px;
  transition: filter .15s ease;
}
.project-open:hover { filter: brightness(0.92); }
.project-card-links .share-btn { padding: 4px 12px; font-size: 0.8125rem; }
.project-card-links .share-trigger { padding: 6px 8px; }
.project-card-links .share-trigger svg { margin: 0; width: 15px; height: 15px; }
.project-vote { margin-top: 2px; display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--text-muted); }

.star-display, .star-rating { display: inline-flex; align-items: center; gap: 2px; }
.star-rating { touch-action: none; gap: 4px; }
.star-display { position: relative; line-height: 0; }
.star-display .stars-row { display: flex; gap: 2px; }
.star-display .stars-fg { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; }
.star-display .star svg { width: 16px; height: 16px; display: block; }
.star-rating .star svg { width: 20px; height: 20px; display: block; }
.star-display .stars-bg .star svg { fill: var(--border); }
.star-display .stars-fg .star svg { fill: var(--accent); }
.star-rating .star { border: 0; background: none; padding: 4px; margin: -4px; cursor: pointer; color: var(--border); }
.star-rating .star svg { fill: currentColor; transition: color .1s ease; }
.star-rating .star.is-filled { color: var(--accent); }

@media (max-width: 480px) {
  .project-grid { grid-template-columns: 1fr; }
}

/* ---- Pagine testuali (Chi siamo, Contatti, Cookie policy) ---- */
.legal-page { max-width: 680px; }
.legal-page h1 { font-family: var(--font-display); font-weight: 400; font-size: 2rem; margin: 0 0 8px; }
.legal-page .updated { font-size: 0.8125rem; color: var(--text-muted); margin: 0 0 40px; }
.legal-page h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; margin: 40px 0 12px; color: var(--text); }
.legal-page h3 { font-size: 1rem; font-weight: 600; margin: 24px 0 8px; color: var(--accent-text); }
.legal-page p, .legal-page li { font-size: 0.9375rem; }
.legal-page ul { padding-left: 20px; }
.legal-page a { color: var(--accent-text); }
.legal-page table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 0.875rem; }
.legal-page th, .legal-page td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal-page th { color: var(--text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; }
.legal-page .table-wrap { overflow-x: auto; }
.legal-page .disclaimer { margin-top: 48px; padding: 16px 18px; border: 1px dashed var(--border); border-radius: 10px; font-size: 0.8125rem; color: var(--text-muted); }

/* ---- Radio ---- */
.radio-select-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.radio-select {
  width: 100%;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  cursor: pointer;
}
.radio-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.radio-player { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.radio-player iframe { display: block; }
.radio-player audio { display: block; width: 100%; height: 54px; padding: 8px; }

/* ---- Mascotte DJ che "ascoltano" la radio (mostrate da radio.js) ---- */
.radio-djs { display: flex; justify-content: center; align-items: flex-end; gap: 28px; margin-top: 22px; }
.radio-djs[hidden] { display: none; }
.radio-djs .radio-dj {
  display: inline-flex;
  transform-origin: 50% 85%;
  animation: radio-dj-groove 640ms ease-in-out infinite alternate;
}
.radio-djs .radio-dj:nth-child(2) { animation-delay: -320ms; animation-duration: 560ms; }
.radio-djs .radio-dj img { display: block; width: 88px; height: auto; }
/* mostra la tinta giusta per il tema (default chiaro) */
.radio-djs .radio-dj img.dj-dark { display: none; }
@keyframes radio-dj-groove {
  from { transform: translateY(2px) rotate(-6deg); }
  to   { transform: translateY(-6px) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .radio-djs .radio-dj { animation: none; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .radio-djs .radio-dj img.dj-light { display: none; }
  :root:not([data-theme="light"]) .radio-djs .radio-dj img.dj-dark { display: block; }
}
:root[data-theme="dark"] .radio-djs .radio-dj img.dj-light { display: none; }
:root[data-theme="dark"] .radio-djs .radio-dj img.dj-dark { display: block; }
:root[data-theme="light"] .radio-djs .radio-dj img.dj-light { display: block; }
:root[data-theme="light"] .radio-djs .radio-dj img.dj-dark { display: none; }

/* ---- Consenso cookie / gate ---- */
.consent-gate { padding: 20px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface); text-align: center; }
.consent-gate p { margin: 0 0 12px; font-size: 0.875rem; color: var(--text-muted); }
.radio-player .consent-gate { border: none; border-radius: 10px; min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.cookie-btn {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.cookie-btn--ghost { background: transparent; color: var(--text-muted); }
.cookie-btn--ghost:hover { border-color: var(--text-muted); color: var(--text); }
.cookie-btn--accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.cookie-btn--accent:hover { background: var(--accent-text); }

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 150;
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.cookie-banner p { margin: 0 0 14px; font-size: 0.875rem; line-height: 1.5; color: var(--text); }
.cookie-banner a { color: var(--accent-text); }
.cookie-banner-actions { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 480px) {
  .cookie-banner-actions { flex-direction: column-reverse; }
  .cookie-btn { width: 100%; text-align: center; }
}

/* ---- Meteo ---- */
.weather-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  margin-top: 16px;
}
.weather-icon { flex-shrink: 0; width: 48px; height: 48px; color: var(--accent); }
.weather-icon svg { width: 100%; height: 100%; }
.weather-main { display: flex; flex-direction: column; gap: 2px; }
.weather-temp {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.weather-desc { font-size: 0.9375rem; color: var(--text-muted); }
.weather-range {
  margin-left: auto;
  text-align: right;
  font-size: 0.875rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.weather-range strong { color: var(--text); font-weight: 600; }

/* ---- Link consigliati ---- */
.link-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.link-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  transition: background-color .15s ease, border-color .15s ease;
}
.link-card:hover { background: var(--surface-hover); border-color: var(--accent); }
.link-card a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; text-decoration: none; color: inherit; }
.link-card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.link-title { font-size: 1.0625rem; font-weight: 600; color: var(--text); }
.link-desc { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.45; }
.link-domain { margin-top: 4px; font-size: 0.8125rem; letter-spacing: .03em; color: var(--accent-text); }
.link-arrow { flex-shrink: 0; font-size: 1.25rem; color: var(--text-muted); transition: color .15s ease, transform .15s ease; }
.link-card:hover .link-arrow { color: var(--accent-text); transform: translate(2px, -2px); }
.link-card-end { flex-shrink: 0; display: flex; align-items: center; gap: 12px; }
.link-logo { display: block; height: 44px; width: auto; max-width: 116px; object-fit: contain; border-radius: 6px; }

/* ---- Live Milan (pagina dedicata) ---- */
.live-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 10px 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  margin-top: 16px;
}
.live-card-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
}
.live-team {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.live-team-logo { width: 40px; height: 40px; object-fit: contain; }
.live-team-name {
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-card .live-score {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-top: 0;
}
.live-score-sep { color: var(--text-muted); font-size: 1.5rem; }

.live-events {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.live-event {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-size: 0.875rem;
  max-width: 80%;
}
/* Ogni riga si allinea alla stessa colonna della squadra nel box punteggio qui
   sopra: casa a sinistra, ospite a destra. Così non si confonde a chi appartiene
   un cartellino/gol. Il bordo colorato (accent) resta il segnale "evento Milan",
   indipendente dal lato. */
.live-event.is-milan { border-color: var(--accent); }
.live-event.side-left {
  align-self: flex-start;
  border-left-width: 3px;
}
.live-event.side-right {
  align-self: flex-end;
  flex-direction: row-reverse;
  text-align: right;
  border-right-width: 3px;
}
.live-event-icon { flex-shrink: 0; }
.live-event-minute {
  flex-shrink: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.live-event-text { color: var(--text); }
.live-event-team { color: var(--text-muted); flex-shrink: 0; }
.live-events--compact { margin-top: 10px; gap: 6px; }
.live-events--compact .live-event { padding: 6px 10px; font-size: 0.8125rem; max-width: 88%; }
.live-events--compact .live-event-team { display: none; }

.live-period {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.live-minute {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

.is-live-pulsing { animation: live-status-pulse 1.4s ease-in-out infinite; }
@keyframes live-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .is-live-pulsing { animation: none; }
}

/* ---- Barra punteggio fissa (prototipo pagina Diretta) ---- */
.live-sticky-bar {
  position: sticky;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
}
.live-sticky-score { font-variant-numeric: tabular-nums; }
.live-sticky-logo { width: 20px; height: 20px; object-fit: contain; }
.live-sticky-minute {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--accent-text);
  animation: live-sticky-blink 1.4s ease-in-out infinite;
}
@keyframes live-sticky-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .live-sticky-minute { animation: none; }
}

/* ---- Sintesi (pagina dedicata) ---- */
.recap-list-full {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
/* Spazio riservato finche' la lista e' vuota (in attesa di /milan-recap.php),
   cosi' la sezione Radio sotto non "salta" quando arrivano le card. */
.recap-list-full:empty { min-height: 150px; }
.recap-list-full .recap-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}
.recap-list-full .recap-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.recap-list-full .recap-summary::-webkit-details-marker { display: none; }
.recap-list-full .recap-teams { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 400; }
.recap-logo { width: 20px; height: 20px; object-fit: contain; }
.recap-name { color: var(--text-muted); }
.recap-score { font-weight: 700; color: var(--text); }
.recap-toggle { flex-shrink: 0; color: var(--text-muted); transition: transform .15s ease; }
.recap-item[open] .recap-toggle { transform: rotate(180deg); }
.recap-timeline {
  list-style: none;
  margin: 0;
  padding: 4px 16px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.recap-timeline li { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; padding-top: 6px; }
.recap-timeline .recap-minute { flex-shrink: 0; width: 34px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.recap-event--them { flex-direction: row-reverse; text-align: right; }
.recap-event--us .recap-desc { color: var(--text); }
.recap-event--them .recap-desc { color: var(--text-muted); }
.recap-empty { font-size: 0.8125rem; color: var(--text-muted); padding: 4px 16px 16px; border-top: 1px solid var(--border); }

.project-scroller {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* niente barra di scroll: si scorre col dito, i pallini sotto fanno da guida */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.project-scroller::-webkit-scrollbar { display: none; }
.project-tile {
  /* mobile: la card successiva "sbircia" dal bordo -> si capisce che c'e' altro */
  flex: 0 0 78%;
  scroll-snap-align: start;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 18px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s ease, background-color .15s ease;
}
@media (min-width: 600px) { .project-tile { flex-basis: 240px; } }
.project-tile:hover { border-color: var(--accent); background: var(--surface-hover); }
.project-tile-icon { font-size: 1.75rem; display: block; margin-bottom: 8px; }
img.project-tile-icon { width: 1.75rem; height: 1.75rem; object-fit: contain; border-radius: 4px; }
.project-tile-title { display: block; font-weight: 700; margin-bottom: 4px; }
.project-tile-desc { display: block; font-size: 0.8125rem; color: var(--text-muted); }

.project-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.project-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.project-dot[aria-current="true"] { background: var(--accent); transform: scale(1.35); }
.project-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .project-dot { transition: none; } }

/* Frecce ‹ › della vetrina progetti (js/home.js le crea) */
.projects-showcase { position: relative; }
.carousel-arrow {
  position: absolute;
  top: calc(50% - 12px);
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent-text);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 2;
  transition: background-color .15s ease, opacity .15s ease;
}
.carousel-arrow svg { width: 20px; height: 20px; }
.carousel-arrow--prev { left: 4px; }
.carousel-arrow--next { right: 4px; }
.carousel-arrow:hover { background: var(--surface-hover); }
.carousel-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.carousel-arrow[hidden] { display: none !important; }
/* schermo largo: frecce discrete, piene solo passandoci il mouse sulla fila */
@media (min-width: 900px) and (hover: hover) {
  .carousel-arrow { opacity: .35; }
  .projects-showcase:hover .carousel-arrow,
  .carousel-arrow:focus-visible { opacity: 1; }
}
/* touch: si scorre col dito, niente frecce */
@media (pointer: coarse) { .carousel-arrow { display: none !important; } }

.news-teaser-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.news-teaser-list a {
  display: block;
  text-decoration: none;
  color: var(--text);
  font-size: 0.9rem;
}
.news-teaser-list a:hover { color: var(--accent-text); }
.news-teaser-list time { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--text-muted); }

.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.quick-links a {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 0.875rem;
}
.quick-links a:hover { border-color: var(--accent); background: var(--surface-hover); }

@media (max-width: 640px) {
  .home-widgets { grid-template-columns: 1fr; }
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 32px 64px;
  margin-top: 56px;
}
.site-footer p {
  margin: 0;
  font-size: .8125rem;
  color: var(--text-muted);
  text-align: center;
}
.site-footer .credits {
  margin-top: 10px;
  font-size: .75rem;
  line-height: 1.6;
}
.site-footer .footer-social {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 14px;
}
.footer-social-link {
  display: inline-flex;
  color: var(--text-muted);
  transition: color .15s;
}
.footer-social-link:hover { color: var(--accent-text); }
.footer-social-link svg { width: 22px; height: 22px; }
.footer-link {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-link:hover { color: var(--text); }
.footer-link--btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* ---- Bottone generico ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-text); }
.btn-ghost {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover { background: var(--surface-hover); }

/* ---- Responsive: menu mobile a scomparsa ---- */
@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; order: 4; }
  .install-btn { order: 2; margin-left: auto; }
  .theme-toggle { order: 3; }
  .brand { order: 1; }
  .site-header .container { flex-wrap: wrap; position: relative; }

  .main-nav {
    order: 5;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .main-nav.is-open { max-height: 420px; overflow-y: auto; }
  .main-nav a {
    width: 100%;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--border);
  }
}

/* ---- Cerca Milan ---- */
.search-box { display: flex; gap: 8px; margin: 16px 0 12px; }
.search-box input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: 12px 14px;
}
.search-box input:focus { outline: none; border-color: var(--accent); }

.recaptcha-wrap { margin-bottom: 16px; }

.suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.suggestion-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8125rem;
  padding: 6px 12px;
  cursor: pointer;
}
.suggestion-chip:hover { border-color: var(--accent); color: var(--text); }

.result-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 20px;
  min-height: 80px;
}
.result-status { color: var(--text-muted); font-size: 0.9375rem; margin: 0; }
.result-status.is-error { color: var(--accent-text); }
.result-answer { font-size: 1rem; white-space: pre-line; display: none; }

.sources { margin-top: 20px; display: none; }
.sources summary { cursor: pointer; color: var(--text-muted); font-size: 0.8125rem; }
.sources ul { list-style: none; margin: 12px 0 0; padding: 0; }
.sources li { padding: 8px 0; border-top: 1px solid var(--border); font-size: 0.875rem; }
.sources a { color: var(--text); text-decoration: none; }
.sources a:hover { color: var(--accent-text); }
.sources .src-tag { color: var(--text-muted); font-size: 0.75rem; }

.share-row {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.cerca-milan-disclaimer { margin-top: 24px; font-size: 0.75rem; color: var(--text-muted); }

/* ---- Pagine generatore immagine (Sfottò/Frase del Giorno/NalimW Wrapped) ----
   Classi scoped sotto .card-generator apposta: .btn qui ha un layout/raggio
   diversi dal .btn generico del sito (flex:1 in coppia, 10px invece di
   pillola) - senza lo scoping le due regole entrerebbero in conflitto. */
.card-generator { max-width: 480px; margin: 0 auto; }
.card-generator .card-wrap {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  margin-top: 16px;
}
.card-generator canvas { display: block; width: 100%; height: auto; }
.card-generator .card-status { padding: 10px 16px; font-size: 0.8125rem; color: var(--text-muted); text-align: center; margin: 0; }
.card-generator .actions { display: flex; gap: 10px; margin-top: 20px; }
.card-generator .btn {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: 12px 16px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.card-generator .btn:hover { background: var(--surface-hover); border-color: var(--accent); }
.card-generator .btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a0508;
  font-weight: 600;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.card-generator .btn--accent svg { width: 16px; height: 16px; flex-shrink: 0; }
.card-generator .btn--accent:hover { background: #ff3350; }
.card-generator .btn[disabled] { opacity: 0.5; cursor: default; pointer-events: none; }
.card-generator-disclaimer { margin-top: 24px; font-size: 0.75rem; color: var(--text-muted); }
.card-generator .gallery-link { text-align: center; margin: 18px 0 0; font-size: 0.875rem; }
.card-generator .gallery-link a { color: var(--accent-text); text-decoration: none; }
.card-generator .gallery-link a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* ---- Galleria Sfottò Rossonero ---- */
.gallery-page .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.gallery-page .item {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  transition: border-color .15s ease;
}
.gallery-page .item:hover { border-color: var(--accent); }
.gallery-page .item a { display: block; text-decoration: none; color: inherit; cursor: zoom-in; transition: transform .15s ease; }
.gallery-page .item:hover a { transform: translateY(-2px); }
.gallery-page .item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.gallery-page .item .cap {
  padding: 8px 10px 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.gallery-page .item .share-menu { display: block; width: 100%; }
.gallery-page .item .share-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: none;
  color: var(--accent-text);
  font-family: var(--font-body);
  font-size: 0.75rem;
  padding: 8px;
  cursor: pointer;
  text-align: center;
}
.gallery-page .item .share-trigger svg { width: 13px; height: 13px; flex-shrink: 0; }
.gallery-page .item .share-trigger:hover { background: var(--surface-hover); }

.gallery-page .leaderboard { margin: 16px 0 32px; }
.gallery-page .leaderboard h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  margin: 0 0 12px;
}
.gallery-page .leaderboard ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gallery-page .leaderboard li {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  background: var(--surface);
}
.gallery-page .leaderboard .medal { font-size: 1.25rem; width: 28px; text-align: center; flex-shrink: 0; }
.gallery-page .leaderboard img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex-shrink: 0; cursor: zoom-in; }
.gallery-page .leaderboard .lb-count { margin-left: auto; color: var(--text-muted); font-size: 0.8125rem; white-space: nowrap; }
.gallery-page .leaderboard a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; cursor: zoom-in; }

.gallery-page .empty {
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-top: 16px;
}
.gallery-page .empty a { color: var(--accent-text); }

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 40px 16px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: var(--shadow-md); }
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Badge live flottante globale (tutte le pagine tranne Live Milan/Diretta,
   dove il punteggio è già mostrato in modo prominente) ---- */
.live-mini-badge {
  position: fixed;
  right: 12px;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--text);
}
.live-mini-badge.is-visible { display: flex; }

.live-mini-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: live-mini-pulse 1.4s ease-in-out infinite;
}
@keyframes live-mini-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .live-mini-dot { animation: none; }
}

.live-mini-score { font-weight: 600; white-space: nowrap; }
.live-mini-status { color: var(--text-muted); white-space: nowrap; }

.live-mini-close {
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0 0 0 2px;
  cursor: pointer;
}
.live-mini-close:hover { color: var(--text); }

@media (max-width: 480px) {
  .live-mini-badge { font-size: 0.75rem; padding: 7px 9px; }
}

/* Live Milan — collegamento ai Pronostici accanto al titolo */
.live-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.live-head-link { font-size: 0.9rem; font-weight: 600; color: var(--accent-text); text-decoration: none; white-space: nowrap; }
.live-head-link:hover { text-decoration: underline; }

/* ==========================================================================
   Pronostici (/pronostici.php)
   ========================================================================== */
/* alcune regole qui sotto impostano display:grid/flex/inline-flex e vincerebbero
   sull'attributo [hidden] (che il sito non copre globalmente) */
#pron-dist[hidden], #pron-share[hidden], #pron-share-btn[hidden],
#pron-download-btn[hidden], #pron-mascots[hidden],
#pron-parts[hidden], #pron-av-picker[hidden] { display: none !important; }

.pron-back { font-size: 0.85rem; margin: 0 0 6px; }
.pron-back a { color: var(--accent-text); text-decoration: none; }

.pron-card {
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.pron-fixture { padding: 20px 18px 20px; text-align: center; }
.pron-fixture-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
.pron-comp {
  background: var(--accent-soft); color: var(--accent-text);
  border-radius: 999px; padding: 3px 10px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.pron-when { color: var(--text-muted); font-size: 0.85rem; }

.pron-matchup { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.pron-team { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.pron-crest {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  /* sfondo bianco fisso (non var(--surface-hover)): i loghi delle squadre sono
     spesso monocromatici scuri e sparirebbero sul tema/sfondo scuro ("Notte") */
  border: 1px solid var(--border); background: #ffffff;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-muted);
}
.pron-crest img { width: 100%; height: 100%; object-fit: contain; }
.pron-team.is-milan .pron-crest.txt { background: var(--accent); color: #fff; border-color: transparent; }
.pron-team-name { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.2; }
.pron-team.is-milan .pron-team-name { color: var(--accent-text); font-weight: 700; }
.pron-vs { color: var(--text-muted); font-size: 0.78rem; letter-spacing: 0.1em; }

.pron-verdict {
  margin: 16px auto 0; max-width: 40ch;
  border-radius: 10px; padding: 12px 14px; font-size: 0.92rem;
  background: var(--surface-hover); color: var(--text-muted);
}
.pron-verdict.win { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.pron-verdict.lose { background: var(--surface-hover); color: var(--text-muted); }

.pron-picker { border-top: 1px solid var(--border); padding: 18px; }
.pron-eyebrow {
  display: block; text-align: center; margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
}
.pron-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pron-pick {
  appearance: none; border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 12px; padding: 14px 6px 12px; cursor: pointer; font: inherit; text-align: center;
  transition: border-color .12s ease, background-color .12s ease, transform .08s ease;
}
.pron-pick:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.pron-pick:active:not(:disabled) { transform: translateY(1px); }
.pron-pick .pron-sign {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  line-height: 1; margin-bottom: 5px;
}
.pron-pick .pron-who {
  display: block; font-size: 0.8rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pron-pick[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.pron-pick[aria-pressed="true"] .pron-who { color: rgba(255, 255, 255, 0.88); }
.pron-pick:disabled { cursor: default; }
.pron-pick.dim { opacity: 0.4; }
.pron-pick.is-milan:not([aria-pressed="true"]) .pron-sign { color: var(--accent-text); }

.pron-nick-gate {
  margin-top: 14px; padding: 14px;
  border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-hover);
}
.pron-nick-gate p { margin: 0 0 10px; font-size: 0.9rem; }
.pron-nick-row { display: flex; gap: 8px; }
.pron-nick-row input {
  flex: 1; min-width: 0; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 9px; padding: 9px 11px; font: inherit;
}
.pron-nick-rule { font-size: 0.78rem; color: var(--text-muted); margin: 8px 2px 0; }
.pron-nick-rule.bad { color: var(--accent-text); }

.pron-status { margin: 14px 0 0; text-align: center; font-size: 0.9rem; color: var(--text-muted); }
.pron-status b { color: var(--text); }

.pron-teaser { margin: 14px 0 0; text-align: center; font-size: 0.86rem; color: var(--text-muted); }

.pron-dist { margin-top: 16px; display: grid; gap: 8px; }
.pron-dist-row { display: grid; grid-template-columns: minmax(64px, 90px) 1fr 40px; align-items: center; gap: 10px; font-size: 0.84rem; }
.pron-dist-row .lbl { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pron-dist-row.me .lbl { color: var(--accent-text); font-weight: 700; }
.pron-dist-row .bar { height: 10px; border-radius: 999px; background: var(--surface-hover); overflow: hidden; }
.pron-dist-row .bar > span { display: block; height: 100%; background: var(--text-muted); border-radius: 999px; opacity: 0.55; }
.pron-dist-row.me .bar > span { background: var(--accent); }
.pron-dist-row .pct { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* --- Elenco "schedina": chi ha pronosticato, raggruppato per esito --- */
.pron-parts { margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--border); }
.pron-parts > .pron-eyebrow { display: block; margin-bottom: 4px; }

.pron-pgrp { margin-top: 12px; }
.pron-pgrp-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 4px;
}
.pron-pgrp-head .sign {
  width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-hover); color: var(--text); font-weight: 700; font-size: 0.68rem;
}
.pron-pgrp.is-milan .pron-pgrp-head .sign { background: var(--accent); color: #fff; }
.pron-pgrp-head .tot { margin-left: auto; font-variant-numeric: tabular-nums; }

.pron-prow {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 6px; border-bottom: 1px solid var(--border); font-size: 0.9rem;
}
.pron-prow:last-child { border-bottom: 0; }
.pron-prow.me { background: var(--accent-soft); border-radius: 8px; border-bottom-color: transparent; }
.pron-prow .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pron-prow.me .nm { color: var(--accent-text); font-weight: 700; }
.pron-prow.bot .nm { font-style: italic; }
.pron-prow.blocked .nm { color: var(--text-muted); font-style: italic; }
.pron-prow .nm .tag {
  font-size: 0.68rem; font-weight: 400; font-style: normal;
  color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 4px; padding: 0 5px; margin-left: 4px; vertical-align: 1px;
}
.pron-prow.me .nm .tag { color: var(--accent-text); border-color: currentColor; }
.pron-prow.is-empty { color: var(--text-muted); font-style: italic; border-bottom: 0; }

.pron-circs { display: flex; gap: 6px; flex-shrink: 0; }
.pron-circ {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border); color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.74rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pron-circ.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.pron-more {
  margin: 8px 0 2px; border: 0; background: none; color: var(--accent-text);
  font: inherit; font-size: 0.8rem; cursor: pointer; text-decoration: underline;
}

/* --- Avatar --- */
.pron-av {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; color: #fff; line-height: 1;
}
/* i volti mascotte (line-art) stanno DENTRO il cerchio inscritto: ~64% del
   disco, cosi' sopracciglia/orecchie non vengono tagliate dal border-radius */
.pron-av img { width: 64%; height: 64%; object-fit: contain; display: block; }
.pron-av.is-emoji { background: var(--surface); border: 1px solid var(--border); font-size: 15px; }
.pron-av.is-face { background: #fff; border: 1px solid var(--border); }
.pron-av.is-blocked { background: var(--surface-hover); color: var(--text-muted); border: 1px dashed var(--border); }

.pron-me-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pron-me-av { flex-shrink: 0; }

.pron-av-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pron-av-opt {
  width: 36px; height: 36px; border-radius: 50%; padding: 0;
  border: 2px solid var(--border); background: var(--surface); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; overflow: hidden;
}
.pron-av-opt img { width: 62%; height: 62%; object-fit: contain; }
.pron-av-opt.is-clear { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); font-family: var(--font-body); }
.pron-av-opt[aria-pressed="true"] { border-color: var(--accent); }
.pron-av-opt:hover { border-color: var(--accent-text); }

.pron-empty { color: var(--text-muted); margin-top: 18px; }

/* --- Blocco "Cosa dicono le mascotte" (sopra la classifica) --- */
.pron-mascots {
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.pron-mascots-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 13px 18px; border-bottom: 1px solid var(--border);
}
.pron-mascots-head .eyebrow {
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.72rem; font-weight: 700; color: var(--accent-text);
}
.pron-mascots-head .fixture { font-size: 0.78rem; color: var(--text-muted); }
.pron-mascot {
  display: grid; grid-template-columns: 46px 1fr auto;
  gap: 4px 14px; align-items: center; padding: 16px 18px;
}
.pron-mascot + .pron-mascot { border-top: 1px solid var(--border); }
/* disco bianco fisso come .pron-crest: la line-art nera del volto -light
   resta leggibile anche sul tema/sfondo scuro */
.pron-mascot .face {
  grid-row: span 2; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--border); background: #ffffff;
}
/* il volto -light riempie tutto il suo viewBox: scalato a ~60% resta
   centrato con un anello di bianco attorno (occhi/sopracciglia dentro il cerchio) */
.pron-mascot .face img { width: 60%; height: 60%; object-fit: contain; }
.pron-mascot .who {
  font-family: var(--font-display); font-size: 1.05rem;
  display: flex; align-items: center; gap: 8px;
}
.pron-mascot .who .chip {
  font-family: var(--font-body); font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 700; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 7px;
}
.pron-mascot .call { font-size: 0.96rem; }
.pron-mascot .call b { color: var(--accent-text); }
.pron-mascot .quip {
  grid-column: 2 / -1; font-size: 0.85rem; font-style: italic;
  color: var(--text-muted); margin-top: 2px;
}
.pron-mascot .tally {
  grid-row: span 2; text-align: right; font-size: 0.78rem;
  color: var(--text-muted); white-space: nowrap;
}
.pron-mascot .tally b {
  font-family: var(--font-display); font-size: 1.15rem; color: var(--text); display: block;
}
.pron-mascots-foot {
  padding: 11px 18px; border-top: 1px solid var(--border);
  background: var(--surface-hover); font-size: 0.8rem; color: var(--text-muted);
}
@media (max-width: 460px) {
  .pron-mascot { grid-template-columns: 40px 1fr; }
  .pron-mascot .tally { grid-row: auto; grid-column: 2 / -1; text-align: left; margin-top: 6px; }
  .pron-mascot .tally b { display: inline; font-size: 0.98rem; }
}

.pron-board-wrap { margin-top: 32px; }
.pron-board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pron-board-head h2 { font-family: var(--font-display); font-size: 1.3rem; margin: 0; }
.pron-board-hint { font-size: 0.8rem; color: var(--text-muted); }
.pron-board { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pron-board th {
  text-align: left; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); font-weight: 700; padding: 0 10px 8px; border-bottom: 1px solid var(--border);
}
.pron-board th.num, .pron-board td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pron-board td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pron-board tr:last-child td { border-bottom: 0; }
.pron-board .pos { color: var(--text-muted); width: 30px; font-variant-numeric: tabular-nums; }
.pron-board .who { display: flex; align-items: center; gap: 8px; }
.pron-board .who .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pron-board .who .pron-av { width: 24px; height: 24px; }
.pron-board .who .tag {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent-text); font-weight: 700; margin-left: 4px;
}
.pron-board tr.me td { background: var(--accent-soft); }
.pron-board tr.me .who .nm { color: var(--accent-text); }
.pron-board tr.me .pos { color: var(--accent-text); }
/* riga mascotte: dichiaratamente non una persona */
.pron-board tr.bot td { background: var(--surface-hover); }
.pron-board tr.bot .who .nm { font-style: italic; }
.pron-board tr.bot .who .bot-face {
  flex: none; width: 24px; height: 24px; border-radius: 50%; font-style: normal;
  border: 1px solid var(--border); background: #ffffff;
  display: grid; place-items: center; overflow: hidden;
}
.pron-board tr.bot .who .bot-face img { width: 62%; height: 62%; object-fit: contain; }
.pron-board tr.bot .who .tag { color: var(--text-muted); }
.pron-board td b { font-family: var(--font-display); font-size: 1rem; }
.pron-board .pron-gap td { text-align: center; color: var(--text-muted); letter-spacing: 0.3em; padding: 6px 10px; }
.pron-board .form { display: inline-flex; gap: 3px; }
.pron-board .form i {
  width: 12px; height: 12px; border-radius: 3px;
  background: transparent; border: 1px solid var(--border); display: inline-block;
}
.pron-board .form i.w { background: var(--accent); border-color: transparent; }
.pron-board-empty { color: var(--text-muted); margin: 4px 2px; }

.linklike {
  background: none; border: 0; padding: 0; margin: 0;
  color: var(--accent-text); font: inherit; cursor: pointer; text-decoration: underline;
}

.pron-me { margin-top: 28px; }
.pron-me-line { margin: 0 0 8px; font-size: 0.92rem; color: var(--text-muted); }
.pron-me-line b { color: var(--text); }
.pron-me-rename-row { margin: 8px 0 4px; }
.pron-me-rename-row .btn { flex: none; }
.pron-how {
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  padding: 0 14px; margin-top: 4px;
}
.pron-how > summary {
  list-style: none; cursor: pointer; padding: 11px 0; font-weight: 600; font-size: 0.9rem;
}
.pron-how > summary::-webkit-details-marker { display: none; }
.pron-how > summary::after { content: " +"; color: var(--text-muted); }
.pron-how[open] > summary::after { content: " \2212"; }
.pron-how ul { margin: 0 0 12px; padding-left: 18px; }
.pron-how li { margin: 6px 0; font-size: 0.88rem; color: var(--text-muted); }
.pron-how li strong { color: var(--text); }

.pron-share { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 24px; }
.pron-share-label { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); margin: 0; }
.pron-card-preview { display: block; width: 100%; max-width: 340px; height: auto; aspect-ratio: 1 / 1; border-radius: 12px; box-shadow: var(--shadow-md); }
.pron-share-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pron-share-note { font-size: 0.85rem; color: var(--text-muted); margin: 0 2px; max-width: 46ch; }

@media (max-width: 460px) {
  .pron-pick .pron-who { font-size: 0.74rem; }
  .pron-dist-row { grid-template-columns: 58px 1fr 36px; }
}