/* --------------------------------------------------
 CSS - LiveFootball Global Standard
 Clean Encoding & Premium UI (Final Fixed Version)
 -------------------------------------------------- */

:root {
 --bg-body: hsl(210, 30%, 95%);
 --bg-card: hsl(0, 0%, 100%);
 --bg-header: hsl(210, 15%, 98%);
 --border-card: hsl(210, 15%, 88%);
 --border-live: hsl(0, 75%, 55%);
 --text-primary: hsl(210, 20%, 20%);
 --text-secondary: hsl(210, 10%, 45%);
 --text-muted: hsl(210, 8%, 60%);
 --accent-red: hsl(0, 75%, 55%);
 --accent-green: hsl(145, 55%, 42%);
 --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 --radius: 12px;
 --shadow-card: 0 1px 4px rgba(0,0,0,0.06);
 --shadow-hover: 0 4px 16px rgba(0,0,0,0.1);
 --max-width: 1300px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
 font-family: var(--font-main);
 background: var(--bg-body);
 color: var(--text-primary);
 line-height: 1.5;
 min-height: 100vh;
}

/* -- Header -- */
.site-header {
 background: #ffffff;
 padding: 4px 20px;
 text-align: center;
 border-bottom: 1px solid var(--border-card);
 margin-bottom: 15px;
}

.site-header .logo-img {
 height: 16px;
 max-width: 100%;
}

/* -- Main Container -- */
main {
 max-width: var(--max-width);
 margin: 0 auto;
 padding: 0 20px;
}

/* -- Titles & Dividers -- */
.section-title {
 text-align: center;
 font-size: 1.6rem;
 font-weight: 800;
 color: var(--text-primary);
 margin: 10px 0 24px;
}

.section-divider {
 text-align: center;
 margin: 20px 0 16px;
 position: relative;
 height: 2px;
 background: var(--border-card);
}

.section-divider::after {
 content: '';
 position: absolute;
 top: -1px;
 left: 50%;
 transform: translateX(-50%);
 width: 80px;
 height: 4px;
 background: var(--accent-red);
 border-radius: 4px;
}

/* -- Channel Grid -- */
.channel-grid-top, .channel-grid {
 display: grid;
 grid-template-columns: repeat(6, 1fr);
 gap: 16px;
 margin-bottom: 24px;
 justify-content: center; /* Centraliza no container */
}

@media (min-width: 1024px) {
 .channel-grid-top, .channel-grid {
 grid-template-columns: repeat(auto-fit, 160px); /* Tamanho fixo para centralizar */
 }
}

.channel-card {
 will-change: transform;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-decoration: none !important;
 color: var(--text-primary);
 background: rgba(255, 255, 255, 0.7);
 border-radius: 16px;
 border: 1px solid hsla(210, 15%, 88%, 0.6);
 padding: 0;
 transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
 position: relative;
 overflow: hidden;
 box-shadow: 0 4px 12px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.03);
 text-align: center;
}

@property --angle {
 syntax: '<angle>';
 initial-value: 0deg;
 inherits: false;
}

@keyframes spinBorder {
 to { --angle: 360deg; }
}

/* Premium Animated Border (Cobrinha) for Live Channels */
.channel-card.is-live {
 border: none !important;
 background: transparent;
 position: relative;
 overflow: hidden;
 padding: 5px;
 order: -1;
}

.channel-card.is-live::before {
 content: '';
 position: absolute;
 top: -50%;
 left: -50%;
 width: 200%;
 height: 200%;
 background: conic-gradient(
 from var(--angle),
 transparent 0%,
 transparent 60%,
 rgba(220, 38, 38, 0.1) 75%,
 #dc2626 90%,
 #ff5e5e 98%,
 transparent 100%
 );
 animation: spinBorder 3.5s linear infinite;
 z-index: 0;
}

.channel-card.is-live::after {
 content: '';
 position: absolute;
 inset: 5px;
 background: #ffffff;
 border-radius: 11px;
 z-index: 1;
}

