/* ========================================
   RESET
======================================== */

:root{
  --primary:#ff1a1a;
  --primary-dark:#b30000;
  --bg:#0b0b0b;
  --bg-soft:#141414;
  --bg-card:#181818;
  --border:rgba(255,255,255,.06);
  --text:#f2f2f2;
  --muted:#a8a8a8;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.2px;
  overflow-x:hidden;
}

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

button{
  font-family:inherit;
}

a{
  color:#58b6ff;
  text-decoration:none;
  transition:.25s ease;
}

a:hover{
  color:#9ad4ff;
}

::selection{
  background:var(--primary);
  color:#fff;
}

::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(
    var(--primary),
    #700000
  );
  border-radius:999px;
}

/* ========================================
   LAYOUT
======================================== */

.container{
  max-width:1200px;
  margin:auto;
  padding:30px 20px;
}

.main{
  width:100%;
}

/* ========================================
   HEADER
======================================== */

header{
  position:sticky;
  top:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 26px;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,0,0,.25);
}

.logo{
  position:relative;
  padding-left:14px;
  font-size:26px;
  font-weight:900;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:1px;
}

.logo::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:5px;
  height:75%;
  background:var(--primary);
}

.menu{
  display:flex;
  align-items:center;
  gap:16px;
}

.menu a{
  padding:8px 12px;
  border-radius:8px;
  color:#d4d4d4;
  font-size:14px;
  font-weight:600;
}

.menu a:hover{
  background:#171717;
  color:#fff;
}

.menu-toggle{
  display:none;
  background:none;
  border:none;
  color:#fff;
  font-size:24px;
  cursor:pointer;
}

/* ========================================
   HERO FINAL
======================================== */

.hero-tv{
  position:relative;
  overflow:hidden;
  padding:90px 20px 80px;
  border-bottom:1px solid rgba(255,0,0,.20);
  background:
    radial-gradient(
      circle at top,
      rgba(255,0,0,.16),
      transparent 60%
    ),
    linear-gradient(
      120deg,
      #000,
      #180000,
      #000
    );
}

.hero-container{
  position:relative;
  z-index:2;
  max-width:950px;
  margin:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* ========================================
   LOGO
======================================== */

.hero-logo{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:28px;
  font-size:48px;
  font-weight:900;
  line-height:1;
  color:#fff;
}

.hero-logo span{
  color:var(--primary);
}

/* ========================================
   H1
======================================== */

.hero-tv h1{
  max-width:900px;
  margin:0 0 30px;
  font-size:clamp(34px,5vw,58px);
  font-weight:900;
  line-height:1.15;
  letter-spacing:-1px;
  color:#fff;
}

/* ========================================
   MINI CARD
======================================== */

.hero-mini-card{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:34px;
  padding:15px 22px;
  border-left:4px solid var(--primary);
  border-radius:14px;
  background:#141414;
  color:#d7d7d7;
  font-size:16px;
  line-height:1.6;
}

.hero-mini-card strong{
  color:#fff;
}

.hero-mini-card a{
  color:#58b6ff;
  font-weight:700;
}

.hero-mini-card a:hover{
  color:#8fd2ff;
}

/* ========================================
   H2
======================================== */

.hero-tv h2{
  max-width:900px;
  margin:0 0 28px;
  font-size:clamp(24px,3vw,38px);
  font-weight:800;
  line-height:1.3;
  color:#fff;
}

/* ========================================
   TEXTO
======================================== */

.hero-sub{
  max-width:880px;
  margin:0 auto;
  color:#d0d0d0;
  font-size:19px;
  line-height:1.9;
}

.hero-sub strong{
  color:#fff;
}

/* ========================================
   MOBILE
======================================== */

@media(max-width:768px){

  .hero-tv{
    padding:65px 18px 60px;
  }

  .hero-logo{
    margin-bottom:22px;
    font-size:34px;
  }

  .hero-tv h1{
    margin-bottom:26px;
    font-size:clamp(32px,9vw,44px);
    line-height:1.18;
    letter-spacing:-.5px;
  }

  .hero-mini-card{
    width:100%;
    margin-bottom:28px;
    padding:14px 16px;
    font-size:14px;
    line-height:1.7;
  }

  .hero-tv h2{
    margin-bottom:22px;
    font-size:clamp(22px,6vw,30px);
    line-height:1.38;
  }

  .hero-sub{
    font-size:16px;
    line-height:1.85;
  }

}

/* ========================================
   CONTEÚDO / SEO
======================================== */

.content-seo{
  margin-top:50px;
}

.content-seo p{
  margin-bottom:28px;
  color:#e2e2e2;
  font-size:20px;
  line-height:1.95;
}

.content-seo strong{
  color:#fff;
}

.content-seo a{
  color:#58b6ff;
  font-weight:700;
}

.content-seo a:hover{
  color:#8fd2ff;
}

/* ========================================
   DESTAQUE COPA
======================================== */

.destaque-copa{
  margin-top:60px;
  margin-bottom:60px;
  padding:34px;
  border-radius:22px;
  background:
    linear-gradient(
      180deg,
      #141414,
      #0f0f0f
    );
  border:1px solid rgba(255,255,255,.06);
}

.destaque-copa h2{
  margin-bottom:18px;
  font-size:38px;
  line-height:1.2;
  color:#fff;
}

.destaque-copa p{
  margin-bottom:30px;
  color:#d0d0d0;
  font-size:19px;
  line-height:1.85;
}

/* ========================================
   LINKS COPA
======================================== */

.links-copa{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

/* ========================================
   FAQ
======================================== */

main h2{
  margin-top:60px;
  margin-bottom:26px;
  font-size:34px;
  line-height:1.2;
  color:#fff;
}

main h3{
  margin-top:40px;
  margin-bottom:14px;
  font-size:28px;
  line-height:1.35;
  color:#fff;
}

main p{
  margin-bottom:24px;
  color:#d5d5d5;
  font-size:19px;
  line-height:1.9;
}

/* ========================================
   FOOTER
======================================== */

.footer{
  margin-top:80px;
  padding:70px 20px 40px;
  border-top:1px solid rgba(255,255,255,.06);
  background:#080808;
}

.footer-container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(
    auto-fit,
    minmax(260px,1fr)
  );
  gap:50px;
}

.footer-col h3{
  margin-bottom:18px;
  font-size:24px;
  color:#fff;
}

.footer-col p,
.footer-col li{
  margin-bottom:14px;
  color:#bfbfbf;
  font-size:17px;
  line-height:1.8;
}

.footer-col ul{
  list-style:none;
}

.footer-bottom{
  margin-top:50px;
  padding-top:30px;
  border-top:1px solid rgba(255,255,255,.06);
  text-align:center;
}

.social-links{
  display:flex;
  justify-content:center;
  gap:18px;
}

.social-links a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#141414;
  font-size:22px;
}

