:root{
  --bg:#0b0a13; --bg2:#120824; --ink:#f2f2ff; --muted:#b7b4c9;
  --brand:#a46bff; --brand2:#60d0ff; --good:#43e57d; --bad:#ff5d7a; --gold:#ffd875;
  --card1:#1a1233cc; --card2:#0b1124cc; --panel:#111735;
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font:16px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial;
  background:radial-gradient(1200px 700px at 10% -10%, #39156e44 0%, transparent 60%),
             radial-gradient(1000px 600px at 110% 110%, #0956b433 0%, transparent 60%),
             linear-gradient(135deg, var(--bg), var(--bg2) 60%, #000);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
#bg-particles{position:fixed; inset:0; z-index:-1; filter:saturate(1.2); opacity:.9}

/* Topbar / HUD */
.topbar{
  position:sticky; top:0; z-index:50; backdrop-filter: blur(8px);
  background:linear-gradient(180deg, #000000a6, #0000);
  border-bottom:1px solid #ffffff18; padding:10px 16px; display:flex; justify-content:space-between; align-items:center;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800}
.tag{margin-left:8px; opacity:.6; font-weight:600; font-size:12px}
.account{display:flex; align-items:center; gap:20px}
.user{display:flex; gap:10px; align-items:center}
.avatar{width:36px; height:36px; border-radius:50%; border:2px solid #ffffff2e}
.who div[contenteditable]{outline:0; padding:1px 4px; border-radius:6px}
.who small{opacity:.6}
.who div[contenteditable]:focus{background:#ffffff12}
.bank{display:flex; align-items:center; gap:8px; background:#ffffff10; padding:6px 10px; border-radius:999px; border:1px solid #ffffff1f}
.btn{appearance:none; border:1px solid #ffffff28; background:#1a2038; color:#fff; padding:10px 12px; border-radius:12px; cursor:pointer; font-weight:700}
.btn:hover{filter:brightness(1.06)}
.btn.primary{background:linear-gradient(135deg, var(--brand), var(--brand2)); border-color:transparent}
.btn.pill{border-radius:999px; padding:6px 12px}

/* Layout */
.container{max-width:1200px; margin:28px auto; padding:0 16px}
.muted{color:var(--muted)}
.stats{display:flex; gap:16px}
.stats div{background:#ffffff10; border:1px solid #ffffff18; padding:10px 14px; border-radius:14px; min-width:100px}
.stats b{font-size:20px; display:block}

/* Grid + cards */
.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fill, minmax(280px,1fr))}
.card{
  position:relative; padding:18px; border-radius:18px;
  border:1px solid #ffffff25; background:linear-gradient(135deg, var(--card1), var(--card2));
  transition:.16s transform ease, .2s box-shadow ease, .2s border-color ease; cursor:pointer;
}
.card:hover{transform:translateY(-2px) scale(1.02); border-color:#9d67ff66; box-shadow:0 10px 30px #9d67ff33}
.card .icon{font-size:52px; margin:-6px 0 2px}
.card .title{font-weight:800}
.card .desc{font-size:14px; color:var(--muted)}
.badge{position:absolute; top:10px; right:10px; background:#ff386433; color:#ff9ab1; border:1px solid #ff9ab166; padding:2px 8px; border-radius:999px; font-size:12px}

/* Panels / games */
.panewrap{display:grid; grid-template-columns:320px 1fr; gap:16px}
@media(max-width:900px){.panewrap{grid-template-columns:1fr}}
.panel{border:1px solid #ffffff20; background:var(--panel); border-radius:16px; padding:14px}
.panel h3{margin:0 0 8px}
.row{display:flex; gap:10px; flex-wrap:wrap}
.input{background:#121733; border:1px solid #ffffff24; color:#fff; padding:10px 12px; border-radius:12px}

/* Roulette */
#roulette-canvas{width:100%; height:380px; background:#0b0f21; border:1px solid #ffffff14; border-radius:12px}

/* Blackjack cards */
.cards{display:flex; gap:10px; flex-wrap:wrap}
.cardface{width:72px; height:96px; background:#fff; color:#111; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:800; border:2px solid #ddd}
.cardface.red{color:#c8102e}

/* Toast */
.toast{position:fixed; bottom:16px; left:50%; transform:translateX(-50%); background:#171c2e; border:1px solid #ffffff28; padding:10px 14px; border-radius:12px}
.toast.hidden{display:none}
.toast.good{border-color:#3cff9f77} .toast.bad{border-color:#ff7aa777}

/* ===== POLISHED ROULETTE ===== */
.roulette-wrap{
  display:grid; grid-template-columns:320px 1fr 420px; gap:16px;
}
@media(max-width:1200px){ .roulette-wrap{ grid-template-columns:1fr; } .panel.center{order:-1} }

.panel.rail h3{margin-top:2px}
.chips{display:flex; gap:10px; margin-bottom:8px; flex-wrap:wrap}
.chip{
  border:none; cursor:pointer; font-weight:800; border-radius:999px; padding:10px 14px;
  background:#0f1837; border:1px solid #ffffff22; color:#fff; min-width:56px; text-align:center
}
.chip.active{background:linear-gradient(135deg,var(--brand),var(--brand2)); border-color:transparent}
.result-line{margin-top:8px}
.tape{margin-top:16px; background:#0e1531; border:1px solid #ffffff18; border-radius:12px; padding:10px}
.tape-title{opacity:.7; font-size:13px; margin-bottom:6px}
.tape-nums{display:flex; gap:8px; flex-wrap:wrap}
.tape-nums .ball{
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; border:2px solid #00000044; color:#fff
}
.tape-nums .green{background:#0a8a4d}
.tape-nums .red{background:#c81e2a}
.tape-nums .black{background:#1a1a1a}

.board{min-height:420px}
.board-grid{
  display:grid; grid-template-columns:repeat(12, 1fr); gap:6px; margin-top:8px;
}
.board-cell{
  height:46px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-weight:800; border:1px solid #ffffff22; user-select:none; cursor:pointer;
}
.board-cell.red{background:#2a0e16; color:#f2f2f2}
.board-cell.black{background:#0f1324; color:#f2f2f2}
.board-cell.green{background:#063d25; color:#d0ffe6}
.board-cell:hover{outline:2px solid #9d67ff77}

.legend{display:flex; gap:14px; align-items:center; margin-top:8px; opacity:.8}
.legend .reddot,.legend .blackdot{width:10px;height:10px;border-radius:50%}
.legend .reddot{background:#c81e2a}
.legend .blackdot{background:#1a1a1a}

/* wheel canvas frame */
.panel.center{display:flex; flex-direction:column; align-items:center; justify-content:center}

/* Active Bets Dock */
.bets-dock{
  position:sticky; bottom:0; left:0; right:0; z-index:60;
  display:flex; gap:10px; overflow:auto; padding:10px 16px;
  background:linear-gradient(180deg, #0000, #000a 30%, #000c 100%);
  border-top:1px solid #ffffff22;
}
.bet-tag{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px;
  background:#0f152e; border:1px solid #ffffff22; color:#fff; white-space:nowrap;
}
.bet-tag .av{width:28px; height:28px; border-radius:50%; border:2px solid #ffffff33}
.bet-tag .user{font-weight:800}
.bet-tag .sel{opacity:.8}
.bet-tag .amt{font-weight:800; background:linear-gradient(135deg,var(--brand),var(--brand2)); padding:4px 8px; border-radius:999px; margin-left:4px}
/* ======= “PRO” ROULETTE ======= */
:root{
  --deep:#0c0f1e; --panel2:#171b33;
  --red:#ff4d6d; --red-d:#2a1520;
  --green:#47d867; --green-d:#153222;
  --purple:#8b79ff; --purple-d:#221b48;
  --blue:#6ac4ff; --blue-d:#0f2840;
  --line:#262c4e;
}
.rollbar{padding:18px;}
.reel-wrap{position:relative; overflow:hidden; border-radius:14px; background:#0f1226; border:1px solid #1f254a; padding:12px 4px;}
.reel{display:flex; gap:16px; transform:translate3d(0,0,0); will-change:transform; padding:8px 24px;}
.tile{
  width:92px; height:72px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:34px; font-weight:900; color:#fff; border:1px solid #2a3159; box-shadow: inset 0 0 40px #00000033;
}
.tile.red{background:linear-gradient(180deg,#ef3a63,#c82c56)}
.tile.green{background:linear-gradient(180deg,#33d06a,#2db95d)}
.tile.purple{background:linear-gradient(180deg,#7a6eff,#5a4fff)}
.tile.blue{background:linear-gradient(180deg,#60baff,#429ae1)}
.marker{position:absolute; top:6px; bottom:6px; left:50%; width:4px; transform:translateX(-50%); background:#fff; border-radius:2px; box-shadow:0 0 0 3px #ffffff20}
.roll-eta{display:flex; align-items:center; gap:14px; margin-top:10px}
.roll-eta .bar{flex:1; height:6px; background:#141936; border-radius:99px; overflow:hidden}
.roll-eta .bar .bar-fill{height:100%; background:linear-gradient(90deg,#ff8ab0,#8b79ff,#6ac4ff); width:100%}
.roll-eta .eta-text{font-weight:800}

.controls{padding:14px 18px}
.amount label{display:block; opacity:.8; margin-bottom:6px}
.amount-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.amount-box{display:flex; align-items:center; gap:6px; background:#121733; border:1px solid #1f254a; border-radius:10px; padding:8px 10px}
.amount-box .usd{opacity:.7}
.amount-box input{all:unset; width:120px; font-weight:800}
.mul button{background:#171f42; border:1px solid #2a3159; color:#fff; padding:8px 12px; border-radius:8px; cursor:pointer; margin-right:6px; font-weight:800}
.mul button:hover{filter:brightness(1.1)}
.last100{display:flex; gap:8px; align-items:center; background:#141a34; border:1px solid #232a4c; border-radius:10px; padding:6px 10px}
.last100 .dot{width:12px;height:12px;border-radius:50%}
.dot.red{background:var(--red)} .dot.green{background:var(--green)} .dot.purple{background:var(--purple)} .dot.blue{background:var(--blue)}
.jackpot{margin-left:auto; display:flex; align-items:center; gap:12px}
.jackpot span{opacity:.7}
.jackpot b{font-size:18px}
.jack-icons .ji{width:28px;height:28px;border-radius:50%;display:inline-block;border:2px solid #00000033;margin-left:6px}
.ji.green{background:var(--green)} .ji.purple{background:var(--purple)} .ji.blue{background:var(--blue)} .ji.gray{background:#4b5372}

.quick-row{display:flex; gap:8px; margin-top:8px}
.q.pill{border-radius:12px; padding:6px 10px; border:1px solid #2a3159; background:#161d3d; color:#fff}
.q.red{background:#2a1421} .q.green{background:#132b1f} .q.purple{background:#1b1841}

.bets-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:16px}
@media(max-width:1200px){.bets-grid{grid-template-columns:1fr 1fr}}
.bucket-head{display:flex; justify-content:space-between; align-items:center}
.bucket .title{font-weight:900}
.icons .chip{width:22px;height:22px;border-radius:50%;display:inline-block;border:2px solid #0003;margin-left:6px;box-shadow:inset 0 4px 12px #0005}
.chip.red{background:var(--red)} .chip.green{background:var(--green)} .chip.purple{background:var(--purple)} .chip.blue{background:var(--blue)}
.chip.small{transform:scale(.8)}
.cta{margin-top:8px; width:100%; border-radius:10px; padding:12px 14px; font-weight:900; border:1px solid #ffffff22; cursor:pointer}
.cta.red{background:linear-gradient(180deg,#ef3a63,#c82c56)} .cta.green{background:linear-gradient(180deg,#33d06a,#2db95d)}
.cta.purple{background:linear-gradient(180deg,#7a6eff,#5a4fff)} .cta.blue{background:linear-gradient(180deg,#6ac4ff,#429ae1)}
.bucket-meta{display:flex; justify-content:space-between; opacity:.8; margin-top:8px}
.bet-list{margin-top:8px; max-height:220px; overflow:auto; border:1px solid #20264b; background:#121733; border-radius:10px}
.bet-row{display:flex; justify-content:space-between; align-items:center; padding:10px 10px; border-bottom:1px solid #1b2144}
.bet-row:last-child{border-bottom:none}
.userbox{display:flex; align-items:center; gap:10px}
.userbox .rank{width:22px;height:22px;border-radius:50%;background:#ffd56a; display:inline-block}
.userbox .av{width:26px;height:26px;border-radius:50%; border:2px solid #ffffff22}
.userbox .name{font-weight:800}
.amountbox{display:flex; align-items:center; gap:10px}
.amountbox .usd{opacity:.8}
.amountbox .coin{width:22px;height:22px;border-radius:50%;background:#3ba3ff33; display:inline-block}
.panel.rollbar, .panel.controls, .bucket.panel{background:var(--panel2); border-color:var(--line)}
/* ===== Polished Roulette (real wheel) ===== */
.panel.rollbar{padding:14px}
.wheel-wrap{position:relative; width:520px; height:520px; margin:0 auto}
.pointer{position:absolute; top:-4px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:18px solid #ffd875; filter:drop-shadow(0 0 6px #ffd87566)}
.roll-eta{display:flex; align-items:center; gap:14px; margin-top:10px}
.roll-eta .bar{flex:1; height:6px; background:#141936; border-radius:99px; overflow:hidden}
.roll-eta .bar .bar-fill{height:100%; background:linear-gradient(90deg,#ff8ab0,#8b79ff,#6ac4ff); width:100%}
.roll-eta .eta-text{font-weight:800}

.pfair{display:flex; gap:18px; align-items:flex-start; justify-content:space-between}
.pf-title{font-weight:800; margin-bottom:6px}
.pf-row{display:flex; gap:8px; align-items:center; margin:4px 0}
.pf-row code{background:#101633; border:1px solid #1d2550; padding:4px 6px; border-radius:6px}
.tape{margin-left:auto; background:#0e1531; border:1px solid #ffffff18; border-radius:12px; padding:10px; min-width:240px}
.tape-title{opacity:.7; font-size:13px; margin-bottom:6px}
.tape-nums{display:flex; gap:6px; flex-wrap:wrap}
.tape-nums .ball{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; border:2px solid #0004 }
.tape-nums .r{background:#bb1d2a} .tape-nums .b{background:#101319} .tape-nums .g{background:#0a8a4d}

.controls .amount-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.chips{display:flex; gap:8px}
.chip{border:none; cursor:pointer; font-weight:900; border-radius:999px; padding:10px 14px; min-width:56px; text-align:center; background:#0f1837; border:1px solid #ffffff22; color:#fff}
.chip.active{background:linear-gradient(135deg,#a46bff,#60d0ff); border-color:transparent}
.amtbox{display:flex; align-items:center; gap:6px; background:#121733; border:1px solid #1f254a; border-radius:10px; padding:8px 10px}
.amtbox input{all:unset; width:120px; font-weight:800}
.mul button{background:#171f42; border:1px solid #2a3159; color:#fff; padding:8px 12px; border-radius:8px; cursor:pointer; margin-right:6px; font-weight:800}

.table-wrap{display:grid; grid-template-columns:1fr 380px; gap:16px}
.board-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:6px}
.board-cell{height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; border:1px solid #ffffff22; user-select:none; cursor:pointer}
.board-cell.red{background:#2a0e16; color:#f2f2f2}
.board-cell.black{background:#0f1324; color:#f2f2f2}
.board-cell.green{background:#063d25; color:#d0ffe6}
.board-cell:hover{outline:2px solid #9d67ff77}
.outside{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px}
.obtn{padding:10px; border-radius:10px; border:1px solid #27305a; background:#141b3a; color:#fff; font-weight:800; cursor:pointer}
.obtn.red{background:#2a1421} .obtn.black{background:#101319}

.bets-panel h3{margin:0 0 8px}
.bets-dock{display:flex; flex-direction:column; gap:8px; max-height:360px; overflow:auto; border:1px solid #20264b; background:#121733; border-radius:10px; padding:8px}
.bet-row{display:flex; justify-content:space-between; align-items:center; background:#0f152e; border:1px solid #ffffff22; border-radius:10px; padding:8px 10px}
.bet-user{display:flex; align-items:center; gap:8px}
.bet-user img{width:26px; height:26px; border-radius:50%; border:2px solid #ffffff22}
.bet-user .name{font-weight:800}
.badge{font-size:12px; opacity:.8}
.bet-amt{font-weight:900}
.totals{margin-top:10px; display:flex; justify-content:space-between}