/* Bubble Blast — CSS do shell (home, auth, carteira, perfil, indique).
 * Tokens extraídos por computed-style do bubblebomb.online (fiel ao original). */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Inter+Tight:wght@400;600;700;800&family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

:root{
  --bg:#0b0a09;
  --bg-soft:#111218;
  --panel:#12131c;
  --panel-2:#0d0e17;
  --line:#1e2c48;
  --line-soft:#232433;
  --text:#f8fafc;
  --muted:#8fa6cc;
  --muted-2:#5c7099;
  --pink:#ff0084;
  --pink-2:#ec0b8c;
  --gold:#fde257;
  --blue-grad:linear-gradient(#8fc0ff 0%,#4c86ff 48%,#2b5fe0 52%,#4477f0 100%);
  --pink-grad:linear-gradient(90deg,#ff2d9b,#c026d3);
  --gold-grad:linear-gradient(#ffc64a,#f09000);
  --display:'Luckiest Guy','Inter Tight',cursive;
  --sans:'Poppins',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100dvh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* container do app (mobile-first, centralizado) */
.bb-app{max-width:460px;margin:0 auto;min-height:100dvh;position:relative;padding-bottom:92px;background:
  radial-gradient(120% 60% at 50% -10%, #1a1130 0%, rgba(11,10,9,0) 60%), var(--bg)}

/* ---- topo ---- */
.bb-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;position:sticky;top:0;z-index:30;
  background:rgba(9,9,13,.82);backdrop-filter:blur(12px)}
.bb-logo{height:34px}
.bb-nav-right{display:flex;align-items:center;gap:8px}
.bb-balance{display:flex;flex-direction:column;align-items:flex-end;line-height:1;background:#0e1626;border:1px solid var(--line);
  border-radius:12px;padding:8px 12px;min-width:74px}
.bb-balance small{color:var(--muted-2);font-size:9px;text-transform:uppercase;letter-spacing:.1em}
.bb-balance b{color:var(--gold);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.bb-btn-dep{background:var(--pink-grad);color:#fff;border:0;border-radius:999px;padding:10px 18px;font:800 14px var(--sans);
  display:flex;align-items:center;gap:7px;cursor:pointer;box-shadow:0 6px 18px rgba(236,11,140,.35)}
.bb-btn-ghost{background:#14151f;border:1px solid var(--line-soft);color:#e8eef9;border-radius:999px;padding:10px 16px;font:700 14px var(--sans);cursor:pointer}
.bb-avatar{width:40px;height:40px;border-radius:50%;background:var(--pink-grad);color:#fff;display:grid;place-items:center;font-weight:800;cursor:pointer;border:0}

/* ---- botões ---- */
.bb-btn{border:0;border-radius:14px;cursor:pointer;font:800 16px var(--sans);padding:15px 20px;width:100%;transition:transform .1s,filter .15s}
.bb-btn:active{transform:scale(.985)}
.bb-btn-primary{background:var(--blue-grad);color:#fff;box-shadow:0 6px 0 #1c3f9c}
.bb-btn-pink{background:var(--pink-grad);color:#fff;box-shadow:0 6px 20px rgba(236,11,140,.35)}
.bb-btn-gold{background:var(--gold-grad);color:#3a1f00;box-shadow:0 4px #a85f00}
.bb-btn:disabled{filter:grayscale(.5);opacity:.55;cursor:not-allowed;box-shadow:none}
.bb-btn-lg{height:56px;font-size:17px}

/* ---- hero (home) ---- */
.bb-hero{text-align:center;padding:18px 18px 6px;position:relative;overflow:hidden}
.bb-online{display:inline-flex;align-items:center;gap:8px;background:rgba(20,25,40,.7);border:1px solid var(--line);
  color:#cdd7ea;border-radius:999px;padding:7px 14px;font-size:12px;font-weight:600;margin-bottom:14px}
.bb-online .dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e}
.bb-h1{font-family:var(--display);font-weight:700;font-size:46px;line-height:.95;margin:0;letter-spacing:.5px}
.bb-h1 .g{color:var(--gold);display:block}
.bb-lead{color:var(--muted);font-size:14px;line-height:1.6;max-width:340px;margin:14px auto 16px}
.bb-checks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.bb-check{display:inline-flex;align-items:center;gap:7px;background:#14151f;border:1px solid var(--line-soft);border-radius:999px;
  padding:8px 14px;font-size:12px;color:#cdd7ea}
.bb-check .ok{color:#22c55e;font-weight:800}
.bb-float{position:absolute;width:56px;opacity:.9;pointer-events:none}
/* bolhas decorativas do hero desenhadas em CSS (sem PNG) */
.bb-orb{position:absolute;border-radius:50%;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));animation:bbOrbFloat 5s ease-in-out infinite}
.bb-orb::after{content:"";position:absolute;left:26%;top:18%;width:30%;height:22%;border-radius:50%;background:rgba(255,255,255,.6);filter:blur(1px)}
.bb-orb.purple{background:radial-gradient(circle at 34% 28%,#d8b4fe,#a855f7 46%,#7e22ce)}
.bb-orb.gold{background:radial-gradient(circle at 34% 28%,#fde68a,#f59e0b 46%,#b45309)}
.bb-orb.green{background:radial-gradient(circle at 34% 28%,#86efac,#22c55e 46%,#15803d)}
.bb-orb.blue{background:radial-gradient(circle at 34% 28%,#93c5fd,#3b82f6 46%,#1d4ed8)}
@keyframes bbOrbFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}

/* ---- card de aposta / seções ---- */
.bb-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;margin:14px;padding:18px;position:relative}
.bb-banner{border-radius:16px;overflow:hidden;margin:14px 14px 0;position:relative;border:1px solid var(--line)}
.bb-banner img{display:block;width:100%}
.bb-banner .on{position:absolute;top:10px;right:10px;background:rgba(9,13,20,.7);border:1px solid var(--line);color:#cdd7ea;
  border-radius:999px;padding:5px 11px;font-size:11px;display:inline-flex;align-items:center;gap:6px}
.bb-section-lbl{text-align:center;color:var(--muted-2);text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:700;margin:2px 0 14px}
.bb-bets{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.bb-bet{background:#0f1626;border:1px solid var(--line);color:#cdd7ea;border-radius:12px;padding:14px 0;font:800 15px var(--sans);cursor:pointer;text-align:center}
.bb-bet.on{background:var(--blue-grad);color:#fff;border-color:#1c3f9c}
.bb-amount{display:flex;align-items:center;gap:10px;background:#0f1626;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-top:12px}
.bb-amount .cur{color:var(--muted-2);font-weight:700}
.bb-amount input{flex:1;min-width:0;width:100%;background:none;border:0;color:#fff;font:800 24px var(--sans);outline:none;text-align:right}
.bb-warn{display:flex;align-items:center;gap:8px;color:#ffb020;font-size:12px;margin-top:10px}
.bb-saldo-row{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:var(--muted)}
.bb-saldo-row b{color:var(--gold)}

/* ---- inputs (auth, saque, perfil) ---- */
.bb-field{margin-bottom:14px}
.bb-field label{display:block;color:var(--muted);font-size:13px;font-weight:600;margin-bottom:7px}
.bb-input{width:100%;background:#0f1626;border:1px solid var(--line);border-radius:14px;color:#fff;padding:15px 16px;font:500 15px var(--sans);outline:none}
.bb-input::placeholder{color:#5c7099}
.bb-input:focus{border-color:#2b5fe0}
.bb-input-ico{position:relative}
.bb-input-ico .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#5c7099;font-size:12px;font-weight:700}
.bb-input-ico input{padding-left:44px}

/* ---- título de página interna ---- */
.bb-page-title{text-align:center;font-family:var(--display);font-size:30px;color:var(--gold);margin:16px 0 2px;letter-spacing:.5px}
.bb-page-sub{text-align:center;color:var(--muted);font-size:13px;margin:0 0 14px}
.bb-card-title{display:flex;align-items:center;gap:9px;color:var(--pink);font-family:var(--display);font-size:19px;margin:0 0 14px}

/* ---- footer ---- */
.bb-footer{padding:24px 18px;color:var(--muted-2);font-size:12px;text-align:center;line-height:1.7;border-top:1px solid #14151f;margin-top:20px}
.bb-footer a{color:var(--muted)}
.bb-foot-cols{display:flex;justify-content:space-around;gap:14px;text-align:left;margin:14px 0}
.bb-foot-cols h3{color:#e8eef9;font-size:13px;margin:0 0 8px}
.bb-foot-cols div{font-size:12px;margin:4px 0}

/* ---- nav inferior ---- */
.bb-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;max-width:460px;margin:0 auto;height:78px;
  background:rgba(9,9,13,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center}
.bb-tab{display:flex;flex-direction:column;align-items:center;gap:4px;color:#7f8cab;font-size:11px;font-weight:600;background:none;border:0;cursor:pointer;height:100%}
.bb-tab.on{color:var(--pink)}
.bb-tab svg{width:22px;height:22px}
.bb-tab-center{position:relative;top:-14px}
.bb-tab-center .fab{width:58px;height:58px;border-radius:50%;background:var(--pink-grad);display:grid;place-items:center;
  box-shadow:0 0 22px rgba(236,11,140,.55);border:4px solid #0b0a09}
.bb-tab-center .fab svg{width:26px;height:26px;color:#fff}

/* ---- bottom-sheet (depósito) ---- */
.bb-sheet-back{position:fixed;inset:0;z-index:60;background:rgba(5,7,12,.72);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center}
.bb-sheet{width:100%;max-width:460px;background:var(--panel-2);border-top-left-radius:22px;border-top-right-radius:22px;
  border:1px solid var(--line);border-bottom:0;max-height:92dvh;overflow:auto;animation:bbSheetUp .3s cubic-bezier(.22,1,.36,1)}
@keyframes bbSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.bb-sheet-grab{width:44px;height:5px;border-radius:3px;background:#33384a;margin:10px auto 0}
.bb-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 6px}
.bb-sheet-head h2{font-family:var(--display);font-size:22px;margin:0}
.bb-sheet-x{width:34px;height:34px;border-radius:50%;background:#1a1c28;border:1px solid var(--line-soft);color:#9fb1cf;cursor:pointer}
.bb-dep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:8px 18px 4px}
.bb-dep{position:relative;background:#12131c;border:1px solid var(--line-soft);border-radius:14px;padding:16px 8px;text-align:center;cursor:pointer}
.bb-dep.on{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink)}
.bb-dep .v{font-weight:800;font-size:16px}
.bb-dep .b{color:var(--pink);font-size:12px;font-weight:700;margin-top:3px}
.bb-dep .tag{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:.12em;font-weight:800;
  padding:2px 8px;border-radius:999px;white-space:nowrap}
.bb-dep .tag.quer{background:#2b1a4d;color:#c4b5fd;border:1px solid #7c3aed}
.bb-dep .tag.rec{background:#3a2f0a;color:#fde047;border:1px solid #b45309}
.bb-dep .tag.chance{background:#3a0a24;color:#f9a8d4;border:1px solid #be185d}

/* ---- indique (passos) ---- */
.bb-ref-hero{text-align:center;padding:8px 18px 0}
.bb-ref-ico{width:56px;height:56px;border-radius:16px;background:linear-gradient(145deg,#c026d3,#7c3aed);display:grid;place-items:center;margin:6px auto}
.bb-ref-card{background:linear-gradient(160deg,#1a1030,#140c1f);border:1px solid #4a2050}
.bb-copy-row{display:flex;gap:8px;margin-top:12px}
.bb-copy-row .lnk{flex:1;background:#0f1626;border:1px solid var(--line);border-radius:12px;color:#a5b4fc;padding:13px 14px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-step{display:flex;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;margin:10px 14px}
.bb-step .n{width:26px;height:26px;flex:none;border-radius:50%;background:var(--pink-grad);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}
.bb-step b{display:block;margin-bottom:3px}
.bb-step span{color:var(--muted);font-size:13px;line-height:1.4}
.bb-hidden{display:none!important}