/* my-bonuses.css — Frenzy96 player My Bonuses (vanilla). 2026-06-01. */
#modal-mybonuses .modal.mb-root {
  --mb-bg:#0b0c10; --mb-surface:#141620; --mb-surface2:#0f1117; --mb-border:#1e2028; --mb-border2:#1a1c24;
  --mb-gold:#e8a124; --mb-green:#2dc98a; --mb-red:#e84040; --mb-text:#eee; --mb-text2:#aaa; --mb-text3:#555; --mb-text4:#3a3e4d;
  background:var(--mb-bg) !important; color:var(--mb-text);
  border-radius:20px 20px 0 0; width:100% !important; max-width:100vw !important; padding:0 !important; box-sizing:border-box;
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
  max-height:92vh !important; height:92vh !important; overflow:hidden !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.mb-hd { flex:0 0 auto !important; display:flex; align-items:center; gap:11px; padding:14px 14px 12px; border-bottom:1px solid var(--mb-border2); }
.mb-back { width:30px; height:30px; flex:0 0 30px; border-radius:50%; background:#252831; border:1px solid #3a3e4d; color:#888; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.mb-back svg { width:16px; height:16px; }
.mb-title { flex:1; font-size:16px; font-weight:700; color:#fff; }
.mb-total { text-align:right; }
.mb-total .l { display:block; font-size:8px; color:var(--mb-text3); text-transform:uppercase; letter-spacing:.5px; }
.mb-total .a { font-size:15px; font-weight:800; color:var(--mb-gold); font-variant-numeric:tabular-nums; }

.mb-tabs { flex:0 0 auto !important; display:flex; gap:6px; padding:10px 14px; }
.mb-tab { flex:1; padding:8px; font-size:12px; font-weight:600; border:1px solid var(--mb-border); background:var(--mb-surface); color:var(--mb-text2); border-radius:9px; cursor:pointer; }
.mb-tab.on { background:var(--mb-gold); color:#0b0c10; border-color:var(--mb-gold); }

.mb-body { flex:1 1 auto !important; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 14px 24px; }

/* ── active card ── */
.mb-card { background:var(--mb-surface); border:1px solid var(--mb-border); border-radius:14px; overflow:hidden; margin-bottom:14px; }
.mb-card-top { padding:12px 14px; position:relative; }
.mb-card-top .nm { font-size:13px; font-weight:700; color:#fff; }
.mb-badges { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.mb-bdg { font-size:9px; font-weight:700; padding:3px 8px; border-radius:6px; text-transform:uppercase; letter-spacing:.4px; }
.mb-bdg.type { background:rgba(255,255,255,.08); color:#cbd5e1; }
.mb-bdg.active { background:#0d2a1c; color:var(--mb-green); }
.mb-bdg.locked { background:#222; color:#888; }
.mb-bdg.unlocked { background:#2a2208; color:var(--mb-gold); }
.mb-card-bd { padding:12px 14px 14px; border-top:1px solid var(--mb-border2); }
.mb-bal { font-size:22px; font-weight:800; color:var(--mb-gold); font-variant-numeric:tabular-nums; }
.mb-bal-sub { font-size:10px; color:var(--mb-text3); margin-bottom:12px; }
.mb-wg-row { display:flex; justify-content:space-between; font-size:10px; color:var(--mb-text2); margin-bottom:5px; }
.mb-wg-row .v { color:#fff; font-variant-numeric:tabular-nums; }
.mb-bar { height:5px; border-radius:4px; background:#1e2028; overflow:hidden; }
.mb-bar-fill { height:100%; border-radius:4px; transition:width .4s; }
.mb-wg-pct { font-size:10px; color:var(--mb-text2); margin-top:4px; text-align:right; }
.mb-wg-hint { font-size:10px; margin-top:6px; }
.mb-wg-hint.todo { color:var(--mb-gold); }
.mb-wg-hint.done { color:var(--mb-green); }
.mb-detail { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin-top:14px; padding-top:12px; border-top:1px solid var(--mb-border2); }
.mb-dr { display:flex; flex-direction:column; gap:1px; }
.mb-dr .k { font-size:9px; color:var(--mb-text3); text-transform:uppercase; letter-spacing:.4px; }
.mb-dr .v { font-size:12px; color:var(--mb-text); font-weight:600; }
.mb-foot { margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.mb-terms-toggle { font-size:11px; color:var(--mb-text2); cursor:pointer; text-decoration:underline; align-self:flex-start; }
.mb-terms { font-size:11px; color:var(--mb-text3); line-height:1.6; background:var(--mb-surface2); border:1px solid var(--mb-border); border-radius:8px; padding:10px 12px; }
.mb-wd-btn { width:100%; padding:11px; border-radius:10px; background:var(--mb-gold); color:#0b0c10; border:none; font-size:13px; font-weight:700; cursor:pointer; }

/* ── empty ── */
.mb-empty { text-align:center; padding:50px 24px; }
.mb-empty svg { width:32px; height:32px; color:var(--mb-text3); }
.mb-empty .t { font-size:15px; font-weight:600; color:var(--mb-text2); margin-top:12px; }
.mb-empty .s { font-size:12px; color:var(--mb-text3); margin:4px 0 16px; }
.mb-empty .b { padding:10px 18px; border:1px solid var(--mb-gold); color:var(--mb-gold); background:transparent; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; }

/* ── history ── */
.mb-h { display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--mb-border2); }
.mb-h-ic { width:34px; height:34px; flex:0 0 34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px; }
.mb-h-mid { flex:1; min-width:0; }
.mb-h-nm { font-size:12px; font-weight:600; color:var(--mb-text); }
.mb-h-dt { font-size:10px; color:var(--mb-text3); }
.mb-h-right { text-align:right; flex:0 0 auto; }
.mb-h-amt { font-size:13px; font-weight:700; color:var(--mb-gold); font-variant-numeric:tabular-nums; }
.mb-h-st { font-size:9px; font-weight:700; margin-top:2px; }
.mb-h-st.COMPLETED { color:var(--mb-green); } .mb-h-st.EXPIRED { color:#888; } .mb-h-st.FORFEITED { color:var(--mb-red); }
.mb-loading { text-align:center; padding:30px; color:var(--mb-text3); font-size:12px; }