/* ============================================================
   Jeux du Mboa — habillage du compte et du portefeuille.
   Les couleurs sont prises sur la page hôte quand elle en définit
   (le portail et les jeux ont chacun leur palette), avec un repli
   sobre pour les pages qui n'en ont pas.
   ============================================================ */
.mboa-pill{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--panel1,#1d1a13);
  color:var(--cream,#ece2d2);
  border:1px solid var(--line,#ece2d233);
  border-radius:999px;padding:7px 15px;
  font:inherit;font-size:13.5px;font-weight:500;
  cursor:pointer;transition:.15s;white-space:nowrap;
}
.mboa-pill:hover{border-color:var(--gold,#eab54c);color:var(--gold,#eab54c)}
.mboa-pill:focus-visible{outline:2px solid var(--gold,#eab54c);outline-offset:2px}
.mboa-pill b{font-variant-numeric:tabular-nums;font-weight:700}
.mboa-pill .mboa-dim{opacity:.6;font-weight:400}
.mboa-jeton{
  width:14px;height:14px;border-radius:50%;flex:none;
  background:linear-gradient(160deg,var(--gold,#eab54c),var(--gold-d,#c98f3c));
  box-shadow:inset 0 -1px 2px #0004;
}

.mboa-ov{
  position:fixed;inset:0;background:#000000a8;z-index:2000;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.mboa-ov.on{display:flex}
.mboa-modal{
  position:relative;width:100%;max-width:380px;
  background:linear-gradient(160deg,var(--modal1,#26201a),var(--modal2,#14110c));
  border:1px solid var(--line,#ece2d233);border-radius:18px;
  padding:26px 24px 24px;box-shadow:0 24px 60px #000;
  color:var(--cream,#ece2d2);
}
.mboa-x{
  position:absolute;top:10px;right:12px;background:none;border:none;
  color:var(--cream,#ece2d2);opacity:.45;font-size:17px;cursor:pointer;
  padding:6px;line-height:1;font-family:inherit;
}
.mboa-x:hover{opacity:1}
.mboa-x:focus-visible{outline:2px solid var(--gold,#eab54c);outline-offset:2px;border-radius:6px}

.mboa-corps{display:flex;flex-direction:column;gap:12px}
.mboa-corps h3{
  margin:0;font-size:20px;font-weight:600;color:var(--gold,#eab54c);
  overflow:hidden;text-overflow:ellipsis;
}
.mboa-sous{margin:0;font-size:13.5px;line-height:1.55;opacity:.72}
.mboa-note{margin:4px 0 0;font-size:12.5px;line-height:1.5;opacity:.45}

.mboa-in{
  width:100%;padding:11px 14px;border-radius:11px;
  border:1px solid var(--line,#ece2d233);
  background:#00000038;color:var(--cream,#ece2d2);
  font-family:inherit;font-size:15.5px;
}
.mboa-in:focus-visible{outline:2px solid var(--gold,#eab54c);outline-offset:1px}
.mboa-code{
  text-align:center;letter-spacing:.4em;font-size:22px;font-weight:700;
  font-variant-numeric:tabular-nums;
}

.mboa-btn{
  width:100%;padding:11px 16px;border-radius:11px;border:none;
  background:linear-gradient(180deg,var(--gold,#eab54c),var(--gold-d,#c98f3c));
  color:var(--onaccent,#241609);font-family:inherit;font-size:14.5px;font-weight:700;
  cursor:pointer;transition:.15s;
}
.mboa-btn:hover{filter:brightness(1.07)}
.mboa-btn:disabled{opacity:.55;cursor:default;filter:none}
.mboa-btn:focus-visible{outline:2px solid var(--gold,#eab54c);outline-offset:2px}
.mboa-btn.ghost{
  background:transparent;color:var(--cream,#ece2d2);
  border:1px solid var(--line,#ece2d233);font-weight:500;
}
.mboa-btn.ghost:hover{border-color:var(--gold,#eab54c);color:var(--gold,#eab54c);filter:none}

.mboa-solde{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#ffffff0d;border:1px solid var(--line,#ece2d233);
  border-radius:12px;padding:13px 15px;
}
.mboa-solde b{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--gold,#eab54c)}
.mboa-lab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.5}

.mboa-err{
  margin:0;font-size:13.5px;line-height:1.5;
  color:#f0907f;background:#cf5a4a1f;border:1px solid #cf5a4a55;
  border-radius:10px;padding:9px 12px;
}

@media (prefers-reduced-motion:reduce){.mboa-pill,.mboa-btn{transition:none}}