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

*{
  padding: 0;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
  max-width: 100dvw;
  color: white;
}

button{ cursor: pointer; }

body{
  max-height: 200dvh;
  height: auto;
  position: relative;
}

html{ scroll-behavior: smooth; }

/* ======================== HEADER ======================== */
header{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  padding: 15px 10% 5px 10%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  background-color: rgb(54,25,54);
  z-index: 2000;                 /* acima do conteúdo, abaixo dos modais */
  gap: 20px;

  /* vidro leve */
  background: rgba(54,25,54, 0);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.3);
}

header a img{ width: 120px; }

/* ===== Blur global atrás do site quando o menu mobile abre ===== */
@media (max-width: 860px){
  header.menu-open::after{
    content:"";
    position: fixed;
    inset: 0;
    z-index: 1999;               /* abaixo do header/menu */
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    background: rgba(20,12,30,.35);
    pointer-events: none;
  }
}

/* ======================== NAVBAR ======================== */
.navbar{
  display: flex;
  justify-self: start;
  gap: 20px;
}

.navbar a{
  font-size: 18px;
  margin-left: 70px;
  text-decoration: none;
  font-weight: 500;
  color: #fff;
  padding-bottom: 4px;
  cursor: pointer;
  transition: color .3s ease, transform .3s ease;
  position: relative;
}

.navbar a::after{
  content:'';
  position: absolute;
  left:0; bottom:0;
  width:0%; height:2px;
  background-color:#fab906;
  transition: width .3s ease;
}

