/* =====================================================================
   Tribuna TV — stylesheet (UI glass, derivato da dlhd-probe)
   Modalità (classe su <body>):
     .mode-browse  menu a pagina intera, nessun player
     .mode-watch   player a schermo pieno (menu nascosto)
     .mode-mini    menu + mini-player fisso in basso
   Design: superficie scura fotografica + riquadri in vetro (backdrop blur),
   accenti azzurro #00a0e4 e rosso #e4010b (colori del logo).
   ===================================================================== */

:root {
  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-disp: "Barlow Condensed", "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #05070c; --bg-2: #0b0f16; --bg-3: #131926; --bg-4: #1c2333;
  --txt: #eef1f7; --txt-2: #a4adc0; --txt-3: #6b7590;
  --acc: #29a9ec; --acc-2: #00a0e4; --acc-ink: #04121c;
  --red: #e4010b; --live: #ff4356; --ok: #34d399; --err: #f87171; --fav: #fbbf24;
  --glass: linear-gradient(155deg, rgba(255,255,255,.095), rgba(255,255,255,.035) 60%, rgba(255,255,255,.055));
  --glass-hi: linear-gradient(155deg, rgba(255,255,255,.17), rgba(255,255,255,.07) 60%, rgba(255,255,255,.1));
  --brd: rgba(255,255,255,.12); --brd-2: rgba(255,255,255,.22);
  --r: 16px; --r-s: 10px;
  --hdr-h: 56px; --mini-h: 76px;
  --shadow: 0 12px 34px rgba(0, 0, 0, .45);
  --blur: 18px;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
::selection { background: rgba(0,160,228,.45); color: #fff; }
/* grana cinematografica su tutta l'app (statica, sopra ogni layer, non intercetta tocchi) */
body::before { content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100%; background: transparent; color: var(--txt);
  font: 14px/1.45 var(--font-body);
  padding-top: calc(var(--hdr-h) + var(--sat));
}
/* sfondo fotografico: due layer che si alternano in dissolvenza (vedi setBg in app.js);
   i riquadri in vetro lo sfumano alle loro spalle */
.bg { position: fixed; inset: 0; z-index: -1; background: var(--bg); overflow: hidden; }
.bg__img { position: absolute; inset: 0; background-position: center 30%; background-size: cover; opacity: 0; transition: opacity .9s ease; will-change: opacity; }
.bg__img.is-on { opacity: 1; }
.bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 42% at 50% -6%, rgba(0,160,228,.12), transparent 70%), linear-gradient(180deg, rgba(5,7,12,.6) 0%, rgba(5,7,12,.74) 45%, rgba(5,7,12,.95) 100%); }
body.mode-watch .bg__img { opacity: 0; }                     /* mentre guardi: nero pieno */
@media (prefers-reduced-data: reduce) { .bg__img { display: none; } }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
[hidden] { display: none !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.24); }
.emoji, .chip__em, .hero__single .emoji, .cat__emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif; }

/* fallback: browser senza backdrop-filter -> superficie piena */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hdr, .toolbar, .ev, .cat, .ch, .chip, .chbtn, .hero__nav, .hero__badge, .hero__comp, .pill, .ibtn, .search, .seg { background: rgba(13, 17, 25, .95) !important; }
}

