/* =====================================================================
   BrinquemBet · App — estilos compartilhados (usa brand/tokens.css)
   ===================================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bb-ink); color:var(--bb-text);
  font-family:var(--bb-font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; min-height:100svh;
  background-image:radial-gradient(90% 50% at 50% -20%, rgba(184,255,57,.10), transparent 60%);
}
img,svg,canvas{max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit}
.wrap{max-width:1080px; margin-inline:auto; padding-inline:clamp(16px,4vw,26px); width:100%}
h1,h2,h3{font-family:var(--bb-font-display); letter-spacing:-.02em; line-height:1.1; margin:0}
:where(a,button,input,select,[tabindex]):focus-visible{outline:2px solid var(--bb-lime-500); outline-offset:3px; border-radius:10px}

/* ---------- topbar ---------- */
.topbar{position:sticky; top:0; z-index:50; background:rgba(6,13,10,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bb-line)}
.tb-in{display:flex; align-items:center; gap:12px; height:64px}
.brand{display:flex; align-items:center; gap:9px; font-family:var(--bb-font-display); font-weight:700;
  font-size:1.15rem; letter-spacing:-.03em}
.brand img{width:30px; height:30px}
.brand .bet{color:var(--bb-lime-500)}
.tb-right{margin-left:auto; display:flex; align-items:center; gap:10px}
.saldo-pill{font-family:var(--bb-font-mono); font-weight:700; font-size:.92rem; color:var(--bb-lime-500);
  background:rgba(184,255,57,.08); border:1px solid rgba(184,255,57,.25); border-radius:var(--bb-r-pill);
  padding:.45em .95em; white-space:nowrap}
.userchip{position:relative}
.userchip>button{display:flex; align-items:center; gap:.5em; background:var(--bb-surface); color:var(--bb-text);
  border:1px solid var(--bb-line-strong); border-radius:var(--bb-r-pill); padding:.42em .95em; cursor:pointer; font-weight:600; font-size:.9rem}
.userchip .menu{position:absolute; right:0; top:calc(100% + 8px); min-width:180px; background:var(--bb-elev);
  border:1px solid var(--bb-line-strong); border-radius:var(--bb-r-md); padding:6px; display:none;
  box-shadow:var(--bb-shadow); z-index:60}
.userchip.open .menu{display:block}
.userchip .menu a,.userchip .menu button{display:block; width:100%; text-align:left; padding:.6em .9em;
  border:0; background:none; color:var(--bb-text); border-radius:10px; cursor:pointer; font-size:.92rem}
.userchip .menu a:hover,.userchip .menu button:hover{background:var(--bb-surface-2)}
.userchip .menu .danger{color:var(--bb-live)}

/* ---------- botões ---------- */
.btn{font-family:var(--bb-font-display); font-weight:700; border-radius:var(--bb-r-pill); border:0; cursor:pointer;
  min-height:46px; padding:.55em 1.4em; font-size:.98rem; display:inline-flex; align-items:center; justify-content:center;
  gap:.5em; text-decoration:none; transition:transform .15s, box-shadow .15s, opacity .15s}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.btn-lime{background:var(--bb-grad-lime); color:var(--bb-on-lime); box-shadow:var(--bb-glow-lime)}
