/* ===============================================
   Joguito — Estilos globais (mobile-first)
   Autor: Fred
   Objetivo: visual elegante, acessível e performático
   =============================================== */

/* ---------- Variáveis de tema ---------- */
:root { /* Variáveis permitem trocar paleta fácil no futuro */
  --bg-0: #0f0f16;          /* Fundo principal */
  --bg-1: #18181e;          /* Fundo de áreas */
  --bg-2: #232332;          /* Fundo de componentes/inputs */
  --txt-0: #ffffff;         /* Texto principal */
  --txt-1: #c9c9d1;         /* Texto secundário */
  --muted: #9aa0a6;         /* Texto neutro */
  --brand: #ea2957;         /* Cor de destaque Joguito */
  --brand-2: #ff5050;       /* Alternativa para micro-detalhes */
  --shadow: 0 10px 30px rgba(0,0,0,.35); /* Sombra padrão */
  --radius-xl: 20px;        /* Raio de borda grande */
  --radius-lg: 14px;        /* Raio de borda média */
  --radius-md: 10px;        /* Raio de borda pequena */
  --ring: 0 0 0 3px rgba(234,41,87,.35);/* Halo de foco */
}

/* ---------- Reset/Tokens básicos ---------- */
*,
*::before,
*::after { box-sizing: border-box; } /* Tamanho previsível de caixas */
html, body { height: 100%; }         /* Altura para layouts com 100% */
body {
  margin: 0;                         /* Remove margens padrão */
  background: var(--bg-0);           /* Fundo escuro elegante */
  color: var(--txt-0);               /* Texto primário claro */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Fonte rápida e moderna */
  -webkit-font-smoothing: antialiased; /* Suaviza renderização */
  text-rendering: optimizeLegibility;  /* Melhora legibilidade */
}

/* ---------- Contêiner utilitário (opcional) ---------- */
.container {
  width: 100%;                       /* Ocupa largura total no mobile */
  max-width: 580px;                  /* Confortável para leitura */
  margin-inline: auto;               /* Centraliza horizontal */
  padding: 16px;                     /* Respiro interno */
}

/* ---------- Topo ---------- */
.top-bar {
  background: #1a1a27;               /* Barra mais escura que o corpo */
  min-height: 56px;                  /* Altura mínima para toque */
  padding-inline: 12px;              /* Espaço lateral */
  display: flex;                     /* Layout flex */
  align-items: center;               /* Centraliza verticalmente */
  justify-content: space-between;    /* Logo à esquerda, ações à direita */
  position: sticky;                  /* Gruda no topo quando rola */
  top: 0;                            /* Posição fixa superior */
  z-index: 100;                      /* Fica acima do conteúdo */
  box-shadow: 0 2px 20px rgba(0,0,0,.3); /* Sombra suave */
}
.logo {
  height: 36px;                      /* Altura amigável no mobile */
  display: block;                    /* Evita gaps inline */
}

/* ---------- Carrossel (aproveitando Bootstrap) ---------- */
.banner-carousel {
  margin: 16px auto;                 /* Respiro vertical */
  width: 100%;                       /* Ocupe toda a largura possível */
  max-width: 980px;                  /* Não estica demais em telas grandes */
  border-radius: var(--radius-xl);   /* Cantos arredondados agradáveis */
  overflow: hidden;                  /* Corta excesso nas bordas */
  box-shadow: var(--shadow);         /* Profundidade agradável */
}
.carousel-inner {                    /* Container interno do BS */
  position: relative;                /* Mantém fluxo nativo do BS */
}
.carousel-item {
  /* IMPORTANTE: NÃO usar position:absolute aqui. Deixe o BS controlar. */
  height: clamp(38vh, 52vw, 56vh);   /* Altura responsiva (mobile->desk) */
  transition: transform .6s ease, opacity .4s ease; /* Transição suave */
}
.banner-img {
  width: 100%;                       /* Larga total */
  height: 100%;                      /* Ocupa altura do item */
  object-fit: cover;                 /* Corta a imagem sem distorcer */
  display: block;                    /* Remove espaços brancos */
}

