/* ══ HOME / GAME AREA ══════════════════════════════════════════════════════ */

/* ── 24h / History Popup ── */
.popup-24h {
  background:#14143a; border:1px solid rgba(255,255,255,.1);
  border-radius:20px; padding:0;
  width:100%; max-width:580px; max-height:85vh;
  display:flex; flex-direction:column;
  position:relative; box-shadow:0 24px 64px rgba(0,0,0,.6);
  animation:popup-in .22s ease;
}
.popup-24h-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.07);
  font-weight:700; font-size:.95rem; flex-shrink:0;
}
.popup-24h-stats {
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  padding:.6rem 1rem; background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.07); font-size:.78rem; flex-shrink:0;
}
.popup-24h-body { overflow-y:auto; flex:1; }
.popup-24h-body table { width:100%; border-collapse:collapse; }

/* ── Result cell mobile layout ── */
.result-cell { display:flex; flex-direction:column; gap:2px; }
.result-top { display:flex; align-items:center; gap:5px; }
.result-sub { display:flex; gap:4px; flex-wrap:wrap; }

/* ── Modal overlay ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  z-index: 999; display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
.modal-overlay.open { display: flex; }

/* ── Bet Popup ── */
.bet-popup {
  background: #14143a; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; padding: 1.5rem 1rem;
  width: 100%; max-width: 360px; text-align: center;
  position: relative; box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  animation: popup-in .22s ease;
}
@keyframes popup-in { from{opacity:0;transform:scale(.92) translateY(16px)} to{opacity:1;transform:scale(1) translateY(0)} }
.popup-close {
  position:absolute; top:12px; right:14px;
  background:none; border:none; color:var(--muted); font-size:1.5rem;
  cursor:pointer; line-height:1; padding:2px 6px; border-radius:6px;
}
.popup-close:hover { color:var(--text); background:rgba(255,255,255,.08); }
.popup-icon  { font-size:2.2rem; margin-bottom:4px; }
.popup-name  { font-size:1.2rem; font-weight:800; margin-bottom:2px; }
.popup-odds  {
  font-size:1.6rem; font-weight:900; line-height:1.1;
  background:linear-gradient(135deg,#fbbf24,#f97316);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; margin-bottom:6px;
}
.popup-saldo { font-size:.8rem; color:var(--muted); margin-bottom:1rem; }
.quick-amounts {
  display:grid; grid-template-columns:repeat(3,1fr); gap:5px;
  margin-bottom:.5rem;
}
.quick-amounts button {
  padding:6px 4px; border-radius:7px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  color:var(--muted); font-family:inherit; font-size:.78rem; font-weight:600;
  cursor:pointer; transition:all .15s; text-align:center;
}
.quick-amounts button:hover { background:rgba(124,58,237,.3); border-color:var(--accent); color:white; }
.popup-bet-controls {
  display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:.65rem;
}
.pbc-btn {
  padding:6px 4px; border-radius:7px; text-align:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  color:var(--text); font-family:inherit; font-size:.78rem; font-weight:700;
  cursor:pointer; transition:all .15s;
}
.pbc-btn:hover { background:rgba(124,58,237,.25); border-color:var(--accent); color:white; }
.pbc-clear { color:var(--red) !important; border-color:rgba(239,68,68,.3) !important; }
.pbc-clear:hover { background:rgba(239,68,68,.2) !important; }
.popup-input {
  width:100%; padding:11px 14px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:var(--text); font-family:inherit; font-size:1rem; font-weight:700;
  outline:none; text-align:center; margin-bottom:8px; transition:border-color .2s;
}
.popup-input:focus { border-color:var(--accent); background:rgba(124,58,237,.08); }
.popup-actions { display:flex; gap:.6rem; }
.popup-cancel {
  flex:1; padding:10px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  color:var(--muted); font-family:inherit; font-size:.9rem; font-weight:600;
  cursor:pointer; transition:all .2s;
}
.popup-cancel:hover { background:rgba(255,255,255,.12); color:var(--text); }
.popup-confirm {
  flex:2; padding:10px; border-radius:10px; border:none;
  background:linear-gradient(135deg,var(--accent),var(--blue));
  color:white; font-family:inherit; font-size:.95rem; font-weight:800;
  cursor:pointer; transition:all .2s;
}
.popup-confirm:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(124,58,237,.45); }
.popup-confirm:disabled { opacity:.4; cursor:not-allowed; transform:none; }