.btn-gold{background:var(--bb-grad-gold); color:#3a1f00}
.btn-ghost{background:transparent; color:var(--bb-text); border:1px solid var(--bb-line-strong)}
.btn-danger{background:linear-gradient(135deg,#FF5468,#E5344A); color:#fff}
.btn-sm{min-height:38px; padding:.35em 1.05em; font-size:.88rem}
.btn-lg{min-height:56px; padding:.7em 1.8em; font-size:1.08rem}
.btn-block{width:100%}

/* ---------- forms ---------- */
.field{display:block; margin-bottom:14px}
.field label{display:block; font-size:.85rem; font-weight:600; color:var(--bb-muted); margin-bottom:6px}
.input{width:100%; min-height:50px; border-radius:14px; border:1px solid var(--bb-line-strong);
  background:var(--bb-surface); color:var(--bb-text); padding:0 16px; font:500 1rem var(--bb-font-body); outline:none}
.input:focus{border-color:var(--bb-lime-700); box-shadow:0 0 0 3px rgba(184,255,57,.14)}
.check{display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--bb-muted); margin:14px 0}
.check input{width:19px; height:19px; accent-color:var(--bb-lime-500); margin-top:2px; flex:none}
.err{display:none; background:rgba(255,84,104,.1); border:1px solid rgba(255,84,104,.4); color:#ffb9c2;
  border-radius:12px; padding:10px 14px; font-size:.9rem; margin-bottom:14px}
.err.on{display:block}

/* ---------- cards / painéis ---------- */
.card{background:var(--bb-surface); border:1px solid var(--bb-line); border-radius:var(--bb-r-lg);
  padding:clamp(20px,4vw,30px); box-shadow:var(--bb-shadow)}
.panel{background:var(--bb-surface); border:1px solid var(--bb-line); border-radius:var(--bb-r-md); padding:20px}
.panel h3{font-size:1.05rem; margin-bottom:14px}
.kicker{display:inline-block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bb-lime-700); font-weight:700; margin-bottom:8px}
.muted{color:var(--bb-muted)} .faint{color:var(--bb-faint)} .lime{color:var(--bb-lime-500)} .gold{color:var(--bb-gold-500)}
.mono{font-family:var(--bb-font-mono)}
.demo-badge{display:inline-flex; align-items:center; gap:.4em; font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bb-gold-500); border:1px dashed rgba(255,203,69,.5);
  border-radius:var(--bb-r-pill); padding:.3em .8em}
.plus18{display:inline-grid; place-items:center; width:1.9em; height:1.9em; border-radius:50%;
  background:var(--bb-live); color:#fff; font-weight:800; font-size:.7em; vertical-align:middle}

/* ---------- tabela ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:.9rem}
.tbl th{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--bb-faint);
  text-align:left; padding:8px 10px; border-bottom:1px solid var(--bb-line-strong)}
.tbl td{padding:10px; border-bottom:1px solid var(--bb-line)}
.tbl .pos{color:var(--bb-lime-500); font-family:var(--bb-font-mono); font-weight:700}
.tbl .neg{color:var(--bb-live); font-family:var(--bb-font-mono); font-weight:700}
.tbl-scroll{overflow-x:auto}

/* ---------- toast ---------- */
.toast-zone{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:100;
  display:flex; flex-direction:column; gap:8px; width:min(440px,calc(100vw - 32px))}
.toast{background:var(--bb-elev); border:1px solid var(--bb-line-strong); border-left:4px solid var(--bb-lime-500);
  border-radius:14px; padding:13px 16px; font-weight:600; font-size:.94rem; box-shadow:var(--bb-shadow);
  animation:tin .25s ease}
.toast.bad{border-left-color:var(--bb-live)}
.toast.gold{border-left-color:var(--bb-gold-500)}
@keyframes tin{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* ---------- modal ---------- */
.modal-bg{position:fixed; inset:0; background:rgba(3,8,5,.72); backdrop-filter:blur(6px); z-index:90;
  display:none; place-items:center; padding:18px}
.modal-bg.open{display:grid}
.modal{width:min(460px,100%); background:var(--bb-elev); border:1px solid var(--bb-line-strong);
  border-radius:var(--bb-r-lg); padding:26px; position:relative}
.modal .x{position:absolute; top:14px; right:14px; background:none; border:0; color:var(--bb-faint);
  font-size:1.3rem; cursor:pointer; line-height:1}
.modal h3{margin-bottom:6px}

/* ---------- página de jogo ---------- */
.game-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:26px 0 18px}
.game-head h1{font-size:clamp(1.5rem,4vw,2.1rem)}
.game-head .back{color:var(--bb-muted); font-size:.9rem}
.game-head .back:hover{color:var(--bb-lime-500)}
.hist{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.hist .h{font-family:var(--bb-font-mono); font-weight:700; font-size:.78rem; border-radius:var(--bb-r-pill);
  padding:.32em .7em; border:1px solid var(--bb-line-strong); color:var(--bb-text)}
.hist .h.red{background:rgba(255,84,104,.16); color:#ff8b98; border-color:rgba(255,84,104,.35)}
.hist .h.blk{background:var(--bb-surface-2)}
.hist .h.grn{background:rgba(184,255,57,.14); color:var(--bb-lime-500); border-color:rgba(184,255,57,.35)}
.hist .h.gld{background:rgba(255,203,69,.14); color:var(--bb-gold-500); border-color:rgba(255,203,69,.4)}

footer.app-foot{margin:56px 0 34px; text-align:center; color:var(--bb-faint); font-size:.8rem}