/* ---------- Indicadores/controles do carrossel ---------- */
.carousel-indicators {
  gap: 8px;                          /* Espaço entre bolinhas */
  margin-bottom: 10px;               /* Distância da borda */
}
.carousel-indicators [data-bs-target] {
  width: 8px;                        /* Diâmetro do ponto */
  height: 8px;                       /* Idem */
  border-radius: 50%;                /* Bolinha */
  background-color: #bdbdbd;         /* Cinza claro */
  opacity: .85;                      /* Leve transparência */
}
.carousel-indicators .active {
  background-color: var(--brand);    /* Destaque com a cor Joguito */
  opacity: 1;                        /* Totalmente visível */
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  /* Ícones mais visíveis sem poluir */
  filter: invert(1) grayscale(1);    /* Fica claro no fundo escuro */
  background: rgba(0,0,0,.35);       /* Bolha semifechada */
  border-radius: 50%;                /* Circular */
  padding: 10px;                     /* Área de toque maior */
}

/* ---------- Botão sobre banner ---------- */
.btn-banner {
  position: absolute;                /* Paira sobre a imagem */
  inset-block-end: 12%;              /* Distância da base da imagem */
  inset-inline-end: 6%;              /* Alinha à direita */
  z-index: 10;                       /* Sobrepõe conteúdo */
  padding: 12px 24px;                /* Área de toque confortável */
  font-weight: 700;                  /* Forte para CTA */
  border-radius: 999px;              /* Pílula */
  border: 2px solid #fff;            /* Borda clara */
  color: #fff;                       /* Texto branco */
  background: color-mix(in oklab, var(--brand) 80%, transparent); /* Vermelho translúcido */
  backdrop-filter: blur(4px);        /* Leve blur no fundo */
  transition: transform .15s ease, background-color .2s ease; /* Feedback tátil */
}
.btn-banner:active { transform: scale(.98); } /* Clique com leve compressão */
.btn-banner:hover { background: var(--brand); } /* Hover desktop consistente */

/* ---------- Modal de autenticação ---------- */
.modal-blur-bg {
  position: absolute;                /* Ocupa o fundo do modal */
  inset: 0;                          /* Estica até as bordas */
  backdrop-filter: blur(8px);        /* Desfoque elegante */
  background: rgba(20, 20, 30, .6);  /* Película escura translúcida */
  border-radius: var(--radius-xl);   /* Combina com o box */
  z-index: 0;                        /* Atrás do conteúdo */
}
.auth-modal-box {
  background: var(--bg-1);           /* Bloco sobre o blur */
  border-radius: var(--radius-xl);   /* Cantos arredondados */
  min-width: 300px;                  /* Limite inferior */
  max-width: 480px;                  /* Limite superior (mobile/desk) */
  width: calc(100vw - 2rem);         /* Respira nas laterais no mobile */
  box-shadow: var(--shadow);         /* Profundidade */
}

/* ---------- Abas (Entrar/Registro) ---------- */
.nav-tabs { border: 0 !important; }  /* Tira linha default */
.nav-tabs .nav-link {
  color: var(--txt-0) !important;    /* Texto claro sempre */
  background: transparent;           /* Fundo limpo */
  border: none;                      /* Sem bordas BS */
  font-weight: 600;                  /* Realce leve */
}
.nav-tabs .nav-link.active {
  background: var(--brand);          /* Aba ativa destacada */
  color: #fff !important;            /* Texto branco */
  border-radius: 14px 14px 0 0;      /* Curva superior */
  border: none;                      /* Sem borda */
  box-shadow: 0 6px 18px rgba(234,41,87,.35); /* Glow do brand */
}

