/* Pelli del layout premium (Aspetto → Layout del sito): Arena, Rivista, Poster, Bento.
   Si carica DOPO site.css e site-premium.css, solo quando <html> ha data-skin; il premium classico e il layout base non lo vedono.
   Stesso motore del premium (texture, matita ✎, duotono, animazioni): qui cambiano tipografia, composizione, ritmo delle sezioni e schede.
   Tutto usa i colori della società (--blue principale, --red accento, --navy scuro) e il tema «Casa / Trasferta» (data-kit="away").
   Ogni regola parte da :root[data-skin="…"] (specificità più alta delle regole base e di quelle «trasferta» di site.css).
   I componenti rari con fondo bianco fisso restano bianchi col loro testo scuro: per questo le pelli scure non cambiano --ink.
   Con una pelle la foto della testata (.hero-bg) sta DENTRO .hero-in (vedi public_home.php): Arena e Poster la stendono come sfondo,
   Rivista e Bento la usano come riquadro della griglia. */

:root[data-skin] .hero-in { position: static; }
:root[data-skin] .hero-in > :not(.hero-bg) { position: relative; z-index: 2; }

/* =====================================================================================================
   ARENA: il palazzetto di sera. Tutto scuro, angoli vivi, numeri da tabellone nel colore d'accento,
   testata con la fila «tabellone» (prossima partita, ultimo risultato, classifica) attaccata al fondo.
   ===================================================================================================== */