.channel-card.is-live > :not(.live-badge) {
 position: relative;
 z-index: 2;
}

.channel-card.is-live .channel-img {
 background-color: transparent;
 border-radius: 11px 11px 0 0;
}

.channel-card.is-live .channel-name {
 border-bottom-left-radius: 11px;
 border-bottom-right-radius: 11px;
}

.channel-card:hover {
 transform: translateY(-4px) scale(1.03);
 box-shadow: 0 8px 25px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.07);
 border-color: hsla(220, 90%, 55%, 0.3);
 text-decoration: none !important;
}

.channel-card .channel-img {
 width: 100%;
 aspect-ratio: 1 / 1;
 border: none;
 border-radius: 16px 16px 8px 8px;
 background-size: contain;
 background-position: center;
 background-repeat: no-repeat;
 background-color: rgba(255, 255, 255, 0.7);
 padding: 0.2rem;
 transition: transform 0.3s ease, filter 0.3s ease;
}

.channel-card:hover .channel-img {
 transform: scale(1.05);
 filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

/* Nome do canal ao vivo em vermelho */
.channel-card.is-live .channel-name {
 color: var(--accent-red);
 font-weight: 800;
}

.channel-card .channel-img[data-channel="telecinco"],
.channel-card .channel-img[data-channel="atv"] {
 background-size: 85%;
}

.channel-card .channel-img[data-channel="star tv"] {
 background-size: 70%;
}

.channel-card .channel-name {
 display: block;
 padding: 0.75rem;
 font-size: 0.875rem;
 font-weight: 600;
 color: var(--text-primary);
 border-top: 1px solid hsla(210, 15%, 88%, 0.5);
 background: linear-gradient(to right, rgba(249,250,251,0.8), rgba(243,244,246,0.8));
 text-align: center;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 100%;
 width: 100%;
 margin-top: 0;
 transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.channel-card:hover .channel-name {
 border-color: hsla(220, 90%, 55%, 0.2);
 background: linear-gradient(to right, hsla(220, 90%, 55%, 0.1), hsla(220, 90%, 55%, 0.05));
 color: hsl(220, 90%, 55%);
}

/* -- Game Cards -- */
#games-container {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 16px;
 margin-bottom: 40px;
}

.game-card {
 text-decoration: none !important;
 color: inherit;
 display: flex;
 flex-direction: column;
 gap: 0.75rem;
 text-decoration: none;
 color: var(--text-primary);
 background: rgba(255, 255, 255, 0.7);
 border: 1px solid hsla(0, 0%, 100%, 0.6);
 border-radius: 16px;
 padding: 0.75rem;
 box-shadow: 0px 3px 0px rgba(0,0,0,0.25);
 transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
 will-change: transform;
}

.game-card:hover {
 text-decoration: none !important;
 color: inherit;
 transform: translateY(-2px);
 box-shadow: 1px 3px 5px rgba(0,0,0,0.15), 1px 1px 0px rgba(0,0,0,0.07);
 border-color: aliceblue;
}

/* Jogos ao vivo — glow vermelho ESTÁTICO (igual /canais/) */
.game-card.game-live {
 border-color: transparent;
 box-shadow: 0 4px 12px rgb(220, 38, 38), 0 2px 4px rgb(220, 38, 38);
 animation: none;
}

.game-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 0.25rem;
 flex-wrap: nowrap;
}

.game-status {
 font-size: 0.75rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 padding: 0.25rem 0.75rem;
 border-radius: 12px;
 display: flex;
 align-items: center;
 gap: 0.375rem;
 white-space: nowrap;
 margin-left: auto;
 flex-shrink: 0;
}

.game-status.status-not-started {
 color: hsl(0, 0%, 20%);
 background: #f3c500;
 border: none;
}

/* Ao vivo — pill vermelho com pulso. Minutos mostrados dentro dele. */
.game-status.status-live {
 color: #ffffff;
 background: hsl(0, 84%, 50%);
 border: none;
 font-size: 0.8rem;
 font-weight: 800;
 letter-spacing: 0.04em;
 padding: 0.3rem 0.85rem;
 border-radius: 8px;
 box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
 animation: livePulse 1.8s ease-in-out infinite;
}

