/* BrasaBet — tema verde/preto */
:root{
  --bg:#0a0f0c; --bg2:#0e1613; --panel:#131f19; --panel2:#1a2a21;
  --border:#1f2f27; --text:#eef5f0; --muted:#8fa89a; --muted2:#5b7265;
  --green:#12b76a; --green2:#0d9d58; --lime:#2ee6a8; --yellow:#ffd200;
  --red:#f43f5e; --orange:#ff8a3d;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:"Inter",system-ui,sans-serif;font-size:14px;min-height:100vh}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
img{display:block;max-width:100%}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#22352b;border-radius:99px}
::-webkit-scrollbar-track{background:transparent}

/* ============ HEADER ============ */
.topbar{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,#0f2a1f,#0c1a13);border-bottom:1px solid var(--border)}
.tb-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:26px;padding:12px 20px}
.logo{font-size:27px;font-weight:900;letter-spacing:-.5px}
.logo span{color:#fff}
.logo em{font-style:normal;color:var(--yellow)}
.logo.sm{font-size:24px}
.logo.img img{max-height:36px;max-width:170px;object-fit:contain}
.tnav{display:flex;gap:26px;margin:0 auto}
.tnav a{font-size:14.5px;font-weight:600;color:var(--muted);padding:6px 2px;border-bottom:2px solid transparent}
.tnav a:hover{color:#fff}
.tnav a.on{color:#fff;border-bottom-color:var(--lime)}
.tact{display:flex;align-items:center;gap:10px;margin-left:auto}
.pill{border-radius:99px;padding:9px 18px;font-size:13px;font-weight:800;border:1.5px solid transparent;display:inline-flex;align-items:center;gap:7px;transition:filter .15s,transform .1s;background:transparent;color:var(--text)}
.pill:hover{filter:brightness(1.15)}
.pill:active{transform:scale(.97)}
.pill.dark{border-color:var(--border);background:rgba(255,255,255,.04);color:var(--muted)}
.pill.yellow{border-color:var(--yellow);color:var(--yellow)}
.pill.green-o{border-color:var(--green);color:var(--lime)}
.pill.bal{border-color:var(--border);background:rgba(255,255,255,.04);font-family:"JetBrains Mono";font-weight:700}
.pill.bal i{color:var(--green)}
.pill.avabtn{padding:9px 13px}

/* ============ CONTEÚDO ============ */
.bbmain{padding:18px 20px 40px;min-height:calc(100vh - 60px)}
.mwrap{max-width:1280px;margin:0 auto}

/* títulos de seção */
.row-head{display:flex;align-items:center;gap:12px;margin:30px 0 16px}
.row-head h2{font-size:19px;font-weight:800}
.row-head h2 .mj b{font-weight:900}
.row-head h2 .mj10{font-style:normal;color:var(--lime);font-size:26px;font-weight:900;vertical-align:-2px}
.vm{margin-left:auto;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text);padding:7px 16px;border-radius:99px;font-size:12px;font-weight:700}
.vm:hover{background:rgba(255,255,255,.1)}

/* fileiras / grades de jogos */
.games{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;padding:2px 2px 12px;scrollbar-width:none}
.games::-webkit-scrollbar{display:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.gcard{flex:0 0 158px;transition:transform .15s}
.gcard:hover{transform:translateY(-3px)}
.gcard .cover{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,var(--panel2),var(--panel));display:flex;align-items:center;justify-content:center;border:1px solid var(--border)}
.gcard .cover>i{font-size:34px;color:var(--muted2)}
.gcard .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gcard .nm{font-size:13px;font-weight:700;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard .pv{font-size:11px;color:var(--muted);margin-top:2px}
/* ranqueados (Mais Jogados) */
.games.ranked .gcard{position:relative;flex:0 0 168px}
.games.ranked .rk{position:absolute;left:-14px;bottom:-6px;font-size:64px;font-weight:900;color:transparent;-webkit-text-stroke:2px var(--lime);line-height:1;z-index:2;font-style:italic}
.games.ranked .gcard .cover{border-radius:16px}

/* provedores */
.provrow{display:flex;gap:12px;flex-wrap:wrap}
.provcard{display:flex;flex-direction:column;gap:3px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px 22px;min-width:150px;transition:border-color .15s}
.provcard:hover{border-color:var(--green)}
.provcard i{color:var(--yellow);font-size:18px;margin-bottom:4px}
.provcard b{font-size:14px}
.provcard small{color:var(--muted);font-size:11.5px}

/* busca / categorias */
.bb-search{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--border);border-radius:99px;padding:12px 20px;margin-bottom:16px}
.bb-search i{color:var(--muted)}
.bb-search input{flex:1;background:transparent;border:0;outline:none;color:var(--text);font-size:14px;font-family:inherit}
.cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.cats a{background:var(--panel);border:1px solid var(--border);padding:9px 16px;border-radius:99px;font-size:12.5px;font-weight:700;color:var(--muted)}
.cats a.on,.cats a:hover{background:var(--green);border-color:var(--green);color:#04150c}
.empty{text-align:center;color:var(--muted);background:var(--panel);border:1px dashed var(--border);border-radius:20px;padding:50px 20px;margin-top:20px}

/* página do jogo */
.game-wrap{margin-top:6px}
.game-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.game-head h1{font-size:20px;font-weight:800}
.back{color:var(--muted);font-weight:700;font-size:13px}
.back:hover{color:#fff}
.pvtag{background:var(--panel2);border:1px solid var(--border);color:var(--muted);border-radius:99px;padding:4px 12px;font-size:11px;font-weight:700}
.game-frame{width:100%;height:72vh;border:0;border-radius:18px;background:#000;border:1px solid var(--border)}

/* ============ MODAIS (estilo brasabet) ============ */
.modal{display:none;position:fixed;inset:0;background:rgba(4,8,6,.8);backdrop-filter:blur(6px);z-index:90;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.modal.open{display:flex}
.mcard{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:26px;width:100%;max-width:460px;position:relative}
.mcard .x{position:absolute;top:12px;right:14px;background:transparent;border:0;color:var(--muted);font-size:22px;z-index:2}
.err{display:none;background:rgba(244,63,82,.12);color:var(--red);padding:10px 12px;border-radius:10px;font-size:12.5px;font-weight:600;margin-bottom:12px}
.okmsg{display:none;background:rgba(18,183,106,.12);color:var(--green);padding:10px 12px;border-radius:10px;font-size:12.5px;font-weight:600;margin-bottom:12px}
.toast{display:none;position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--border);padding:12px 22px;border-radius:99px;font-size:13px;font-weight:700;z-index:99;box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* inputs escuros do registro/depósito */
.bb-inp{width:100%;background:#23272b;border:1px solid #33383d;border-radius:8px;padding:15px 16px;font-size:14.5px;color:#eef1f4;outline:none;font-family:inherit;margin-bottom:12px;transition:border-color .15s}
.bb-inp::placeholder{color:#8a9298}
.bb-inp:focus{border-color:var(--green)}
.bb-tel{display:flex;align-items:center;gap:0;background:#23272b;border:1px solid #33383d;border-radius:8px;margin-bottom:12px;padding-left:16px}
.bb-tel span{color:#c9ced4;font-weight:700;font-size:14px;border-right:1px solid #3a4046;padding-right:14px}
.bb-tel .bb-inp{border:0;margin:0;background:transparent;padding-left:14px}
.bb-pass{position:relative}
.bb-pass .bb-show{position:absolute;right:14px;top:50%;transform:translateY(-58%);background:transparent;border:0;color:var(--lime);font-size:13px;font-weight:700}
.bb-hint{font-size:12px;color:#8a9298;margin:-4px 2px 14px}
.bb-terms{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:#aab2b8;margin:0 0 16px;cursor:pointer}
.bb-terms input{width:18px;height:18px;accent-color:var(--green);flex-shrink:0}
.bb-terms a{color:var(--lime)}
.bb-go{width:100%;border:0;border-radius:8px;background:var(--green);color:#04150c;font-weight:800;font-size:15px;padding:15px;transition:filter .15s,transform .1s}
.bb-go:hover{filter:brightness(1.08)}
.bb-go:active{transform:scale(.99)}
.bb-links{text-align:center;font-size:13.5px;color:#aab2b8;margin-top:14px}
.bb-links a{color:var(--lime);font-weight:700}
.bb-18{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;color:#8a9298;font-size:12.5px}
.bb-18 b{border:1.5px solid #8a9298;border-radius:6px;padding:1px 6px}
.bb-reg-head{margin-bottom:14px}
.bb-title{font-size:26px;font-weight:900;margin-bottom:8px}
.bb-sub{color:#9aa4ab;font-size:13.5px;line-height:1.5;margin-bottom:18px}
/* login: cartão claro como na referência */
.bb-login-card{background:#f2f4f5;border-radius:12px;padding:26px;color:#1a2030}
.bb-login-card .bb-inp{background:#fff;border-color:#dde2e6;color:#1a2030}
.bb-login-card .bb-inp::placeholder{color:#9aa4ab}
.bb-login-card .bb-links a{color:#0d9d58}
.bb-login-card .bb-18{color:#6b7480}
.bb-login-card .bb-18 b{border-color:#6b7480}
.bb-login-card .err{background:#fdeaea;color:#d92d20}

/* painel da conta */
.cta-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.cta-head b{font-size:16px}
.cta-bal{font-family:"JetBrains Mono";font-weight:700;font-size:17px;margin-top:4px}
.cta-bal i{color:var(--muted);font-size:13px}
.cta-btns{display:flex;gap:8px}
.bb-btn{border-radius:9px;padding:11px 16px;font-size:13px;font-weight:800;border:1.5px solid var(--border);background:transparent;color:var(--text);display:inline-flex;align-items:center;gap:7px}
.bb-btn.solid{background:var(--green);border-color:var(--green);color:#04150c}
.bb-btn.ghost:hover{background:rgba(255,255,255,.06)}
.cta-disp{display:flex;gap:26px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:13px 16px;margin-bottom:16px}
.cta-disp small{display:block;color:var(--muted);font-size:11px}
.cta-disp b{font-family:"JetBrains Mono";font-size:14.5px}
.cta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.cta-grid button{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px 6px;color:var(--text);transition:border-color .15s}
.cta-grid button:hover{border-color:var(--green)}
.cta-grid i{font-size:19px;color:var(--lime)}
.cta-grid small{font-size:11.5px;color:var(--muted)}
.cta-links{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.cta-links a{padding:13px 4px;font-size:13.5px;font-weight:600;color:var(--text);border-bottom:1px solid var(--border)}
.cta-links a:hover{color:var(--lime)}

/* depósito */
.dep-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.dep-head i{font-size:30px;color:#00b1a5}
.dep-head b{font-size:20px}
.dep-lbl{display:block;font-size:12px;color:var(--muted);font-weight:600;margin:0 2px 6px}
.dep-hint{font-size:12px;color:var(--muted2);margin:-4px 2px 12px}
.dep-chips{display:flex;gap:8px;margin-bottom:14px}
.dep-chips button{flex:1;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 4px;font-size:13px;font-weight:700;color:var(--text)}
.dep-chips button:hover{border-color:var(--green)}
.dep-help{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:13px;font-size:13px;font-weight:700;color:var(--text);margin-top:10px}
.qr-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px 16px;text-align:center;margin-bottom:14px}
.qr-card p{font-size:14px;font-weight:600;line-height:1.4}
.qr-card #qrBox{background:#fff;border-radius:12px;padding:10px;display:inline-flex}
.dep-copy{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:#fff;border:0;border-radius:12px;padding:13px;font-size:13.5px;font-weight:700;color:#141a28;margin-top:12px}

/* config / histórico */
.pf-back{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;color:var(--lime);font-weight:700;font-size:13.5px;padding:0 0 12px}
.pf-sec{font-size:12px;font-weight:700;color:var(--muted);margin:16px 0 8px}
.cfg-box{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.cfg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border-bottom:1px solid var(--border)}
.cfg-row:last-child{border-bottom:0}
.cfg-row b{font-size:13.5px;font-weight:700;white-space:nowrap}
.cfg-val{font-size:13px;color:var(--muted);text-align:right}
.cfg-inp{border:0;background:transparent;text-align:right;font-size:13.5px;color:var(--text);outline:none;font-family:inherit;min-width:0;flex:1}
.cfg-inp::placeholder{color:var(--muted2)}
.tx-list{max-height:55vh;overflow:auto;display:flex;flex-direction:column;gap:8px;margin-top:6px}
.tx-item{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:11px 13px}
.tx-item i{width:18px;text-align:center;font-size:14px}
.tx-item .txi{flex:1;min-width:0}
.tx-item .txi b{display:block;font-size:13px}
.tx-item .txi small{color:var(--muted);font-size:11px}
.tx-item .txv{font-family:"JetBrains Mono";font-weight:700;font-size:13px}
.txv.pos{color:var(--green)}.txv.neg{color:var(--red)}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--border);margin-top:44px}
.f-in{max-width:1280px;margin:0 auto;padding:26px 2px 30px}
.f-top{padding-bottom:20px;border-bottom:1px solid var(--border);margin-bottom:20px}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px;margin-bottom:24px}
footer h4{font-size:13.5px;font-weight:800;margin-bottom:10px}
footer .cols a{display:block;color:var(--muted);font-size:12.5px;padding:4px 0}
footer .cols a:hover{color:#fff}
.f-bot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:18px}
.f-bot span{color:var(--muted2);font-size:12px}
.f-18{font-size:20px;font-weight:900;color:var(--muted2)}

/* ============ BARRA INFERIOR MOBILE ============ */
.bnav{display:none}
@media(max-width:860px){
  .tnav{display:none}
  .tb-in{gap:10px;padding:10px 14px}
  .logo{font-size:22px}
  .pill{padding:8px 12px;font-size:12px}
  .pill.dark:first-child{display:none}
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:75;background:#0e1613;border-top:1px solid var(--border);padding:8px 4px calc(8px + env(safe-area-inset-bottom));justify-content:space-around}
  .bnav .bi{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted);font-weight:700;padding:4px 10px;min-width:60px}
  .bnav .bi i{font-size:20px}
  .bnav .bi small{font-size:11px}
  .bnav .bi.on{color:var(--lime)}
  .bbmain{padding:14px 12px 96px}
  .modal{padding:0;align-items:flex-end}
  .mcard{border-radius:18px 18px 0 0;max-width:100%;max-height:94vh;overflow-y:auto}
  .gcard{flex-basis:126px}
  .games.ranked .gcard{flex-basis:140px}
  .games.ranked .rk{font-size:48px;left:-10px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
  .cta-grid{grid-template-columns:repeat(3,1fr)}
  .game-frame{height:64vh}
}