/* Camada de prova social e promo da landing — independente do bundle do SPA */

/* ---------- título do hero vira a arte que produzimos ---------- */
/* menor, para o hero inteiro caber sem rolagem */
.landing .lp-title{
  display:block;width:100%;max-width:430px;height:clamp(78px,13vh,124px);margin:0 auto 2px;
  background:url('/images/all/titulo-bruxa11.webp') center/contain no-repeat;
  text-indent:-9999px;overflow:hidden;white-space:nowrap;line-height:0
}
.landing .lp-title br,.landing .lp-title span{display:none}

/* ---------- cabeçalho com fundo escuro, como o do concorrente ---------- */
.landing .app-header{
  background:#000!important;border-bottom:1px solid #251a48;
  padding-top:10px!important;padding-bottom:10px!important
}

/* ---------- hero compacto: tudo até "Já tenho conta" sem rolar ---------- */
.landing .lp-hero-banner{max-width:min(280px,27vh)!important;margin-top:14px!important;margin-bottom:14px!important}
.landing .lp-ctas{margin-bottom:10px!important}

/* ---------- CTA principal: verde mais fechado, texto branco ---------- */
.landing .lp-btn-primary{
  background:linear-gradient(135deg,#12b76a,#0a8f52)!important;color:#fff!important;
  box-shadow:0 6px 18px #0a8f5259!important
}
.landing .lp-btn-primary:hover{background:linear-gradient(135deg,#0fa35e,#087a46)!important}

/* ---------- barra promocional: discreta, escura ---------- */
.bbx-promo{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:center;
  gap:12px;padding:9px 14px;font-size:.8rem;font-weight:600;
  color:var(--text,#eef1ff);background:#000;border-bottom:1px solid #251a48}
.bbx-promo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bbx-promo b{color:var(--gold,#ffd166);font-weight:700}
.bbx-promo button{flex:none;border:none;border-radius:8px;padding:6px 15px;font:inherit;font-size:.76rem;
  font-weight:700;color:#fff;background:var(--primary,#7c5cff);cursor:pointer}
.bbx-promo button:hover{background:var(--primary-2,#5a3df5)}
body.bbx-has-promo .landing .app-header{top:var(--bbx-promo-h,42px)}
@media (max-width:430px){
  .bbx-promo{gap:9px;padding:8px 10px;font-size:.73rem}
  .bbx-promo button{padding:5px 12px;font-size:.71rem}
}

/* ---------- faixa de contadores ---------- */
.bbx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px auto 4px;padding:0 16px;max-width:980px}
.bbx-stat{background:var(--surface,#1d1240);border:1px solid var(--border,#3b2a70);border-radius:12px;
  padding:12px 6px;text-align:center}
.bbx-stat b{display:block;font-size:1.05rem;font-weight:800;line-height:1.15;color:var(--gold,#ffd166)}
.bbx-stat hr{width:26px;height:2px;margin:7px auto 6px;border:none;border-radius:2px;background:var(--border,#3b2a70)}
.bbx-stat small{display:block;font-size:.58rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-dim,#9aa3c7);line-height:1.3}

/* ---------- carrossel de banners ---------- */
.bbx-carousel{position:relative;max-width:980px;margin:18px auto;padding:0 16px}
.bbx-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.bbx-track::-webkit-scrollbar{display:none}
.bbx-track img{flex:0 0 100%;scroll-snap-align:center;border-radius:14px;display:block;width:100%;
  aspect-ratio:3/1;object-fit:cover;cursor:pointer;box-shadow:0 6px 20px #0006}
.bbx-dots{display:flex;justify-content:center;gap:6px;margin-top:9px}
.bbx-dots i{width:6px;height:6px;border-radius:50%;background:var(--border,#3b2a70);transition:.2s}
.bbx-dots i.on{width:18px;border-radius:3px;background:var(--gold,#ffd166)}

/* ---------- saques recentes (lista, no estilo do concorrente) ---------- */
.bbx-saques{max-width:640px;margin:26px auto;padding:0 16px}
.bbx-saques-head{display:flex;align-items:center;gap:9px;margin-bottom:12px;
  font-size:.86rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text,#eef1ff)}
.bbx-saques-head i{display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;font:800 .78rem/1 system-ui,-apple-system,'Segoe UI',sans-serif;font-style:normal;
  color:#2a1a05;text-indent:.02em;background:linear-gradient(135deg,#ffd166,#ffb547)}
.bbx-saques-list{display:flex;flex-direction:column;gap:9px;max-height:250px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.bbx-saque{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;
  background:var(--surface,#1d1240);border:1px solid var(--border,#3b2a70)}
.bbx-saque .av{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;font:800 .9rem/1 system-ui,-apple-system,'Segoe UI',sans-serif;color:#2a1a05;
  text-indent:.02em;background:linear-gradient(135deg,#ffd166,#ffb547)}
.bbx-saque .txt{flex:1;min-width:0}
.bbx-saque .txt p{margin:0;font-size:.84rem;font-weight:700;color:var(--text,#eef1ff);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bbx-saque .txt small{font-size:.68rem;color:var(--text-dim,#9aa3c7)}
.bbx-saque .val{flex:none;white-space:nowrap;font-size:.88rem;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--gold,#ffd166)}

/* ---------- ordem das seções: COMO JOGAR sobe, contadores descem ---------- */
.landing > main{display:flex;flex-direction:column}
.landing > main > .lp-hero{order:1}
.landing > main > .lp-howto{order:2}
.landing > main > .bbx-stats{order:3}
.landing > main > .bbx-carousel{order:4}
.landing > main > .bbx-saques{order:5}
.landing > main > .lp-final{order:6}
/* depoimentos fora: eram declarações fictícias e o espaço vai para os saques */
.landing > main > .lp-section-reviews{display:none}

/* ---------- saques recentes com rolagem contínua ---------- */
.bbx-saques-list{
  position:relative;height:290px;max-height:none;overflow:hidden;display:block;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 84%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 84%,transparent)
}
.bbx-saques-roll{display:flex;flex-direction:column;gap:9px;animation:bbx-down 26s linear infinite}
.bbx-saques-list:hover .bbx-saques-roll{animation-play-state:paused}
@keyframes bbx-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.bbx-saques-roll{animation:none}}

/* ---------- tela de transição entre páginas ---------- */
.bbx-splash{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:#000;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s
}
.bbx-splash.on{opacity:1;visibility:visible}
.bbx-splash::before{
  content:'';position:absolute;width:min(86vw,440px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#7c5cff3d,transparent 66%);animation:bbx-glow 1.7s ease-in-out infinite
}
.bbx-splash img{
  position:relative;width:min(58vw,250px);height:auto;
  filter:drop-shadow(0 8px 26px #7c5cff5c);
  animation:bbx-pop .48s cubic-bezier(.2,1.45,.4,1) both,bbx-bob 1.9s .48s ease-in-out infinite
}
@keyframes bbx-pop{from{opacity:0;transform:scale(.62) translateY(16px)}to{opacity:1;transform:none}}
@keyframes bbx-bob{50%{transform:translateY(-9px) scale(1.035)}}
@keyframes bbx-glow{50%{transform:scale(1.2);opacity:.6}}
@media (prefers-reduced-motion:reduce){
  .bbx-splash img,.bbx-splash::before,}

/* ---------- tela de parabéns: chuva de moedas ---------- */
.bbx-rain{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;border-radius:inherit}
.bbx-coin{
  position:absolute;top:-42px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font:800 .8rem/1 system-ui,-apple-system,'Segoe UI',sans-serif;color:#7a5205;
  background:radial-gradient(circle at 34% 30%,#fff3c4,#ffd166 46%,#e0a12c 100%);
  box-shadow:0 0 10px #ffd16688,inset 0 -2px 4px #b8801f66;
  animation:bbx-fall linear forwards
}
@keyframes bbx-fall{
  0%{transform:translateY(0) rotate(0) scale(.85);opacity:0}
  10%{opacity:1}
  85%{opacity:1}
  100%{transform:translateY(var(--dist,420px)) rotate(var(--spin,540deg)) scale(1);opacity:0}
}
.result-modal--win h2,.result-modal--win .res-amount,.result-modal--win [class*=amount]{position:relative;z-index:3}
@media (prefers-reduced-motion:reduce){.bbx-coin{animation:none;display:none}}

/* ---------- tela de parabéns v4: banner em cima, card embaixo, sem molduras ---------- */
.modal:has(.result-modal--win){
  overflow:visible!important;background:transparent!important;border:none!important;
  box-shadow:none!important;padding:0!important
}
.result-modal--win{
  position:relative;overflow:visible;margin:0;padding:0;
  background:transparent!important;border:none!important;box-shadow:none!important
}
.result-modal--win::before{display:none!important}
/* o card é desenhado por um pseudo-elemento que começa logo abaixo do banner */
.result-modal--win::after{
  content:'';position:absolute;left:0;right:0;top:var(--bbx-banner-h,150px);bottom:0;z-index:0;
  border-radius:20px;
  background:radial-gradient(120% 80% at 50% 0%,#33207a 0%,#1d1240 50%,#140c2e 100%);
  box-shadow:0 22px 60px #000b
}
.result-modal--win > *{position:relative;z-index:2}

/* banner: bloco próprio, mesma largura do card, só sombra suave */
.result-modal--win .result-win-banner{
  margin:0 0 12px!important;border-radius:16px;overflow:hidden;
  box-shadow:0 14px 34px #000a;
  animation:bbx-banner-in .55s cubic-bezier(.2,1.3,.4,1) both
}
.result-modal--win .result-win-banner img{display:block;width:100%;height:auto;transform:none}
@keyframes bbx-banner-in{from{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:none}}

/* raios e moedas recortados só na área do card */
.result-modal--win .bbx-glow{
  position:absolute;left:0;right:0;top:var(--bbx-banner-h,150px);bottom:0;z-index:1!important;
  overflow:hidden;border-radius:20px;pointer-events:none
}
.result-modal--win .bbx-glow::before{
  content:'';position:absolute;left:50%;top:50%;width:190%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,#ffd16600 0deg 9deg,#ffd16616 9deg 14deg,#ffd16600 14deg 24deg);
  -webkit-mask-image:radial-gradient(circle,#000 0%,transparent 58%);mask-image:radial-gradient(circle,#000 0%,transparent 58%);
  animation:bbx-rays 22s linear infinite
}
@keyframes bbx-rays{to{transform:translate(-50%,-50%) rotate(360deg)}}
.result-modal--win .bbx-rain{top:var(--bbx-banner-h,150px)!important;z-index:1!important;border-radius:20px}

/* conteúdo do card */
.result-modal--win h2{
  margin:0 22px 6px;padding-top:22px;font-size:1.55rem;line-height:1.1;font-weight:900;letter-spacing:-.01em;
  background:linear-gradient(100deg,#fff 0%,#fff 38%,#ffd166 50%,#fff 62%,#fff 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:bbx-shimmer 2.6s linear .4s infinite
}
@keyframes bbx-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.result-modal--win .win-note-top{
  margin:6px 22px 0;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#b9a9ff
}
.result-modal--win .result-value.win{
  display:inline-block;margin:4px 22px 2px;font-size:clamp(2.6rem,11vw,3.4rem);line-height:1;font-weight:900;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff3c4 0%,#ffd166 45%,#ffb547 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #a8650a) drop-shadow(0 0 18px #ffd16680);
  animation:bbx-valor-pop .7s cubic-bezier(.2,1.5,.4,1) both,bbx-valor-pulse 2.4s 1s ease-in-out infinite
}
@keyframes bbx-valor-pop{from{opacity:0;transform:scale(.4) translateY(10px)}to{opacity:1;transform:none}}
@keyframes bbx-valor-pulse{50%{filter:drop-shadow(0 3px 0 #a8650a) drop-shadow(0 0 30px #ffd166c0)}}
.result-modal--win .win-note{margin:6px 22px 16px;font-size:.84rem;color:#c9c3e6}
.result-modal--win .win-actions{margin:0 22px 22px}
.result-modal--win .win-actions button,
.result-modal--win .win-actions .btn{
  width:100%;padding:15px 18px;border-radius:14px;border:none;
  font-size:1rem;font-weight:800;letter-spacing:.04em;color:#fff!important;
  background:linear-gradient(135deg,#12b76a,#0a8f52)!important;
  box-shadow:0 8px 24px #0a8f5266,inset 0 1px 0 #ffffff33!important;
  animation:bbx-cta-pulse 1.8s ease-in-out infinite
}
@keyframes bbx-cta-pulse{50%{transform:scale(1.025);box-shadow:0 10px 30px #12b76a80,inset 0 1px 0 #ffffff33}}
@media (prefers-reduced-motion:reduce){
  .result-modal--win .bbx-glow::before,.result-modal--win h2,.result-modal--win .result-value.win,.result-modal--win .win-actions button{animation:none}
}

/* ---------- aviso do tutorial (bolhas passaram da linha) ---------- */
.bbx-toast{
  position:fixed;left:50%;top:18%;z-index:8000;transform:translate(-50%,-8px);
  max-width:min(88vw,340px);padding:12px 16px;border-radius:14px;text-align:center;
  background:#1d1240f2;border:1px solid #ff5470aa;color:#eef1ff;font-size:.86rem;line-height:1.35;
  box-shadow:0 12px 36px #000a,0 0 24px #ff547055;opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease
}
.bbx-toast.on{opacity:1;transform:translate(-50%,0)}
.bbx-toast b{display:block;color:#ff8aa0;font-size:.95rem;margin-bottom:2px}

/* ---------- HUD do tutorial: valores etiquetados, "pular" fora do caminho ---------- */
.tutorial-game-page{position:relative}
.tutorial-game-page .bb-hud{padding-bottom:30px}
.tutorial-game-page .bb-hud-top{align-items:flex-end}
.tutorial-game-page .bb-hud-corner{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.05;
  padding:4px 11px;border-radius:12px;background:#08122a55;border:1px solid #ffffff14
}
.tutorial-game-page .bb-hud-corner--right{align-items:flex-end}
.tutorial-game-page .bb-hud-corner::before,
.tutorial-game-page .bb-hud-score::before{
  display:block;font-size:.54rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#b9a9ff;line-height:1;margin-bottom:2px
}
.tutorial-game-page .bb-hud-corner::before{content:'Entrada'}
.tutorial-game-page .bb-hud-corner--right::before{content:'Meta'}
.tutorial-game-page .bb-hud-score{text-align:center;line-height:1}
.tutorial-game-page .bb-hud-score::before{content:'Acumulado';text-align:center}
.tutorial-game-page .bb-hud-progress{margin-top:8px}

.tutorial-game-page .tutorial-skip-btn{
  position:absolute!important;top:var(--bbx-skip-top,74px)!important;right:16px!important;bottom:auto!important;
  height:22px;padding:0 11px!important;font-size:.7rem!important;font-weight:700;letter-spacing:.02em;
  background:#0a062059!important;border:1px solid #ffffff40!important;
  backdrop-filter:blur(4px)
}

/* fundo escuro e desfocado atrás da tela de vitória: isola a comemoração do tabuleiro */
.modal-overlay:has(.result-modal--win){
  background:#05040cd9!important;-webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important;
  padding-top:24px!important
}

/* ---------- HUD do jogo: sem o vão de 58px no topo, valores etiquetados como no tutorial ---------- */
.game-page.game-page--playing{padding-top:calc(env(safe-area-inset-top,0px) + 10px)!important}
.game-page--playing .bb-hud{padding:4px 4px 8px!important;margin-bottom:6px!important}
.game-page--playing .bb-hud-top{align-items:flex-end}
.game-page--playing .bb-hud-corner{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.05;
  padding:4px 11px;border-radius:12px;background:#08122a55;border:1px solid #ffffff14
}
.game-page--playing .bb-hud-corner--right{align-items:flex-end}
.game-page--playing .bb-hud-corner::before,
.game-page--playing .bb-hud-score::before{
  display:block;font-size:.54rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#b9a9ff;line-height:1;margin-bottom:2px
}
.game-page--playing .bb-hud-corner::before{content:'Entrada'}
.game-page--playing .bb-hud-corner--right::before{content:'Meta'}
.game-page--playing .bb-hud-score{text-align:center;line-height:1}
.game-page--playing .bb-hud-score::before{content:'Acumulado';text-align:center}
/* a coroa fica ao lado do valor, não em cima dele */
.game-page--playing .bb-hud-corner .bb-hud-icon{position:absolute;right:8px;top:6px;width:14px;height:14px;opacity:.85}
.game-page--playing .bb-hud-corner:not(.bb-hud-corner--right){position:relative;padding-right:26px}
.game-page--playing .bb-hud-progress{margin-top:8px}

/* ---------- tabuleiro mais alto (linha na fileira 14): proporção acompanha o canvas novo (360x615) ---------- */
.game-page--playing .bubble-stage{aspect-ratio:360/615!important;width:min(100cqw,58.5366cqh)!important;height:auto!important}
.game-page--playing .bubble-stage .bubble-canvas{aspect-ratio:360/615!important;width:100%!important;height:auto!important;max-height:none!important}

/* ---------- barra de progresso do HUD: nítida, com preenchimento dourado→verde ---------- */
.game-page--playing .bb-hud-progress,.tutorial-game-page .bb-hud-progress{
  height:12px!important;width:min(240px,64%)!important;
  background:#070b1c!important;border:1px solid #ffffff2e!important;
  box-shadow:inset 0 2px 4px #000c,0 0 0 3px #08122a66!important
}
.game-page--playing .bb-hud-progress-fill,.tutorial-game-page .bb-hud-progress-fill{
  background:linear-gradient(90deg,#ffb547 0%,#ffd166 45%,#00e5a8 100%)!important;
  box-shadow:0 0 10px #ffd166aa,inset 0 1px 0 #ffffff66!important;
  min-width:6px
}
.game-page--playing .bb-hud-progress-fill::after,.tutorial-game-page .bb-hud-progress-fill::after{
  content:'';position:absolute;top:1px;bottom:1px;left:0;right:0;border-radius:999px;
  background:linear-gradient(180deg,#ffffff40,transparent 55%);pointer-events:none
}
.game-page--playing .bb-hud-progress-fill,.tutorial-game-page .bb-hud-progress-fill{position:relative}

/* ---------- tela de derrota: calma, clara, sem drama ---------- */
.modal:has(.result-modal--lose){
  background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;overflow:visible!important
}
.modal-overlay:has(.result-modal--lose){background:#05040cd9!important;-webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important}
.result-modal--lose{
  position:relative;overflow:hidden;padding:0 22px 22px;border-radius:20px;
  background:radial-gradient(120% 80% at 50% 0%,#2b1a5e 0%,#1a1040 50%,#120b28 100%);
  box-shadow:0 22px 60px #000b
}
.result-modal--lose .bbx-lose-banner{display:block;margin:0 -22px 14px;border-radius:20px 20px 0 0;overflow:hidden}
.result-modal--lose .bbx-lose-banner img{display:block;width:100%;height:auto}
.result-modal--lose .lose-badge{
  width:72px;height:72px;margin:22px auto 8px;display:grid;place-items:center;border-radius:50%;
  color:#ff8aa0;background:radial-gradient(circle at 35% 30%,#ff547033,#ff547010 60%,transparent 70%);
  box-shadow:0 0 0 2px #ff547055,0 0 28px #ff547040
}
.result-modal--lose .bbx-lose-banner ~ .lose-badge{display:none}
.result-modal--lose .lose-badge svg{width:40px;height:40px}
.result-modal--lose h2{margin:6px 0 4px;font-size:1.45rem;line-height:1.15;font-weight:800;color:#fff}
.result-modal--lose .result-value.lose{
  margin:2px 0 8px;font-size:2.1rem;font-weight:900;letter-spacing:-.02em;color:#ff8aa0;text-shadow:0 2px 14px #ff547055
}
.result-modal--lose .result-note{
  margin:0 0 18px;padding:10px 12px;border-radius:12px;font-size:.84rem;line-height:1.4;color:#c9c3e6;
  background:#ffffff0a;border:1px solid #ffffff12
}
.result-modal--lose .result-note b{color:#ffd166;font-weight:800}
.result-modal--lose .result-actions{display:flex;flex-direction:column;gap:10px}
.result-modal--lose .result-actions .btn,.result-modal--lose .result-actions button{width:100%;border-radius:14px;font-weight:800;letter-spacing:.03em}
.result-modal--lose .result-actions .btn-accent,.result-modal--lose .result-actions button:first-child{
  color:#fff!important;background:linear-gradient(135deg,#12b76a,#0a8f52)!important;
  box-shadow:0 8px 24px #0a8f5255,inset 0 1px 0 #ffffff33!important;padding:15px 18px
}
.result-modal--lose .result-actions .btn-ghost,.result-modal--lose .result-actions button:last-child{
  color:#c9c3e6!important;background:#ffffff0a!important;border:1px solid #ffffff1f!important;padding:13px 18px
}

/* ---------- "Nova partida": de formulário para momento de pré-jogo ---------- */
.modal:has(.replay-picker-modal){
  background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;overflow:visible!important
}
.modal-overlay:has(.replay-picker-modal){background:#05040cd9!important;-webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important}
.replay-picker-modal{
  position:relative;overflow:hidden;padding:0 20px 20px;border-radius:20px;
  background:radial-gradient(120% 80% at 50% 0%,#33207a 0%,#1d1240 50%,#140c2e 100%);
  box-shadow:0 22px 60px #000b
}
/* banner: o arquivo painel.png tem erro de texto ("GANHA"); usa o título oficial sobre o fundo do site */
.replay-picker-modal .replay-picker-banner{
  margin:0 -20px 14px;aspect-ratio:3/1;border-radius:20px 20px 0 0;overflow:hidden;
  background:
    url('/images/all/titulo-bruxa11.webp') center 54%/auto 82% no-repeat,
    radial-gradient(90% 120% at 50% 100%,#7c5cff66,transparent 60%),
    url('/images/all/backgroundpc-dark.png') center/cover no-repeat,#1d1240
}
.replay-picker-modal .replay-picker-banner img{display:none}
.replay-picker-modal h2{margin:0 0 2px!important;font-size:1.35rem;font-weight:800;color:#fff;text-align:center}
.replay-picker-modal .panel-label{
  text-align:center;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#b9a9ff;margin:0 0 10px
}
.replay-picker-modal .entry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.replay-picker-modal .entry-chip{
  position:relative;padding:12px 6px;border-radius:12px;font-size:.92rem;font-weight:800;color:#eef1ff;
  background:linear-gradient(180deg,#2a1b5c,#1b1140);border:1px solid #ffffff1a;
  box-shadow:inset 0 1px 0 #ffffff1a,0 3px 0 #0d0722;transition:transform .12s,box-shadow .12s,background .12s
}
.replay-picker-modal .entry-chip:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #ffffff1a,0 1px 0 #0d0722}
.replay-picker-modal .entry-chip.active{
  color:#2a1a05;background:linear-gradient(180deg,#ffe08a,#ffb547);border-color:#ffd166;
  box-shadow:0 0 0 2px #ffd16655,0 3px 0 #a8650a,0 0 18px #ffd16655;transform:scale(1.04)
}
.replay-picker-modal .money-input{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:0 14px;border-radius:12px;
  background:#0d081e;border:1px solid #ffffff1a
}
.replay-picker-modal .money-input .prefix{color:#b9a9ff;font-weight:700}
.replay-picker-modal .money-input input{flex:1;background:0 0;border:none;color:#fff;font-weight:700;font-size:1rem;padding:12px 0;outline:none}
.replay-picker-modal .reward-box{
  position:relative;margin-bottom:14px;padding:12px 12px 13px;border-radius:14px;text-align:center;
  background:linear-gradient(180deg,#1b2f5a,#0f1c3d);border:1px solid #00c2ff55;box-shadow:inset 0 1px 0 #ffffff14,0 0 22px #00c2ff22
}
.replay-picker-modal .reward-box .label{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8fd8ff}
.replay-picker-modal .reward-box .value{
  margin-top:2px;font-size:1.9rem;font-weight:900;letter-spacing:-.01em;line-height:1.1;
  background:linear-gradient(180deg,#fff3c4,#ffd166 50%,#ffb547);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #a8650a) drop-shadow(0 0 12px #ffd16660)
}
.replay-picker-modal .reward-box::after{
  content:'meta para resgatar';display:block;margin-top:3px;font-size:.66rem;color:#9fc4e6
}
.replay-picker-modal > div:last-child{display:flex;flex-direction:column!important;gap:8px!important}
.replay-picker-modal .panel-cta{
  margin-top:0!important;padding:15px!important;border-radius:14px;font-size:1rem;font-weight:800;letter-spacing:.04em;
  color:#fff!important;background:linear-gradient(135deg,#12b76a,#0a8f52)!important;border:none;
  box-shadow:0 8px 24px #0a8f5255,inset 0 1px 0 #ffffff33!important;animation:bbx-cta-pulse 1.8s ease-in-out infinite
}
.replay-picker-modal .panel-cta:disabled{animation:none;opacity:.55}
.replay-picker-modal .btn-ghost{width:100%;padding:12px;border-radius:14px;color:#c9c3e6!important;background:#ffffff0a!important;border:1px solid #ffffff1f!important}

/* ============================================================
   CPF no cadastro
   ============================================================ */
.bbx-cpf-erro{
  margin:-6px 0 10px;padding:8px 12px;border-radius:10px;
  background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);
  color:#fca5a5;font-size:12.5px;line-height:1.4;
}
input.bbx-cpf--ruim{border-color:rgba(239,68,68,.55)!important;}

/* ============================================================
   Tela de depósito remodelada
   ============================================================ */
.bbx-dep-aviso{
  margin:14px 16px 0;padding:12px 14px;border-radius:14px;text-align:center;
  background:linear-gradient(135deg,rgba(139,92,246,.20),rgba(59,130,246,.14));
  border:1px solid rgba(139,92,246,.38);
  color:#fde68a;font-size:13.5px;font-weight:700;line-height:1.4;
  box-shadow:0 8px 26px rgba(139,92,246,.18);
}
.bbx-dep-head{text-align:center;margin:2px 0 16px;}
.bbx-dep-title{
  font-size:20px;font-weight:800;letter-spacing:-.02em;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:9px;
}
.bbx-dep-ico{color:#a78bfa;font-size:17px;}
.bbx-dep-sub{margin-top:4px;font-size:13.5px;color:rgba(255,255,255,.72);}
.bbx-dep-limite{
  margin-top:3px;font-size:12px;color:rgba(255,255,255,.42);
  font-variant-numeric:tabular-nums;
}

/* o valor agora vem primeiro e ganha destaque */
.bbx-dep .money-input{
  margin:0 0 18px!important;padding:4px 6px;
  border-radius:14px;border:1px solid rgba(255,255,255,.14);
  background:rgba(8,6,20,.6);
}
.bbx-dep .money-input:focus-within{
  border-color:rgba(167,139,250,.6);
  box-shadow:0 0 0 4px rgba(139,92,246,.14);
}
.bbx-dep .money-input input{font-size:17px;font-weight:600;}
.bbx-dep .panel-label{
  margin-bottom:9px;font-size:12.5px;font-weight:700;
  color:rgba(255,255,255,.66);letter-spacing:.01em;
}
.bbx-dep .quick-grid{gap:10px;}
.bbx-dep .quick-value{
  border-radius:14px;font-weight:800;font-size:15px;padding:16px 8px;
}
.bbx-dep .sheet-cta{
  text-transform:uppercase;letter-spacing:.04em;font-weight:800;
}
@media(max-width:420px){
  .bbx-dep-title{font-size:18px;}
  .bbx-dep-aviso{font-size:12.5px;}
}

/* ============================================================
   Tipografia — Nunito no site inteiro (o SPA lê --font)
   ============================================================ */
:root{
  --font:'Nunito','Segoe UI',system-ui,-apple-system,Roboto,sans-serif!important;
}
body,button,input,select,textarea{
  font-family:'Nunito','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.sheet-cta,.quick-value,.panel-label,.bbx-dep-title{
  font-weight:800;letter-spacing:-.01em;
}
.quick-value,.money-input input,.tx-amount,.bbx-dep-limite{
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   Barra de contagem regressiva do bônus
   ============================================================ */
.bbx-timer{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  margin:0 0 14px;padding:13px 40px 15px;
  background:linear-gradient(180deg,#b3161d,#8d0f16);
  border-bottom:1px solid rgba(0,0,0,.35);
  box-shadow:0 10px 28px rgba(179,22,29,.28);
}
.bbx-timer-lb{
  font-size:12.5px;font-weight:900;letter-spacing:.06em;color:#fff;
  text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.bbx-timer-clock{display:flex;align-items:center;gap:7px;}
.bbx-timer-clock b{
  min-width:52px;padding:7px 6px;border-radius:11px;background:#fff;color:#111827;
  font-size:24px;font-weight:900;line-height:1;text-align:center;
  font-variant-numeric:tabular-nums;box-shadow:0 3px 0 rgba(0,0,0,.18);
}
.bbx-timer-clock i{color:#fff;font-style:normal;font-size:20px;font-weight:900;opacity:.9;}
.bbx-timer-x{
  position:absolute;top:10px;right:12px;width:28px;height:28px;border:0;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:15px;line-height:1;
}
.bbx-timer-x:hover{background:rgba(255,255,255,.26);}
.bbx-timer--fim{background:linear-gradient(180deg,#4b5563,#374151);box-shadow:none;}
@media(max-width:400px){
  .bbx-timer-clock b{min-width:44px;font-size:20px;}
}

/* ============================================================
   Depósito — acabamento (flat, sombras, animações)
   ============================================================ */
@keyframes bbxUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes bbxShine{0%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(240%) skewX(-18deg)}}
@keyframes bbxPulse{0%,100%{box-shadow:0 0 0 0 rgba(250,204,21,.35)}55%{box-shadow:0 0 0 7px rgba(250,204,21,0)}}
@keyframes bbxTick{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.sheet.bbx-dep{padding-bottom:18px;}
.sheet.bbx-dep>*{animation:bbxUp .38s cubic-bezier(.22,1,.36,1) both;}
.sheet.bbx-dep>*:nth-child(2){animation-delay:.04s}
.sheet.bbx-dep>*:nth-child(3){animation-delay:.08s}
.sheet.bbx-dep>*:nth-child(4){animation-delay:.12s}
.sheet.bbx-dep>*:nth-child(5){animation-delay:.16s}
.sheet.bbx-dep>*:nth-child(6){animation-delay:.2s}

/* a seção deixa de ser "caixa dentro da caixa" */
.sheet.bbx-dep .sheet-section{
  border:0;background:transparent;padding:4px 2px 0;margin-bottom:8px;
}

/* cronômetro como cartão */
.sheet.bbx-dep .bbx-timer{
  margin:14px 16px 0;border-radius:16px;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 30px rgba(179,22,29,.35),inset 0 1px 0 rgba(255,255,255,.12);
}
.sheet.bbx-dep .bbx-timer-clock b{
  border-radius:12px;box-shadow:0 4px 0 rgba(0,0,0,.22),0 8px 18px rgba(0,0,0,.25);
  animation:bbxTick 1s ease-in-out infinite;
}
.sheet.bbx-dep .bbx-timer-clock b:nth-child(3){animation-delay:.1s}
.sheet.bbx-dep .bbx-timer-clock b:nth-child(5){animation-delay:.2s}

/* faixa de aviso */
.sheet.bbx-dep .bbx-dep-aviso{
  margin:14px 16px 4px;border-radius:14px;padding:13px 16px;
  background:#15102b;border:1.5px solid #f5c518;
  color:#fde047;font-weight:800;font-size:14px;
  box-shadow:0 10px 28px rgba(245,197,24,.12),inset 0 1px 0 rgba(255,255,255,.06);
}

/* cabeçalho */
.sheet.bbx-dep .bbx-dep-head{margin:14px 0 18px;}
.sheet.bbx-dep .bbx-dep-title{font-size:22px;font-weight:900;}
.sheet.bbx-dep .bbx-dep-sub{font-size:14px;color:rgba(255,255,255,.78);}
.sheet.bbx-dep .bbx-dep-limite{font-size:12.5px;color:rgba(255,255,255,.45);}

/* campo de valor */
.sheet.bbx-dep .money-input{
  margin:0 0 20px!important;padding:0 6px 0 10px;min-height:60px;
  border-radius:16px;border:1.5px solid rgba(255,255,255,.12);
  background:#0e0b1f;box-shadow:inset 0 2px 8px rgba(0,0,0,.35);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.sheet.bbx-dep .money-input:focus-within{
  border-color:#a78bfa;box-shadow:0 0 0 4px rgba(139,92,246,.18),inset 0 2px 8px rgba(0,0,0,.35);
}
.sheet.bbx-dep .money-input .prefix{color:#a78bfa;font-weight:900;font-size:16px;}
.sheet.bbx-dep .money-input input{font-size:18px;font-weight:700;color:#fff;}
.sheet.bbx-dep .money-input input::placeholder{color:rgba(255,255,255,.35);font-weight:600;}

/* valores rápidos — flat, sem faixa dourada */
.sheet.bbx-dep .panel-label{margin:0 0 12px;font-size:13px;font-weight:800;color:rgba(255,255,255,.72);}
.sheet.bbx-dep .quick-grid{gap:12px;}
.sheet.bbx-dep .quick-value{
  background:#141130!important;background-image:none!important;
  border:1.5px solid rgba(255,255,255,.12)!important;border-radius:16px;
  padding:19px 8px 17px;font-size:16px;font-weight:900;color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s,border-color .16s,background .16s;
  animation:none!important;overflow:visible;
}
.sheet.bbx-dep .quick-value:after{display:none!important;}
.sheet.bbx-dep .quick-value:hover{
  transform:translateY(-2px);border-color:rgba(167,139,250,.55)!important;
  box-shadow:0 12px 24px rgba(0,0,0,.35),0 0 0 3px rgba(139,92,246,.12);
}
.sheet.bbx-dep .quick-value:active{transform:translateY(0) scale(.97);}
.sheet.bbx-dep .quick-value.bonus-glow{
  border-color:#f5c518!important;
  box-shadow:0 6px 16px rgba(0,0,0,.28),0 0 18px rgba(245,197,24,.18);
}
.sheet.bbx-dep .quick-value.active{
  background:linear-gradient(160deg,#7c3aed,#5b21b6)!important;
  border-color:#a78bfa!important;
  box-shadow:0 12px 28px rgba(124,58,237,.45),inset 0 1px 0 rgba(255,255,255,.2);
  transform:translateY(-2px);
}
.sheet.bbx-dep .quick-badge{
  top:-11px;padding:4px 11px;font-size:10.5px;font-weight:900;letter-spacing:.04em;
  color:#1a1400!important;background:#facc15!important;
  box-shadow:0 4px 12px rgba(250,204,21,.35);animation:bbxPulse 2.2s ease-out infinite;
}

/* cupom — só o campo, como no modelo */
.sheet.bbx-dep .cupom-section{margin:0 0 14px;padding:0;}
.sheet.bbx-dep .cupom-row{margin:0;}
.sheet.bbx-dep .cupom-row input{
  min-height:54px;border-radius:14px;border:1.5px solid rgba(255,255,255,.12);
  background:#0e0b1f;text-transform:none;font-size:14.5px;font-weight:600;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.35);
}
.sheet.bbx-dep .cupom-row input::placeholder{color:rgba(255,255,255,.35);text-transform:none;}
.sheet.bbx-dep .cupom-row input:focus{border-color:#a78bfa;box-shadow:0 0 0 4px rgba(139,92,246,.18);}
.sheet.bbx-dep .cupom-row button,
.sheet.bbx-dep .cupom-section p,
.sheet.bbx-dep .cupom-section .muted,
.sheet.bbx-dep .cupom-section small{display:none!important;}

/* botão principal — dourado, sombra, brilho passando */
.sheet.bbx-dep .sheet-cta{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#fde047 0%,#facc15 55%,#eab308 100%);
  color:#1a1400;border-radius:16px;padding:19px;font-size:17px;font-weight:900;
  letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 10px 0 #b45309,0 18px 34px rgba(250,204,21,.28),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .14s cubic-bezier(.22,1,.36,1),box-shadow .14s,filter .14s;
}
.sheet.bbx-dep .sheet-cta:before{
  content:'';position:absolute;top:0;bottom:0;width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:bbxShine 2.8s ease-in-out infinite;pointer-events:none;
}
.sheet.bbx-dep .sheet-cta:hover:not(:disabled){
  transform:translateY(-2px);filter:brightness(1.04);
  box-shadow:0 12px 0 #b45309,0 24px 40px rgba(250,204,21,.36),inset 0 1px 0 rgba(255,255,255,.55);
}
.sheet.bbx-dep .sheet-cta:active:not(:disabled){
  transform:translateY(6px);
  box-shadow:0 4px 0 #b45309,0 10px 20px rgba(250,204,21,.25),inset 0 1px 0 rgba(255,255,255,.55);
}
.sheet.bbx-dep .sheet-cta:disabled{
  opacity:1;filter:saturate(.35) brightness(.75);cursor:not-allowed;
  box-shadow:0 6px 0 #6b4a0c;
}
.sheet.bbx-dep .sheet-cta:disabled:before{display:none;}

/* botão de fechar e alça do sheet */
.sheet.bbx-dep .sheet-close{
  width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(0,0,0,.4);transition:transform .15s,background .15s;
}
.sheet.bbx-dep .sheet-close:hover{transform:rotate(90deg);background:rgba(239,68,68,.85);}

@media(prefers-reduced-motion:reduce){
  .sheet.bbx-dep *{animation:none!important;transition:none!important;}
}

/* ============================================================
   Identidade unificada — botões, campos, cartões (site inteiro)
   ============================================================ */

/* ---- botão principal verde (depósito, lobby, saque) ---- */
.sheet.bbx-dep .sheet-cta,
.sheet-cta,
.panel-cta{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#34d399 0%,#22c55e 50%,#16a34a 100%)!important;
  color:#fff!important;border:0;border-radius:16px;padding:19px;
  font-size:17px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  box-shadow:0 9px 0 #15803d,0 18px 34px rgba(34,197,94,.32),inset 0 1px 0 rgba(255,255,255,.35)!important;
  transition:transform .14s cubic-bezier(.22,1,.36,1),box-shadow .14s,filter .14s!important;
}
.sheet-cta:before,.panel-cta:before{
  content:'';position:absolute;top:0;bottom:0;width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:bbxShine 2.8s ease-in-out infinite;pointer-events:none;
}
.sheet-cta:hover:not(:disabled),.panel-cta:hover:not(:disabled){
  transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:0 11px 0 #15803d,0 24px 40px rgba(34,197,94,.4),inset 0 1px 0 rgba(255,255,255,.35)!important;
}
.sheet-cta:active:not(:disabled),.panel-cta:active:not(:disabled){
  transform:translateY(6px);
  box-shadow:0 3px 0 #15803d,0 10px 20px rgba(34,197,94,.28),inset 0 1px 0 rgba(255,255,255,.35)!important;
}
.sheet-cta:disabled,.panel-cta:disabled{
  opacity:1!important;filter:saturate(.3) brightness(.7);cursor:not-allowed;
  box-shadow:0 6px 0 #14532d!important;
}
.sheet-cta:disabled:before,.panel-cta:disabled:before{display:none;}
/* o dourado só ficou no cronômetro/etiquetas; o botão é verde */
.sheet.bbx-dep .sheet-cta:disabled{box-shadow:0 6px 0 #14532d!important;}

/* ---- botões de valor: entrada do jogo = mesmo desenho do depósito ---- */
.entry-grid{gap:12px!important;}
.entry-chip{
  background:#141130!important;background-image:none!important;
  border:1.5px solid rgba(255,255,255,.12)!important;border-radius:16px!important;
  padding:17px 8px!important;font-size:16px!important;font-weight:900!important;color:#fff!important;
  box-shadow:0 6px 16px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s,border-color .16s,background .16s!important;
  font-variant-numeric:tabular-nums;
}
.entry-chip:hover{
  transform:translateY(-2px);border-color:rgba(167,139,250,.55)!important;
  box-shadow:0 12px 24px rgba(0,0,0,.35),0 0 0 3px rgba(139,92,246,.12);
}
.entry-chip:active{transform:translateY(0) scale(.97);}
.entry-chip.active{
  background:linear-gradient(160deg,#7c3aed,#5b21b6)!important;
  border-color:#a78bfa!important;color:#fff!important;
  box-shadow:0 12px 28px rgba(124,58,237,.45),inset 0 1px 0 rgba(255,255,255,.2);
  transform:translateY(-2px);
}

/* ---- campo de valor (todas as telas) ---- */
.money-input{
  padding:0 6px 0 10px;min-height:58px;border-radius:16px!important;
  border:1.5px solid rgba(255,255,255,.12)!important;background:#0e0b1f!important;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.35);
  transition:border-color .18s,box-shadow .18s;
}
.money-input:focus-within{
  border-color:#a78bfa!important;box-shadow:0 0 0 4px rgba(139,92,246,.18),inset 0 2px 8px rgba(0,0,0,.35);
}
.money-input .prefix{color:#a78bfa;font-weight:900;font-size:16px;}
.money-input input{font-size:18px!important;font-weight:700;color:#fff;}
.money-input input::placeholder{color:rgba(255,255,255,.35);font-weight:600;}

/* ---- rótulos de seção ---- */
.panel-label{
  font-size:13px!important;font-weight:800!important;letter-spacing:.02em;
  text-transform:uppercase;color:rgba(255,255,255,.72)!important;margin-bottom:12px!important;
}

/* ---- recompensa mínima ---- */
.reward-box{
  position:relative;overflow:hidden;text-align:center;
  padding:16px 14px!important;border-radius:16px!important;margin:16px 0 18px!important;
  background:linear-gradient(160deg,#1a1440,#120c2c)!important;
  border:1.5px solid rgba(245,197,24,.55)!important;
  box-shadow:0 10px 28px rgba(245,197,24,.12),inset 0 1px 0 rgba(255,255,255,.06);
}
.reward-box:before{
  content:'';position:absolute;inset:-40% -10%;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%);
  animation:bbxShine 4s ease-in-out infinite;
}
.reward-box .label{font-size:13.5px!important;font-weight:700;color:rgba(255,255,255,.8)!important;}
.reward-box .value{
  font-size:28px!important;font-weight:900!important;color:#fde047!important;
  text-shadow:0 0 22px rgba(250,204,21,.45);font-variant-numeric:tabular-nums;margin-top:2px;
}

/* ---- cartão de bônus (depósito) — mais forte ---- */
.bonus-card{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#1c1443 0%,#120c2c 100%)!important;
  border:1.5px solid #f5c518!important;border-radius:18px!important;
  padding:16px 18px 18px!important;margin:0 0 16px!important;
  box-shadow:0 14px 34px rgba(245,197,24,.16),inset 0 1px 0 rgba(255,255,255,.08);
}
.bonus-card:before{
  content:'';position:absolute;inset:-40% -10%;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);
  animation:bbxShine 4s ease-in-out infinite;
}
.bonus-card.off{opacity:1!important;filter:saturate(.45) brightness(.8);}
.bonus-card-label{
  color:#fde047!important;font-size:12.5px!important;letter-spacing:.06em;
  display:inline-flex;align-items:center;gap:6px;
}
.bonus-card-label:before{content:'🎁';font-size:14px;}
.bonus-card-use{color:rgba(255,255,255,.85)!important;}
.bonus-card-value{
  font-size:34px!important;color:#fff!important;letter-spacing:-.02em;
  text-shadow:0 0 26px rgba(139,92,246,.55);
}
.bonus-card-divider{background:rgba(245,197,24,.28)!important;max-width:none!important;}
.bonus-card-total{font-size:14.5px!important;color:rgba(255,255,255,.85)!important;}
.bonus-card-total strong{color:#fde047;font-weight:900;}
.switch{width:52px!important;height:30px!important;background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.18)!important;}
.switch .knob{width:24px!important;height:24px!important;top:2px!important;box-shadow:0 2px 6px rgba(0,0,0,.35);}
.switch.on{background:linear-gradient(135deg,#a78bfa,#7c3aed)!important;border-color:#a78bfa!important;box-shadow:0 0 16px rgba(124,58,237,.55);}
.switch.on .knob{transform:translate(22px)!important;}

/* ---- botões genéricos (Entrar, Criar conta, Registrar, Sair…) ---- */
.btn{
  border-radius:14px!important;font-weight:900!important;letter-spacing:.04em;
  transition:transform .14s cubic-bezier(.22,1,.36,1),box-shadow .14s,filter .14s!important;
}
.btn:not(:disabled):hover{transform:translateY(-2px)!important;filter:brightness(1.06);}
.btn:not(:disabled):active{transform:translateY(1px) scale(.98)!important;}

/* ---- campos de texto (cadastro, login, saque) ---- */
.input,.bbx-cpf{
  min-height:54px;border-radius:14px!important;border:1.5px solid rgba(255,255,255,.12)!important;
  background:#0e0b1f!important;box-shadow:inset 0 2px 8px rgba(0,0,0,.35);
  font-weight:600;transition:border-color .18s,box-shadow .18s!important;
}
.input:focus,.bbx-cpf:focus{border-color:#a78bfa!important;box-shadow:0 0 0 4px rgba(139,92,246,.18),inset 0 2px 8px rgba(0,0,0,.35);}
.input::placeholder,.bbx-cpf::placeholder{color:rgba(255,255,255,.35);}
.auth-card{border-radius:22px!important;}
.auth-card h1{font-weight:900;letter-spacing:-.02em;}

/* ---- alertas ---- */
.alert{border-radius:14px!important;font-weight:600;}

/* ---- topo e navegação ---- */
.panel-balance-value{color:#fde047!important;text-shadow:0 0 14px rgba(250,204,21,.35);}
.panel-profile-btn{font-weight:900;box-shadow:0 4px 14px rgba(124,58,237,.45);}
.bottom-nav button{transition:transform .14s,color .14s;font-weight:700;}
.bottom-nav button:active{transform:scale(.94);}

/* ---- cartão da tela inicial ---- */
.panel-card{border-radius:22px!important;}

/* prévia do bônus sob o campo de valor */
.bbx-dep-bonus{
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  margin:-10px 0 18px 4px;font-size:13.5px;color:rgba(255,255,255,.78);
  animation:bbxUp .3s ease both;
}
.bbx-dep-bonus-mais{
  font-size:16px;font-weight:900;color:#fde047;text-shadow:0 0 16px rgba(250,204,21,.4);
}
.bbx-dep-bonus b{color:#fff;}
.bbx-dep-aviso--dobro{
  background:linear-gradient(135deg,#2a1d5e,#15102b)!important;
  border-color:#a78bfa!important;color:#fff!important;
  box-shadow:0 10px 30px rgba(139,92,246,.28),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.bbx-dep-aviso--dobro b{color:#fde047;}

/* sem setinhas no campo numérico */
.money-input input[type=number]::-webkit-inner-spin-button,
.money-input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.money-input input[type=number]{-moz-appearance:textfield;appearance:textfield;}

/* ============================================================
   Tela de saque
   ============================================================ */
.sheet.bbx-saq{padding-bottom:18px;}
.sheet.bbx-saq>*{animation:bbxUp .38s cubic-bezier(.22,1,.36,1) both;}
.sheet.bbx-saq .sheet-section{border:0;background:transparent;padding:0 2px;margin:0 0 14px;}

.bbx-saq-head{text-align:center;margin:16px 0 14px;}
.bbx-saq-ico{
  width:46px;height:46px;margin:0 auto 10px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(160deg,#7c3aed,#5b21b6);color:#fff;font-size:22px;font-weight:900;
  box-shadow:0 10px 26px rgba(124,58,237,.45),inset 0 1px 0 rgba(255,255,255,.25);
}
.bbx-saq-title{font-size:22px;font-weight:900;letter-spacing:-.02em;color:#fff;}
.bbx-saq-sub{margin-top:3px;font-size:13.5px;color:rgba(255,255,255,.72);}

/* saldo */
.sheet.bbx-saq .saldo-row{
  display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;
  background:linear-gradient(160deg,#1a1440,#120c2c);border:1.5px solid rgba(255,255,255,.12);
  box-shadow:0 8px 22px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06);
}
.sheet.bbx-saq .saldo-row .coin{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:0 0 44px;
  background:rgba(52,211,153,.15);color:#34d399;font-weight:900;font-size:14px;border:1px solid rgba(52,211,153,.35);
}
.sheet.bbx-saq .saldo-row .label{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.sheet.bbx-saq .saldo-row .value{font-size:24px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;}
.sheet.bbx-saq .saldo-row .value.zero{color:rgba(255,255,255,.45);}

/* porcentagens */
.bbx-saq-pcts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 16px;}
.bbx-saq-pct{
  padding:12px 6px;border-radius:12px;cursor:pointer;font-weight:900;font-size:14px;color:#fff;
  background:#141130;border:1.5px solid rgba(255,255,255,.12);
  box-shadow:0 5px 14px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .15s cubic-bezier(.22,1,.36,1),box-shadow .15s,border-color .15s,background .15s;
}
.bbx-saq-pct:hover{transform:translateY(-2px);border-color:rgba(167,139,250,.55);}
.bbx-saq-pct:active{transform:scale(.96);}
.bbx-saq-pct.active{
  background:linear-gradient(160deg,#7c3aed,#5b21b6);border-color:#a78bfa;
  box-shadow:0 10px 24px rgba(124,58,237,.45),inset 0 1px 0 rgba(255,255,255,.2);
}

/* rótulos e limites */
.bbx-saq-lb{margin:0 0 8px!important;}
.bbx-saq-lim{
  display:flex;justify-content:space-between;margin:-10px 4px 16px;
  font-size:12px;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums;
}
.sheet.bbx-saq .money-input{margin:0 0 16px!important;}

/* select do tipo */
.bbx-saq-select{
  flex:1;min-height:52px;padding:0 36px 0 6px;border:0;background:transparent;color:#fff;
  font:700 15px var(--font);appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:18px;
}
.bbx-saq-select:focus{outline:none;}
.bbx-saq-select option{background:#141130;color:#fff;}
.bbx-saq-tipo .prefix{color:#a78bfa;}

.bbx-saq-lock{color:rgba(255,255,255,.7)!important;}

/* informações importantes */
.sheet.bbx-saq .notice-box.bbx-saq-info{
  text-align:left;padding:14px 16px;border-radius:16px;margin:0 0 16px;
  background:#120c2c;border:1.5px solid rgba(255,255,255,.1);color:rgba(255,255,255,.7);font-size:13px;
}
.bbx-saq-info-t{font-weight:900;color:#fff;font-size:13.5px;margin-bottom:8px;}
.bbx-saq-info ul{margin:0;padding-left:16px;display:grid;gap:5px;}
.bbx-saq-info li{line-height:1.4;}
.bbx-saq-info li::marker{color:#a78bfa;}

/* ============================================================
   Indique e Ganhe
   ============================================================ */
.sheet.bbx-ind .bbx-ind-antigo{display:none!important;}
.bbx-ind-wrap{padding:6px 0 4px;}
.bbx-ind-wrap>*{animation:bbxUp .38s cubic-bezier(.22,1,.36,1) both;}
.bbx-ind-head{text-align:center;margin:14px 0 18px;}
.bbx-ind-ico{
  width:50px;height:50px;margin:0 auto 12px;border-radius:15px;display:grid;place-items:center;font-size:24px;
  background:linear-gradient(160deg,#7c3aed,#5b21b6);box-shadow:0 10px 26px rgba(124,58,237,.45),inset 0 1px 0 rgba(255,255,255,.25);
}
.bbx-ind-title{font-size:24px;font-weight:900;letter-spacing:-.02em;color:#fff;}
.bbx-ind-sub{margin-top:6px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.72);}

.bbx-ind-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
.bbx-ind-stat{
  position:relative;padding:15px 16px 14px;border-radius:16px;
  background:linear-gradient(160deg,#1a1440,#120c2c);border:1.5px solid rgba(255,255,255,.1);
  box-shadow:0 8px 22px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);
}
.bbx-ind-stat-h{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:800;color:rgba(255,255,255,.85);}
.bbx-ind-stat-h i{font-style:normal;font-size:13px;color:rgba(255,255,255,.35);}
.bbx-ind-stat-v{margin-top:8px;font-size:26px;font-weight:900;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;}
.bbx-ind-stat--cy .bbx-ind-stat-v{color:#22d3ee;text-shadow:0 0 18px rgba(34,211,238,.35);}
.bbx-ind-stat--gold .bbx-ind-stat-v{color:#fde047;text-shadow:0 0 18px rgba(250,204,21,.35);}
.bbx-ind-stat-s{margin-top:3px;font-size:12px;color:rgba(255,255,255,.5);line-height:1.3;}
.bbx-ind-resg{
  margin-top:12px;width:100%;padding:10px;border-radius:12px;cursor:pointer;font-weight:900;font-size:13px;
  background:linear-gradient(180deg,#34d399,#16a34a);color:#fff;border:0;
  box-shadow:0 5px 0 #15803d,0 10px 20px rgba(34,197,94,.28);transition:transform .14s,filter .14s;
}
.bbx-ind-resg:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 #15803d;}
.bbx-ind-resg:disabled{filter:saturate(.3) brightness(.7);cursor:not-allowed;box-shadow:0 4px 0 #14532d;}

.bbx-ind-card{
  padding:16px;border-radius:16px;margin-bottom:14px;
  background:#120c2c;border:1.5px solid rgba(255,255,255,.1);
  box-shadow:0 8px 22px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05);
}
.bbx-ind-card-t{font-size:15px;font-weight:900;color:#fff;}
.bbx-ind-card-s{font-size:12.5px;color:rgba(255,255,255,.55);margin:3px 0 12px;}
.bbx-ind-linkrow{display:flex;gap:8px;align-items:center;margin-bottom:10px;}
.bbx-ind-link{
  flex:1;min-width:0;min-height:50px;padding:0 14px;border-radius:12px;border:1.5px solid rgba(255,255,255,.12);
  background:#0e0b1f;color:#fff;font:600 13px var(--font);text-overflow:ellipsis;
}
.bbx-ind-mini{
  width:50px;height:50px;flex:0 0 50px;border-radius:12px;border:1.5px solid rgba(167,139,250,.5);
  background:rgba(124,58,237,.18);color:#a78bfa;font-size:18px;cursor:pointer;
}
.bbx-ind-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.bbx-ind-btn{
  min-height:48px;border-radius:12px;cursor:pointer;font-weight:800;font-size:14px;color:#fff;
  background:#141130;border:1.5px solid rgba(255,255,255,.14);
  transition:transform .14s,box-shadow .14s,filter .14s;
}
.bbx-ind-btn:hover{transform:translateY(-2px);}
.bbx-ind-btn:active{transform:scale(.97);}
.bbx-ind-btn--p{
  background:linear-gradient(160deg,#7c3aed,#5b21b6);border-color:#a78bfa;
  box-shadow:0 8px 20px rgba(124,58,237,.4),inset 0 1px 0 rgba(255,255,255,.2);
}
.bbx-ind-code{
  margin:12px auto 0;width:max-content;max-width:100%;padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.06);font-size:12.5px;color:rgba(255,255,255,.7);
}
.bbx-ind-code b{color:#fde047;font-weight:900;letter-spacing:.04em;}

.bbx-ind-passo{display:flex;gap:12px;align-items:flex-start;margin-top:14px;}
.bbx-ind-num{
  width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(160deg,#7c3aed,#5b21b6);color:#fff;font-weight:900;font-size:13px;
  box-shadow:0 4px 12px rgba(124,58,237,.4);
}
.bbx-ind-passo-t{font-weight:800;font-size:14px;color:#fff;}
.bbx-ind-passo-d{font-size:12.5px;color:rgba(255,255,255,.55);margin-top:2px;line-height:1.4;}
.bbx-ind-dica{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);font-size:12.5px;color:rgba(255,255,255,.55);}
.bbx-ind-dica b{color:#fde047;}

.bbx-ind-tres{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px;}
.bbx-ind-mini-card{
  text-align:center;padding:14px 8px;border-radius:14px;
  background:#120c2c;border:1.5px solid rgba(255,255,255,.1);
}
.bbx-ind-mini-ic{
  width:38px;height:38px;margin:0 auto 8px;border-radius:11px;display:grid;place-items:center;font-size:18px;
}
.bbx-ind-mini-ic--v{background:rgba(124,58,237,.2);}
.bbx-ind-mini-ic--ok{background:rgba(52,211,153,.15);}
.bbx-ind-mini-ic--gold{background:rgba(250,204,21,.15);}
.bbx-ind-mini-t{font-weight:900;font-size:13px;color:#fff;}
.bbx-ind-mini-d{font-size:11px;color:rgba(255,255,255,.5);margin-top:3px;line-height:1.35;}

.sheet.bbx-ind .bbx-ind-hist{border:0;background:transparent;padding:0;margin-top:6px;}
.sheet.bbx-ind .bbx-ind-hist .ref-history-empty{
  padding:14px;border-radius:14px;background:#120c2c;border:1.5px dashed rgba(255,255,255,.12);
  color:rgba(255,255,255,.5);font-size:13px;text-align:center;
}
@media(max-width:380px){.bbx-ind-tres{grid-template-columns:1fr;}}

/* ---- meta de indicação ("indique 3 e sua comissão vira 70%") ---- */
.bbx-meta{
  margin:0 0 14px;padding:14px;border-radius:16px;
  background:linear-gradient(180deg,rgba(253,224,71,.10),rgba(253,224,71,.03));
  border:1px solid rgba(253,224,71,.28);
}
.bbx-meta--ok{
  background:linear-gradient(180deg,rgba(34,197,94,.12),rgba(34,197,94,.03));
  border-color:rgba(34,197,94,.32);
}
.bbx-meta-top{display:flex;gap:11px;align-items:flex-start;}
.bbx-meta-ico{font-size:22px;line-height:1.1;flex:0 0 auto;}
.bbx-meta-t{font-weight:800;font-size:15px;color:#fde047;line-height:1.25;}
.bbx-meta--ok .bbx-meta-t{color:#6ee7a8;}
.bbx-meta-s{margin-top:5px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.66);}
.bbx-meta-s b{color:#fff;}
.bbx-meta-barra{
  margin-top:12px;height:8px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.08);
}
.bbx-meta-barra > i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#f59e0b,#fde047);
  transition:width .5s ease;
}
.bbx-meta-pe{
  margin-top:7px;display:flex;justify-content:space-between;gap:10px;
  font-size:12px;color:rgba(255,255,255,.55);
}
.bbx-meta-pe b{color:#fde047;}

/* ---- barra da meta no lobby ---- */
.bbx-lmeta{
  display:block;width:100%;margin:14px 0 0;padding:12px 13px;
  border-radius:14px;text-align:left;cursor:pointer;font:inherit;color:inherit;
  background:linear-gradient(180deg,rgba(253,224,71,.10),rgba(253,224,71,.03));
  border:1px solid rgba(253,224,71,.28);
  transition:border-color .2s,background .2s;
}
.bbx-lmeta:hover{border-color:rgba(253,224,71,.5);background:linear-gradient(180deg,rgba(253,224,71,.16),rgba(253,224,71,.05));}
.bbx-lmeta-l{display:flex;align-items:center;gap:9px;}
.bbx-lmeta-ico{font-size:17px;flex:0 0 auto;}
.bbx-lmeta-t{flex:1;min-width:0;font-size:13px;line-height:1.35;color:rgba(255,255,255,.82);}
.bbx-lmeta-t b{color:#fde047;font-weight:800;}
.bbx-lmeta-seta{flex:0 0 auto;font-size:19px;line-height:1;color:rgba(253,224,71,.75);}
.bbx-lmeta-barra{margin-top:10px;height:6px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.09);}
.bbx-lmeta-barra > i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f59e0b,#fde047);transition:width .5s ease;}
.bbx-lmeta-pe{margin-top:6px;display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:rgba(255,255,255,.5);}
.bbx-lmeta-pe b{color:#fde047;}

/* ================= LANDING - VERSAO FINAL CONSOLIDADA ================= */
.bbx-splash { display: none !important; }
:root { --font: "Segoe UI", system-ui, -apple-system, sans-serif !important; }
body, button, input, select, textarea { font-family: "Segoe UI", system-ui, -apple-system, sans-serif !important; }

/* Cabecalho */
.landing .app-header { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 68px !important; padding: 12px 16px !important; z-index: 30 !important; background: transparent !important; border-bottom: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.bbx-has-promo .landing .app-header { top: var(--bbx-promo-h, 42px) !important; }
.landing .app-header :has(> .btn) { gap: 12px !important; }
.landing .app-header .btn { height: 34px !important; padding: 8px 14px !important; border-radius: 12px !important; font-size: 12.5px !important; font-weight: 700 !important; text-transform: uppercase; }
.landing .app-header .btn:last-child { height: 36px !important; color: #fff !important; border: 2px solid #2c0250 !important; background: linear-gradient(#ddb6fe 0%, #a44bfc 16%, #7a1bdc 100%) !important; box-shadow: 0 6px 0 #45037a, 0 13px 18px rgba(0,0,0,.5) !important; }

/* Area principal */
.landing .lp-hero { position: relative !important; min-height: 100vh !important; min-height: 100svh !important; box-sizing: border-box !important; padding: 74px 16px 48px !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; }
.landing .lp-hero-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(13,5,32,.9) 0%, rgba(13,5,32,.77) 7%, rgba(13,5,32,.58) 17%, rgba(13,5,32,.45) 60%, #0d0520 100%); }
.landing .lp-hero-inner { width: 100% !important; max-width: 480px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; }

/* Arte (celular) */
.landing .lp-title { display: block !important; width: min(94vw, 46vh, 46svh) !important; max-width: none !important; height: auto !important; aspect-ratio: 4 / 3 !important; margin: 0 auto !important; transform: none !important; align-self: center !important; background: url('/images/all/titulo-bruxa11.webp') center/contain no-repeat !important; filter: drop-shadow(0 14px 26px rgba(0,0,0,.45)) !important; }

/* Quadro do jogo (celular) */
.landing .lp-hero-banner { width: min(37vw, 22vh, 22svh) !important; min-width: 140px !important; max-width: none !important; height: auto !important; margin: 14px auto 14px !important; }
.landing .lp-hero-banner .lp-video-link { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 24px !important; box-shadow: 0 18px 48px rgba(0,0,0,.55) !important; }
.landing .lp-hero-banner video { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center !important; display: block !important; background: #12062b url('/images/video/capa-video.webp') center/cover no-repeat !important; }

/* Frases */
.landing .lp-ctas { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; width: 100% !important; margin-bottom: 0 !important; }
.landing .lp-ctas::before { content: "Jogue Bubbles e estoure as bolhas"; order: -2; max-width: 400px; text-align: center; color: #fff; font-size: clamp(16px, 4.6vw, 18.9px); font-weight: 600; margin: 0 0 -11px; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.landing .lp-ctas::after { content: "Bateu a meta, voc\EA  resgata em dinheiro!"; order: -1; max-width: 400px; text-align: center; color: #f3cf23; font-size: clamp(15.5px, 4.4vw, 18.2px); font-weight: 800; margin: 0 0 8px; text-shadow: 0 2px 0 #7a3d00, 0 0 10px rgba(0,0,0,.4); }

/* Botao principal (estilo cta-gold, so visual) */
.landing .lp-btn-primary { order: 0; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 310px !important; height: auto !important; margin: 0 auto !important; padding: 17px 24px !important; border-radius: 999px !important; border: 2px solid #7a3d02 !important; background: linear-gradient(180deg, #fff6b0 0%, #f7d733 16%, #f0a80c 100%) !important; box-shadow: 0 7px 0 #b85e02, 0 14px 18px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.45) !important; font-size: 0 !important; color: transparent !important; cursor: pointer; transition: transform .07s, box-shadow .07s, filter .15s !important; }
.landing .lp-btn-primary > * { display: none !important; }
.landing .lp-btn-primary::after { content: "JOGADA GR\C1TIS"; position: static !important; inset: auto !important; width: auto !important; height: auto !important; background: none !important; animation: none !important; font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif !important; font-size: 1.02rem !important; font-weight: 800 !important; letter-spacing: .04em !important; text-transform: uppercase !important; line-height: 1.3 !important; color: #fff !important; text-shadow: 0 2px 0 rgba(0,0,0,.45) !important; }
.landing .lp-btn-primary::before { content: "" !important; position: absolute !important; inset: -2px !important; border-radius: inherit !important; pointer-events: none !important; background: none !important; animation: bub3d-halo 2.8s ease-in-out infinite !important; }
@keyframes bub3d-halo { 0%,100% { box-shadow: 0 0 0 0 #f7d73359; } 50% { box-shadow: 0 0 0 10px transparent; } }
.landing .lp-btn-primary:hover { filter: brightness(1.06) !important; transform: none !important; background: linear-gradient(180deg, #fff6b0 0%, #f7d733 16%, #f0a80c 100%) !important; }
.landing .lp-btn-primary:hover::before, .landing .lp-btn-primary:active::before { animation: none !important; }
.landing .lp-btn-primary:active { transform: translateY(7px) !important; box-shadow: 0 0 0 #b85e02, 0 3px 8px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.3) !important; }
.landing .lp-btn-link { order: 1; font-size: 14.4px !important; font-weight: 600 !important; padding: 8px !important; color: #a08cc8 !important; }

/* Classe cta-gold disponivel para uso futuro */
.cta-gold { --b-alt:7px; --b-base:#b85e02; --b-borda:#7a3d02; --b-halo:#f7d73359; display:flex; align-items:center; justify-content:center; width:100%; max-width:310px; margin:0 auto; padding:17px 24px !important; border-radius:999px !important; border:2px solid var(--b-borda); background:linear-gradient(180deg,#fff6b0 0%,#f7d733 16%,#f0a80c 100%) !important; font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif !important; font-size:1.02rem !important; font-weight:800 !important; letter-spacing:.04em; text-transform:uppercase; color:#fff !important; text-shadow:0 2px 0 rgba(0,0,0,.45); text-decoration:none; cursor:pointer; box-shadow:0 var(--b-alt) 0 var(--b-base),0 calc(var(--b-alt) + 7px) 18px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.45); transition:transform .07s,box-shadow .07s,filter .15s; }
.cta-gold:hover { filter:brightness(1.06); }
.cta-gold:active { transform:translateY(var(--b-alt)); box-shadow:0 0 0 var(--b-base),0 3px 8px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.3); }

/* Secoes extras fora */
.landing .bbx-carousel, .landing .lp-final { display: none !important; }

/* Como Jogar */
.landing .lp-howto { padding: 44px 0 48px !important; }
.landing .lp-howto-head { text-align: center !important; padding: 0 16px !important; margin-bottom: 28px !important; }
.landing .lp-howto-icon { width: 36px !important; height: 36px !important; margin-bottom: 10px !important; }
.landing .lp-howto-title { font-size: 24.8px !important; font-weight: 900 !important; margin: 0 !important; }
.landing .lp-howto-sub { font-size: 14.4px !important; color: #a08cc8 !important; margin: 8px 0 0 !important; }
.landing .lp-howto-scroll { display: grid !important; grid-auto-flow: column !important; grid-auto-columns: 251px !important; gap: 16px !important; overflow-x: auto !important; scroll-snap-type: x mandatory; padding: 4px 24px 12px !important; scrollbar-width: none; }
.landing .lp-howto-scroll::-webkit-scrollbar { display: none; }
.landing .lp-howto-card { scroll-snap-align: start; background: rgba(14,18,34,.92) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 18px !important; overflow: hidden !important; box-shadow: 0 12px 32px rgba(0,0,0,.35) !important; }
.landing .lp-howto-visual { position: relative !important; height: 83px !important; overflow: hidden !important; }
.landing .lp-howto-badge { position: absolute !important; top: 10px !important; right: 10px !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; font-weight: 900 !important; background: #f3cf23 !important; color: #041510 !important; }
.landing .lp-howto-card h3 { font-size: 15.2px !important; font-weight: 800 !important; padding: 14px 14px 6px !important; margin: 0 !important; }
.landing .lp-howto-card p { font-size: 13.1px !important; color: #a08cc8 !important; padding: 0 14px 16px !important; margin: 0 !important; line-height: 1.4 !important; }

/* Rodape */
.landing .lp-footer { padding: 28px 16px 24px !important; text-align: center !important; }
.landing .lp-footer-logo { height: 56px !important; width: auto !important; max-width: 109px !important; margin: 0 auto 14px !important; object-fit: contain; }
.landing .lp-footer-copy { font-size: 13px !important; color: #a08cc8 !important; }
.landing .lp-footer-note { font-size: 12px !important; color: rgba(154,163,199,.7) !important; margin-top: 8px !important; }

/* Computador: medidas exatas do mapa */
@media (min-width: 768px) {
  .landing .lp-title { width: min(440px, 50vh) !important; }
  .landing .lp-hero-banner { width: min(247px, 28vh) !important; margin-top: 20px !important; }
  .landing .lp-howto-scroll { grid-auto-flow: row !important; grid-template-columns: repeat(4, 251px) !important; justify-content: center !important; max-width: 1100px !important; margin: 0 auto !important; overflow: visible !important; }
}

/* Caixinha "online" menor so no celular */
@media (max-width: 767px) {
  .landing .lp-video-badge { font-size: .62rem !important; padding: 5px 12px !important; border-width: 2px !important; }
  .landing .lp-video-badge-icon { width: .95em !important; height: .95em !important; margin-right: 4px !important; }
}

/* Caixinha "online" no celular: +5% */
@media (max-width: 767px) {
  .landing .lp-video-badge { font-size: .65rem !important; padding: 5px 13px !important; }
}

/* ===== Celular: tamanhos iguais ao modelo (medidos nos prints) ===== */
@media (max-width: 767px) {
  .landing .lp-title { width: min(76vw, 46vh, 46svh) !important; }
  .landing .lp-hero-banner { width: min(58vw, 34vh, 34svh) !important; min-width: 0 !important; margin: 16px auto 12px !important; }
}

/* Arte da bruxa ~6% maior */
@media (max-width: 767px) { .landing .lp-title { width: min(81vw, 49vh, 49svh) !important; } }
@media (min-width: 768px) { .landing .lp-title { width: min(466px, 53vh) !important; } }

/* Sem sombra na arte (evita a borda em degrade no primeiro carregamento) */
.landing .lp-title { filter: none !important; }

/* Sombra contornando a arte: entra suave depois do carregamento (sem borda) */
.landing .lp-title { filter: drop-shadow(0 6px 10px rgba(0,0,0,0)) !important; animation: bbx-sombra-arte .5s ease-out .7s forwards !important; }
@keyframes bbx-sombra-arte { to { filter: drop-shadow(0 6px 10px rgba(0,0,0,.38)); } }