@keyframes livePulse {
 0% { box-shadow: 0 0 0 0px rgba(220, 38, 38, 0.55); }
 60% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
 100% { box-shadow: 0 0 0 0px rgba(220, 38, 38, 0); }
}

.live-dot {
 display: inline-block;
 width: 7px;
 height: 7px;
 background: #fff;
 border-radius: 50%;
 flex-shrink: 0;
 animation: blinkDot 1.2s ease-in-out infinite;
}

.game-status.status-finished {
 background: #efefef;
 color: #999;
 border: none;
}

.game-teams {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 12px 0;
 width: 100%;
}

.team {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 flex: 1;
 min-width: 0;
}

.team-logo { width: 56px; height: 56px; object-fit: contain; }
.team-name { font-size: 0.85rem; font-weight: 700; text-align: center; color: #333; line-height: 1.2; }
.team-score { font-size: 1.8rem; font-weight: 900; color: var(--text-primary); margin-top: 2px; }

.game-vs {
 font-size: 0.75rem;
 font-weight: 700;
 color: #aaa;
 background: #f0f0f0;
 width: 30px;
 height: 30px;
 flex-shrink: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
}

/* -- LIVE Badge nos Cards de Canal (Premium Circular) -- */
.live-badge {
 position: absolute;
 top: 8px;
 left: 50%;
 transform: translateX(-50%);
 background: #dc2626;
 width: 32px;
 height: 22px;
 border-radius: 6px;
 box-shadow: 0 3px 8px rgba(220, 38, 38, 0.45), 0 1px 3px rgba(0, 0, 0, 0.15);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 50;
 color: transparent;
 font-size: 0;
 overflow: hidden;
 padding: 0;
 border: none;
}

.live-badge .dot {
 width: 4px;
 height: 4px;
 background: #ffffff;
 border-radius: 50%;
 flex-shrink: 0;
 position: relative;
 animation: liveIconPulse 1.8s ease-in-out infinite;
}

/* Ondas internas do ícone ((•)) */
.live-badge .dot::before {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 10px;
 height: 10px;
 border: 1.5px solid transparent;
 border-left-color: #ffffff;
 border-right-color: #ffffff;
 border-radius: 50%;
}

/* Ondas externas do ícone ((•)) */
.live-badge .dot::after {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 16px;
 height: 16px;
 border: 1.5px solid transparent;
 border-left-color: #ffffff;
 border-right-color: #ffffff;
 border-radius: 50%;
}

@keyframes liveIconPulse {
 0%, 100% { opacity: 1; transform: scale(1); }
 50% { opacity: 0.5; transform: scale(0.9); }
}

/* Ponto vermelho dentro do game-card (fundo escuro) */
.game-header .live-badge .dot {
 background: #ff0000;
}

@keyframes blinkDot {
 0%, 100% { opacity: 1; transform: scale(1); }
 50% { opacity: 0.3; transform: scale(0.8); }
}

@keyframes subtleBreath {
 0%, 100% { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
 50% { box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5), 0 2px 8px rgba(220, 38, 38, 0.3); }
}

/* Animação subtleBreath SOMENTE nos cards de canal ao vivo */
.channel-card.is-live {
 animation: subtleBreath 2.5s ease-in-out infinite;
}

/* -- Tabs -- */
.tabs-container {
 display: flex;
 justify-content: center;
 margin-bottom: 24px;
 border-bottom: 1px solid var(--border-card);
}

.tab-btn {
 background: transparent;
 border: none;
 padding: 12px 24px;
 font-weight: 700;
 color: var(--text-secondary);
 cursor: pointer;
 text-transform: uppercase;
 position: relative;
}

.tab-btn.active { color: var(--accent-red); }
.tab-btn.active::after {
 content: '';
 position: absolute;
 bottom: -1px;
 left: 0;
 right: 0;
 height: 3px;
 background: var(--accent-red);
}

/* -- About Section (Restored as Card) -- */
.contextual-text {
 background: var(--bg-card);
 border-radius: 20px;
 padding: 32px;
 margin: 60px 0 40px;
 border: 1px solid var(--border-card);
 box-shadow: var(--shadow-card);
}

.contextual-text .main-title {
 font-size: 1.6rem;
 font-weight: 800;
 margin-bottom: 12px;
 color: var(--text-primary);
}

.contextual-text .subtitle {
 font-size: 1.05rem;
 font-weight: 600;
 color: var(--text-secondary);
 margin-bottom: 20px;
}

.contextual-text .description {
 font-size: 0.95rem;
 color: var(--text-secondary);
 line-height: 1.8;
}

/* -- Channel Specific Scaling -- */
[data-channel="espn"], [data-channel="espn nl"] { background-size: 130% !important; }
[data-channel="tnt sports"] { background-size: 88% !important; }
[data-channel="amazon prime"] { background-size: 115% !important; }
[data-channel="sky sports"] { background-size: 110% !important; }
[data-channel="bbc sport"] { background-size: 115% !important; }
[data-channel="itv"] { background-size: 110% !important; }
[data-channel="fox sports"] { background-size: 110% !important; }
[data-channel="cbs sports"] { background-size: 110% !important; }
[data-channel="fubotv"] { background-size: 115% !important; }
[data-channel="paramount+"] { background-size: 112% !important; }

/* -- Channel Specific Overrides (DE) -- */
[data-channel="sky sport"] { background-size: 115% !important; }
[data-channel="dazn"] { background-size: 115% !important; }
[data-channel="rtl+"] { background-size: 95% !important; }
[data-channel="ard"] { background-size: 115% !important; }
[data-channel="zdf"] { background-size: 115% !important; }
[data-channel="sport1"] { background-size: 115% !important; }

/* -- Footer & Warning Box -- */
footer {
 padding: 0 0 40px;
 margin: 0 auto;
 max-width: var(--max-width);
}

.warning-box {
 background: hsl(45, 90%, 95%);
 border: 1px solid hsl(45, 70%, 80%);
 border-radius: var(--radius);
 padding: 16px 20px;
 display: flex;
 gap: 12px;
 margin: 0 20px 24px; /* Margens laterais seguras */
 align-items: flex-start;
}

.warning-box p {
 font-size: 0.82rem;
 color: hsl(35, 40%, 35%);
 line-height: 1.6;
}

.footer-nav { display: flex; justify-content: center; gap: 24px; margin-bottom: 20px; flex-wrap: wrap; }
.footer-nav a { font-size: 0.88rem; color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.footer-nav a:hover { color: var(--accent-red); }
.footer-copy { text-align: center; font-size: 0.8rem; color: var(--text-muted); }

/* -- Responsive -- */
@media (max-width: 768px) {
 /* Grid de canais: sempre 3 colunas no mobile (igual /canais/) */
 .channel-grid-top, .channel-grid {
 grid-template-columns: repeat(3, 1fr);
 gap: 12px;
 justify-content: center;
 }
 #games-container { grid-template-columns: 1fr; }
 .section-title { font-size: 1.3rem; }
 .game-card { padding: 14px 16px; }
}

@media (max-width: 480px) {
 main { padding: 0 12px; }
 .channel-grid-top, .channel-grid {
 grid-template-columns: repeat(3, 1fr);
 gap: 8px;
 }
 .channel-card {
 padding: 0;
 border-radius: 16px;
 }
 .channel-card .channel-name { font-size: 0.7rem; font-weight: 600; padding: 0.5rem; }
 .team-logo { width: 44px; height: 44px; }
 .team-name { font-size: 0.75rem; }
 .team-score { font-size: 1.5rem; }
 .tab-btn { font-size: 0.85rem; padding: 10px 16px; }
 .game-status { font-size: 0.65rem; padding: 3px 8px; }
}

/* Sport TV - black background and reduced logo */
.channel-card .channel-img[data-channel="sport tv"] {
 background-color: #000 !important;
 background-size: 85%;
}

/* RTP - reduced logo */
.channel-card .channel-img[data-channel="rtp"] {
 background-size: 85%;
}

/* Arryadia - reduced logo */
.channel-card .channel-img[data-channel="arryadia"] {
 background-size: 85%;
}

/* Mexico overrides */
.channel-card .channel-img[data-channel="tudn"] {
 background-size: 120%;
}

.channel-card .channel-img[data-channel="azteca 7"] {
 background-size: 85%;
}

/* -- Global Preloader (igual /canais/) -- */
body.loading {
 overflow: hidden;
}

#av-loader {
 position: fixed;
 inset: 0;
 background: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 z-index: 9999;
}

.ripple-container {
 position: relative;
 width: 0;
 height: 0;
}

.ripple-container::before,
.ripple-container::after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 width: 30px;
 height: 30px;
 margin: -20px 0 0 -20px;
 border: 4px solid #000000;
 border-radius: 50%;
 opacity: 0;
 animation: ripple 1s linear infinite;
}

