/* ───────── Reset básico e estilo do body ───────── */
body {
    margin: 0;                   
    padding: 0;                  
    font-family: 'Arial', sans-serif;
    background: #000;            
    color: #fff;                 
    display: flex;               
    justify-content: center;     
    align-items: center;         
    min-height: 100vh;           
    position: relative;          
    /*overflow: hidden;*/
    overflow-y: auto; /* permite rolagem vertical */
    overflow-x: hidden; /* impede rolagem lateral */
}

/* ───────── Fundo dinâmico (imagem ou vídeo) ───────── */
.background-wrapper {
    position: fixed;             
    top: 0;
    left: 0;
    width: 100%;                
    height: 100%;               
    z-index: -1;                
    overflow: hidden;           
}

/* Imagem e vídeo do fundo ocupam toda área e mantêm proporção */
.background-image, .background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;          
}

/* ───────── Container central ───────── */
.container {
    background: rgba(0,0,0,0.6); 
    padding: 2rem;              
    border-radius: 16px;        
    box-shadow: 0 4px 20px rgba(0,0,0,0.5); 
    text-align: center;         
    width: 95%;                 
    max-width: 500px;           
    display: flex;              
    flex-direction: column;     
    align-items: center;        
}

/* ───────── Foto de perfil ───────── */
.profile-pic {
    width: 120px;               
    height: 120px;              
    border-radius: 50%;         
    object-fit: cover;          
    margin-bottom: 1rem;        
   /* border: 2px solid #ff0000/*#fff; */    
}

/* ───────── Título (nome) ───────── */
h1 {
    margin: 0.5rem 0;           
    font-size: 2rem;            
}

/* ───────── Descrição ───────── */
p {
    font-size: 1rem;            
    color: #ccc;                
}

/* ───────── Container dos links ───────── */
.links {
    display: flex;              
    flex-direction: column;     
    gap: 1rem;                  
    margin-top: 2rem;           
    width: 100%;                
}

/* ───────── Estilo dos links ───────── */
.link-item {
  font-family: 
  'Segoe UI Emoji',
  'Noto Color Emoji',
  'Apple Color Emoji',
  'Twemoji Mozilla',
  'EmojiOne Color',
  'Segoe UI Symbol',
  'Noto Sans Symbols',
  'Arial',
  sans-serif;  
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem;
  background: #222;
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  transition: background 0.3s, transform 0.2s;
}

.link-img {
  width: 48px;
  height: 48px;
  border-radius: 8px;/*50%;*/
  object-fit: cover;
  /*border: 2px solid #fff;*/
}

/* ───────── Mini botão de estatísticas ───────── */
.link-item .mini-stats-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #444;
  border: none;
  color: #fff;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  z-index: 2;
}

.link-item .mini-stats-btn:hover {
  background: #666;
  transform: scale(1.05);
}

/* Garante que .link-item suporte posição absoluta *
/.link-item {
  position: relative;
}

/* ───────── Efeito hover nos links ───────── */
.link-item:hover {
    background: #333;           
    transform: scale(1.05);     
}

/* ───────── Brilho dinâmico nos links (quando ativo) ───────── */
.brilho .link-item {
    box-shadow: 0 0 10px red;
    animation: pulse 2s infinite;
}

/* ───────── Animação pulse ───────── */
@keyframes pulse {
    0%   { box-shadow: 0 0 10px red; }
    50%  { box-shadow: 0 0 20px #ff0000; }
    100% { box-shadow: 0 0 10px red; }
}

/* ───────── Destaque VIP ───────── */
.vip-badges {
  position: absolute;
  bottom: -10px;           /* Ajuste fino para subir um pouco */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;                /* Espaço mínimo entre badges */
  justify-content: center;
  white-space: nowrap;
}

.vip-badge {
  background: gold;
  color: #000;
  font-weight: bold;
  padding: 0.2rem 0.4rem;  /* Leve ajuste no espaçamento */
  border-radius: 6px;
  font-size: 0.7rem;
  box-shadow: 0 0 4px gold;
}

.badgePulse {
  animation: badgePulse 1.5s infinite;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.link-item.vip {
    position: relative;
    background: linear-gradient(145deg, #111, #222);
    border: 2px solid gold;
    animation: glowBorder 2s infinite;
}

@keyframes glowBorder {
    0%, 100% { box-shadow: 0 0 10px gold; }
    50% { box-shadow: 0 0 20px orange; }
}

@keyframes badgePulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.1); }
}