/* ------------------------------------------------------------ header */
.hdr {
  position: fixed; inset: 0 0 auto 0; height: calc(var(--hdr-h) + var(--sat)); z-index: 60;
  display: flex; align-items: center; gap: 16px; padding: var(--sat) 20px 0;
  background: rgba(7, 10, 16, .55);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--brd);
}
.hdr__sp { flex: 1; }
/* hairline brand sotto l'header */
.hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,160,228,.5) 30%, rgba(228,1,11,.4) 70%, transparent); }
.hdr__back { width: 36px; height: 36px; margin-right: -6px; }
.brand { display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: -.2px; }
.brand__logo { height: 40px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.seg { display: flex; padding: 3px; background: rgba(255,255,255,.07); border: 1px solid var(--brd); border-radius: 999px; gap: 2px; }
.seg__btn { padding: 6px 18px 5px; border-radius: 999px; color: var(--txt-2); font-family: var(--font-disp); font-weight: 600; font-size: 15px; letter-spacing: .09em; text-transform: uppercase; transition: background .15s, color .15s; }
.seg__btn:hover { color: var(--txt); }
.seg__btn.is-active { background: rgba(255,255,255,.14); color: var(--txt); }
.search { display: flex; align-items: center; gap: 8px; width: 260px; height: 36px; padding: 0 10px 0 12px; background: rgba(255,255,255,.07); border: 1px solid var(--brd); border-radius: 999px; color: var(--txt-3); transition: border-color .15s, width .2s, background .15s; }
.search:focus-within { border-color: rgba(41,169,236,.6); color: var(--txt-2); width: 340px; background: rgba(255,255,255,.1); }
.search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--txt); font-size: 14px; outline: none; }
.search input::placeholder { color: var(--txt-3); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search kbd { font: 11px/1 ui-monospace, monospace; color: var(--txt-3); border: 1px solid var(--brd); border-radius: 5px; padding: 3px 5px; }

/* ------------------------------------------------------------ pagine menu */
.view { min-height: calc(100vh - var(--hdr-h) - var(--sat)); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 8px 20px calc(24px + var(--sab)); }
.pane { display: none; }
.pane.is-active { display: block; }
.toolbar { position: sticky; top: calc(var(--hdr-h) + var(--sat)); z-index: 30; margin: 0 -20px; padding: 8px 20px 2px; background: linear-gradient(rgba(7,10,16,.92) 78%, transparent); }
.pane__meta { display: flex; justify-content: space-between; align-items: center; padding: 6px 4px 10px; font-size: 12px; color: var(--txt-3); }
.pane__meta span:first-child::first-letter { text-transform: uppercase; }
.empty { padding: 60px 20px; text-align: center; color: var(--txt-3); background: var(--glass); border: 1px dashed var(--brd); border-radius: var(--r); }
body.mode-mini .wrap { padding-bottom: calc(var(--mini-h) + 24px + var(--sab)); }

/* riga "Riprendi" (ultimo canale guardato) sopra la pagina menu */
.resume { max-width: 1180px; margin: 10px auto -6px; padding: 0 20px; }
.resume__pill { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 9px; border-radius: 14px; background: linear-gradient(135deg, rgba(0,160,228,.18), rgba(255,255,255,.05)); border: 1px solid rgba(41,169,236,.4); box-shadow: 0 8px 22px rgba(0,0,0,.3); backdrop-filter: blur(var(--blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--blur)) saturate(150%); }
.resume__img { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.1); overflow: hidden; }
.resume__img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.resume__mono { font-weight: 800; font-size: 13px; color: var(--txt-2); }
.resume__txt { flex: 1; min-width: 0; line-height: 1.2; }
.resume__txt small { display: block; color: var(--acc); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.resume__txt b { display: block; font-family: var(--font-disp); font-size: 17px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resume__play { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px 8px; border-radius: 10px; background: linear-gradient(135deg, #00a0e4, #0077d8); color: #fff; font-family: var(--font-disp); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(0,144,228,.35); }
.resume__play:active { transform: scale(.97); }
.resume__x { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--txt-3); }
.resume__x:hover { color: var(--txt); background: rgba(255,255,255,.08); }

/* chips (filtri) */
.chips { display: flex; gap: 8px; padding: 6px 0; overflow-x: auto; scrollbar-width: none; }
/* selettore gruppi tab Italia: stessa lingua delle chip, con respiro sotto */
.chips--groups { padding: 2px 0 10px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px 5px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--brd); color: var(--txt-2); font-family: var(--font-disp); font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.chip:hover { border-color: var(--brd-2); color: var(--txt); }
.chip.is-active { background: linear-gradient(135deg, #00a0e4, #0080e0); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(0,144,228,.35); }
.chip .n { opacity: .65; font-weight: 600; font-variant-numeric: tabular-nums; }
.chip__em { display: inline-grid; place-items: center; width: 24px; height: 24px; font-size: 13px; line-height: 1; background: rgba(5,7,12,.55); border: 1px solid var(--brd); border-radius: 7px; }
/* selettore paese e selettore giorno: vera tab-bar (barra scura + tasti a filo) invece di pill sparse */
.chips--country, .chips--days { background: rgba(5,7,12,.6); border: 1px solid var(--brd); border-radius: 13px; padding: 4px; gap: 2px; }
.chips--country .chip, .chips--days .chip { border-color: transparent; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.chips--country .chip:hover, .chips--days .chip:hover { background: rgba(255,255,255,.07); }
.chips--country .chip.is-active, .chips--days .chip.is-active { box-shadow: 0 4px 14px rgba(0,144,228,.35); }

/* indice A–Z compatto in stile tabellone */
.letters { display: flex; flex-wrap: wrap; gap: 3px; padding: 2px 0 6px; }
.letters button { min-width: 27px; height: 27px; padding: 0 4px; border-radius: 7px; font-family: var(--font-disp); font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--txt-2); background: rgba(255,255,255,.05); border: 1px solid transparent; transition: background .12s, color .12s; }
.letters button:hover { background: rgba(255,255,255,.1); color: var(--txt); }
.letters button.is-active { background: linear-gradient(135deg, #00a0e4, #0080e0); color: #fff; }
.letters button:disabled { opacity: .22; cursor: default; background: rgba(255,255,255,.03); }

/* intestazioni gruppo con filetto di chiusura */
.grp { display: flex; align-items: center; gap: 10px; padding: 20px 4px 10px; font-family: var(--font-disp); font-size: 16px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-2); }
.grp::after { content: ""; flex: 1; height: 1px; min-width: 24px; background: linear-gradient(90deg, var(--brd-2), transparent); }

/* ============================================================ HERO */
/* user-select/callout off: il dito sullo swipe non deve selezionare testo né aprire il menu iOS */
.hero { position: relative; margin: 14px -20px 12px; border-radius: 0; overflow: hidden; border-top: 1px solid var(--brd); border-bottom: 1px solid var(--brd); background: var(--bg-2); box-shadow: 0 18px 50px rgba(0,0,0,.5); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* filetto brand in alto (azzurro → rosso), firma broadcast sopra ogni slide */
.hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3; background: linear-gradient(90deg, var(--acc-2) 0%, var(--acc) 35%, var(--red) 100%); }
/* touch-action pan-y: lo scroll verticale resta al browser, i gesti orizzontali (swipe)
   arrivano a noi come pointer events invece di essere cancellati (pointercancel) */
.hero__track { display: grid; touch-action: pan-y; }
.hero__slide { grid-area: 1 / 1; position: relative; min-height: 450px; display: flex; opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility .55s; pointer-events: none; }
.hero__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center 35%; transform: scale(1.06); filter: blur(3px) saturate(1.05) brightness(.72); }
/* trattamento uniforme su tutte le foto (chiare o scure): velo pieno + vignetta
   laterale per il testo, così la leggibilità non dipende più dalla foto */
.hero__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(5,7,12,.28), rgba(5,7,12,.28)), linear-gradient(90deg, rgba(5,7,12,.88) 4%, rgba(5,7,12,.5) 46%, rgba(5,7,12,.2)), linear-gradient(0deg, rgba(5,7,12,.86) 0%, rgba(5,7,12,.08) 55%), radial-gradient(120% 90% at 50% 0%, transparent 60%, rgba(5,7,12,.5)); }
.hero__card { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; width: 100%; max-width: 1180px; margin: 0 auto; padding: 40px 88px 64px; }
.hero__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero__badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 5px; border-radius: 8px; font-family: var(--font-disp); font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: rgba(5,7,12,.72); border: 1px solid var(--brd-2); color: var(--txt); font-variant-numeric: tabular-nums; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero__badge.is-live { background: var(--red); border-color: rgba(255,120,120,.55); color: #fff; box-shadow: 0 4px 18px rgba(228,1,11,.5); }
.hero__badge.is-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.4s infinite; }
.hero__comp { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 12px 5px; border-radius: 8px; background: rgba(255,255,255,.07); border: 1px solid var(--brd); font-family: var(--font-disp); font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hero__comp img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.hero__comp img.is-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 3px; }
.hero__teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; flex: 1; min-height: 0; }
.hero__team { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; text-align: center; }
.hero__team img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.55)); }
.hero__team img.is-flag { width: 58px; height: 42px; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.hero__team i { font-style: normal; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-size: 21px; font-weight: 800; letter-spacing: .02em; color: #cdd8ea; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.hero__team b { font-family: var(--font-disp); font-size: 26px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1.05; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* "VS" grafico dell'utente al centro delle due squadre */
.hero__vs { width: 58px; height: auto; flex: none; filter: drop-shadow(0 5px 14px rgba(0,0,0,.55)) drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.hero__single { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.hero__single img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.55)); }
.hero__single .emoji { display: inline-grid; place-items: center; width: 68px; height: 68px; flex: none; font-size: 34px; background: rgba(5,7,12,.55); border: 1px solid var(--brd); border-radius: 18px; }
.hero__title { font-family: var(--font-disp); font-size: 28px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1.05; }
.hero__sub { color: var(--txt-2); font-size: 13.5px; margin-top: 3px; }
.hero__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.hero__chs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.hero__chs .chbtn { padding: 5px 11px 5px 5px; background: rgba(7,10,16,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero__more { font-size: 12.5px; font-weight: 700; color: var(--txt-2); padding: 5px 8px; }
.hero__cta { display: inline-flex; align-items: center; gap: 9px; padding: 13px 28px 12px; border-radius: 10px; background: linear-gradient(135deg, #00a0e4, #0077d8); color: #fff; font-family: var(--font-disp); font-size: 17px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 8px 24px rgba(0,144,228,.45), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .12s, box-shadow .15s, filter .15s; flex: none; position: relative; overflow: hidden; }
/* shine che attraversa il bottone all'hover */
.hero__cta::after { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-160%) skewX(-18deg); transition: transform .55s ease; pointer-events: none; }
.hero__cta:hover::after { transform: translateX(320%) skewX(-18deg); }
.hero__cta:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 10px 28px rgba(0,144,228,.55), inset 0 1px 0 rgba(255,255,255,.25); }
.hero__cta:active { transform: translateY(0); }
.hero__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(7,10,16,.5); border: 1px solid var(--brd); color: var(--txt-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .15s, color .15s; }
.hero__nav:hover { background: rgba(255,255,255,.14); color: var(--txt); }
.hero__nav--prev { left: 14px; }
.hero__nav--next { right: 14px; }
.hero__dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; display: flex; justify-content: center; gap: 7px; }
.hero__dots button { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.28); transition: width .25s, background .25s; }
.hero__dots button.is-active { width: 24px; background: var(--acc-2); box-shadow: 0 0 10px rgba(0,144,228,.6); }

/* ------------------------------------------------------------ sezioni eventi */
.sec__hd { display: flex; align-items: center; gap: 10px; margin: 24px 2px 12px; font-family: var(--font-disp); font-size: 20px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-2); }
.sec__hd .n { font-size: 11.5px; font-weight: 700; color: var(--txt-3); background: rgba(255,255,255,.07); border: 1px solid var(--brd); border-radius: 999px; padding: 2px 9px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.sec__hd::after { content: ""; flex: 1; height: 1px; min-width: 24px; background: linear-gradient(90deg, var(--brd-2), transparent); }
.sec__hd.is-live { color: #fff; }
.sec__hd.is-live i { width: 9px; height: 9px; border-radius: 50%; background: var(--live); box-shadow: 0 0 12px var(--live); animation: pulse 1.4s infinite; }
.sec__hd.is-past { opacity: .55; }
.evlist { display: grid; gap: 10px; }
.evlist--past .ev { padding: 10px 16px; }

/* categorie (accordion): una lega = un pannello in vetro */
.cat { background: linear-gradient(180deg, rgba(22,28,42,.9), rgba(11,15,22,.9)); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); overflow: hidden; backdrop-filter: blur(var(--blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--blur)) saturate(150%); box-shadow: 0 10px 26px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06); }
.cat__hd { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 18px 11px; text-align: left; font-family: var(--font-disp); font-weight: 700; font-size: 21px; letter-spacing: .05em; text-transform: uppercase; line-height: 1.1; transition: background .12s; }
.cat__hd:hover { background: rgba(255,255,255,.05); }
.cat__hd .n { flex: none; background: rgba(41,169,236,.14); border: 1px solid rgba(41,169,236,.38); color: var(--acc); font-weight: 800; font-size: 11px; padding: 2px 8px; border-radius: 7px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* anteprima del primo evento del gruppo (concept v2.7) */
.cat__more { flex: 1 1 auto; min-width: 0; color: var(--txt-3); font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* apri/chiudi tutti i gruppi in una volta */
.openall { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--acc); background: rgba(41,169,236,.1); border: 1px solid rgba(41,169,236,.35); border-radius: 999px; padding: 3px 11px; transition: background .12s; }
.openall:hover { background: rgba(41,169,236,.22); }
.cat__hd .chev { margin-left: auto; color: var(--txt-3); font-size: 22px; line-height: 1; transition: transform .18s; }
.cat.is-open .cat__hd .chev { transform: rotate(90deg); }
.cat__logo { width: 34px; height: 34px; object-fit: contain; flex: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.cat__logo--flag { width: 30px; height: 22px; object-fit: cover; border-radius: 4px; }
.cat__slot { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; background: rgba(5,7,12,.55); border: 1px solid var(--brd); border-radius: 11px; }
.cat__slot .cat__emoji { background: none; border: 0; width: auto; height: auto; }
.cat__emoji { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; font-size: 21px; background: rgba(5,7,12,.55); border: 1px solid var(--brd); border-radius: 11px; }
.cat__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat__body { display: none; }
.cat.is-open .cat__body { display: grid; gap: 8px; padding: 10px; border-top: 1px solid rgba(255,255,255,.07); }
/* categoria "In onda ora": accordion come le altre, ma riconoscibile dal bordo e dal pallino */
.cat[data-cat="__live"] { border-color: rgba(255,67,86,.32); }
.cat__hd .live-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--live); box-shadow: 0 0 12px var(--live); animation: pulse 1.4s infinite; }
.cat__hd .is-live-name { color: #fff; }

/* colore accento per sport: monogrammi delle squadre (la rail delle card è neutra,
   rossa solo sulle live) */
[data-sport="soccer"] { --sp: #34d399; }
[data-sport="basket"] { --sp: #fb923c; }
[data-sport="tennis"] { --sp: #a3e635; }
[data-sport="baseball"] { --sp: #f87171; }
[data-sport="hockey"] { --sp: #67e8f9; }
[data-sport="amfootball"] { --sp: #f97316; }
[data-sport="motor"] { --sp: #ef4444; }
[data-sport="combat"] { --sp: #f43f5e; }
[data-sport="golf"] { --sp: #4ade80; }
[data-sport="cricket"] { --sp: #fbbf24; }
[data-sport="rugby"] { --sp: #84cc16; }
[data-sport="volley"] { --sp: #fde047; }
[data-sport="handball"] { --sp: #fb7185; }
[data-sport="cycling"] { --sp: #38bdf8; }
[data-sport="athletics"] { --sp: #c084fc; }
[data-sport="snooker"] { --sp: #22c55e; }
[data-sport="darts"] { --sp: #f472b6; }
[data-sport="horse"] { --sp: #e879f9; }
[data-sport="swimming"] { --sp: #22d3ee; }
[data-sport="winter"] { --sp: #93c5fd; }
[data-sport="esports"] { --sp: #a78bfa; }
[data-sport="padel"] { --sp: #2dd4bf; }
[data-sport="afl"] { --sp: #fb923c; }
[data-sport="tv"] { --sp: #94a3b8; }
[data-sport="other"] { --sp: #9fb0cc; }

/* evento = un riquadro in vetro con rail neutra (rossa sulle live): [orario-tabellone] [squadre / titolo] [canali] */
.ev { position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr) minmax(280px, 40%); gap: 8px 18px; align-items: center; padding: 13px 16px 13px 21px; border-radius: var(--r); background: linear-gradient(180deg, rgba(22,28,42,.94), rgba(11,15,22,.94)); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(var(--blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--blur)) saturate(150%); box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.ev::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: rgba(255,255,255,.14); }
.ev:hover { border-color: rgba(255,255,255,.2); background: linear-gradient(180deg, rgba(26,33,49,.96), rgba(13,17,26,.96)); transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); }
.ev.is-live { border-color: rgba(255,67,86,.32); background: linear-gradient(155deg, rgba(228,1,11,.13), rgba(255,255,255,.03) 55%, rgba(255,255,255,.05)); }
.ev.is-live::before { background: linear-gradient(180deg, #ff6b7a, #e4010b); box-shadow: 0 0 12px rgba(255,67,86,.55); }
.ev.is-past { opacity: .58; }
.ev.is-past::before { background: rgba(255,255,255,.08); }
.ev__when { display: flex; flex-direction: column; align-items: center; gap: 3px; align-self: center; margin-left: 7px; padding: 8px 4px 7px; text-align: center; background: rgba(5,7,12,.55); border: 1px solid var(--brd); border-radius: 10px; }
.ev__time { font-family: var(--font-disp); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 24px; line-height: 1; color: var(--txt); letter-spacing: .02em; }
.ev__st { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); min-height: 13px; }
.ev.is-live .ev__when { border-color: rgba(255,67,86,.45); }
.ev.is-live .ev__time { color: #fff; }
.ev.is-live .ev__st { color: var(--live); }
.ev.is-live .ev__st::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live); margin-right: 5px; vertical-align: 1px; animation: pulse 1.4s infinite; box-shadow: 0 0 8px var(--live); }
.ev__info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ev__title { font-family: var(--font-disp); font-size: 20px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; line-height: 1.15; }
.ev__sub { color: var(--txt-2); font-size: 13.5px; margin-top: 2px; }
.ev__complogo { width: 36px; height: 36px; object-fit: contain; flex: none; }
.ev__complogo.is-flag { width: 32px; height: 24px; object-fit: cover; border-radius: 4px; }
.ev__none { color: var(--txt-3); font-size: 13px; }

/* squadre una sotto l'altra, stemma grande; senza stemma: monogramma tinto col colore dello sport */
.match { display: grid; grid-template-columns: 1fr; gap: 7px; min-width: 0; }
.team { display: flex; align-items: center; gap: 12px; min-width: 0; }
.team__logo { width: 38px; height: 38px; flex: none; display: grid; place-items: center; }
.team__logo img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.team__logo img.is-flag { width: 34px; height: 25px; object-fit: cover; border-radius: 5px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.team__logo i { font-style: normal; width: 100%; height: 100%; border-radius: 10px; display: grid; place-items: center; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: #cdd8ea; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); }
/* se il browser supporta color-mix, monogrammi tinti con il colore dello sport */
@supports (color: color-mix(in srgb, red, blue)) {
  .team__logo i, .hero__team i { color: color-mix(in srgb, var(--sp, #9fb0cc) 72%, #fff); background: color-mix(in srgb, var(--sp, #9fb0cc) 15%, rgba(10,14,22,.45)); border-color: color-mix(in srgb, var(--sp, #9fb0cc) 38%, transparent); }
}
.team__name { min-width: 0; font-family: var(--font-disp); font-weight: 600; font-size: 20px; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match__comp { display: flex; align-items: center; gap: 8px; color: var(--txt-2); font-size: 12.5px; margin-top: 2px; min-width: 0; }
.match__comp img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.match__comp img.is-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; }
.match__comp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* canali dell'evento: bottoni-riga con logo e nome */
.ev__chs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-self: center; }
.chbtn { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px 8px 8px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--brd); color: var(--txt); text-align: left; transition: background .12s, border-color .12s, transform .1s; }
.chbtn:hover { border-color: rgba(41,169,236,.45); background: rgba(41,169,236,.1); }
.chbtn__logo { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: #fff; overflow: hidden; font-size: 11px; font-weight: 800; color: #111; }
.chbtn__logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.chbtn__name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chbtn__it { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--acc); border: 1px solid rgba(41,169,236,.5); border-radius: 6px; padding: 1px 5px; }
.chbtn.is-it { border-color: rgba(41,169,236,.4); }
.chbtn.is-active { background: linear-gradient(135deg, #00a0e4, #0080e0); border-color: transparent; color: #fff; }
.chbtn.is-active .chbtn__it { color: #fff; border-color: rgba(255,255,255,.5); }
.chbtn.is-ko .chbtn__name { text-decoration: line-through; opacity: .55; }
.chbtn--more { justify-content: center; color: var(--txt-2); font-weight: 600; font-size: 13px; background: transparent; border-style: dashed; }

/* pill canale */
.pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid transparent; color: var(--txt); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .12s, border-color .12s, transform .1s; }
.pill:hover { border-color: var(--brd-2); background: rgba(255,255,255,.11); }
.pill.is-it { border-color: rgba(41,169,236,.45); }
.pill.is-it::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); flex: none; }
.pill.is-active { background: linear-gradient(135deg, #00a0e4, #0080e0); color: #fff; border-color: transparent; }
.pill.is-active::before { background: #fff; }
.pill.is-ko { text-decoration: line-through; opacity: .55; }
.pill img { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; background: #fff2; }
/* pressione: feedback tattile sobrio su pill e card (disattivato con reduced-motion) */
.chbtn:active, .ch:active, .pill:active { transform: scale(.97); }

/* canali 24/7 */
.chgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 8px 12px; min-width: 0; }
.chgrid > .ch { min-width: 0; max-width: 100%; }
.ch { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; overflow: hidden; padding: 10px 12px; text-align: left; border-radius: 14px; background: linear-gradient(180deg, rgba(22,28,42,.9), rgba(11,15,22,.9)); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .12s, border-color .12s, transform .1s, box-shadow .15s; }
.ch:hover { background: linear-gradient(180deg, rgba(26,33,49,.95), rgba(13,17,26,.95)); border-color: rgba(41,169,236,.45); box-shadow: 0 8px 22px rgba(0,0,0,.4), 0 0 0 1px rgba(41,169,236,.15); }
.ch.is-active { background: rgba(255,255,255,.1); border-color: rgba(41,169,236,.5); box-shadow: inset 3px 0 0 var(--acc); }
.logo { position: relative; width: 56px; height: 56px; flex: none; border-radius: 13px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); display: grid; place-items: center; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.logo img { width: 100%; height: 100%; object-fit: contain; padding: 7px; transition: opacity .15s; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
/* all'hover il logo sfuma e appare il play */
.logo::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; opacity: 0; transform: translateX(-2px); transition: opacity .15s, transform .15s;
  border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.7)); pointer-events: none; }
.ch:hover .logo img { opacity: .35; }
.ch:hover .logo::after { opacity: .95; transform: none; }
.logo span { font-weight: 800; font-size: 17px; color: var(--txt-2); }
.ch__txt { flex: 1 1 0; min-width: 0; overflow: hidden; }
.ch__name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch__sub { color: var(--txt-3); font-size: 12px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.epg { margin-top: 4px; min-width: 0; max-width: 100%; }
.epg__now { display: flex; align-items: baseline; gap: 8px; font-size: 12px; min-width: 0; overflow: hidden; }
.epg__now b { font-weight: 600; color: var(--txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.epg__next { color: var(--txt-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; min-width: 0; }
@media (max-width: 480px) { .epg__now b:not(:only-child) { max-width: 60%; } }
.epg__bar { height: 2px; margin-top: 4px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.epg__bar i { display: block; height: 100%; background: linear-gradient(90deg, #00a0e4, #29a9ec); border-radius: 2px; }
.nowepg { margin: 8px 4px 0; padding: 10px 12px; border-radius: var(--r-s); background: rgba(255,255,255,.05); border: 1px solid var(--brd); display: flex; flex-direction: column; gap: 8px; }
.nowepg__row { display: flex; gap: 12px; align-items: baseline; min-width: 0; font-size: 13px; color: var(--txt-2); }
.nowepg__row.is-cur { color: var(--txt); }
.nowepg__t { flex: none; font-variant-numeric: tabular-nums; color: var(--txt-3); font-size: 12px; min-width: 88px; }
.nowepg__txt { min-width: 0; flex: 1; }
.nowepg__txt b { font-weight: 700; }
.nowepg__txt small { display: block; color: var(--txt-3); font-size: 12px; margin-top: 2px; line-height: 1.4; }
.nowepg__lbl { color: var(--txt-3); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; margin-right: 4px; }
.nowepg .epg__bar { margin: 6px 0 4px; max-width: 420px; }
body.mode-mini .nowepg { display: none; }
.ch__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); flex: none; }
.ch.is-ok .ch__dot { background: var(--ok); box-shadow: 0 0 8px rgba(52,211,153,.6); }
.ch.is-ko .ch__dot { background: var(--err); }
.ch__fav { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--txt-3); font-size: 17px; opacity: 0; transition: opacity .12s; }
.ch:hover .ch__fav, .ch__fav.is-on { opacity: 1; }
.ch__fav.is-on { color: var(--fav); }
@media (hover: none) { .ch__fav { opacity: .6; } }

/* skeleton */
.sk { height: 14px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06)); background-size: 200% 100%; animation: sk 1.2s infinite; margin: 14px 4px; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ------------------------------------------------------------ player: WATCH */
.player { position: fixed; z-index: 50; background: var(--bg); }
body.mode-watch .player { inset: calc(var(--hdr-h) + var(--sat)) 0 0 0; overflow-y: auto; }
body.mode-watch .view { display: none; }
body.mode-watch .hdr .seg { display: none; }
.player__inner { max-width: 1180px; margin: 0 auto; padding: 0 20px calc(24px + var(--sab)); }
.player__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - var(--hdr-h) - var(--sat) - 150px); margin: 12px auto 0; background: #000; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow); }
/* sorgente "Web player": iframe della pagina embed (eventi DRM dash: il Widevine del browser dell'utente gestisce il playback), copre il video (che resta fermo senza src).
   z-1: sopra il video (z-auto), sotto toast (z-2) e overlay fail (z-4) che restano visibili. */
.player__evframe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; background: #000; display: block; }
.player__evframe[hidden] { display: none; }
video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; outline: none; }
.player__toast { position: absolute; left: 50%; bottom: 68px; transform: translateX(-50%); background: rgba(7, 10, 16, .8); border: 1px solid var(--brd-2); border-radius: 999px; padding: 8px 16px; font-size: 13px; color: var(--txt); white-space: nowrap; pointer-events: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow); z-index: 2; }
.player__toast.is-err { border-color: rgba(248, 113, 113, .5); color: #fecaca; }
.player__toast.is-ok { border-color: rgba(52, 211, 153, .5); color: #bbf7d0; }
/* overlay di errore nel frame: messaggio persistente + Riprova / altra sorgente */
.player__fail { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 16px; background: rgba(5,7,12,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.player__fail-in { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; max-width: 360px; }
.player__fail-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--err); background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.4); }
.player__fail-msg { font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--txt); }
.player__fail-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.player__fail-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px 9px; border-radius: 10px; background: linear-gradient(135deg, #00a0e4, #0077d8); color: #fff; font-family: var(--font-disp); font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 4px 16px rgba(0,144,228,.4); }
.player__fail-btn:active { transform: scale(.97); }
.player__fail-btn--alt { background: rgba(255,255,255,.09); border: 1px solid var(--brd-2); color: var(--txt); box-shadow: none; }
body.mode-mini .player__fail { display: none; }
.mini__expand { display: none; }

.nowbar { display: flex; align-items: center; gap: 14px; padding: 14px 4px 6px; }
.nowbar__logo { width: 52px; height: 52px; flex: none; border-radius: var(--r-s); background: rgba(255,255,255,.08); display: grid; place-items: center; overflow: hidden; }
.nowbar__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.nowbar__logo span { font-weight: 800; font-size: 18px; color: var(--txt-2); }
.nowbar__txt { flex: 1; min-width: 0; }
.nowbar__title { display: flex; align-items: center; gap: 10px; font-family: var(--font-disp); font-weight: 700; font-size: 24px; letter-spacing: .03em; text-transform: uppercase; line-height: 1.1; }
.nowbar__title > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowbar__sub { color: var(--txt-2); font-size: 13px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowbar__sub img { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-right: 3px; }
.nowbar__sub b { color: var(--txt-3); font-weight: 600; margin: 0 2px; }
.nowbar__acts { display: flex; gap: 6px; }
.ibtn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--txt-2); background: rgba(255,255,255,.07); border: 1px solid var(--brd); font-size: 18px; line-height: 1; transition: background .15s, color .15s, border-color .15s; }
.ibtn:hover { background: rgba(255,255,255,.13); color: var(--txt); border-color: var(--brd-2); }
.ibtn.is-on { color: var(--fav); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 2px; border-radius: 6px; font-family: var(--font-disp); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.badge--st { background: rgba(255,255,255,.09); color: var(--txt-2); }
.badge--st.is-ok { background: rgba(52, 211, 153, .15); color: var(--ok); }
.badge--st.is-err { background: rgba(248, 113, 113, .15); color: var(--err); }
.badge--st.is-ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.4s infinite; }
.alts { display: flex; align-items: center; gap: 10px; padding: 6px 4px 0; overflow: hidden; }
.alts__lbl { color: var(--txt-3); font-size: 12px; white-space: nowrap; }
.alts__row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.alts__row::-webkit-scrollbar { display: none; }
.alts__row .pill { flex: none; max-width: 200px; }
.srcrow { gap: 2px; width: fit-content; max-width: 100%; margin-top: 8px; padding: 3px; background: rgba(5,7,12,.55); border: 1px solid var(--brd); border-radius: 999px; }
.srcrow .alts__lbl { margin: 0 6px 0 10px; font-family: var(--font-disp); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.pill--src { font-family: var(--font-disp); font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px 4px; }
body.mode-mini .srcrow { display: none; }

/* link diretto condivisibile del flusso (concept v2.6/v2.7) */
.linkrow { display: flex; align-items: center; gap: 10px; margin: 10px 4px 0; padding: 8px 10px 8px 12px; border: 1px dashed var(--brd-2); border-radius: var(--r-s); background: rgba(255,255,255,.04); }
.linkrow__lbl { flex: none; font-family: var(--font-disp); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.linkrow code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; color: #cfe2f8; background: rgba(7,10,16,.55); border: 1px solid var(--brd); border-radius: 8px; padding: 6px 10px; }
.linkrow .ibtn { width: 34px; height: 34px; flex: none; }

/* ------------------------------------------------------------ player: MINI */
body.mode-mini .player { inset: auto 0 0 0; height: calc(var(--mini-h) + var(--sab)); padding-bottom: var(--sab); background: rgba(10, 14, 22, .82); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border-top: 1px solid var(--brd); box-shadow: 0 -10px 30px rgba(0, 0, 0, .45); }
body.mode-mini .player__inner { display: flex; align-items: center; gap: 12px; height: var(--mini-h); padding: 0 16px; }
body.mode-mini .player__frame { width: calc((var(--mini-h) - 14px) * 16 / 9); height: calc(var(--mini-h) - 14px); aspect-ratio: auto; max-height: none; margin: 0; border-radius: 10px; box-shadow: none; border-color: var(--brd-2); flex: none; cursor: pointer; }
body.mode-mini video { pointer-events: none; }
body.mode-mini .mini__expand { display: block; position: absolute; inset: 0; z-index: 3; }
body.mode-mini .player__toast { display: none; }
body.mode-mini .nowbar { flex: 1; min-width: 0; padding: 0; gap: 10px; cursor: pointer; }
body.mode-mini .nowbar__logo { display: none; }
body.mode-mini .nowbar__title { font-size: 18px; }
body.mode-mini .nowbar__sub { font-size: 12px; }
body.mode-mini .nowbar__acts .ibtn { width: 34px; height: 34px; }
body.mode-mini #favBtn, body.mode-mini #copyBtn, body.mode-mini #reloadBtn, body.mode-mini #minBtn { display: none; }
body.mode-mini .alts { display: none; }
body.mode-mini .linkrow { display: none; }

/* ------------------------------------------------------------ mobile */
@media (max-width: 760px) {
  :root { --mini-h: 64px; --blur: 14px; }
  .hdr { gap: 10px; padding-left: 12px; padding-right: 12px; }
  .seg__btn { padding: 6px 12px; }
  .search { width: 40px; padding: 0; justify-content: center; color: var(--txt-2); }
  .search svg { width: 18px; height: 18px; flex: none; }
  .search input { width: 0; opacity: 0; }
  .search kbd { display: none; }
  .search:focus-within { width: 100%; justify-content: flex-start; padding: 0 12px; }
  .search:focus-within input { width: auto; opacity: 1; }
  .hdr:has(.search:focus-within) .seg, .hdr:has(.search:focus-within) .brand { display: none; }

  .wrap { padding: 4px 12px calc(20px + var(--sab)); }
  .resume { padding: 0 12px; margin: 6px auto -4px; }
  .toolbar { margin: 0 -12px; padding: 4px 12px 0; }
  .chgrid { grid-template-columns: 1fr; }
  .ch { padding: 8px; }
  .logo { width: 50px; height: 50px; }

  /* hero compatto: swipe al posto delle frecce */
  .hero { border-radius: 0; margin: 6px -12px 10px; border-left: 0; border-right: 0; }
  .hero__slide { min-height: 340px; }
  /* dots più facili da toccare (stessa resa visiva: bordo trasparente fuori dal padding-box) */
  .hero__dots { gap: 2px; bottom: 10px; }
  .hero__dots button { box-sizing: content-box; width: 8px; height: 8px; border: 8px solid transparent; background-clip: padding-box; }
  .hero__dots button.is-active { width: 24px; }
  .hero__card { padding: 16px 16px 46px; gap: 12px; }
  .hero__team img { width: 46px; height: 46px; }
  .hero__team img.is-flag { width: 44px; height: 32px; }
  .hero__team i { width: 46px; height: 46px; border-radius: 12px; font-size: 15px; }
  .hero__team b { font-size: 19px; }
  .hero__vs { width: 40px; }
  .hero__title { font-size: 22px; }
  .hero__single img { width: 44px; height: 44px; }
  .hero__cta { padding: 11px 20px 10px; font-size: 15px; }
  .hero__nav { display: none; }
  .ev { grid-template-columns: 62px minmax(0, 1fr); padding: 12px 12px 12px 18px; gap: 10px 12px; }
  .ev__chs { grid-column: 1 / -1; }
  .cat__more { display: none; }
  .cat__hd { padding: 10px 14px 9px; gap: 10px; font-size: 18px; }
  .linkrow { flex-wrap: wrap; }
  .linkrow code { flex-basis: 100%; order: 3; }

  .player__inner { padding: 0 0 calc(16px + var(--sab)); }
  .player__frame { margin: 0; border-radius: 0; max-height: 56vh; border-left: 0; border-right: 0; }
  .nowbar { padding: 10px 12px 4px; gap: 10px; flex-wrap: wrap; }
  .nowbar__logo { width: 40px; height: 40px; }
  .nowbar__title { font-size: 19px; }
  .nowbar__txt { flex: 1 1 60%; }
  .nowbar__acts { width: 100%; justify-content: flex-end; }
  .ibtn { width: 36px; height: 36px; }
  #pipBtn { display: none; }
  .alts { padding: 4px 12px 0; }

  body.mode-mini .player__inner { padding: 0 10px; gap: 10px; }
  body.mode-mini .nowbar { flex-wrap: nowrap; }
  body.mode-mini .nowbar__acts { width: auto; }
  body.mode-mini .nowbar__sub { display: none; }
}

/* telefono in orizzontale mentre guardi: solo il video */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  body.mode-watch { padding-top: 0; }
  body.mode-watch .hdr { display: none; }
  body.mode-watch .player { inset: 0; }
  body.mode-watch .player__frame { max-height: 100vh; height: 100vh; aspect-ratio: auto; border-radius: 0; }
  body.mode-watch .nowbar, body.mode-watch .alts { display: none; }
}

@media (min-width: 761px) and (max-width: 980px) {
  .ev { grid-template-columns: 78px minmax(0, 1fr) minmax(220px, 38%); }
  .ev__chs { grid-template-columns: 1fr; }
  .hero__team img { width: 52px; height: 52px; }
  .hero__team b { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* card partita su schermi stretti: testo appena più piccolo, un canale per riga */
@media (max-width: 480px) {
  .ev__time { font-size: 19px; }
  .team__logo, .team__logo img { width: 34px; height: 34px; }
  .team__logo i { font-size: 12px; border-radius: 8px; }
  .team__name, .ev__title { font-size: 17.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ev__chs { grid-template-columns: 1fr; }
}

/* scheda EPG nel player: su telefono orario sopra al titolo */
@media (max-width: 480px) {
  .nowepg { margin: 8px 0 0; }
  .nowepg__row { flex-direction: column; gap: 2px; }
  .nowepg__t { min-width: 0; }
  .nowepg .epg__bar { max-width: none; }
}

/* =====================================================================
   Eventi con banner LIVETV (app.js: ev.banner) — il poster 640x360 ha già
   dentro scudetti + vs + competizione: la card è l'immagine, niente loghi
   calcolati lato client. Se l'img 404 viene nascosta (handler globale) e
   resta la fascia col titolo su sfondo sfumato.
   ===================================================================== */
.ev--banner { grid-template-columns: 78px minmax(0, 1fr) minmax(220px, 34%); }
.ev__banner { position: relative; margin: 0; min-width: 0; min-height: 88px; border-radius: 10px; overflow: hidden; border: 1px solid var(--brd); background: linear-gradient(160deg, rgba(41,169,236,.16), rgba(5,7,12,.66)); }
.ev__banner img { display: block; width: 100%; height: 92px; object-fit: cover; object-position: center; }
.ev__banner figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 10px 5px; font-family: var(--font-disp); font-weight: 600; font-size: 12.5px; line-height: 1.25; letter-spacing: .02em; color: #fff; background: linear-gradient(transparent, rgba(5,7,12,.88)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.ev.is-past .ev__banner img { filter: grayscale(.7) brightness(.75); }

/* slide hero con banner: poster nitido (niente blur/scale) + overlay ridotto,
   badge in alto e pill/CTA in basso (hero__card--banner = space-between) */
.hero__bg--banner { filter: saturate(1.08) brightness(.92); transform: none; }
.hero__card--banner { justify-content: space-between; min-height: 320px; }
@media (max-width: 760px) {
  .ev--banner { grid-template-columns: 62px minmax(0, 1fr); }
  .ev__banner img { height: 84px; }
  .hero__card--banner { min-height: 260px; }
}