/* Tela de carregamento */
#loading-screen {
  position: fixed;
  /* Fica sobre toda a página */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #000000, #000000, #ffffff);
  z-index: 9999;
  /* Fica acima de tudo */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 20px;
  height: 120px;
  background: transparent;
  position: relative;
  z-index: 10;
}

.navbar-left .navbar-logo {
  height: 80px;
  width: auto;
}

.navbar-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.navbar-slogan {
  font-size: 2rem;
  color: #fff;
  font-family: 'Montserrat', 'Poppins', sans-serif;
  text-align: center;
  margin: 25px 0 25px 0;
  /* ajusta verticalmente para alinhar com logo */
}

.navbar-menu ul {
  display: flex;
  gap: 20px;
  padding: 0;
  margin: 1;
  list-style: none;
  align-items: center;
}

.navbar-menu li {
  display: flex;
  align-items: center;
}

.navbar-menu li a {
  display: inline-flex;
  align-items: center;
  font-size: 2rem;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  gap: 10px;
  position: relative;
  padding-bottom: 5px;
}

.navbar-menu li a .icon-home {
  width: 40px;
  height: 40px;
  fill: #fff;
  flex-shrink: 0;
}

/* Linha branca embaixo ao hover */
.navbar-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 4px;
  background-color: #fff;
  transition: width 0.3s ease;
}

.navbar-menu a:hover::after {
  width: 100%;
}

/* Redes sociais */
.navbar-right {
  display: flex;
  align-items: center;
  margin-top: 25px;
  /* alinha verticalmente com logo e slogan */
  gap: 15px;
}

.navbar-right .icon {
  width: 35px;
  height: 35px;
  fill: #fff;
  transition: fill 0.3s;
}

.navbar-right .social:hover .icon {
  fill: #bbb;
}

.mobile-menu-overlay {
  display: none; /* esconde sempre por padrão */
}

/* Fundo fixo cobrindo toda a tela */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.background img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.background img.fade-out {
  opacity: 0;
}

/* Botão menu */
.menu-buttom {
  position: relative;
  margin-left: 20px;
  margin-top: 40px;
  width: 40px;
  height: 30px;
  background: transparent;
  cursor: pointer;
  display: block;
}

.menu-buttom input {
  display: none;
}

.menu-buttom span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: white;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.menu-buttom span:nth-of-type(1) {
  top: 0px;
  transform-origin: left center;
}

.menu-buttom span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left center;
}

.menu-buttom span:nth-of-type(3) {
  top: 100%;
  transform-origin: left center;
  transform: translateY(-100%);
}

.menu-buttom input:checked~span:nth-of-type(1) {
  transform: rotate(45deg);
  top: 0px;
  left: 5px;
}

.menu-buttom input:checked~span:nth-of-type(2) {
  width: 0%;
  opacity: 0;
}

.menu-buttom input:checked~span:nth-of-type(3) {
  transform: rotate(-45deg);
  top: 28px;
  left: 5px;
}

/* Sidebars inicialmente escondidas */

.sidebar-left {
  position: fixed;
  /* fixa na tela */
  font-family: 'Montserrat', 'Poppins', sans-serif;
  top: 210px;
  /* distância do topo (ajusta conforme altura do menu-botão) */
  left: 0;
  width: 250px;
  /* largura da sidebar */
  background-color: transparent;
  color: #fff;
  padding: 20px;
  display: none;
  /* começa escondida */
  flex-direction: column;
  gap: 15px;
  z-index: 900;
  /* abaixo do botão menu (z-index maior que 800) */
}

/* Quando ativa */
.sidebar-left.active {
  display: flex;
  margin-top: 10px;
}

.sidebar-right {
  position: fixed;
  font-family: 'Montserrat', 'Poppins', sans-serif;
  top: 200px;
  /* abaixo da navbar */
  height: calc(100% - 120px);
  background-color: transparent;
  color: #fff;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  z-index: 9;
  transition: all 0.4s ease;
  opacity: 0;
  visibility: hidden;
}

/* Remove bolinhas e recuos das listas dentro das sidebars */
.sidebar-left ul,
.sidebar-right ul {
  list-style: none;
  /* remove bolinhas */
  padding: 0;
  /* remove recuo padrão */
  margin: 0;
  /* remove margin padrão */
}

/* Se quiser adicionar espaço entre os itens */
.sidebar-left li,
.sidebar-right li {
  margin: 8px 0;
}


/* Esconde imagens internas nas sidebars ao ativar */
.sidebar-left.active img {
  display: none;
}