/* ───────── Responsividade para dispositivos móveis ───────── */
@media (max-width: 480px) {
    .container {
        padding: 1.5rem 1rem;        /* Menos padding para aproveitar espaço */
        border-radius: 12px;         /* Borda um pouco menos arredondada */
        width: 90%;                  /* Largura maior no mobile */
        max-width: none;             /* Remove limite de largura */
    }

    .profile-pic {
        width: 160px;                /* Aumenta foto no celular */
        height: 160px;
        margin-bottom: 1.5rem;       /* Mais espaço abaixo da foto */
        border-width: 3px;           /* Borda mais grossa para destacar */
    }

    h1 {
        font-size: 2.4rem;           /* Título maior e legível */
        margin-bottom: 0.7rem;
    }

    p {
        font-size: 1.2rem;           /* Texto da descrição maior */
    }

    .links {
        gap: 1.2rem;                 /* Espaçamento maior entre links */
        margin-top: 2.5rem;
    }
    
    .link-item {
   font-family: 
  'Segoe UI Emoji',
  'Noto Color Emoji',
  'Apple Color Emoji',
  'Twemoji Mozilla',
  'EmojiOne Color',
  'Segoe UI Symbol',
  'Noto Sans Symbols',
  'Arial',
  sans-serif;   
    padding: 0.8rem 1rem;
    font-size: 1rem;
    border-radius: 12px;
    height: auto;
    max-width: 95%;
}


    /*.link-item {
        padding: 1.5rem;             /* Botões maiores e mais fáceis de clicar /
        font-size: 1.3rem;           /* Texto maior nos botões /
        border-radius: 16px;         /* Bordas mais arredondadas /
    }*/
}

/* --------------- BOTÃO DE CATEGORIA --------------- */
/* Animações para os links */
#links.fade-out {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
#links.fade-in {
  opacity: 1;
  transition: opacity 0.3s ease-in;
}

/* Botão principal */
/*.categoria-btn {
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  border: none;
  background: #444;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
}*/
.categoria-btn {
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}
.categoria-btn:hover {
  background: #666;
}