.navbar a:hover{ color:#fab906; transform: translateY(-2px); }
.navbar a:hover::after{ width:100%; }

/* ===== Toggle (hambúrguer) ===== */
.nav-toggle{
  display:none;
  width:40px; height:40px;
  background:none; border:none; padding:0;
  cursor:pointer; position:relative;
}
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after{
  content:"";
  position:absolute; left:6px; right:6px; height:3px;
  background:#fff; border-radius:2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle::before{ top:12px; }
.nav-toggle span   { top:19px; }
.nav-toggle::after { top:26px; }

header.menu-open .nav-toggle::before{ transform: translateY(7px) rotate(45deg); }
header.menu-open .nav-toggle span   { opacity:0; }
header.menu-open .nav-toggle::after { transform: translateY(-7px) rotate(-45deg); }

/* ===== Navbar no mobile: vira dropdown abaixo do header ===== */
@media (max-width: 860px){
  .nav-toggle{ display:inline-block; justify-self:end; }

  .navbar{
    display:none;
    position:absolute;
    top:64px; left:0%;
    background: rgba(20,10,35,.96);
    border-radius:10px;
    padding:16px;
    flex-direction:column;
    gap:14px;
    z-index: 2001;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    min-width:220px;
  }
  header.menu-open .navbar{ display:flex; }

  .navbar a{ margin-left:0; }
  .navbar #live-status{ align-self:flex-start; }
}

/* ======================== HERO ======================== */
.home{
  min-height:100vh; height:auto;
  display:flex; align-items:center;
  padding:0 10%;
  background-color: rgb(54,25,54);
  position:relative;
}

@media (max-width: 860px){ .navbar{ display:none; } }

.img{
  position:absolute; bottom:2%; right:1%;
  height:0; width:45%; padding-top:44%;
  background-image: url(/img/roleta_pagina_inicial.png);
  background-size: cover; background-repeat:no-repeat;
  z-index:1;
}

.home-content{ max-width:600px; margin-top:60px; }
.home-content h1{ font-size:60px; font-weight:600; color:#fff; }
.home-content p{ margin-top:20px; font-size:16px; font-weight:500; color:#fff; }

/* ======================== ÍCONES ======================== */
.icones-container{
  display:flex; gap:30px; justify-content:flex-start; align-items:center;
  margin-top:30px; padding-bottom:0;
}
.icones img.icone-svg{
  width:50px; height:50px;
  filter: brightness(0) invert(1);
  transition: transform .3s ease, filter .3s ease;
}
.icones img.icone-svg:hover{ transform: translateY(-5px) scale(1.1); }

@media (max-width:1300px){
  .img{ display:none; }
  .lives .live-btn{ width:854px; }
  iframe:not(.shuffle_if){ height:480px; width:854px; }
}
@media (max-width:860px){
  .lives .live-btn{ width:512.4px; }
  iframe:not(.shuffle_if){ height:288px; width:512.4px; }
}
@media (max-width:530px){
  .lives .live-btn{ width:384.3px; }
  iframe:not(.shuffle_if){ height:216px; width:384.3px; }
}
@media (max-width:560px){
  .home-btn button{ margin-bottom:30px; width:100%; }
  .home-btn button.active{ margin-bottom:100px; }
}
@media (max-width:500px){
  .icones-container{ flex-direction: wrap; align-items:flex-start; gap:15px; margin-top:20px; }
  .icones img.icone-svg{ width:36px; height:36px; }
}

/* ======================== PAINÉIS (LEGADO) ======================== */
div.informacao{
  position:fixed; top:50%; left:50%;
  transform: translate(-50%, -50%);
  background-color:#131313;
  max-width:685px; min-width:250px;
  width:calc(100% - 10%); height:calc(100% - 20%);
  border-radius:20px; box-shadow:1px 1px 20px #0000003b;
  padding:0 30px 30px 30px;
  overflow-x:hidden; z-index: 999;
}
.informacao::-webkit-scrollbar{ width:8px; background-color:#292929; }
.informacao::-webkit-scrollbar-thumb{ background-color:#361936; border-radius:10px; }

.informacao button{
  background:transparent; color:white; border:none;
  display:flex; width:100%; font-weight:1000; cursor:pointer;
  position:fixed; left:97%; top:30px;
}
.informacao button:hover{ color:#fab906; }
.informacao p{ color:white; padding:0 30px; }
.informacao h3{ color:white; margin:0 30px; }
.informacao p strong{ color:#fab906; }
.informacao p a{ color:#fab906; }
.informacao p:not(.informacao_cassino p){ font-size:14px; border-bottom:4px solid #361936; }
.informacao a:not(.informacao p a){ margin:40px 30px; text-decoration:none; color:white; font-weight:600; }

.informacao_cassino{
  display:grid; grid-template-columns: repeat(2, 1fr);
  column-gap:25px; row-gap:20px; font-size:14px;
}
.informacao_cassino p{ background-color:#1a1a1a; padding:10px 15px; border-radius:10px; }

.informacao h1{ display:flex; justify-content:center; margin-bottom:20px; }
.info_if{ margin:30px; }

img.razzed{ width:200px; object-fit:cover; padding-top:40px; }
img.roobet{ width:300px; padding-top:40px; }
img.shuffle{ width:300px; padding-top:40px; padding-bottom:10px; }

/* ======================== LIVES ======================== */
.lives{
  display:flex; flex-direction:column; align-items:center;
  min-height:100dvh; height:auto;
  background-color:#fab906;
}
.lives iframe{ border-radius:5px; }
.lives p{ font-size:30px; font-weight:600; margin:100px 0 80px; color:#361936; }

.live-btn{
  height:auto; width:1281px; background:transparent;
  display:flex; gap:15px; margin-top:15px; margin-bottom:100px;
}
.platform-button{
  border-radius:8px; border:4px #361919 solid;
  color:#361936; padding:15px; width:100%;
  font-size:20px; font-weight:800; background:transparent;
}
.live-btn .active{ background:#361936; color:#fab906; }

/* ======================== CARDS DE BÔNUS ======================== */
.container_main{
  height:auto; width:100%;
  display:flex; flex-direction:column; align-items:center;
  padding:5% 10% 0 10%;
  background-color:#fab906;
}
.container_main h1,i{ padding-bottom:5%; color:#361936; }
.container_main .main button{ color:black; }

.container_main .main{
  background:transparent; display:grid;
  width:1281px; gap:80px;
}
.container_main .bets{
  border-radius:20px; position:relative; display:block;
  width:100%; height:0; padding-top:20%;
  background:transparent; border:5px #361936 solid;
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
.container_main .breve3{ background-image:url(/img/roobet_panel_br.png); }
.container_main .breve2{ background-image:url(/img/razed_panel_br.png); }
.container_main .breve1{ background-image:url(/img/embreve_panel.png); }

@media (max-width:1300px){ .container_main .main{ width:854px; } }
@media (max-width:860px){
  .container_main .main{ width:512.4px; }
  .container_main .bets{ padding-top:30%; }
}
@media (max-width:530px){
  .container_main .main{ width:384.3px; }
  .container_main .bets{ padding-top:45%; }
}

section button.info{
  position:absolute; top:10px; right:10px;
  width:30px; height:30px; border-radius:50%;
  border:7px solid #361936; background:#fff; box-shadow:0 0 10px black;
  font-weight:600;
}

/* ======================== SORTEIO ======================== */
.sorteio{
  background:#fab906; height:100vh; width:100%;
  display:flex; justify-content:center; align-items:center;
}
.sorteio p{ color:#361936; font-size:34px; font-weight:600; }

/* ======================== FOOTER ======================== */
footer{
  background: rgba(54,25,54, 0);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  width:100%; padding:30px 0 15px; position:relative;
}
.legal{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  width:100%; max-width:1200px; margin:0 auto; padding:0 20px;
}
.legal a.begamble{ justify-self:start; margin-right:auto; }
.legal a.logo{ justify-self:center; padding:0 20px; }
.legal a.mais-dezoito{ justify-self:end; margin-left:auto; }

.legal a.begamble img{ width:170px; height:auto; }
.legal a.logo img{ width:120px; height:auto; display:block; }
.legal a.mais-dezoito img{ width:25px; height:25px; }

.autenticidade{ width:100%; text-align:center; padding:15px 0 0; }
.autenticidade p{ color:#fff; font-size:12px; margin:0; }

@media (max-width:700px){
  .legal{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:15px; }
  .legal a.begamble{ grid-column:1; grid-row:1; }
  .legal a.logo{ grid-column:1 / span 2; grid-row:2; justify-self:center; padding:0; }
  .legal a.mais-dezoito{ grid-column:2; grid-row:1; justify-self:end; }
  .legal a.logo img{ width:100px; }
  .legal a.begamble img{ width:130px; }
  .legal a.mais-dezoito img{ width:20px; height:20px; }
  .autenticidade p{ font-size:10px; }
}

/* ======================== LÍNGUA ======================== */
.language-selector{ position:relative; display:inline-block; }
.lang-toggle{
  background:transparent; border:1px solid #ccc; border-radius:8px; cursor:pointer;
  display:flex; align-items:center; gap:8px; padding:6px 12px; font-size:14px;
  transition: background-color .3s ease; box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.lang-toggle:hover{ background:transparent; }
.lang-toggle .arrow{ font-size:20px; color:white; }

.lang-options{
  opacity:0; visibility:hidden; position:absolute; top:100%; left:0; margin-top:5px;
  background:white; border:1px solid #ccc; border-radius:8px; list-style:none; padding:0; margin:0;
  z-index:3000; min-width:150px; box-shadow:0 4px 8px rgba(0,0,0,.1);
  transform: translateY(-10px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.language-selector:hover .lang-options{
  opacity:1; visibility:visible; transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear;
}
.lang-options li a{
  display:flex; align-items:center; padding:8px 12px; text-decoration:none; color:#333;
  font-size:14px; gap:8px; transition: background-color .2s ease;
}
.lang-options li a:hover{ background:#f0f0f0; }
.lang-options li a.active{ background:#007bff; color:white; font-weight:bold; }
.lang-options li a.active img{ filter: brightness(0) invert(1); }
.language-selector img{ width:30px; height:auto; vertical-align:middle; }
.lang-options li:first-child a{ border-top-left-radius:8px; border-top-right-radius:8px; }
.lang-options li:last-child  a{ border-bottom-left-radius:8px; border-bottom-right-radius:8px; }

/* ======================== Cards (sistema novo SB) ======================== */
.sb *{ box-sizing:border-box; }
.sb{
  --bg:#0b0b14; --card:#121225; --text:#e8e8ff; --muted:#b7b7d6;
  --accent:#9d7bff; --accent-2:#6ee7ff; --border:#232347;
  color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji';
}
.sb-container{ max-width:1100px; margin:0 auto; padding:2rem 1rem; }
.sb-grid{
  display:grid; gap:2rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  justify-content:center; justify-items:center;
}
.sb-card{
  background: linear-gradient(180deg, rgba(157,123,255,.08), rgba(110,231,255,.06)), var(--card);
  border:1px solid var(--border); border-radius:16px;
  padding:2rem 1.5rem; display:flex; flex-direction:column; align-items:center; text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  max-width:500px; min-height:280px; width:100%; font-size:1rem;
}
.sb-card-logo{ width:180px; height:auto; object-fit:contain; filter: drop-shadow(0 6px 16px rgba(157,123,255,.25)); }
.sb-card-name{ margin:.75rem 0 .25rem; font-size:1.125rem; }
.sb-card-desc{ margin:0 0 .75rem; color:var(--muted); font-size:.95rem; }
.sb-btn{
  cursor:pointer; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#0b0b14; border:0; border-radius:999px; padding:.6rem 1rem; font-weight:700;
  transition: transform .15s ease, filter .2s ease; margin-top:auto;
}
.sb-btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.sb-btn:active{ transform: translateY(0); }

/* ===== Modais SB ===== */
.sb-modal{ position:fixed; inset:0; display:none; z-index:10000; }
.sb-modal[aria-hidden="false"]{ display:block; }
.sb-modal-backdrop{ position:absolute; inset:0; background: rgba(5,8,15,.7); backdrop-filter: blur(3px); }
.sb-modal-dialog{
  position:relative; z-index:1; background:var(--bg); color:var(--text);
  width:min(920px, 92vw); max-height:90vh; margin:5vh auto;
  border:1px solid var(--border); border-radius:20px; overflow:clip;
  box-shadow:0 30px 70px rgba(0,0,0,.45); outline:none; animation: sb-pop .18s ease-out;
}
@keyframes sb-pop{ from{ transform: translateY(6px) scale(.98); opacity:.6 } to{ transform:none; opacity:1 } }
.sb-modal-header{ display:none; }
.sb-modal-body{ padding:1rem 1.25rem 1.25rem; overflow:auto; max-height: calc(90vh - 20px); }
.sb-modal-body--with-logo{ padding-top:1rem; }
.sb-modal-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; }
.sb-modal-top .sb-brand{ max-height:50px; width:auto; }
.sb-modal-top .sb-close{
  background:transparent; border:0; color:var(--text); font-size:1.6rem; font-weight:bold; cursor:pointer; line-height:1;
  transition: color .2s;
}
.sb-modal-top .sb-close:hover{ color:var(--accent-2); }
.sb-lead{ margin:.5rem 0 1rem; color:var(--muted); }
.sb-h{ margin:1.25rem 0 .5rem; font-size:1.05rem; letter-spacing:.4px; text-transform:uppercase; color:#d7d4ff; }
.sb-info{
  display:grid; gap:.75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  background: linear-gradient(180deg, rgba(110,231,255,.05), rgba(157,123,255,.04));
  border:1px dashed var(--border); padding:.9rem; border-radius:14px;
}
.sb-info p{ margin:0; }
.sb-video{ position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:1px solid var(--border); box-shadow:0 8px 26px rgba(0,0,0,.25); }
.sb-iframe{ position:absolute; inset:0; width:100%; height:100%; }
.sb-modal-body::-webkit-scrollbar{ width:10px; }
.sb-modal-body::-webkit-scrollbar-thumb{ background:#2a2a4a; border-radius:10px; }
.sb-modal-body::-webkit-scrollbar-track{ background:#141428; }
@media (max-width:520px){ .sb-card-logo{ width:120px; } }

/* ===== Fundo decorativo global ===== */
html,body{ height:100%; }
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 600px at 8% 10%, rgba(157,123,255,.25), transparent 60%),
    radial-gradient(900px 600px at 82% 78%, rgba(110,231,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(0,0,0,.35), rgba(0,0,0,.75)),
    url('/img/banner_yt_corrigido.png') center/cover no-repeat;
}
.home, .container_main, .lives{ background: transparent !important; }
.container_main h1, .container_main i{ color:#e8e8ff; }
.lives p{ color:#e8e8ff; }
.img{ z-index:0; }

/* ===== Loader (Pulse Glow) ===== */
#sb-loader{
  position:fixed; inset:0; z-index:10000; display:grid; place-items:center;
  background:
    radial-gradient(1200px 600px at 8% 10%, rgba(157,123,255,.25), transparent 60%),
    radial-gradient(900px 600px at 82% 78%, rgba(110,231,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(0,0,0,.35), rgba(0,0,0,.75)),
    #0b0b14;
  transition: opacity .35s ease, visibility .35s ease;
}
#sb-loader.hidden{ opacity:0; visibility:hidden; }
.sb-loader-box{
  display:grid; justify-items:center; padding:28px 32px; border-radius:16px;
  background: rgba(10,10,22,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.sb-loader-logo{ width:260px; height:auto; display:block; animation: pulseGlow 4s infinite; }
@keyframes pulseGlow{
  0%,100%{ transform:scale(1); filter: drop-shadow(0 0 10px #9d7bff); }
  50%    { transform:scale(1.05); filter: drop-shadow(0 0 25px #ffffff); }
}

/* ===== CTA dentro dos modais ===== */
 /* ESTILIZAÇÃO BOTÃO CRIE CONTA DENTRO DOS PAINÉIS */
.sb-cta-btn{
  display:inline-block; padding:14px 28px;
  background: linear-gradient(90deg, #fab906, #ff7b00);
  color:#0b0b14; font-size:1.1rem; font-weight:700; border-radius:999px; text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  transition: transform .2s ease, filter .2s ease;
}
.sb-cta-btn:hover{ transform: translateY(-3px); filter: brightness(1.1); }
.sb-cta-btn:active{ transform: translateY(0); }

/* ===== Estado "Em breve" ===== */
.sb-card.sb-card--disabled{
  position:relative; overflow:hidden; pointer-events:none;
}
.sb-card.sb-card--disabled::before{
  content:""; position:absolute; inset:0; z-index:2; border-radius:inherit;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.sb-card.sb-card--disabled::after{
  content:""; position:absolute; inset:-8% -10%; z-index:3;
  background: url("/img/em_breve.png") center/100% auto no-repeat;
  transform: rotate(-6deg); pointer-events:none;
}
.sb-card.sb-card--disabled .sb-btn{ opacity:.6; cursor:not-allowed; }
@supports not ((backdrop-filter: blur(4px))){
  .sb-card.sb-card--disabled::before{ background: rgba(0,0,0,.55); }
}

/* ===== Estado "Coming Soon" EN ===== */
.sb-card-en--disabled{ position:relative; overflow:hidden; pointer-events:none; }
.sb-card-en--disabled::before{
  content:""; position:absolute; inset:0; z-index:2; border-radius:inherit;
  background: rgba(0,0,0,.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.sb-card-en--disabled::after{
  content:""; position:absolute; inset:-8% -10%; z-index:3;
  background: url("/img/soon.png") center/100% auto no-repeat;
  transform: rotate(-6deg); pointer-events:none;
}
.sb-card-en--disabled .sb-btn{ opacity:.6; cursor:not-allowed; }
@supports not ((backdrop-filter: blur(4px))){
  .sb-card-en--disabled::before{ background: rgba(0,0,0,.55); }
}

/* ===== Live badge ===== */
.live-badge{
  margin-left:16px; padding:10px 10px; border-radius:8px;
  font-size:13px; font-weight:800; letter-spacing:.4px; line-height:1;
  display:inline-block; user-select:none;
}
.live-badge.is-live{
  color:#fff; background:#e53935; cursor:pointer;
  box-shadow:0 0 0 0 rgba(229,57,53,.6); animation: livePulse 1.6s ease-out infinite;
}
.live-badge.is-offline{
  color:#d0d0e6; background:#2a2a48; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  animation:none;
}
@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 rgba(229,57,53,.6); }
  70%{ box-shadow:0 0 0 10px rgba(229,57,53,0); }
  100%{ box-shadow:0 0 0 0 rgba(229,57,53,0); }
}