@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100;200;300;400;500;600;700;800;900&display=swap');

*, *::before, *::after {
  font-family: 'Alexandria', sans-serif, 'Montserrat' !important;
}

.min-w-\[calc\(33\.33vw-1\.6rem\)\] {
  max-height: 140px !important;
  min-width: 140px !important;
}

.flex.w-full.select-none.flex-col.p-2.text-white {
  padding: 24px 10px 10px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  font-weight: 900;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.80) 0%, transparent 100%);
}


/* Tela de Login */
.scrollbar-hide.fixed.inset-0.overflow-y-auto.p-1:has(input[name="email"]) {
  padding: 0 !important;
}
.scrollbar-hide.relative.flex.h-dvh.w-screen.transform.flex-col:has(input[name="email"]) {
  position: relative;
  gap: 0 !important;
}
.scrollbar-hide.relative.flex.h-dvh.w-screen.transform.flex-col:has(input[name="email"])::before {
  content: '';
  display: block;
  width: 100%;
  height: 130px;
  z-index: 49;
  position: relative;
  flex-shrink: 0;
  background-image: url('https://images.cometagaming.com/7d05d07f-23b2-4f96-8093-f38a3a5fb300/bannerModal');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.scrollbar-hide.relative.flex.h-dvh.w-screen.transform.flex-col:has(input[name="email"]) {
  position: relative;
  gap: 0 !important;
  background-color: rgb(var(--brand-background) / var(--tw-bg-opacity, 1)) !important;
}

.scrollbar-hide.relative.flex.h-dvh.w-screen.transform.flex-col:has(input[name="email"]) input[name="email"],
.scrollbar-hide.relative.flex.h-dvh.w-screen.transform.flex-col:has(input[name="email"]) input[name="password"] {
  background: rgb(var(--brand-background-brighten) / var(--tw-bg-opacity, 1)) !important;
  border: 1px solid rgb(var(--brand-separator) / var(--tw-border-opacity, 1)) !important;
}

/* Tela de Cadastro */
.scrollbar-hide.relative.flex.h-dvh.w-screen.transform.flex-col:has(input[name="document"]) {
  position: relative;
  background-color: rgb(var(--brand-background) / var(--tw-bg-opacity, 1)) !important;
}

.scrollbar-hide.fixed.inset-0.overflow-y-auto.p-1:has(input[name="document"]) {
  padding: 0 !important;
}

.scrollbar-hide.relative.flex.h-dvh.w-screen.transform.flex-col:has(input[name="document"]) input[name="document"],
.scrollbar-hide.relative.flex.h-dvh.w-screen.transform.flex-col:has(input[name="document"]) input[name="password"],
.scrollbar-hide.relative.flex.h-dvh.w-screen.transform.flex-col:has(input[name="document"]) input[name="email-address"],
.scrollbar-hide.relative.flex.h-dvh.w-screen.transform.flex-col:has(input[name="document"]) input[name="phone-number"],
.scrollbar-hide.relative.flex.h-dvh.w-screen.transform.flex-col:has(input[name="document"]) input[name="phone-code"] {
  background: rgb(var(--brand-background-brighten) / var(--tw-bg-opacity, 1)) !important;
  border: 1px solid rgb(var(--brand-separator) / var(--tw-border-opacity, 1)) !important;
}

[class*="z-[52]"] button[class*="right-3"] {
  background-color: rgb(var(--brand-background) / 0.85) !important;
}

/* Tela de Deposito */
section.scrollbar-hide.bg-brand-card {
  background: rgb(var(--brand-background) / var(--tw-bg-opacity, 1)) !important;
}

.scrollbar-hide.relative.flex.h-dvh.w-screen.transform.flex-col.gap-4.overflow-y-auto.overflow-x-hidden.bg-brand-card.text-left.align-middle.shadow-xl.transition-all {
  background: rgb(var(--brand-background) / var(--tw-bg-opacity, 1)) !important;
}

.scrollbar-hide.relative.flex.h-dvh.w-screen.transform.flex-col.gap-4.overflow-y-auto.overflow-x-hidden.bg-brand-card.text-left.align-middle.shadow-xl.transition-all input.bg-brand-input {
  background: rgb(var(--brand-background-brighten) / var(--tw-bg-opacity, 1)) !important;
  border: 1px solid rgb(var(--brand-separator) / var(--tw-border-opacity, 1)) !important;
}

.scrollbar-hide.relative.flex.h-dvh.w-screen.transform.flex-col.gap-4.overflow-y-auto.overflow-x-hidden.bg-brand-card.text-left.align-middle.shadow-xl.transition-all .flex.items-center.justify-between.mt-2.px-3 {
    display: none !important;
}

.scrollbar-hide.fixed.inset-0.overflow-y-auto.p-1 {
    padding: 0 !important;
}

.bg-brand-card img.mt-4.w-72 {
  width: 180px !important;
  height: 180px !important;
  margin-top: 8px !important;
  border-radius: 20px !important;
}

.bg-brand-card .flex.flex-col.items-center.justify-center {
  padding: 0 !important;
}

/* ===== 3 JOGOS POR LINHA - RESPONSIVO ===== */
.grid.grid-cols-2:not(:has(label[for="input-undefined"])),
div[class*="grid-cols-"]:not(:has(label[for="input-undefined"])) {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
}
/* Remove min-width dos cards para não quebrar o layout */
.grid.grid-cols-2 > div,
div[class*="grid-cols-"] > div {
  min-width: unset !important;
  width: 100% !important;
}

.scrollbar-hide.flex.max-w-screen-xl.gap-4.overflow-x-auto.overflow-y-hidden.pt-3 {
  gap: .5rem !important;
}

/* ── Card principal: row layout ── */
.w-full.rounded-md.border.border-brand-separator.bg-brand-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  height: auto !important;
  overflow: hidden !important;
}
/* ── Imagem: lado esquerdo, tamanho fixo, cover centralizado ── */
.w-full.rounded-md.border.border-brand-separator.bg-brand-card > div:first-child {
  width: 120px !important;
  min-width: 120px !important;
  height: auto !important;
  min-height: 160px !important;
  border-radius: 6px 0 0 6px !important;
  background-size: cover !important;
  background-position: center center !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  justify-content: flex-start !important;
}
/* Esconde o overlay gradient sobre a imagem */
.w-full.rounded-md.border.border-brand-separator.bg-brand-card > div:first-child::after {
  display: none !important;
}
/* Esconde o botão "Compartilhar" sobre a imagem */
.w-full.rounded-md.border.border-brand-separator.bg-brand-card > div:first-child > button {
  display: none !important;
}
/* ── Painel info: lado direito ── */
.w-full.rounded-md.border.border-brand-separator.bg-brand-card > div:last-child {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
/* ── Linha de título ── */
.w-full.rounded-md.border.border-brand-separator.bg-brand-card > div:last-child > div:first-child {
  width: 100% !important;
}
/* ── Linha dos botões: empilhados em coluna para caber ── */
.w-full.rounded-md.border.border-brand-separator.bg-brand-card > div:last-child > div:last-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  height: auto !important;
  margin-top: 8px !important;
  width: 100% !important;
}
/* Cada botão ocupa 100% da largura ── */
.w-full.rounded-md.border.border-brand-separator.bg-brand-card > div:last-child > div:last-child > button {
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
}