/* ========================================
   MOBILE
======================================== */

@media(max-width:768px){

  .content-seo{
    margin-top:40px;
  }

  .content-seo p{
    margin-bottom:24px;
    font-size:16px;
    line-height:1.9;
  }

  .destaque-copa{
    margin-top:45px;
    margin-bottom:45px;
    padding:24px 20px;
    border-radius:18px;
  }

  .destaque-copa h2{
    margin-bottom:16px;
    font-size:28px;
  }

  .destaque-copa p{
    margin-bottom:24px;
    font-size:16px;
    line-height:1.85;
  }

  .links-copa{
    gap:12px;
  }

  .links-copa a{
    flex:1 1 calc(50% - 12px);
    min-width:140px;
  }

  main h2{
    margin-top:50px;
    margin-bottom:22px;
    font-size:30px;
  }

  main h3{
    margin-top:32px;
    margin-bottom:12px;
    font-size:22px;
  }

  main p{
    margin-bottom:22px;
    font-size:16px;
    line-height:1.9;
  }

  .footer{
    margin-top:60px;
    padding:55px 16px 30px;
  }

  .footer-container{
    gap:35px;
  }

  .footer-col h3{
    margin-bottom:16px;
    font-size:22px;
  }

  .footer-col p,
  .footer-col li{
    font-size:15px;
    line-height:1.85;
  }

  .footer-bottom{
    margin-top:40px;
    padding-top:24px;
  }

}



/* ========================================
   BOTÕES
======================================== */

.hero-actions{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

.btn-aovivo,
.btn-brasileirao,
.btn-primeira-liga,
.btn-classico,
.btn-oscar{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 32px;
  border-radius:12px;
  color:#fff;
  font-size:17px;
  font-weight:800;
  letter-spacing:.4px;
  box-shadow:0 8px 25px rgba(0,0,0,.3);
}

.btn-aovivo{
  background:linear-gradient(
    135deg,
    #ff1a1a,
    #b30000
  );
}

.btn-brasileirao{
  background:linear-gradient(
    135deg,
    #00a83a,
    #007a2b
  );
}

.btn-primeira-liga{
  background:linear-gradient(
    135deg,
    #0057b8,
    #003b7a
  );
}

.btn-classico{
  background:linear-gradient(
    135deg,
    #ff0000,
    #000
  );
}

.btn-oscar{
  background:linear-gradient(
    135deg,
    #c9a227,
    #8f6d1f
  );
}

.btn-aovivo:hover,
.btn-brasileirao:hover,
.btn-primeira-liga:hover,
.btn-classico:hover,
.btn-oscar:hover{
  transform:translateY(-3px);
}

/* ========================================
   SEARCH
======================================== */

.search-box{
  position:relative;
  max-width:520px;
  margin:20px 0 35px;
}

.search-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  opacity:.6;
}