/* ---------- Inputs e grupos ---------- */
.input-group-text {
  background: var(--bg-2) !important;/* Fundo de ícone coerente */
  color: var(--muted) !important;    /* Ícone discreto */
  border: none;                      /* Sem borda dura */
}
.form-control {
  background: var(--bg-2) !important;/* Campo escuro */
  color: var(--txt-0) !important;    /* Texto claro */
  border: none;                      /* Sem borda padrão */
  padding-block: 12px;               /* Altura tátil */
  border-radius: var(--radius-lg);   /* Cantos macios */
}
.form-control::placeholder { color: #8f93a1; } /* Placeholder legível */
.form-control:focus {
  outline: none;                     /* Remove outline */
  box-shadow: var(--ring);           /* Halo de foco acessível */
}

/* ---------- Botões ---------- */
.btn-danger {
  background: var(--brand) !important; /* Usa a cor do tema */
  border: none;                         /* Sem borda */
  font-weight: 800;                     /* Botão mais “presente” */
  padding-block: 12px;                  /* Tamanho de toque */
  border-radius: 999px;                 /* Pílula */
  box-shadow: 0 8px 20px rgba(234,41,87,.3); /* Sombra temática */
}
.btn-danger:active { transform: translateY(1px); } /* Feedback ao clique */
.btn-outline-light {
  border-color: #fff;                   /* Mantém contraste */
  color: #fff;                          /* Texto claro */
  border-radius: 999px;                 /* Pílula */
}

/* ---------- Cards promocionais (se usados) ---------- */
.promo-cards {
  display: grid;                        /* Grid responsivo */
  grid-template-columns: repeat(2, 1fr);/* 2 colunas no mobile */
  gap: 12px;                            /* Espaço entre cards */
  margin: 12px auto;                    /* Respiro vertical */
  max-width: 980px;                     /* Largura limite */
}
@media (min-width: 560px) {
  .promo-cards { grid-template-columns: repeat(3, 1fr); } /* 3 colunas */
}
@media (min-width: 920px) {
  .promo-cards { grid-template-columns: repeat(4, 1fr); } /* 4 colunas */
}
.card {
  background: #1b1b28;                  /* Fundo do card */
  border: none;                         /* Sem borda */
  color: #ffd700;                       /* Dourado leve */
  border-radius: var(--radius-lg);      /* Cantos arredondados */
  padding: 12px;                        /* Respiro interno */
  box-shadow: var(--shadow);            /* Sombra */
}

/* ---------- Navegação inferior (se usada) ---------- */
.bottom-nav {
  position: fixed;                      /* Fixa ao rodapé */
  inset-inline: 0;                      /* Lado a lado 0 */
  inset-block-end: 0;                   /* Encosta na base */
  background: #161623;                  /* Fundo da barra */
  display: grid;                        /* Grid simples */
  grid-template-columns: repeat(4, 1fr);/* 4 itens iguais */
  padding: 8px;                         /* Respiro */
  box-shadow: 0 -8px 20px rgba(0,0,0,.35);/* Sombra para cima */
  z-index: 1000;                        /* Acima do conteúdo */
}
.nav-item {
  color: #fff;                          /* Texto branco */
  font-size: 12px;                      /* Tamanho compacto */
  text-align: center;                   /* Centraliza */
  text-decoration: none;                /* Sem sublinhado */
  opacity: .9;                          /* Leve transparência */
}
.nav-item.active,
.nav-item:hover {
  color: var(--brand-2);                /* Destaque no hover/ativo */
  opacity: 1;                           /* Totalmente visível */
}

/* ---------- Rodapé ---------- */
footer a { text-decoration: none; color: var(--txt-1); } /* Links discretos */
footer a:hover { color: var(--txt-0); }                   /* Realce no hover */

/* ---------- Acessibilidade & movimento reduzido ---------- */
:focus-visible { outline: none; box-shadow: var(--ring); } /* Foco claro */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Respeita usuários sensíveis a movimento */
}

/* ---------- Layout desktop (admin/telas grandes) ---------- */
@media (min-width: 992px) {
  .banner-carousel { margin: 24px auto; }                 /* Mais respiro */
  .carousel-item { height: clamp(42vh, 40vw, 56vh); }     /* Banner mais alto */
  .btn-banner { inset-block-end: 14%; inset-inline-end: 8%; padding: 14px 28px; font-size: 1rem; } /* CTA mais consistente */
}

/* ---------- Micro-ajustes de contraste ---------- */
.top-bar .btn.btn-outline-light:hover { background: rgba(255,255,255,.1); } /* Hover suave */



/* Full-bleed hero */
.hero{
  position: relative;
  min-height: clamp(520px, 70vh, 780px);
  overflow: hidden;
  isolation: isolate; /* cria um novo contexto de empilhamento (evita glitches) */
}

/* Mídia ocupa 100% da seção */
.hero__media{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media picture,
.hero__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;      /* cobre tudo, sem “vazio” */
  object-position: center;
}

/* Overlay: mistura do gradiente da marca + vinheta sutil */
.hero__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(234,41,87,.25), transparent 60%),
    linear-gradient(to bottom, rgba(15,15,22,.15), rgba(15,15,22,.55));
}

/* Conteúdo por cima da imagem */
.hero__content{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(24px, 6vw, 64px) 16px;
  color: #fff;
}

.hero__title{ font-weight: 900; letter-spacing:.2px; margin-top: 8px; }
.hero__subtitle{ color: #c9c9d1; max-width: 720px; margin: 8px auto 16px; }

/* Evita scroll horizontal acidental em alguns Androids */
html, body { overflow-x: hidden; }