:root {
  --bg: #0f212e;
  --bg-2: #1a2c38;
  --panel: #213743;
  --panel-2: #2f4553;
  --line: #2f4553;
  --text: #ffffff;
  --muted: #b1bad3;
  --dim: #7a8ba3;
  --green: #00e701;
  --green-2: #1fff20;
  --red: #ed4163;
  --blue: #1475e1;
  --gold: #ffc800;
  --radius: 8px;
  --sidebar: 240px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
[hidden] { display: none !important; }
code, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--bg); padding: 1px 5px; border-radius: 4px; }
small { color: var(--dim); font-weight: 500; }

/* ---------- layout ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; width: var(--sidebar); flex-shrink: 0;
  background: var(--bg-2); display: flex; flex-direction: column; padding: 16px 12px;
  box-shadow: 2px 0 12px rgba(0,0,0,.25); z-index: 5;
}
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content { width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px; flex: 1; }

.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: 2px; padding: 4px 8px 20px; }
.logo-mark { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle, var(--bg-2) 30%, var(--green) 32%); box-shadow: 0 0 14px rgba(0,231,1,.5); display: inline-block; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a, .nav-btn {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius);
  color: var(--muted); font-weight: 600; transition: background .15s, color .15s; width: 100%; text-align: left;
}
.nav a:hover, .nav-btn:hover { background: var(--panel); color: var(--text); }
.nav a.active { background: var(--panel); color: var(--text); }
.nav svg, .nav-btn svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.nav-label { color: var(--dim); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 18px 12px 6px; }
.sidebar > .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--panel-2) transparent; }
.sidebar-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--panel); }
.disclaimer { color: var(--dim); font-size: 11px; line-height: 1.5; padding: 8px 12px 0; margin: 0; }

.topbar {
  position: sticky; top: 0; z-index: 4; height: 64px; background: var(--bg-2);
  display: flex; align-items: center; justify-content: center; padding: 0 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.top-right { position: absolute; right: 24px; display: flex; align-items: center; }
.mobile-logo { display: none; position: absolute; left: 16px; padding: 0; }
.auth-buttons { display: flex; gap: 8px; }

.wallet { display: flex; align-items: center; background: var(--bg); border-radius: var(--radius); overflow: hidden; font-weight: 700; }
.wallet-main-choice { display: inline-flex; align-items: center; height: 40px; padding: 0; border: 2px solid transparent; border-radius: 8px; white-space: nowrap; }
.wallet-main-choice[aria-pressed="true"] { background: rgba(46, 204, 113, .1); border-color: rgba(46, 204, 113, .42); }
.wallet-main-choice:focus-visible, .bonus-pill:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.wallet #balance { padding: 0 14px 0 8px; font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; transition: color .3s; }
.wallet #balance.up { color: var(--green); }
.wallet #balance.down { color: var(--red); }
.coin { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2a8, var(--gold) 55%, #c78a00); margin-left: 14px; flex-shrink: 0; display: inline-block; }
.wallet-btn { background: var(--blue); padding: 12px 16px; font-weight: 700; }
.wallet-btn:hover { background: #1a85fb; }
.recovery-email-card form { display: grid; gap: 12px; max-width: 480px; }
.recovery-email-card form[hidden] { display: none; }
.recovery-email-card input { min-width: 0; width: 100%; }
.recovery-email-card button { min-height: 44px; white-space: normal; }

/* ---------- buttons & inputs ---------- */
.btn { padding: 11px 18px; border-radius: var(--radius); font-weight: 700; transition: background .15s, transform .05s, opacity .15s; white-space: nowrap; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primary { background: var(--green); color: #05290a; }
.btn.primary:hover:not(:disabled) { background: var(--green-2); }
.btn.ghost { background: var(--panel); }
.btn.ghost:hover:not(:disabled) { background: var(--panel-2); }
.btn.danger { background: var(--gold); color: #2b1c00; }
.btn.danger:hover:not(:disabled) { background: #ffd633; }
.btn.block { width: 100%; }
.btn.lg { padding: 14px 24px; font-size: 15px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { color: var(--muted); font-weight: 600; font-size: 13px; }
.field input, .field select, .suffix-input {
  width: 100%; background: var(--bg); border: 2px solid var(--panel-2); border-radius: var(--radius);
  padding: 9px 10px; font-weight: 600; outline: none; transition: border-color .15s; min-width: 0;
}
.field input:focus, .field select:focus, .suffix-input:focus-within { border-color: #557086; }
.field input[readonly] { color: var(--muted); }
input[type=number] { -moz-appearance: textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.input-group { display: flex; background: var(--panel-2); border-radius: var(--radius); padding: 2px; }
.input-group input { border: 0; border-radius: 6px 0 0 6px; background: var(--bg); }
.input-group button { padding: 0 14px; font-weight: 700; color: var(--muted); border-left: 2px solid var(--panel); }
.input-group button:hover { color: var(--text); background: #3d5566; }
.suffix-input { display: flex; align-items: center; padding: 0 10px 0 0; }
.suffix-input input { border: 0; background: none; }
.suffix-input input:focus { border: 0; }
.suffix-input i, .suffix-input button { font-style: normal; color: var(--muted); font-weight: 700; }
.suffix-input button { padding: 4px 6px; border-radius: 4px; }
.suffix-input button:hover { background: var(--panel-2); color: var(--text); }

/* ---------- lobby ---------- */
.hero {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; position: relative;
  background: linear-gradient(120deg, #1a3a52 0%, #213743 55%, #1a2c38 100%); border-radius: 14px; padding: 40px;
}
.hero h1 { font-size: 34px; margin: 0 0 10px; letter-spacing: -.5px; }
.hero p { color: var(--muted); max-width: 460px; line-height: 1.6; margin: 0 0 24px; }
.hero-orb { position: relative; width: 180px; height: 180px; flex-shrink: 0; }
.hero-orb span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(0,231,1,.35); animation: spin 12s linear infinite; }
.hero-orb span:nth-child(1) { background: radial-gradient(circle, rgba(0,231,1,.25), transparent 65%); }
.hero-orb span:nth-child(2) { inset: 24px; border-style: dashed; animation-duration: 8s; animation-direction: reverse; }
.hero-orb span:nth-child(3) { inset: 64px; background: var(--green); box-shadow: 0 0 40px var(--green); border: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

.section-title { font-size: 18px; margin: 32px 0 14px; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.game-card {
  position: relative; border-radius: 12px; aspect-ratio: 3 / 4; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.game-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0,0,0,.4); }
.game-card.slots { background: linear-gradient(160deg, #7b2ff7, #3a0ca3); }
.game-card.dice { background: linear-gradient(160deg, #1475e1, #0a3d7a); }
.game-card.crash { background: linear-gradient(160deg, #ff8a00, #b33c00); }
.gc-art { position: absolute; inset: 0 0 30% 0; display: grid; place-items: center; font-size: 92px; font-weight: 900; color: rgba(255,255,255,.92); text-shadow: 0 8px 30px rgba(0,0,0,.35); }
.gc-name { font-size: 20px; font-weight: 800; }
.gc-meta { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 4px; font-weight: 600; }

/* ---------- game shell ---------- */
.game { display: grid; grid-template-columns: 300px minmax(0, 1fr); background: var(--panel); border-radius: 12px; overflow: hidden; min-height: 520px; }
.controls { background: var(--panel); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.stage { background: var(--bg); position: relative; padding: 24px; display: flex; flex-direction: column; min-width: 0; }
.bet-btn { padding: 15px; font-size: 15px; }
.hint { color: var(--dim); font-size: 12px; margin: 0; line-height: 1.5; }

.history { display: flex; gap: 6px; justify-content: flex-end; min-height: 30px; overflow: hidden; }
.chip { padding: 6px 10px; border-radius: 20px; font-weight: 700; font-size: 12px; background: var(--panel); color: var(--muted); animation: pop .25s ease-out; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.chip.win { background: var(--green); color: #05290a; }
.chip.loss { background: var(--panel-2); color: var(--text); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

/* ---------- dice ---------- */
.dice-stage { justify-content: space-between; }
.dice-board { padding: 70px 20px 10px; }
.dice-scale { display: flex; justify-content: space-between; color: var(--muted); font-weight: 700; padding: 0 6px 14px; font-size: 13px; }
.dice-track {
  --t: 50.5%;
  position: relative; height: 12px; border-radius: 12px;
  outline: 12px solid var(--panel); outline-offset: 0;
  background: linear-gradient(90deg, var(--green) var(--t), var(--red) var(--t));
}
.dice-track.over { background: linear-gradient(90deg, var(--red) var(--t), var(--green) var(--t)); }
.dice-track input[type=range] { position: absolute; inset: -14px 0; width: 100%; height: 40px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: grab; }
.dice-track input[type=range]::-webkit-slider-runnable-track { background: none; height: 40px; }
.dice-track input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 34px; height: 34px; margin-top: 3px; border-radius: 6px; background: var(--blue);
  box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 0 0 9px #1a85fb; cursor: grab;
}
.dice-track input[type=range]::-moz-range-thumb { width: 34px; height: 34px; border: 0; border-radius: 6px; background: var(--blue); cursor: grab; }
.dice-track input[type=range]::-moz-range-track { background: none; }
.dice-marker {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); transition: left .35s cubic-bezier(.2,.9,.3,1.2);
  pointer-events: none; z-index: 2;
}
.dice-marker span {
  display: block; padding: 10px 14px; border-radius: 8px; background: #fff; color: var(--red); font-weight: 800; font-size: 18px;
  box-shadow: 0 8px 18px rgba(0,0,0,.35); font-variant-numeric: tabular-nums; position: relative;
}
.dice-marker span::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #fff; }
.dice-marker.win span { color: #05a300; }
.dice-marker.bump span { animation: bump .35s; }
@keyframes bump { 40% { transform: translateY(-6px); } }
.dice-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; background: var(--panel); padding: 14px; border-radius: var(--radius); margin-top: 40px; }

/* ---------- slots ---------- */
.slots-stage { align-items: center; justify-content: center; gap: 22px; }
.slot-machine { padding: 14px; border-radius: 18px; background: linear-gradient(180deg, #2f4553, #1a2c38); box-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); }
.reels { --cell: 110px; position: relative; display: grid; grid-template-columns: repeat(3, var(--cell)); gap: 8px; }
.reel { height: calc(var(--cell) * 3); overflow: hidden; border-radius: 10px; background: linear-gradient(180deg, #0b1822, #13283a 50%, #0b1822); box-shadow: inset 0 10px 18px rgba(0,0,0,.6), inset 0 -10px 18px rgba(0,0,0,.6); }
.strip { will-change: transform; }
.sym { height: var(--cell); display: grid; place-items: center; font-size: calc(var(--cell) * .52); line-height: 1; user-select: none; transition: transform .2s; }
.sym-seven { font-weight: 900; font-size: calc(var(--cell) * .62); background: linear-gradient(180deg, #ff6b81, #d10f3a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 6px rgba(237,65,99,.5)); }
.sym.win { animation: winPulse .8s ease-in-out infinite; }
@keyframes winPulse { 50% { transform: scale(1.14); filter: drop-shadow(0 0 14px rgba(255,200,0,.9)); } }
.reel.landed { animation: land .22s ease-out; }
@keyframes land { 40% { transform: translateY(6px); } }
.win-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.win-lines polyline { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; filter: drop-shadow(0 0 6px rgba(255,200,0,.9)); stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw .5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.slot-result { font-weight: 800; font-size: 18px; color: var(--muted); min-height: 28px; text-align: center; }
.slot-result.win { color: var(--green); }
.slot-result.big { color: var(--gold); font-size: 24px; animation: pop .3s; }
.paytable { background: var(--bg-2); border-radius: var(--radius); padding: 12px; display: grid; gap: 6px; }
.paytable h4 { margin: 0 0 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.pt-row { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.pt-row .pt-syms { font-size: 18px; letter-spacing: 2px; }
.pt-row .pt-syms .sym-seven { font-size: 18px; }
.pt-row b { color: var(--gold); }

/* ---------- crash ---------- */
.crash-canvas-wrap { position: relative; flex: 1; min-height: 360px; margin-top: 10px; }
#crashCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.crash-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.crash-mult { font-size: 72px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -2px; text-shadow: 0 6px 30px rgba(0,0,0,.5); }
.crash-mult.running { color: var(--text); }
.crash-mult.cashed { color: var(--green); }
.crash-mult.crashed { color: var(--red); animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.crash-status { color: var(--muted); font-weight: 700; font-size: 15px; margin-top: 4px; }
.crash-status.win { color: var(--green); }
.crash-status.loss { color: var(--red); }

/* ---------- bets table ---------- */
.bets-section { margin-top: 28px; }
.tabs { display: inline-flex; background: var(--bg-2); border-radius: 30px; padding: 5px; gap: 4px; }
.tab { padding: 9px 18px; border-radius: 30px; font-weight: 700; color: var(--muted); }
.tab.active { background: var(--panel-2); color: var(--text); }
.table-wrap { margin-top: 14px; overflow-x: auto; }
.bets-table { width: 100%; border-collapse: collapse; font-weight: 600; }
.bets-table th { text-align: left; color: var(--muted); font-size: 12px; padding: 10px 14px; font-weight: 600; }
.bets-table td { padding: 13px 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bets-table tbody tr:nth-child(odd) { background: var(--bg-2); }
.bets-table .num { text-align: right; }
.bets-table .pos { color: var(--green); }
.bets-table .game-tag { text-transform: capitalize; display: inline-flex; align-items: center; gap: 8px; }
.bets-table .game-dot { width: 8px; height: 8px; border-radius: 50%; }
.game-dot.slots { background: #9b5cff; } .game-dot.dice { background: #3b9bff; } .game-dot.crash { background: #ff8a00; }
.bets-table tr.new { animation: rowIn .4s ease-out; }
@keyframes rowIn { from { opacity: 0; transform: translateY(-6px); } }
.empty { color: var(--dim); text-align: center; padding: 24px; }

/* ---------- user menu ---------- */
.user-menu { position: relative; margin-left: 8px; }
.user-btn { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), #7b2ff7); display: grid; place-items: center; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.dropdown { position: absolute; right: 0; top: calc(100% + 8px); width: 240px; background: #fff; color: #0f212e; border-radius: var(--radius); padding: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.dd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; margin-bottom: 6px; border-bottom: 1px solid #e3e8ef; }
.dd-stats div { display: flex; flex-direction: column; padding: 4px 0 8px; }
.dd-stats span { font-size: 11px; color: #557086; font-weight: 600; }
.dd-stats b { font-variant-numeric: tabular-nums; }
.dd-item { display: block; width: 100%; text-align: left; padding: 10px; border-radius: 6px; font-weight: 600; color: #0f212e; }
.dd-item:hover { background: #eef2f6; }
.dd-item.danger { color: #c4183c; }

/* ---------- modals ---------- */
.modal { position: fixed; inset: 0; background: rgba(5,12,18,.75); display: grid; place-items: center; z-index: 50; padding: 16px; animation: fade .15s; backdrop-filter: blur(3px); }
@keyframes fade { from { opacity: 0; } }
.modal-card { position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--bg-2); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: rise .2s ease-out; }
.modal-card.wide { max-width: 640px; }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } }
.modal-card h3 { margin: 0; font-size: 20px; }
.modal-card h4 { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.modal-close { position: absolute; top: 12px; right: 14px; font-size: 24px; color: var(--muted); width: 32px; height: 32px; border-radius: 6px; }
.modal-close:hover { background: var(--panel); color: var(--text); }
.auth-tabs { align-self: flex-start; }
#authForm { display: flex; flex-direction: column; gap: 14px; }
.form-error { color: var(--red); margin: 0; min-height: 18px; font-weight: 600; }
.form-hint { color: var(--dim); margin: 0; font-size: 12px; }
.muted { color: var(--muted); line-height: 1.6; margin: 0; }
.wallet-balance { display: flex; align-items: center; gap: 10px; font-size: 28px; background: var(--bg); border-radius: var(--radius); padding: 16px; }
.wallet-balance .coin { margin: 0; width: 26px; height: 26px; }
.wallet-balance small { font-size: 14px; }
.fair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fair-grid .field:first-child { grid-column: 1 / -1; }
.verify-out { background: var(--bg); border-radius: var(--radius); padding: 12px; margin: 0; white-space: pre-wrap; word-break: break-all; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* ---------- toasts ---------- */
.toasts { position: fixed; top: 76px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 60; pointer-events: none; }
.toast { background: var(--panel); border-left: 4px solid var(--blue); padding: 12px 16px; border-radius: 6px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: slideIn .2s ease-out; max-width: 320px; }
.toast.success { border-color: var(--green); }
.toast.error { border-color: var(--red); }
.toast.out { opacity: 0; transform: translateX(20px); transition: .3s; }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } }

.bottom-nav { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .game { grid-template-columns: 260px minmax(0, 1fr); }
  .reels { --cell: 90px; }
}
@media (max-width: 820px) {
  .sidebar { display: none; }
  .mobile-logo { display: flex; }
  .topbar { padding: 0 16px; justify-content: flex-start; padding-left: 56px; }
  .top-right { right: 16px; }
  .content { padding: 16px 16px 90px; }
  .game { grid-template-columns: minmax(0, 1fr); }
  .stage { order: -1; padding: 16px; min-height: 340px; }
  .hero { padding: 24px; }
  .hero h1 { font-size: 26px; }
  .hero-orb { display: none; }
  .crash-mult { font-size: 52px; }
  .dice-board { padding: 64px 4px 10px; }
  .dice-inputs { margin-top: 24px; }
  .hide-sm { display: none; }
  .bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-2); z-index: 10;
    box-shadow: 0 -4px 12px rgba(0,0,0,.3); padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-nav a { flex: 1; text-align: center; padding: 16px 0; font-weight: 700; color: var(--muted); }
  .bottom-nav a.active { color: var(--green); }
}
@media (max-width: 520px) {
  .wallet #balance { min-width: 0; padding-right: 10px; }
  .wallet .bonus-pill { margin-right: 4px; padding: 4px 7px; font-size: 11px; }
  .wallet-btn { padding: 12px 10px; font-size: 12px; }
  .user-btn #userName { display: none; }
  .user-btn { padding: 8px; }
  .auth-buttons .btn { padding: 9px 12px; }
  .reels { --cell: 76px; gap: 6px; }
  .dice-inputs { grid-template-columns: 1fr 1fr; }
  .dice-inputs .field:nth-child(2) { grid-column: 1 / -1; order: -1; }
  .fair-grid { grid-template-columns: 1fr; }
  .crash-canvas-wrap { min-height: 280px; }
}

/* ---------- wallet / payments ---------- */
.wallet-pay { display: flex; flex-direction: column; gap: 14px; }
.wallet-pay [data-wpane] { display: flex; flex-direction: column; gap: 12px; }
.wallet-pay [data-wpane][hidden] { display: none !important; }
#walletTabs { align-self: flex-start; flex-wrap: wrap; }
.quick-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.quick-amounts button { background: var(--panel); padding: 9px 0; border-radius: var(--radius); font-weight: 700; color: var(--muted); }
.quick-amounts button:hover { background: var(--panel-2); color: var(--text); }
.methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.method { background: var(--bg); border: 2px solid var(--panel-2); border-radius: var(--radius); padding: 12px; font-weight: 700; text-align: left; display: flex; align-items: center; gap: 10px; }
.method:hover { border-color: #557086; }
.method.active { border-color: var(--green); background: rgba(0,231,1,.06); }
.method-logo { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #fff; flex-shrink: 0; }
.method-logo.phonepe { background: #5f259f; }
.method-logo.paytm { background: #00baf2; }
.method-logo.test { background: var(--panel-2); }
.sandbox-note { margin: 0; font-size: 12px; color: var(--gold); background: rgba(255,200,0,.08); border-radius: 6px; padding: 8px 10px; }
.tx-list { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.tx { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; background: var(--bg); border-radius: var(--radius); padding: 10px 12px; }
.tx-title { font-weight: 700; }
.tx-amount { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.tx-amount.in { color: var(--green); }
.tx-amount.out { color: var(--gold); }
.tx-meta { color: var(--dim); font-size: 12px; word-break: break-all; }
.tx-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 6px; }
.tx-actions .btn { padding: 8px 12px; flex: 1; }
.status { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 10px; justify-self: end; text-transform: uppercase; letter-spacing: .5px; }
.status.COMPLETED, .status.PAID { background: rgba(0,231,1,.15); color: var(--green); }
.status.PENDING { background: rgba(255,200,0,.15); color: var(--gold); }
.status.PROCESSING { background: rgba(20,117,225,.18); color: #5aa9ff; }
.status.FAILED, .status.REJECTED, .status.EXPIRED, .status.REVIEW { background: rgba(237,65,99,.15); color: var(--red); }

/* ---------- test gateway page ---------- */
.testpay { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.testpay .modal-card { animation: none; }
.testpay .amount { font-size: 36px; font-weight: 800; }
.testpay .choices { display: grid; gap: 10px; }

/* ---------- lobby: new games ---------- */
.game-card.mines { background: linear-gradient(160deg, #00c896, #00624a); }
.game-card.blackjack { background: linear-gradient(160deg, #e0284f, #6e0d22); }
.game-card.blackjack .gc-art { font-size: 72px; }
.game-dot.mines { background: #00c896; } .game-dot.blackjack { background: #e0284f; }

/* ---------- mines ---------- */
.mines-stage { align-items: center; justify-content: center; gap: 16px; }
.mines-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 460px; }
.tile {
  aspect-ratio: 1; border-radius: 10px; background: var(--panel-2); box-shadow: 0 5px 0 #1f3341;
  display: grid; place-items: center; font-size: clamp(18px, 4vw, 34px); padding: 0; min-width: 0; transition: transform .12s, background .15s;
}
.tile:not(:disabled):hover { transform: translateY(-3px); background: #557086; }
.tile:disabled { cursor: default; }
.tile.gem, .tile.mine { background: #0b1a24; box-shadow: none; animation: flipIn .25s ease-out; }
.tile.gem { filter: drop-shadow(0 0 10px rgba(0,231,1,.35)); }
.tile.mine.bust { background: rgba(237,65,99,.25); animation: flipIn .25s ease-out, shake .4s .1s; }
.tile.dim { opacity: .35; filter: none; animation: none; }
@keyframes flipIn { from { transform: scale(.6) rotateY(90deg); } }
.mines-info { display: grid; gap: 8px; background: var(--bg-2); border-radius: var(--radius); padding: 12px; }
.mines-info div { display: flex; justify-content: space-between; }
.mines-info span { color: var(--muted); font-weight: 600; }
.mines-info b { font-variant-numeric: tabular-nums; }
.mines-result { min-height: 28px; font-weight: 800; font-size: 18px; color: var(--muted); }
.mines-result.win { color: var(--green); }
.mines-result.loss { color: var(--red); }

/* ---------- blackjack ---------- */
.bj-stage { justify-content: space-between; align-items: center; gap: 18px; background: radial-gradient(ellipse at 50% 30%, #13402e, #0b2219 70%); }
.bj-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bj-label { color: rgba(255,255,255,.7); font-weight: 700; display: flex; gap: 8px; align-items: center; }
.bj-total { background: rgba(0,0,0,.4); padding: 3px 10px; border-radius: 12px; font-size: 13px; color: #fff; font-variant-numeric: tabular-nums; }
.bj-cards { display: flex; min-height: 118px; padding-left: 34px; }
.card {
  width: 80px; height: 114px; border-radius: 8px; background: #fff; color: #1a2c38; position: relative; margin-left: -34px;
  box-shadow: -3px 3px 10px rgba(0,0,0,.35); display: flex; flex-direction: column; justify-content: space-between; padding: 6px 8px; flex-shrink: 0;
}
.card.red { color: #d10f3a; }
.card-rank { font-weight: 800; font-size: 20px; line-height: 1; }
.card-suit { font-size: 34px; align-self: flex-end; line-height: 1; }
.card.back { background: repeating-linear-gradient(45deg, #1475e1 0 6px, #0f5fb8 6px 12px); border: 4px solid #fff; }
.card.deal { animation: dealIn .35s cubic-bezier(.2,.8,.3,1) both; }
@keyframes dealIn { from { opacity: 0; transform: translate(60px, -80px) rotate(12deg); } }
.bj-msg { font-weight: 800; font-size: 20px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); min-height: 28px; text-align: center; }
.bj-msg.win { color: var(--green); } .bj-msg.loss { color: #ff6b81; }
.bj-hands { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
.bj-hand { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 2px solid transparent; transition: border-color .2s; }
.bj-hand.active { border-color: rgba(255,200,0,.6); background: rgba(0,0,0,.15); }
.bj-hand-info { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 13px; color: rgba(255,255,255,.75); }
.bj-result { padding: 3px 10px; border-radius: 12px; font-weight: 800; text-transform: uppercase; font-size: 11px; letter-spacing: .5px; }
.bj-result.win, .bj-result.blackjack { background: var(--green); color: #05290a; }
.bj-result.push { background: var(--panel-2); color: #fff; }
.bj-result.lose, .bj-result.bust { background: var(--red); color: #fff; }
.bj-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bj-actions .btn { padding: 12px; }

@media (max-width: 820px) {
  .bottom-nav a { font-size: 12px; padding: 14px 0; }
  .mines-grid { gap: 7px; }
}
@media (max-width: 520px) {
  .card { width: 62px; height: 90px; margin-left: -28px; }
  .bj-cards { min-height: 92px; padding-left: 28px; }
  .card-rank { font-size: 16px; } .card-suit { font-size: 26px; }
}
.bj-actions .btn.ghost { background: var(--panel-2); }
.bj-actions .btn.ghost:hover:not(:disabled) { background: #3d5566; }
.card-mini { font-size: 14px; line-height: 1; margin-top: 2px; }
.card-suit { margin-top: auto; }

/* ---------- manual UPI deposit ---------- */
.pane-stack { display: flex; flex-direction: column; gap: 12px; }
.pane-stack[hidden] { display: none !important; }
.upi-amount { font-size: 15px; color: var(--muted); font-weight: 600; }
.upi-amount b { display: block; color: var(--text); font-size: 30px; font-weight: 800; }
.copy-list { background: var(--bg); border-radius: var(--radius); padding: 4px 12px; }
.copy-row { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--panel); min-height: 48px; }
.copy-row:last-child { border-bottom: 0; }
.copy-row span { color: var(--muted); font-size: 12px; font-weight: 600; }
.copy-row b { word-break: break-all; font-variant-numeric: tabular-nums; }
.copy-row button { background: var(--panel-2); padding: 6px 12px; border-radius: 6px; font-weight: 700; font-size: 12px; }
.copy-row button:hover { background: #3d5566; }
.copy-row button.copied { background: var(--green); color: #05290a; }
.upi-open { text-align: center; }
.upi-steps { margin: 0; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.status.VERIFYING { background: rgba(20,117,225,.18); color: #5aa9ff; }
.tx-utr { color: var(--muted); font-size: 12px; }

/* ---------- lobby tiles + live player counts ---------- */
.game-card.plinko { background: linear-gradient(160deg, #ff5fa2, #8e2bd9); }
.game-card.keno { background: linear-gradient(160deg, #2bb6ff, #1b4fd6); }
.game-card.limbo { background: linear-gradient(160deg, #ffb340, #e2451f); }
.game-card.chicken { background: linear-gradient(160deg, #5ad06a, #137a63); }
.game-dot.plinko { background: #ff5fa2; } .game-dot.keno { background: #2bb6ff; } .game-dot.limbo { background: #ffb340; } .game-dot.chicken { background: #5ad06a; }
@media (max-width: 820px) {
  .bottom-nav { overflow-x: auto; scrollbar-width: none; }
  .bottom-nav::-webkit-scrollbar { display: none; }
  .bottom-nav a { flex: 0 0 auto; padding: 14px 16px; }
}

/* ---------- limbo ---------- */
.limbo-stage { justify-content: space-between; }
.limbo-display { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.limbo-result { font-size: clamp(56px, 11vw, 110px); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -2px; transition: color .2s; }
.limbo-result.win { color: var(--green); }
.limbo-result.loss { color: var(--red); }
.limbo-sub { color: var(--muted); font-weight: 700; font-size: 16px; }

/* ---------- plinko ---------- */
.plinko-stage { align-items: center; justify-content: center; }
.plinko-board { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 6px; }
#plinkoCanvas { width: 100%; aspect-ratio: 1.15; display: block; }
.plinko-buckets { display: grid; gap: 3px; }
.bucket { border-radius: 5px; padding: 6px 0; text-align: center; font-weight: 800; font-size: clamp(8px, 1.3vw, 12px); color: #1a1a1a; font-variant-numeric: tabular-nums; transition: transform .15s; white-space: nowrap; overflow: hidden; }
.bucket.hit { animation: bucketHit .4s ease-out; }
@keyframes bucketHit { 40% { transform: translateY(6px); filter: brightness(1.3); } }

/* ---------- keno ---------- */
.keno-stage { align-items: center; justify-content: center; gap: 18px; }
.keno-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 560px; }
.keno-cell { aspect-ratio: 1; border-radius: 8px; background: var(--panel-2); box-shadow: 0 4px 0 #1f3341; font-weight: 800; font-size: clamp(13px, 2vw, 18px); display: grid; place-items: center; padding: 0; min-width: 0; transition: transform .1s, background .15s; }
.keno-cell:not(:disabled):hover { transform: translateY(-2px); background: #557086; }
.keno-cell.picked { background: #7b2ff7; box-shadow: 0 4px 0 #4a17a3; }
.keno-cell.drawn { background: #0b1a24; box-shadow: none; color: var(--red); }
.keno-cell.hit { background: var(--green); color: #05290a; box-shadow: 0 4px 0 #00a301; animation: pop .25s; }
.keno-cell:disabled { cursor: default; }
.keno-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.keno-tools .btn { background: var(--panel-2); padding: 11px; }
.keno-result { font-weight: 800; font-size: 18px; color: var(--muted); min-height: 26px; text-align: center; }
.keno-result.win { color: var(--green); }
.keno-pay { background: var(--bg-2); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 4px; font-size: 13px; }
.keno-pay h4 { margin: 0 0 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.keno-pay div { display: flex; justify-content: space-between; font-weight: 700; }
.keno-pay div b { color: var(--gold); }
.keno-pay div.zero { color: var(--dim); } .keno-pay div.zero b { color: var(--dim); }

/* ---------- chicken ---------- */
.chicken-stage { justify-content: center; gap: 18px; }
.chicken-road { display: flex; overflow-x: auto; border-radius: 12px; background: #2a3440; min-height: 260px; scroll-behavior: smooth; scrollbar-width: thin; }
.lane { flex: 0 0 92px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 14px 0; border-right: 3px dashed rgba(255,255,255,.25); }
.lane.side { background: #3c4a58; border-right: 4px solid #8a99a8; }
.lane-mult { background: rgba(0,0,0,.45); padding: 4px 8px; border-radius: 12px; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.lane.crossed { background: rgba(0,231,1,.08); }
.lane.crossed .lane-mult { background: var(--green); color: #05290a; }
.lane.next .lane-mult { outline: 2px solid var(--gold); }
.lane-slot { font-size: 46px; line-height: 1; height: 56px; display: grid; place-items: center; }
.lane.hit { background: rgba(237,65,99,.18); }
.lane-slot .car { animation: carIn .35s ease-out; }
@keyframes carIn { from { transform: translateY(-120px); } }
.lane-slot .chick { animation: hop .3s ease-out; }
@keyframes hop { 40% { transform: translateY(-14px); } }
#chickenGo, #minesRandom { background: var(--panel-2); }
#chickenGo:hover:not(:disabled), #minesRandom:hover:not(:disabled) { background: #3d5566; }

/* ---------- lobby card artwork ---------- */
.gc-art { inset: 6% 6% 26% 6%; }
.gc-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.28)); transition: transform .35s cubic-bezier(.2,.8,.3,1.2); pointer-events: none; user-select: none; }
.game-card:hover .gc-art img { transform: translateY(-6px) scale(1.06) rotate(-2deg); }
.game-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.22), transparent 60%); pointer-events: none; }
.game-card .gc-name, .game-card .gc-meta { position: relative; z-index: 1; text-shadow: 0 2px 8px rgba(0,0,0,.3); }

/* ---------- 19-game nav ---------- */
.nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.game-card.hilo { background: linear-gradient(160deg, #36c95f, #0d7a4f); }
.game-card.flip { background: linear-gradient(160deg, #ffcf3f, #e08a00); }
.game-card.rps { background: linear-gradient(160deg, #ff6b6b, #c2185b); }
.game-card.tower { background: linear-gradient(160deg, #ff8a3d, #b3261e); }
.game-card.pump { background: linear-gradient(160deg, #4aa8ff, #2346c9); }
.game-card.snakes { background: linear-gradient(160deg, #3fd3c6, #12707a); }
.game-card.wheel { background: linear-gradient(160deg, #ffd93f, #f2603a); }
.game-card.darts { background: linear-gradient(160deg, #3ddc84, #128a52); }
.game-card.cases { background: linear-gradient(160deg, #b26bff, #5b21b6); }
.game-card.moles { background: linear-gradient(160deg, #8bd450, #3d8b2f); }
.game-dot.hilo { background: #36c95f; } .game-dot.flip { background: #ffcf3f; } .game-dot.rps { background: #ff6b6b; } .game-dot.tower { background: #ff8a3d; } .game-dot.pump { background: #4aa8ff; }
.game-dot.snakes { background: #3fd3c6; } .game-dot.wheel { background: #ffd93f; } .game-dot.darts { background: #3ddc84; } .game-dot.cases { background: #b26bff; } .game-dot.moles { background: #8bd450; }

/* ---------- shared step-game controls ---------- */
.step-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.step-actions .btn { background: var(--panel-2); padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.step-actions .btn:hover:not(:disabled) { background: #3d5566; }
.step-actions .btn.wide { grid-column: 1 / -1; }
.step-actions .btn small { color: var(--muted); font-size: 11px; font-weight: 600; }
.rps-actions { grid-template-columns: 1fr 1fr 1fr; }
.mines-result.win, .step-result.win { color: var(--green); }

/* ---------- hilo ---------- */
.hilo-stage { align-items: center; justify-content: center; gap: 22px; }
.hilo-current { min-height: 170px; display: grid; place-items: center; }
.hilo-current .card { width: 116px; height: 166px; margin: 0; padding: 10px 12px; }
.hilo-current .card-rank { font-size: 34px; } .hilo-current .card-suit { font-size: 58px; } .hilo-current .card-mini { font-size: 20px; }
.hilo-history { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.hilo-history .card { width: 46px; height: 66px; margin: 0; padding: 4px 6px; position: relative; }
.hilo-history .card-rank { font-size: 14px; } .hilo-history .card-mini { font-size: 11px; } .hilo-history .card-suit { font-size: 18px; }
.hilo-history .card.bad { outline: 3px solid var(--red); } .hilo-history .card.good { outline: 3px solid var(--green); } .hilo-history .card.skipped { opacity: .55; }
.hilo-history .tag { position: absolute; top: -9px; right: -7px; background: var(--panel-2); color: #fff; font-size: 10px; font-weight: 800; border-radius: 8px; padding: 1px 5px; }

/* ---------- coin flip ---------- */
.flip-stage { align-items: center; justify-content: center; gap: 22px; }
.flip-coin { width: 170px; height: 170px; position: relative; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.7,.3,1); }
.coin-face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; font-size: 72px; font-weight: 900; backface-visibility: hidden; color: #7a4a00;
  background: radial-gradient(circle at 35% 30%, #fff3a8, #ffcf3f 45%, #e08a00); box-shadow: inset 0 0 0 10px rgba(255,255,255,.35), 0 18px 40px rgba(0,0,0,.4); }
.coin-face.tails { transform: rotateY(180deg); background: radial-gradient(circle at 35% 30%, #e8eef5, #b8c4d2 45%, #7d8b9b); color: #2f3b47; }

/* ---------- rock paper scissors ---------- */
.rps-stage { align-items: center; justify-content: center; gap: 18px; }
.rps-arena { display: flex; align-items: center; gap: 28px; }
.rps-side { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); font-weight: 700; }
.rps-hand { width: 130px; height: 130px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; font-size: 68px; }
.rps-hand.house { transform: scaleX(-1); }
.rps-hand.shake { animation: rpsShake .5s ease-in-out; }
@keyframes rpsShake { 25%, 75% { transform: translateY(-14px); } 50% { transform: translateY(0); } }
.rps-hand.house.shake { animation-name: rpsShakeFlip; }
@keyframes rpsShakeFlip { 0%, 50%, 100% { transform: scaleX(-1) translateY(0); } 25%, 75% { transform: scaleX(-1) translateY(-14px); } }
.rps-vs { font-weight: 900; color: var(--dim); font-size: 20px; }
.rps-outcome { font-weight: 800; font-size: 20px; min-height: 28px; }
.rps-outcome.win { color: var(--green); } .rps-outcome.lose { color: var(--red); } .rps-outcome.tie { color: var(--gold); }

/* ---------- tower ---------- */
.tower-stage { align-items: center; justify-content: center; gap: 14px; }
.tower-grid { display: flex; flex-direction: column-reverse; gap: 6px; width: 100%; max-width: 440px; }
.tower-row { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: center; }
.tower-mult { font-weight: 800; font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.tower-row.current .tower-mult { color: var(--gold); }
.tower-tiles { display: grid; gap: 6px; }
.tower-tile { height: 38px; border-radius: 8px; background: var(--panel-2); box-shadow: 0 3px 0 #1f3341; font-size: 20px; padding: 0; display: grid; place-items: center; }
.tower-row.current .tower-tile:not(:disabled) { background: #557086; }
.tower-row.current .tower-tile:not(:disabled):hover { background: #6b8aa3; transform: translateY(-2px); }
.tower-tile.safe { background: rgba(0,231,1,.25); box-shadow: none; }
.tower-tile.trap { background: rgba(237,65,99,.3); box-shadow: none; }
.tower-tile.dim { opacity: .45; }
.tower-tile:disabled { cursor: default; }

/* ---------- pump ---------- */
.pump-stage { align-items: center; justify-content: center; gap: 10px; }
.pump-area { height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.balloon { --s: 1; width: 120px; height: 140px; border-radius: 50% 50% 48% 48%; background: radial-gradient(circle at 35% 30%, #ff9db0, #ff3d5a 55%, #b3123a);
  transform: scale(var(--s)); transform-origin: 50% 100%; transition: transform .25s cubic-bezier(.2,.8,.3,1.4); display: grid; place-items: center; box-shadow: inset -12px -16px 30px rgba(0,0,0,.18); }
.balloon span { font-weight: 900; color: #fff; font-size: 22px; text-shadow: 0 2px 6px rgba(0,0,0,.35); transform: scale(calc(1 / var(--s))); }
.balloon.popped { animation: pop-out .35s forwards; }
@keyframes pop-out { 40% { transform: scale(calc(var(--s) * 1.25)); opacity: 1; } 100% { transform: scale(calc(var(--s) * 1.6)); opacity: 0; } }
.balloon-string { width: 2px; height: 60px; background: #c9d3de; }
.pump-count { color: var(--muted); font-weight: 700; }

/* ---------- snakes ---------- */
.snakes-stage { align-items: center; justify-content: center; gap: 22px; }
.snakes-dice { display: flex; gap: 18px; }
.die-face { width: 84px; height: 84px; border-radius: 16px; background: #fff; color: #1a2c38; display: grid; place-items: center; font-size: 40px; font-weight: 900; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.die-face.roll { animation: dieRoll .45s ease-out; }
@keyframes dieRoll { 0% { transform: rotate(-120deg) scale(.6); } 100% { transform: rotate(0) scale(1); } }
.die-face.snake { background: var(--red); color: #fff; }
.snakes-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 520px; }
.snake-step { border-radius: 8px; background: var(--panel); padding: 8px 4px; text-align: center; font-weight: 800; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.snake-step.done { background: rgba(0,231,1,.2); color: var(--green); }
.snake-step.next { outline: 2px solid var(--gold); color: var(--text); }
.snake-step.bit { background: rgba(237,65,99,.3); color: #fff; }

/* ---------- wheel ---------- */
.wheel-stage { align-items: center; justify-content: center; gap: 16px; }
.wheel-wrap { position: relative; width: min(100%, 380px); aspect-ratio: 1; }
#wheelCanvas { width: 100%; height: 100%; transition: transform 3.2s cubic-bezier(.12,.75,.2,1); }
.wheel-pointer { position: absolute; top: -6px; left: 50%; margin-left: -14px; z-index: 2; border: 14px solid transparent; border-top: 24px solid #fff; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.wheel-center { position: absolute; inset: 37%; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-weight: 900; font-size: 20px; box-shadow: 0 0 0 6px var(--panel); }
.wheel-center.win { color: var(--green); }
.wheel-legend { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wheel-legend span { padding: 6px 10px; border-radius: 8px; font-weight: 800; font-size: 12px; color: #1a1a1a; }

/* ---------- darts ---------- */
.darts-stage { align-items: center; justify-content: center; gap: 16px; }
.dartboard { position: relative; width: min(100%, 340px); aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(#1c232b 0 18deg, #f2e8cf 18deg 36deg); box-shadow: 0 0 0 14px #2a1a10, 0 20px 50px rgba(0,0,0,.5); }
.ring { position: absolute; border-radius: 50%; }
.r-outer { inset: 8%; border: 10px solid #128a52; }
.r-middle { inset: 26%; background: repeating-conic-gradient(#d10f3a 0 18deg, #128a52 18deg 36deg); opacity: .9; }
.r-inner { inset: 38%; background: #1c232b; border: 6px solid #f2e8cf; }
.r-bull { inset: 45%; background: #d10f3a; box-shadow: 0 0 0 5px #128a52; }
.dart { position: absolute; font-size: 30px; transform: translate(-50%, -50%); transition: left .35s ease-out, top .35s ease-out; filter: drop-shadow(0 4px 4px rgba(0,0,0,.6)); }

/* ---------- cases ---------- */
.cases-stage { align-items: center; justify-content: center; gap: 18px; }
.case-window { position: relative; width: 100%; max-width: 620px; height: 130px; overflow: hidden; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 30px rgba(0,0,0,.5); }
.case-marker { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--gold); z-index: 2; box-shadow: 0 0 12px var(--gold); }
.case-strip { display: flex; gap: 8px; padding: 10px 0; will-change: transform; }
.case-item { flex: 0 0 104px; height: 110px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-weight: 900; font-size: 18px; color: #fff; border-bottom: 5px solid rgba(0,0,0,.35); }
.case-item small { font-size: 22px; }

/* ---------- moles ---------- */
.moles-stage { align-items: center; justify-content: center; gap: 18px; }
.moles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 380px; }
.hole { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #241a12 45%, #5a3d22 47%, #6b4a2b 70%); display: grid; place-items: center; font-size: clamp(30px, 7vw, 54px); padding: 0; min-width: 0; position: relative; box-shadow: 0 6px 0 #3a2716; }
.hole.picked { box-shadow: 0 0 0 4px #7b2ff7, 0 6px 0 #3a2716; }
.hole .mole { animation: moleUp .3s ease-out; }
@keyframes moleUp { from { transform: translateY(40%); opacity: 0; } }
.hole.hit { box-shadow: 0 0 0 4px var(--green), 0 6px 0 #3a2716; }
.hole:disabled { cursor: default; }

/* ---------- UPI scan & pay (3 accounts) ---------- */
.upi-tabs { display: flex; gap: 6px; background: var(--bg); padding: 4px; border-radius: 10px; }
.upi-tabs[hidden] { display: none !important; }
.upi-tab { flex: 1; padding: 9px 6px; border-radius: 8px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upi-tab.active { background: #5f259f; color: #fff; }
.upi-card { display: flex; flex-direction: column; gap: 10px; }
.upi-qr { width: 100%; max-width: 240px; align-self: center; border-radius: 12px; background: #fff; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.upi-noqr { color: var(--muted); font-size: 13px; text-align: center; padding: 14px; border: 2px dashed var(--panel-2); border-radius: 10px; }

/* ---------- admin: deposit accounts ---------- */
.admin-h { margin: 6px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.admin-accounts { display: flex; flex-direction: column; gap: 12px; }
.withdrawal-actions { align-items: center; flex-wrap: wrap; }
.withdrawal-actions input { flex: 1 1 160px; min-width: 0; }
.withdrawal-actions .btn { flex: 0 1 auto; }
.account-form { background: var(--bg); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.account-head { display: flex; justify-content: space-between; align-items: center; }
.qr-preview { display: grid; place-items: center; min-height: 110px; border: 2px dashed var(--panel-2); border-radius: 10px; color: var(--dim); font-size: 13px; padding: 8px; }
.qr-preview img { max-width: 160px; max-height: 200px; border-radius: 8px; background: #fff; padding: 4px; }
.qr-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.qr-tools input[type=file] { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); }
.qr-tools .btn { padding: 8px 12px; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--muted); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--green); }

/* ---------- bonuses ---------- */
.nav-bonus { color: var(--gold) !important; }
.bonus-pill { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; padding: 4px 9px; border-radius: 14px; background: rgba(255,200,0,.14); color: var(--gold); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bonus-pill[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(255,200,0,.65); background: rgba(255,200,0,.22); }
.bonus-pill[hidden] { display: none !important; }
.wallet-bonus { display: block; text-align: center; color: var(--gold); font-weight: 700; font-size: 13px; padding: 8px; border-radius: 8px; background: rgba(255,200,0,.08); }
.wallet-bonus[hidden] { display: none !important; }
.section-title.small { font-size: 15px; margin-top: 28px; }
.bonus-balances { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bal-card { background: var(--panel); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.bal-card span { color: var(--muted); font-weight: 600; font-size: 13px; }
.bal-card b { font-size: 26px; font-variant-numeric: tabular-nums; }
.bal-card.bonus b { color: var(--gold); }
.bonus-active { margin-top: 12px; background: linear-gradient(120deg, #3a1a6e, #213743); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.bonus-active[hidden] { display: none !important; }
.ba-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ba-head b { font-size: 16px; }
.ba-time { color: var(--gold); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.progress { height: 12px; border-radius: 8px; background: rgba(0,0,0,.35); overflow: hidden; }
.progress > div { height: 100%; background: linear-gradient(90deg, var(--green), #b8ff6a); border-radius: 8px; transition: width .4s; }
.ba-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 13px; font-weight: 600; }
.ba-queue { color: var(--muted); font-size: 12px; }
.bonus-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; }
.offer { display: grid; grid-template-columns: 140px 1fr; gap: 14px; border-radius: 14px; padding: 18px; overflow: hidden; }
.offer.deposit { background: linear-gradient(150deg, #4a1c8c, #23103f); }
.offer.telegram { background: linear-gradient(150deg, #134a86, #0e2440); }
.offer-art img { width: 100%; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.offer-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.offer-tag { align-self: flex-start; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 4px 10px; border-radius: 12px; background: rgba(255,255,255,.14); }
.offer h3 { margin: 0; font-size: 20px; }
.offer-terms { margin: 0; padding-left: 18px; color: #d4dbea; font-size: 13px; line-height: 1.6; }
.tg-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tg-steps li { display: flex; gap: 10px; align-items: flex-start; background: rgba(0,0,0,.2); border-radius: 10px; padding: 10px; font-size: 13px; line-height: 1.45; }
.tg-steps .tick { flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 12px; background: rgba(255,255,255,.15); }
.tg-steps li.done .tick { background: var(--green); color: #05290a; }
.tg-steps b { color: var(--gold); }
.offer-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.offer-state { font-weight: 700; font-size: 13px; color: var(--muted); }
.offer-state.ok { color: var(--green); }
@media (max-width: 520px) {
  .offer { grid-template-columns: 1fr; }
  .offer-art { width: 120px; justify-self: center; }
  .bal-card b { font-size: 20px; }
}

/* ---------- 6 table games: shared ---------- */
.game-card.colour { background: linear-gradient(160deg, #ff4d6d, #7b2ff7 55%, #12b76a); }
.game-card.andar { background: linear-gradient(160deg, #f7b733, #c2410c); }
.game-card.dragon { background: linear-gradient(160deg, #e0284f, #3b0a1a); }
.game-card.roulette { background: linear-gradient(160deg, #1f8a4c, #0b3d22); }
.game-card.baccarat { background: linear-gradient(160deg, #2c5cc5, #13235e); }
.game-card.sevens { background: linear-gradient(160deg, #ff7a3d, #a8174a); }
.game-dot.colour { background: #b26bff; } .game-dot.andar { background: #f7b733; } .game-dot.dragon { background: #e0284f; }
.game-dot.roulette { background: #1f8a4c; } .game-dot.baccarat { background: #2c5cc5; } .game-dot.sevens { background: #ff7a3d; }
.pick-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pick-group.three { grid-template-columns: 1fr 1fr 1fr; }
.pick { background: var(--panel-2); border: 2px solid transparent; border-radius: var(--radius); padding: 12px 6px; font-weight: 800; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pick small { color: var(--muted); font-weight: 700; font-size: 11px; }
.pick.active { border-color: var(--green); background: rgba(0,231,1,.1); }
.pick:disabled { opacity: .6; cursor: default; }
.table-stage { background: radial-gradient(ellipse at 50% 30%, #13402e, #0b2219 70%); align-items: center; justify-content: center; gap: 18px; }

/* ---------- dragon tiger ---------- */
.dt-arena { display: flex; align-items: center; gap: 28px; }
.dt-side { display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 800; color: rgba(255,255,255,.8); }
.dt-card { min-height: 166px; display: grid; place-items: center; }
.dt-card .card, .ab-joker .card { width: 116px; height: 166px; margin: 0; padding: 10px 12px; }
.dt-card .card-rank, .ab-joker .card-rank { font-size: 34px; } .dt-card .card-suit, .ab-joker .card-suit { font-size: 58px; } .dt-card .card-mini, .ab-joker .card-mini { font-size: 20px; }
.dt-card.win .card { box-shadow: 0 0 0 4px var(--green), -3px 3px 10px rgba(0,0,0,.35); }

/* ---------- andar bahar ---------- */
.andar-stage { gap: 14px; }
.ab-joker { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 800; color: var(--gold); }
.ab-joker .card { width: 84px; height: 120px; } .ab-joker .card-rank { font-size: 24px; } .ab-joker .card-suit { font-size: 40px; }
.ab-row { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; width: 100%; max-width: 640px; background: rgba(0,0,0,.2); border-radius: 12px; padding: 10px; border: 2px solid transparent; }
.ab-row.win { border-color: var(--green); }
.ab-label { font-weight: 800; }
.ab-cards { display: flex; gap: 6px; overflow: hidden; min-height: 76px; align-items: center; }
.ab-cards .card { width: 52px; height: 74px; margin: 0; padding: 4px 6px; flex-shrink: 0; }
.ab-cards .card-rank { font-size: 15px; } .ab-cards .card-mini { font-size: 11px; } .ab-cards .card-suit { font-size: 20px; }
.ab-cards .card.match { box-shadow: 0 0 0 3px var(--gold); }
.ab-more { color: var(--muted); font-weight: 700; font-size: 12px; flex-shrink: 0; }

/* ---------- baccarat ---------- */
.bac-hands { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
.bac-hand { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 2px solid transparent; }
.bac-hand.win { border-color: var(--green); background: rgba(0,0,0,.15); }
.bac-label { font-weight: 800; color: rgba(255,255,255,.85); display: flex; gap: 8px; align-items: center; }
.bac-label b { background: rgba(0,0,0,.4); padding: 3px 10px; border-radius: 12px; min-width: 30px; text-align: center; }

/* ---------- 7 up 7 down ---------- */
.sevens-stage { align-items: center; justify-content: center; gap: 18px; }
.sevens-total { font-size: 28px; font-weight: 900; }

/* ---------- roulette ---------- */
.roulette-stage { gap: 14px; justify-content: center; }
.roulette-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.roulette-ball { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; font-weight: 900; background: var(--panel); border: 4px solid #e8eef5; flex-shrink: 0; }
.roulette-ball.red { background: #d10f3a; } .roulette-ball.black { background: #1c232b; } .roulette-ball.green { background: #128a52; }
.roulette-ball.spin { animation: rollBall .12s linear infinite; }
@keyframes rollBall { 50% { transform: scale(.92); } }
.roulette-table { display: grid; grid-template-columns: 44px repeat(12, minmax(0, 1fr)) 46px; gap: 3px; background: #0e5a33; padding: 8px; border-radius: 12px; overflow-x: auto; }
.rcell { position: relative; min-height: 40px; border-radius: 6px; font-weight: 800; font-size: 13px; color: #fff; border: 1px solid rgba(255,255,255,.35); padding: 0; min-width: 0; }
.rcell.red { background: #c40f37; } .rcell.black { background: #1c232b; } .rcell.green { background: #128a52; }
.rcell.out { background: rgba(0,0,0,.2); font-size: 12px; }
.rcell:hover { filter: brightness(1.25); }
.rcell.hit { box-shadow: 0 0 0 3px var(--gold); z-index: 1; }
.rcell .chip-count { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--gold); color: #3a2a00; border-radius: 12px; padding: 1px 5px; font-size: 10px; font-weight: 900; box-shadow: 0 2px 4px rgba(0,0,0,.4); pointer-events: none; white-space: nowrap; }
.roulette-total { display: flex; justify-content: space-between; background: var(--bg-2); border-radius: var(--radius); padding: 10px 12px; font-weight: 700; }
.roulette-total span { color: var(--muted); }

/* ---------- colour prediction ---------- */
.room-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--bg-2); padding: 4px; border-radius: 10px; }
.room-tab { padding: 9px 0; border-radius: 8px; font-weight: 800; color: var(--muted); }
.room-tab.active { background: linear-gradient(120deg, #ff4d6d, #7b2ff7); color: #fff; }
.colour-pick-summary { background: var(--bg-2); border-radius: var(--radius); padding: 12px; font-weight: 700; color: var(--muted); text-align: center; }
.colour-pick-summary b { color: var(--text); }
.colour-stage { gap: 14px; }
.colour-head { display: flex; justify-content: space-between; gap: 10px; background: var(--panel); border-radius: 12px; padding: 12px 14px; }
.colour-head div { display: flex; flex-direction: column; gap: 2px; }
.colour-head span { color: var(--muted); font-size: 12px; font-weight: 600; }
.colour-head b { font-size: 17px; font-variant-numeric: tabular-nums; }
.colour-timer { align-items: flex-end; }
.colour-timer b { font-size: 26px; color: var(--gold); }
.colour-timer.locked b { color: var(--red); }
.colour-last { display: flex; gap: 6px; overflow-x: auto; min-height: 36px; }
.colour-picks, .colour-size { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.colour-size { grid-template-columns: 1fr 1fr; }
.cpick { padding: 14px 6px; border-radius: 10px; font-weight: 900; font-size: 16px; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 3px solid transparent; }
.cpick small { font-size: 11px; font-weight: 700; opacity: .85; }
.cpick.green { background: #12b76a; } .cpick.violet { background: #8b3dff; } .cpick.red { background: #ef3b5d; }
.cpick.big { background: #f59e0b; } .cpick.small { background: #3b82f6; }
.cpick.active { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.cpick:disabled { opacity: .45; cursor: not-allowed; }
.colour-numbers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cball { aspect-ratio: 1; border-radius: 50%; font-weight: 900; font-size: clamp(16px, 3vw, 22px); color: #fff; border: 3px solid transparent; padding: 0; min-width: 0; max-width: 72px; justify-self: center; width: 100%; }
.cball.active { border-color: #fff; }
.cball:disabled { opacity: .45; cursor: not-allowed; }
.cdot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-left: 3px; vertical-align: middle; }
.cdot.green { background: #12b76a; } .cdot.red { background: #ef3b5d; } .cdot.violet { background: #8b3dff; }
.cnum { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-weight: 900; font-size: 13px; flex-shrink: 0; }
.colour-history td { padding: 9px 12px; }

/* =====================================================================
   Polish pass: brand, lobby, rewards pages, celebrations
   ===================================================================== */

body { background: radial-gradient(1200px 600px at 80% -10%, rgba(123,47,247,.14), transparent 60%), radial-gradient(900px 500px at -10% 10%, rgba(0,231,1,.07), transparent 60%), var(--bg); background-attachment: fixed; }
.btn.primary { background: linear-gradient(180deg, #2bff2c, #00c901); box-shadow: 0 4px 14px rgba(0,231,1,.25), inset 0 1px 0 rgba(255,255,255,.35); }
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #5cff5d, #00e701); }
.btn.primary.lg, .bet-btn { position: relative; overflow: hidden; }
.bet-btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: shine 3.5s ease-in-out infinite; }
@keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }

/* ---------- brand ---------- */
.logo { gap: 10px; }
.logo-img { width: 34px; height: 34px; filter: drop-shadow(0 0 10px rgba(0,231,1,.45)); }
.logo-text { font-weight: 900; letter-spacing: 3px; background: linear-gradient(90deg, #b8ff6a, #00e701 45%, #ffd23f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mobile-logo .logo-img { width: 30px; height: 30px; }
.nav-emoji { width: 18px; text-align: center; font-size: 15px; flex-shrink: 0; }
.nav-btn { text-decoration: none; }
.install-btn { color: var(--green) !important; }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; background: var(--panel); font-weight: 800; font-size: 14px; margin-right: 6px; flex-shrink: 0; }
.icon-btn:hover { background: var(--panel-2); }
.avatar.emoji { background: linear-gradient(135deg, #2f4553, #1a2c38); font-size: 16px; }

/* ---------- promo slider ---------- */
.promo { position: relative; border-radius: 16px; overflow: hidden; }
.promo-track { display: flex; transition: transform .6s cubic-bezier(.2,.8,.2,1); touch-action: pan-y; }
.slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 36px; min-height: 230px; position: relative; overflow: hidden; color: #fff; }
.slide::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 40%, rgba(255,255,255,.18), transparent 55%); pointer-events: none; }
.slide img { width: 220px; height: 220px; flex-shrink: 0; filter: drop-shadow(0 14px 24px rgba(0,0,0,.35)); animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px) rotate(-2deg); } }
.slide-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 460px; }
.slide-text h2 { margin: 0; font-size: clamp(22px, 3.4vw, 34px); line-height: 1.1; letter-spacing: -.5px; text-shadow: 0 3px 12px rgba(0,0,0,.3); }
.slide-text p { margin: 0; color: rgba(255,255,255,.88); font-weight: 600; }
.slide-tag { font-size: 11px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; background: rgba(0,0,0,.25); padding: 5px 10px; border-radius: 12px; }
.s-deposit { background: linear-gradient(120deg, #5b21b6, #9d4edd 60%, #ff6bd6); }
.s-telegram { background: linear-gradient(120deg, #0f4c9c, #229ed9 60%, #5ac8ff); }
.s-colour { background: linear-gradient(120deg, #c1123a, #7b2ff7 55%, #12b76a); }
.s-daily { background: linear-gradient(120deg, #c2410c, #f59e0b 60%, #ffd23f); }
.s-vip { background: linear-gradient(120deg, #3a2400, #a85f00 55%, #ffcf3f); }
.s-refer { background: linear-gradient(120deg, #065f46, #12b76a 60%, #8ff0bd); }
.promo-dots { position: absolute; bottom: 12px; left: 36px; display: flex; gap: 6px; z-index: 2; }
.promo-dots button { width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.45); padding: 0; transition: width .3s, background .3s; }
.promo-dots button.active { width: 22px; background: #fff; }

/* ---------- wins ticker ---------- */
.ticker { display: flex; align-items: center; gap: 10px; margin-top: 14px; background: var(--bg-2); border-radius: 12px; padding: 8px 12px; overflow: hidden; }
.ticker[hidden] { display: none !important; }
.ticker-label { font-weight: 900; font-size: 12px; color: var(--gold); white-space: nowrap; flex-shrink: 0; }
.ticker-window { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker-track { display: inline-flex; gap: 24px; white-space: nowrap; animation: ticker 70s linear infinite; }
.ticker-item { font-size: 13px; font-weight: 700; color: var(--muted); }
a.ticker-item:hover { color: var(--text); }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item b { color: var(--green); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- lobby bar ---------- */
.lobby-bar { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.cat-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat { flex: 0 0 auto; padding: 9px 14px; border-radius: 20px; background: var(--bg-2); color: var(--muted); font-weight: 800; font-size: 13px; }
.cat.active { background: linear-gradient(120deg, #2bff2c, #00c901); color: #05290a; }
.search { display: flex; align-items: center; gap: 6px; background: var(--bg-2); border: 2px solid var(--panel-2); border-radius: 20px; padding: 0 12px; min-width: 200px; }
.search input { background: none; border: 0; outline: none; padding: 8px 0; font-weight: 600; width: 100%; }
.game-card .badge { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 10px; font-weight: 900; letter-spacing: 1px; padding: 4px 8px; border-radius: 8px; text-transform: uppercase; }
.badge.new { background: #fff; color: #7b2ff7; }
.badge.hot { background: #ff3d5a; color: #fff; }
.game-card .fav { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.3); font-size: 15px; display: grid; place-items: center; padding: 0; transition: transform .15s; }
.game-card .fav:hover { transform: scale(1.12); }
.game-card .fav.on { background: rgba(255,61,90,.85); }
.game-card[hidden] { display: none !important; }

/* ---------- pages ---------- */
.page-title { font-size: 26px; margin: 4px 0 16px; letter-spacing: -.3px; }
.page-intro { margin-bottom: 16px; max-width: 720px; }
.center { text-align: center; }
.mt { margin-top: 18px !important; }
.panel-card { background: var(--panel); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.panel-card h3 { margin: 0; font-size: 17px; }
.pc-head { display: flex; justify-content: space-between; align-items: center; }
.pill { background: var(--bg); padding: 4px 10px; border-radius: 12px; font-weight: 800; font-size: 12px; color: var(--green); }
.pill.gold { color: var(--gold); }
.reward-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 16px; }
.reward-grid .panel-card { margin-bottom: 0; }

/* daily streak */
.streak { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.sday { border-radius: 10px; background: var(--bg); padding: 10px 2px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; font-size: 12px; color: var(--muted); border: 2px solid transparent; }
.sday b { color: var(--text); font-size: 13px; white-space: nowrap; }
.sday .ico { font-size: 20px; }
.sday.done { background: rgba(0,231,1,.12); color: var(--green); }
.sday.next { border-color: var(--gold); animation: pulseBorder 1.6s ease-in-out infinite; }
.sday.big .ico { font-size: 26px; }
@keyframes pulseBorder { 50% { box-shadow: 0 0 0 4px rgba(255,200,0,.25); } }

/* referral */
.refer-link { display: flex; gap: 8px; }
.refer-link input { flex: 1; min-width: 0; background: var(--bg); border: 2px solid var(--panel-2); border-radius: var(--radius); padding: 10px; font-weight: 600; color: var(--muted); }
.share-wa { background: linear-gradient(180deg, #3ddc84, #1faa59) !important; color: #05290a; text-align: center; }
.refer-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.refer-stats div { background: var(--bg); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.refer-stats b { font-size: 20px; }
.refer-stats span { font-size: 12px; color: var(--muted); font-weight: 600; }

/* vip */
.vip-hero { display: flex; align-items: center; gap: 20px; background: linear-gradient(120deg, #3a2400, #213743); border-radius: 16px; padding: 22px; margin-bottom: 16px; }
.vip-badge { width: 96px; height: 96px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 40px; font-weight: 900; color: #1a1a1a; box-shadow: 0 0 0 6px rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.4); }
.vip-info { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vip-info h3 { margin: 0; font-size: 26px; }
.vip-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.vip-level { background: var(--panel); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; border: 2px solid transparent; position: relative; }
.vip-level.current { border-color: var(--gold); }
.vip-level.reached { opacity: .75; }
.vip-level .lv-dot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #1a1a1a; }
.vip-level h4 { margin: 4px 0 0; font-size: 16px; }
.vip-level span { font-size: 12px; color: var(--muted); font-weight: 600; }
.vip-level b { color: var(--gold); font-size: 13px; }
.vip-chip { display: inline-block; padding: 3px 10px; border-radius: 12px; font-weight: 800; font-size: 12px; color: #1a1a1a; }

/* profile */
.profile-head { flex-direction: row; align-items: center; gap: 18px; }
.profile-head h3 { font-size: 22px; margin-bottom: 4px; }
.avatar.xl { width: 84px; height: 84px; font-size: 42px; flex-shrink: 0; }
.profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.profile-stats div { background: var(--panel); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.profile-stats span { color: var(--muted); font-size: 12px; font-weight: 600; }
.profile-stats b { font-size: 20px; font-variant-numeric: tabular-nums; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; }
.avatar-opt { aspect-ratio: 1; border-radius: 50%; font-size: 26px; background: var(--bg); border: 3px solid transparent; padding: 0; }
.avatar-opt.on { border-color: var(--green); }
.settings .setting-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--panel-2); }
.settings .setting-row:last-child { border-bottom: 0; }
.seg { display: inline-flex; background: var(--bg); border-radius: 10px; padding: 3px; gap: 3px; flex-wrap: wrap; }
.seg button { padding: 7px 12px; border-radius: 8px; font-weight: 800; font-size: 13px; color: var(--muted); }
.seg button.on { background: var(--panel-2); color: var(--text); }

/* responsible */
.limits-form { display: flex; flex-direction: column; gap: 10px; }
.limit-used { color: var(--dim); font-size: 12px; }
.break-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.break-btns .btn { background: var(--panel-2); }
.tips ul { margin: 0; padding-left: 20px; color: #d4dbea; line-height: 1.8; }

/* help */
.support-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.support-btns .btn { display: inline-flex; align-items: center; gap: 8px; }
.faq { display: flex; flex-direction: column; gap: 8px; }
.faq details { background: var(--panel); border-radius: 12px; padding: 0 16px; }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 800; list-style: none; display: flex; justify-content: space-between; }
.faq summary::after { content: '+'; color: var(--green); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 0 0 14px; color: var(--muted); line-height: 1.65; }
.faq a, .terms a, .muted a { color: var(--green); }
.fair-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.fair-steps .panel-card { margin: 0; }
.step-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #05290a; font-weight: 900; }
.terms ol { margin: 0; padding-left: 20px; color: #d4dbea; line-height: 1.75; display: flex; flex-direction: column; gap: 8px; }

/* ---------- auth ---------- */
.auth-card { max-width: 760px; display: grid; grid-template-columns: 300px 1fr; padding: 0; gap: 0; overflow: hidden auto; }
.auth-side { background: linear-gradient(160deg, #5b21b6, #213743 70%); padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.auth-logo { width: 64px; height: 64px; filter: drop-shadow(0 0 14px rgba(0,231,1,.5)); }
.auth-side h3 { margin: 0; font-size: 22px; }
.auth-perks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-weight: 600; color: #e6e9f2; }
.auth-perks b { color: var(--gold); }
.auth-main { padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.auth-main .check span { font-size: 13px; }
.otp-box { display: flex; flex-direction: column; gap: 10px; background: var(--bg); border-radius: var(--radius); padding: 12px; }
.otp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: 13px; color: var(--muted); }
.otp-head .seg { background: var(--bg-2); }
.otp-send { display: flex; gap: 8px; }
.otp-send input { flex: 1; min-width: 0; }
.seg button[hidden] { display: none; }
.auth-main .check a { color: var(--green); }

/* ---------- big win + confetti ---------- */
.bigwin { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(5,12,18,.6); backdrop-filter: blur(3px); animation: fade .2s; }
.bigwin[hidden] { display: none !important; }
.bigwin-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 44px; border-radius: 22px; background: radial-gradient(circle at 50% 0%, #7b2ff7, #1a2c38 70%); box-shadow: 0 0 0 4px rgba(255,210,63,.6), 0 30px 80px rgba(0,0,0,.6); animation: bigPop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes bigPop { from { transform: scale(.4) rotate(-6deg); opacity: 0; } }
.bigwin-title { font-size: 40px; font-weight: 900; letter-spacing: 2px; background: linear-gradient(180deg, #fff3a8, #ffb300); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 4px 30px rgba(255,200,0,.4); }
.bigwin-amount { font-size: 46px; font-weight: 900; color: var(--green); font-variant-numeric: tabular-nums; }
.bigwin-mult { font-weight: 800; color: var(--muted); font-size: 18px; }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; }

/* ---------- quick deposit ---------- */
.fab-deposit { display: none; }
@media (max-width: 820px) {
  .fab-deposit:not([hidden]) { display: block; position: fixed; right: 14px; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 11; padding: 12px 18px; border-radius: 26px; font-weight: 900; color: #05290a; background: linear-gradient(180deg, #2bff2c, #00c901); box-shadow: 0 8px 24px rgba(0,231,1,.35); }
  .slide { padding: 22px 20px 36px; min-height: 200px; }
  .slide img { width: 130px; height: 130px; }
  .promo-dots { left: 20px; }
  .search { min-width: 0; flex: 1 1 100%; }
  .auth-card { grid-template-columns: 1fr; }
  .auth-side { padding: 20px; gap: 10px; }
  .auth-perks { display: grid; grid-template-columns: 1fr 1fr; font-size: 12px; gap: 6px; }
  .auth-logo { width: 44px; height: 44px; }
  .icon-btn { width: 34px; height: 34px; margin-right: 4px; }
  .vip-hero { padding: 16px; gap: 14px; }
  .vip-badge { width: 70px; height: 70px; font-size: 30px; }
}
@media (max-width: 520px) {
  .slide img { width: 100px; height: 100px; position: absolute; right: 10px; bottom: 10px; opacity: .9; }
  .slide-text { max-width: 72%; }
  .streak { gap: 4px; }
  .sday { padding: 8px 0; font-size: 10px; }
  .sday .ico { font-size: 16px; }
  .profile-head { flex-direction: column; text-align: center; }
}

/* ---------- compact phone lobby ---------- */
@media (max-width: 520px) {
  .topbar { height: 56px; }
  .content { padding: 8px 12px calc(76px + env(safe-area-inset-bottom)); }

  .slide {
    min-height: 68px;
    padding: 7px 11px;
    border-radius: 12px;
  }
  .slide-text { max-width: 78%; gap: 0; }
  .slide-tag, .slide-text p, .slide-text .btn { display: none; }
  .slide-text h2 { max-width: 100%; margin: 0; font-size: 14px; line-height: 1.15; }
  .slide img { width: 58px; height: 58px; right: 7px; bottom: 5px; }
  .promo-dots { display: none; }

  .ticker { gap: 6px; margin-top: 6px; padding: 6px 8px; border-radius: 9px; }
  .ticker-label, .ticker-item { font-size: 10px; }
  .lobby-bar { gap: 6px; margin-top: 8px; }
  .cat-tabs { gap: 5px; }
  .cat { min-height: 36px; padding: 8px 10px; font-size: 11px; }
  .search { min-height: 36px; padding: 0 10px; }
  .search input { padding: 7px 0; font-size: 12px; }
  .section-title { margin: 9px 0 7px; font-size: 16px; }

  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .game-card { height: clamp(168px, 22vh, 190px); aspect-ratio: auto; padding: 10px; border-radius: 11px; }
  .gc-art { inset: 4% 8% 39% 8%; }
  .game-card.colour .gc-art img, .game-card.andar .gc-art img { clip-path: inset(0 0 24%); object-position: center top; }
  .gc-name { font-size: 14px; line-height: 1.15; }
  .gc-meta { margin-top: 3px; font-size: 10px; line-height: 1.15; }
  .game-card .badge { top: 7px; left: 7px; padding: 3px 6px; font-size: 8px; }
}

@media (max-width: 360px) {
  .content { padding-right: 10px; padding-left: 10px; }
  .game-card { height: clamp(158px, 21vh, 176px); }
  .gc-name { font-size: 13px; }
}

@media (max-width: 520px) and (max-height: 720px) {
  .ticker { display: none; }
  .game-card { height: clamp(150px, 20vh, 166px); }
}