/* Sidebar esquerda */
.sidebar-left {
  left: 0;
  width: 250px;
  transform: translateX(-100%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Sidebar direita */
.sidebar-right {
  right: 0;
  width: 250px;
  transform: translateX(100%);
  cursor: pointer;
  transition: color 0.2s;
}

.sidebar-right .sidebar-menu li:hover {
  color: orange;
  /* opcional: muda a cor ao passar o mouse */
}

/* Quando ativas */
.sidebar-left.active {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.sidebar-right.active {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.feed-row {
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
  justify-content: center;
  margin-bottom: 100px;
  position: relative;
  z-index: 5;
  /* fica acima do fundo */
}

.card {
  width: 270px;
  height: 400px;
  border-radius: 16px;
  background: rgba(33, 33, 33, 0.9);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.card:hover {
  transform: scale(1.04);
}

/* 🔹 Área da mídia */
.card .midia {
  width: 100%;
  height: 300px;
  /* altura fixa */
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card img,
.card video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #000;
}

/* 🔹 Título */
.card h4 {
  padding: 10px;
  font-size: 15px;
  text-align: center;
  color: #fff;
  font-family: "Poppins", sans-serif;
}

.youtube-thumb {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.youtube-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

.play-button {
  position: absolute;
  font-size: 48px;
  color: white;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
  transition: transform 0.2s ease;
}

.youtube-thumb:hover .play-button {
  transform: scale(1.2);
}

/* === MODO LEITURA (DESKTOP) === */
.post-reader-container {
  display: none;
  /* escondido até abrir */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.post-reader-content {
  background: rgba(20, 20, 20, 0.95);
  color: #fff;
  padding: 32px;
  border-radius: 20px;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
  position: relative;
}

.post-reader-content h1 {
  font-size: 1.8rem;
  margin-bottom: 20px;
}

.post-reader-content img,
.post-reader-content video,
.post-reader-content iframe {
  width: 100%;
  height: 400px;
  object-fit: contain;
  border-radius: 12px;
  margin-bottom: 20px;
}

.post-reader-content p {
  font-size: 1rem;
  line-height: 1.6;
  text-align: justify;
}

.close-reader {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.sidebar-section {
  cursor: pointer;
}

.sidebar-section:hover {
  transform: scale(1.03);
  filter: brightness(1.1);
  transition: all 0.3s ease;
}

.liga-table .team-cell {
  display: flex;
  align-items: center;
  /* centraliza verticalmente escudo e nome */
  gap: 10px;
  /* aumenta o espaço entre escudo e nome */
  height: 40px;
  /* garante altura suficiente para a linha */
}

.liga-table .team-crest {
  width: 30px;
  /* aumenta o tamanho se quiser */
  height: 30px;
  object-fit: contain;
  display: block;
  /* evita problemas com inline-block */
  margin: 0;
  /* remove qualquer margem que esteja empurrando a linha */
}


.liga-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  font-family: 'Arial', sans-serif;
}

.liga-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transition: background-color 0.3s ease;
}


.liga-table th,
.liga-table td {
  padding: 12px 15px;
  /* aumenta o espaço entre elementos */
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.liga-table th {
  background-color: #222;
  color: #fff;
  font-weight: bold;
}

/* =============
   Tablet styles
   =============*/
@media (min-width: 601px) and (max-width: 1200px) {

  /* Navbar container */
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 20px;
    height: 120px;
    background: transparent;
    position: relative;
    z-index: 10;
  }

  .navbar-left .navbar-logo {
    margin-top: 0px;
    height: 70px;
    width: auto;
  }

  .navbar-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
  }

  .navbar-slogan {
    font-size: clamp(1rem, 2vw, 1.5rem);
    white-space: nowrap;
    /* nunca quebra linha */
    overflow: hidden;
    margin: 15px 0;
    /* reduz espaço vertical */
    margin-top: 25px;
    color: #fff;
    font-family: 'Montserrat', 'Poppins', sans-serif;
    text-align: center;

  }

  .navbar-menu ul {
    display: flex;
    gap: 15px;
    /* reduz o espaço entre os itens */
    padding: 0;
    margin: 1;
    list-style: none;
    align-items: center;
  }

  .navbar-menu li {
    display: flex;
    align-items: center;
  }

  .navbar-menu li a {
    display: inline-flex;
    align-items: center;
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    gap: 10px;
    position: relative;
    padding-bottom: 5px;
  }

  .navbar-menu li a .icon-home {
    width: 25px;
    height: 25px;
    fill: #fff;
    flex-shrink: 0;
  }

  /* Lado direito com ícones menores e com menos gap */
  .navbar-right {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 0 0 auto;
  }

  .navbar-right .icon {
    width: 18px;
    height: 18px;
    fill: white;
  }

  .navbar-right {
    display: flex;
    align-items: center;
    margin-top: 30px;
    /* alinha verticalmente com logo e slogan */
    gap: 15px;
  }

  .navbar-right .icon {
    width: clamp(20px, 2.5vw, 35px);
    height: clamp(20px, 2.5vw, 35px);
    fill: #fff;
    transition: fill 0.3s;
  }

  .navbar-right .social:hover .icon {
    fill: #bbb;
  }


/* Garantir que o botão menu esteja escondido em tablet */
.menu-buttom {
  position: relative;
  margin-left: 20px;
  margin-top: 40px;
  width: 40px;
  height: 30px;
  background: transparent;
  cursor: pointer;
  display: block;
}

.menu-buttom input {
  display: none;
}

.menu-buttom span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: white;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.menu-buttom span:nth-of-type(1) {
  top: 0px;
  transform-origin: left center;
}

.menu-buttom span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left center;
}

.menu-buttom span:nth-of-type(3) {
  top: 100%;
  transform-origin: left center;
  transform: translateY(-100%);
}

.menu-buttom input:checked~span:nth-of-type(1) {
  transform: rotate(45deg);
  top: 0px;
  left: 5px;
}

.menu-buttom input:checked~span:nth-of-type(2) {
  width: 0%;
  opacity: 0;
}

.menu-buttom input:checked~span:nth-of-type(3) {
  transform: rotate(-45deg);
  top: 28px;
  left: 5px;
}


.sidebar-left.active {
    width: 180px; /* menor que desktop */
    font-size: clamp(8px, 1.5vw, 12px);
  }

  .sidebar-right.active {
    width: 180px; /* menor que desktop */
    font-size: clamp(9px, 1.5vw, 14px);
    margin-right: 0;
  }

  /* Container de cards */
  .feed-row {
    gap: 20px;          /* menos espaço entre cards */
    justify-content: center;
    flex-wrap: wrap;     /* cards quebram para linha de baixo se necessário */
  }

  /* Cards menores e responsivos */
  .card {
    width: clamp(150px, 25vw, 180px);
    height: clamp(280px, 35vw, 320px);
  }

  .card h4 {
    font-size: clamp(10px, 2vw, 14px);
    padding: clamp(4px, 1vw, 8px);
  }

  .card .midia {
    height: clamp(200px, 30vw, 280px);
  }

.post-reader-container {
  display: flex;
  justify-content: center; /* centraliza horizontal */
  align-items: flex-start; /* começa do topo */
  padding-top: 50px;       /* distância do topo */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
  z-index: 9999;
  overflow-y: auto;        /* permite rolagem se conteúdo maior que a tela */
}

.post-reader-content {
    padding: clamp(16px, 3vw, 32px);      /* padding ajustável */
    max-width: clamp(400px, 80%, 800px);  /* largura máxima ajustável */
    max-height: 90vh;
  }

  .post-reader-content h1 {
    font-size: clamp(1.2rem, 3vw, 1.8rem); /* título se ajusta à tela */
    margin-bottom: clamp(10px, 2vw, 20px);
  }

  .post-reader-content img,
  .post-reader-content video,
  .post-reader-content iframe {
    width: 100%;
    height: clamp(200px, 30vw, 400px);  /* altura adaptativa */
    object-fit: contain;
    border-radius: 12px;
    margin-bottom: clamp(10px, 2vw, 20px);
  }

  .post-reader-content p {
    font-size: clamp(0.9rem, 2.5vw, 1rem);  /* texto responsivo */
    line-height: 1.6;
    text-align: justify;
  }

  .close-reader {
    top: clamp(8px, 2vw, 16px);
    right: clamp(8px, 2vw, 16px);
    font-size: clamp(18px, 3vw, 22px);
  }

    .liga-table {
    font-size: 12px;       /* fonte menor fixa */
    border-spacing: 0 4px; /* menos espaço entre linhas */
    max-height: 500px;     /* altura fixa do container da tabela */
    overflow-y: auto;      /* scroll vertical se necessário */
    display: block;        /* necessário para scroll em height fixa */
    width: 100%;           /* ocupa toda a largura disponível */
  }

  .liga-table th,
  .liga-table td {
    padding: 6px 8px;      /* padding fixo menor */
    text-align: center;
  }

  .liga-table .team-cell {
    height: 30px;          /* altura fixa da linha */
    gap: 8px;              /* espaço fixo entre escudo e nome */
  }

  .liga-table .team-crest {
    width: 25px;           /* tamanho fixo do escudo */
    height: 25px;
  }
}

/* ======= RESPONSIVIDADE: CELULARES ======= */
@media (max-width: 600px) {

 /* Container principal */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(8px, 2vw, 20px);
  background: transparent;
  position: relative;
  z-index: 10;
  font-family: 'Montserrat', 'Poppins', sans-serif;
}

/* Logo esquerda */
.navbar-left {
  flex-shrink: 0;
}

.navbar-left .navbar-logo {
  height: clamp(32px, 8vw, 80px);
  width: auto;
}

/* Coluna central: slogan (duas linhas) + menu */
.navbar-center {
  display: flex;
  flex-direction: column; /* empilha slogan e menu */
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: clamp(6px, 1.5vw, 12px);
}


/* Slogan mais empilhado */
.navbar-slogan {
  margin-top: 50px;
  font-size: clamp(0.65rem, 1.1vw, 1rem); /* um pouco menor */
  font-weight: 500;
  color: #fff;
  text-align: center;
  line-height: 1.4;           /* aumenta o espaçamento entre linhas */
  white-space: normal;         /* permite quebra de linha */
  max-width: 200px;            /* força mais quebras, ajuste conforme necessário */
  display: inline-block;       /* respeita max-width e centraliza */
}

/* Menu abaixo do slogan */
.navbar-menu ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 2vw, 20px);
  padding: 0;
  margin: 0;
  list-style: none;
}

.navbar-menu li a {
  display: inline-flex;
  align-items: center;
  font-size: clamp(0.75rem, 2vw, 1.2rem);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  gap: clamp(4px, 1.5vw, 10px);
  white-space: nowrap;
}

/* Ícone home */
.navbar-menu li a .icon-home {
  width: clamp(18px, 5vw, 40px);
  height: clamp(18px, 5vw, 40px);
  fill: #fff;
}

/* Redes sociais à direita */
.navbar-right {
  display: flex;
  align-items: center;
  gap: clamp(4px, 2vw, 12px);
  flex-shrink: 0;
}

.navbar-right .icon {
  margin-top: -0px;
  width: clamp(18px, 1.5vw, 30px);
  height: clamp(18px, 2.2vw, 30px);
  transition: transform 0.2s ease;
}


  
.menu-buttom-mobile {
    position: relative;
    transform: scale(0.7); /* reduz visualmente para 70% */
    transform-origin: top left; /* mantém alinhamento */
  margin-left: 15px;
  margin-top: 30px;
  width: 40px;
  height: 24px;
  background: transparent;
  cursor: pointer;
  display: block;

}

.menu-buttom-mobile input {
  display: none;
}

.menu-buttom-mobile span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: white;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.menu-buttom-mobile span:nth-of-type(1) {
  top: 0px;
  transform-origin: left center;
}

.menu-buttom-mobile span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left center;
}

.menu-buttom-mobile span:nth-of-type(3) {
  top: 100%;
  transform-origin: left center;
  transform: translateY(-100%);
}

.menu-buttom-mobile input:checked~span:nth-of-type(1) {
  transform: rotate(45deg);
  top: 0px;
  left: 5px;
}

.menu-buttom-mobile input:checked~span:nth-of-type(2) {
  width: 0%;
  opacity: 0;
}

.menu-buttom-mobile input:checked~span:nth-of-type(3) {
  transform: rotate(-45deg);
  top: 28px;
  left: 5px;
}

/* Por padrão, escondemos o botão mobile */
.menu-buttom-mobile {
  display: none;
}

/* Aparece apenas em telas pequenas (mobile) */
@media (max-width: 768px) { 
  .menu-buttom-mobile {
    display: block;
    /* se precisar, ajuste margens para ficar do lado do feed */
    margin-left: 10px;
    margin-top: 0;
  }
}
/* Por padrão, botão desktop aparece */
.menu-buttom {
  display: block;
}

/* Em telas pequenas (mobile), escondemos ele */
@media (max-width: 768px) {
  .menu-buttom {
    display: none;
  }
}

.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.96);
  /* fundo escuro */
  backdrop-filter: blur(6px);
  /* leve desfoque */
  color: #fff;
  display: none;
  /* começa escondido */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999;
  /* sobrepõe tudo */
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Quando ativado */
.mobile-menu-overlay.active {
  display: flex;
  opacity: 1;
}

/* Estilo dos blocos internos (seções e ligas) */
.mobile-sections h3,
.mobile-leagues h3 {
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 12px;
}

.mobile-sections ul,
.mobile-leagues ul {
  list-style-type: none !important;
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}


.mobile-sections li,
.mobile-leagues li {
  font-size: 1.2rem;
  text-align: center;
  margin: 8px 0;
  cursor: pointer;
  transition: color 0.3s;
}

.mobile-sections li:hover,
.mobile-leagues li:hover {
  color: #f1c40f;
}

/* botão de fechar X */
.close-mobile-menu {
  font-size: 1.8rem;
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 15px;
  z-index: 1001;
}

.card {
  text-align: center;
  margin: 0.5rem;
}

.card h4 {
  font-size: 1.1rem;
  margin-top: 0.3rem;
}

.youtube-thumb .play-button {
  font-size: 2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* Animação de entrada mais suave */
@keyframes fadeInOverlay {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-menu-overlay.active {
  animation: fadeInOverlay 0.4s ease;
}
}

/* 🔧 Corrige o checkbox do menu aparecendo em desktop e tablet */
.menu-buttom input,
.menu-buttom-mobile input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}