.search-box input{
  width:100%;
  padding:14px 18px 14px 40px;
  border-radius:12px;
  border:1px solid #2a2a2a;
  background:#111;
  color:#fff;
  font-size:15px;
  outline:none;
  transition:.25s ease;
}

.search-box input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(255,0,0,.12);
}



/* ========================================
   TABELA
======================================== */

/* ========================================
   TABELA COMPLETA FINAL
======================================== */

.table-wrapper{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:18px;
}

.tabela-jogos{
  width:100%;
  min-width:760px;
  border-collapse:separate;
  border-spacing:0;
  table-layout:auto;
  margin-bottom:35px;
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

/* ========================================
   HEADER
======================================== */

.tabela-jogos thead{
  background:linear-gradient(
    180deg,
    #1d1d1d,
    #171717
  );
}

.tabela-jogos th{
  padding:14px 18px;
  text-align:left;
  color:#fff;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
  white-space:nowrap;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}

/* ========================================
   CELLS
======================================== */

.tabela-jogos td{
  padding:14px 18px;
  color:#e4e4e4;
  border-bottom:1px solid rgba(255,255,255,.04);
  vertical-align:middle;
  font-size:15px;
}

/* ========================================
   ROWS
======================================== */

.tabela-jogos tbody tr{
  transition:
    background .25s ease,
    transform .2s ease;
}

/* 🎨 LINHAS INTERCALADAS */

.tabela-jogos tbody tr:nth-child(odd){
  background:#141414;
}

.tabela-jogos tbody tr:nth-child(even){
  background:#1b1b1b;
}

.tabela-jogos tbody tr:hover{
  background:#252525;
}

.tabela-jogos tbody tr:last-child td{
  border-bottom:none;
}

/* ========================================
   COLUNAS
======================================== */

.tabela-jogos th:nth-child(1),
.tabela-jogos td:nth-child(1){
  width:140px;
  white-space:nowrap;
}

.tabela-jogos th:nth-child(2),
.tabela-jogos td:nth-child(2){
  width:80px;
  white-space:nowrap;
}

.tabela-jogos th:nth-child(4),
.tabela-jogos td:nth-child(4){
  min-width:180px;
}

.tabela-jogos td:nth-child(4){
  white-space:normal;
}

/* ========================================
   STATUS
======================================== */

.status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:max-content;
  max-width:100%;
  padding:7px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
  white-space:nowrap;
}

.status-live{
  background:linear-gradient(
    135deg,
    #ff1a1a,
    #b30000
  );
  color:#fff;
  animation:pulse 1.5s infinite;
}

.status-soon{
  background:linear-gradient(
    135deg,
    #ff9800,
    #ff6a00
  );
  color:#fff;
}

.status-warning{
  background:linear-gradient(
    135deg,
    #ffb300,
    #ff8f00
  );
  color:#fff;
}

.status-next{
  background:linear-gradient(
    135deg,
    #2e7d32,
    #1b5e20
  );
  color:#fff;
}

.status-final{
  background:linear-gradient(
    135deg,
    #374151,
    #111827
  );
  color:#fff;
}



/* ========================================
   JOGO
======================================== */

.td-jogo{
  width:100%;
}

.jogo-info{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
}

.jogo-nome{
  flex:1;
  min-width:0;
  width:100%;
  white-space:normal;
  line-height:1.5;
  font-weight:600;
  color:#fff;
  word-break:break-word;
}


/* ========================================
   COMPETIÇÃO
======================================== */

.competicao{
  margin-top:36px;
}