/* ── Game Area ── */
#game-area {
  background: linear-gradient(180deg,#08082a,#0d0d2e);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 0.5rem 0.5rem 1.25rem;
}
.ga-container { max-width: 860px; margin: 0 auto; }

/* Row 1: Periode | Saldo */
.ga-info-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .85rem; font-size: .82rem; gap: .5rem;
}
.btn-cara-bermain {
  padding: 6px 14px; border-radius: 10px;
  border: 1px solid rgba(124,58,237,.5);
  background: rgba(124,58,237,.15);
  color: var(--purple); font-family: inherit;
  font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: background .2s;
  white-space: nowrap; flex-shrink: 0;
}
.btn-cara-bermain:hover { background: rgba(124,58,237,.3); }
@media (max-width: 400px) {
  .btn-cara-bermain { font-size: .7rem; padding: 5px 8px; }
  .btn-cara-bermain .cb-text { display: none; }
}
.ga-info-item { display:flex; flex-direction:column; gap:1px; }
.ga-info-item.right { align-items:flex-end; }
.ga-lbl { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.ga-val { font-weight:700; color:var(--text); font-family:monospace; font-size:.85rem; }
.ga-val.gold { color:var(--gold); font-size:.95rem; }

/* Row 2: Countdown + Balls */
.ga-display-row {
  display: grid; grid-template-columns: auto 1fr;
  gap: 2rem; align-items: center;
  max-width: 480px; margin: 0 auto 1.1rem;
}
.ga-cd-col { text-align:center; }
.ga-cd-label { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px; }
.ga-cd-time {
  font-size:2.6rem; font-weight:900; font-family:'Courier New',monospace;
  background:linear-gradient(135deg,#a78bfa,#60a5fa);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; line-height:1;
}
.ga-cd-time.urgent {
  background:linear-gradient(135deg,#ef4444,#f59e0b);
  -webkit-background-clip:text; background-clip:text;
  animation:blink-urg .5s ease infinite alternate;
}
@keyframes blink-urg { to{opacity:.5} }

.ga-balls-col { text-align:center; }
.ga-balls-row {
  display:flex; justify-content:center; gap:.85rem; margin-bottom:.4rem;
}
.ga-ball {
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; font-weight:900; color:white;
  transition:all .4s; flex-shrink:0;
}
.ga-ball.default { background:linear-gradient(135deg,#1a1a4a,#252566); border:2px solid rgba(255,255,255,.1); }
.ga-ball.green  { background:linear-gradient(135deg,#065f46,#10b981); box-shadow:0 0 20px rgba(16,185,129,.5); }
.ga-ball.red    { background:linear-gradient(135deg,#991b1b,#ef4444); box-shadow:0 0 20px rgba(239,68,68,.5); }
.ga-ball.purple { background:linear-gradient(135deg,#6b21a8,#a855f7); box-shadow:0 0 20px rgba(168,85,247,.5); }
.ga-ball.spinning { animation:spin360 .35s linear infinite; }
@keyframes spin360 { to{transform:rotate(360deg)} }

.ga-sum {
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%; margin:0 auto;
  font-size:1.4rem; font-weight:900; color:white;
  border:2px solid rgba(255,255,255,.15); transition:all .4s;
}
.ga-sum.default  { background:#1a1a4a; }
.ga-sum.green    { background:linear-gradient(135deg,#047857,#10b981); border-color:var(--green); box-shadow:0 0 20px rgba(16,185,129,.5); }
.ga-sum.red      { background:linear-gradient(135deg,#991b1b,#ef4444); border-color:var(--red);   box-shadow:0 0 20px rgba(239,68,68,.5); }
.ga-sum.purple   { background:linear-gradient(135deg,#6b21a8,#a855f7); border-color:var(--purple);box-shadow:0 0 20px rgba(168,85,247,.5); }

/* Bet button rows */
.ga-btn-group {
  display:flex; justify-content:center; gap:.5rem;
  margin-bottom:.5rem; flex-wrap:wrap;
}
.ga-btn-group-4 .ga-btn { max-width:140px; }
.ga-btn {
  padding:9px 0; border-radius:11px; border:2px solid transparent;
  font-family:inherit; font-size:.88rem; font-weight:800;
  cursor:pointer; transition:all .15s; flex:1; max-width:130px;
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.ga-btn:hover { transform:translateY(-2px); }
.ga-btn:active { transform:translateY(0); }
.ga-odds { font-size:.72rem; font-weight:600; opacity:.75; }

.gb-green  { background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.4); color:#34d399; }
.gb-green:hover  { background:rgba(16,185,129,.28); border-color:#10b981; }
.gb-red    { background:rgba(239,68,68,.12);  border-color:rgba(239,68,68,.4);  color:#f87171; }
.gb-red:hover    { background:rgba(239,68,68,.28);  border-color:#ef4444; }
.gb-purple { background:rgba(168,85,247,.15); border-color:rgba(168,85,247,.45);color:#c084fc; }
.gb-purple:hover { background:rgba(168,85,247,.3);  border-color:#a855f7; }
.gb-gold   { background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.4); color:#fbbf24; }
.gb-gold:hover   { background:rgba(245,158,11,.28); border-color:#f59e0b; }
.gb-blue   { background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.4); color:#60a5fa; }
.gb-blue:hover   { background:rgba(59,130,246,.28); border-color:#3b82f6; }
.gb-teal   { background:rgba(20,184,166,.12); border-color:rgba(20,184,166,.4); color:#2dd4bf; }
.gb-teal:hover   { background:rgba(20,184,166,.28); border-color:#14b8a6; }
.gb-pink   { background:rgba(236,72,153,.12); border-color:rgba(236,72,153,.4); color:#f472b6; }
.gb-pink:hover   { background:rgba(236,72,153,.28); border-color:#ec4899; }
/* Besar/Kecil/Ganjil/Genap */
.gb-orange { background:rgba(249,115,22,.12); border-color:rgba(249,115,22,.4); color:#fb923c; }
.gb-orange:hover { background:rgba(249,115,22,.28); border-color:#f97316; }
.gb-dark   { background:rgba(75,85,99,.15);  border-color:rgba(107,114,128,.4); color:#9ca3af; }
.gb-dark:hover   { background:rgba(75,85,99,.3);   border-color:#6b7280; }
.gb-yellow { background:rgba(234,179,8,.12); border-color:rgba(234,179,8,.4);  color:#fde047; }
.gb-yellow:hover { background:rgba(234,179,8,.28);  border-color:#eab308; }
/* Combo: dark cyan/magenta bg + orange/blue border */
.gb-odd-big   { background:rgba(20,184,166,.12); border-color:rgba(249,115,22,.65); color:#fb923c; }
.gb-odd-big:hover   { background:rgba(20,184,166,.25); border-color:#f97316; }
.gb-odd-small { background:rgba(20,184,166,.12); border-color:rgba(59,130,246,.65); color:#60a5fa; }
.gb-odd-small:hover { background:rgba(20,184,166,.25); border-color:#3b82f6; }
.gb-even-big  { background:rgba(236,72,153,.18); border-color:rgba(249,115,22,.65); color:#fb923c; }
.gb-even-big:hover  { background:rgba(236,72,153,.3);  border-color:#f97316; }
.gb-even-small{ background:rgba(236,72,153,.18); border-color:rgba(59,130,246,.65); color:#60a5fa; }
.gb-even-small:hover{ background:rgba(236,72,153,.3);  border-color:#3b82f6; }

/* Number section */
.ga-nums-section { margin:.6rem 0; }
.ga-nums-label {
  font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.5px; margin-bottom:.4rem; padding:0 2px;
}
.ga-num-grid {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:5px;
}
.ga-num {
  width:52px; height:52px; border-radius:10px; border:2px solid;
  font-family:inherit; cursor:pointer; transition:all .15s;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  padding:2px 0;
}
.ga-num:hover { transform:scale(1.12); filter:brightness(1.3); }
.ga-num.n-ball { border-radius:50%; }
.gn-num  { font-size:1rem; font-weight:900; line-height:1; }
.gn-odds { font-size:.6rem; font-weight:600; opacity:.65; line-height:1; }
.n-green   { border-color:rgba(16,185,129,.5); color:#34d399; background:rgba(16,185,129,.1); }
.n-red     { border-color:rgba(239,68,68,.5);  color:#f87171; background:rgba(239,68,68,.1); }
.n-purple  { border-color:rgba(168,85,247,.6); color:#c084fc; background:rgba(168,85,247,.15); }
.n-neutral { border-color:rgba(255,255,255,.15); color:var(--text); background:rgba(255,255,255,.05); }
.n-neutral:hover { border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.1); }
.n-odd-big   { color:#22d3ee; background:rgba(6,182,212,.15);  border-color:rgba(249,115,22,.65); }
.n-odd-small { color:#22d3ee; background:rgba(6,182,212,.15);  border-color:rgba(59,130,246,.65); }
.n-even-big  { color:#f472b6; background:rgba(236,72,153,.15); border-color:rgba(249,115,22,.65); }
.n-even-small{ color:#f472b6; background:rgba(236,72,153,.15); border-color:rgba(59,130,246,.65); }

/* Active bets */
.ga-bets-box {
  margin-top:.9rem; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07); border-radius:12px; overflow:hidden;
}
.ga-bets-head {
  padding:7px 14px; font-size:.72rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.5px;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:space-between;
}
.cancel-all-btn {
  padding:3px 10px; border-radius:6px; border:1px solid rgba(239,68,68,.4);
  background:rgba(239,68,68,.1); color:#f87171;
  font-family:inherit; font-size:.72rem; font-weight:700; cursor:pointer;
  text-transform:none; letter-spacing:0;
}
.cancel-all-btn:hover { background:rgba(239,68,68,.2); }
.ga-bets-head .pbc-btn {
  padding:3px 9px; font-size:.72rem; border-radius:6px; text-transform:none; letter-spacing:0;
}
.cancel-bet-btn {
  width:22px; height:22px; border-radius:6px;
  border:1px solid rgba(239,68,68,.4); background:rgba(239,68,68,.1);
  color:#f87171; font-size:.8rem; cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
}
.cancel-bet-btn:hover { background:rgba(239,68,68,.25); }
.ga-lock-notice {
  padding:6px 14px; font-size:.75rem; font-weight:700;
  color:var(--gold); background:rgba(245,158,11,.08);
  border-bottom:1px solid rgba(245,158,11,.2); text-align:center;
}

/* Locked state — hide all bet controls */
#game-area.locked .ga-btn,
#game-area.locked .ga-num,
#game-area.locked .cancel-bet-btn,
#game-area.locked .cancel-all-btn {
  display:none !important;
}
.ga-bets-tbl { width:100%; border-collapse:collapse; font-size:.81rem; }
.ga-bets-tbl th { padding:6px 12px; color:var(--muted); font-weight:500; border-bottom:1px solid rgba(255,255,255,.06); text-align:left; }
.ga-bets-tbl td { padding:7px 12px; border-bottom:1px solid rgba(255,255,255,.04); }
.ga-bets-tbl tr:last-child td { border-bottom:none; }
.s-pending { color:var(--muted); }
.s-win     { color:var(--green); font-weight:700; }
.s-lose    { color:var(--red); }
.s-refund  { color:var(--gold); }

/* ── Results table: color dots ── */
.cdot-wrap { display:flex; align-items:center; gap:3px; }
.cdot {
  width:14px; height:14px; border-radius:50%;
  display:inline-block; flex-shrink:0;
  box-shadow:0 0 6px rgba(0,0,0,.4);
}
.cdot.cg { background:var(--green); box-shadow:0 0 8px rgba(16,185,129,.6); }
.cdot.cr { background:var(--red);   box-shadow:0 0 8px rgba(239,68,68,.6);  }
.cdot.cp { background:var(--purple);box-shadow:0 0 8px rgba(168,85,247,.6); }

/* Result ball mini */
.rbm {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  font-size:.82rem; font-weight:800;
}
.rbm.rg { background:rgba(16,185,129,.2); color:var(--green); border:1px solid rgba(16,185,129,.5); }
.rbm.rr { background:rgba(239,68,68,.2);  color:var(--red);   border:1px solid rgba(239,68,68,.5);  }
.rbm.rp { background:rgba(168,85,247,.25);color:var(--purple);border:1px solid rgba(168,85,247,.6); }

/* ── Promo slider ── */
.promo-slider-outer {
  overflow:hidden; margin-bottom:2rem; position:relative;
}
.promo-slider-track {
  display:flex; gap:1rem;
  animation: pslide 28s linear infinite;
}
.promo-slider-track:hover { animation-play-state:paused; }
@keyframes pslide {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
.promo-slide-card {
  flex-shrink:0; width:280px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.1rem 1.25rem; position:relative; overflow:hidden;
}
.promo-slide-card::before {
  content:''; position:absolute; top:0; right:0;
  width:80px; height:80px; border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.25),transparent 70%);
  transform:translate(25%,-25%);
}
.ps-tag { font-size:.7rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.ps-title { font-size:.95rem; font-weight:800; margin-bottom:4px; }
.ps-bonus { font-size:1.4rem; font-weight:900; color:var(--gold); }
.ps-desc { font-size:.75rem; color:var(--muted); margin-top:4px; }

/* ── Profile modal ── */
.profile-modal {
  background:#14143a; border:1px solid rgba(255,255,255,.1);
  border-radius:20px; padding:1.75rem;
  width:100%; max-width:360px;
}
.pm-avatar {
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; font-weight:800; color:white;
  margin:0 auto .75rem;
}
.pm-username { text-align:center; font-size:1.2rem; font-weight:800; margin-bottom:2px; }
.pm-email { text-align:center; font-size:.82rem; color:var(--muted); margin-bottom:1rem; }
.pm-divider { border:none; border-top:1px solid rgba(255,255,255,.07); margin:.75rem 0; }
.pm-row { display:flex; justify-content:space-between; font-size:.83rem; padding:4px 0; }
.pm-row .lbl { color:var(--muted); }
.pm-row .val { font-weight:600; }
.pm-ref-box {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:8px 12px; display:flex; align-items:center;
  gap:8px; margin-top:.75rem; font-size:.78rem;
}
.pm-ref-link { flex:1; color:var(--accent); word-break:break-all; }
.pm-copy-btn {
  padding:4px 10px; border-radius:7px; background:rgba(124,58,237,.2);
  border:1px solid rgba(124,58,237,.4); color:var(--accent);
  cursor:pointer; font-size:.75rem; font-weight:700; white-space:nowrap;
  font-family:inherit;
}

/* ── Nav user chip ── */
.nav-user-chip {
  display:flex; align-items:center; gap:7px;
  padding:5px 12px; border-radius:20px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  cursor:pointer; transition:all .2s; font-size:.85rem; font-weight:600;
}
.nav-user-chip:hover { background:rgba(124,58,237,.2); border-color:rgba(124,58,237,.4); }
.nav-chip-avatar {
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-size:.65rem; font-weight:800; color:white; flex-shrink:0;
}

/* ── Auth with header/footer ── */
.auth-main {
  display:flex; align-items:center; justify-content:center;
  min-height:calc(100vh - 128px); padding:2rem;
  background:radial-gradient(ellipse at 30% 50%,rgba(124,58,237,.12),transparent 55%),
             radial-gradient(ellipse at 70% 50%,rgba(59,130,246,.08),transparent 55%);
}
.auth-footer-mini {
  background:var(--bg2); border-top:1px solid var(--border);
  padding:.9rem 2rem; text-align:center;
  font-size:.78rem; color:var(--muted);
}

/* ── Deposit / Withdraw page ── */
.txn-page {
  display:flex; align-items:flex-start; justify-content:center;
  min-height:calc(100vh - 128px); padding:2rem 1rem;
  background:radial-gradient(ellipse at 30% 50%,rgba(124,58,237,.12),transparent 55%),
             radial-gradient(ellipse at 70% 50%,rgba(59,130,246,.08),transparent 55%);
}
.txn-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:20px; padding:2rem;
  width:100%; max-width:480px;
  box-shadow:0 24px 64px rgba(0,0,0,.5);
}
.txn-title { font-size:1.3rem; font-weight:800; margin-bottom:.25rem; }
.txn-sub   { font-size:.82rem; color:var(--muted); margin-bottom:1.5rem; }
.txn-bal   {
  background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.2);
  border-radius:12px; padding:.75rem 1rem; margin-bottom:1.25rem;
  font-size:.88rem; display:flex; justify-content:space-between; align-items:center;
}
.txn-bal strong { color:var(--gold); font-size:1rem; }

.method-group { display:flex; gap:.5rem; margin-bottom:1.25rem; }
.method-btn {
  flex:1; padding:10px; border-radius:12px;
  border:2px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
  color:var(--muted); font-family:inherit; font-size:.85rem; font-weight:700;
  cursor:pointer; transition:all .2s; text-align:center;
}
.method-btn.active { border-color:var(--accent); background:rgba(124,58,237,.12); color:white; }

.bank-info-box {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:1rem; margin-bottom:1.25rem; font-size:.84rem;
}
.bank-info-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:5px 0; border-bottom:1px solid rgba(255,255,255,.06);
}
.bank-info-row:last-child { border-bottom:none; }
.bank-info-row .lbl { color:var(--muted); }
.bank-info-row .val { font-weight:700; color:var(--text); }

.promo-pick { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.25rem; }
.promo-item {
  padding:9px 12px; border-radius:10px;
  border:2px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03);
  cursor:pointer; display:flex; gap:10px; align-items:center; transition:all .2s;
}
.promo-item.sel { border-color:var(--accent); background:rgba(124,58,237,.12); }
.promo-pct { font-size:1rem; font-weight:900; color:var(--gold); min-width:36px; }
.promo-name { font-size:.85rem; font-weight:700; }
.promo-detail { font-size:.72rem; color:var(--muted); }

.txn-input {
  width:100%; padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:var(--text); font-family:inherit; font-size:1.05rem; font-weight:700;
  outline:none; margin-bottom:.5rem; transition:border-color .2s;
}
.txn-input:focus { border-color:var(--accent); background:rgba(124,58,237,.08); }
.txn-bonus-info {
  font-size:.8rem; color:var(--green); margin-bottom:1rem; display:none;
  background:rgba(16,185,129,.08); border-radius:8px; padding:6px 10px;
}
.txn-btn {
  width:100%; padding:13px; border-radius:12px; border:none;
  background:linear-gradient(135deg,var(--accent),var(--blue));
  color:white; font-family:inherit; font-size:1rem; font-weight:800;
  cursor:pointer; margin-top:.5rem; transition:all .2s;
}
.txn-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(124,58,237,.4); }
.txn-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; }
.txn-alert { padding:10px 14px; border-radius:10px; font-size:.82rem;
  margin-bottom:1rem; display:none; }
.txn-alert.err { background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); color:#f87171; }
.txn-alert.ok  { background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.3); color:#34d399; }

/* ── Image slider (admin-managed) ── */
.img-slider-wrap { position:relative; max-width:900px; margin:1.5rem auto; border-radius:var(--radius); overflow:hidden; }
.img-slider-track { display:flex; transition:transform .45s cubic-bezier(.25,.46,.45,.94); will-change:transform; }
.img-slider-item { flex-shrink:0; position:relative; cursor:pointer; }
.img-slider-item img { width:100%; height:auto; display:block; }
.img-slider-dots { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:6px; padding:0; background:none; border:none; z-index:10; }
.img-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; transition:all .2s; box-shadow:0 1px 3px rgba(0,0,0,.5); }
.img-dot.active { background:white; width:20px; border-radius:4px; }

/* ── Locked state: hide nums sections ── */
#game-area.locked .ga-nums-section { display:none !important; }

@media(max-width:640px){
  .ga-display-row { grid-template-columns:1fr; text-align:center; gap:1rem; }
  .ga-cd-col { order:1; }
  .ga-balls-col { order:2; }
  .ga-ball { width:54px; height:54px; font-size:1.4rem; }
  .ga-cd-time { font-size:2rem; }
  .ga-btn { font-size:.78rem; padding:8px 4px; }
  .ga-num { width:44px; height:44px; }
  .txn-card { padding:1.5rem 1rem; }
}