/* Laptops e Desktops pequenos (telas de 13" a 15") */
@media (min-width: 1024px) {
  .tg__strip {
    padding:0px 0px 0px 50px;
  }
}

/* Desktops Grandes (Monitores Full HD ou superiores) */
@media (min-width: 1280px) {
  .tg__strip {
    padding:0px 0px 0px 50px;
  }
}

/* Telas Ultra-Wide ou 4K */
@media (min-width: 1536px) {
  .tg__strip {
    padding:0px 0px 0px 50px;
  }
}
/* Seleção exata baseada em todas as classes fornecidas */
button.relative.inline-flex.cursor-pointer.items-center.justify-center.overflow-hidden.whitespace-nowrap.rounded-md.border.border-transparent.font-medium.leading-none.outline-transparent.transition-all.duration-300.ease-in-out.before\:absolute.before\:bottom-0.before\:left-0.before\:right-0.before\:top-0.before\:bg-white\/10.before\:opacity-0.before\:transition-all.before\:content-\[\'\'\].\!py-2.px-3.text-xs.bg-brand-primary.text-white.border-brand-primary.hover\:bg-brighten-brand-primary.bg-brand-primary.hover\:bg-brighten-brand-primary.md\:hidden {
    position: relative !important;
    overflow: visible !important; /* Obrigatório para a badge não sumir */
}