.seta-categoria { /**/
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

/* Lista de botões de categoria */
.categoria-lista {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.categoria-lista.show {
  max-height: 300px;
}

/* Botões individuais */
.categoria-lista button {
  padding: 0.4rem 0.8rem;
  border: none;
  background: #666;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.3s, border 0.3s;
}
.categoria-lista button:hover {
  background: #888;
}

/* Estilo de categoria selecionada */
.categoria-lista button.active-cat {
  border: 2px solid #00ffaa;
  background: #333;
}

/* Gira a seta quando .show está ativa */
.categoria-btn .seta-categoria {
  transform: rotate(0deg);
}
.categoria-lista.show ~ .categoria-btn .seta-categoria {
  transform: rotate(180deg);
}

/* Estilo dinâmico via JS nos botões da categoria (principal e mini) */
.btn-estilo-transparente {
  background: transparent !important;
}
.btn-estilo-borda {
  border: 1px solid currentColor !important;
}

/* Animação de piscar */
.pulsar {
  animation: pulsar 1.5s infinite;
}
@keyframes pulsar {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Aplicar estilos dinâmicos também aos mini-botões */
.categoria-lista button.btn-estilo-transparente {
  background: transparent !important;
}
.categoria-lista button.btn-estilo-borda {
  border: 1px solid currentColor !important;
}

/* Corrigir rotação da seta com base em classe no botão (não no .show global) */
.categoria-btn.aberta .seta-categoria {
  transform: rotate(180deg);
}


/* SIDER BAR ATUAL *
.menu-toggle {
  font-size: 28px;
  cursor: pointer;
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 1001;
  color: white;
  background: transparent;
  border: none;
  transition: left 0.3s ease, transform 0.3s ease;
}

/* Move o botão pro lado da sidebar quando aberto *
.sidebar.open + .menu-toggle {
  left: 265px;
  transform: rotate(90deg);
}*/

.menu-toggle {
  font-size: 28px;
  cursor: pointer;
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 1001;
  color: white;
  background: transparent;
  border: none;
  transition: left 0.3s ease, transform 0.3s ease;
}

/* Quando a sidebar estiver aberta */
.sidebar.open ~ .menu-toggle {
  left: 200px; /* dentro da sidebar (250px largura - 50px margem) */
  transform: rotate(90deg);
}



.sidebar {
  position: fixed;
  left: -100%;
  top: 0;
  width: 250px;
  height: 100dvh; /* Usa altura real da tela no mobile também */
  background: #111;
  color: white;
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.5);
  transition: left 0.3s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
  box-sizing: border-box;
}


.sidebar.open {
  left: 0;
}
/**/
/*.sidebar-links {
 /* list-style: none;         /* Remove marcadores da lista (bolinhas) */
 /* padding: 0;               /* Remove o padding interno */
 /* margin: 0;                /* Remove o margin externo */
  /*display: flex;            /* Torna os itens flexíveis */
  /*flex-direction: column;   /* Alinha os itens em coluna */
 /* align-items: center;      /* Centraliza os botões horizontalmente */
 /* gap: 10px;                /* Espaço entre os botões */
/*}

.sidebar-links li a {
  color: white;                 /* Cor do texto /
  text-decoration: none;        /* Remove sublinhado /
  font-size: 16px;              /* Tamanho da fonte /
    
   /* ↓ controla a altura do botão ↓ /
  padding: 4px 16px;             /* Menor altura (vertical), mantém lateral /

  /* ↓ define largura fixa para todos os botões ↓ /
  width: 80%;                    /* Ocupa 80% da largura da sidebar /
  text-align: center;            /* Centraliza o texto dentro do botão /
  
    
  border: 2px solid #0af;       /* Borda de 2px azul (#0af) /
  border-radius: 6px;           /* Cantos arredondados /
  transition: background 0.2s;  /* Suaviza mudança de fundo ao passar mouse /
}

.sidebar-links li a:hover {
  background: #222;             /* Fundo mais escuro ao passar mouse /
}*/
/*-----------------------------------------------------------*/
.sidebar-links {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-top: 30px; /* Ajuste conforme o espaço que quiser */  
}

.sidebar-links li {
  margin: 8px 0;
}

.sidebar-links li a {
  display: block;             /* Ocupa toda largura do container */
  width: 90%; /*calc(100% + 40px);  /* Aumenta largura para compensar margin negativa */
  padding: 10px 0;
 /* margin-left: -40px;         /* Puxa o botão para esquerda, tirando o "pontinho" */
  margin: 8px auto; 
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  
  color: white;
  background-color: transparent;
  border: 2px solid #0af;
  border-radius: 12px;
  
  text-decoration: none;
  transition: all 0.3s ease;
}

.sidebar-links li a:hover {
  background-color: #0af;
  color: #111;
}

.sidebar-footer {
  font-size: 11px;
  line-height: 1.4;
  margin-top: auto;
  border-top: 1px solid #444;
  padding: 10px 0 5px;
  text-align: center;
  color: #ccc;
}

.credit-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.credit-btn {
  padding: 4px 10px;
  text-decoration: none;
  font-size: 10px;
  transition: 0.3s;
}

/*
.sidebar-footer {
  font-size: 11px;
  line-height: 1.4;
  margin-top: auto;
  border-top: 1px solid #444;
  padding: 10px 0 5px 0;
  text-align: center;
  color: #ccc;
  background: rgba(255, 255, 255, 0.02); /* leve fundo para contraste /
  backdrop-filter: blur(2px); /* efeito leve se tiver transparência /
  word-break: break-word;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.sidebar-footer p {
  margin: 3px 0;
}

.sidebar-footer a {
  color: #0af;
  font-size: 10px;
  text-decoration: none;
  transition: color 0.2s;
}

.sidebar-footer a:hover {
  color: #09f;
}

/* Responsivo: telas pequenas /
@media (max-height: 500px) {
  .sidebar-footer {
    font-size: 9px;
    padding: 6px 0 4px 0;
  }

  .sidebar-footer a {
    font-size: 8px;
  }
}


/*
.sidebar-footer {
  font-size: 10px;
  line-height: 1.2;
  margin-top: auto; /* Empurra pro final do conteúdo /
  border-top: 1px solid #444;
  padding-top: 6px;
  word-break: break-word;
}


.sidebar-footer p {
  margin: 2px 0;
}

.sidebar-footer a {
  color: #0af;
  font-size: 9px;
  text-decoration: none;
}

/* Responsivo /
@media (max-height: 500px) {
  .sidebar-footer {
    font-size: 8px;
    max-height: 40px;
  }
}*/