[x-cloak] { display: none !important; }

.font-display { font-weight: 700; }

:root { color-scheme: dark; }

body { background: hsl(240 7% 7%); }

/* ---------- Selo AO VIVO ---------- */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    border-radius: .25rem;
    background: rgb(var(--brand));
    padding: .125rem .5rem;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgb(var(--brand-fg));
}

.live-dot {
    position: relative;
    display: inline-block;
    height: .5rem;
    width: .5rem;
    flex-shrink: 0;
    border-radius: 9999px;
    background: currentColor;
}
.live-badge .live-dot { background: rgb(var(--brand-fg)); }

/* ---------- Tela ---------- */
.tv-frame {
    position: relative;
    border-radius: 1rem;
    background: #000;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 50px -20px rgba(0, 0, 0, .8);
}

/* Estática ao trocar de canal */
.static-flash {
    animation: static-out .45s ease-out forwards;
}
@keyframes static-out {
    0% { opacity: 1; filter: brightness(2); }
    100% { opacity: 0; filter: brightness(1); }
}

/* ---------- Guia de programação ---------- */
.epg-row {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: .75rem;
    border-radius: .75rem;
    background: hsl(240 7% 10%);
    padding: .875rem 1rem .875rem .75rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
    transition: background .2s, box-shadow .2s, transform .2s;
}
.epg-row:hover {
    background: hsl(240 7% 13%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.epg-row.is-live::before {
    content: "";
    position: absolute;
    left: 0;
    top: .75rem;
    bottom: .75rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: rgb(var(--brand));
}

/* Foto de jogador no lugar do escudo: círculo preenchendo o espaço */
.crest-photo {
    inset: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 9999px;
    object-fit: cover !important;
    filter: none !important;
}

/* ---------- Cards de canal ---------- */
.channel-card { display: block; }

/* ---------- Desempenho ----------
   content-visibility: o navegador só calcula layout/pintura do que está perto da tela.
   contain-intrinsic-size reserva o espaço aproximado (e lembra o real depois) para a
   barra de rolagem não pular. */
.cv-auto { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.epg-row { content-visibility: auto; contain-intrinsic-size: auto 92px; }
.channel-card { content-visibility: auto; contain-intrinsic-size: auto 170px; }

/* Barra de tempo do carrossel: enche em --slide-ms e o fim da animação troca o slide */
@keyframes slide-fill { from { width: 0; } to { width: 100%; } }
.slide-fill { animation: slide-fill var(--slide-ms, 5s) linear forwards; }

/* ---------- Utilidades ---------- */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    white-space: nowrap;
    border-radius: 9999px;
    padding: .5rem .9rem;
    font-size: .8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    transition: all .2s;
}
.chip:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.chip.active {
    color: rgb(var(--brand-fg));
    background: rgb(var(--brand));
}