.ripple-container::after {
 animation-delay: 0.5s;
}

@keyframes ripple {
 0% { transform: scale(0.2); opacity: 1; }
 100% { transform: scale(1.8); opacity: 0; }
}

#av-loader.hide {
 animation: fadeout 0.5s forwards;
}

@keyframes fadeout {
 to { opacity: 0; visibility: hidden; }
}


/* Games Loader */
.loader {
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 3rem 0;
 width: 100%;
}
.spinner {
 display: none !important;
 width: 40px;
 height: 40px;
 border: 4px solid rgba(0, 0, 0, 0.1);
 border-left-color: #E30613;
 border-radius: 50%;
 animation: spin 1s linear infinite;
}
@keyframes spin {
 to { transform: rotate(360deg); }
}

/* Game Live Badge (Top Left) */
.game-live-badge {
 color: var(--accent-red);
 background: hsla(0, 75%, 55%, 0.1);
 font-size: 0.65rem;
 font-weight: 800;
 text-transform: uppercase;
 padding: 0.2rem 0.5rem;
 border-radius: 6px;
 display: inline-block;
 letter-spacing: 0.05em;
}

/* GTM Click Tracking Fix */
.clickcanaisegames * {
 pointer-events: none;
}

/* -- Expand Games System -- */
.games-hidden-group {
 grid-column: 1 / -1;
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 16px;
 max-height: 0;
 overflow: hidden;
 opacity: 0;
 transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
 opacity 0.4s ease,
 margin 0.4s ease;
 margin-top: 0;
}

