/* Mata a barra/tooltip/overlay do Google Translate */
iframe.goog-te-banner-frame,
iframe.goog-te-banner-frame.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-te-gadget-icon { display: none !important; }
.skiptranslate{display: none;}

/* Alguns overlays usam essa classe “codificada” */
.VIpgJd-ZVi9od-ORHb-OEVmcd { display: none !important; }

/* Container auxiliar que o Google injeta às vezes */
body > .skiptranslate { display: none !important; }

/* Nunca deixe o layout ser empurrado */
html, body { top: 0 !important; }
.goog-te-gadget { font-size: 0 !important; }

body {
  background-image: url(../images/fundo.jpg);

}

#logo {
  width: 50px;
}

#common-header {
  margin-bottom: 10px;
}

#user-info{
      margin-right: 10px;
}

.my-5-2 {
  margin-top: 0 !important;
}

#offcanvasDarkNavbar {
  --bs-offcanvas-width: ;
}

#textNMontanteJogador,
#txtRodadaValor,
#textNMontanteOponente,
#textMontanteMesa {
  font-weight: bold;
}

.universe-card{
  border: 1px solid #000 !important
}

.game-card{
  border: 1px solid #000 !important;
  cursor : pointer;
  min-height: 122px;
}

.rodape{
  background-color: rgb(199 0 0);
  width: 100%;
  height: 100px;
  text-align: center;
  color: white;
  padding-top: 40px; 
}

.hero-card {
  background-color: #393939;
  /* verde Bootstrap */
  color: white;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  height: 100%;
}

.hero-card img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
  margin-right: 15px;
}

.hero-info {
  flex: 1;
}

.hero-info h5 {
  font-size: 1.2rem;
  margin-bottom: 4px;
  text-transform: uppercase;
  font-weight: bold;
}

.hero-info .universe {
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.hero-info .views {
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.hero-info .stars {
  color: gold;
  font-size: 1rem;
}



.heroDetails {
  text-align: center;
  margin-top: 20px;
  font-family: sans-serif;
}

.heroDetails img {
  max-width: 100%;
  border-radius: 10px;
  margin: 10px auto;
  /* max-width: 500px; */
  max-height: 300px;
}

.heroDetails h2 {
  font-weight: bold;
  margin-top: 15px;
}

.heroDetails .universe {
  color: #007bff;
  font-weight: 500;
}

.heroDetails .tabs {
  display: flex;
  justify-content: center;
  background-color: red;
  color: white;
  margin-top: 15px;
}

.heroDetails .tab {
  padding: 10px 20px;
  cursor: pointer;
  position: relative;
}

.heroDetails .tab.active::after {
  content: "";
  height: 3px;
  background-color: white;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.heroDetails .meta,
.heroDetails .info {
  text-align: left;
  max-width: 600px;
  margin: auto;
  padding: 10px;
}
.metaa p{
      margin-top: 0;
    margin-bottom: 0rem;
}
.heroDetails .stars {
  color: gold;
  font-size: 1.2rem;
}

.heroDetails pre {
  white-space: pre-wrap;
  text-align: justify;
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 6px;
}

.folha {
  margin: 0px 10px;
}

.publicidade {
  background-color: green;
  height: 60px;
  width: 100%;
  position: fixed;
  bottom: 0;
}

.bg-dark {
  --bs-bg-opacity: 1;
  background-color: rgb(199 0 0) !important;
}

.text-bg-dark {
  color: #fff !important;
  background-color: rgb(199 0 0) !important;
}

.dropdown-menu-dark {
  --bs-dropdown-bg: rgb(199 0 0) !important;
}

/* ajuste direto/rápido no seu style.css */
#heroesGrid .hero-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 10px;
  border-radius: 7px;
  width: 100%;
  border: #000000;
  border-style: groove;
  border-width: 1px;
  /* garanta que NÃO exista height: 100% aqui */
}

#heroesGrid .hero-card img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 64px;
}

#heroesGrid .hero-info {
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, .9);
}

.barraCor{
    width: 100%;
    height: 6px;
    margin-top: 5px;
    /*box-shadow: 1px 1px 3px rgba(0, 0, 0, .9);*/
    border: solid 1px black;
}

/* Botões de navegação fixos (laterais) */
.hero-nav-fixed {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  padding: 12px 16px;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  opacity: 0.95;
}

.hero-nav-left { left: 10px; }
.hero-nav-right { right: 10px; }

/* Animação suave (pulso) */
.hero-nav-anim {
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  animation: heroPulse 2.2s ease-in-out infinite;
}

.hero-nav-anim:hover,
.hero-nav-anim:focus {
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
  opacity: 1;
}

/* Dica de teclado */
.hero-nav-tip {
  margin-top: 8px;
}

.overlay-text {
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: inline-block;
}

/* Keyframes do pulso */
@keyframes heroPulse {
  0% { box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
  50% { box-shadow: 0 10px 26px rgba(0,0,0,0.35); }
  100% { box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
}

/* Acessibilidade: reduz animação quando usuário prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .hero-nav-anim {
    animation: none;
    transition: none;
  }
}

/* Ajustes responsivos para telas muito estreitas */
@media (max-width: 420px) {
  .hero-nav-fixed {
    padding: 10px 12px;
  }
  .hero-nav-left { left: 6px; }
  .hero-nav-right { right: 6px; }
}


/* Desktop */
  #cards-editor table input[type="number"] { width: 80px; }

  /* Mobile: transforma a linha em “card” sem bagunçar as colunas */
  @media (max-width: 576px){
    #cards-editor .table-responsive{ overflow: visible; }
    #cards-editor thead{ display:none; }         /* esconde cabeçalho */
    #cards-editor tbody tr{
      display:block;
      background:#fff;
      border:1px solid #e5e7eb;
      border-radius:12px;
      padding:12px;
      box-shadow:0 4px 12px rgba(0,0,0,.05);
      margin-bottom:12px;
    }
    #cards-editor td{ display:flex; align-items:center; border:0 !important; padding:6px 8px; }

    /* Primeiras duas células viram o cabeçalho do “card” */
    #cards-editor td.cell-sel{ padding-right:6px; flex:0 0 auto; }
    #cards-editor td.cell-name{
      flex:1; font-weight:600; font-size:16px;
      border-bottom:1px dashed #eee !important; margin-bottom:6px; padding-bottom:8px;
    }

    /* Cada atributo vira linha rotulada */
    #cards-editor td.cell-attr{ justify-content:space-between; }
    #cards-editor td.cell-attr::before{
      content: attr(data-label);
      color:#6b7280; margin-right:12px; flex:1;
    }
    #cards-editor td.cell-attr input{ width:64px; margin-left:12px; }

    /* Contador */
    #selected-counter{ margin:10px 0 4px; display:inline-block; }
  }


  /* Ícones de redes sociais coloridos */
.icon-instagram { color: #E1306C; }   /* rosa Instagram */
.icon-facebook  { color: #1877F2; }   /* azul Facebook */
.icon-twitter   { color: #1DA1F2; }   /* azul Twitter/X */
.icon-linkedin  { color: #0A66C2; }   /* azul LinkedIn */
.icon-youtube   { color: #FF0000; }   /* vermelho YouTube */
.icon-tiktok    { color: #000000; }   /* preto TikTok */
.icon-generic   { color: #6c757d; }   /* cinza genérico */