:root[data-skin="arena"] {
  --ar-0: color-mix(in srgb, var(--navy) 50%, #04070c);
  --ar-1: color-mix(in srgb, var(--navy) 72%, #0a0f17);
  --ar-ink: #e7edf5; --ar-mut: #9eabbd; --ar-line: rgba(255,255,255,.1);
  --ar-acc: color-mix(in srgb, var(--red) 82%, #fff);
  --ar-link: color-mix(in srgb, var(--blue) 55%, #fff);
  --radius: 0px;
}
/* in trasferta resta notte: l'accento prende il colore principale invece di quello d'accento */
:root[data-skin="arena"][data-kit="away"] { --ar-acc: color-mix(in srgb, var(--blue) 70%, #fff); }
:root[data-skin="arena"] body { background: var(--ar-0); color: var(--ar-ink); }
:root[data-skin="arena"] .topbar { background: #000; color: var(--ar-mut); border-bottom: 1px solid var(--ar-line); }
:root[data-skin="arena"] .tb-social a { color: var(--ar-mut); }
:root[data-skin="arena"] .site-header { background: color-mix(in srgb, var(--ar-0) 90%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ar-line); }
:root[data-skin="arena"] :is(.main-nav a, .nav-group-btn) { color: var(--ar-ink); border-radius: 0; }
:root[data-skin="arena"] .main-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
:root[data-skin="arena"] .main-nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -3px 0 var(--ar-acc); }
:root[data-skin="arena"] .nav-drop { background: var(--ar-1); border-color: var(--ar-line); border-radius: 0; }
:root[data-skin="arena"] .nav-drop a { color: var(--ar-ink); }
:root[data-skin="arena"] :is(.burger, .lang a) { color: var(--ar-ink); }
:root[data-skin="arena"] .lang a[aria-current="true"] { background: var(--ar-acc); color: #000; }
:root[data-skin="arena"] :is(.bell-link, .site-header .kit-switch) { background: var(--ar-1); border-color: var(--ar-line); color: var(--ar-ink); }
:root[data-skin="arena"] .site-header .kit-switch button { color: var(--ar-ink); }
:root[data-skin="arena"] .brand img { background: #fff; padding: 3px 6px; }
@media (max-width: 920px) { :root[data-skin="arena"] .main-nav { background: var(--ar-1); } :root[data-skin="arena"] .main-nav a { border-bottom-color: var(--ar-line); } }

/* fondi: niente alternanza chiaro/scuro, due neri e una riga sottile fra le sezioni */
:root[data-skin="arena"] main > section:where(:not(.hero, .page-hero, .team-hero)):not([data-col]) { background: var(--ar-0); color: var(--ar-ink); border-top: 1px solid var(--ar-line); }
:root[data-skin="arena"] main > :is(.section-alt, .section-dark, .live-section, .app-band):not([data-col]) { background: var(--ar-1); }
:root[data-skin="arena"] section[data-sec]:not([data-col]) { --tex-ink: #fff; --tex-op: 1.4; }
:root[data-skin="arena"] :is(.section-head h2, section > .wrap > h2, .page-hero h1, .day-title, .cal-split h2, .live-head h2) { color: #fff; }
:root[data-skin="arena"] h2 { text-transform: uppercase; letter-spacing: 2px; }
:root[data-skin="arena"] .section-head { border-bottom: 1px solid var(--ar-line); padding-bottom: 12px; align-items: center; }
:root[data-skin="arena"] .section-head h2 { padding: 0 0 0 18px; }
:root[data-skin="arena"] .section-head h2::after { left: 0; top: .12em; bottom: .12em; width: 6px; height: auto; border-radius: 0; background: var(--ar-acc); }
:root[data-skin="arena"] :is(.muted, .source, .hint, .note-mini, .lead, .news-body p, .tc-body p, .page-hero p, .news-meta) { color: var(--ar-mut); }
:root[data-skin="arena"] :is(.link-arrow, .prose a, .source a) { color: var(--ar-link); }
:root[data-skin="arena"] .eyebrow { color: var(--ar-acc); }
:root[data-skin="arena"] .prose { color: var(--ar-ink); }
:root[data-skin="arena"] .prose :is(h2, h3) { color: #fff; }

/* schede: pannelli scuri, bordo sottile, una linea d'accento in alto al passaggio */
:root[data-skin="arena"] :is(.news-card, .team-card, .mc, .match-row, .std-box, .score-card, .price-card, .today-card, .team-row, .doc, .chip-btn, .view-switch, .mg-day, .card) { background: var(--ar-1); border-color: var(--ar-line); color: var(--ar-ink); border-radius: 0; }
:root[data-skin="arena"] :is(.news-card, .team-card, .mc, .score-card, .price-card):hover { box-shadow: inset 0 3px 0 var(--ar-acc), 0 18px 40px -16px #000; }
:root[data-skin="arena"] :is(.news-body h3 a, .tc-body h3, .mc-nm, .mr-teams, .price-card h3, .card :is(h2, h3)) { color: #fff; }
:root[data-skin="arena"] .tc-body .tc-next { color: var(--ar-mut); }
:root[data-skin="arena"] :is(.standings, .simple) { background: var(--ar-1); color: var(--ar-ink); border-radius: 0; }
:root[data-skin="arena"] :is(.standings, .simple) th { color: var(--ar-mut); border-color: var(--ar-line); }
:root[data-skin="arena"] :is(.standings, .simple) td { border-color: var(--ar-line); font-variant-numeric: tabular-nums; }
:root[data-skin="arena"] .standings tr.us td { background: color-mix(in srgb, var(--ar-acc) 22%, transparent); color: #fff; }
:root[data-skin="arena"] .standings tr.us td:first-child { box-shadow: inset 4px 0 0 var(--ar-acc); }
:root[data-skin="arena"] .btn { border-radius: 0; text-transform: uppercase; letter-spacing: .06em; }
:root[data-skin="arena"] .btn-ghost { background: transparent; color: var(--ar-ink); border-color: rgba(255,255,255,.28); }
:root[data-skin="arena"] .btn-ghost:hover { border-color: #fff; color: #fff; }
:root[data-skin="arena"] .btn-red { background: var(--ar-acc); color: #000; box-shadow: none; }

/* testata: titolo a sinistra, prossima partita a destra, sotto la fila del tabellone */
:root[data-skin="arena"] .hero { min-height: 0; display: block; background: var(--ar-0); color: #fff; }
:root[data-skin="arena"] .hero-bg { filter: saturate(.6); }
:root[data-skin="arena"] .hero-bg::after { background: linear-gradient(180deg, color-mix(in srgb, var(--ar-0) 35%, transparent) 0%, color-mix(in srgb, var(--ar-0) 80%, transparent) 65%, var(--ar-0) 100%), linear-gradient(90deg, var(--ar-0) 0%, transparent 75%); }
:root[data-skin="arena"] .hero-in { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; gap: 40px; padding-top: 80px; padding-bottom: 0; }
:root[data-skin="arena"] .hero[data-tiles="0"] .hero-in { padding-bottom: 72px; }
:root[data-skin="arena"] .hero h1 { font-size: clamp(3.4rem, 9vw, 7.4rem); line-height: .86; text-transform: uppercase; text-shadow: none; }
:root[data-skin="arena"] .hero h1::after { width: 100%; max-width: 360px; height: 3px; border-radius: 0; background: linear-gradient(90deg, var(--ar-acc), transparent); }
:root[data-skin="arena"] :is(.hero-lead, .hero .eyebrow.light) { color: var(--ar-mut); }
:root[data-skin="arena"] .hero .btn-ghost-light { color: #fff; border-color: rgba(255,255,255,.4); background: transparent; }
:root[data-skin="arena"] .next-card { background: var(--ar-1); color: var(--ar-ink); border-radius: 0; border: 1px solid var(--ar-line); border-top: 3px solid var(--ar-acc); box-shadow: 0 30px 60px -20px #000; backdrop-filter: none; }
:root[data-skin="arena"] .next-label { color: var(--ar-acc); }
:root[data-skin="arena"] .next-teams .nt span:last-child { color: #fff; font-weight: 700; }
:root[data-skin="arena"] :is(.nt-vs, .next-meta li) { color: var(--ar-mut); }
:root[data-skin="arena"] .countdown div { background: #000; border-radius: 0; box-shadow: inset 0 0 0 1px var(--ar-line); }
:root[data-skin="arena"] .countdown b { color: var(--ar-acc); text-shadow: 0 0 18px color-mix(in srgb, var(--ar-acc) 55%, transparent); }
:root[data-skin="arena"] .countdown span { color: var(--ar-mut); }
:root[data-skin="arena"] .next-meta .ic { color: var(--ar-acc); }
:root[data-skin="arena"] .next-card .btn-blue { background: #fff; color: #000; }
:root[data-skin="arena"] .hx-strip { margin-top: 56px; gap: 0; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--ar-line); border-left: 1px solid var(--ar-line); background: #000; }
:root[data-skin="arena"] .hx-tile { border-radius: 0; background: transparent; color: var(--ar-ink); border: 0; border-right: 1px solid var(--ar-line); backdrop-filter: none; padding: 22px 24px 26px; }
:root[data-skin="arena"] .hx-tile:hover { transform: none; background: rgba(255,255,255,.04); }
:root[data-skin="arena"] :is(.hx-big, .hx-score b) { color: var(--ar-acc); text-shadow: 0 0 22px color-mix(in srgb, var(--ar-acc) 50%, transparent); }
:root[data-skin="arena"] .hx-big { font-size: 5.4rem; }
:root[data-skin="arena"] :is(.hx-k, .hx-sub, .hx-more) { color: var(--ar-mut); }
:root[data-skin="arena"] .hx-news .hx-img { margin: -22px -24px 12px; }

/* home: news «una grande e due in fila», squadre con la sigla gigante in controluce */
:root[data-skin="arena"] .news-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
:root[data-skin="arena"] .news-grid > :first-child { grid-row: span 2; }
:root[data-skin="arena"] .news-grid > :not(:first-child) { flex-direction: row; }
:root[data-skin="arena"] .news-grid > :not(:first-child) .news-img { width: 40%; aspect-ratio: auto; flex: none; }
:root[data-skin="arena"] .news-grid > :not(:first-child) .news-body p { display: none; }
:root[data-skin="arena"] .news-grid > :first-child .news-body h3 { font-family: var(--font-head); font-weight: 400; font-size: 2.2rem; text-transform: uppercase; line-height: 1; }
:root[data-skin="arena"] .tc-img::after { background: linear-gradient(180deg, transparent 20%, var(--ar-1)), color-mix(in srgb, var(--navy) 40%, transparent); }
:root[data-skin="arena"] .tc-short { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.75); font-size: 5.5rem; }
:root[data-skin="arena"] .tc-body h3 { text-transform: uppercase; }
/* pagine interne: testata nera con la riga d'accento in basso */
:root[data-skin="arena"] :is(.page-hero, .team-hero) { background-color: var(--ar-1); border-bottom: 3px solid var(--ar-acc); }
:root[data-skin="arena"] .page-hero { background-image: none; }
:root[data-skin="arena"] .page-hero h1 { text-transform: uppercase; }
:root[data-skin="arena"] .page-hero h1::after { width: 48px; height: 4px; border-radius: 0; background: var(--ar-acc); }
:root[data-skin="arena"] .subnav { background: var(--ar-0); border-bottom-color: var(--ar-line); }
:root[data-skin="arena"] .subnav a { color: var(--ar-ink); }
:root[data-skin="arena"] .site-footer { background: #000; border-top: 1px solid var(--ar-line); }
:root[data-skin="arena"] .footer-logo-box { border-radius: 0; }
@media (max-width: 920px) {
  :root[data-skin="arena"] .hero-in { grid-template-columns: 1fr; padding-top: 48px; }
  :root[data-skin="arena"] .hx-strip { margin-top: 32px; }
  :root[data-skin="arena"] .news-grid { grid-template-columns: 1fr; }
  :root[data-skin="arena"] .news-grid > :first-child { grid-row: auto; }
}
@media (max-width: 600px) {
  :root[data-skin="arena"] .hx-tile { border-bottom: 1px solid var(--ar-line); }
  :root[data-skin="arena"] .hx-big { font-size: 4.2rem; }
  :root[data-skin="arena"] .news-grid > :not(:first-child) { flex-direction: column; }
  :root[data-skin="arena"] .news-grid > :not(:first-child) .news-img { width: 100%; aspect-ratio: 16 / 9; }
}

/* =====================================================================================================
   RIVISTA: il giornale sportivo. Chiaro, titoli pieni in Source Sans 900, testi d'apertura con le grazie,
   righe al posto delle schede, la foto come copertina in alto, la news d'apertura grande nella testata.
   In trasferta diventa l'edizione della sera: carta scura e inchiostro chiaro.
   ===================================================================================================== */
:root[data-skin="rivista"] {
  --rv-paper: #ffffff; --rv-ink: #14181e; --rv-mut: #5b6571;
  --rv-rule: var(--navy); --rv-hair: #dde2e8; --rv-head: var(--navy); --rv-kick: var(--red);
  --rv-serif: Charter, "Iowan Old Style", "Bitstream Charter", Georgia, Cambria, "Times New Roman", serif;
  --radius: 2px;
}
:root[data-skin="rivista"][data-kit="away"] {
  --rv-paper: color-mix(in srgb, var(--navy) 88%, #000); --rv-ink: #e9eef5; --rv-mut: #a8b4c3;
  --rv-rule: #fff; --rv-hair: rgba(255,255,255,.16); --rv-head: #fff; --rv-kick: color-mix(in srgb, var(--red) 60%, #fff);
}
:root[data-skin="rivista"] body { background: var(--rv-paper); color: var(--rv-ink); }
:root[data-skin="rivista"] :is(h1, h2) { font-family: var(--font-body); font-weight: 900; letter-spacing: -.025em; line-height: 1.02; }
:root[data-skin="rivista"] :is(.hero-lead, .lead, .page-hero p, .news-body p, .prose > p:first-of-type) { font-family: var(--rv-serif); }
:root[data-skin="rivista"] .topbar { background: var(--rv-paper); color: var(--rv-mut); border-bottom: 1px solid var(--rv-hair); }
:root[data-skin="rivista"] .tb-social a { color: var(--rv-mut); }
:root[data-skin="rivista"] .site-header { background: var(--rv-paper); border-bottom: 4px double var(--rv-rule); }
:root[data-skin="rivista"] :is(.main-nav a, .nav-group-btn) { color: var(--rv-head); font-family: var(--font-body); font-weight: 800; font-size: .98rem; text-transform: uppercase; letter-spacing: .04em; }
:root[data-skin="rivista"] .main-nav a:hover { background: none; color: var(--rv-kick); }
:root[data-skin="rivista"] .main-nav a[aria-current="page"] { color: var(--rv-kick); box-shadow: none; text-decoration: underline 2px; text-underline-offset: 6px; }
:root[data-skin="rivista"] :is(.burger, .lang a) { color: var(--rv-head); }
:root[data-skin="rivista"] .nav-drop { background: var(--rv-paper); border-color: var(--rv-hair); border-radius: 0; }
:root[data-skin="rivista"] .nav-drop a { color: var(--rv-head); }
:root[data-skin="rivista"] .brand img { background: #fff; border-radius: 2px; }
@media (max-width: 920px) { :root[data-skin="rivista"] .main-nav { background: var(--rv-paper); } }

/* sezioni: tutte sulla stessa carta; il titolo sta sotto una riga spessa, come le testatine del giornale */
:root[data-skin="rivista"] main > section:where(:not(.hero, .page-hero, .team-hero)):not([data-col]):not(.section-dark):not(.live-section):not(.app-band) { background: var(--rv-paper); color: var(--rv-ink); }
:root[data-skin="rivista"] main > section.section { padding: 56px 0; }
:root[data-skin="rivista"] section[data-sec]:not([data-col]):not(.section-dark):not(.live-section):not(.app-band) { --tex-ink: var(--rv-rule); --tex-op: .7; }
:root[data-skin="rivista"] .section-head { border-top: 4px solid var(--rv-rule); padding-top: 12px; margin-bottom: 28px; }
:root[data-skin="rivista"] .section-head h2 { color: var(--rv-head); font-size: clamp(1.9rem, 3.4vw, 2.6rem); padding-bottom: 0; }
:root[data-skin="rivista"] .section-head h2::after { display: none; }
:root[data-skin="rivista"] :is(section > .wrap > h2, .day-title, .cal-split h2) { color: var(--rv-head); }
:root[data-skin="rivista"] :is(.section-dark, .live-section, .app-band) :is(.section-head h2, h2) { color: #fff; }
:root[data-skin="rivista"] .section-dark .section-head { border-top-color: #fff; }
:root[data-skin="rivista"] .link-arrow { color: var(--rv-kick); font-weight: 800; text-transform: uppercase; font-size: .85rem; letter-spacing: .06em; }
:root[data-skin="rivista"] .eyebrow { color: var(--rv-kick); }
:root[data-skin="rivista"] :is(.muted, .source, .news-body p, .tc-body p, .news-meta) { color: var(--rv-mut); }
:root[data-skin="rivista"] .prose { color: var(--rv-ink); font-size: 1.08rem; }
:root[data-skin="rivista"] .prose :is(h2, h3) { color: var(--rv-head); }

/* schede: niente scatole. Righe e spazio, immagini tagliate dritte */
:root[data-skin="rivista"] :is(.news-card, .team-card, .score-card, .price-card) { background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--rv-ink); }
:root[data-skin="rivista"] :is(.news-card, .team-card, .price-card):hover { transform: none; box-shadow: none; }
:root[data-skin="rivista"] :is(.news-body, .tc-body) { padding: 12px 0 0; }
:root[data-skin="rivista"] :is(.news-body h3 a, .tc-body h3) { color: var(--rv-head); font-family: var(--font-body); font-weight: 800; letter-spacing: -.01em; }
:root[data-skin="rivista"] .news-body h3 a:hover { text-decoration: underline; }
:root[data-skin="rivista"] :is(.mc, .match-row, .std-box, .today-card, .team-row, .card) { background: var(--rv-paper); border-color: var(--rv-hair); border-radius: 0; box-shadow: none; color: var(--rv-ink); }
:root[data-skin="rivista"] :is(.mc-nm, .mr-teams, .card :is(h2, h3)) { color: var(--rv-head); }
:root[data-skin="rivista"] :is(.standings, .simple) { background: transparent; color: var(--rv-ink); border-radius: 0; }
:root[data-skin="rivista"] :is(.standings, .simple) th { border-bottom: 2px solid var(--rv-rule); color: var(--rv-mut); }
:root[data-skin="rivista"] :is(.standings, .simple) td { border-color: var(--rv-hair); }
:root[data-skin="rivista"] .standings tr.us td { color: var(--rv-head); background: color-mix(in srgb, var(--rv-kick) 14%, transparent); }
:root[data-skin="rivista"] .btn { border-radius: 2px; }
:root[data-skin="rivista"] .btn-ghost { background: transparent; color: var(--rv-head); border-color: var(--rv-rule); }
:root[data-skin="rivista"] .btn-red { box-shadow: none; }
/* news: l'apertura su due colonne, le altre in colonna con la riga verticale del giornale */
:root[data-skin="rivista"] .news-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
:root[data-skin="rivista"] .news-grid > * { padding: 0 20px; border-left: 1px solid var(--rv-hair); }
:root[data-skin="rivista"] .news-grid > :first-child { padding-left: 0; border-left: 0; }
:root[data-skin="rivista"] .news-grid > :last-child { padding-right: 0; }
:root[data-skin="rivista"] .news-grid > :first-child .news-body h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.05; font-weight: 900; }
:root[data-skin="rivista"] .news-img { border-radius: 0; }
:root[data-skin="rivista"] .team-grid { gap: 28px 24px; }
:root[data-skin="rivista"] .team-card { border-top: 4px solid var(--rv-rule); }
:root[data-skin="rivista"] .tc-img { height: 140px; }
:root[data-skin="rivista"] .tc-short { font-size: 3.4rem; }

/* testata: la foto è la copertina in alto, poi il titolo grande sulla carta;
   sotto, a sinistra la news d'apertura, a destra la colonna con prossima partita, classifica, risultato */
:root[data-skin="rivista"] .hero { display: block; min-height: 0; background: var(--rv-paper); color: var(--rv-ink); }
:root[data-skin="rivista"] .hero::before { display: none; }
:root[data-skin="rivista"] .hero-in { display: grid; grid-auto-flow: row dense; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 0 48px; align-items: start; padding-top: 28px; padding-bottom: 56px; }
:root[data-skin="rivista"] .hero-in:not(:has(.next-card, .hx-standing, .hx-last)) { grid-template-columns: 1fr; }
:root[data-skin="rivista"] .hero-in > .hero-bg { position: relative; inset: auto; grid-column: 1 / -1; height: clamp(170px, 26vw, 340px); margin-bottom: 28px; background-position: center 35%; animation: none; }
:root[data-skin="rivista"] .hero-bg::after { display: none; }
:root[data-skin="rivista"] .hero-text { grid-column: 1 / -1; border-bottom: 1px solid var(--rv-hair); padding-bottom: 28px; margin-bottom: 32px; }
:root[data-skin="rivista"] .hero h1 { color: var(--rv-head); font-size: clamp(3rem, 8vw, 6.4rem); text-shadow: none; max-width: 14ch; }
:root[data-skin="rivista"] .hero h1::after { display: none; }
:root[data-skin="rivista"] .hero-lead { color: var(--rv-mut); font-size: clamp(1.15rem, 1.6vw, 1.35rem); max-width: 60ch; }
:root[data-skin="rivista"] .hero .eyebrow.light { color: var(--rv-kick); }
:root[data-skin="rivista"] .hero .btn-ghost-light { color: var(--rv-head); border-color: var(--rv-rule); background: transparent; }
:root[data-skin="rivista"] .hx-strip { display: contents; }
:root[data-skin="rivista"] .hx-news { grid-column: 1; grid-row: span 3; }
:root[data-skin="rivista"] :is(.next-card, .hx-standing, .hx-last) { grid-column: 2; }
:root[data-skin="rivista"] .hero-in:not(:has(.hx-news)) { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 32px; }
:root[data-skin="rivista"] .hero-in:not(:has(.hx-news)) :is(.next-card, .hx-standing, .hx-last) { grid-column: auto; }
:root[data-skin="rivista"] :is(.next-card, .hx-tile) { background: transparent; color: var(--rv-ink); border: 0; border-top: 3px solid var(--rv-rule); border-radius: 0; box-shadow: none; backdrop-filter: none; padding: 12px 0 20px; }
:root[data-skin="rivista"] .hx-tile:hover { transform: none; }
:root[data-skin="rivista"] :is(.hx-k, .next-label) { color: var(--rv-kick); }
:root[data-skin="rivista"] :is(.hx-sub, .hx-more, .next-meta li, .nt-vs) { color: var(--rv-mut); }
:root[data-skin="rivista"] .hx-big { font-family: var(--font-body); font-weight: 900; font-size: 3.6rem; color: var(--rv-head); letter-spacing: -.04em; }
:root[data-skin="rivista"] .hx-standing.hx-top .hx-big { color: var(--rv-kick); }
:root[data-skin="rivista"] .hx-say { color: var(--rv-head); }
:root[data-skin="rivista"] .hx-score b { font-family: var(--font-body); font-weight: 900; letter-spacing: -.03em; color: var(--rv-head); }
:root[data-skin="rivista"] .hx-wl { background: var(--rv-hair); color: var(--rv-head); }
:root[data-skin="rivista"] .hx-news { border-top: 0; padding-top: 0; }
:root[data-skin="rivista"] .hx-news .hx-img { margin: 0 0 14px; aspect-ratio: 16 / 9; border-radius: 0; }
:root[data-skin="rivista"] .hx-news .hx-say { font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 900; line-height: 1.04; letter-spacing: -.025em; }
:root[data-skin="rivista"] .hx-news:hover .hx-say { text-decoration: underline; text-decoration-thickness: 3px; }
:root[data-skin="rivista"] .next-teams .nt span { color: var(--rv-head); font-weight: 700; }
:root[data-skin="rivista"] .countdown { gap: 0; border: 1px solid var(--rv-hair); }
:root[data-skin="rivista"] .countdown div { background: transparent; border-radius: 0; border-left: 1px solid var(--rv-hair); box-shadow: none; }
:root[data-skin="rivista"] .countdown div:first-child { border-left: 0; }
:root[data-skin="rivista"] .countdown b { color: var(--rv-head); font-family: var(--font-body); font-weight: 900; font-size: 1.9rem; }
:root[data-skin="rivista"] .countdown span { color: var(--rv-mut); }
:root[data-skin="rivista"] .next-meta .ic { color: var(--rv-kick); }
:root[data-skin="rivista"] .next-card .btn-ghost { color: var(--rv-head); }
:root[data-skin="rivista"] .next-card .btn-blue { background: var(--rv-head); color: var(--rv-paper); }
/* pagine interne: testatina chiara con la doppia riga, niente fascia scura */
:root[data-skin="rivista"] .page-hero { background: var(--rv-paper); color: var(--rv-ink); border-bottom: 4px double var(--rv-rule); padding: 56px 0 36px; --tex-ink: var(--rv-rule); --tex-op: .6; }
:root[data-skin="rivista"] .page-hero h1 { color: var(--rv-head); font-size: clamp(2.6rem, 6vw, 4.6rem); }
:root[data-skin="rivista"] .page-hero h1::after { display: none; }
:root[data-skin="rivista"] .page-hero p { color: var(--rv-mut); }
:root[data-skin="rivista"] .page-hero :is(.eyebrow.light, a) { color: var(--rv-kick); }
:root[data-skin="rivista"] .subnav { background: var(--rv-paper); border-bottom-color: var(--rv-hair); }
:root[data-skin="rivista"] .subnav a { color: var(--rv-head); }
:root[data-skin="rivista"] .site-footer { border-top: 6px solid var(--rv-kick); }
@media (max-width: 920px) {
  :root[data-skin="rivista"] .hero-in { grid-template-columns: 1fr; }
  :root[data-skin="rivista"] :is(.hx-news, .next-card, .hx-standing, .hx-last) { grid-column: 1; grid-row: auto; }
  :root[data-skin="rivista"] .hx-news { margin-bottom: 20px; }
  :root[data-skin="rivista"] .news-grid { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  :root[data-skin="rivista"] .news-grid > :first-child { grid-column: 1 / -1; padding-right: 0; }
  :root[data-skin="rivista"] .news-grid > :nth-child(2) { padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) {
  :root[data-skin="rivista"] .news-grid { grid-template-columns: 1fr; }
  :root[data-skin="rivista"] .news-grid > * { padding: 0 0 20px; border-left: 0; border-bottom: 1px solid var(--rv-hair); }
}

/* =====================================================================================================
   POSTER: il manifesto della partita. Blocchi pieni nel colore principale, tagli in diagonale,
   lettere giganti, schede col bordo spesso e l'ombra piena spostata, la classifica come un bollino.
   ===================================================================================================== */
:root[data-skin="poster"] {
  --po-paper: #ffffff; --po-ink: var(--navy); --po-edge: var(--navy); --po-block: var(--blue); --po-on-block: var(--on-blue);
  --radius: 0px;
}
:root[data-skin="poster"][data-kit="away"] { --po-paper: color-mix(in srgb, var(--navy) 92%, #000); --po-ink: #fff; --po-block: var(--navy); --po-on-block: #fff; --po-edge: #000; }
:root[data-skin="poster"] body { background: var(--po-paper); }
:root[data-skin="poster"] :is(h1, h2) { text-transform: uppercase; letter-spacing: 1px; }
:root[data-skin="poster"] .site-header { border-bottom: 4px solid var(--navy); }
:root[data-skin="poster"] .main-nav a[aria-current="page"] { box-shadow: inset 0 -5px 0 var(--red); }
:root[data-skin="poster"] .btn { border-radius: 0; font-family: var(--font-head); font-weight: 400; font-size: 1.3rem; letter-spacing: .06em; text-transform: uppercase; padding-top: 10px; padding-bottom: 8px; border-width: 3px; }
:root[data-skin="poster"] .btn-sm { font-size: 1.05rem; }
:root[data-skin="poster"] :is(.btn-red, .btn-blue) { box-shadow: 4px 4px 0 var(--navy); }
:root[data-skin="poster"] :is(.btn-red, .btn-blue):hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--navy); }
:root[data-skin="poster"] .btn-ghost { border-color: var(--navy); }

/* sezioni: il foglio bianco e, alternati, i blocchi pieni nel colore della società; titoli enormi sottolineati dall'accento */
:root[data-skin="poster"] main > section:where(:not(.hero, .page-hero, .team-hero)):not([data-col]) { background: var(--po-paper); color: var(--po-ink); }
:root[data-skin="poster"] main > :is(.section-alt, .section-teams):not([data-col]) { background: var(--po-block); color: var(--po-on-block); }
:root[data-skin="poster"] main > :is(.section-alt, .section-teams)[data-sec]:not([data-col]) { --tex-ink: var(--po-on-block); --tex-op: 2; }
:root[data-skin="poster"] main > section.section { padding: 80px 0; }
:root[data-skin="poster"] .section-head h2 { font-size: clamp(2.8rem, 7vw, 5rem); line-height: .9; padding: 0; }
:root[data-skin="poster"] main > section:where(:not(.hero, .page-hero, .team-hero)):not(.section-dark):not(.live-section):not(.app-band) :is(.section-head h2, > .wrap > h2, .day-title, .cal-split h2) { color: var(--po-ink); }
:root[data-skin="poster"] main > :is(.section-alt, .section-teams):not([data-col]) :is(.section-head h2, .section-head .link-arrow, > .wrap > h2, .day-title, .cal-split h2, .source, .muted, .source a) { color: var(--po-on-block); }
:root[data-skin="poster"] .section-head h2::after { position: static; display: block; width: 100%; height: 10px; margin-top: 6px; border-radius: 0; background: var(--red); }
:root[data-skin="poster"] .section-head .link-arrow { font-family: var(--font-head); font-size: 1.4rem; letter-spacing: .05em; text-transform: uppercase; }
/* schede: bordo spesso e ombra piena spostata; al passaggio «si staccano» dal foglio */
:root[data-skin="poster"] :is(.news-card, .team-card, .mc, .score-card, .price-card, .match-row, .std-box, .today-card, .team-row) { background: #fff; color: var(--navy); border: 3px solid var(--po-edge); border-radius: 0; box-shadow: 6px 6px 0 var(--po-edge); }
:root[data-skin="poster"] :is(.news-card, .team-card, .mc, .score-card, .price-card):hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--po-edge); }
:root[data-skin="poster"] .match-row { border-left-width: 8px; }
:root[data-skin="poster"] :is(.news-body h3 a, .tc-body h3) { color: var(--navy); }
:root[data-skin="poster"] .news-body h3 { font-family: var(--font-head); font-weight: 400; font-size: 1.7rem; text-transform: uppercase; line-height: 1; letter-spacing: .02em; }
:root[data-skin="poster"] :is(.standings, .simple) { border: 3px solid var(--po-edge); border-radius: 0; color: var(--navy); background: #fff; }
:root[data-skin="poster"] :is(.standings, .simple) th { background: var(--navy); color: #fff; }
:root[data-skin="poster"] .news-img { border-bottom: 3px solid var(--po-edge); }
/* news: la prima occupa due colonne */
:root[data-skin="poster"] .news-grid { gap: 28px; }
:root[data-skin="poster"] .news-grid > :first-child { grid-column: span 2; }
:root[data-skin="poster"] .news-grid > :first-child .news-img { aspect-ratio: 21 / 9; }
:root[data-skin="poster"] .news-grid > :first-child h3 { font-size: 2.4rem; }
:root[data-skin="poster"] .tc-short { font-size: 6rem; }
:root[data-skin="poster"] .tc-img::after { background: linear-gradient(135deg, var(--navy) 0 45%, color-mix(in srgb, var(--red) 85%, transparent) 45% 52%, color-mix(in srgb, var(--blue) 60%, transparent) 52%); }

/* testata: blocco pieno nel colore principale con il taglio diagonale scuro, titolo enorme, schede «incollate» */
:root[data-skin="poster"] .hero { min-height: 0; display: block; background: var(--po-block); color: var(--po-on-block); }
:root[data-skin="poster"] .hero::after { content: ""; position: absolute; z-index: 1; inset: auto 0 0 0; height: 46%; background: var(--navy); clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 100%); pointer-events: none; }
:root[data-skin="poster"][data-kit="away"] .hero::after { background: var(--red); }
:root[data-skin="poster"] .hero-bg { mix-blend-mode: multiply; opacity: .5; }
:root[data-skin="poster"] .hero-bg::after { background: none; }
:root[data-skin="poster"] .hero-in { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; padding-top: 64px; padding-bottom: 72px; }
:root[data-skin="poster"] .hero-text { flex: 1 1 100%; }
:root[data-skin="poster"] .hero h1 { font-size: clamp(4.4rem, 15vw, 12rem); line-height: .82; color: var(--po-on-block); text-shadow: 6px 6px 0 color-mix(in srgb, var(--navy) 55%, transparent); margin-bottom: .15em; }
:root[data-skin="poster"] .hero h1::after { display: none; }
:root[data-skin="poster"] .hero-lead { color: var(--po-on-block); font-weight: 700; font-size: 1.3rem; }
:root[data-skin="poster"] .hero .eyebrow.light { background: var(--navy); color: #fff; display: inline-flex; padding: 4px 10px; }
:root[data-skin="poster"] .hero .btn-ghost-light { color: #fff; background: var(--navy); border-color: var(--navy); box-shadow: 4px 4px 0 var(--red); }
:root[data-skin="poster"] .hx-strip { display: contents; }
:root[data-skin="poster"] :is(.next-card, .hx-tile) { background: #fff; color: var(--navy); border: 3px solid var(--navy); border-radius: 0; box-shadow: 8px 8px 0 var(--navy); backdrop-filter: none; }
:root[data-skin="poster"][data-kit="away"] :is(.next-card, .hx-tile) { box-shadow: 8px 8px 0 #000; }
:root[data-skin="poster"] .next-card { flex: 1 1 360px; max-width: 480px; transform: rotate(-1.2deg); }
:root[data-skin="poster"] .hx-tile { flex: 1 1 220px; max-width: 320px; }
:root[data-skin="poster"] .hx-tile:hover { transform: translate(-3px, -3px); border-color: var(--navy); }
:root[data-skin="poster"] :is(.hx-k, .hx-sub, .hx-more, .next-meta li, .nt-vs) { color: var(--navy); }
:root[data-skin="poster"] :is(.hx-say, .hx-score b, .next-teams .nt span) { color: var(--navy); }
:root[data-skin="poster"] .hx-wl { background: var(--navy); color: #fff; border-radius: 0; }
:root[data-skin="poster"] .hx-news .hx-img { border-bottom: 3px solid var(--navy); }
/* classifica: il bollino rotondo, girato, nel colore d'accento */
:root[data-skin="poster"] .hx-standing { flex: 0 0 auto; width: 210px; height: 210px; border-radius: 50%; align-items: center; justify-content: center; text-align: center; padding: 22px; gap: 0;
  background: var(--red); color: var(--on-red); transform: rotate(8deg); box-shadow: 6px 6px 0 var(--navy); }
:root[data-skin="poster"] .hx-standing:hover { transform: rotate(4deg) scale(1.03); }
:root[data-skin="poster"] .hx-standing :is(.hx-k, .hx-sub) { color: var(--on-red); font-size: .68rem; white-space: normal; }
:root[data-skin="poster"] .hx-standing :is(.hx-big, .hx-say) { color: var(--on-red); }
:root[data-skin="poster"] .hx-standing .hx-big { font-size: 5.2rem; }
:root[data-skin="poster"] .hx-standing.hx-top .hx-big { color: var(--on-red); }
:root[data-skin="poster"] .hx-standing .hx-say { font-family: var(--font-head); font-weight: 400; font-size: 1.6rem; text-transform: uppercase; line-height: 1; }
:root[data-skin="poster"] .next-label { color: var(--red); }
:root[data-skin="poster"] .countdown div { background: var(--navy); border-radius: 0; box-shadow: none; }
:root[data-skin="poster"] .countdown b { color: #fff; }
/* pagine interne: lo stesso blocco pieno con il taglio */
:root[data-skin="poster"] .page-hero { background: var(--po-block); color: var(--po-on-block); padding: 72px 0 104px; }
:root[data-skin="poster"] .page-hero::after { display: block; content: ""; position: absolute; inset: auto 0 -1px 0; width: auto; height: 64px; border: 0; border-radius: 0; background: var(--po-paper); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
:root[data-skin="poster"] .page-hero h1 { color: var(--po-on-block); font-size: clamp(3.4rem, 10vw, 7rem); line-height: .85; }
:root[data-skin="poster"] .page-hero h1::after { width: 100px; height: 10px; border-radius: 0; }
:root[data-skin="poster"] .page-hero :is(p, .eyebrow.light) { color: var(--po-on-block); }
:root[data-skin="poster"] .prose { color: var(--po-ink); }
:root[data-skin="poster"] .site-footer { border-top: 10px solid var(--red); }
@media (max-width: 920px) {
  :root[data-skin="poster"] .news-grid > :first-child { grid-column: 1 / -1; }
  :root[data-skin="poster"] .hero-in { padding-top: 40px; }
}
@media (max-width: 600px) {
  :root[data-skin="poster"] :is(.next-card, .hx-tile) { flex: 1 1 100%; max-width: none; }
  :root[data-skin="poster"] .next-card { transform: none; }
  :root[data-skin="poster"] .hx-standing { flex: 0 0 auto; width: 180px; height: 180px; margin: 0 auto; }
  :root[data-skin="poster"] .hx-standing .hx-big { font-size: 4.2rem; }
  :root[data-skin="poster"] main > section.section { padding: 56px 0; }
}

/* =====================================================================================================
   BENTO: la bacheca a tessere. Fondo grigio-azzurro, tutto in riquadri molto arrotondati;
   la testata è una griglia di tessere (titolo nel colore della società, foto, partita, classifica, risultato, news),
   anche le sezioni della home sono tessere appoggiate sul fondo. Pulsanti a pillola, menu a pillola.
   ===================================================================================================== */
:root[data-skin="bento"] {
  --bn-bg: color-mix(in srgb, var(--blue) 7%, #edf0f4); --bn-tile: #ffffff; --bn-ink: var(--ink); --bn-head: var(--navy); --bn-mut: var(--muted); --bn-line: color-mix(in srgb, var(--navy) 9%, transparent);
  --bn-r: 24px; --radius: 18px;
}
:root[data-skin="bento"][data-kit="away"] {
  --bn-bg: color-mix(in srgb, var(--navy) 80%, #000); --bn-tile: color-mix(in srgb, var(--navy) 90%, #fff); --bn-ink: #e9eef5; --bn-head: #fff; --bn-mut: #a8b4c3; --bn-line: rgba(255,255,255,.1);
}
:root[data-skin="bento"] body { background: var(--bn-bg); color: var(--bn-ink); }
:root[data-skin="bento"] :is(h1, h2) { font-family: var(--font-body); font-weight: 800; letter-spacing: -.02em; line-height: 1.04; }
:root[data-skin="bento"] .btn { border-radius: 999px; }
:root[data-skin="bento"] .btn-red { box-shadow: none; }
:root[data-skin="bento"] .topbar { background: transparent; color: var(--bn-mut); border: 0; }
:root[data-skin="bento"] .tb-social a { color: var(--bn-mut); }
/* menu: una pillola che galleggia sopra il fondo */
:root[data-skin="bento"] .site-header { background: transparent; border: 0; padding: 10px 16px; }
:root[data-skin="bento"] .header-in { background: color-mix(in srgb, var(--bn-tile) 92%, transparent); backdrop-filter: blur(10px); border-radius: 999px; box-shadow: 0 6px 24px -10px color-mix(in srgb, var(--navy) 30%, transparent); padding-left: 22px; padding-right: 14px; max-width: calc(var(--wrap) - 32px); }
:root[data-skin="bento"] :is(.main-nav a, .nav-group-btn) { color: var(--bn-head); border-radius: 999px; }
:root[data-skin="bento"] .main-nav a:hover { background: var(--bn-bg); color: var(--bn-head); }
:root[data-skin="bento"] .main-nav a[aria-current="page"] { background: var(--bn-head); color: var(--bn-tile); box-shadow: none; border-radius: 999px; }
:root[data-skin="bento"] :is(.burger, .lang a) { color: var(--bn-head); }
:root[data-skin="bento"] .nav-drop { background: var(--bn-tile); border-radius: 18px; border-color: var(--bn-line); }
:root[data-skin="bento"] .nav-drop a { color: var(--bn-head); }
:root[data-skin="bento"] :is(.bell-link, .site-header .kit-switch) { background: var(--bn-bg); border-color: var(--bn-line); }
@media (max-width: 920px) { :root[data-skin="bento"] .main-nav { background: var(--bn-tile); } :root[data-skin="bento"] .main-nav a[aria-current="page"] { background: none; color: var(--blue); } }

/* sezioni: ognuna è una tessera grande sul fondo; le «scure» restano tessere nel colore scuro */
:root[data-skin="bento"] main > section:where(:not(.hero, .page-hero, .team-hero)):not([data-col]) { background: transparent; color: var(--bn-ink); padding: 8px 0; }
:root[data-skin="bento"] main > section:where(:not(.hero, .page-hero, .team-hero)) > .wrap { background: var(--bn-tile); border-radius: 32px; padding: 32px; max-width: calc(var(--wrap) - 32px); }
:root[data-skin="bento"] main > :is(.section-dark, .live-section, .app-band):not([data-col]) > .wrap { background: var(--navy); color: #fff; }
:root[data-skin="bento"] main > section[data-col] > .wrap, :root[data-skin="bento"] main > :is(.page-hero, .team-hero) > .wrap { background: transparent; }
:root[data-skin="bento"] main > section:where(:not(.hero, .page-hero, .team-hero)):last-child { padding-bottom: 24px; }
:root[data-skin="bento"] section[data-sec]:not([data-col]) { --tex-ink: var(--bn-head); --tex-op: .6; }
:root[data-skin="bento"] .section-head h2 { color: var(--bn-head); font-size: clamp(1.7rem, 3vw, 2.3rem); padding-bottom: 0; }
:root[data-skin="bento"] .section-head h2::after { display: none; }
:root[data-skin="bento"] :is(.section-dark, .live-section, .app-band) :is(.section-head h2, h2) { color: #fff; }
:root[data-skin="bento"] :is(section > .wrap > h2, .day-title, .cal-split h2) { color: var(--bn-head); }
:root[data-skin="bento"] .section-head .link-arrow { background: var(--bn-bg); color: var(--bn-head); border-radius: 999px; padding: 6px 14px; text-decoration: none; font-weight: 700; font-size: .92rem; }
:root[data-skin="bento"] :is(.muted, .source, .news-body p, .tc-body p, .news-meta) { color: var(--bn-mut); }
:root[data-skin="bento"] .prose { color: var(--bn-ink); }
:root[data-skin="bento"] .prose :is(h2, h3) { color: var(--bn-head); }

/* schede: tessere senza bordo, appoggiate sul grigio */
:root[data-skin="bento"] :is(.news-card, .team-card, .mc, .score-card, .price-card, .match-row, .std-box, .today-card, .team-row) { background: var(--bn-bg); border: 0; border-radius: 20px; box-shadow: none; color: var(--bn-ink); }
:root[data-skin="bento"] :is(.news-card, .team-card, .price-card):hover { transform: translateY(-4px); box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--navy) 45%, transparent); }
:root[data-skin="bento"] :is(.news-body h3 a, .tc-body h3, .mc-nm, .mr-teams) { color: var(--bn-head); }
:root[data-skin="bento"] :is(.news-body h3 a, .tc-body h3) { font-family: var(--font-body); font-weight: 800; }
:root[data-skin="bento"] .tc-body h3 { font-size: 1.3rem; }
:root[data-skin="bento"] :is(.standings, .simple) { background: var(--bn-bg); color: var(--bn-ink); border-radius: 18px; }
:root[data-skin="bento"] :is(.standings, .simple) :is(th, td) { border-color: var(--bn-line); }
:root[data-skin="bento"] .section-dark .standings { background: rgba(255,255,255,.06); color: #fff; }
/* news: tre tessere, la prima alta due righe */
:root[data-skin="bento"] .news-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
:root[data-skin="bento"] .news-grid > :first-child { grid-row: span 2; }
:root[data-skin="bento"] .news-grid > :first-child .news-img { aspect-ratio: auto; flex: 1; min-height: 220px; }
:root[data-skin="bento"] .news-grid > :not(:first-child) { flex-direction: row; }
:root[data-skin="bento"] .news-grid > :not(:first-child) .news-img { width: 38%; aspect-ratio: auto; flex: none; }
:root[data-skin="bento"] .news-grid > :first-child .news-body h3 { font-size: 1.7rem; }
:root[data-skin="bento"] .team-grid { gap: 14px; }

/* testata: griglia di tessere su 4 colonne. Titolo 2×2 nel colore della società, foto 2×2, partita 2×2, classifica, risultato, news */
:root[data-skin="bento"] .hero { display: block; min-height: 0; background: transparent; color: var(--bn-ink); padding: 8px 0 8px; }
:root[data-skin="bento"] .hero::before { display: none; }
:root[data-skin="bento"] .hero-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(140px, auto); grid-auto-flow: dense; gap: 14px; padding-top: 0; padding-bottom: 0; max-width: calc(var(--wrap) - 0px); }
:root[data-skin="bento"] .hx-strip { display: contents; }
:root[data-skin="bento"] .hero-text { grid-column: span 2; grid-row: span 2; background: linear-gradient(150deg, var(--blue), color-mix(in srgb, var(--blue) 50%, var(--navy))); color: var(--on-blue); border-radius: var(--bn-r); padding: 36px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
:root[data-skin="bento"]:not([data-tex="none"]) .hero-text::before { content: ""; position: absolute; right: -60px; top: -50px; width: 360px; aspect-ratio: 500 / 480; background: currentColor; opacity: .1; -webkit-mask: var(--court) center / contain no-repeat; mask: var(--court) center / contain no-repeat; transform: rotate(-10deg); pointer-events: none; }
:root[data-skin="bento"] .hero-in:not(:has(.hero-bg, .next-card, .hx-tile)) .hero-text { grid-column: 1 / -1; }
:root[data-skin="bento"] .hero h1 { color: inherit; font-size: clamp(2.6rem, 5vw, 4.4rem); text-shadow: none; }
:root[data-skin="bento"] .hero h1::after { display: none; }
:root[data-skin="bento"] :is(.hero-lead, .hero .eyebrow.light) { color: inherit; opacity: .88; }
:root[data-skin="bento"] .hero .btn-ghost-light { border-color: currentColor; color: inherit; background: transparent; }
:root[data-skin="bento"] .hero .btn-red { background: var(--bn-tile); color: var(--bn-head); }
:root[data-skin="bento"] .hero-in > .hero-bg { position: relative; inset: auto; grid-column: span 2; grid-row: span 2; min-height: 300px; border-radius: var(--bn-r); overflow: hidden; animation: none; }
:root[data-skin="bento"] .hero-bg::after { background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--navy) 35%, transparent)); }
:root[data-skin="bento"] :is(.next-card, .hx-tile) { background: var(--bn-tile); color: var(--bn-ink); border: 0; border-radius: var(--bn-r); box-shadow: none; backdrop-filter: none; padding: 22px 24px; }
:root[data-skin="bento"] .next-card { grid-column: span 2; grid-row: span 2; }
:root[data-skin="bento"] .hx-news { grid-column: span 2; }
:root[data-skin="bento"] .hx-news .hx-img { margin: -22px -24px 12px; aspect-ratio: 16 / 6; }
:root[data-skin="bento"] .hx-tile:hover { transform: translateY(-3px); }
:root[data-skin="bento"] :is(.hx-k, .hx-sub, .hx-more, .next-meta li, .nt-vs) { color: var(--bn-mut); }
:root[data-skin="bento"] :is(.hx-say, .hx-big, .hx-score b) { color: var(--bn-head); }
:root[data-skin="bento"] .hx-standing { background: var(--navy); color: #fff; }
:root[data-skin="bento"] .hx-standing :is(.hx-k, .hx-sub, .hx-say, .hx-big) { color: #fff; }
:root[data-skin="bento"] .hx-standing :is(.hx-sub, .hx-k) { opacity: .75; }
:root[data-skin="bento"] .hx-standing.hx-top .hx-big { color: color-mix(in srgb, var(--red) 65%, #fff); }
:root[data-skin="bento"] .hx-wl { background: var(--bn-bg); color: var(--bn-head); }
:root[data-skin="bento"] .next-teams .nt span { color: var(--bn-head); font-weight: 700; }
:root[data-skin="bento"] .countdown div { border-radius: 16px; background: var(--bn-bg); box-shadow: none; }
:root[data-skin="bento"] .countdown b { color: var(--bn-head); }
:root[data-skin="bento"] .countdown span { color: var(--bn-mut); }
:root[data-skin="bento"] .next-label { color: var(--red); }
/* pagine interne: la testata è una tessera scura arrotondata */
:root[data-skin="bento"] :is(.page-hero, .team-hero) { margin: 8px auto 10px; max-width: calc(var(--wrap) - 32px); border-radius: 32px; }
:root[data-skin="bento"] .page-hero h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
:root[data-skin="bento"] .page-hero h1::after { display: none; }
:root[data-skin="bento"] .subnav { background: var(--bn-bg); border: 0; }
:root[data-skin="bento"] .site-footer { margin: 24px 16px 16px; border-radius: 32px; }
@media (max-width: 1240px) {
  :root[data-skin="bento"] main > section:where(:not(.hero, .page-hero, .team-hero)) > .wrap, :root[data-skin="bento"] :is(.page-hero, .team-hero) { margin-left: 16px; margin-right: 16px; }
}
@media (max-width: 920px) {
  :root[data-skin="bento"] .hero-in { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  :root[data-skin="bento"] :is(.hero-text, .next-card, .hx-news, .hero-bg) { grid-column: 1 / -1 !important; grid-row: auto !important; }
  :root[data-skin="bento"] .hero-in > .hero-bg { min-height: 220px; }
  :root[data-skin="bento"] .hero-text { padding: 28px; min-height: 260px; }
  :root[data-skin="bento"] .news-grid { grid-template-columns: 1fr; }
  :root[data-skin="bento"] .news-grid > :first-child { grid-row: auto; }
}
@media (max-width: 600px) {
  :root[data-skin="bento"] main > section:where(:not(.hero, .page-hero, .team-hero)) > .wrap { padding: 22px 18px; border-radius: 24px; margin-left: 10px; margin-right: 10px; }
  :root[data-skin="bento"] .hx-tile { grid-column: 1 / -1; }
  :root[data-skin="bento"] .news-grid > :not(:first-child) { flex-direction: column; }
  :root[data-skin="bento"] .news-grid > :not(:first-child) .news-img { width: 100%; aspect-ratio: 16 / 9; }
  :root[data-skin="bento"] .site-header { padding: 8px 10px; }
  :root[data-skin="bento"] .header-in { border-radius: 22px; }
  :root[data-skin="bento"] :is(.page-hero, .team-hero) { margin-left: 10px; margin-right: 10px; border-radius: 24px; }
  :root[data-skin="bento"] .site-footer { margin: 16px 10px 10px; border-radius: 24px; }
}

/* ---------- ritocchi comuni: orario delle partite e nome della società (senza logo) nel colore dei titoli di ogni pelle */
:root[data-skin="arena"] .mc-mid:not(.win-txt):not(.loss-txt):not(.live-txt) { color: #fff; }
:root[data-skin="rivista"] .mc-mid:not(.win-txt):not(.loss-txt):not(.live-txt) { color: var(--rv-head); }
:root[data-skin="bento"] .mc-mid:not(.win-txt):not(.loss-txt):not(.live-txt) { color: var(--bn-head); }
:root[data-skin="arena"] .brand-text { color: #fff; }
:root[data-skin="rivista"] .brand-text { color: var(--rv-head); font-family: var(--font-body); font-weight: 900; }
:root[data-skin="bento"] .brand-text { color: var(--bn-head); }
:root[data-skin] .brand { text-decoration: none; }
/* bollino del Poster: bordo bianco, così si stacca anche quando l'accento è simile al colore principale */
:root[data-skin="poster"] .hero .hx-standing { border: 4px solid #fff; width: 220px; height: 220px; padding: 26px 20px; }
:root[data-skin="poster"] .hx-standing .hx-say { font-size: 1.3rem; }
:root[data-skin="poster"] .hx-standing .hx-big { font-size: 4.6rem; }
:root[data-skin] .hero-in .hx-tile { position: relative; z-index: 2; }
/* sotto i 920px il menu è un pannello fisso: niente backdrop-filter sugli antenati (lo intrappolerebbe nell'intestazione) */
@media (max-width: 920px) {
  :root[data-skin] :is(.site-header, .header-in) { backdrop-filter: none; }
  :root[data-skin="arena"] .site-header { background: var(--ar-0); }
  :root[data-skin="bento"] .header-in { background: var(--bn-tile); }
}
:root[data-skin="arena"] .mc-std { color: var(--ar-mut); }
:root[data-skin="rivista"] .mc-std { color: var(--rv-mut); }
:root[data-skin="bento"] .mc-std { color: var(--bn-mut); }