.games-hidden-group.expanded {
 max-height: 4000px;
 opacity: 1;
 margin-top: 16px;
}

@media (max-width: 768px) {
 .games-hidden-group {
 grid-template-columns: 1fr;
 }
}

.games-expand-btn {
 grid-column: 1 / -1;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 margin-top: 8px;
 padding: 12px 28px;
 background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(243,244,246,0.9));
 border: 1px solid var(--border-card);
 border-radius: 12px;
 color: var(--text-secondary);
 font-family: var(--font-main);
 font-size: 0.88rem;
 font-weight: 700;
 cursor: pointer;
 transition: all 0.3s ease;
 box-shadow: 0 2px 6px rgba(0,0,0,0.06);
 -webkit-tap-highlight-color: transparent;
}

.games-expand-btn:hover {
 background: linear-gradient(135deg, rgba(243,244,246,1), rgba(229,231,235,1));
 border-color: hsl(210, 15%, 78%);
 color: var(--text-primary);
 box-shadow: 0 4px 12px rgba(0,0,0,0.1);
 transform: translateY(-1px);
}

.games-expand-btn svg {
 transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 flex-shrink: 0;
}

.games-expand-btn.expanded svg {
 transform: rotate(180deg);
}

/* Fix link underlines inside game cards */
.game-card * { text-decoration: none !important; color: inherit; }