/* Injeção da badge PIX no botão selecionado acima */
button.relative.inline-flex.cursor-pointer.items-center.justify-center.overflow-hidden.whitespace-nowrap.rounded-md.border.border-transparent.font-medium.leading-none.outline-transparent.transition-all.duration-300.ease-in-out.before\:absolute.before\:bottom-0.before\:left-0.before\:right-0.before\:top-0.before\:bg-white\/10.before\:opacity-0.before\:transition-all.before\:content-\[\'\'\].\!py-2.px-3.text-xs.bg-brand-primary.text-white.border-brand-primary.hover\:bg-brighten-brand-primary.bg-brand-primary.hover\:bg-brighten-brand-primary.md\:hidden::after {
    content: "PIX";
    position: absolute;
    top: -11px; /* Ajuste fino conforme a imagem */
    left: 6px;
    
    /* Estilo da Badge Amarela */
    background-color: #ffde00;
    color: #000;
    font-size: 9px;
    font-weight: 900;
    padding: 2px 6px 2px 18px;
    border-radius: 12px 12px 12px 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 50;
    pointer-events: none; /* Evita que o clique na badge interfira no botão */

    /* Ícone PIX em SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 315.4 315.6'%3E%3Cpath d='M245.9,241.3c-12.3,0-24.1-4.8-32.8-13.5l-47.4-47.4c-3.5-3.3-9-3.3-12.4,0l-47.5,47.5c-8.7,8.7-20.5,13.6-32.8,13.6h-9.3l60,60c18.7,18.7,49.1,18.7,67.8,0l60.1-60.1h-5.8.1ZM73.1,73.9c12.3,0,24.1,4.9,32.8,13.6l47.5,47.5c3.4,3.4,9,3.4,12.4,0l47.3-47.3c8.7-8.7,20.5-13.6,32.8-13.6h5.7l-60.1-60.1c-18.7-18.7-49.1-18.7-67.8,0h0l-59.9,59.9h9.3ZM301.4,123.8l-36.3-36.3c-.8.3-1.7.5-2.6.5h-16.5c-8.6,0-16.8,3.4-22.9,9.5l-47.3,47.3c-8.9,8.9-23.3,8.9-32.1,0l-47.5-47.5c-6.1-6.1-14.3-9.5-22.9-9.5h-20.3c-.8,0-1.7-.2-2.4-.5L14,123.8c-18.7,18.7-18.7,49.1,0,67.8l36.5,36.5c.8-.3,1.6-.5,2.4-.5h20.4c8.6,0,16.8-3.4,22.9-9.5l47.5-47.5c8.6-8.6,23.6-8.6,32.1,0l47.3,47.3c6.1,6.1,14.3,9.5,22.9,9.5h16.5c.9,0,1.8.2,2.6.5l36.3-36.3c18.7-18.7,18.7-49.1,0-67.8h0' fill='%2332bcad'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 4px center;
    background-size: 11px;
}