.competicao h2{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  padding:14px 18px;
  border-left:5px solid #60a5fa;
  background:linear-gradient(90deg,#0f172a,#1e3a8a);
  border-radius:10px;
  color:#fff;
  font-size:22px;
  font-weight:800;
}

/* ========================================
   CANAIS
======================================== */

.canal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  color:#fff;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}

/* ========================================
   ESPN
======================================== */

.espn,
.espn2,
.espn3,
.espn4{
  background:linear-gradient(
    135deg,
    #e53935,
    #b71c1c
  );
}

/* ========================================
   PARAMOUNT+
======================================== */

.paramount{
  background:linear-gradient(
    135deg,
    #1976ff,
    #0047c2
  );
}

/* ========================================
   CAZÉ TV
======================================== */

.caze,
.caze2{
  background:linear-gradient(
    135deg,
    #ffd600,
    #ffb300
  );
  color:#111;
}

/* ========================================
   YOUTUBE
======================================== */

.youtube{
  background:linear-gradient(
    135deg,
    #ff2020,
    #cc0000
  );
}

/* ========================================
   DISNEY+
======================================== */

.disney{
  background:linear-gradient(
    135deg,
    #1e4fff,
    #142db8
  );
}

/* ========================================
   SPORTV
======================================== */

.sportv,
.sportv2,
.sportv3,
.sportv4{
  background:linear-gradient(
    135deg,
    #00a2ff,
    #0066d6
  );
}

/* ========================================
   PRIME VIDEO
======================================== */

.prime,
.primevideo{
  background:linear-gradient(
    135deg,
    #00c2ff,
    #008fbe
  );
}

/* ========================================
   DAZN
======================================== */

.dazn{
  background:linear-gradient(
    135deg,
    #444,
    #222
  );
  border:1px solid rgba(255,255,255,.15);
}

/* ========================================
   BAND
======================================== */

.band{
  background:linear-gradient(
    135deg,
    #19d863,
    #0c9c42
  );
}

/* ========================================
   BANDSPORTS
======================================== */

.bandsports{
  background:linear-gradient(
    135deg,
    #ff1744,
    #c4001d
  );
}

/* ========================================
   ONEFOOTBALL
======================================== */

.onefootball{
  background:linear-gradient(
    135deg,
    #ff4d6d,
    #d81b60
  );
}

/* ========================================
   XSPORTS
======================================== */

.xsports{
  background:linear-gradient(
    135deg,
    #9c27b0,
    #6a1b9a
  );
}

/* ========================================
   SPORTYNET
======================================== */

.sportynet,
.sportynetplus{
  background:linear-gradient(
    135deg,
    #ff4081,
    #d81b60
  );
}

/* ========================================
   GOAT
======================================== */

.goat{
  background:linear-gradient(
    135deg,
    #ff9800,
    #ef6c00
  );
  color:#111;
}

/* ========================================
   BASQUETPASS
======================================== */

.basquetpass{
  background:linear-gradient(
    135deg,
    #ff7043,
    #e64a19
  );
}

/* ========================================
   UOL
======================================== */

.uol{
  background:linear-gradient(
    135deg,
    #ffd54f,
    #ff9800
  );
  color:#111;
}

/* ========================================
   PREMIERE
======================================== */

.premiere{
  background:linear-gradient(
    135deg,
    #00c853,
    #007e33
  );
}

/* ========================================
   GLOBO
======================================== */

.globo{
  background:linear-gradient(
    135deg,
    #ff5722,
    #d84315
  );
}

/* ========================================
   RECORD
======================================== */

.record{
  background:linear-gradient(
    135deg,
    #1e88e5,
    #0d47a1
  );
}

/* ========================================
   COMBATE
======================================== */

.combate{
  background:linear-gradient(
    135deg,
    #ff9100,
    #ef6c00
  );
}

/* ========================================
   APPLE TV
======================================== */

.appletv{
  background:linear-gradient(
    135deg,
    #757575,
    #424242
  );
}

/* ========================================
   REDETV
======================================== */

.redetv{
  background:linear-gradient(
    135deg,
    #00c853,
    #009624
  );
}

/* ========================================
   CANAL DO BENJA
======================================== */

.benja{
  background:linear-gradient(
    135deg,
    #ffd740,
    #ff9800
  );
  color:#111;
}

/* ========================================
   METRÓPOLES
======================================== */

.metropoles{
  background:linear-gradient(
    135deg,
    #ab47bc,
    #7b1fa2
  );
}

/* ========================================
   ROMÁRIO TV
======================================== */

.romario{
  background:linear-gradient(
    135deg,
    #26a69a,
    #00796b
  );
}

/* ========================================
   GE
======================================== */

.ge{
  background:linear-gradient(
    135deg,
    #00c853,
    #007e33
  );
}

/* ========================================
   TV BRASIL
======================================== */

.tvbrasil{
  background:linear-gradient(
    135deg,
    #43a047,
    #1b5e20
  );
}

/* ========================================
   STAR+
======================================== */

.starplus{
  background:linear-gradient(
    135deg,
    #ff5252,
    #c62828
  );
}

/* ========================================
   TNT SPORTS
======================================== */

.tntsports{
  background:linear-gradient(
    135deg,
    #7c4dff,
    #512da8
  );
}

/* ========================================
   MAX / HBO MAX
======================================== */

.max{
  background:linear-gradient(
    135deg,
    #5e35b1,
    #311b92
  );
}

/* ========================================
   NOSSO FUTEBOL
======================================== */

.nossofutebol{
  background:linear-gradient(
    135deg,
    #00acc1,
    #006064
  );
}

/* ========================================
   PLUTO TV
======================================== */

.pluto{
  background:linear-gradient(
    135deg,
    #ff4081,
    #7c4dff
  );
}

/* ========================================
   SAMSUNG TV PLUS
======================================== */

.samsungtv{
  background:linear-gradient(
    135deg,
    #1565c0,
    #0d47a1
  );
}

/* ========================================
   LG CHANNELS
======================================== */

.lgchannels{
  background:linear-gradient(
    135deg,
    #d81b60,
    #880e4f
  );
}

/* ========================================
   MOBILE FINAL
======================================== */

@media(max-width:768px){

  .container{
    padding:20px 12px;
  }

  /* HERO */

  .hero-tv{
    padding:60px 16px;
  }

  .hero-tv h1{
    font-size:30px;
    line-height:1.25;
  }

  .hero-tv h2{
    font-size:19px;
    line-height:1.4;
  }

  .hero-sub{
    font-size:15px;
    line-height:1.75;
  }

  /* MENU */

  .menu{
    position:absolute;
    top:72px;
    left:0;
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:18px;
    background:#000;
    border-top:1px solid #222;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:.3s ease;
    z-index:9999;
  }

  .menu.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

  .menu a{
    width:100%;
    padding:12px;
    background:#111;
    border-radius:10px;
  }

  .menu-toggle{
    display:block;
  }

  /* ========================================
     TABELA MOBILE CARD
  ======================================== */

  .table-wrapper{
    overflow:visible;
    border-radius:16px;
  }

  .tabela-jogos,
  .tabela-jogos thead,
  .tabela-jogos tbody,
  .tabela-jogos th,
  .tabela-jogos td,
  .tabela-jogos tr{
    display:block;
  }

  .tabela-jogos{
    width:100%;
    min-width:100%;
    border:none;
    background:none;
    box-shadow:none;
    margin-bottom:24px;
  }

  .tabela-jogos thead{
    display:none;
  }

  .tabela-jogos tbody{
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .tabela-jogos tr{
    background:var(--bg-soft);
    border:1px solid var(--border);
    border-radius:16px;
    padding:14px;
    box-shadow:var(--shadow);
    overflow:hidden;
  }

  .tabela-jogos td{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    width:100%;
    padding:10px 0;
    border:none;
    font-size:13px;
  }

  .tabela-jogos td::before{
    font-weight:800;
    color:#fff;
    font-size:11px;
    text-transform:uppercase;
    opacity:.7;
    flex-shrink:0;
  }

  .tabela-jogos td:nth-child(1)::before{
    content:"Status";
  }

  .tabela-jogos td:nth-child(2)::before{
    content:"Hora";
  }

  .tabela-jogos td:nth-child(3)::before{
    content:"Jogo";
  }

  .tabela-jogos td:nth-child(4)::before{
    content:"Transmissão";
  }

  /* STATUS */

  .status{
    padding:7px 10px;
    font-size:9px;
  }

  /* JOGO */

  .td-jogo{
    align-items:flex-start !important;
  }

  .jogo-info{
    display:flex;
    align-items:flex-start;
    width:100%;
  }

  .jogo-nome{
    width:100%;
    font-size:14px;
    line-height:1.5;
    text-align:right;
    word-break:break-word;
  }

  /* CANAL */

  .canal{
    font-size:9px;
    padding:6px 10px;
    text-align:right;
  }

  /* SCROLLBAR */

  .table-wrapper::-webkit-scrollbar{
    height:6px;
  }

  .table-wrapper::-webkit-scrollbar-thumb{
    background:#333;
    border-radius:999px;
  }

  /* TITULO */

  .competicao{
    margin-top:35px;
  }

  .competicao h2{
    font-size:18px;
  }

}

.jogo-nome{
  flex:1;
  min-width:0;
  width:100%;
  white-space:normal;
  line-height:1.5;
  font-weight:600;
  color:#fff;
  word-break:break-word;
}

/* FASE */

.fase-jogo{

  display:inline-block;

  margin-left:6px;

  padding:3px 8px;

  border-radius:999px;

  background:#1e293b;

  color:#93c5fd;

  font-size:11px;

  font-weight:700;

}